├── .stickler.yml ├── assets ├── img │ ├── dome.png │ ├── avatar.png │ ├── gray-squares.png │ ├── hero-section.png │ ├── lineup │ │ ├── frank.jpg │ │ ├── lana.jpg │ │ ├── rage.jpg │ │ ├── yorke.jpg │ │ ├── calvin.jpg │ │ └── travis.jpg │ ├── events │ │ ├── madrid.jpg │ │ └── santiago.jpg │ ├── hero-section2.png │ ├── loachella-icon1.svg │ ├── loachella-icon2.svg │ ├── loachella-logo-primary.svg │ ├── loachella-logo-secondary.svg │ └── loachella-logo-third.svg ├── fonts │ ├── Cocogoose_trial.otf │ └── Cocogoose-Pro-trial.ttf └── js │ ├── positioning-index.js │ └── header-footer-positioning.js ├── src ├── pages │ ├── about │ │ ├── about-positioning.js │ │ ├── about-skeleton.html │ │ ├── about.css │ │ └── about.html │ ├── schedule │ │ ├── schedule-positioning.js │ │ ├── schedule-skeleton.html │ │ ├── schedule.css │ │ └── schedule.html │ ├── ticketes │ │ ├── ticketes-positioning.js │ │ ├── Tickets.js │ │ ├── ticketes-skeleton.html │ │ ├── tickets.css │ │ └── tickets.html │ └── application │ │ ├── App-positioning.js │ │ ├── App.js │ │ ├── App-skeleton.html │ │ ├── App.css │ │ └── App.html └── components │ ├── footer │ ├── footer.css │ └── footer.html │ ├── scroll-header │ ├── scrolling-navbar.js │ ├── scroll-header.css │ └── scroll-header.html │ └── header │ ├── header.css │ └── header.html ├── .gitignore ├── README.md ├── index.html ├── style.css └── stylelint.config.js /.stickler.yml: -------------------------------------------------------------------------------- 1 | linters: 2 | stylelint: 3 | 4 | config: 'stylelint.config.js' -------------------------------------------------------------------------------- /assets/img/dome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/dome.png -------------------------------------------------------------------------------- /assets/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/avatar.png -------------------------------------------------------------------------------- /assets/img/gray-squares.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/gray-squares.png -------------------------------------------------------------------------------- /assets/img/hero-section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/hero-section.png -------------------------------------------------------------------------------- /assets/img/lineup/frank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/lineup/frank.jpg -------------------------------------------------------------------------------- /assets/img/lineup/lana.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/lineup/lana.jpg -------------------------------------------------------------------------------- /assets/img/lineup/rage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/lineup/rage.jpg -------------------------------------------------------------------------------- /assets/img/lineup/yorke.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/lineup/yorke.jpg -------------------------------------------------------------------------------- /assets/img/events/madrid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/events/madrid.jpg -------------------------------------------------------------------------------- /assets/img/hero-section2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/hero-section2.png -------------------------------------------------------------------------------- /assets/img/lineup/calvin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/lineup/calvin.jpg -------------------------------------------------------------------------------- /assets/img/lineup/travis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/lineup/travis.jpg -------------------------------------------------------------------------------- /assets/fonts/Cocogoose_trial.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/fonts/Cocogoose_trial.otf -------------------------------------------------------------------------------- /assets/img/events/santiago.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/img/events/santiago.jpg -------------------------------------------------------------------------------- /src/pages/about/about-positioning.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | //load page elements 3 | $("#main").load("about.html"); 4 | 5 | }); -------------------------------------------------------------------------------- /assets/fonts/Cocogoose-Pro-trial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bertil291utn/concert-tickets/HEAD/assets/fonts/Cocogoose-Pro-trial.ttf -------------------------------------------------------------------------------- /src/pages/schedule/schedule-positioning.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | //load page elements 3 | $("#main").load("schedule.html"); 4 | 5 | }); -------------------------------------------------------------------------------- /src/pages/ticketes/ticketes-positioning.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | //load page elements 3 | $("#main").load("tickets.html"); 4 | 5 | }); -------------------------------------------------------------------------------- /assets/js/positioning-index.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | //load page elements 3 | $("#app").load("/src/pages/application/App-skeleton.html"); 4 | 5 | }); -------------------------------------------------------------------------------- /src/pages/application/App-positioning.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | //load page elements 3 | $("#main").load("/src/pages/application/App.html"); 4 | 5 | }); -------------------------------------------------------------------------------- /assets/js/header-footer-positioning.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | // load page elements 3 | $("#encabezado").load("/src/components/header/header.html"); 4 | $("#pie-de-pagina").load("/src/components/footer/footer.html"); 5 | $("#scroll-header").load("/src/components/scroll-header/scroll-header.html"); 6 | 7 | }); -------------------------------------------------------------------------------- /assets/img/loachella-icon1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/img/loachella-icon2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: #2e2e2e; 3 | color: var(--third-color); 4 | } 5 | 6 | .footer .container-fluid { 7 | display: flex; 8 | align-items: center; 9 | justify-content: space-evenly; 10 | padding-top: 60px; 11 | padding-bottom: 60px; 12 | } 13 | 14 | .info-footer p { 15 | font-size: 14px; 16 | } 17 | 18 | @media only screen and (min-width: 992px) { 19 | .logo { 20 | margin-left: 15%; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/scroll-header/scrolling-navbar.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | window.onscroll = function () { myFunction() }; 3 | 4 | var navTwo = document.getElementById("scroll-header"); 5 | navTwo.classList.add("d-none") 6 | function myFunction() { 7 | 8 | if (window.pageYOffset >= 300) { 9 | navTwo.classList.remove("d-none") 10 | } 11 | else { 12 | navTwo.classList.add("d-none") 13 | } 14 | } 15 | }); -------------------------------------------------------------------------------- /src/pages/application/App.js: -------------------------------------------------------------------------------- 1 | //get button view more 2 | function viewMore() { 3 | var elementsToShow = document.getElementById("view-more"); 4 | var nameButton = document.getElementById("name-button"); 5 | var iconButton = document.getElementById("icon-button"); 6 | 7 | if (elementsToShow.classList.contains("d-none")) { 8 | elementsToShow.classList.remove("d-none"); 9 | nameButton.innerHTML="LESS"; 10 | iconButton.classList.remove("fa-angle-down"); 11 | iconButton.classList.add("fa-angle-up"); 12 | } 13 | else { 14 | elementsToShow.classList.add("d-none"); 15 | nameButton.innerHTML="MORE"; 16 | iconButton.classList.remove("fa-angle-up"); 17 | iconButton.classList.add("fa-angle-down"); 18 | 19 | } 20 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig 2 | 3 | # Created by https://www.gitignore.io/api/windows 4 | # Edit at https://www.gitignore.io/?templates=windows 5 | 6 | ### Windows ### 7 | # Windows thumbnail cache files 8 | Thumbs.db 9 | Thumbs.db:encryptable 10 | ehthumbs.db 11 | ehthumbs_vista.db 12 | 13 | # Dump file 14 | *.stackdump 15 | 16 | # Folder config file 17 | [Dd]esktop.ini 18 | 19 | # Recycle Bin used on file shares 20 | $RECYCLE.BIN/ 21 | 22 | # Windows Installer files 23 | *.cab 24 | *.msi 25 | *.msix 26 | *.msm 27 | *.msp 28 | 29 | # Windows shortcuts 30 | *.lnk 31 | 32 | # End of https://www.gitignore.io/api/windows 33 | 34 | # Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option) 35 | 36 | node_modules/* 37 | package-lock.json 38 | .vscode -------------------------------------------------------------------------------- /src/components/scroll-header/scroll-header.css: -------------------------------------------------------------------------------- 1 | .fixed { 2 | position: fixed; 3 | top: 0; 4 | right: 0; 5 | background-color: #fff; 6 | width: 100%; 7 | z-index: 100; 8 | } 9 | 10 | .flex-adjust-center { 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | } 15 | 16 | .left-side-scroll { 17 | margin-top: 10px; 18 | margin-bottom: 10px; 19 | } 20 | 21 | .left-side-scroll i { 22 | color: var(--secondary-color); 23 | } 24 | 25 | .list-links i { 26 | margin-right: 10px; 27 | } 28 | 29 | .left-side-scroll a:hover i { 30 | color: var(--primary-color); 31 | } 32 | 33 | .left-side-scroll a:hover { 34 | color: var(--primary-color); 35 | text-decoration: none; 36 | } 37 | 38 | .border-shadow-scroll { 39 | /* position: absolute; */ 40 | box-shadow: -5px -2px 14px 6px #ee523c; 41 | 42 | /* margin-top: 30%; */ 43 | } 44 | 45 | .list-links li { 46 | margin: 12px; 47 | text-align: center; 48 | } 49 | 50 | @media only screen and (max-width: 461px) { 51 | .list-links i { 52 | margin-right: 0; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/components/footer/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |
20 |
2020 Loachella Group
21 |
All rights reserved
22 |
23 |

