├── .gitignore ├── .vscode └── settings.json ├── img ├── fs.png ├── js.png ├── tw.png ├── ux.png ├── boot.png ├── demo.png ├── edtech.jpg ├── summit.png ├── bootcamp.png ├── partner1.png ├── partner2.png ├── partner3.png ├── partner4.png ├── partner5.png ├── webdesign.jpg ├── logo_light.svg ├── logo.svg ├── avatar2.svg └── avatar3.svg ├── fonts └── Cocogoose.woff2 ├── .stylelintrc ├── .hintrc ├── .eslintrc ├── js ├── main.js └── index.js ├── package.json ├── README.md ├── .github └── workflows │ └── linters.yml ├── about.html ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /img/fs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/fs.png -------------------------------------------------------------------------------- /img/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/js.png -------------------------------------------------------------------------------- /img/tw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/tw.png -------------------------------------------------------------------------------- /img/ux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/ux.png -------------------------------------------------------------------------------- /img/boot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/boot.png -------------------------------------------------------------------------------- /img/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/demo.png -------------------------------------------------------------------------------- /img/edtech.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/edtech.jpg -------------------------------------------------------------------------------- /img/summit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/summit.png -------------------------------------------------------------------------------- /img/bootcamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/bootcamp.png -------------------------------------------------------------------------------- /img/partner1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/partner1.png -------------------------------------------------------------------------------- /img/partner2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/partner2.png -------------------------------------------------------------------------------- /img/partner3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/partner3.png -------------------------------------------------------------------------------- /img/partner4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/partner4.png -------------------------------------------------------------------------------- /img/partner5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/partner5.png -------------------------------------------------------------------------------- /img/webdesign.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/img/webdesign.jpg -------------------------------------------------------------------------------- /fonts/Cocogoose.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzekielUtshudi/Microverse-Capstone-Project/HEAD/fonts/Cocogoose.woff2 -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "extends": ["stylelint-config-standard"], 4 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true, 8 | "csstree/validator": true 9 | }, 10 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 11 | } -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 18 | 1, 19 | { 20 | "js": "always", 21 | "json": "always" 22 | } 23 | ] 24 | }, 25 | "ignorePatterns": ["dist/", "build/"] 26 | } 27 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | import instructorData from './index.js'; 2 | 3 | // instructors 4 | const grid = document.querySelector('.grid'); 5 | 6 | function createGridItem({ 7 | imgUrl, title, role, info, 8 | }) { 9 | const gridItem = document.createElement('div'); 10 | gridItem.classList.add('grid_item'); 11 | 12 | gridItem.innerHTML = ` 13 |
14 | ${title} 15 |
16 |
17 |

${title}

18 |

19 | ${role} 20 |

21 |

22 | ${info} 23 |

