├── images ├── UN.png ├── home.png ├── img.png ├── mtn.webp ├── pic.png ├── imag2.png ├── imag33.jpg ├── img44.png ├── screen.png ├── unicef.jpg ├── AFRICA.webp ├── Image2022.png ├── cocacola.png ├── education.png ├── Image20221.png ├── africalogo.jpg ├── background.png ├── conference.png ├── conference2.jpg ├── lecture (1).png ├── partnerlogo.jpg ├── bankovAfrica.png ├── youth commit.jpg ├── Screenshot (412).png ├── dark background2.png ├── black-background.webp └── youth-conference.jpeg ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── README.md ├── .github └── workflows │ └── linters.yml ├── app.js ├── about.html ├── index.html └── styless.css /images/UN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/UN.png -------------------------------------------------------------------------------- /images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/home.png -------------------------------------------------------------------------------- /images/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/img.png -------------------------------------------------------------------------------- /images/mtn.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/mtn.webp -------------------------------------------------------------------------------- /images/pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/pic.png -------------------------------------------------------------------------------- /images/imag2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/imag2.png -------------------------------------------------------------------------------- /images/imag33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/imag33.jpg -------------------------------------------------------------------------------- /images/img44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/img44.png -------------------------------------------------------------------------------- /images/screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/screen.png -------------------------------------------------------------------------------- /images/unicef.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/unicef.jpg -------------------------------------------------------------------------------- /images/AFRICA.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/AFRICA.webp -------------------------------------------------------------------------------- /images/Image2022.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/Image2022.png -------------------------------------------------------------------------------- /images/cocacola.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/cocacola.png -------------------------------------------------------------------------------- /images/education.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/education.png -------------------------------------------------------------------------------- /images/Image20221.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/Image20221.png -------------------------------------------------------------------------------- /images/africalogo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/africalogo.jpg -------------------------------------------------------------------------------- /images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/background.png -------------------------------------------------------------------------------- /images/conference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/conference.png -------------------------------------------------------------------------------- /images/conference2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/conference2.jpg -------------------------------------------------------------------------------- /images/lecture (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/lecture (1).png -------------------------------------------------------------------------------- /images/partnerlogo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/partnerlogo.jpg -------------------------------------------------------------------------------- /images/bankovAfrica.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/bankovAfrica.png -------------------------------------------------------------------------------- /images/youth commit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/youth commit.jpg -------------------------------------------------------------------------------- /images/Screenshot (412).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/Screenshot (412).png -------------------------------------------------------------------------------- /images/dark background2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/dark background2.png -------------------------------------------------------------------------------- /images/black-background.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/black-background.webp -------------------------------------------------------------------------------- /images/youth-conference.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gasangw/My-Capstone-Project/HEAD/images/youth-conference.jpeg -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/Microverse-blueviolet) 2 | 3 | # Project Name 4 | 5 | > HTML/CSS & JavaScript capstone project - Conference page with The 6 | - home page. 7 | - The about page. 8 | - Each of these pages has versions for 2 different screen sizes: The section "Featured speakers" was created dynamically in JavaScript. 9 | using variable with the data about the speakers and using it when the page loads to create the HTML for this section dynamically. 10 | 11 | 12 | ## Built With 13 | 14 | - HTML 15 | - CSS 16 | - JavaScript 17 | 18 | ## Live Demo 19 | 20 | [Live Demo Link](https://gasangw.github.io/My-Capstone-Project/) 21 | 22 | 23 | ## Authors 24 | 25 | 👤 **Gasangwa Thomas** 26 | 27 | - GitHub: [@githubhandle](https://github.com/gasangw) 28 | - Twitter: [@twitterhandle](https://twitter.com/ThomasGasangwa) 29 | 30 | ## 🤝 Contributing 31 | 32 | Contributions, issues, and feature requests are welcome! 33 | 34 | Feel free to check the [issues page](https://github.com/gasangw/My-Capstone-Project/issues). 35 | 36 | ## Show your support 37 | 38 | Give a ⭐️ if you like this project! 39 | 40 | ## Acknowledgments 41 | 42 | - Greatful for Cindy Shin, the author of this UI design. its a wonderful piece of work. 43 | -------------------------------------------------------------------------------- /.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-18.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-18.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@6.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-18.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-18.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 . -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.querySelector('.nav__menu'); 2 | const menu = document.querySelector('.nav__mobile--menu'); 3 | const menuItem = document.querySelectorAll('.nav__links'); 4 | const closeButton = document.querySelector('.nav__mobile--header'); 5 | 6 | hamburger.addEventListener('click', () => { 7 | hamburger.classList.toggle('active'); 8 | menu.classList.toggle('active'); 9 | closeButton.classList.toggle('active'); 10 | }); 11 | 12 | menuItem.forEach((n) => { 13 | n.addEventListener('click', () => { 14 | menu.classList.toggle('active'); 15 | hamburger.classList.toggle('active'); 16 | }); 17 | }); 18 | 19 | const card = document.querySelector('.speaker-section'); 20 | const h2 = document.createElement('h2'); 21 | const div = document.createElement('div'); 22 | div.classList.add('speaker-container'); 23 | const container = document.createElement('div'); 24 | container.classList.add('speakers'); 25 | 26 | card.append(h2); 27 | card.append(div); 28 | card.append(container); 29 | 30 | const speakersLists = [ 31 | { 32 | sImage: ['./images/pic.png'], 33 | name: 'Tashobya Shedrack', 34 | discipline: 'Secretary Bank of Uganda.', 35 | biography: 'He served as the minister of Technology from 2013 to 2016, became the manager of bank of Africa and he has invested alot in developing youth from various nations.', 36 | }, 37 | { 38 | sImage: ['./images/imag2.png'], 39 | name: 'Nduhukire Catherine', 40 | discipline: 'Human Resource Manager African Union.', 41 | biography: ' She is a stakeholder in KCB bank, serves as well as the presidential advisor of the republic of Nigeria and one of the frontline leaders in educating youth.', 42 | }, 43 | { 44 | sImage: ['./images/Image2022.png'], 45 | name: 'Gasanna James', 46 | discipline: 'Deputy Secretary World Bank.', 47 | biography: 'He served as the minister of finance in Rwanda from 2009 to 2012 and he is one of the frontline leaders in equipping youth with the neccessary knowlwdge for developing the continent.', 48 | }, 49 | { 50 | sImage: ['./images/Image20221.png'], 51 | name: 'Abasa Denis', 52 | discipline: 'Africa Youth Coordinator.', 53 | biography: 'He has mobilised youth in various nations for various workshops and conferences, served as the deputy chancellor of Makerere University.', 54 | }, 55 | { 56 | sImage: ['./images/img.png'], 57 | name: 'Nabasa Diana', 58 | discipline: 'CEO Egypt Airlines.', 59 | biography: 'She served as a member of staff in the african union, appointed as an ambossordor in Russia. She has partiicioated in various youth projects around Africa and Asia as well.', 60 | }, 61 | { 62 | sImage: ['./images/img44.png'], 63 | name: 'Tumukunde Benoni', 64 | discipline: 'Ambassodor of the republic of kenya in South Africa.', 65 | biography: 'He served as the head of COCIS and the general auditor in the East African Parliament. He has tremendous love for the youth.', 66 | }, 67 | ]; 68 | 69 | let speakersName = ''; 70 | let speakerImage = ''; 71 | let speakersDiscipline = ''; 72 | let speakersBiography = ''; 73 | 74 | speakersLists.forEach((n, index) => { 75 | speakersName = n.name; 76 | speakerImage = n.sImage; 77 | speakersDiscipline = n.discipline; 78 | speakersBiography = n.biography; 79 | 80 | const content = `
81 | Cathy 86 |
87 |