Welcome to AEG’s Privacy Request Portal. This form allows you to submit 24 | certain data rights requests across the AEG family of companies.

25 |
26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Loachella festival schedule app 2 | 3 | ### Loachella a made-up music festival website. It displays a schedule, about the festival and also would allow you to buy tickets. 4 | 5 |

6 | 7 |

8 | 9 | Check [improvements](#improvements) section. 10 | 11 | ## Live demo 12 | 13 | Check it out💻 14 | 15 | ## Built With 16 | 17 | - HMTL5 18 | - CSS 19 | - Bootstrap 20 | - Javascript 21 | 22 | ## Authors 23 | 24 | 👤 **Bertil Tandayamo** 25 | 26 | - Github: [@bertil291utn](https://github.com/bertil291utn) 27 | - Twitter: [@btandayamo](https://twitter.com/batandayamo) 28 | - Linkedin: [Bertil Tandayamo](http://bit.ly/bertil_linkedin) 29 | 30 | ## Improvements 31 | 32 | - Retrieve data from a backend 33 | - Move from HTML and vanilla CSS to React JS 34 | 35 | ## Acknowledgment 36 | 37 | 📄💻 Layouts design by Cindy Shin on Behance 38 | 39 | ## 🤝 Contributing 40 | 41 | Contributions, issues and feature requests are welcome! 42 | 43 | 44 | ## Show your support 45 | 46 | Give a ⭐️ if you like this project! 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/pages/application/App-skeleton.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Document 22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 |
33 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | Loachella Mountain 28 | 29 | 30 | 31 | 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/pages/ticketes/Tickets.js: -------------------------------------------------------------------------------- 1 | //get button view more 2 | function selectHeadphones() { 3 | var alertSelect = document.getElementById("alert-select-headphones"); 4 | var alertError = document.getElementById("alert-error-headphones"); 5 | 6 | 7 | if ($('input:radio:checked').length == 0) { 8 | //if there's no input checked 9 | alertError.classList.remove("d-none"); 10 | setTimeout(function () { alertError.classList.add("d-none"); }, 4000); 11 | } 12 | else { 13 | alertSelect.classList.remove("d-none"); 14 | setTimeout(function () { alertSelect.classList.add("d-none"); }, 4000); 15 | //if wednesday and thursday are checked 16 | if (document.querySelector('input[name="thursday"]:checked') && 17 | document.querySelector('input[name="wednesday"]:checked')) { 18 | document.querySelector('input[name="thursday"]:checked').checked = false; 19 | document.querySelector('input[name="wednesday"]:checked').checked = false; 20 | } else if (document.querySelector('input[name="thursday"]:checked')) { 21 | //if it's just thursday checked 22 | 23 | document.querySelector('input[name="thursday"]:checked').checked = false; 24 | } 25 | else { 26 | document.querySelector('input[name="wednesday"]:checked').checked = false; 27 | } 28 | } 29 | 30 | 31 | 32 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* GLOBALS VARIABLES */ 2 | 3 | :root { 4 | --primary-color: #ee523c; 5 | --secondary-color: #272a31; 6 | --third-color: #d3d3d3; 7 | } 8 | 9 | @font-face { 10 | font-family: "CocoGoose"; 11 | src: url("assets/fonts/Cocogoose_trial.otf") format("truetype"); 12 | } 13 | 14 | body { 15 | font-family: "Lato", sans-serif !important; 16 | min-width: 375px; 17 | } 18 | 19 | .titles-font-family { 20 | font-family: "CocoGoose", sans-serif !important; 21 | } 22 | 23 | .text-primary-color { 24 | color: var(--primary-color); 25 | } 26 | 27 | .text-secondary-color { 28 | color: var(--secondary-color); 29 | } 30 | 31 | .text-third-color { 32 | color: var(--third-color); 33 | } 34 | 35 | .bg-primary-color { 36 | background-color: var(--primary-color); 37 | } 38 | 39 | .bg-secondary-color { 40 | background-color: var(--secondary-color); 41 | } 42 | 43 | .bg-third-color { 44 | background-color: var(--third-color); 45 | } 46 | 47 | .text-align-center { 48 | text-align: center; 49 | } 50 | 51 | .opacity { 52 | background-image: linear-gradient(rgb(100, 99, 99), rgba(238, 82, 60, 0.41)); 53 | height: 100%; 54 | } 55 | 56 | p { 57 | margin: 0 !important; 58 | } 59 | 60 | .btn-outline-primary:not(:disabled):not(.disabled):active { 61 | color: #fff; 62 | background-color: var(--primary-color); 63 | } 64 | 65 | .section-title { 66 | margin-bottom: 30px; 67 | } 68 | 69 | .section-title hr { 70 | border-color: var(--primary-color); 71 | margin: 0 auto; 72 | width: 50px; 73 | } 74 | 75 | .section-title h4 { 76 | text-align: center; 77 | font-weight: 600; 78 | } 79 | 80 | .hidden-section-title { 81 | display: none; 82 | } 83 | -------------------------------------------------------------------------------- /src/pages/schedule/schedule-skeleton.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | Schedule 32 | 33 | 34 | 35 |
36 |
37 |
38 |
39 |
40 |
41 | 42 |
43 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/pages/ticketes/ticketes-skeleton.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | Tickets 32 | 33 | 34 | 35 |
36 |
37 |
38 |
39 |
40 |
41 | 42 |
43 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/pages/about/about-skeleton.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | About 33 | 34 | 35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 | 43 |
44 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/components/header/header.css: -------------------------------------------------------------------------------- 1 | ul { 2 | margin: 0; 3 | } 4 | 5 | .flex-adjust-center { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } 10 | 11 | a { 12 | color: unset; 13 | text-decoration: none; 14 | background-color: unset; 15 | } 16 | 17 | .fixed { 18 | position: fixed; 19 | top: 0; 20 | right: 0; 21 | width: 100%; 22 | z-index: 100; 23 | } 24 | 25 | .top-navbar { 26 | background-color: #3e3e3e; 27 | color: #fff; 28 | padding: 4px 0; 29 | } 30 | 31 | .top-navbar ul { 32 | justify-content: flex-end; 33 | } 34 | 35 | .top-navbar li { 36 | margin: 0 5px; 37 | } 38 | 39 | .top-navbar span { 40 | font-size: 12px; 41 | } 42 | 43 | .top-navbar i { 44 | color: #fff; 45 | } 46 | 47 | .left-side i { 48 | color: var(--third-color); 49 | } 50 | 51 | .center-list { 52 | width: 40%; 53 | margin-left: 20%; 54 | } 55 | 56 | .center-list ul { 57 | margin: 0; 58 | justify-content: space-around; 59 | } 60 | 61 | .center-list li { 62 | margin-right: 10px; 63 | } 64 | 65 | .contenedor { 66 | position: absolute; 67 | } 68 | 69 | .bottom-navbar .container-fluid { 70 | padding-top: 20px; 71 | padding-bottom: 20px; 72 | } 73 | 74 | .campaign-button { 75 | color: var(--secondary-color); 76 | border: 3px solid var(--primary-color); 77 | border-radius: 0; 78 | width: 150px; 79 | } 80 | 81 | .border-shadow-header { 82 | box-shadow: -5px -2px 14px 6px #ee523c; 83 | } 84 | 85 | .center-list a:hover, 86 | .top-navbar a:hover { 87 | text-decoration: none; 88 | } 89 | 90 | .center-list a:hover span, 91 | .top-navbar a:hover span, 92 | .top-navbar a:hover i { 93 | color: var(--primary-color); 94 | } 95 | 96 | .campaign-button:hover { 97 | background-color: var(--primary-color); 98 | border-color: var(--primary-color); 99 | color: #fff; 100 | } 101 | 102 | .campaign-button:focus, 103 | .campaign-button:active { 104 | outline: none !important; 105 | box-shadow: 0 0 0 0.2rem #ee523c5c !important; 106 | border-color: var(--primary-color) !important; 107 | } 108 | 109 | @media only screen and (max-width: 768px) { 110 | .border-shadow-header { 111 | box-shadow: none !important; 112 | } 113 | } 114 | 115 | @media only screen and (min-width: 768px) { 116 | .behind-navbar { 117 | margin-top: 80px; 118 | } 119 | 120 | .fixed { 121 | background-color: white; 122 | } 123 | 124 | .contenedor { 125 | background-color: #fff; 126 | top: 0; 127 | right: 0; 128 | width: 100%; 129 | z-index: 100; 130 | } 131 | } 132 | 133 | @media only screen and (min-width: 1200px) { 134 | .top-navbar .container-fluid, 135 | .bottom-navbar .container-fluid { 136 | padding-left: 150px; 137 | padding-right: 150px; 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /src/components/header/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 72 |
73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/pages/about/about.css: -------------------------------------------------------------------------------- 1 | /* global var */ 2 | 3 | main section .container-fluid { 4 | padding-top: 30px; 5 | padding-bottom: 30px; 6 | } 7 | 8 | .articles-section { 9 | font-family: 'Montserrat', sans-serif; 10 | } 11 | 12 | .article-informacion { 13 | margin: 30px 0; 14 | } 15 | 16 | /* main */ 17 | 18 | .background-image { 19 | background-position: center; 20 | background-size: cover; 21 | background-repeat: no-repeat; 22 | height: 100%; 23 | } 24 | 25 | .hero-section { 26 | background-image: url(/assets/img/hero-section.png); 27 | } 28 | 29 | .hero-section .container-fluid { 30 | color: #fff; 31 | padding-top: 100px; 32 | padding-bottom: 40px; 33 | } 34 | 35 | .info-hero { 36 | background-color: #fff; 37 | border: 1px solid var(--third-color); 38 | padding: 20px; 39 | margin: 20px 0; 40 | } 41 | 42 | .info-hero p { 43 | text-align: center; 44 | line-height: 30px; 45 | } 46 | 47 | .bottom-info-hero { 48 | text-align: center; 49 | } 50 | 51 | .bottom-info-hero a:hover { 52 | color: unset; 53 | text-decoration: none; 54 | } 55 | 56 | .bottom-info-hero .email:hover { 57 | cursor: pointer; 58 | text-decoration: underline; 59 | } 60 | 61 | .title { 62 | padding-bottom: 30px; 63 | } 64 | 65 | .global-summit { 66 | text-align: center; 67 | border-bottom: 2px solid #f9f9f9; 68 | } 69 | 70 | .global-summit .title { 71 | margin: 0 auto; 72 | width: 80%; 73 | } 74 | 75 | .global-summit-logo { 76 | border: 2px solid #f9f9f9; 77 | margin: 0 auto; 78 | padding: 30px 0; 79 | } 80 | 81 | .past-gs .container-fluid { 82 | padding-left: 50px; 83 | padding-right: 50px; 84 | } 85 | 86 | #first-article { 87 | background-image: url(/assets/img/events/santiago.jpg); 88 | } 89 | 90 | #second-article { 91 | background-image: url(/assets/img/events/madrid.jpg); 92 | } 93 | 94 | .opacity-past-gs { 95 | background-image: linear-gradient(rgba(238, 82, 60, 0.7), rgba(238, 82, 60, 0.62)); 96 | height: 100%; 97 | } 98 | 99 | .contenido { 100 | margin: 0 auto; 101 | padding: 70px 0; 102 | color: #fff; 103 | } 104 | 105 | .partners { 106 | background-color: #414246; 107 | } 108 | 109 | .partners .container-fluid { 110 | padding-top: 30px; 111 | padding-bottom: 30px; 112 | } 113 | 114 | .partners .section-title { 115 | color: #8f8f8f; 116 | padding-bottom: 30px; 117 | margin: 0; 118 | } 119 | 120 | .partners .partners-info i { 121 | color: #8f8f8f; 122 | } 123 | 124 | .partners-info .list-unstyled { 125 | display: flex; 126 | flex-wrap: wrap; 127 | justify-content: space-around; 128 | } 129 | 130 | .partners-info li { 131 | margin: 10px; 132 | } 133 | 134 | .partners-info i:hover { 135 | color: #fff; 136 | } 137 | 138 | /* media query */ 139 | 140 | @media only screen and (max-width: 576px) { 141 | .hero-section .container-fluid { 142 | padding-top: 80px; 143 | } 144 | } 145 | 146 | @media only screen and (min-width: 768px) { 147 | .partners-info .list-unstyled { 148 | margin: 0 100px; 149 | } 150 | } 151 | 152 | @media only screen and (min-width: 992px) { 153 | .hero-contenedor-info, 154 | .global-summit, 155 | .past-gs, 156 | .past-gs .background-image { 157 | margin: 0 auto; 158 | width: 80%; 159 | } 160 | } 161 | 162 | @media only screen and (min-width: 1200px) { 163 | .past-gs .container-fluid { 164 | padding-left: 0; 165 | padding-right: 0; 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/components/scroll-header/scroll-header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 84 |
85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | module.exports = { 4 | "extends": "stylelint-config-recommended", 5 | "rules": { 6 | "at-rule-empty-line-before": [ "always", { 7 | except: [ 8 | "blockless-after-same-name-blockless", 9 | "first-nested", 10 | ], 11 | ignore: ["after-comment"], 12 | } ], 13 | "at-rule-name-case": "lower", 14 | "at-rule-name-space-after": "always-single-line", 15 | "at-rule-semicolon-newline-after": "always", 16 | "block-closing-brace-empty-line-before": "never", 17 | "block-closing-brace-newline-after": "always", 18 | "block-closing-brace-newline-before": "always-multi-line", 19 | "block-closing-brace-space-before": "always-single-line", 20 | "block-opening-brace-newline-after": "always-multi-line", 21 | "block-opening-brace-space-after": "always-single-line", 22 | "block-opening-brace-space-before": "always", 23 | "color-hex-case": "lower", 24 | "color-hex-length": "short", 25 | "comment-empty-line-before": [ "always", { 26 | except: ["first-nested"], 27 | ignore: ["stylelint-commands"], 28 | } ], 29 | "comment-whitespace-inside": "always", 30 | "custom-property-empty-line-before": [ "always", { 31 | except: [ 32 | "after-custom-property", 33 | "first-nested", 34 | ], 35 | ignore: [ 36 | "after-comment", 37 | "inside-single-line-block", 38 | ], 39 | } ], 40 | "declaration-bang-space-after": "never", 41 | "declaration-bang-space-before": "always", 42 | "declaration-block-semicolon-newline-after": "always-multi-line", 43 | "declaration-block-semicolon-space-after": "always-single-line", 44 | "declaration-block-semicolon-space-before": "never", 45 | "declaration-block-single-line-max-declarations": 1, 46 | "declaration-block-trailing-semicolon": "always", 47 | "declaration-colon-newline-after": "always-multi-line", 48 | "declaration-colon-space-after": "always-single-line", 49 | "declaration-colon-space-before": "never", 50 | "declaration-empty-line-before": [ "always", { 51 | except: [ 52 | "after-declaration", 53 | "first-nested", 54 | ], 55 | ignore: [ 56 | "after-comment", 57 | "inside-single-line-block", 58 | ], 59 | } ], 60 | "function-comma-newline-after": "always-multi-line", 61 | "function-comma-space-after": "always-single-line", 62 | "function-comma-space-before": "never", 63 | "function-max-empty-lines": 0, 64 | "function-name-case": "lower", 65 | "function-parentheses-newline-inside": "always-multi-line", 66 | "function-parentheses-space-inside": "never-single-line", 67 | "function-whitespace-after": "always", 68 | "indentation": 2, 69 | "length-zero-no-unit": true, 70 | "max-empty-lines": 1, 71 | "media-feature-colon-space-after": "always", 72 | "media-feature-colon-space-before": "never", 73 | "media-feature-name-case": "lower", 74 | "media-feature-parentheses-space-inside": "never", 75 | "media-feature-range-operator-space-after": "always", 76 | "media-feature-range-operator-space-before": "always", 77 | "media-query-list-comma-newline-after": "always-multi-line", 78 | "media-query-list-comma-space-after": "always-single-line", 79 | "media-query-list-comma-space-before": "never", 80 | "no-eol-whitespace": true, 81 | "no-missing-end-of-source-newline": true, 82 | "number-leading-zero": "always", 83 | "number-no-trailing-zeros": true, 84 | "property-case": "lower", 85 | "rule-empty-line-before": [ "always-multi-line", { 86 | except: ["first-nested"], 87 | ignore: ["after-comment"], 88 | } ], 89 | "selector-attribute-brackets-space-inside": "never", 90 | "selector-attribute-operator-space-after": "never", 91 | "selector-attribute-operator-space-before": "never", 92 | "selector-combinator-space-after": "always", 93 | "selector-combinator-space-before": "always", 94 | "selector-descendant-combinator-no-non-space": true, 95 | "selector-list-comma-newline-after": "always", 96 | "selector-list-comma-space-before": "never", 97 | "selector-max-empty-lines": 0, 98 | "selector-pseudo-class-case": "lower", 99 | "selector-pseudo-class-parentheses-space-inside": "never", 100 | "selector-pseudo-element-case": "lower", 101 | "selector-pseudo-element-colon-notation": "double", 102 | "selector-type-case": "lower", 103 | "unit-case": "lower", 104 | "value-list-comma-newline-after": "always-multi-line", 105 | "value-list-comma-space-after": "always-single-line", 106 | "value-list-comma-space-before": "never", 107 | "value-list-max-empty-lines": 0, 108 | }, 109 | } -------------------------------------------------------------------------------- /src/pages/ticketes/tickets.css: -------------------------------------------------------------------------------- 1 | /* Global variables */ 2 | .steps { 3 | display: flex; 4 | flex-direction: column; 5 | padding: 20px; 6 | text-align: center; 7 | border: 2px solid #e3e3e3; 8 | border-radius: 5px; 9 | } 10 | 11 | .tickets .tabla-article { 12 | margin: 20px 0; 13 | } 14 | 15 | .tickets label { 16 | margin: 0; 17 | } 18 | 19 | /* main */ 20 | 21 | .select-tickets { 22 | background-color: #f7f7f7; 23 | padding-top: 20px; 24 | } 25 | 26 | .breadcrum { 27 | display: flex; 28 | align-items: center; 29 | justify-content: flex-end; 30 | color: var(--secondary-color); 31 | } 32 | 33 | .title-steps { 34 | margin: 0 auto; 35 | width: 80%; 36 | padding: 30px 0; 37 | } 38 | 39 | .step-bullet { 40 | padding-bottom: 20px; 41 | color: var(--primary-color); 42 | } 43 | 44 | .step-bullet span { 45 | font-size: 18px; 46 | } 47 | 48 | .tabla, 49 | .second-day { 50 | display: flex; 51 | flex-wrap: wrap; 52 | justify-content: space-around; 53 | text-align: center; 54 | } 55 | 56 | .element-title { 57 | font-size: 18px; 58 | } 59 | 60 | .precios-button { 61 | background-color: var(--primary-color); 62 | border-color: unset; 63 | } 64 | 65 | #diamond-element { 66 | width: 0; 67 | height: 0; 68 | border: 25px solid transparent; 69 | border-bottom-color: var(--primary-color); 70 | position: relative; 71 | } 72 | 73 | #diamond-element::after { 74 | content: ""; 75 | position: absolute; 76 | left: -25px; 77 | top: 25px; 78 | width: 0; 79 | height: 0; 80 | border: 25px solid transparent; 81 | border-top-color: var(--primary-color); 82 | } 83 | 84 | #diamond-element i { 85 | top: 20px; 86 | right: -6px; 87 | z-index: 1; 88 | color: #fff; 89 | } 90 | 91 | .select-lunch { 92 | padding: 40px 0; 93 | } 94 | 95 | .diamond-select-tickets { 96 | margin: 0 auto; 97 | width: 50px; 98 | } 99 | 100 | .menus-thing { 101 | border: 1px solid #e3e3e3; 102 | } 103 | 104 | .top-menus { 105 | background-color: #f6f6f6; 106 | text-align: center; 107 | padding: 15px 0; 108 | font-weight: 900; 109 | } 110 | 111 | .menu-contenido { 112 | padding: 10px; 113 | } 114 | 115 | .menu-contenido ul { 116 | display: flex; 117 | flex-wrap: wrap; 118 | justify-content: center; 119 | } 120 | 121 | .select-menus-button { 122 | padding: 20px 0; 123 | background-color: var(--primary-color); 124 | border-color: unset; 125 | } 126 | 127 | .menu-contenido li { 128 | margin: 10px; 129 | } 130 | 131 | .color-dome span { 132 | margin-right: 5px; 133 | } 134 | 135 | .tabla-article button:hover, 136 | .select-lunch button:hover { 137 | background-color: var(--primary-color); 138 | border-color: var(--primary-color); 139 | } 140 | 141 | .tabla-article button:focus, 142 | .tabla-article button:active, 143 | .select-lunch button:focus, 144 | .select-lunch button:active { 145 | outline: none !important; 146 | background-color: var(--primary-color) !important; 147 | box-shadow: 0 0 0 0.2rem #ee523c5c !important; 148 | border-color: var(--primary-color) !important; 149 | } 150 | 151 | .breadcrum a:hover { 152 | color: var(--primary-color); 153 | } 154 | 155 | .color-dome-background { 156 | border-radius: 20px; 157 | padding: 10px; 158 | } 159 | 160 | .color-one { 161 | background-color: #0090bd; 162 | } 163 | 164 | .color-two { 165 | background-color: #e52a1c; 166 | } 167 | 168 | .color-three { 169 | background-color: #ff15a4; 170 | } 171 | 172 | .color-four { 173 | background-color: #ffad00; 174 | } 175 | 176 | .color-five { 177 | background-color: #00b500; 178 | } 179 | 180 | .the-dome-pop { 181 | position: absolute; 182 | display: none; 183 | text-align: center; 184 | width: 40%; 185 | background-color: #f6f6f6; 186 | border: 1px solid #e3e3e3; 187 | top: -200%; 188 | left: 90%; 189 | } 190 | 191 | .info-the-dome { 192 | padding: 0 30px 30px 30px; 193 | } 194 | 195 | .the-dome-pop p { 196 | font-size: 14px; 197 | } 198 | 199 | .section-title:hover { 200 | cursor: pointer; 201 | } 202 | 203 | .section-title:hover .the-dome-pop { 204 | display: block; 205 | } 206 | 207 | /* media queries */ 208 | 209 | @media only screen and (max-width: 768px) { 210 | .border-shadow-header { 211 | box-shadow: -5px -2px 14px 6px #ee523c !important; 212 | width: 100%; 213 | min-width: 375px; 214 | } 215 | 216 | .tickets { 217 | padding-top: 80px; 218 | } 219 | 220 | .left-side i { 221 | color: var(--secondary-color) !important; 222 | } 223 | } 224 | 225 | @media only screen and (min-width: 768px) { 226 | .select-tickets { 227 | padding-top: 60px; 228 | } 229 | 230 | .steps { 231 | border-radius: 100px; 232 | flex-direction: row; 233 | padding: 0; 234 | } 235 | 236 | .steps .steps-info { 237 | display: flex; 238 | align-items: center; 239 | margin: 0 auto; 240 | padding: 10px 0; 241 | } 242 | 243 | .step-bullet { 244 | padding-bottom: 0; 245 | margin-right: 20px; 246 | } 247 | } 248 | 249 | @media only screen and (min-width: 992px) { 250 | .select-tickets .container-fluid, 251 | .select-lunch { 252 | margin: 0 auto; 253 | width: 80%; 254 | } 255 | } 256 | -------------------------------------------------------------------------------- /src/pages/application/App.css: -------------------------------------------------------------------------------- 1 | /* MAIN CONTENT */ 2 | body { 3 | overflow-x: hidden; 4 | } 5 | 6 | a:hover { 7 | color: unset; 8 | text-decoration: none; 9 | } 10 | 11 | .hero-section { 12 | background-image: url(/assets/img/hero-section.png); 13 | background-position: center; 14 | background-size: cover; 15 | background-repeat: no-repeat; 16 | height: 100%; 17 | } 18 | 19 | .hero-section .container-fluid { 20 | color: #fff; 21 | padding-top: 100px; 22 | padding-bottom: 40px; 23 | } 24 | 25 | .info-hero { 26 | border: 2px solid #fff; 27 | padding: 20px; 28 | margin: 20px 0; 29 | } 30 | 31 | .main-program { 32 | background-color: #272a31; 33 | color: #fff; 34 | } 35 | 36 | .section-content { 37 | padding: 30px; 38 | } 39 | 40 | article { 41 | margin: 10px 0; 42 | } 43 | 44 | .main-program article { 45 | background-color: #3a3d44; 46 | } 47 | 48 | .main-program .articles-content { 49 | padding: 30px 0; 50 | } 51 | 52 | article .articles-content-info { 53 | display: flex; 54 | align-items: center; 55 | justify-items: center; 56 | padding-top: 20px; 57 | padding-bottom: 20px; 58 | } 59 | 60 | .join-boton { 61 | padding: 30px 10px; 62 | width: 75%; 63 | border: 0; 64 | color: #fff; 65 | font-size: 24px; 66 | } 67 | 68 | .center-links { 69 | text-align: center; 70 | } 71 | 72 | .featured-speaking-content article { 73 | margin: 30px 0; 74 | } 75 | 76 | .featured-speaking-content a img { 77 | transition: width 0.6s ease; 78 | } 79 | 80 | .featured-speaking-content a img:hover { 81 | width: 50% !important; 82 | } 83 | 84 | .gray-square { 85 | top: -10%; 86 | left: 0; 87 | width: 12%; 88 | z-index: -1; 89 | } 90 | 91 | .featured-speaking-content a img:hover + .gray-square { 92 | width: 24%; 93 | } 94 | 95 | .featured-speaking-content a { 96 | display: flex; 97 | align-items: flex-start; 98 | } 99 | 100 | .featured-speaking-content hr { 101 | margin-right: 90%; 102 | } 103 | 104 | .featured-speaking-content p { 105 | font-size: 14px; 106 | } 107 | 108 | .more-button { 109 | color: unset; 110 | border-color: #e7e7e7; 111 | } 112 | 113 | .more-button:hover { 114 | color: unset; 115 | background-color: unset; 116 | border-color: var(--primary-color); 117 | } 118 | 119 | .more-button:focus, 120 | .more-button:active { 121 | outline: none !important; 122 | color: #fff; 123 | background-color: var(--primary-color) !important; 124 | box-shadow: 0 0 0 0.2rem #ee523c5c !important; 125 | border-color: var(--primary-color) !important; 126 | } 127 | 128 | .more-button:focus i, 129 | .more-button:active i { 130 | color: #fff; 131 | } 132 | 133 | .featured-speakers button { 134 | padding: 15px 0; 135 | } 136 | 137 | .partners { 138 | background-color: #414246; 139 | } 140 | 141 | .partners .container-fluid { 142 | padding-top: 30px; 143 | padding-bottom: 30px; 144 | } 145 | 146 | .partners .section-title { 147 | color: #8f8f8f; 148 | padding-bottom: 30px; 149 | margin: 0; 150 | } 151 | 152 | .partners .partners-info i { 153 | color: #8f8f8f; 154 | } 155 | 156 | .partners-info .list-unstyled { 157 | display: flex; 158 | flex-wrap: wrap; 159 | justify-content: space-around; 160 | } 161 | 162 | .whole-program-link { 163 | text-align: center; 164 | padding: 30px 0; 165 | } 166 | 167 | .partners-info li { 168 | margin: 10px; 169 | } 170 | 171 | .partners-info i:hover { 172 | color: #fff; 173 | } 174 | 175 | .main-program span:hover { 176 | text-decoration: underline; 177 | color: var(--third-color); 178 | } 179 | 180 | .main-program .button a:hover { 181 | color: unset; 182 | text-decoration: none; 183 | } 184 | 185 | .left-content h5 { 186 | margin: 0; 187 | } 188 | 189 | .articles-content article:hover { 190 | cursor: pointer; 191 | border: 1px solid #fff; 192 | } 193 | 194 | /* MEDIA QUERYS */ 195 | 196 | @media only screen and (max-width: 576px) { 197 | .hero-section .container-fluid { 198 | padding-top: 80px; 199 | } 200 | 201 | .articles-content-info h5 { 202 | width: 100px; 203 | } 204 | } 205 | 206 | @media only screen and (min-width: 768px) { 207 | .partners-info .list-unstyled { 208 | margin: 0 100px; 209 | } 210 | 211 | .articles-content article { 212 | width: 48%; 213 | margin: 5px; 214 | } 215 | 216 | article .articles-content-info { 217 | flex-direction: column; 218 | text-align: center; 219 | } 220 | 221 | .articles-content-info .left-content { 222 | flex-direction: column; 223 | margin-bottom: 10px; 224 | } 225 | 226 | .left-content i { 227 | margin-bottom: 10px; 228 | } 229 | 230 | .main-program .articles-content { 231 | display: flex; 232 | flex-wrap: wrap; 233 | justify-content: center; 234 | } 235 | } 236 | 237 | @media only screen and (min-width: 992px) { 238 | .hero-section .container-fluid { 239 | padding-left: 150px; 240 | padding-right: 40%; 241 | } 242 | 243 | .section-content { 244 | width: 80%; 245 | margin: 0 auto; 246 | } 247 | 248 | .articles-content article { 249 | width: 32%; 250 | } 251 | 252 | article .articles-content-info { 253 | padding-top: 30px; 254 | padding-bottom: 30px; 255 | } 256 | 257 | .right-content { 258 | font-size: 14px; 259 | } 260 | } 261 | 262 | @media only screen and (min-width: 1200px) { 263 | .articles-content article { 264 | width: 18%; 265 | } 266 | 267 | .right-content { 268 | font-size: 12px; 269 | } 270 | } 271 | -------------------------------------------------------------------------------- /src/pages/about/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |

"Mountain Festival"

16 |

MOUNTAIN MUSIC AND FESTIVAL SPRING 2 17 | DAYS

18 |
19 |

Loachella showcases popular and established musical artists as 20 | well as emerging artists and reunited groups. It is one of the largest, most famous, and 21 | most profitable music festivals around the world

22 |
23 |
24 |

Please contact us per email for any further questions about festival 25 |

26 | 27 | 29 | 30 |
31 |
32 |
33 |
34 | 35 | 36 |
37 |
38 |
39 |
40 |

Loachella official logo

41 |
42 |
43 |
The logo Loachella was decided through a competition about in 2013
44 |
45 | 48 |
49 |
50 | 51 | 52 |
53 |
54 |
55 |

See the past Loachella festivals

56 |
57 |
58 |
Chek it out at the last two Loachella which take place in Santiago de Chile and 59 | Madrid
60 | 61 |
62 |
63 |
64 |
65 |
66 |

2018

67 |
Loachella Mountain in Santiago de Chile
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |

2019

77 |
Loachella Mountain in Madrid
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 | 86 | 87 |
88 |
89 |
90 |

Partner

91 |
92 |
93 |
94 |
    95 |
  • 96 |
    • 97 |
    • 98 |
  • 99 | 100 |
    • 101 |
  • 102 |
    • 103 |
  • 104 |
    • 105 |
  • 106 |
    • 107 |
  • 108 |
    • 109 |
    • 110 |
    • 112 |
113 |
114 |
115 |
116 | 117 |
118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /src/pages/schedule/schedule.css: -------------------------------------------------------------------------------- 1 | .anchor-tags { 2 | color: unset; 3 | text-decoration: none; 4 | } 5 | 6 | .f-1 { 7 | flex: 1; 8 | } 9 | 10 | .bg-purple { 11 | background-color: #e1def9; 12 | } 13 | 14 | .bg-gray { 15 | background-color: #edf0f5; 16 | } 17 | 18 | .bg-orange { 19 | background-color: #ffe3db; 20 | } 21 | 22 | .bg-aqua { 23 | background-color: #daf0ee; 24 | } 25 | 26 | .schedule { 27 | background-color: #f7f7f7; 28 | padding-bottom: 50px; 29 | } 30 | 31 | .breadcrum { 32 | display: flex; 33 | align-items: center; 34 | justify-content: flex-end; 35 | color: var(--secondary-color); 36 | } 37 | 38 | .schedule-button { 39 | color: var(--secondary-color); 40 | background-color: #ebebeb; 41 | border-color: #e3e3e3; 42 | } 43 | 44 | .popup { 45 | display: none; 46 | position: absolute; 47 | top: 10%; 48 | left: 60%; 49 | background-color: #fff; 50 | border-radius: 100px; 51 | padding: 10px; 52 | border: 1px solid #e3e3e3; 53 | width: 350px; 54 | } 55 | 56 | .popup-text::after { 57 | content: ""; 58 | position: absolute; 59 | top: 100%; 60 | left: 20%; 61 | margin-left: -5px; 62 | border-width: 5px; 63 | border-style: solid; 64 | border-color: #fff transparent transparent transparent; 65 | } 66 | 67 | .popup span { 68 | font-size: 10px; 69 | } 70 | 71 | .indications { 72 | border: 1px solid #e3e3e3; 73 | padding: 5px; 74 | border-radius: 5px; 75 | } 76 | 77 | .indications ul { 78 | display: flex; 79 | align-items: center; 80 | justify-content: space-around; 81 | } 82 | 83 | .indications li { 84 | padding: 5px; 85 | text-align: center; 86 | } 87 | 88 | .indications span { 89 | font-weight: 600; 90 | } 91 | 92 | .element-title { 93 | font-size: 18px; 94 | padding-bottom: 10px; 95 | } 96 | 97 | .table-schedule-element { 98 | margin-top: 20px; 99 | background-color: #fff; 100 | border: 1px solid #e3e3e3; 101 | } 102 | 103 | .table-schedule-element article { 104 | padding: 10px; 105 | border-bottom: 1px solid #e3e3e3; 106 | } 107 | 108 | .activity { 109 | border-radius: 5px; 110 | border: 1px solid #e3e3e3; 111 | padding: 10px; 112 | width: 100%; 113 | } 114 | 115 | .articulos-contenido .activity { 116 | margin-bottom: 20px; 117 | } 118 | 119 | .text-place { 120 | font-size: 14px; 121 | } 122 | 123 | .bottom-info { 124 | display: flex; 125 | flex-direction: column; 126 | margin-top: 20px; 127 | } 128 | 129 | .select-menus-button { 130 | padding: 30px 0; 131 | width: 75%; 132 | background-color: var(--primary-color); 133 | border-color: unset; 134 | } 135 | 136 | .ticket-botones button { 137 | margin: 10px 0; 138 | padding: 10px 0; 139 | } 140 | 141 | .ticket-botones button:hover, 142 | .select-menus-button:hover { 143 | background-color: var(--primary-color); 144 | border-color: var(--primary-color); 145 | } 146 | 147 | .ticket-botones button:focus, 148 | .ticket-botones button:active, 149 | .select-menus-button:active, 150 | .select-menus-button:focus { 151 | outline: none !important; 152 | background-color: var(--primary-color) !important; 153 | box-shadow: 0 0 0 0.2rem #ee523c5c !important; 154 | border-color: var(--primary-color) !important; 155 | } 156 | 157 | .work-sharing, 158 | .days-button { 159 | padding: 30px; 160 | } 161 | 162 | .schedule-table { 163 | padding: 30px 0; 164 | } 165 | 166 | .breadcrum a:hover { 167 | color: var(--primary-color); 168 | } 169 | 170 | .work-sharing:hover { 171 | cursor: pointer; 172 | } 173 | 174 | .work-sharing:hover .popup { 175 | display: block; 176 | } 177 | 178 | .schedule-table a:hover { 179 | color: var(--secondary-color); 180 | text-decoration: underline; 181 | } 182 | 183 | .schedule-table i { 184 | padding: 10px; 185 | border-radius: 50%; 186 | color: #fff; 187 | } 188 | 189 | .schedule-table .concert { 190 | background-color: #8aa3cc; 191 | } 192 | 193 | .schedule-table .art-expo { 194 | background-color: var(--primary-color); 195 | } 196 | 197 | .schedule-table .initiation { 198 | background-color: #aeaadd; 199 | } 200 | 201 | .schedule-table .dome { 202 | background-color: #97d9d6; 203 | } 204 | 205 | .bottom-info i { 206 | color: #000; 207 | } 208 | 209 | /* media queries */ 210 | 211 | @media only screen and (min-width: 480px) { 212 | .bottom-info { 213 | flex-direction: row; 214 | justify-content: space-between; 215 | } 216 | } 217 | 218 | @media only screen and (max-width: 768px) { 219 | .border-shadow-header { 220 | box-shadow: -5px -2px 14px 6px #ee523c !important; 221 | width: 100%; 222 | min-width: 375px; 223 | } 224 | 225 | .schedule { 226 | padding-top: 80px; 227 | } 228 | 229 | .left-side i { 230 | color: var(--secondary-color) !important; 231 | } 232 | } 233 | 234 | @media only screen and (min-width: 768px) { 235 | .schedule { 236 | padding-top: 40px; 237 | } 238 | 239 | .indications { 240 | float: right; 241 | } 242 | 243 | .table-schedule-element { 244 | margin-top: 90px; 245 | } 246 | 247 | .articulos-contenido { 248 | display: flex; 249 | flex-wrap: wrap; 250 | justify-content: space-between; 251 | width: 100%; 252 | } 253 | 254 | .articulos-contenido .activity { 255 | width: 49%; 256 | } 257 | } 258 | 259 | @media only screen and (min-width: 992px) { 260 | .days-button, 261 | .work-sharing, 262 | .schedule-table, 263 | hr { 264 | margin: 0 auto; 265 | width: 80%; 266 | } 267 | 268 | .schedule section { 269 | padding-left: 0; 270 | padding-right: 0; 271 | } 272 | 273 | .table-schedule-element article { 274 | display: flex; 275 | justify-content: space-between; 276 | } 277 | 278 | article > .font-weight-bold { 279 | width: 200px; 280 | } 281 | 282 | .break-text { 283 | flex: 1; 284 | text-align: center; 285 | } 286 | 287 | article > .activity { 288 | display: flex; 289 | justify-content: space-between; 290 | } 291 | 292 | .text-place { 293 | font-size: 12px; 294 | } 295 | 296 | .bottom-info { 297 | align-items: center; 298 | } 299 | 300 | .select-menus-button { 301 | width: 40%; 302 | } 303 | } 304 | 305 | @media only screen and (min-width: 1300px) { 306 | .articulos-contenido .activity { 307 | width: 32%; 308 | margin-bottom: 0; 309 | } 310 | } 311 | -------------------------------------------------------------------------------- /src/pages/ticketes/tickets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 |
15 |
16 |
17 | 18 | 19 | Tickets 20 | 21 | Sele. ticktes 22 |
23 | 24 | 25 |
26 |
27 |

Select tickets

28 |
29 |
30 | 31 |
32 |
33 |
34 | 35 | STEP 1 36 |
37 | Please select the day when you want to join Loachella festival 38 |
39 |
40 |
41 | 42 |
43 |
44 |

.

45 |

1 day ticket

46 |

15.Apr.(Wed)

47 | 49 | 51 |
52 |
53 |

2 day ticket

54 |
55 |
56 |

.

57 |

16.Apr.(Thu)

58 | 60 | 62 |
63 |
64 |

.

65 |

15-16.Apr.(Wed-Thu)

66 | 68 | 70 |
71 |
72 |
73 |
74 |

.

75 |

VISA affiliates

76 |

15-16.Apr.(Wed-Thu)

77 | 79 | 81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 | 91 | 92 |
93 |
94 |
95 |
96 |

The Dome

97 |
98 |
99 | the-dome 100 |
101 |
The Dome
102 |

Get your late night groove on in The Dome Dance party nightly. 103 | The music rages on, yet silently, starting at 1am. Stop by early on Thur only for 104 | the Vintage Merch Sale to get your oldchella on! Check back in late March for more 105 | details.

106 |
107 |
108 |
109 |
110 |
111 |
112 | 113 | STEP 2 114 |
115 | Please select your headphones color for the dome experience 116 |
117 |
118 |
119 | 120 |
121 |
122 |
123 | 15 Wednesday 124 |
125 |
126 |
    127 |
  • 128 | 129 | 130 |
    • 131 |
  • 132 | 133 | 134 |
    • 135 |
  • 136 | 137 | 138 |
    • 139 |
  • 140 | 141 | 142 |
    • 143 |
  • 144 | 145 | 146 |
    • 147 |
148 |
149 |
150 |
151 |
152 |
16 Thursday
153 |
154 |
    155 |
  • 156 | 157 | 158 |
    • 159 |
  • 160 | 161 | 162 |
    • 163 |
  • 164 | 165 | 166 |
    • 167 |
  • 168 | 169 | 170 |
    • 171 |
  • 172 | 173 | 174 |
    • 175 |
176 |
177 |
178 | 182 | 183 |
184 | 185 | 188 | 189 | 192 |
193 | 194 | 195 |
196 |
197 | 198 |
199 | 200 | 201 | 202 | -------------------------------------------------------------------------------- /src/pages/application/App.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Document 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |

"Mountain Festival"

20 |

MOUNTAIN MUSIC AND FESTIVAL SPRING 2 DAYS

21 |
22 |

Annual music and arts festival, features musical artists from many genres 23 | of music, including rock, pop, indie, hip hop and electronic dance music, as well as art 24 | installations and sculptures. Across the grounds, several stages continuously host live music. 25 |

26 |
27 |

2020.04.15 (WED) - 16 (THU)

28 |
@ Cayambe Mountain Refugio, Cayambe Pichincha
29 |
30 |
31 |
32 | 33 | 34 |
35 |
36 |
37 |

Activities

38 |
39 |
40 |
41 |
42 |
43 |
44 | 45 |
Activities Tent
46 |
47 |
Games, giveaways and good times going down in Camping. Check back in 48 | late March for all the glorious details.
49 |
50 |
51 |
52 |
53 |
54 | 55 |
Camping Eats + Drinks
56 |
57 |
Food Trucks & vendors of nearly every type (vegetarian/vegan items) 58 | will be on hand to feed all your on site camping hunger needs. Head to the hill in Lot 8 to 59 | get your grub on! PLUS, Beer to go, Bloody Mary’s + more!
60 |
61 |
62 |
63 |
64 |
65 | 66 |
Loachella art studio
67 |
68 |
Enter this D.I.Y. domain and let your creativity flow. Check back in 69 | late March for thorough details.
70 |
71 |
72 |
73 |
74 |
75 | 76 |
The Dome
77 |
78 |
Get your late night groove on in The Dome Dance party nightly. The 79 | music rages on, yet silently, starting at 1am. Stop by early on Thur only for the Vintage 80 | Merch Sale to get your oldchella on! Check back in late March for more details.
81 |
82 |
83 |
84 |
85 |
86 | 87 |
Ferris wheel
88 |
89 |
Catch all the feels at the top of the Ferris Wheel while taking in 90 | the epic desert views of the entire Coachella Valley.
91 |
92 |
93 |
94 |
97 | SEE WHOLE ACTIVITIES
99 |
100 |
101 | 102 |
103 |
104 |
105 |

Lineup

106 |
107 |
108 |
109 |
110 | 124 | 139 |
140 | 205 |
206 | 210 |
211 |
212 | 213 | 214 |
215 |
216 |
217 |

Partner

218 |
219 |
220 |
221 |
    222 |
    • 223 |
    • 224 |
  • 225 | 226 |
    • 227 |
  • 228 |
    • 229 |
    • 230 |
    • 231 |
    • 232 |
    • 233 |
    • 235 |
236 |
237 |
238 |
239 | 240 | 241 | 242 | -------------------------------------------------------------------------------- /src/pages/schedule/schedule.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 | 17 | Schedule 18 | 19 | Day 20 |
21 |
22 |

Schedule

23 |
24 |
25 |
26 |
27 |
28 | 32 |
33 |
34 | 37 |
38 | 48 |
49 |
50 |
51 |
52 | 53 | 54 |
55 |
04.16 (THU)
56 |

The dome sessions music groove

57 |

The music rages on, yet silently, starting at 1am. Stop by early on Thur only for the Vintage Merch 58 | Sale to get your oldchella on! Check back in late March for more details.

59 |
60 | Get your late night groove on in The Dome Dance party nightly 61 |
62 |
63 |
64 | 65 |
66 |

.

67 |
68 |
    69 |

  • Concert
    • 71 |

  • Art 73 | exposition
    • 74 |

  • 75 | Intro/Outro
    • 76 |

  • The Dome 77 | event
    • 78 |
79 |
80 | 81 |
82 |
83 |

.

84 |

09:30-10:00

85 |

Registration

86 |
87 |
88 |

.

89 |

10:00-10:10

90 |

Opening Remarks

91 |

TBD

92 |
93 |
94 |

.

95 |

10:10-10:40 (30‘)

96 |
97 |
98 | 99 |

Budlight introduction

100 |
101 |

Run the Jewels

102 |

Budlight Tent

103 |
104 |
105 |
106 |

.

107 |

10:40-10:50(10‘)

108 |

Rest

109 |
110 | 111 |
112 |

.

113 |

10:50-12:10 (80‘)

114 |
115 |
116 |
117 | 118 |

Frank Ocean

119 |
120 | 121 |

Huge experience with Frank Ocean since two loachella festivals ago

122 |
123 |

Loach Tent

124 |
125 | 126 | How to get? 127 | 128 |
129 |
130 |
131 |
132 |
133 | 134 |

Frank Ocean

135 |
136 |

Huge experience with Frank Ocean since two loachella festivals ago

137 |
138 |

Loach Tent

139 |
140 | 141 | How to get? 142 | 143 |
144 |
145 |
146 |
147 |
148 | 149 |

Tom Yorke

150 |
151 |

From Essex United Kingdom it's a pleasure to bring you TY

152 |
153 |

Red Bull section

154 |
155 | 156 | How to get? 157 | 158 |
159 |
160 |
161 |
162 |
163 | 164 |
165 |

.

166 |

12:10-13:20(70‘)

167 |

Rest

168 |
169 | 170 |
171 |

.

172 |

13:20-14:50 (90‘)

173 |
174 |
175 |
176 | 177 |

Calvin Harris

178 |
179 |

Located in the top ten DJ all around the world CH cames with energy to enjoy us

180 |
181 |

Red Bull section

182 |
183 | 184 | How to get? 185 | 186 |
187 |
188 |
189 |
190 |
191 | 192 |

Le Louvre Art Expo

193 |
194 |

Each season, the Louvre features a series of temporary exhibitions, each the result of the latest expert research.

195 |
196 |

Louchella art exhibitions

197 |
198 | 199 | How to get? 200 | 201 |
202 |
203 |
204 |
205 |
206 | 207 |

Lana del Rey

208 |
209 |

With her romance, glamour, and melancholia music she brings at LFM

210 |
211 |

Red Bull section

212 | 213 |
214 |
215 |
216 |
217 | 218 |
219 |

.

220 |

10:40-10:50(10‘)

221 |

Rest

222 |
223 | 224 |
225 |

.

226 |

13:20-14:50 (90‘)

227 |
228 |
229 |
230 | 231 |

Travis Scott

232 |
233 | 234 |

The californian raper TS brings us his latest released album Jackboys

235 |
236 |

Toyota campaign

237 |
238 | 239 | How to get? 240 | 241 |
242 |
243 |
244 |
245 |
246 | 247 |

Rage Against the Machine

248 |
249 |

Our last creme de la creme guests since 90 their music has transcended 2 generations

250 |
251 |

Toyota campaign

252 |
253 | 254 | How to get? 255 | 256 |
257 |
258 |
259 |
260 |
261 | 262 |

Rage Against the Machine

263 |
264 |

Our last creme de la creme guests since 90 their music has transcended 2 generations

265 |
266 |

Toyota campaign

267 | 268 |
269 |
270 |
271 |
272 | 273 |
274 |

.

275 |

10:40-10:50(10‘)

276 |

Rest

277 |
278 | 279 |
280 |

.

281 |

13:20-14:50 (90‘)

282 |
283 |
284 | 285 |

British DJs for the closure festival

286 |
287 |

Disclosure

288 |

Toyota campaign

289 |
290 |
291 | 292 |
293 |

.

294 |

13:20-14:50 (90‘)

295 |
296 |
297 | 298 |

Calvin Harris, Tiesto and Disclosure

299 |
300 |

The Dome

301 |
302 |
303 |
304 |
305 | 306 | 308 |
309 | 310 |
311 | 312 | 313 | 314 | -------------------------------------------------------------------------------- /assets/img/loachella-logo-primary.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /assets/img/loachella-logo-secondary.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /assets/img/loachella-logo-third.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | --------------------------------------------------------------------------------