24 |
25 | `; 26 | 27 | grid.appendChild(gridItem); 28 | } 29 | 30 | if (grid) { 31 | instructorData.forEach((instr) => { 32 | createGridItem(instr); 33 | }); 34 | } 35 | 36 | // hamburger 37 | const btn = document.querySelector('.hamburger'); 38 | const menu = document.querySelector('.navbar'); 39 | 40 | btn.addEventListener('click', () => { 41 | btn.classList.toggle('active'); 42 | menu.classList.toggle('open'); 43 | }); 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "microverse_capstone_course", 3 | "version": "1.0.0", 4 | "description": "![](https://img.shields.io/badge/Microverse-blueviolet)", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/maxthestranger/microverse_capstone_course.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/maxthestranger/microverse_capstone_course/issues" 18 | }, 19 | "homepage": "https://github.com/maxthestranger/microverse_capstone_course#readme", 20 | "devDependencies": { 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^7.32.0", 23 | "eslint-config-airbnb-base": "^14.2.1", 24 | "eslint-plugin-import": "^2.25.4", 25 | "hint": "^6.1.9", 26 | "stylelint": "^13.13.1", 27 | "stylelint-config-standard": "^21.0.0", 28 | "stylelint-csstree-validator": "^1.9.0", 29 | "stylelint-scss": "^3.21.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | const instructorData = [ 2 | { 3 | imgUrl: 'avatar.svg', 4 | title: 'Yochai Benkler', 5 | role: 'Berkman Professor of Entrepreneurial Legal Studies at Harvard Law School', 6 | info: 'Benkler studies commons-based peer production, and published his seminal book The Wealth of Networks in 2006.', 7 | }, 8 | { 9 | imgUrl: 'avatar1.svg', 10 | title: 'Maji Makaa Moto', 11 | role: 'Berkman Professor of Entrepreneurial Legal Studies at Harvard Law School', 12 | info: 'Benkler studies commons-based peer production, and published his seminal book The Wealth of Networks in 2006.', 13 | }, 14 | { 15 | imgUrl: 'avatar2.svg', 16 | title: 'Kichwa Maji', 17 | role: 'Berkman Professor of Regional Legal Studies at Harvard Law School', 18 | info: 'Benkler studies commons-based peer production, and published his seminal book The Wealth of Networks in 2006.', 19 | }, 20 | { 21 | imgUrl: 'avatar3.svg', 22 | title: 'Quuen Elizabeth', 23 | role: 'Berkman Professor of Computer Science at Harvard Law School', 24 | info: 'Benkler studies commons-based peer production, and published his seminal book The Wealth of Networks in 2006.', 25 | }, 26 | ]; 27 | 28 | export default instructorData; 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Microverse-Capstone-Project 3 | The first module capstone project. 4 | 5 | ![](img/demo.png) 6 | 7 | > A webpage for online bootcamp with all the contents and instructors. 8 | 9 | ## Built With 10 | 11 | - HTML, CSS & JS 12 | - Hint, Stylelint, Eslint 13 | 14 | ## Live Demo (https://deploy-preview-2--frabjous-puppy-af8fab.netlify.app/) 15 | ## Live Demo Video (https://www.loom.com/share/180708f787b042cda3f1498aaea95379) 16 | 17 | [Web Development Course](https://ezekielutshudi.github.io/Microverse-Capstone-Project/) 18 | 19 | ## Getting Started 20 | 21 | To get a local copy up and running follow these simple example steps. 22 | 23 | ### Prerequisites 24 | 25 | ``` 26 | node and npm 27 | ``` 28 | 29 | ### Setup 30 | 31 | ``` 32 | - clone the repo 33 | - cd into it 34 | - npm install 35 | ``` 36 | 37 | ### Install 38 | 39 | ``` 40 | open the html file 41 | ``` 42 | 43 | ### Usage 44 | 45 | ``` 46 | navigate through the pages to see different contents 47 | ``` 48 | 49 | ### Deployment 50 | 51 | ``` 52 | set up on github pages 53 | ``` 54 | 55 | ## Authors 56 | 57 | 👤 **Ezekiel Utshudi Eteta** 58 | 59 | - GitHub: [@EzekielUtshudi](https://github.com/EzekielUtshudi) 60 | - Twitter: [@UtshudiEzekiel](https://twitter.com/UtshudiEzekiel) 61 | - LinkedIn: [@UtshudiEzekiel](https://www.linkedin.com/in/ezekiel-utshudi-195782162/) 62 | 63 | ## 🤝 Contributing 64 | 65 | Contributions, issues, and feature requests are welcome! 66 | 67 | Feel free to leave a comment [issues page](https://github.com/EzekielUtshudi/Microverse-Capstone-Project/issues). 68 | 69 | ## Show your support 70 | 71 | Give a ⭐️ if you like this project! 72 | 73 | ## Acknowledgments 74 | 75 | - Hats off to the UI/UX designer Cindy Shin [@adagio07](https://www.behance.net/adagio07) 76 | 77 | ## 📝 License 78 | 79 | This project is [MIT](./MIT.md) licensed. 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /.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 . 63 | -------------------------------------------------------------------------------- /img/logo_light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 12 | 13 | 14 | 16 | 19 | 24 | 31 | 36 | 44 | 49 | 54 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 12 | 13 | 14 | 16 | 19 | 24 | 31 | 36 | 44 | 50 | 55 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ed-tech summit - bootcamp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 37 |
38 |
39 | 40 |
41 |
42 | 47 | 52 | 61 |
62 |
63 | 64 |
65 |
66 |

67 | Hello Dev! Sharing World 68 |

69 |

70 | IMMERSIVE-FULLSTACK
71 | Web Developer
72 | bootcamp 73 |

74 |

75 | Explore web development essentials, and back-end, front-end and full 76 | stack development in this comprehensive online web development 77 | bootcamp. Learn practical, job-ready web developer skills to start 78 | your professional developer career in just 3-6 months. Here’s what you 79 | can expect to learn. 80 |

81 |

82 | Please contact us per Email for any further questions about Ed-tech 83 | Summit 2019! 84 | techsummit2019@london.org 85 |

86 |
87 |
88 | 89 |
90 |
91 |

Ed-tech Bootcamp 2022 Logo

92 |

93 | The logo of Ed-tech International Summit 2018 was decided through the logo 94 | competition from 8. June to 7. Dec. 95 |

96 |
97 | logo info 98 |
99 |
100 |
101 | 102 |
103 |
104 |

See the past Bootcamps

105 |

106 | Take a look at the last two Ed-tech Global Bootcamps which took place 107 | in poland Aires,South Africa and in Warsaw. 108 |

109 | 110 |
111 |
112 | bootcamp 113 |
114 |

2021

115 |

116 | Ed-tech Global Bootcamp 2021 in Warsaw, Poland,Ukraine. 117 |

118 |
119 |
120 | 121 |
122 | bootcamp 123 |
124 |

2022

125 |

126 | Ed-tech Global Bootcamp 2022 in Cape town,South Africa. 127 |

128 |
129 |
130 |
131 |
132 |
133 | 134 |
135 |
136 |

Partner

137 | 138 |
139 |
140 | partner 1 141 |
142 |
143 | partner 1 144 |
145 |
146 | partner 1 147 |
148 |
149 | partner 1 150 |
151 |
152 | partner 1 153 |
154 |
155 |
156 |
157 | 158 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ed-tech summit - bootcamp 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 36 |
37 |
38 | 39 |
40 |
41 | 46 | 51 | 60 |
61 |
62 | 63 |
64 |
65 |

66 | Hello Dev ! Sharing World 67 |

68 |

69 | IMMERSIVE
70 | Web Developer
71 | bootcamp 72 |

73 |

74 | This comprehensive full stack web development course, teaches you to 75 | build your own dynamic, data-driven web applications. Learn HTML, CSS, 76 | JavaScript, Node.js, MongoDB, Express and React in just 3 to 6 months, 77 | and begin your career as a web developer. 78 |

79 |

2022.06.15(MON) ~ 09.16(FRI)

80 |

@Eidburge University of the World, Art Center

81 |
82 |
83 | 84 |
85 |
86 |

Main Program

87 |
88 |
89 |
90 | js icon 91 |
92 |
93 |

JS Dev

94 |
95 |
96 |

97 | Back-End developers build, update and maintain the server-side 98 | infrastructure, or "back end," of a website or application. 99 |

100 |
101 |
102 | 103 |
104 |
105 | ux icon 106 |
107 |
108 |

UX Des

109 |
110 |
111 |

112 | UX Designers improve the accessibility and effectiveness of 113 | software and hardware from a user's perspective. 114 |

115 |
116 |
117 | 118 |
119 |
120 | full stack icon 121 |
122 |
123 |

Full Stack Dev

124 |
125 |
126 |

127 | A full stack developer’s primary responsibilities include 128 | designing user interactions on websites, and developing servers 129 | and databases for website functionality. 130 |

131 |
132 |
133 | 134 |
135 |
136 | tech writer icon 137 |
138 |
139 |

Tech Writer

140 |
141 |
142 |

143 | As a technical author, you will be responsible for writing 144 | specialist information about products and services, and how they 145 | work. 146 |

147 |
148 |
149 |
150 | 151 | Apply for Program 152 |
153 |
154 | 155 |
156 |
157 |

Featured Instructors

158 |
159 | 160 | 166 |
167 |
168 | 169 |
170 |
171 |

Partner

172 | 173 |
174 |
175 | partner 1 176 |
177 |
178 | partner 2 179 |
180 |
181 | partner 3 182 |
183 |
184 | partner 4 185 |
186 |
187 | partner 5 188 |
189 |
190 |
191 |
192 | 193 | 208 | 209 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); 2 | 3 | @font-face { 4 | font-family: 'Cocogoose'; 5 | src: url('../fonts/Cocogoose.woff2') format('woff2'); 6 | font-weight: normal; 7 | font-style: normal; 8 | } 9 | 10 | :root { 11 | --primary: #ee523c; 12 | --secondary: #d3d3d3; 13 | --grey: #f5f5f5; 14 | --white: #fff; 15 | --dark: #272a31; 16 | --title_font: 'Cocogoose', sans-serif; 17 | --body_font: 'Lato', sans-serif; 18 | --trans: all 0.2s ease-in-out; 19 | } 20 | 21 | /* reset */ 22 | *, 23 | *::before, 24 | *::after { 25 | margin: 0; 26 | padding: 0; 27 | box-sizing: border-box; 28 | } 29 | 30 | html { 31 | scroll-behavior: smooth; 32 | } 33 | 34 | body { 35 | font-family: var(--body_font); 36 | color: var(--dark); 37 | font-size: 16px; 38 | line-height: 1.5; 39 | } 40 | 41 | a { 42 | text-decoration: none; 43 | cursor: pointer; 44 | transition: var(--trans); 45 | } 46 | 47 | img, 48 | svg { 49 | max-width: 100%; 50 | width: 100%; 51 | vertical-align: middle; 52 | } 53 | 54 | p { 55 | font-weight: normal; 56 | } 57 | 58 | /* mobile first */ 59 | .container { 60 | padding: 25px; 61 | max-width: 920px; 62 | margin: 0 auto; 63 | } 64 | 65 | .section { 66 | padding: 50px 0; 67 | } 68 | 69 | .btn { 70 | padding: 12px 10px; 71 | border-width: 3px; 72 | border-style: solid; 73 | text-align: center; 74 | } 75 | 76 | .btn_outline { 77 | border-color: var(--primary); 78 | color: var(--primary); 79 | } 80 | 81 | .btn_outline:hover { 82 | background: var(--primary); 83 | color: var(--white); 84 | } 85 | 86 | .btn_primary { 87 | background: var(--primary); 88 | color: var(--white); 89 | border-color: var(--primary); 90 | } 91 | 92 | .btn_primary:hover { 93 | background: transparent; 94 | } 95 | 96 | .btn_dark_outline { 97 | background: var(--white); 98 | color: var(--dark); 99 | border-color: var(--dark); 100 | } 101 | 102 | .btn_dark_outline:hover { 103 | background: var(--dark); 104 | color: var(--white); 105 | } 106 | 107 | .bg_grey { 108 | background: var(--grey); 109 | } 110 | 111 | .bg_dark { 112 | background: var(--dark); 113 | } 114 | 115 | .bg_white { 116 | background: var(--white); 117 | } 118 | 119 | .page_title { 120 | color: var(--primary); 121 | text-transform: uppercase; 122 | font-size: 39px; 123 | font-weight: bold; 124 | font-family: var(--title_font); 125 | overflow-wrap: break-word; 126 | } 127 | 128 | .text_white { 129 | color: var(--white); 130 | } 131 | 132 | .text_primary { 133 | color: var(--primary); 134 | } 135 | 136 | .italic { 137 | font-style: italic; 138 | } 139 | 140 | .text_center { 141 | text-align: center; 142 | } 143 | 144 | .sec_title { 145 | text-align: center; 146 | margin-bottom: 50px; 147 | position: relative; 148 | } 149 | 150 | .sec_title.after::after { 151 | content: ''; 152 | position: absolute; 153 | width: 57px; 154 | height: 1px; 155 | background: var(--primary); 156 | bottom: -16px; 157 | left: calc(50% - 27px); 158 | } 159 | 160 | .d_sm_none { 161 | display: none; 162 | } 163 | 164 | .m_auto { 165 | margin: 0 auto !important; 166 | } 167 | 168 | .mb_3 { 169 | margin-bottom: 30px; 170 | } 171 | 172 | .b_1 { 173 | border-bottom: 1px solid var(--grey); 174 | } 175 | 176 | .p_0 { 177 | padding: 0 !important; 178 | } 179 | 180 | .d_flex_end { 181 | display: flex; 182 | justify-content: flex-end; 183 | align-items: center; 184 | } 185 | 186 | /* INFO-BAR */ 187 | .info_bar { 188 | display: none; 189 | } 190 | 191 | /* HEADER */ 192 | header { 193 | background: transparent; 194 | } 195 | 196 | .logo { 197 | display: none; 198 | } 199 | 200 | /* contact */ 201 | .contact { 202 | margin-top: 20px; 203 | } 204 | 205 | .contact span { 206 | display: block; 207 | font-weight: bold; 208 | text-decoration: underline; 209 | } 210 | 211 | .hamburger { 212 | border: none; 213 | background: transparent; 214 | width: 40px; 215 | height: 40px; 216 | position: relative; 217 | } 218 | 219 | .hamburger span { 220 | height: 5px; 221 | background: var(--dark); 222 | width: 100%; 223 | position: absolute; 224 | left: 0; 225 | transition: var(--trans); 226 | } 227 | 228 | .hamburger span:nth-child(1) { 229 | top: 10%; 230 | } 231 | 232 | .hamburger span:nth-child(2) { 233 | top: 50%; 234 | } 235 | 236 | .hamburger span:nth-child(3) { 237 | top: 90%; 238 | } 239 | 240 | .hamburger.active span:nth-child(1) { 241 | transform: rotate(-45deg); 242 | top: 50%; 243 | } 244 | 245 | .hamburger.active span:nth-child(2) { 246 | opacity: 0; 247 | } 248 | 249 | .hamburger.active span:nth-child(3) { 250 | transform: rotate(45deg); 251 | top: 50%; 252 | } 253 | 254 | .navbar { 255 | display: none; 256 | transition: var(--trans); 257 | margin-top: 20px; 258 | } 259 | 260 | .navbar.open { 261 | display: block; 262 | position: absolute; 263 | background: white; 264 | width: 100%; 265 | left: 0; 266 | padding: 25px; 267 | } 268 | 269 | .navbar ul { 270 | list-style: none; 271 | } 272 | 273 | .navbar ul a { 274 | text-decoration: none; 275 | display: block; 276 | padding: 12px 10px; 277 | color: var(--dark); 278 | text-transform: uppercase; 279 | border-bottom: 1px solid #d3d3d35b; 280 | } 281 | 282 | .navbar ul a:hover { 283 | background: var(--primary); 284 | color: var(--white); 285 | } 286 | 287 | .navbar .btn { 288 | display: block; 289 | max-width: 300px; 290 | margin: 30px auto 0; 291 | } 292 | 293 | /* HERO */ 294 | .qouted { 295 | color: var(--primary); 296 | font-weight: normal; 297 | font-family: var(--body_font); 298 | } 299 | 300 | .info { 301 | display: block; 302 | padding: 20px; 303 | border: 2px solid var(--white); 304 | margin: 20px 0; 305 | } 306 | 307 | .date { 308 | font-weight: 900; 309 | color: var(--dark); 310 | font-size: 30px; 311 | text-transform: uppercase; 312 | overflow-wrap: break-word; 313 | } 314 | 315 | .venue { 316 | font-size: 18px; 317 | margin-top: 10px; 318 | } 319 | 320 | /* THE PARTNERS-SECTION */ 321 | .partner { 322 | display: flex; 323 | justify-content: center; 324 | flex-wrap: wrap; 325 | gap: 20px; 326 | } 327 | 328 | .partner_img img { 329 | filter: invert(100%); 330 | } 331 | 332 | /* FOOTER-SECTION */ 333 | .footer .container { 334 | display: flex; 335 | justify-content: space-between; 336 | gap: 30px; 337 | } 338 | 339 | .footer_logo { 340 | display: flex; 341 | align-items: center; 342 | } 343 | 344 | .footer_logo img { 345 | width: 200px; 346 | } 347 | 348 | .copyright { 349 | font-size: 14px; 350 | } 351 | 352 | .logo_desc { 353 | border: 1px solid var(--secondary); 354 | padding: 40px; 355 | } 356 | 357 | .logo_desc img { 358 | width: 500px; 359 | margin: 0 auto; 360 | display: block; 361 | } 362 | 363 | /* PROGRAM-SECTION */ 364 | .program { 365 | display: flex; 366 | flex-direction: column; 367 | gap: 20px; 368 | } 369 | 370 | .program .pr_item { 371 | background: #3c3f46; 372 | padding: 20px; 373 | display: flex; 374 | gap: 5%; 375 | align-items: center; 376 | border: 1px solid transparent; 377 | transition: var(--trans); 378 | cursor: pointer; 379 | } 380 | 381 | .program .pr_item:hover { 382 | border-color: var(--white); 383 | } 384 | 385 | .program .pr_item .pr_icon img { 386 | width: 100px; 387 | height: auto; 388 | display: block; 389 | } 390 | 391 | .program .pr_item .pr_title h2 { 392 | color: var(--primary); 393 | font-weight: bold; 394 | text-transform: capitalize; 395 | font-size: 18px; 396 | min-width: 75px; 397 | } 398 | 399 | .program .pr_item .pr_desc p { 400 | color: var(--white); 401 | } 402 | 403 | .btn_program { 404 | max-width: 50%; 405 | display: flex; 406 | margin: 50px auto 0; 407 | width: 50%; 408 | align-items: center; 409 | justify-content: center; 410 | } 411 | 412 | .btn_program i { 413 | margin-left: 5px; 414 | } 415 | 416 | /* INSTRUCTORS-SECTION */ 417 | .grid { 418 | display: grid; 419 | gap: 50px; 420 | width: 100%; 421 | height: auto; 422 | } 423 | 424 | .grid_item { 425 | display: flex; 426 | gap: 20px; 427 | } 428 | 429 | .styled_text { 430 | margin: 10px 0 20px; 431 | position: relative; 432 | } 433 | 434 | .styled_text::after { 435 | content: ''; 436 | position: absolute; 437 | left: 0; 438 | bottom: -10px; 439 | height: 1px; 440 | width: 20%; 441 | background: var(--secondary); 442 | } 443 | 444 | /* ABOUT US SECTION */ 445 | .history { 446 | display: flex; 447 | flex-direction: column; 448 | gap: 20px; 449 | } 450 | 451 | .hi_boot { 452 | position: relative; 453 | background: rgb(238, 82, 60, 0.65); 454 | } 455 | 456 | .hi_img { 457 | position: absolute; 458 | top: 0; 459 | left: 0; 460 | bottom: 0; 461 | width: 100%; 462 | display: block; 463 | overflow: hidden; 464 | z-index: -1; 465 | height: 100%; 466 | } 467 | 468 | .hi_info { 469 | padding: 80px 20px; 470 | text-align: center; 471 | } 472 | 473 | .hi_info h3 { 474 | font-size: 40px; 475 | font-weight: bold; 476 | color: var(--white); 477 | } 478 | 479 | /* MEDIA QUERIES */ 480 | @media (min-width: 768px) { 481 | .d_lg_none { 482 | display: none; 483 | } 484 | 485 | .navbar ul { 486 | display: flex; 487 | gap: 10px; 488 | } 489 | 490 | .navbar ul a { 491 | border-bottom: 1px dashed transparent; 492 | } 493 | 494 | /* INFO-BAR */ 495 | .info_bar { 496 | display: block; 497 | } 498 | 499 | .info_bar ul { 500 | list-style: none; 501 | display: flex; 502 | align-items: center; 503 | } 504 | 505 | .info_bar ul a { 506 | color: var(--white); 507 | padding: 7px 14px; 508 | display: block; 509 | } 510 | 511 | .info_bar ul a:hover { 512 | color: var(--primary); 513 | } 514 | 515 | /* HEADER */ 516 | header { 517 | background: var(--white); 518 | box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1); 519 | } 520 | 521 | header .container { 522 | display: flex; 523 | justify-content: space-between; 524 | align-items: center; 525 | } 526 | 527 | .logo { 528 | display: block; 529 | } 530 | 531 | .logo img { 532 | height: 36px; 533 | display: block; 534 | width: auto; 535 | } 536 | 537 | .hamburger { 538 | display: none; 539 | } 540 | 541 | .navbar { 542 | display: flex; 543 | flex-direction: row; 544 | align-items: center; 545 | margin: 0; 546 | } 547 | 548 | .navbar ul a:hover { 549 | background: transparent; 550 | color: var(--primary); 551 | border-color: var(--primary); 552 | } 553 | 554 | .navbar .btn { 555 | margin: 0; 556 | margin-left: 40px; 557 | } 558 | 559 | /* HERO */ 560 | .page_title { 561 | font-size: 60px; 562 | font-weight: bolder; 563 | line-height: 1.3; 564 | } 565 | 566 | .info { 567 | max-width: 75%; 568 | } 569 | 570 | /* PROGRAM */ 571 | .program { 572 | flex-direction: row; 573 | gap: 3px; 574 | } 575 | 576 | .pr_item { 577 | flex-direction: column; 578 | gap: 0 !important; 579 | } 580 | 581 | .pr_icon { 582 | width: 60px; 583 | } 584 | 585 | .pr_title { 586 | margin: 20px 0; 587 | } 588 | 589 | .pr_desc { 590 | text-align: center; 591 | } 592 | 593 | /* INSTRUCTORS */ 594 | .grid { 595 | grid-template-rows: 1fr 1fr; 596 | grid-template-columns: 1fr 1fr; 597 | } 598 | 599 | /* FOOTER */ 600 | .footer .container { 601 | gap: 146px; 602 | } 603 | 604 | .copyright p:last-child { 605 | margin-top: 10px; 606 | } 607 | 608 | .d_sm_none { 609 | display: block; 610 | } 611 | 612 | /* ABOUT */ 613 | .history { 614 | flex-direction: row; 615 | justify-content: center; 616 | } 617 | } 618 | -------------------------------------------------------------------------------- /img/avatar2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /img/avatar3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | --------------------------------------------------------------------------------