├── .gitignore ├── .gitattributes ├── style ├── bg │ ├── bg.webp │ ├── patpat.png │ ├── pattern.webp │ ├── text-bg.webp │ ├── partners-bg.webp │ ├── program-pattern.webp │ └── copryright-pattern.webp ├── speakers │ ├── 0.webp │ ├── 1.webp │ ├── 2.webp │ ├── 3.webp │ ├── 4.webp │ └── 5.webp ├── logo │ ├── about-logo.webp │ ├── header-logo.webp │ ├── header-logo2.webp │ ├── logo-symbol.webp │ ├── about-logo-complete.webp │ ├── partner-mozilla.svg │ ├── partner-naver.svg │ ├── partner-airbnb.svg │ ├── partner-daumkakao.svg │ └── partner-google.svg ├── past-festivals │ ├── festival1.webp │ └── festival2.webp ├── icons │ ├── arrow-down.svg │ ├── hamb-bars.svg │ ├── arrow-up.svg │ ├── x-solid.svg │ ├── linkedin.svg │ ├── twitter.svg │ ├── instagram.svg │ ├── github.svg │ └── facebook.svg ├── program │ ├── forum.svg │ ├── exhibition.svg │ ├── lecture.svg │ ├── workshop.svg │ └── ignite.svg ├── about.css ├── home.css └── style.css ├── .hintrc ├── .eslintrc.json ├── package.json ├── .stylelintrc.json ├── LICENSE ├── .github └── workflows │ └── linters.yml ├── assets ├── dynamicSpeakers.js └── buttonsActions.js ├── README.md ├── about.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | # .gitignore 2 | node_modules/ -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /style/bg/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/bg/bg.webp -------------------------------------------------------------------------------- /style/bg/patpat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/bg/patpat.png -------------------------------------------------------------------------------- /style/bg/pattern.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/bg/pattern.webp -------------------------------------------------------------------------------- /style/bg/text-bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/bg/text-bg.webp -------------------------------------------------------------------------------- /style/speakers/0.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/speakers/0.webp -------------------------------------------------------------------------------- /style/speakers/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/speakers/1.webp -------------------------------------------------------------------------------- /style/speakers/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/speakers/2.webp -------------------------------------------------------------------------------- /style/speakers/3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/speakers/3.webp -------------------------------------------------------------------------------- /style/speakers/4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/speakers/4.webp -------------------------------------------------------------------------------- /style/speakers/5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/speakers/5.webp -------------------------------------------------------------------------------- /style/bg/partners-bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/bg/partners-bg.webp -------------------------------------------------------------------------------- /style/logo/about-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/logo/about-logo.webp -------------------------------------------------------------------------------- /style/logo/header-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/logo/header-logo.webp -------------------------------------------------------------------------------- /style/logo/header-logo2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/logo/header-logo2.webp -------------------------------------------------------------------------------- /style/logo/logo-symbol.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/logo/logo-symbol.webp -------------------------------------------------------------------------------- /style/bg/program-pattern.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/bg/program-pattern.webp -------------------------------------------------------------------------------- /style/bg/copryright-pattern.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/bg/copryright-pattern.webp -------------------------------------------------------------------------------- /style/logo/about-logo-complete.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/logo/about-logo-complete.webp -------------------------------------------------------------------------------- /style/past-festivals/festival1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/past-festivals/festival1.webp -------------------------------------------------------------------------------- /style/past-festivals/festival2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VelzckC0D3/Velzck_Festival/HEAD/style/past-festivals/festival2.webp -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /style/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style/icons/hamb-bars.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 18 | 1, 19 | { 20 | "js": "always", 21 | "json": "always" 22 | } 23 | ] 24 | }, 25 | "ignorePatterns": ["dist/", "build/"] 26 | } 27 | -------------------------------------------------------------------------------- /style/icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "capstone_project", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-eslint": "^10.1.0", 14 | "eslint": "^7.32.0", 15 | "eslint-config-airbnb-base": "^14.2.1", 16 | "eslint-plugin-import": "^2.27.5", 17 | "hint": "^7.1.3", 18 | "stylelint": "^13.13.1", 19 | "stylelint-config-standard": "^21.0.0", 20 | "stylelint-csstree-validator": "^1.9.0", 21 | "stylelint-scss": "^3.21.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /style/icons/x-solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": [ 9 | "tailwind", 10 | "apply", 11 | "variants", 12 | "responsive", 13 | "screen" 14 | ] 15 | } 16 | ], 17 | "scss/at-rule-no-unknown": [ 18 | true, 19 | { 20 | "ignoreAtRules": [ 21 | "tailwind", 22 | "apply", 23 | "variants", 24 | "responsive", 25 | "screen" 26 | ] 27 | } 28 | ], 29 | "csstree/validator": true 30 | }, 31 | "ignoreFiles": [ 32 | "build/**", 33 | "dist/**", 34 | "**/reset*.css", 35 | "**/bootstrap*.css", 36 | "**/*.js", 37 | "**/*.jsx" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /style/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /style/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Alejandro Velasquez Dev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /style/icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 17 | 18 | -------------------------------------------------------------------------------- /style/icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 22 | 23 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "18.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "18.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "18.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-22.04 66 | steps: 67 | - uses: actions/checkout@v2 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi 71 | -------------------------------------------------------------------------------- /style/program/forum.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/dynamicSpeakers.js: -------------------------------------------------------------------------------- 1 | // DYNAMIC SPEAKERS CARD 2 | 3 | const speakers = [ 4 | { 5 | name: 'Rahul Sharma', 6 | role: 'Dean of Architecture and Urban Planning', 7 | about: 8 | 'Leadership position in academia responsible for overseeing programs in architecture and urban planning, managing faculty and staff, and setting policies for the school or department.', 9 | img: 'style/speakers/0.webp', 10 | }, 11 | { 12 | name: 'Ibrahim Unigwe', 13 | role: 'Director of Architecture and Planning', 14 | about: 15 | 'Oversees the design and completion of architectural projects. They manage project timelines, budgets, and collaborate with architects, engineers, and other stakeholders to ensure project success.', 16 | img: 'style/speakers/1.webp', 17 | }, 18 | { 19 | name: 'Oliver Turner', 20 | role: 'Chair of Architecture and Urban Design', 21 | about: 22 | 'Responsible managing the architecture and urban design programs. They oversee curriculum development, and play a key role in setting policies and strategic direction for the department or school.', 23 | img: 'style/speakers/2.webp', 24 | }, 25 | { 26 | name: 'Saeed Ahmed', 27 | role: 'Chief Sustainability Officer', 28 | about: 29 | 'Develops and implements sustainable policies and initiatives, collaborating with clients to promote eco-friendly urban planning devnote: if you are reading this, thanks for be here.', 30 | img: 'style/speakers/3.webp', 31 | }, 32 | { 33 | name: 'Elizabeth Thomas', 34 | role: 'Chief Design Officer and Textile Design', 35 | about: 36 | 'Responsible for overseeing all aspects of design, with a focus on textile design. They lead design teams, development of design concepts, and work to ensure the vision and values.', 37 | img: 'style/speakers/4.webp', 38 | }, 39 | { 40 | name: 'William Green', 41 | role: 'Director of Product Design and Development', 42 | about: 43 | 'Leads development of new products, from concept to launch. They lead design teams, collaborate with cross-functional teams, and ensure products meet design, quality, and performance standards.', 44 | img: 'style/speakers/5.webp', 45 | }, 46 | ]; 47 | 48 | const container = document.querySelector('#speakersGrid'); 49 | let moreSpeakers = null; 50 | 51 | speakers.forEach((p, i) => { 52 | const newCard = document.createElement('div'); 53 | newCard.classList.add('speakers'); 54 | newCard.innerHTML = ` 55 |
56 |
57 |
58 |

${p.name}

59 |

${p.role}

60 |

${p.about}

