├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── MIT.md ├── README.md ├── about.html ├── background_images ├── main_desktop.png ├── mobile_bg.png ├── orange.jpeg ├── past-function-1.jpg └── past-function-2.jpg ├── icons ├── cross.png ├── dance.png ├── down-arrow.png ├── facebook.png ├── food.png ├── hamburger-menu.svg ├── main-fill-bg.png ├── singer.png ├── trophy.png ├── twitter.png ├── up-arrow.png ├── website-logo.png └── welcome.png ├── index.html ├── package-lock.json ├── package.json ├── partners_logo ├── partner-1.png ├── partner-2.png ├── partner-3.png ├── partner-4.png ├── partner-5.png └── partner-6.png ├── script ├── about.js └── main.js ├── speakers-images ├── backgound-format.jpg ├── speaker-1.jpg ├── speaker-10.jpg ├── speaker-2.jpg ├── speaker-3.jpg ├── speaker-4.jpg ├── speaker-5.jpg ├── speaker-6.jpg ├── speaker-7.jpg ├── speaker-8.jpg └── speaker-9.jpg └── styles ├── about.css └── main.css /.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": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /.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: "12.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: "12.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: "12.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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.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": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } 21 | -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2021, Rohit Bhatt 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this website and associated documentation files, to deal in the website without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the website, and to permit persons to whom the website is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the website. 6 | 7 | THE website IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE website OR THE USE OR OTHER DEALINGS IN THE website. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | logo 5 |
6 | 7 |

HTML-CSS-JS-capstone Project

8 | 9 |
10 | 11 | 12 | 13 | # 📗 Table of Contents 14 | 15 | - [📖 About the Project](#about-project) 16 | - [🛠 Built With](#built-with) 17 | - [Tech Stack](#tech-stack) 18 | - [Key Features](#key-features) 19 | - [🚀 Live Demo](#live-demo) 20 | - [Video Walkthough](#video-walkthough) 21 | - [💻 Getting Started](#getting-started) 22 | - [Setup](#setup) 23 | - [Prerequisites](#prerequisites) 24 | - [Install](#install) 25 | - [Usage](#usage) 26 | - [Run tests](#run-tests) 27 | - [Deployment](#triangular_flag_on_post-deployment) 28 | - [👥 Authors](#authors) 29 | - [🔭 Future Features](#future-features) 30 | - [🤝 Contributing](#contributing) 31 | - [⭐️ Show your support](#support) 32 | - [🙏 Acknowledgements](#acknowledgements) 33 | - [❓ FAQ](#faq) 34 | - [📝 License](#license) 35 | 36 | # 📖 [HTML-CSS-JS-capstone Project] 37 | 38 | > This is the final capstone project for HTML & CSS First Module from the microverse curriculum. The IMAA Show is an annual event in the India that is organized by the INDIAN MUSIC ASSOCIATION (IMA), which describes it as the India’s largest trade-only event for the music products, pro audio, and event tech industry that features music concert, dance show, and a lot of other performances from different musicians 39 | 40 | ## 🛠 Built With 41 | 42 | ### Tech Stack 43 | 44 | > This project use only html,css & javascript. 45 |
46 | Client 47 | 52 |
53 | 54 | ### Key Features 55 | 56 | - **Responsive to Mobile and desktop** 57 | - **Transition used** 58 | - **feature speaker stored in array of object** 59 | 60 |

(back to top)

61 | 62 | ## 🚀 Live Demo 63 | 64 | - [Live Demo Link](https://rbhatt1999.github.io/HTML-CSS-JS-capstone/) 65 | 66 |

(back to top)

67 | 68 | ## Video walkthough 69 | - [loom video link](https://www.loom.com/share/a2508487efc6419fb0609d415c98e555) 70 | 71 |

(back to top)

72 | 73 | ## 💻 Getting Started with HTML CSS JS capstone 74 | 75 | ### Setup 76 | 77 | Clone this [repository](https://github.com/rbhatt1999/HTML-CSS-JS-capstone.git) to your desired folder: 78 | 79 | ```sh 80 | cd my-folder 81 | git clone git@github.com:rbhatt1999/HTML-CSS-JS-capstone.git 82 | cd HTML-CSS-JS-capstone 83 | ``` 84 | 85 | ### Install 86 | 87 | Install this project with: 88 | 89 | ```sh 90 | npm install 91 | ``` 92 | 93 | ### Start 94 | 95 | To start the application, run the following command 96 | 97 | ```sh 98 | npm start 99 | ``` 100 | 101 | ### Run tests 102 | 103 | To run tests, run the following command: 104 | 105 | ```sh 106 | npm test 107 | ``` 108 | 109 |

(back to top)

110 | 111 | ## 👥 Authors 112 | 👤 **Rohit Bhatt** 113 | 114 | - GitHub: [@rbhatt1999](https://github.com/rbhatt1999) 115 | - Twitter: [@rohitbh02837778](https://twitter.com/rohitbh02837778) 116 | - LinkedIn: [rohit-bhatt-747166193](https://www.linkedin.com/in/rohit-bhatt-747166193/) 117 | 118 |