${speakersName}

88 | ${speakersDiscipline} 89 |

90 | ${speakersBiography} 91 |

92 |
93 |
`; 94 | const cont = document.createElement('div'); 95 | cont.classList.add('speakers'); 96 | if (index > 2) { 97 | div.classList.add('des_speaker_lists'); 98 | } 99 | cont.innerHTML = content; 100 | container.append(cont); 101 | }); 102 | 103 | const buti = document.createElement('btn'); 104 | buti.classList.add('section-button'); 105 | buti.innerHTML = 'See More '; 106 | card.append(buti); 107 | 108 | const addMore = document.querySelector('.section-button'); 109 | addMore.addEventListener('click', () => { 110 | document.querySelectorAll('.speakers').forEach((m) => { 111 | if (m.classList.contains('des_speaker_lists')) { 112 | document.querySelector('.section-button').innerHTML = ''; 113 | } else { 114 | m.classList.add('des_speaker_lists'); 115 | document.querySelector('.section-button').innerHTML = ''; 116 | } 117 | }); 118 | }); -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Africa Youth summit 2022 7 | 10 | 11 | 14 | 16 | 17 | 18 | 19 | 21 | 22 | 23 |
24 |
25 | 46 |
47 | 112 |
113 | 114 |
115 |
116 | 123 | 124 |

125 | "Lets Connect and Build Africa." 126 |

127 |

128 | AFRICA YOUTH SUMMIT 2022 129 |

130 |

131 | Young people make up the bulk of Africa’s total population with an estimated 75% of the continent’s population below the age of 35. African Youth Summit is working with young leaders in all African countries and joining forces with civil society, companies and people on the frontline of climate change, education and skills improvement, health and well-being, good governance, human rights and accountability, employment opportunities and leadership skills to empower young leaders with the neccessary knowledge to develop and transform Africa into a better place. 132 |

133 |

Feel free to contact us about the African Youth Sumit via our email or incase you have any questions. 134 | africasummit@gmail.com 135 |

136 |
137 |
138 | 139 | 144 | 145 |
146 |

Take a look at the past two Africa Youth Summit events which took place in Egypt and Rwanda

147 |
148 |
149 |

2020

150 |

Africa Youth Summit 2020 in Egypt(Cairo)

151 |
152 |
153 |

2018

154 |

Africa Youth Summit 2020 in Rwanda(Kigali)

155 |
156 |
157 |
158 |
159 |

Partners

160 |
161 |
162 | 188 |
189 |
190 | 196 | 197 | 198 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Africa Youth summit 2022 7 | 10 | 11 | 14 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 44 |
45 | 110 |
111 | 112 |
113 |
114 |
115 |

116 | "Lets Connect and Build Africa." 117 |

118 |

119 | AFRICA YOUTH SUMMIT 2022 120 |

121 | 122 | Equipping Africa's Youth for Continental Development. 123 | 124 | 06.06.2022(MON) ~ 09(THUR) 125 | 126 | @Kololo memorial independence grounds, Kampala Uganda 127 | 128 |
129 |
130 |
131 | 132 |
133 |

Main Program

134 |
135 | 183 | 184 | SEE THE WHOLE PROGRAM 185 | 186 |
187 |
188 |

Featured Speakers

189 |
190 | 191 |
192 | 193 |
194 |

Partners

195 | 196 |
197 | 223 |
224 |
225 | 226 | 232 | 233 | 234 | -------------------------------------------------------------------------------- /styless.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: inherit; 6 | text-decoration: none; 7 | list-style: none; 8 | color: #272a31; 9 | } 10 | 11 | html { 12 | font-size: 50%; 13 | } 14 | 15 | @media (min-width: 768px) { 16 | html { 17 | font-size: 62.5%; 18 | } 19 | } 20 | 21 | body { 22 | font-family: "Lato", sans-serif; 23 | font-weight: 400; 24 | line-height: 1.4; 25 | box-sizing: border-box; 26 | } 27 | 28 | a { 29 | color: #272a31; 30 | } 31 | 32 | .nav__container { 33 | width: 80%; 34 | margin: 0 auto; 35 | display: flex; 36 | } 37 | 38 | .nav__mobile { 39 | display: inline-block; 40 | align-items: center; 41 | overflow: hidden; 42 | } 43 | 44 | @media (min-width: 768px) { 45 | .nav__mobile { 46 | display: none; 47 | } 48 | } 49 | 50 | .nav__mobile--check { 51 | display: none; 52 | } 53 | 54 | .nav__mobile--icon { 55 | position: relative; 56 | margin-top: 3.5rem; 57 | } 58 | 59 | .nav__mobile--icon, 60 | .nav__mobile--icon::before, 61 | .nav__mobile--icon::after { 62 | width: 3rem; 63 | height: 2px; 64 | background-color: #031f37; 65 | display: inline-block; 66 | z-index: 1000; 67 | transition: all 0.2s; 68 | } 69 | 70 | .nav__mobile--icon::before, 71 | .nav__mobile--icon::after { 72 | content: ""; 73 | position: absolute; 74 | left: 0; 75 | } 76 | 77 | .nav__mobile--icon::before { 78 | top: -0.8rem; 79 | } 80 | 81 | .nav__mobile--icon::after { 82 | top: 0.8rem; 83 | } 84 | 85 | .nav__mobile--label:hover .nav__mobile--icon::before { 86 | top: -1rem; 87 | } 88 | 89 | .nav__mobile--label:hover .nav__mobile--icon::after { 90 | top: 1rem; 91 | } 92 | 93 | .nav__mobile--check:checked + .nav__mobile--label .nav__mobile--icon { 94 | background-color: transparent; 95 | } 96 | 97 | .nav__mobile--check:checked + .nav__mobile--label .nav__mobile--icon::before { 98 | background-color: #fff; 99 | transform: rotate(135deg); 100 | top: 0; 101 | } 102 | 103 | .nav__mobile--check:checked + .nav__mobile--label .nav__mobile--icon::after { 104 | background-color: #fff; 105 | transform: rotate(-135deg); 106 | top: 0; 107 | } 108 | 109 | .nav__mobile--sidebar { 110 | position: relative; 111 | height: 100vh; 112 | right: -100%; 113 | top: 0; 114 | margin-top: -40px; 115 | background: rgb(136 165 191); 116 | width: 55rem; 117 | transition: all 0.5s ease 0s; 118 | } 119 | 120 | .nav__mobile--check:checked ~ .nav__mobile--sidebar { 121 | right: 0; 122 | } 123 | 124 | .nav__mobile--header { 125 | text-align: center; 126 | background: #0a5275; 127 | user-select: none; 128 | line-height: 8rem; 129 | text-transform: uppercase; 130 | font-size: 2.5rem; 131 | } 132 | 133 | .nav__mobile--header span { 134 | color: whitesmoke; 135 | margin-left: -4rem; 136 | } 137 | 138 | .nav__mobile--links { 139 | display: block; 140 | color: white; 141 | font-size: 20px; 142 | height: 100%; 143 | width: 100%; 144 | padding-left: 40px; 145 | line-height: 65px; 146 | border-top: 1px solid rgba(255, 255, 255, 0.1); 147 | border-bottom: 1px solid black; 148 | transition: all 0.5s; 149 | } 150 | 151 | .nav__menu { 152 | display: none; 153 | align-items: center; 154 | flex-wrap: wrap; 155 | } 156 | 157 | @media (min-width: 768px) { 158 | .nav__menu { 159 | display: flex; 160 | margin-left: auto; 161 | } 162 | 163 | .nav { 164 | background-color: white; 165 | } 166 | } 167 | 168 | .nav__links, 169 | .nav__links:link, 170 | .nav__links:visited { 171 | text-transform: capitalize; 172 | font-size: 14px; 173 | border-bottom: 1px solid transparent; 174 | transform: translateY(0); 175 | transition: all 0.3s; 176 | } 177 | 178 | .nav__links.active, 179 | .nav__links:active, 180 | .nav__links:hover { 181 | color: #ec5242; 182 | transform: translateY(-2px); 183 | border-bottom: 1px dotted #ec5242; 184 | } 185 | 186 | .nav__list { 187 | padding-right: 1rem; 188 | } 189 | 190 | .nav__list:last-child .nav__links { 191 | border: 4px solid rgb(238, 24, 24); 192 | padding: 0.5rem 1rem; 193 | border-radius: 3px; 194 | color: #ec5242; 195 | } 196 | 197 | .nav__list:last-child .nav__links:hover { 198 | background-color: #031f37; 199 | color: #a4becd; 200 | } 201 | 202 | .header { 203 | width: 100%; 204 | height: 105px; 205 | background: url(images/background.png) no-repeat; 206 | background-size: cover; 207 | background-position: left top; 208 | } 209 | 210 | .intro { 211 | width: 100%; 212 | height: 450px; 213 | background: url(images/background.png) no-repeat; 214 | background-size: cover; 215 | background-position: left top; 216 | } 217 | 218 | @media (min-width: 768px) { 219 | .header { 220 | background-position: left top; 221 | background-image: url(images/background.png); 222 | } 223 | 224 | .intro { 225 | background: url(images/background.png) no-repeat; 226 | background-size: cover; 227 | background-position: left top; 228 | width: 100%; 229 | height: 100vh; 230 | } 231 | } 232 | 233 | .header.no-image { 234 | height: 7.5rem; 235 | } 236 | 237 | .header .top-bar { 238 | display: none; 239 | background-image: linear-gradient(120deg, #000 50%, #031f37 51%); 240 | height: 2.5rem; 241 | } 242 | 243 | @media (min-width: 768px) { 244 | .header .top-bar { 245 | display: block; 246 | } 247 | } 248 | 249 | .header .top-bar__menu { 250 | display: flex; 251 | justify-content: flex-end; 252 | padding-top: 0.5rem; 253 | width: 80%; 254 | margin: auto; 255 | } 256 | 257 | .header .top-bar__list { 258 | margin-right: 1rem; 259 | } 260 | 261 | .header .top-bar__links { 262 | color: #d3d3d3; 263 | } 264 | 265 | .header .top-bar__links:hover { 266 | color: #a4becd; 267 | } 268 | 269 | .header .top-bar__links .fab { 270 | color: #fff; 271 | } 272 | 273 | .header .top-bar__links .fab:hover { 274 | color: #a4becd; 275 | } 276 | 277 | .header .logo-img { 278 | width: auto; 279 | height: 7rem; 280 | display: none; 281 | } 282 | 283 | .intro .heading { 284 | max-width: 76.8rem; 285 | display: flex; 286 | flex-direction: column; 287 | justify-content: space-around; 288 | } 289 | 290 | .intro .heading-sub { 291 | font-size: 1.8rem; 292 | font-weight: 300; 293 | text-transform: capitalize; 294 | color: #ec5242; 295 | } 296 | 297 | .home { 298 | width: 20px; 299 | height: 20px; 300 | } 301 | 302 | .heading-sub2 { 303 | font-size: 1.8rem; 304 | font-weight: 300; 305 | text-transform: capitalize; 306 | color: #ec5242; 307 | padding-top: 30px; 308 | text-align: center; 309 | } 310 | 311 | .intro .heading-primary { 312 | position: initial; 313 | font-family: Arial, Helvetica, sans-serif; 314 | font-size: 45px; 315 | font-weight: 800; 316 | line-height: 1.01; 317 | letter-spacing: -1px; 318 | background-position: top right; 319 | color: #ec5242; 320 | padding-top: 10px; 321 | padding-bottom: 20px; 322 | } 323 | 324 | .heading-primary1 { 325 | position: initial; 326 | font-family: Arial, Helvetica, sans-serif; 327 | font-size: 45px; 328 | font-weight: 800; 329 | line-height: 1.01; 330 | letter-spacing: -1px; 331 | background-position: top right; 332 | color: #ec5242; 333 | padding-bottom: 20px; 334 | padding-top: 10px; 335 | text-align: center; 336 | } 337 | 338 | .header__content { 339 | margin-left: 50px; 340 | } 341 | 342 | .reach { 343 | color: #272a31; 344 | font-size: 10px; 345 | margin-top: 10px; 346 | margin-left: -30px; 347 | } 348 | 349 | .hoo { 350 | display: none; 351 | } 352 | 353 | .mail { 354 | text-decoration: underline; 355 | color: red; 356 | margin-top: 30px; 357 | } 358 | 359 | .aboutLogo { 360 | font-size: 12px; 361 | margin-top: 30px; 362 | margin-left: 10px; 363 | margin-right: 10px; 364 | text-align: center; 365 | margin-bottom: 20px; 366 | } 367 | 368 | .africano { 369 | margin-bottom: 20px; 370 | margin-left: 110px; 371 | } 372 | 373 | .describ { 374 | font-size: 18px; 375 | margin-top: 30px; 376 | font-weight: 600; 377 | text-align: center; 378 | } 379 | 380 | .pastmeso { 381 | text-align: center; 382 | margin-left: 40px; 383 | margin-top: 20px; 384 | font-size: 11px; 385 | font-weight: 600; 386 | } 387 | 388 | .events { 389 | display: flex; 390 | flex-direction: column; 391 | background-color: rgb(217, 209, 209); 392 | align-items: center; 393 | } 394 | 395 | .picspast { 396 | display: flex; 397 | flex-direction: column; 398 | margin-top: 60px; 399 | gap: 30px; 400 | align-items: center; 401 | } 402 | 403 | .head { 404 | width: 430px; 405 | height: 230px; 406 | background: linear-gradient(rgba(236, 82, 66, 0.7), rgba(236, 82, 66, 0.75)), url(images/conference2.jpg) no-repeat; 407 | margin-bottom: 30px; 408 | } 409 | 410 | .year { 411 | text-align: center; 412 | margin-top: 60px; 413 | font-size: 25px; 414 | font-weight: 700; 415 | } 416 | 417 | .summit { 418 | text-align: center; 419 | font-size: 15px; 420 | } 421 | 422 | .heading-theme1 { 423 | background-color: white; 424 | font-size: 10px; 425 | padding: 20px; 426 | line-height: 18px; 427 | color: #272a31; 428 | text-align: center; 429 | margin-right: 30px; 430 | } 431 | 432 | @media (min-width: 768px) { 433 | .intro .heading-primary { 434 | font-size: 7rem; 435 | padding-bottom: 30px; 436 | margin-left: 50px; 437 | } 438 | 439 | .heading-primary1 { 440 | position: initial; 441 | font-family: Arial, Helvetica, sans-serif; 442 | font-size: 45px; 443 | font-weight: 800; 444 | line-height: 1.01; 445 | letter-spacing: -1px; 446 | background-position: top right; 447 | color: #ec5242; 448 | padding-top: 170px; 449 | padding-bottom: 20px; 450 | text-align: center; 451 | } 452 | 453 | .heading-sub2 { 454 | display: none; 455 | } 456 | 457 | .intro .heading-sub { 458 | font-size: 1.8rem; 459 | font-weight: 300; 460 | text-transform: capitalize; 461 | color: #ec5242; 462 | padding-top: 190px; 463 | padding-left: 50px; 464 | } 465 | 466 | .header__content1 { 467 | position: relative; 468 | top: 70%; 469 | transform: translateY(-50%); 470 | color: #a4becd; 471 | text-align: center; 472 | width: 100%; 473 | } 474 | 475 | .header .heading-sub2 { 476 | font-size: 3rem; 477 | font-weight: 100; 478 | text-transform: uppercase; 479 | color: #ec5242; 480 | } 481 | 482 | .header .heading-primary1 { 483 | position: relative; 484 | font-family: Arial, Helvetica, sans-serif; 485 | font-size: 5rem; 486 | font-weight: 700; 487 | line-height: 1.05; 488 | margin-bottom: 20px; 489 | letter-spacing: -2px; 490 | color: rgba(236, 82, 66, 0.6); 491 | } 492 | 493 | .heading-theme1 { 494 | background-color: white; 495 | font-size: 13px; 496 | text-align: center; 497 | padding: 55px; 498 | line-height: 35px; 499 | color: #272a31; 500 | margin-right: 30px; 501 | } 502 | 503 | .reach { 504 | color: #272a31; 505 | font-size: 13px; 506 | margin-top: 45px; 507 | text-align: center; 508 | } 509 | 510 | .mail { 511 | text-decoration: underline; 512 | color: black; 513 | font-weight: 800; 514 | margin-top: 30px; 515 | } 516 | 517 | .africano { 518 | margin-bottom: 20px; 519 | } 520 | 521 | .pastmeso { 522 | text-align: center; 523 | margin-left: 130px; 524 | margin-top: 20px; 525 | font-size: 18px; 526 | font-weight: 600; 527 | } 528 | 529 | .picspast { 530 | display: flex; 531 | flex-direction: row; 532 | margin-top: 60px; 533 | gap: 40px; 534 | } 535 | 536 | .head { 537 | width: 430px; 538 | height: 230px; 539 | background: linear-gradient(rgba(236, 82, 66, 0.7), rgba(236, 82, 66, 0.75)), url(images/youth\ commit.jpg) no-repeat; 540 | margin-bottom: 30px; 541 | } 542 | 543 | .year { 544 | text-align: center; 545 | margin-top: 60px; 546 | font-size: 20px; 547 | font-weight: 700; 548 | } 549 | 550 | .summit { 551 | text-align: center; 552 | font-size: 13px; 553 | } 554 | 555 | .hoo { 556 | display: flex; 557 | align-items: flex-start; 558 | justify-content: end; 559 | gap: 5px; 560 | margin: 0 10px; 561 | } 562 | 563 | .dash { 564 | color: red; 565 | } 566 | 567 | .creativelogo { 568 | display: flex; 569 | flex-direction: column; 570 | align-items: center; 571 | background-color: #fff; 572 | } 573 | 574 | .describ { 575 | font-size: 20px; 576 | margin-top: 30px; 577 | font-weight: 600; 578 | } 579 | 580 | .aboutLogo { 581 | font-size: 15px; 582 | margin-top: 30px; 583 | margin-left: 100px; 584 | margin-right: 100px; 585 | text-align: center; 586 | margin-bottom: 20px; 587 | } 588 | } 589 | 590 | .intro .heading-theme { 591 | font-size: 2.2rem; 592 | color: #272a31; 593 | border: 3px solid #fff; 594 | background-color: #d3d3d3; 595 | padding: 10px; 596 | margin-left: 50px; 597 | } 598 | 599 | .intro .heading-date { 600 | font-size: 3rem; 601 | font-weight: 900; 602 | color: #272a31; 603 | letter-spacing: -2px; 604 | padding-top: 20px; 605 | } 606 | 607 | @media (min-width: 768px) { 608 | .intro .heading-date { 609 | font-size: 5rem; 610 | padding-top: 20px; 611 | margin-left: 50px; 612 | } 613 | 614 | .header .logo-img { 615 | width: auto; 616 | height: 7rem; 617 | display: flex; 618 | } 619 | 620 | .heading { 621 | display: flex; 622 | flex-direction: column; 623 | justify-content: space-around; 624 | } 625 | } 626 | 627 | .intro .heading-venue { 628 | font-size: 15px; 629 | font-weight: 600; 630 | display: inline-block; 631 | padding-left: 1rem; 632 | padding-right: 1rem; 633 | color: #413e3e; 634 | padding-top: 10px; 635 | } 636 | 637 | .header .heading-support { 638 | color: #fff; 639 | font-size: 1.8rem; 640 | margin-top: 2rem; 641 | } 642 | 643 | .intro .heading-support__mail { 644 | color: #a4becd; 645 | font-weight: 100; 646 | font-size: 2rem; 647 | } 648 | 649 | .section-heading { 650 | color: #fff; 651 | font-size: 3rem; 652 | font-weight: 500; 653 | text-transform: capitalize; 654 | position: relative; 655 | } 656 | 657 | .section-headings { 658 | color: #fff; 659 | font-size: 3rem; 660 | font-weight: 500; 661 | text-transform: capitalize; 662 | padding-bottom: 2rem; 663 | position: relative; 664 | } 665 | 666 | .section-button { 667 | font-size: 1.5rem; 668 | margin: 2rem 0; 669 | padding: 3px 20px; 670 | text-transform: uppercase; 671 | border: none; 672 | background-color: #272a31; 673 | color: #a4becd; 674 | border-radius: 0.8rem; 675 | cursor: pointer; 676 | transition: all 0.3s; 677 | } 678 | 679 | .section-button:hover { 680 | color: #fff; 681 | } 682 | 683 | .center-text { 684 | text-align: center; 685 | } 686 | 687 | .about-section { 688 | display: flex; 689 | flex-direction: column; 690 | align-items: center; 691 | } 692 | 693 | .about-section__content { 694 | width: 80%; 695 | } 696 | 697 | .about-section__content--info { 698 | font-size: 2rem; 699 | font-weight: 100; 700 | line-height: 1.7; 701 | margin-bottom: 2rem; 702 | } 703 | 704 | .about-section__event { 705 | display: grid; 706 | grid-template-columns: 1fr; 707 | grid-gap: 2rem; 708 | } 709 | 710 | @media (min-width: 768px) { 711 | .about-section__event { 712 | grid-template-columns: 1fr 1fr; 713 | grid-gap: 2.5rem; 714 | width: 80%; 715 | margin: 0 auto; 716 | } 717 | 718 | .intro .heading-venue { 719 | font-size: 20px; 720 | font-weight: 600; 721 | display: inline-block; 722 | padding-right: 1rem; 723 | color: #413e3e; 724 | padding-top: 10px; 725 | margin-left: 50px; 726 | } 727 | } 728 | 729 | .about-section__event--ev1, 730 | .about-section__event--ev2 { 731 | height: 30rem; 732 | text-align: center; 733 | display: flex; 734 | flex-direction: column; 735 | align-items: center; 736 | justify-content: center; 737 | padding: 1rem; 738 | } 739 | 740 | .about-section__event--ev1 { 741 | background: linear-gradient(rgba(236, 82, 66, 0.7), rgba(236, 82, 66, 0.75)), url(imgs/cyfrica_event.jpg) no-repeat; 742 | background-size: cover; 743 | } 744 | 745 | .about-section__event--ev2 { 746 | background: linear-gradient(rgba(236, 82, 66, 0.7), rgba(236, 82, 66, 0.75)), url(imgs/cyfrica_event2.jpg) no-repeat; 747 | background-size: cover; 748 | } 749 | 750 | .about-section__event--year { 751 | color: #fff; 752 | font-size: 4rem; 753 | font-weight: 700; 754 | } 755 | 756 | .about-section__event--location { 757 | font-size: 2rem; 758 | color: #fff; 759 | } 760 | 761 | .program-section { 762 | background: url(images/dark\ background2.png); 763 | padding: 6rem 2rem; 764 | display: flex; 765 | flex-direction: column; 766 | align-items: center; 767 | } 768 | 769 | @media (min-width: 768px) { 770 | .program-section { 771 | padding: 6rem 0; 772 | } 773 | } 774 | 775 | .program-section .program-section__events { 776 | width: 100%; 777 | margin-bottom: 3.5rem; 778 | display: grid; 779 | grid-template-columns: 1fr; 780 | grid-gap: 1rem; 781 | } 782 | 783 | @media (min-width: 768px) { 784 | .program-section .program-section__events { 785 | width: 90%; 786 | grid-template-columns: repeat(5, 1fr); 787 | } 788 | } 789 | 790 | .program-section .program-section__events--item { 791 | background: rgba(143, 190, 216, 0.2); 792 | font-size: 2rem; 793 | padding: 2rem; 794 | display: flex; 795 | flex-direction: column; 796 | align-items: center; 797 | border-radius: 3px; 798 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); 799 | transition: all 0.3s ease-in-out; 800 | margin-top: 22px; 801 | } 802 | 803 | @media (max-width: 768px) { 804 | .program-section .program-section__events--item { 805 | background: rgba(143, 190, 216, 0.2); 806 | font-size: 2rem; 807 | padding: 2rem; 808 | display: flex; 809 | flex-direction: row; 810 | align-items: center; 811 | border-radius: 3px; 812 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); 813 | transition: all 0.3s ease-in-out; 814 | margin-top: 22px; 815 | gap: 20px; 816 | } 817 | } 818 | 819 | .program-section .program-section__events--item:hover { 820 | background: rgba(164, 190, 205, 0.4); 821 | box-shadow: 0 1px 0.5rem rgba(0, 0, 0, 0.2); 822 | } 823 | 824 | .program-section .program-section__events-icon { 825 | font-size: 4rem; 826 | } 827 | 828 | .program-section .program-section__events-icon .fa { 829 | color: rgba(24, 97, 160, 0.8); 830 | } 831 | 832 | .program-section .program-section__events-title { 833 | color: #ec5242; 834 | font-size: 3rem; 835 | font-weight: 500; 836 | } 837 | 838 | .program-section .program-section__events-info { 839 | font-weight: 300; 840 | color: #fff; 841 | } 842 | 843 | .speaker-section { 844 | display: flex; 845 | flex-direction: column; 846 | align-items: center; 847 | padding: 6rem 2rem; 848 | } 849 | 850 | hr { 851 | border: 2px solid red; 852 | align-self: center; 853 | width: 50px; 854 | padding-top: -20px; 855 | } 856 | 857 | @media (min-width: 768px) { 858 | .speaker-section { 859 | padding: 6rem 0; 860 | } 861 | 862 | .section-link { 863 | color: #fff; 864 | font-size: 16px; 865 | text-decoration: underline; 866 | } 867 | 868 | hr { 869 | border: 2px solid red; 870 | align-self: center; 871 | width: 50px; 872 | padding-top: -20px; 873 | } 874 | } 875 | 876 | .speaker-section-container { 877 | width: 80%; 878 | margin: 0 auto; 879 | } 880 | 881 | .speaker-section .speakers { 882 | display: grid; 883 | grid-template-columns: 1fr; 884 | grid-gap: 3rem; 885 | align-items: baseline; 886 | } 887 | 888 | .speaker-section .speakers:nth-child(2n) { 889 | display: none; 890 | } 891 | 892 | @media (min-width: 768px) { 893 | .speaker-section .speakers { 894 | grid-template-columns: repeat(2, 38rem); 895 | } 896 | 897 | .speaker-section .speakers:nth-child(2n) { 898 | display: flex; 899 | } 900 | } 901 | 902 | .speaker-section .speakers__speaker { 903 | display: flex; 904 | justify-content: center; 905 | } 906 | 907 | .speaker-section .speakers__speaker--photo { 908 | height: 12rem; 909 | border-radius: 2rem; 910 | transition: all 0.4s; 911 | } 912 | 913 | .speaker-section .speakers__speaker--photo:hover { 914 | transform: translateY(-1px) scale(1.1); 915 | } 916 | 917 | .speaker-section .speakers__speaker--info { 918 | align-self: center; 919 | padding-left: 1.5rem; 920 | font-size: 1.5rem; 921 | font-weight: 300; 922 | } 923 | 924 | .speaker-section .speakers__speaker--name { 925 | font-weight: 700; 926 | color: #031f37; 927 | font-size: 20px; 928 | } 929 | 930 | .speaker-section .speakers__speaker--profile { 931 | font-weight: 400; 932 | font-style: italic; 933 | font-size: 15px; 934 | color: #ec5242; 935 | } 936 | 937 | .speaker-section .speakers__speaker--profile:hover { 938 | color: red; 939 | } 940 | 941 | .speaker-section .speakers__speaker--bio { 942 | text-align: justify; 943 | } 944 | 945 | .partners-section { 946 | background-color: #272a31; 947 | padding: 8rem 0; 948 | display: flex; 949 | flex-direction: column; 950 | align-items: center; 951 | } 952 | 953 | .partners-container { 954 | width: 80%; 955 | margin: 0 auto; 956 | } 957 | 958 | .partners__box { 959 | display: flex; 960 | flex-direction: row; 961 | justify-content: center; 962 | flex-wrap: wrap; 963 | gap: 10px; 964 | margin-top: 28px; 965 | } 966 | 967 | .partners__photo { 968 | width: 10rem; 969 | height: 70px; 970 | filter: grayscale(100%); 971 | transition: all 0.4s; 972 | } 973 | 974 | .partners__photo:hover { 975 | filter: grayscale(0); 976 | } 977 | 978 | .ticket-section__content { 979 | display: flex; 980 | flex-direction: column; 981 | align-items: center; 982 | } 983 | 984 | .ticket-section__step { 985 | margin: 3rem 0; 986 | padding: 1.2rem; 987 | display: inline-flex; 988 | text-align: center; 989 | font-size: 1.5rem; 990 | border: 1px solid #a4becd; 991 | border-radius: 20rem; 992 | font-weight: 300; 993 | } 994 | 995 | .ticket-section__step-guide { 996 | color: red; 997 | font-weight: bold; 998 | padding-right: 1rem; 999 | } 1000 | 1001 | .ticket-section__price { 1002 | background-image: linear-gradient(105deg, orangered, #031f37); 1003 | padding: 0.8rem; 1004 | } 1005 | 1006 | .ticket-section__price--container { 1007 | background-color: #fff; 1008 | padding: 0.5rem; 1009 | } 1010 | 1011 | .ticket-section__price--table { 1012 | font-size: 1.2rem; 1013 | } 1014 | 1015 | .ticket-section__price--table tr td, 1016 | .ticket-section__price--table tr th { 1017 | text-align: center; 1018 | } 1019 | 1020 | .ticket-section__price--label { 1021 | display: block; 1022 | } 1023 | 1024 | .lunch-section { 1025 | padding: 6rem 0; 1026 | } 1027 | 1028 | .lunch-section__menu { 1029 | border: 1px solid #a4becd; 1030 | max-width: 95%; 1031 | margin-bottom: 2rem; 1032 | font-size: 1.5rem; 1033 | } 1034 | 1035 | .lunch-section__menu--titlebar { 1036 | background-color: #eee; 1037 | width: 100%; 1038 | padding: 0.5rem 1rem; 1039 | margin-bottom: 1.5rem; 1040 | } 1041 | 1042 | .lunch-section__menu--title { 1043 | text-transform: uppercase; 1044 | font-size: 1.8rem; 1045 | font-weight: 100; 1046 | text-align: center; 1047 | } 1048 | 1049 | .lunch-section__menu--form { 1050 | padding: 1rem; 1051 | } 1052 | 1053 | .lunch-section__menu--item { 1054 | display: flex; 1055 | justify-content: center; 1056 | } 1057 | 1058 | .lunch-section__menu--list { 1059 | padding-right: 2rem; 1060 | } 1061 | 1062 | .lunch-section__menu--label { 1063 | padding-right: 1rem; 1064 | } 1065 | 1066 | .footer { 1067 | padding: 8rem 0; 1068 | display: flex; 1069 | flex-direction: row; 1070 | justify-content: center; 1071 | } 1072 | 1073 | .footer__logo { 1074 | margin-right: 4rem; 1075 | } 1076 | 1077 | .footer__logo--img { 1078 | height: 5rem; 1079 | } 1080 | 1081 | .footer__copyright { 1082 | font-size: 2rem; 1083 | align-self: center; 1084 | font-weight: 100; 1085 | color: #b2b2b2; 1086 | } 1087 | 1088 | .footer__copyright:hover { 1089 | color: #031f37; 1090 | } 1091 | 1092 | .otherpage-footer { 1093 | background-color: #031f37; 1094 | } 1095 | 1096 | .otherpage-footer .footer__logo--img { 1097 | filter: brightness(1); 1098 | } 1099 | 1100 | .otherpage-footer .footer__logo--img:hover { 1101 | filter: brightness(3); 1102 | } 1103 | 1104 | .otherpage-footer .footer__copyright:hover { 1105 | color: #a4becd; 1106 | } 1107 | --------------------------------------------------------------------------------