61 |
62 |
63 | `; 64 | newCard.querySelector('.speakersImg').style.backgroundImage = `url(${p.img})`; 65 | 66 | if (i < 2) { 67 | container.appendChild(newCard); 68 | } else { 69 | if (!moreSpeakers) { 70 | moreSpeakers = document.createElement('div'); 71 | moreSpeakers.classList.add('moreSpeakers'); 72 | container.appendChild(moreSpeakers); 73 | } 74 | moreSpeakers.appendChild(newCard); 75 | } 76 | }); 77 | 78 | // DYNAMIC SPEAKERS CARD 79 | 80 | // MORE BUTTON ACTION 81 | -------------------------------------------------------------------------------- /style/program/exhibition.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /style/program/lecture.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/buttonsActions.js: -------------------------------------------------------------------------------- 1 | // LANGUAGE WRAPPER // 2 | 3 | const wrapper = document.querySelector('#languageWrapper'); 4 | wrapper.addEventListener('click', () => { 5 | wrapper.classList.toggle('viewMenu'); 6 | }); 7 | 8 | document.addEventListener('click', (e) => { 9 | if (e.target.closest('#languageWrapper')) return; 10 | wrapper.classList.remove('viewMenu'); 11 | }); 12 | 13 | // LANGUAGE WRAPPER // 14 | 15 | // MENU BUTTONS ACTION 16 | 17 | const body = document.querySelector('body'); 18 | const menu = document.querySelector('#menuBar'); 19 | const menuButtons = document.querySelectorAll('.menuAction'); 20 | const hamburguer = document.querySelector('#menuBtn'); 21 | 22 | menuButtons.forEach((index) => { 23 | index.addEventListener('click', () => { 24 | if (window.innerWidth < 680) { 25 | menu.classList.toggle('menuOn'); 26 | body.classList.toggle('block'); 27 | } 28 | if ( 29 | hamburguer.innerHTML 30 | === 'menu icon' 31 | ) { 32 | hamburguer.innerHTML = 'menu icon'; 33 | } else if ( 34 | hamburguer.innerHTML 35 | === 'menu icon' 36 | ) { 37 | hamburguer.innerHTML = 'menu icon'; 38 | } 39 | }); 40 | }); 41 | 42 | // MENU BUTTONS ACTION // 43 | 44 | // ESCAPE ClOSES EVERYTHING // 45 | 46 | document.addEventListener('keydown', (e) => { 47 | if (e.code === 'Escape') { 48 | wrapper.classList.remove('viewMenu'); 49 | menu.classList.remove('menuOn'); 50 | body.classList.remove('block'); 51 | } 52 | }); 53 | 54 | // ESCAPE ClOSES EVERYTHING // 55 | 56 | // FIXED DESKTOP MENU // 57 | 58 | window.addEventListener('scroll', () => { 59 | const header = document.querySelector('#menuCont'); 60 | const accessibility = document.querySelector('#accessibility'); 61 | header.classList.toggle('fixed', window.scrollY > 0); 62 | accessibility.classList.toggle('z-index', window.scrollY > 0); 63 | wrapper.classList.remove('viewMenu'); 64 | }); 65 | 66 | // FIXED DESKTOP MENU // 67 | 68 | // DISABLE MOBILE MENU ON CERTAIN RESOLUTION // 69 | 70 | function removeClassesOnResize() { 71 | if (window.innerWidth > 680) { 72 | menu.classList.remove('menuOn'); 73 | body.classList.remove('block'); 74 | hamburguer.innerHTML = 'menu icon'; 75 | wrapper.classList.remove('viewMenu'); 76 | } 77 | } 78 | 79 | window.addEventListener('resize', removeClassesOnResize); 80 | 81 | // DISABLE MOBILE MENU ON CERTAIN RESOLUTION // 82 | 83 | // MORE SPEAKERS BUTTON ACTION // 84 | 85 | const moreButton = document.querySelector('.more'); 86 | const more = document.querySelector('.moreSpeakers'); 87 | const speakersCont = document.querySelector('#speakersTitle'); 88 | moreButton.addEventListener('click', () => { 89 | more.classList.toggle('showMore'); 90 | if ( 91 | moreButton.innerHTML 92 | === 'morearrow down' 93 | ) { 94 | moreButton.innerHTML = 'lessarrow up icon'; 95 | } else if ( 96 | moreButton.innerHTML 97 | === 'lessarrow up icon' 98 | ) { 99 | moreButton.innerHTML = 'morearrow down'; 100 | speakersCont.scrollIntoView({ behavior: 'smooth' }); 101 | } 102 | }); 103 | 104 | // MORE SPEAKERS BUTTON ACTION // 105 | -------------------------------------------------------------------------------- /style/program/workshop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /style/program/ignite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /style/logo/partner-mozilla.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | ![git-logo](https://github.com/VelzckC0D3/Velzck_Shop/assets/92229666/e0a9bd85-bf69-4013-a10b-fdadbb0f7d35) 5 | 6 |
7 | 8 | 9 | # 📗 Table of Contents 10 | 11 | - [📖 About the Project](#about-project) 12 | - [🛠 Built With](#built-with) 13 | - [Tech Stack](#tech-stack) 14 | - [Key Features](#key-features) 15 | - [🚀 Live Demo](#live-demo) 16 | - [💻 Getting Started](#getting-started) 17 | - [Setup](#setup) 18 | - [Prerequisites](#prerequisites) 19 | - [Install](#install) 20 | - [Usage](#usage) 21 | - [Run tests](#run-tests) 22 | - [Deployment](#deployment) 23 | - [👥 Author](#author) 24 | - [🔭 Future Features](#future-features) 25 | - [🤝 Contributing](#contributing) 26 | - [⭐️ Show your support](#support) 27 | - [🙏 Acknowledgements](#acknowledgements) 28 | - [❓ FAQ (OPTIONAL)](#faq) 29 | - [📝 License](#license) 30 | 31 | 32 | 33 | # 📖 [Architecture & Design Festival ] 34 | 35 | Introducing Architecture & Designers Festival, another sneak peek of my Fonrt-End skills, you can check that this site is totally responsive and adaptative, using pure CSS, HTML and DOM with JavaScript 36 | 37 | ## 🛠 Built With 38 | 39 | ### Tech Stack 40 | 41 |
42 | Client 43 | 48 |
49 | 50 |
51 | Server 52 | 55 |
56 | 57 |
58 | Database 59 | 62 |
63 | 64 | 65 | 66 | ### Key Features 67 | 68 | - **[Easy to navigate]** 69 | - **[Mobile First Focus]** 70 | - **[It is well designed]** 71 | - **[It shows the proper GitFlow]** 72 | - **[Totally reponsive]** 73 | - **[JavaScript functions]** 74 | 75 |

(back to top)

76 | 77 | 78 | 79 | ## 🚀 Live Demo 80 | 81 | [Click here to visit the Live Demo on Netlify](https://velzck-festival.netlify.app) 82 | \ 83 | [Click here to visit the Live Demo on GitHub](https://velzckc0d3.github.io/) 84 | \ 85 | \ 86 | ![showcase-website](https://user-images.githubusercontent.com/92229666/226071093-8cb8a997-561c-4b24-a40e-678d6de881ec.gif) 87 | 88 | 89 | 90 | 91 | 92 | 93 |

(back to top)

94 | 95 | 96 | 97 | ## 💻 Getting Started 98 | 99 | To get a local copy up and running, follow these steps. 100 | 101 | ### Prerequisites 102 | 103 | In order to run this project you need: 104 | 105 | ```sh 106 | To have a computer, Internet, Keyboard and Mouse 107 | ``` 108 | 109 | ### Setup 110 | 111 | Clone this repository to your desired folder: 112 | 113 | ```sh 114 | Open it with Visual Studio Code, and open a server with "LiveServer". 115 | ``` 116 | 117 | ### Install 118 | 119 | Install this project with: 120 | 121 | ```sh 122 | Installation is not necessary 123 | ``` 124 | 125 | ### Usage 126 | 127 | To run the project, execute the following command: 128 | 129 | ```sh 130 | Open Live Server 131 | ``` 132 | 133 | ### Run tests 134 | 135 | To run tests, run the following command: 136 | 137 | ```sh 138 | To check the HTML functionality use: 'HTML npx hint .' 139 | ``` 140 | 141 | ```sh 142 | To check the CSS functionality use: 'npx stylelint "**/*.{css,scss}"' 143 | ``` 144 | 145 | ```sh 146 | To check the JavaScript functionality use: 'npx eslint."' 147 | ``` 148 | 149 | ### Deployment 150 | 151 | You can deploy this project using: 152 | 153 | ```sh 154 | Your software of preference 155 | ``` 156 | 157 |

(back to top)

158 | 159 | 160 | 161 | ## 👥 Author 162 | 163 | - GitHub: [@VelzckC0D3](https://github.com/VelzckC0D3) 164 | - LinkedIn: [VelzckC0D3](https://www.linkedin.com/in/velzckcode/) 165 | 166 | 167 | 168 | ## 🔭 Future Features 169 | 170 | - [ ] **[CSS Animations and Transitions]** 171 | - [ ] **[Easy user interface to navigate with]** 172 | - [ ] **[Complete, user friendly design, responsive and optimized]** 173 | - [ ] **[JavaScript functions that ensures the proper functioning of the website]** 174 | - [ ] **[Dynamic generated 'speakers' section]** 175 | - [ ] **[It dynamically switches between `home` and `about` so whenever the user goes to one of those pages, the website isn't reloaded, instead it just execute a JS function that shows the correct page displayed!]** 176 | 177 |

(back to top)

178 | 179 | 180 | 181 | ## 🤝 Contributing 182 | 183 | Contributions, issues, and feature requests are welcome! 184 | 185 | Feel free to check the [issues page](../../issues/). 186 | 187 |

(back to top)

188 | 189 | 190 | 191 | ## ⭐️ Show your support 192 | 193 | If you like this project, be pending on my profile since I'll be doing much more! 194 | 195 |

(back to top)

196 | 197 | 198 | 199 | ## 🙏 Acknowledgments 200 | ❗ **I want to say thanks to Cindy Shin who let us use her original design for this project! [click here to visit her behance profile](https://www.behance.net/adagio07)** ❗ 201 | \ 202 | I would like to thanks my Microverse Team for helping me to get this done. 203 | 204 |

(back to top)

205 | 206 | 207 | 208 | ## ❓ FAQ 209 | 210 | - **[Which languages did you use in this project?]** 211 | 212 | - [HTML, CSS and JavaScript applying DOM] 213 | 214 | - **[What was the most difficult thin to achieve here?]** 215 | 216 | - [The responsiveness and adapative design, also the JavaScript functions that I've implemented] 217 | 218 |

(back to top)

219 | 220 | 221 | 222 | ## 📝 License 223 | 224 | This project is [MIT](./LICENSE) licensed. 225 | 226 |

(back to top)

227 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Velzck Capstone Project 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
44 | 63 | 64 |
65 | 66 | 67 | 68 |
69 | 70 |
71 | 72 |
73 |

"hello designers of the world!"

74 |

architecture and designers festival
2023

75 |

The Architects and Designers Festival brings together a community of experts, 76 | academics, and activists in the field of architecture and design in a different location every two years. 77 | This year, we aim to expand our guest list to include organizations and individuals interested in 78 | collaborating with us on joint projects that promote the advancement of the industry, free expression, and 79 | open knowledge. If you're actively involved in the world of architecture and design - advocates for 80 | open-source software, design enthusiasts, professionals from galleries, libraries, museums, archives, 81 | government bodies, foundations, lawyers, and activists - we invite you to join us this year to work together 82 | in creating a more robust and dynamic community.

83 |

84 | Please contact us per Email for nay further questions about CC Global Summit 2015! alejandro.velzck@gmail.com 86 |

87 |
88 | 89 |
90 | 91 |
92 | 93 |
94 |
95 |

architecture and design
festival - 2023 - logo

96 |
97 |

The logo was conceptualized and designed by Alejandro Velasquez, also known as "Velzck", on 98 | March 12, 2023, and was chosen as the final logo for the festival. 99 |

100 | logo letters 101 | logo symbol 102 |
103 | 104 |
105 | 106 |
107 | 108 |
109 |
110 |

See the past Architecture & Design Festival

111 |
112 |

Take a look at the past two Architecture And Design Festival which took place at 113 | Medellin, Colombia.

114 |
115 |
116 |

Architecture and Design Festival 2018

117 |
118 |
119 |

Architecture and Design Festival 2020

120 |
121 |
122 |
123 | 124 |
125 | 126 |
127 | 128 | 129 | 130 |
131 | 132 |
133 |

Partners

134 |
135 | 136 | 137 | 138 | 139 | 140 |
141 |
142 | 143 |
144 | 145 | 146 | 147 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Velzck Capstone Project 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
44 | 63 | 64 |
65 | 66 | 67 | 68 |
69 | 70 | 71 |
72 | 73 |
74 |

"hello designers of the world!"

75 |

architecture and designers festival
2023

76 |

Welcome to the intrnational Architecture and Design festival 77 | 2023® The best architects and designers around the globe to take the international prestigious 78 | title. Let the architecture battle begin!

79 |

2023.08.25(FRY) ~ 27(SUN)

80 | @ Medellín, the city of eternal spring 81 |
82 | 83 |
84 | 85 |
86 | 87 |
88 |
89 |

main program

90 |
91 |
    92 |
  • 93 | lecutre icon 94 |

    lecture

    95 |

    Listen to the speakers from various countries about the messages of sharing and 96 | opening.

    97 |
    • 98 |
  • 99 | exhibition icon 100 |

    exhibition

    101 |

    Appreciate various creations applying architecture and design of each artist.

    102 |
    • 103 |
  • 104 | forum icon 105 |

    forum

    106 |

    Have the time to share your thoughts and opinions with experts for each topic. 107 |

    108 |
    • 109 |
  • 110 | workshop icon 111 |

    workshop

    112 |

    Try creating your own work using open source license rather than just watching at 113 | it. 114 |

    115 |
    • 116 |
  • 117 | ignite icon 118 |

    ignite

    119 |

    get opportunities to network with CC affiliates around the world, also after the 120 | summit.

    121 |
    • 122 |
123 | 125 |
126 | 127 |
128 | 129 |
130 | 131 |

Featured Speakers

132 | 133 |
134 | 135 |
136 | 137 | 138 | 140 | 141 |
142 | 143 |
144 | 145 | 146 | 147 |
148 | 149 |
150 |

Partners

151 |
152 | 153 | 154 | 155 | 156 | 157 |
158 |
159 | 160 |
161 | 162 | 163 | 164 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | -------------------------------------------------------------------------------- /style/about.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --pColor: #272a31; 3 | --sColor: #ec5242; 4 | --tColor: #d3d3d3; 5 | } 6 | 7 | .aboutOn { 8 | display: none; 9 | } 10 | 11 | /* ABOUT PAGE - HERO | HERO | HERO - ABOUT PAGE */ 12 | 13 | #aboutPage { 14 | width: 100vw; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | #heroContAbout { 22 | width: 100vw; 23 | height: auto; 24 | background-color: var(--tColor); 25 | background-image: url(bg/bg.webp); 26 | background-size: cover; 27 | display: flex; 28 | flex-direction: column; 29 | z-index: -1; 30 | justify-content: flex-start; 31 | } 32 | 33 | #heroAbout { 34 | display: flex; 35 | flex-direction: column; 36 | justify-content: flex-end; 37 | align-items: flex-start; 38 | } 39 | 40 | .heroTitleAbout { 41 | text-align: center; 42 | width: 100%; 43 | font-size: 1.8rem; 44 | -webkit-text-stroke: 0.3px; 45 | color: var(--sColor); 46 | } 47 | 48 | .heroTitleAbout:nth-child(even) { 49 | background-image: url(bg/text-bg.webp); 50 | -webkit-background-clip: text; 51 | filter: brightness(1); 52 | background-position: 50% -50%; 53 | -webkit-text-fill-color: transparent; 54 | font-size: 2.4rem; 55 | -webkit-text-stroke: 2px transparent; 56 | padding: 0; 57 | margin: 0; 58 | transform: translateY(-1rem); 59 | line-height: 2.5rem; 60 | text-transform: uppercase; 61 | } 62 | 63 | #aboutDescription { 64 | width: 100vw; 65 | background-color: white; 66 | padding: 1rem; 67 | text-align: center; 68 | line-height: 1.7rem; 69 | margin: 0; 70 | border-radius: 16px; 71 | -webkit-text-stroke: 0.3px; 72 | box-shadow: 0 0 84px -11px rgba(0, 0, 0, 0.3); 73 | } 74 | 75 | #aboutContact { 76 | text-align: center; 77 | color: white; 78 | padding: 1rem; 79 | line-height: 1.7rem; 80 | } 81 | 82 | #aboutEmail { 83 | -webkit-text-stroke: 0.5px; 84 | text-decoration: underline; 85 | } 86 | 87 | #aboutEmail:active, 88 | #aboutEmail:visited, 89 | #aboutEmail:link { 90 | text-decoration: underline; 91 | color: white; 92 | } 93 | 94 | /* ABOUT PAGE - HERO | HERO | HERO - ABOUT PAGE */ 95 | 96 | /* LOGO INFO | LOGO INFO */ 97 | 98 | #logoCont { 99 | padding: 2rem 0; 100 | width: 100vw; 101 | display: flex; 102 | flex-direction: column; 103 | justify-content: center; 104 | align-items: center; 105 | box-shadow: 0 0 84px -11px rgba(0, 0, 0, 0.3); 106 | } 107 | 108 | #logoInfoCont { 109 | height: auto; 110 | overflow: hidden; 111 | display: flex; 112 | gap: 2rem; 113 | align-items: center; 114 | flex-direction: column; 115 | background-color: #fff; 116 | border-radius: 16px; 117 | } 118 | 119 | #logoTitle { 120 | width: 100%; 121 | height: auto; 122 | padding: 1rem 2rem; 123 | text-align: center; 124 | text-transform: capitalize; 125 | font-size: 1.4rem; 126 | } 127 | 128 | #logotitleCont { 129 | width: 100%; 130 | display: flex; 131 | } 132 | 133 | #logotitleCont::before { 134 | content: ""; 135 | display: inline-block; 136 | position: absolute; 137 | height: 7rem; 138 | width: 4rem; 139 | margin: 0 3rem; 140 | border-bottom: 3px solid var(--sColor); 141 | } 142 | 143 | #logoInfo { 144 | text-align: center; 145 | padding: 0 1rem; 146 | color: var(--pColor); 147 | -webkit-text-stroke: 0.4px; 148 | display: flex; 149 | flex-direction: column; 150 | gap: 3rem; 151 | } 152 | 153 | #logoImg { 154 | height: 5rem; 155 | width: auto; 156 | transition: 300ms all ease-in-out; 157 | } 158 | 159 | #logoImg2 { 160 | height: 5rem; 161 | } 162 | 163 | /* LOGO INFO | LOGO INFO */ 164 | 165 | /* PREVIOUS FESTIVAL | PREVIOUS FESTIVAL */ 166 | 167 | #previousFestivalCont { 168 | width: 100%; 169 | padding: 3rem 0; 170 | display: flex; 171 | } 172 | 173 | #previousFestival { 174 | width: 100vw; 175 | height: 100%; 176 | display: flex; 177 | flex-direction: column; 178 | justify-content: space-evenly; 179 | padding: 0 0 2rem; 180 | } 181 | 182 | #previousTitleCont { 183 | width: 100%; 184 | padding: 1rem 0 2rem; 185 | margin: 0; 186 | display: flex; 187 | flex-direction: column; 188 | justify-content: center; 189 | align-items: center; 190 | } 191 | 192 | #previousTitleCont::before { 193 | content: ""; 194 | display: inline-block; 195 | position: absolute; 196 | height: 6rem; 197 | width: 4rem; 198 | margin: 0 3rem; 199 | border-bottom: 3px solid var(--sColor); 200 | } 201 | 202 | #previousTitle { 203 | text-align: center; 204 | margin: 0; 205 | padding: 0 1rem; 206 | } 207 | 208 | #previousFestivalText { 209 | text-align: center; 210 | padding: 0 1rem; 211 | margin: 0; 212 | line-height: 1.5rem; 213 | } 214 | 215 | #previousImgCont { 216 | display: flex; 217 | width: 100%; 218 | height: auto; 219 | flex-direction: column; 220 | gap: 1.3rem; 221 | padding: 1rem 0; 222 | } 223 | 224 | .previousImg { 225 | width: 90%; 226 | height: 14rem; 227 | border-radius: 45px 0 45px 0; 228 | border-bottom: 3px solid var(--sColor); 229 | border-left: 3px solid var(--sColor); 230 | display: flex; 231 | justify-content: center; 232 | align-items: center; 233 | padding: 3rem; 234 | text-align: center; 235 | color: white; 236 | -webkit-text-stroke: 0.5px; 237 | cursor: pointer; 238 | } 239 | 240 | .imgText { 241 | background-color: rgba(8, 8, 8, 0.8); 242 | border-radius: 8px; 243 | opacity: 0; 244 | transition: 1200ms all ease-in-out; 245 | font-size: 1.2rem; 246 | } 247 | 248 | .previousImg:hover .imgText { 249 | opacity: 1; 250 | transition: 800ms all ease-in-out; 251 | } 252 | 253 | .previousImg::before { 254 | position: absolute; 255 | display: flex; 256 | justify-content: center; 257 | align-items: center; 258 | width: 90%; 259 | height: 14rem; 260 | background-color: rgba(197, 30, 0, 0.534); 261 | border-radius: 45px 0 45px 0; 262 | color: white; 263 | font-size: 1.8rem; 264 | -webkit-text-stroke: 1px; 265 | } 266 | 267 | .previousImg:nth-child(1) { 268 | background-image: url(past-festivals/festival1.webp); 269 | background-size: cover; 270 | } 271 | 272 | .previousImg:nth-child(2) { 273 | background-image: url(past-festivals/festival2.webp); 274 | background-size: cover; 275 | } 276 | 277 | .previousImg:nth-child(1)::before { 278 | content: "2018"; 279 | padding: 2rem; 280 | transition: 1000ms color ease-in-out, 700ms background-color ease-in-out; 281 | } 282 | 283 | .previousImg:nth-child(2)::before { 284 | content: "2020"; 285 | padding: 2rem; 286 | transition: 1000ms color ease-in-out, 700ms background-color ease-in-out; 287 | } 288 | 289 | .previousImg:hover:nth-child(1)::before { 290 | color: rgba(255, 255, 255, 0); 291 | background-color: transparent; 292 | transition: 300ms color ease-in-out, 800ms background-color ease-in-out; 293 | } 294 | 295 | .previousImg:hover:nth-child(2)::before { 296 | color: rgba(255, 255, 255, 0); 297 | background-color: transparent; 298 | transition: 300ms color ease-in-out, 800ms background-color ease-in-out; 299 | } 300 | 301 | /* PREVIOUS FESTIVAL | PREVIOUS FESTIVAL */ 302 | 303 | /* MEDIA MIN | MEDIA MIN */ 304 | 305 | @media (min-width: 680px) { 306 | #heroContAbout { 307 | height: 87vh; 308 | background-size: 165%; 309 | background-position: 0% 80%; 310 | justify-content: center; 311 | } 312 | 313 | #heroAbout { 314 | height: 84%; 315 | display: flex; 316 | flex-direction: column; 317 | align-items: center; 318 | justify-content: space-around; 319 | } 320 | 321 | .heroTItleAbout:nth-child(2) { 322 | width: 90%; 323 | padding: 1rem; 324 | } 325 | 326 | #aboutDescription { 327 | width: 90vw; 328 | } 329 | 330 | #aboutContact { 331 | width: 90%; 332 | padding: 1rem; 333 | } 334 | 335 | #logoInfoCont { 336 | width: 90%; 337 | padding: 1rem; 338 | margin: 0; 339 | } 340 | 341 | #logotitleCont::before { 342 | content: ""; 343 | display: inline-block; 344 | position: absolute; 345 | height: 8rem; 346 | width: 4rem; 347 | margin: 0 3rem; 348 | border-bottom: 3px solid var(--sColor); 349 | } 350 | 351 | #logoInfo { 352 | padding: 2rem 0 0; 353 | margin: 0; 354 | } 355 | 356 | #previousFestivalCont { 357 | width: 100%; 358 | } 359 | 360 | #previousFestival { 361 | width: 90%; 362 | } 363 | 364 | #previousTitleCont { 365 | padding: 2rem 0; 366 | } 367 | 368 | #previousFestivalText { 369 | padding: 2rem 0; 370 | } 371 | 372 | #previousImgCont { 373 | flex-direction: row; 374 | width: auto; 375 | } 376 | 377 | .previousImg { 378 | width: auto; 379 | } 380 | 381 | .previousImg::before { 382 | width: 43.1%; 383 | } 384 | } 385 | 386 | @media (min-width: 1024px) { 387 | #heroContAbout, 388 | .heroTItleAbout:nth-child(even), 389 | #aboutDescription, 390 | #aboutContact { 391 | width: 100%; 392 | } 393 | 394 | #heroAbout { 395 | width: 65%; 396 | justify-content: center; 397 | } 398 | 399 | #logoInfoCont { 400 | width: 65%; 401 | font-size: 1.3rem; 402 | } 403 | 404 | #logoImg { 405 | height: 10rem; 406 | } 407 | 408 | #logoImg2 { 409 | height: 8rem; 410 | } 411 | 412 | .heroTItleAbout:nth-child(even) { 413 | font-size: 3rem; 414 | } 415 | 416 | .previousImg { 417 | width: 26rem; 418 | height: 20rem; 419 | } 420 | 421 | .previousImg::before { 422 | width: 26rem; 423 | height: 20rem; 424 | } 425 | } 426 | 427 | /* MEDIA MIN | MEDIA MIN */ 428 | 429 | /* MEDIA MAX | MEDIA MAX */ 430 | 431 | /* MEDIA MAX | MEDIA MAX */ 432 | -------------------------------------------------------------------------------- /style/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /style/logo/partner-naver.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /style/home.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --pColor: #272a31; 3 | --sColor: #ec5242; 4 | --tColor: #d3d3d3; 5 | } 6 | 7 | /* HOME PAGE - HERO | HERO | HERO - HOME PAGE */ 8 | 9 | #heroCont { 10 | margin-top: 1rem; 11 | width: 100vw; 12 | height: 95vh; 13 | background-color: var(--tColor); 14 | background-image: url(bg/bg.webp); 15 | background-size: cover; 16 | display: flex; 17 | flex-direction: column; 18 | z-index: -1; 19 | } 20 | 21 | #hero { 22 | padding: 1rem 1rem 10rem; 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: flex-end; 26 | align-items: flex-start; 27 | } 28 | 29 | #heroSpan { 30 | color: var(--sColor); 31 | -webkit-text-stroke: 0.5px; 32 | } 33 | 34 | .heroTitle:nth-child(odd) { 35 | width: 100%; 36 | -webkit-text-stroke: 0.5px; 37 | font-size: 1.5rem; 38 | text-align: left; 39 | text-transform: capitalize; 40 | color: var(--sColor); 41 | } 42 | 43 | .heroTitle:nth-child(even) { 44 | background-image: url(bg/text-bg.webp); 45 | -webkit-background-clip: text; 46 | filter: brightness(1); 47 | background-position: 50% -50%; 48 | -webkit-text-fill-color: transparent; 49 | font-size: 2.4rem; 50 | -webkit-text-stroke: 2px transparent; 51 | padding: 0; 52 | margin: 0; 53 | transform: translateY(-1rem); 54 | line-height: 2.5rem; 55 | text-transform: uppercase; 56 | } 57 | 58 | #heroDescription { 59 | text-align: left; 60 | background-color: #fffc; 61 | color: black; 62 | font-size: 1rem; 63 | -webkit-text-stroke: 0.2px; 64 | padding: 1rem 1.2rem; 65 | margin: 6rem 0 5rem; 66 | width: 103% !important; 67 | transform: translateX(-0.4rem); 68 | border-radius: 10px; 69 | } 70 | 71 | #heroDate { 72 | -webkit-text-stroke: 0.8px; 73 | color: #000000c5; 74 | } 75 | 76 | #heroLocation { 77 | color: white; 78 | -webkit-text-stroke: 0.5px; 79 | transform: translateY(-1.2rem); 80 | } 81 | 82 | #heroLocation:link, 83 | #heroLocation:visited { 84 | text-decoration: none; 85 | color: white; 86 | } 87 | 88 | /* HOME PAGE - HERO | HERO | HERO - HOME PAGE */ 89 | 90 | /* HOME PAGE - MAIN PROGRAM | MAIN PROGRAM - HOME PAGE */ 91 | 92 | #mainProgramCont { 93 | background-color: var(--tColor); 94 | width: 100vw; 95 | display: flex; 96 | align-items: center; 97 | z-index: 1; 98 | } 99 | 100 | #mainProgram { 101 | width: 100%; 102 | height: auto; 103 | display: flex; 104 | flex-direction: column; 105 | justify-content: center; 106 | background-image: url(bg/program-pattern.webp); 107 | background-size: 4rem; 108 | background-color: var(--pColor); 109 | box-shadow: 0 0 84px -11px rgba(0, 0, 0, 0.75); 110 | } 111 | 112 | #titleCont { 113 | width: 100%; 114 | display: flex; 115 | } 116 | 117 | #titleCont::before { 118 | content: ""; 119 | display: inline-block; 120 | position: absolute; 121 | height: 4rem; 122 | width: 4rem; 123 | margin: 0 3rem; 124 | border-bottom: 3px solid var(--sColor); 125 | } 126 | 127 | #programTitle { 128 | width: 100%; 129 | text-align: center; 130 | color: white; 131 | padding: 1rem; 132 | font-size: 1.4rem; 133 | text-transform: capitalize; 134 | } 135 | 136 | #programUl { 137 | list-style: none; 138 | display: flex; 139 | flex-direction: column; 140 | justify-content: center; 141 | align-items: flex-start; 142 | width: 100%; 143 | padding: 1rem; 144 | gap: 0.5rem; 145 | } 146 | 147 | .programLi { 148 | background-color: rgba(0, 0, 0, 0.116); 149 | width: 100%; 150 | padding: 0 1rem; 151 | display: flex; 152 | justify-content: flex-start; 153 | align-items: center; 154 | gap: 0.5rem; 155 | transition: 300ms all ease-in-out; 156 | filter: blur(0); 157 | border-radius: 16px; 158 | } 159 | 160 | .programLi:hover, 161 | .programLi:active { 162 | background-color: rgba(0, 0, 0, 0.316); 163 | } 164 | 165 | .programLiH2 { 166 | color: var(--sColor); 167 | font-size: 1.3rem; 168 | width: 7rem; 169 | height: 4rem; 170 | display: flex; 171 | text-align: left; 172 | align-items: center; 173 | justify-content: flex-start; 174 | text-transform: capitalize; 175 | } 176 | 177 | .programLiDesc { 178 | color: white; 179 | font-size: 0.85rem; 180 | height: 6rem; 181 | width: 50%; 182 | text-align: left; 183 | line-height: 1.5rem; 184 | display: flex; 185 | justify-content: center; 186 | align-items: center; 187 | } 188 | 189 | #programButton { 190 | border: none; 191 | width: 60%; 192 | height: 5rem; 193 | font-size: 1.3rem; 194 | border-radius: 10px; 195 | margin-bottom: 2rem; 196 | padding: 0; 197 | background-color: var(--sColor); 198 | transition: 50ms all ease-in-out; 199 | } 200 | 201 | #programLink { 202 | width: 100%; 203 | height: 100%; 204 | display: flex; 205 | align-items: center; 206 | justify-content: center; 207 | } 208 | 209 | #programLink:visited, 210 | #programLink:active, 211 | #programLink:link { 212 | color: white; 213 | text-decoration: none; 214 | } 215 | 216 | #programButton:active { 217 | transform: scale(0.9); 218 | filter: brightness(1.5); 219 | } 220 | 221 | /* HOME PAGE - MAIN PROGRAM | MAIN PROGRAM - HOME PAGE */ 222 | 223 | /* HOME PAGE - FEATURED SPEAKERS | FEATURED SPEAKERS - HOME PAGE */ 224 | 225 | #speakersCont { 226 | display: flex; 227 | flex-direction: column; 228 | margin-top: 1rem; 229 | height: auto; 230 | gap: 1rem; 231 | max-width: 100%; 232 | background-image: url(bg/pattern.webp); 233 | align-items: center; 234 | justify-content: center; 235 | } 236 | 237 | #speakersGrid { 238 | display: flex; 239 | flex-direction: column; 240 | gap: 2rem; 241 | padding: 0; 242 | } 243 | 244 | .moreSpeakers { 245 | display: flex; 246 | flex-direction: column; 247 | gap: 2rem; 248 | padding: 0; 249 | height: 0; 250 | overflow: hidden; 251 | transition: 500ms all ease-in-out; 252 | } 253 | 254 | .showMore { 255 | height: auto !important; 256 | padding-bottom: 2rem; 257 | } 258 | 259 | #speakersTitle { 260 | text-align: center; 261 | } 262 | 263 | .speakers { 264 | display: flex; 265 | justify-content: center; 266 | align-items: center; 267 | flex-direction: column; 268 | } 269 | 270 | .speakersCard { 271 | display: flex; 272 | height: auto; 273 | max-width: 95%; 274 | background-color: white; 275 | box-shadow: -10px 10px 45px -15px rgba(0, 0, 0, 0.75); 276 | padding: 0.5rem; 277 | margin: 0; 278 | gap: 1rem; 279 | border-radius: 45px 0; 280 | transition: 300ms all ease-in-out; 281 | } 282 | 283 | .speakersCard:hover { 284 | transform: scale(1.05); 285 | } 286 | 287 | .speakersImgCont { 288 | padding: 0; 289 | margin: 0; 290 | border-radius: 45px 15px; 291 | border-bottom: 3px solid var(--sColor); 292 | border-left: 3px solid var(--sColor); 293 | } 294 | 295 | .speakersImg { 296 | width: 13rem; 297 | height: 13rem; 298 | background-size: cover; 299 | background-position: 55% 0%; 300 | border-radius: 45px 15px; 301 | transition: 300ms all ease-in-out; 302 | } 303 | 304 | .speakersCard:hover .speakersImg { 305 | transform: scale(0.95) rotate(7deg); 306 | } 307 | 308 | .speakersInfo { 309 | width: 70%; 310 | height: auto; 311 | height: 13rem; 312 | } 313 | 314 | .name { 315 | color: black; 316 | padding: 0; 317 | margin: 0; 318 | font-size: 1.2rem; 319 | } 320 | 321 | .role { 322 | color: var(--sColor); 323 | -webkit-text-stroke: 0.7px; 324 | line-height: 1rem; 325 | padding: 0.25rem 0; 326 | margin: 0; 327 | font-size: 0.9rem; 328 | } 329 | 330 | .about { 331 | line-height: 1rem; 332 | margin: 0; 333 | height: 7rem; 334 | margin-top: 10px; 335 | } 336 | 337 | .more { 338 | text-transform: lowercase; 339 | font-size: 1.5rem; 340 | border: none; 341 | display: flex; 342 | gap: 0.5rem; 343 | justify-content: center; 344 | width: 95vw; 345 | background-color: white; 346 | border-radius: 45px 0; 347 | border-bottom: 3px solid var(--sColor); 348 | border-left: 3px solid var(--sColor); 349 | box-shadow: 0 0 87px 3px rgba(0, 0, 0, 0.75); 350 | transform: translateY(-1rem); 351 | color: black; 352 | } 353 | 354 | .more:visited, 355 | .more:active, 356 | .more:link { 357 | text-decoration: none; 358 | color: black; 359 | } 360 | 361 | .arrow { 362 | width: 1rem; 363 | } 364 | 365 | /* HOME PAGE - FEATURED SPEAKERS | FEATURED SPEAKERS - HOME PAGE */ 366 | 367 | /* MEDIA MIN | MEDIA MIN */ 368 | 369 | @media (min-width: 430px) { 370 | #mainProgram { 371 | background-size: 6rem; 372 | } 373 | } 374 | 375 | @media (min-width: 560px) { 376 | #mainProgram { 377 | background-size: 7rem; 378 | } 379 | } 380 | 381 | @media (min-width: 680px) { 382 | #heroCont { 383 | align-items: center; 384 | background-position: 0% 99%; 385 | background-size: 180%; 386 | margin-top: 0; 387 | } 388 | 389 | #hero { 390 | padding: 2rem 0; 391 | width: 85%; 392 | justify-content: center; 393 | height: 100%; 394 | } 395 | 396 | .heroTitle:nth-child(odd) { 397 | font-size: 1.6rem; 398 | color: var(--sColor); 399 | } 400 | 401 | .heroTitle:nth-child(even) { 402 | max-width: 80%; 403 | font-size: 3.3rem; 404 | line-height: 3rem; 405 | white-space: break-spaces; 406 | } 407 | 408 | #heroDescription { 409 | border: 6px solid white; 410 | max-width: 70%; 411 | padding: 0.75rem 1rem; 412 | transform: translateX(-0.6rem); 413 | margin: 3.5rem 0; 414 | } 415 | 416 | #heroDate { 417 | font-size: 1.8rem; 418 | } 419 | 420 | #programUl { 421 | flex-direction: row; 422 | } 423 | 424 | .programLi { 425 | flex-direction: column; 426 | padding: 0.5rem 0; 427 | width: auto; 428 | height: 15rem; 429 | } 430 | 431 | .programImg { 432 | height: 2.5rem; 433 | } 434 | 435 | .programLiH2 { 436 | padding: 0; 437 | margin: 0; 438 | justify-content: center; 439 | height: 2rem; 440 | } 441 | 442 | .programLiDesc { 443 | padding: 0 0.5rem 0.5rem; 444 | margin: 0; 445 | width: 100%; 446 | height: 100%; 447 | text-align: center; 448 | display: flex; 449 | line-height: 1.3rem; 450 | } 451 | 452 | #speakersCont { 453 | padding-bottom: 0; 454 | background-size: 10%; 455 | } 456 | 457 | #speakersGrid { 458 | grid-column: 1 / 4; 459 | height: auto; 460 | overflow: visible; 461 | grid-template-columns: repeat(2, 1fr); 462 | grid-auto-rows: auto; 463 | display: grid; 464 | column-gap: 0; 465 | row-gap: 1rem; 466 | margin-bottom: 3rem; 467 | width: 90%; 468 | } 469 | 470 | .moreSpeakers { 471 | grid-column: 1 / 4; 472 | height: auto; 473 | overflow: visible; 474 | grid-template-columns: repeat(2, 1fr); 475 | grid-auto-rows: auto; 476 | display: grid; 477 | column-gap: 0; 478 | row-gap: 1rem; 479 | } 480 | 481 | .speakersImg { 482 | width: 15vw; 483 | } 484 | 485 | #speakersTitle { 486 | grid-area: 1 / 1 / 2 / 3; 487 | } 488 | 489 | .about { 490 | font-size: 0.85rem; 491 | line-height: 0.7rem; 492 | } 493 | 494 | .more { 495 | display: none; 496 | } 497 | 498 | .more:visited, 499 | .more:active, 500 | .more:link { 501 | text-decoration: none; 502 | color: black; 503 | } 504 | } 505 | 506 | @media (min-width: 768px) { 507 | .about { 508 | font-size: 0.75rem; 509 | line-height: 1rem; 510 | } 511 | 512 | .speakersImg { 513 | height: 15rem; 514 | width: 9rem; 515 | } 516 | 517 | #programUl { 518 | width: 90%; 519 | } 520 | } 521 | 522 | @media (min-width: 820px) { 523 | .programLi { 524 | height: 13rem; 525 | } 526 | 527 | .speakersImg { 528 | height: 11rem; 529 | width: 9rem; 530 | } 531 | 532 | .speakersInfo { 533 | width: 70%; 534 | height: auto; 535 | height: 11rem; 536 | padding-bottom: 0; 537 | } 538 | } 539 | 540 | @media (min-width: 1024px) { 541 | .about { 542 | font-size: 1rem; 543 | line-height: 1rem; 544 | } 545 | } 546 | 547 | /* MEDIA MIN | MEDIA MIN */ 548 | 549 | /* MEDIA MAX | MEDIA MAX */ 550 | 551 | @media (max-width: 374px) { 552 | .programLiDesc { 553 | overflow-y: scroll; 554 | align-items: flex-start; 555 | } 556 | 557 | .about { 558 | font-size: 0.75rem; 559 | } 560 | } 561 | 562 | @media (max-width: 375px) { 563 | .speakersImg { 564 | width: 10rem; 565 | } 566 | } 567 | 568 | @media (max-width: 400px) { 569 | .about { 570 | height: 5.5rem; 571 | } 572 | } 573 | 574 | @media (max-width: 445px) { 575 | .about { 576 | overflow: scroll; 577 | } 578 | } 579 | 580 | /* MEDIA MAX | MEDIA MAX */ 581 | -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | /* -- GLOBALS | GLOBALS | GLOBALS -- */ 2 | 3 | :root { 4 | --pColor: #272a31; 5 | --sColor: #ec5242; 6 | --tColor: #d3d3d3; 7 | } 8 | 9 | *, 10 | *::after, 11 | *::before { 12 | font-family: "Lato", sans-serif; 13 | justify-content: center; 14 | align-items: center; 15 | box-sizing: border-box; 16 | -webkit-tap-highlight-color: transparent; 17 | scroll-behavior: smooth; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | padding: 0; 23 | display: block; 24 | } 25 | 26 | body::-webkit-scrollbar { 27 | display: none; 28 | } 29 | 30 | header { 31 | width: 100vw; 32 | display: flex; 33 | flex-direction: column; 34 | } 35 | 36 | .switch { 37 | display: none !important; 38 | } 39 | 40 | /* -- GLOBALS | GLOBALS | GLOBALS -- */ 41 | 42 | /* ACCESSIBILITY | ACCESSIBILITY */ 43 | 44 | #accessibilityCont { 45 | width: 100vw; 46 | height: 2rem; 47 | background-color: var(--pColor); 48 | display: none; 49 | } 50 | 51 | #accessibility { 52 | display: flex; 53 | width: 80%; 54 | height: 100%; 55 | padding: 0 1rem; 56 | gap: 0.5rem; 57 | list-style: none; 58 | justify-content: flex-end; 59 | align-items: center; 60 | z-index: 3; 61 | text-align: center; 62 | color: white; 63 | margin: 0; 64 | } 65 | 66 | .z-index { 67 | z-index: 0 !important; 68 | } 69 | 70 | .accessibilityIcon { 71 | height: 1rem; 72 | margin: 0; 73 | padding: 0; 74 | } 75 | 76 | .accessibilityOption { 77 | height: 80%; 78 | width: auto; 79 | padding: 0 10px; 80 | display: flex; 81 | } 82 | 83 | .accessibilityOption:hover { 84 | background-color: var(--sColor); 85 | cursor: pointer; 86 | } 87 | 88 | #languageWrapper { 89 | height: 2rem; 90 | width: 4rem; 91 | overflow: hidden; 92 | transition: 100ms all ease-in-out; 93 | } 94 | 95 | #languageCont { 96 | list-style: none; 97 | padding: 0; 98 | margin: 0; 99 | background-color: var(--pColor); 100 | transform: translateY(3px); 101 | user-select: none; 102 | } 103 | 104 | .viewMenu { 105 | height: 6.5rem !important; 106 | transform: translateY(2.5rem); 107 | user-select: all; 108 | } 109 | 110 | .language { 111 | padding: 0.2rem 0; 112 | cursor: pointer; 113 | user-select: none; 114 | } 115 | 116 | .language:not(:nth-child(1)) { 117 | text-decoration: line-through; 118 | } 119 | 120 | .language:hover { 121 | background: var(--sColor); 122 | } 123 | 124 | /* ACCESSIBILITY | ACCESSIBILITY */ 125 | 126 | /* NAVBAR MENU | NAVBAR MENU | NAVBAR MENU */ 127 | 128 | #menuCont { 129 | width: 100%; 130 | height: 5rem; 131 | background-color: rgb(255, 255, 255); 132 | display: flex; 133 | justify-content: space-between; 134 | border-bottom: 5px solid var(--sColor); 135 | z-index: 2; 136 | position: relative; 137 | top: 0; 138 | } 139 | 140 | #menu { 141 | z-index: 2; 142 | } 143 | 144 | #menuBtn { 145 | height: 3rem; 146 | width: 3rem; 147 | display: flex; 148 | opacity: 0.8; 149 | border: none; 150 | z-index: 2; 151 | position: fixed; 152 | transform: translateY(0.1rem) translateX(1rem); 153 | background-color: rgba(255, 255, 255, 0.8); 154 | border-radius: 50%; 155 | } 156 | 157 | #menuBtn:hover { 158 | opacity: 1; 159 | } 160 | 161 | #menuBtn:active { 162 | background-color: var(--sColor); 163 | opacity: 0.5; 164 | } 165 | 166 | #menuBtn img { 167 | width: 100%; 168 | height: 100%; 169 | } 170 | 171 | .logoCont { 172 | width: 100vw; 173 | display: flex; 174 | justify-content: center; 175 | align-items: center; 176 | gap: 1rem; 177 | } 178 | 179 | #menuLogo { 180 | height: 3.3rem; 181 | left: 0; 182 | } 183 | 184 | .menuOn { 185 | opacity: 1 !important; 186 | transform: translateX(45rem); 187 | position: fixed !important; 188 | } 189 | 190 | .block { 191 | overflow: hidden; 192 | } 193 | 194 | #menuBar { 195 | top: -1rem; 196 | left: -45rem; 197 | height: 100vh; 198 | gap: 0.7rem; 199 | width: 100vw; 200 | padding: 2rem; 201 | display: flex; 202 | list-style: none; 203 | position: absolute; 204 | flex-direction: column; 205 | background-size: 15%; 206 | background-color: #272a31f8; 207 | justify-content: center; 208 | transition: 300ms opacity ease-in-out; 209 | opacity: 0; 210 | border-bottom: 4px solid var(--sColor); 211 | } 212 | 213 | .menuItem { 214 | width: 80%; 215 | height: 3rem; 216 | display: flex; 217 | justify-content: center; 218 | align-items: center; 219 | border-radius: 13px; 220 | border-bottom: 2px solid var(--sColor); 221 | border-left: 2px solid var(--sColor); 222 | transition: 300ms all ease-in-out; 223 | padding-left: 1rem; 224 | box-shadow: 0 0 61px -1px rgba(0, 0, 0, 0.75); 225 | z-index: 1; 226 | background-color: #272a31; 227 | } 228 | 229 | .menuItem:last-child { 230 | -webkit-text-stroke: 0.5px; 231 | margin-top: 1rem; 232 | width: 35%; 233 | height: 3.5rem; 234 | border: 3px solid var(--sColor); 235 | display: flex; 236 | justify-content: center; 237 | align-items: center; 238 | background-color: var(--pColor); 239 | } 240 | 241 | .menuItem:hover { 242 | border-bottom: 2px solid var(--sColor); 243 | transform: scale(0.95); 244 | background-color: transparent; 245 | } 246 | 247 | .menuItem:active { 248 | background-color: var(--sColor); 249 | transition: 1ms all ease-in-out; 250 | } 251 | 252 | .menuItem:last-child:hover { 253 | background-color: var(--sColor); 254 | } 255 | 256 | .menuLink { 257 | height: 100%; 258 | display: flex; 259 | justify-content: flex-start; 260 | align-items: center; 261 | width: 100%; 262 | } 263 | 264 | .menuLink:link, 265 | .menuLink:active, 266 | .menuLink:visited { 267 | text-decoration: none; 268 | color: white; 269 | } 270 | 271 | #campaignBtn { 272 | justify-content: center; 273 | padding-right: 1rem; 274 | height: 100%; 275 | white-space: nowrap; 276 | } 277 | 278 | /* NAVBAR MENU | NAVBAR MENU | NAVBAR MENU */ 279 | 280 | /* PARTNERS | PARTNERS | PARTNERS */ 281 | 282 | #partnersCont { 283 | background-color: var(--pColor); 284 | background-image: url(bg/partners-bg.webp); 285 | width: 100vw; 286 | height: auto; 287 | display: flex; 288 | justify-content: center; 289 | } 290 | 291 | #partners { 292 | display: flex; 293 | flex-direction: column; 294 | gap: 1rem; 295 | padding: 2rem 0; 296 | justify-content: center; 297 | align-items: center; 298 | width: 100%; 299 | } 300 | 301 | #partnersTittle { 302 | font-size: 1.3rem; 303 | color: white; 304 | padding: 1.5rem 1rem; 305 | margin: 0; 306 | } 307 | 308 | #partnersTittle::before { 309 | content: ""; 310 | display: inline-block; 311 | position: absolute; 312 | height: 6rem; 313 | width: 4rem; 314 | margin: -2rem 0.5rem; 315 | border-bottom: 3px solid var(--sColor); 316 | transition: 300ms all ease-in-out; 317 | } 318 | 319 | #partnersLogoCont { 320 | margin: 0; 321 | padding: 2rem 1rem; 322 | width: 100vw; 323 | height: auto; 324 | display: flex; 325 | flex-wrap: wrap; 326 | max-width: 30rem; 327 | } 328 | 329 | .partnerLogo { 330 | border-radius: 6px; 331 | display: flex; 332 | align-items: center; 333 | height: 2.1rem; 334 | width: auto; 335 | filter: brightness(5); 336 | } 337 | 338 | /* PARTNERS | PARTNERS | PARTNERS */ 339 | 340 | /* FOOTER | FOOTER | FOOTER */ 341 | 342 | #footerCont { 343 | width: 100vw; 344 | height: auto; 345 | } 346 | 347 | #footer { 348 | width: 100%; 349 | } 350 | 351 | #copryright { 352 | display: flex; 353 | justify-content: center; 354 | align-items: center; 355 | padding: 1.5rem 0; 356 | background-image: url(bg/copryright-pattern.webp); 357 | background-size: 4rem; 358 | } 359 | 360 | #footerImgCont { 361 | padding: 0; 362 | margin: 0; 363 | height: 100%; 364 | width: 45%; 365 | display: flex; 366 | align-items: center; 367 | } 368 | 369 | #footerImg { 370 | height: auto; 371 | width: 70%; 372 | padding: 0 0.5rem; 373 | } 374 | 375 | #info { 376 | width: 50%; 377 | height: auto; 378 | font-size: 0.7rem; 379 | text-align: center; 380 | line-height: 1rem; 381 | padding: 0 0.5rem; 382 | margin: 0; 383 | } 384 | 385 | #socialMediaCont { 386 | width: 100vw; 387 | height: auto; 388 | display: flex; 389 | background-color: black; 390 | padding: 0; 391 | border-top: 3px solid var(--sColor); 392 | } 393 | 394 | #socialMedia { 395 | width: 80%; 396 | display: flex; 397 | list-style: none; 398 | justify-content: center; 399 | margin: 0; 400 | padding: 0; 401 | gap: 2rem; 402 | } 403 | 404 | #socialMediaText { 405 | width: auto; 406 | text-align: center; 407 | color: white; 408 | } 409 | 410 | .socialMediaIcon { 411 | width: 1.8rem; 412 | filter: brightness(100); 413 | } 414 | 415 | /* FOOTER | FOOTER | FOOTER */ 416 | 417 | /* QUERIES MIN | QUERIES MIN */ 418 | 419 | @media (min-width: 375px) { 420 | #info { 421 | font-size: 0.845rem; 422 | } 423 | 424 | .partnerLogo { 425 | height: 2.1rem; 426 | } 427 | } 428 | 429 | @media (min-width: 410px) { 430 | #info { 431 | font-size: 0.9rem; 432 | } 433 | 434 | .partnerLogo { 435 | height: 2.5rem; 436 | } 437 | } 438 | 439 | @media (min-width: 430px) { 440 | #info { 441 | font-size: 1rem; 442 | } 443 | 444 | .partnerLogo { 445 | height: 2.5rem; 446 | } 447 | } 448 | 449 | @media (min-width: 460px) { 450 | #footerImg { 451 | transform: scale(0.8); 452 | } 453 | } 454 | 455 | @media (min-width: 500px) { 456 | .partnerLogo { 457 | height: 3rem; 458 | } 459 | } 460 | 461 | @media (min-width: 560px) { 462 | #footerImg { 463 | transform: scale(0.7); 464 | } 465 | 466 | #info { 467 | font-size: 1.2rem; 468 | } 469 | } 470 | 471 | @media (min-width: 680px) { 472 | #accessibilityCont { 473 | display: flex; 474 | } 475 | 476 | #menuCont { 477 | padding: 0; 478 | margin: 0; 479 | } 480 | 481 | .fixed { 482 | position: fixed !important; 483 | } 484 | 485 | #menu { 486 | z-index: 0; 487 | display: flex; 488 | justify-content: space-evenly; 489 | align-items: center; 490 | height: 100%; 491 | width: 100%; 492 | } 493 | 494 | #menuBtn { 495 | display: none; 496 | } 497 | 498 | .logoCont { 499 | width: 35%; 500 | } 501 | 502 | #menuLogo { 503 | height: 3rem; 504 | left: 0; 505 | } 506 | 507 | #menuBar { 508 | height: 45%; 509 | width: 50%; 510 | gap: 1rem; 511 | top: 0; 512 | left: 0; 513 | margin: 0; 514 | opacity: 1; 515 | padding: 0; 516 | border: none; 517 | position: relative; 518 | flex-direction: row; 519 | align-items: center; 520 | justify-content: center; 521 | background-color: transparent; 522 | } 523 | 524 | .menuItem { 525 | width: auto; 526 | height: 100%; 527 | margin: 0; 528 | padding: 0; 529 | border-radius: 0; 530 | border-bottom: none; 531 | border-left: none; 532 | box-shadow: none; 533 | background-color: transparent; 534 | font-size: 14px; 535 | } 536 | 537 | .menuItem:hover { 538 | border-bottom: none; 539 | transform: scale(1); 540 | border-radius: 0; 541 | } 542 | 543 | .menuItem:not(:last-child)::before { 544 | content: ""; 545 | position: absolute; 546 | width: 95%; 547 | height: 1.5rem; 548 | background-color: transparent; 549 | border-bottom: 4px solid var(--sColor); 550 | transform: scaleX(0); 551 | transition: 300ms all ease-in-out; 552 | } 553 | 554 | .menuItem:hover::before { 555 | transform: scale(1); 556 | z-index: -1; 557 | } 558 | 559 | .menuItem:last-child { 560 | -webkit-text-stroke: 0.5px; 561 | margin-top: 0; 562 | width: auto; 563 | height: 3.5rem; 564 | border-radius: 0; 565 | border: 5px solid var(--sColor); 566 | display: flex; 567 | justify-content: center; 568 | align-items: center; 569 | background-color: transparent; 570 | } 571 | 572 | .menuItem:active { 573 | background-color: transparent; 574 | transition: 1ms all ease-in-out; 575 | border-radius: 16px; 576 | } 577 | 578 | .menuItem:last-child:hover { 579 | background-color: transparent; 580 | transform: scale(1); 581 | border-radius: 12px; 582 | } 583 | 584 | .menuLink { 585 | color: var(--pColor); 586 | height: 100%; 587 | transition: 300ms all ease-in-out; 588 | } 589 | 590 | .menuItem:hover > .menuAction { 591 | color: var(--sColor); 592 | -webkit-text-stroke-color: var(--sColor); 593 | } 594 | 595 | .menuItem:last-child:hover > .menuAction { 596 | color: black; 597 | -webkit-text-stroke-color: black; 598 | border-radius: 16px; 599 | } 600 | 601 | .menuLink:link, 602 | .menuLink:active, 603 | .menuLink:visited { 604 | text-decoration: none; 605 | color: rgb(0, 0, 0); 606 | } 607 | 608 | #campaignBtn { 609 | padding: 0 0.5rem; 610 | } 611 | 612 | #partnersLogoCont { 613 | display: flex; 614 | max-width: 100%; 615 | flex-wrap: nowrap; 616 | gap: 2%; 617 | } 618 | 619 | .partnerLogo { 620 | width: 15%; 621 | height: auto; 622 | } 623 | 624 | #copryright { 625 | justify-content: space-evenly; 626 | } 627 | 628 | #footerImgCont { 629 | width: 0; 630 | } 631 | 632 | #footerImg { 633 | width: 13rem; 634 | transform: scale(1); 635 | } 636 | 637 | #info { 638 | width: auto; 639 | } 640 | } 641 | 642 | @media (min-width: 768px) { 643 | .menuItem { 644 | font-size: 15px; 645 | } 646 | 647 | .menuItem:last-child { 648 | margin-left: 2rem; 649 | } 650 | } 651 | 652 | @media (min-width: 1024px) { 653 | #menuBar { 654 | gap: 2rem; 655 | } 656 | 657 | .partnerLogo { 658 | width: 9rem; 659 | } 660 | 661 | #footerImgCont { 662 | width: 15%; 663 | } 664 | } 665 | 666 | /* QUERIES MIN | QUERIES MIN */ 667 | 668 | /* QUERIES MAX | QUERIES MAX */ 669 | 670 | @media (max-width: 520px) { 671 | #menuLogo { 672 | opacity: 0; 673 | } 674 | } 675 | 676 | /* QUERIES MAX | QUERIES MAX */ 677 | -------------------------------------------------------------------------------- /style/logo/partner-airbnb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /style/logo/partner-daumkakao.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /style/logo/partner-google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | --------------------------------------------------------------------------------