(back to top)

119 | 120 | ## 🔭 Future Features 121 | 122 | > Other pages like tickets page and schedule page going to be added in future. 123 | 124 |

(back to top)

125 | 126 | ## 🤝 Contributing 127 | 128 | Contributions, issues, and feature requests are welcome! 129 | 130 | Feel free to check the [issues page](https://github.com/rbhatt1999/HTML-CSS-JS-capstone/issues). 131 | 132 |

(back to top)

133 | 134 | ## ⭐️ Show your support 135 | 136 | If you like this project, Give a ⭐️. 137 | 138 |

(back to top)

139 | 140 | ## 🙏 Acknowledgments 141 | 142 | - The original design ideal by [Cindy Shin in Behance](https://www.behance.net/adagio07) 143 | 144 | - Project from [Microverse](https://www.microverse.org/?grsf=i6yi2m) html, css & Javascript module 145 | 146 |

(back to top)

147 | 148 | ## 📝 License 149 | 150 | This project is [MIT](./MIT.md) licensed. 151 | 152 |

(back to top)

153 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | IMAA About 8 | 9 | 10 | 11 |
12 | 13 | 20 | 31 |
32 |
33 |
34 |

“Music awards show”

35 |

INDIAN MUSIC ASSOCIATION AWARDs SHOW 2023

36 |

The Indian music association awards show popularly known as IMAA, is an annual awards ceremony for Bollywood Music. 37 | Produced by MOMO International Entertainment Pvt. Ltd, the winners of the awards are decided by fans, who vote online for their favourite actors 38 | from the Hindi film industry.The first awards were presented in 2000 at The Millennium Dome in London, United Kingdom. From then onwards, the 39 | awards are held at locations around the world signifying the international success of Bollywood. Since 2000, the event has expanded from a 40 | one-night event to a three-day celebration, hosting various events and activities relating to the Indian film industry.

41 |

Please contact us per Email for any further questions about NAMM 2022

42 | rbhatt199924@gmail.com 43 |
44 |
45 |

Indian music association awards show 2023

46 |
47 |

The logo Indian music association awards was decided through the logo competition from 8 June to 7 July.

48 |
49 | IMAA logo 50 |
51 |
52 |
53 |

See the past IMAA shows

54 |
55 |

Take a look at the last two IAMM shows which took place in Uttar pradesh, Rajasthan and Mumbai.

56 | 80 |
81 |
82 |

Partners

83 |
84 | 92 |
93 | 97 |
98 | 99 | 100 | -------------------------------------------------------------------------------- /background_images/main_desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/background_images/main_desktop.png -------------------------------------------------------------------------------- /background_images/mobile_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/background_images/mobile_bg.png -------------------------------------------------------------------------------- /background_images/orange.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/background_images/orange.jpeg -------------------------------------------------------------------------------- /background_images/past-function-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/background_images/past-function-1.jpg -------------------------------------------------------------------------------- /background_images/past-function-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/background_images/past-function-2.jpg -------------------------------------------------------------------------------- /icons/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/cross.png -------------------------------------------------------------------------------- /icons/dance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/dance.png -------------------------------------------------------------------------------- /icons/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/down-arrow.png -------------------------------------------------------------------------------- /icons/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/facebook.png -------------------------------------------------------------------------------- /icons/food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/food.png -------------------------------------------------------------------------------- /icons/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /icons/main-fill-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/main-fill-bg.png -------------------------------------------------------------------------------- /icons/singer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/singer.png -------------------------------------------------------------------------------- /icons/trophy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/trophy.png -------------------------------------------------------------------------------- /icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/twitter.png -------------------------------------------------------------------------------- /icons/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/up-arrow.png -------------------------------------------------------------------------------- /icons/website-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/website-logo.png -------------------------------------------------------------------------------- /icons/welcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/icons/welcome.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | IMAA Home 8 | 9 | 10 | 11 |
12 | 13 | 20 | 31 |
32 |
33 |
34 |

“ Music, once admitted to the soul, becomes a sort of spirit, and never dies.”

35 |

INDIAN MUSIC ASSOCIATION AWARDs SHOW 2023

36 |

We urge you to make plans to award show at the upcoming IMAA show, an in-person event 37 | set to reunite our indian communities, continue to power our music industry, and create this world more musical.

38 |

2023.01.02(MON) ~ 03(TUE)

39 |

@JVL stadium, Haldwani, Uttarakhand,India

40 |
41 |
42 |

Main Program

43 |
44 | 71 | 72 | SEE THE WHOLE PROGRAM 73 |
74 |
75 |

Featured Speakers

76 |
77 | 79 | 80 | 81 |
82 |
83 |

Partners

84 |
85 | 93 |
94 | 98 |
99 | 100 | 101 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "babel-eslint": "^10.1.0", 4 | "eslint": "^7.32.0", 5 | "eslint-config-airbnb-base": "^14.2.1", 6 | "eslint-plugin-import": "^2.26.0", 7 | "hint": "^7.1.3", 8 | "stylelint": "^13.13.1", 9 | "stylelint-config-standard": "^21.0.0", 10 | "stylelint-csstree-validator": "^1.9.0", 11 | "stylelint-scss": "^3.21.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /partners_logo/partner-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/partners_logo/partner-1.png -------------------------------------------------------------------------------- /partners_logo/partner-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/partners_logo/partner-2.png -------------------------------------------------------------------------------- /partners_logo/partner-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/partners_logo/partner-3.png -------------------------------------------------------------------------------- /partners_logo/partner-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/partners_logo/partner-4.png -------------------------------------------------------------------------------- /partners_logo/partner-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/partners_logo/partner-5.png -------------------------------------------------------------------------------- /partners_logo/partner-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/partners_logo/partner-6.png -------------------------------------------------------------------------------- /script/about.js: -------------------------------------------------------------------------------- 1 | const body = document.querySelector('body'); 2 | const menuDiv = document.createElement('div'); 3 | const main = document.querySelector('main'); 4 | menuDiv.className = 'menu-content'; 5 | menuDiv.style.display = 'none'; 6 | 7 | const divContent = ' About Home Join SponsorGuestIMAA 2022'; 8 | menuDiv.innerHTML = divContent; 9 | body.appendChild(menuDiv); 10 | const hamburgerIcon = document.querySelector('.hamburger-container'); 11 | const headerContainer = document.querySelector('header'); 12 | hamburgerIcon.addEventListener('click', () => { 13 | menuDiv.style.display = 'flex'; 14 | main.style.filter = 'blur(5px)'; 15 | headerContainer.style.display = 'none'; 16 | }); 17 | 18 | const crossIcon = document.querySelector('.cross-icon'); 19 | crossIcon.addEventListener('click', () => { 20 | menuDiv.style.display = 'none'; 21 | main.style.filter = 'blur(0)'; 22 | headerContainer.style.display = 'block'; 23 | }); 24 | 25 | const itemList = document.querySelectorAll('.menu-content>a'); 26 | 27 | itemList.forEach((item) => { 28 | item.addEventListener('click', () => { 29 | menuDiv.style.display = 'none'; 30 | main.style.filter = 'blur(0)'; 31 | headerContainer.style.display = 'block'; 32 | }); 33 | }); -------------------------------------------------------------------------------- /script/main.js: -------------------------------------------------------------------------------- 1 | const speakers = [ 2 | { 3 | name: 'Sonu Nigam', 4 | position: 'Indian Singer & Music Producer', 5 | description: 'Sonu Nigam has been described in the media as one of the most popular playback singers.', 6 | image: './speakers-images/speaker-1.jpg', 7 | }, 8 | { 9 | name: 'Jubin Nautiyal', 10 | position: 'Indian playback singer and live performer.', 11 | description: 'Jubin Nautiyal won the IIFA award for “Playback Singer ” for the song “Raataan Lambiyan.” ', 12 | image: './speakers-images/speaker-2.jpg', 13 | }, 14 | { 15 | name: 'Salman Khan', 16 | position: 'Actor, producer, and television personality', 17 | description: 'In his film career spanning over thirty years, Khan has received numerous awards.', 18 | image: './speakers-images/speaker-3.jpg', 19 | }, 20 | { 21 | name: 'Rohit Shetty', 22 | position: 'Film director, producer and television host', 23 | description: 'He is one of the most successful and recognised film director of Hindi Cinema.', 24 | image: './speakers-images/speaker-4.jpg', 25 | }, 26 | { 27 | name: 'Arijit Singh', 28 | position: 'Indian singer and music composer', 29 | description: 'Arijit Singh is the recipient of a National Award and six Filmfare Awards.', 30 | image: './speakers-images/speaker-5.jpg', 31 | }, 32 | { 33 | name: 'Naved', 34 | position: 'Radio Jockey & Voice Over Artist ', 35 | description: 'RJ Naved became a household name in India after running his show on Radio Mirchi 98.3 FM', 36 | image: './speakers-images/speaker-6.jpg', 37 | }, 38 | 39 | ]; 40 | 41 | const featuredSpeakers = document.querySelector('.featured-speakers-list'); 42 | 43 | speakers.forEach((item) => { 44 | const li = document.createElement('li'); 45 | li.innerHTML = `
${item.name}'s photo
46 |
47 |

${item.name}

48 |

${item.position}

49 |
50 |

${item.description}

51 |
`; 52 | featuredSpeakers.appendChild(li); 53 | }); 54 | 55 | const speakerList = document.querySelectorAll('.featured-speakers-list>li'); 56 | const featureSpeakerButton = document.querySelectorAll('.featured-speakers-button'); 57 | featureSpeakerButton[0].addEventListener('click', () => { 58 | for (let i = 2; i < speakerList.length; i += 1) { 59 | speakerList[i].style.display = 'flex'; 60 | } 61 | featureSpeakerButton[0].style.display = 'none'; 62 | featureSpeakerButton[1].style.display = 'flex'; 63 | }); 64 | 65 | featureSpeakerButton[1].addEventListener('click', () => { 66 | for (let i = 2; i < speakerList.length; i += 1) { 67 | speakerList[i].style.display = 'none'; 68 | } 69 | featureSpeakerButton[0].style.display = 'flex'; 70 | featureSpeakerButton[1].style.display = 'none'; 71 | }); 72 | 73 | const body = document.querySelector('body'); 74 | const menuDiv = document.createElement('div'); 75 | const main = document.querySelector('main'); 76 | menuDiv.className = 'menu-content'; 77 | menuDiv.style.display = 'none'; 78 | 79 | const divContent = ' About Home Join SponsorGuestIMAA 2022'; 80 | menuDiv.innerHTML = divContent; 81 | body.appendChild(menuDiv); 82 | const hamburgerIcon = document.querySelector('.hamburger-container'); 83 | const headerContainer = document.querySelector('header'); 84 | hamburgerIcon.addEventListener('click', () => { 85 | menuDiv.style.display = 'flex'; 86 | main.style.filter = 'blur(5px)'; 87 | headerContainer.style.display = 'none'; 88 | }); 89 | 90 | const crossIcon = document.querySelector('.cross-icon'); 91 | crossIcon.addEventListener('click', () => { 92 | menuDiv.style.display = 'none'; 93 | main.style.filter = 'blur(0)'; 94 | headerContainer.style.display = 'block'; 95 | }); 96 | 97 | const itemList = document.querySelectorAll('.menu-content>a'); 98 | 99 | itemList.forEach((item) => { 100 | item.addEventListener('click', () => { 101 | menuDiv.style.display = 'none'; 102 | main.style.filter = 'blur(0)'; 103 | headerContainer.style.display = 'block'; 104 | }); 105 | }); 106 | -------------------------------------------------------------------------------- /speakers-images/backgound-format.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/backgound-format.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-1.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-10.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-2.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-3.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-4.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-5.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-6.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-7.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-8.jpg -------------------------------------------------------------------------------- /speakers-images/speaker-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rbhatt1999/HTML-CSS-JS-capstone/ce544597231ae1052957cf235a6934f3a51b5a70/speakers-images/speaker-9.jpg -------------------------------------------------------------------------------- /styles/about.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap'); 2 | 3 | * { 4 | font-family: "Lato", sans-serif; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | :root { 10 | --primary: #ec5242; 11 | --secondary: #272a31; 12 | --tertiary: #d3d3d3; 13 | --background: #f7f7f9; 14 | --dark-text: #515151; 15 | --bg-white: #fff; 16 | --color-white: #fff; 17 | } 18 | 19 | .header-container { 20 | position: fixed; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | z-index: 10; 25 | background-color: white; 26 | } 27 | 28 | .hamburger-container { 29 | margin-left: 1rem; 30 | } 31 | 32 | .login-details { 33 | display: none; 34 | } 35 | 36 | .logo-tab-container { 37 | display: none; 38 | } 39 | 40 | .headline-section { 41 | background-image: url(../background_images/mobile_bg.png); 42 | padding: 3rem 1.5rem; 43 | background-size: contain; 44 | margin: 1.5rem 0; 45 | display: flex; 46 | flex-direction: column; 47 | align-items: center; 48 | } 49 | 50 | .headline-quote { 51 | color: var(--primary); 52 | font-weight: 400; 53 | font-size: 1.25rem; 54 | margin: 0.75rem 0; 55 | text-align: center; 56 | } 57 | 58 | .headline-h1 { 59 | color: var(--primary); 60 | text-align: center; 61 | font-size: 1.8rem; 62 | font-weight: 900; 63 | line-height: 3.25rem; 64 | } 65 | 66 | .headline-discription { 67 | color: var(--dark-text); 68 | background-color: var(--bg-white); 69 | box-sizing: border-box; 70 | border: 1px solid #d3d3d3; 71 | padding: 1rem; 72 | margin: 1rem 0; 73 | line-height: 1.5rem; 74 | } 75 | 76 | .headline-contact { 77 | font-size: 0.9rem; 78 | line-height: 1.5rem; 79 | text-align: center; 80 | color: var(--dark-text); 81 | font-weight: 400; 82 | } 83 | 84 | .headline-section a { 85 | color: black; 86 | font-weight: 700; 87 | } 88 | 89 | .logo-data { 90 | display: flex; 91 | flex-direction: column; 92 | align-items: center; 93 | padding: 2.5rem 1.5rem; 94 | background-size: 3rem; 95 | background-repeat: repeat; 96 | border-bottom: 1px solid #d3d3d3; 97 | } 98 | 99 | footer h2 { 100 | font-size: 0.8125rem; 101 | color: var(--dark-text); 102 | text-align: center; 103 | } 104 | 105 | .logo-data h2 { 106 | color: var(--secondary); 107 | font-size: 1.17em; 108 | text-align: center; 109 | font-weight: 700; 110 | } 111 | 112 | .underline1 { 113 | background-color: var(--primary); 114 | width: 1.9rem; 115 | align-self: center; 116 | margin: 0.75rem 0; 117 | height: 0.1rem; 118 | } 119 | 120 | .logo-data p { 121 | font-size: 0.9rem; 122 | text-align: center; 123 | line-height: 1.5rem; 124 | } 125 | 126 | .logo-container { 127 | display: flex; 128 | justify-content: center; 129 | align-items: center; 130 | margin-top: 2.5rem; 131 | padding: 2.5rem 0; 132 | border: 1px solid #d3d3d3; 133 | max-width: 40rem; 134 | width: 100%; 135 | } 136 | 137 | footer img { 138 | max-width: 8rem; 139 | } 140 | 141 | .logo-container img { 142 | max-width: 10rem; 143 | } 144 | 145 | .past-function { 146 | display: flex; 147 | flex-direction: column; 148 | align-items: center; 149 | padding: 2.5rem 1.5rem; 150 | background-size: 3rem; 151 | background-repeat: repeat; 152 | border-bottom: 1px solid #d3d3d3; 153 | } 154 | 155 | .past-function h2 { 156 | color: var(--secondary); 157 | font-size: 1.17em; 158 | text-align: center; 159 | font-weight: 700; 160 | } 161 | 162 | .past-function p { 163 | font-size: 0.9rem; 164 | text-align: center; 165 | line-height: 1.5rem; 166 | } 167 | 168 | .card-container { 169 | display: flex; 170 | flex-direction: column; 171 | gap: 2rem; 172 | padding: 1.5rem; 173 | } 174 | 175 | .card-container li { 176 | list-style: none; 177 | } 178 | 179 | .card-image { 180 | background-color: var(--primary); 181 | display: flex; 182 | flex-direction: column; 183 | align-items: center; 184 | position: relative; 185 | } 186 | 187 | .card-image img { 188 | width: 100%; 189 | opacity: 0.4; 190 | } 191 | 192 | .card-details { 193 | position: absolute; 194 | display: flex; 195 | flex-direction: column; 196 | align-items: center; 197 | top: 50%; 198 | left: 50%; 199 | transform: translate(-50%, -50%); 200 | } 201 | 202 | .card-details h3 { 203 | font-size: 1.25rem; 204 | color: var(--color-white); 205 | line-height: 1.5rem; 206 | font-weight: 700; 207 | } 208 | 209 | .card-details p { 210 | padding-top: 10px; 211 | font-size: 0.83333125rem; 212 | text-align: center; 213 | color: var(--color-white); 214 | line-height: 1.5rem; 215 | font-weight: 400; 216 | } 217 | 218 | .partners { 219 | background-color: var(--secondary); 220 | display: flex; 221 | flex-direction: column; 222 | align-items: center; 223 | padding: 2rem 1rem; 224 | } 225 | 226 | .partners h2 { 227 | color: var(--color-white); 228 | font-size: 1.4rem; 229 | } 230 | 231 | .partners-list { 232 | display: flex; 233 | flex-wrap: wrap; 234 | justify-content: center; 235 | gap: 1rem; 236 | } 237 | 238 | .partners-list li { 239 | max-width: 90px; 240 | list-style: none; 241 | display: flex; 242 | align-items: center; 243 | } 244 | 245 | .menu-content img { 246 | justify-self: center; 247 | align-self: end; 248 | margin-top: 40px; 249 | margin-right: 38px; 250 | } 251 | 252 | .partners-list li img { 253 | width: 100%; 254 | filter: grayscale(100%) contrast(30%); 255 | } 256 | 257 | footer { 258 | display: flex; 259 | align-items: center; 260 | gap: 1.9rem; 261 | padding: 2.5rem; 262 | justify-content: center; 263 | } 264 | 265 | .menu-content { 266 | width: 100%; 267 | height: 100%; 268 | flex-direction: column; 269 | position: fixed; 270 | top: 0; 271 | right: 0; 272 | bottom: 0; 273 | left: 0; 274 | background: rgba(236, 83, 66, 0.9); 275 | } 276 | 277 | .menu-content > a { 278 | text-decoration: none; 279 | font-style: normal; 280 | font-weight: 700; 281 | font-size: 2rem; 282 | line-height: 3rem; 283 | color: #fff5e1; 284 | padding-bottom: 15px; 285 | border-bottom: solid 1px #6f6c6b; 286 | margin: 1rem 1rem 0 1rem; 287 | padding-left: 16px; 288 | } 289 | 290 | @media (min-width: 768px) { 291 | .hamburger-container { 292 | display: none; 293 | } 294 | 295 | .login-details { 296 | display: flex; 297 | background-color: var(--secondary); 298 | justify-content: right; 299 | align-items: center; 300 | gap: 2rem; 301 | padding: 0.1rem 10%; 302 | } 303 | 304 | .login-details img { 305 | max-width: 1rem; 306 | height: auto; 307 | } 308 | 309 | .login-details a { 310 | text-decoration: none; 311 | color: var(--color-white); 312 | font-size: 14px; 313 | } 314 | 315 | .logo-tab-container { 316 | display: flex; 317 | justify-content: space-between; 318 | padding: 0.5rem 10%; 319 | } 320 | 321 | .logo-tab-container img { 322 | max-width: 7rem; 323 | } 324 | 325 | .tab-container { 326 | display: flex; 327 | flex-direction: row; 328 | gap: 2rem; 329 | align-items: center; 330 | } 331 | 332 | .tab-container > a { 333 | color: black; 334 | text-decoration: none; 335 | font-size: 1rem; 336 | line-height: 1.5rem; 337 | font-weight: 400; 338 | } 339 | 340 | .headline-section a { 341 | max-width: 55%; 342 | } 343 | 344 | .tab-container > a:last-child { 345 | border: 3px solid var(--primary); 346 | box-sizing: border-box; 347 | padding: 0.25rem 0.5rem; 348 | color: #f51d1d; 349 | font-size: 0.75rem; 350 | } 351 | 352 | .headline-section { 353 | background-image: url(../background_images/main_desktop.png); 354 | background-size: cover; 355 | } 356 | 357 | .headline-quote { 358 | max-width: 55%; 359 | } 360 | 361 | .headline-h1 { 362 | display: flex; 363 | justify-content: center; 364 | } 365 | 366 | .headline-h1 h1 { 367 | max-width: 55%; 368 | } 369 | 370 | .headline-discription { 371 | max-width: 55%; 372 | } 373 | 374 | .headline-contact { 375 | max-width: 55%; 376 | } 377 | 378 | .logo-container { 379 | width: 40%; 380 | padding: 4% 0; 381 | } 382 | 383 | .card-container { 384 | flex-direction: row; 385 | justify-content: center; 386 | } 387 | 388 | .card-container li { 389 | flex: 1; 390 | max-width: 35%; 391 | } 392 | 393 | .card-details h3 { 394 | font-size: 150%; 395 | } 396 | 397 | .card-details p { 398 | padding-top: 10px; 399 | font-size: 100%; 400 | } 401 | } 402 | -------------------------------------------------------------------------------- /styles/main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap'); 2 | 3 | * { 4 | font-family: "Lato", sans-serif; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | :root { 10 | --primary: #ec5242; 11 | --secondary: #272a31; 12 | --tertiary: #d3d3d3; 13 | --background: #f7f7f9; 14 | --dark-text: #515151; 15 | --bg-white: #fff; 16 | --color-white: #fff; 17 | } 18 | 19 | .header-container { 20 | position: fixed; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | z-index: 10; 25 | background-color: white; 26 | } 27 | 28 | .hamburger-container { 29 | margin-left: 1rem; 30 | } 31 | 32 | .logo-tab-container { 33 | display: none; 34 | } 35 | 36 | .login-details { 37 | display: none; 38 | } 39 | 40 | .headline-section { 41 | background-image: url(../background_images/mobile_bg.png); 42 | padding: 3rem 1.5rem; 43 | background-size: contain; 44 | margin: 1.5rem 0; 45 | display: flex; 46 | flex-direction: column; 47 | } 48 | 49 | .headline-quote { 50 | color: var(--primary); 51 | font-weight: 400; 52 | font-size: 1.25rem; 53 | margin: 0.75rem 0; 54 | } 55 | 56 | .headline-h1 { 57 | -webkit-background-clip: text; 58 | background-image: url(../background_images/orange.jpeg); 59 | color: transparent; 60 | } 61 | 62 | .headline-h1 h1 { 63 | font-weight: 900; 64 | font-size: 2.5rem; 65 | line-height: 3.25rem; 66 | } 67 | 68 | .headline-discription { 69 | color: var(--dark-text); 70 | background-color: var(--background); 71 | border: 2px solid white; 72 | padding: 1rem; 73 | margin: 1rem 0; 74 | line-height: 1.5rem; 75 | } 76 | 77 | .headline-date { 78 | line-height: 1.875rem; 79 | font-size: 1.25rem; 80 | margin: 0 0 0.75rem 0; 81 | color: var(--dark-text); 82 | font-weight: 900; 83 | } 84 | 85 | .headline-location { 86 | font-size: 1.01rem; 87 | line-height: 1.5rem; 88 | font-weight: normal; 89 | color: var(--dark-text); 90 | } 91 | 92 | .main-program { 93 | background-color: var(--secondary); 94 | display: flex; 95 | flex-direction: column; 96 | align-items: center; 97 | padding: 2rem 1rem; 98 | background-image: url(../icons/main-fill-bg.png); 99 | background-size: 3rem; 100 | background-repeat: repeat; 101 | } 102 | 103 | footer h2 { 104 | font-size: 0.8125rem; 105 | color: var(--dark-text); 106 | text-align: center; 107 | } 108 | 109 | .main-program h2 { 110 | color: var(--color-white); 111 | font-size: 1.4rem; 112 | } 113 | 114 | .underline1 { 115 | background-color: var(--primary); 116 | width: 1.9rem; 117 | align-self: center; 118 | margin: 0.75rem 0; 119 | height: 0.1rem; 120 | } 121 | 122 | .program-list { 123 | display: flex; 124 | flex-direction: column; 125 | gap: 1rem; 126 | padding: 2rem 0; 127 | } 128 | 129 | .program-list li { 130 | padding: 0 0.5rem; 131 | display: flex; 132 | flex-direction: row; 133 | flex-wrap: wrap; 134 | align-items: center; 135 | gap: 1rem; 136 | background-color: rgba(255, 255, 255, 0.1); 137 | min-height: 5.9rem; 138 | transition: all 400ms linear 0.1ms; 139 | } 140 | 141 | .featured-speakers-list li { 142 | display: flex; 143 | flex-direction: row; 144 | gap: 1rem; 145 | } 146 | 147 | .partners-list li { 148 | max-width: 90px; 149 | list-style: none; 150 | display: flex; 151 | align-items: center; 152 | } 153 | 154 | .program-list li:hover { 155 | border: 2px white solid; 156 | border-radius: 5px; 157 | } 158 | 159 | footer img { 160 | max-width: 8rem; 161 | } 162 | 163 | .speaker-image-container img { 164 | position: absolute; 165 | width: 90%; 166 | top: 10%; 167 | left: 10%; 168 | } 169 | 170 | .featured-speakers-button img { 171 | width: 20px; 172 | } 173 | 174 | .menu-content img { 175 | justify-self: center; 176 | align-self: end; 177 | margin-top: 40px; 178 | margin-right: 38px; 179 | } 180 | 181 | .program-list li img { 182 | max-width: 2.4rem; 183 | flex: 0.5; 184 | } 185 | 186 | .speaker-details-container h3 { 187 | font-weight: bold; 188 | font-size: 1rem; 189 | } 190 | 191 | .program-list li h3 { 192 | color: var(--primary); 193 | font-size: 1rem; 194 | flex: 1; 195 | } 196 | 197 | .program-list li p { 198 | font-size: 0.875rem; 199 | color: var(--color-white); 200 | line-height: 1.5rem; 201 | font-weight: normal; 202 | flex: 2; 203 | } 204 | 205 | .btn { 206 | letter-spacing: 0.03em; 207 | padding: 1.5rem; 208 | cursor: pointer; 209 | font-weight: 600; 210 | box-sizing: border-box; 211 | background-color: var(--primary); 212 | color: var(--color-white); 213 | transition: all 400ms linear 0.1ms; 214 | } 215 | 216 | .btn:hover { 217 | background-color: var(--color-white); 218 | color: var(--primary); 219 | border: 2px solid var(--primary); 220 | border-radius: 10px; 221 | } 222 | 223 | .main-program a { 224 | display: none; 225 | } 226 | 227 | .featured-speakers { 228 | display: flex; 229 | flex-direction: column; 230 | align-items: center; 231 | padding: 2rem 1rem; 232 | padding-bottom: 3rem; 233 | } 234 | 235 | .featured-speakers h2 { 236 | color: var(--secondary); 237 | font-size: 1.4rem; 238 | } 239 | 240 | .featured-speakers-list { 241 | display: flex; 242 | flex-direction: column; 243 | gap: 1.5rem; 244 | } 245 | 246 | .featured-speakers-list li:nth-child(n+3) { 247 | display: none; 248 | } 249 | 250 | .speaker-image-container { 251 | position: relative; 252 | min-width: 8rem; 253 | min-height: 8rem; 254 | background-image: url(../speakers-images/backgound-format.jpg); 255 | background-size: contain; 256 | background-position: top left; 257 | background-repeat: no-repeat; 258 | } 259 | 260 | .speaker-details-container { 261 | display: flex; 262 | flex-direction: column; 263 | gap: 0.8rem; 264 | } 265 | 266 | .speaker-position { 267 | color: var(--primary); 268 | font-size: 0.8125rem; 269 | line-height: 1.5rem; 270 | font-weight: normal; 271 | } 272 | 273 | .underline2 { 274 | background-color: var(--tertiary); 275 | width: 1.9rem; 276 | height: 0.1rem; 277 | } 278 | 279 | .speaker-discription { 280 | line-height: 1.125rem; 281 | font-size: 0.875rem; 282 | font-weight: normal; 283 | } 284 | 285 | .featured-speakers-button { 286 | background-color: var(--bg-white); 287 | border: 1px solid var(--tertiary); 288 | display: flex; 289 | justify-content: center; 290 | align-items: center; 291 | width: 100%; 292 | padding: 0.7rem 0; 293 | margin-top: 1rem; 294 | gap: 10px; 295 | } 296 | 297 | .d-hide { 298 | display: none; 299 | } 300 | 301 | .partners { 302 | background-color: var(--secondary); 303 | display: flex; 304 | flex-direction: column; 305 | align-items: center; 306 | padding: 2rem 1rem; 307 | } 308 | 309 | .partners h2 { 310 | color: var(--color-white); 311 | font-size: 1.4rem; 312 | } 313 | 314 | .partners-list { 315 | display: flex; 316 | flex-wrap: wrap; 317 | justify-content: center; 318 | gap: 1rem; 319 | } 320 | 321 | .partners-list li img { 322 | width: 100%; 323 | filter: grayscale(100%) contrast(30%); 324 | } 325 | 326 | footer { 327 | display: flex; 328 | align-items: center; 329 | gap: 1.9rem; 330 | padding: 2.5rem; 331 | justify-content: center; 332 | } 333 | 334 | .menu-content { 335 | width: 100%; 336 | height: 100%; 337 | flex-direction: column; 338 | position: fixed; 339 | top: 0; 340 | right: 0; 341 | bottom: 0; 342 | left: 0; 343 | background: rgba(236, 83, 66, 0.9); 344 | } 345 | 346 | .menu-content > a { 347 | text-decoration: none; 348 | font-style: normal; 349 | font-weight: 700; 350 | font-size: 2rem; 351 | line-height: 3rem; 352 | color: #fff5e1; 353 | padding-bottom: 15px; 354 | border-bottom: solid 1px #6f6c6b; 355 | margin: 1rem 1rem 0 1rem; 356 | padding-left: 16px; 357 | } 358 | 359 | @media (min-width: 768px) { 360 | .hamburger-container { 361 | display: none; 362 | } 363 | 364 | .login-details { 365 | display: flex; 366 | background-color: var(--secondary); 367 | justify-content: right; 368 | align-items: center; 369 | gap: 2rem; 370 | padding: 0.1rem 10%; 371 | } 372 | 373 | .login-details img { 374 | max-width: 1rem; 375 | height: auto; 376 | } 377 | 378 | .login-details a { 379 | text-decoration: none; 380 | color: var(--color-white); 381 | font-size: 14px; 382 | } 383 | 384 | .logo-tab-container { 385 | display: flex; 386 | justify-content: space-between; 387 | padding: 0.5rem 10%; 388 | } 389 | 390 | .logo-tab-container img { 391 | max-width: 7rem; 392 | } 393 | 394 | .tab-container { 395 | display: flex; 396 | flex-direction: row; 397 | gap: 2rem; 398 | align-items: center; 399 | } 400 | 401 | .tab-container > a { 402 | color: black; 403 | text-decoration: none; 404 | font-size: 1rem; 405 | line-height: 1.5rem; 406 | font-weight: 400; 407 | } 408 | 409 | .main-program a { 410 | display: block; 411 | color: var(--color-white); 412 | font-size: 1rem; 413 | line-height: 1.5rem; 414 | font-weight: 400; 415 | } 416 | 417 | .tab-container > a:last-child { 418 | border: 3px solid var(--primary); 419 | box-sizing: border-box; 420 | padding: 0.25rem 0.5rem; 421 | color: #f51d1d; 422 | font-size: 0.75rem; 423 | } 424 | 425 | .headline-section { 426 | padding-left: 13.125%; 427 | background-image: url(../background_images/main_desktop.png); 428 | background-size: cover; 429 | } 430 | 431 | .headline-quote { 432 | max-width: 76.43%; 433 | } 434 | 435 | .headline-h1 { 436 | max-width: 76.43%; 437 | } 438 | 439 | .headline-discription { 440 | max-width: 55.225%; 441 | } 442 | 443 | .headline-date { 444 | font-size: 1.5rem; 445 | } 446 | 447 | .program-list { 448 | flex-direction: row; 449 | justify-content: space-between; 450 | } 451 | 452 | .program-list li { 453 | flex-direction: column; 454 | padding-top: 1rem; 455 | padding-bottom: 1rem; 456 | max-width: 10rem; 457 | flex: 1; 458 | } 459 | 460 | .program-list li h3 { 461 | text-align: center; 462 | } 463 | 464 | .program-list li p { 465 | text-align: center; 466 | } 467 | 468 | .main-program-btn { 469 | display: none; 470 | } 471 | 472 | .featured-speakers-list { 473 | flex-direction: row; 474 | flex-wrap: wrap; 475 | justify-content: center; 476 | } 477 | 478 | .featured-speakers-list li { 479 | width: 48%; 480 | } 481 | 482 | .featured-speakers-list li:nth-child(n+3) { 483 | display: flex; 484 | } 485 | 486 | .featured-speakers-button { 487 | display: none; 488 | } 489 | } 490 | 491 | @media (min-width: 992px) { 492 | .headline-h1 h1 { 493 | font-size: 52px !important; 494 | line-height: 3.75rem; 495 | } 496 | 497 | .featured-speakers-list li { 498 | width: 35%; 499 | } 500 | } 501 | --------------------------------------------------------------------------------