├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── JS ├── about.js └── main.js ├── LICENSE ├── README.md ├── about.css ├── about.html ├── images ├── 2google-play-logo.jpg ├── 2spotify-logo.jpg ├── 3discord-logo.webp ├── 3vimeo-logo.jpg ├── 3webdev-logo.png ├── Js-icone.png ├── apple-logo.jpg ├── cssimg.webp ├── facebook-logo.png ├── fifth-photo.jpg ├── four-teacher.jpg ├── git-last-img.png ├── headerwhite-technology-background_52683-31443.webp ├── html icone.jpg ├── html-css-about-img.jpg ├── js-about-img.png ├── last-background-technology_1142-9120.webp ├── last-twitter-logo.png ├── one-teacher.jpg ├── photo-background.jpg ├── react-js-icone.png ├── redux-icone.png ├── sixth-teacher.jpg ├── three-teacher.jpg └── two-photo.jpg ├── index.html ├── package-lock.json ├── package.json └── style.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 | } -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /JS/about.js: -------------------------------------------------------------------------------- 1 | // JavaScript for About page 2 | 3 | const menu = document.querySelector('.hamburger'); 4 | const mobileMenu = document.querySelector('.mobile-nav'); 5 | 6 | const nav = document.querySelector('.ham-cont'); 7 | const xColor = document.querySelector('.hamburger'); 8 | 9 | menu.addEventListener('click', () => { 10 | menu.classList.toggle('is-active'); 11 | mobileMenu.classList.toggle('is-active'); 12 | nav.classList.toggle('color'); 13 | xColor.classList.toggle('x-color'); 14 | }); -------------------------------------------------------------------------------- /JS/main.js: -------------------------------------------------------------------------------- 1 | const menu = document.querySelector('.hamburger'); 2 | const mobileMenu = document.querySelector('.mobile-nav'); 3 | 4 | const nav = document.querySelector('.ham-cont'); 5 | const xColor = document.querySelector('.hamburger'); 6 | 7 | menu.addEventListener('click', () => { 8 | menu.classList.toggle('is-active'); 9 | mobileMenu.classList.toggle('is-active'); 10 | nav.classList.toggle('color'); 11 | xColor.classList.toggle('x-color'); 12 | }); 13 | 14 | // Featured Teachers// 15 | 16 | const body = document.querySelector('body'); 17 | const main = document.querySelector('main'); 18 | const partner = document.querySelector('.partner'); 19 | const featured = document.createElement('section'); 20 | featured.className = 'featured-teachers'; 21 | const footer = document.querySelector('footer'); 22 | 23 | const teachers = [{ 24 | title: 'Featured Teachers', 25 | personimg_1: './images/one-teacher.jpg', 26 | name_1: 'Mary steve', 27 | discribe_1: 'Experienced front-end developer and UX engineer.', 28 | par: 'In addition to showcasing their programming skills, They also provided a chance to display their creativity.', 29 | 30 | personimg_2: './images/two-photo.jpg', 31 | name_2: 'Patricia James', 32 | discribe_2: 'Experienced JavaScript engineer with impressive front-end coding skills.', 33 | 34 | personimg_3: './images/three-teacher.jpg', 35 | name_3: 'Aaron Hank', 36 | discribe_3: 'Software developer, who has extensive experience developing modern applications.', 37 | 38 | personimg_4: './images/four-teacher.jpg', 39 | name_4: 'Abel Reuben', 40 | discribe_4: 'Web designer who focuses on creating engaging website designs with responsive UI.', 41 | 42 | personimg_5: './images/fifth-photo.jpg', 43 | name_5: 'Jennifer Robert', 44 | discribe_5: 'Full-stack developer and former technical lead at Everpress.', 45 | 46 | personimg_6: './images/sixth-teacher.jpg', 47 | name_6: 'Linda David', 48 | discribe_6: 'IT graduate from Melbourne University with a passion for software engineering.', 49 | }]; 50 | 51 | featured.innerHTML = ` 52 |

${teachers[0].title}

53 | 54 |
55 |
56 | 57 |
58 | A persons' image 59 |
60 |
61 |

${teachers[0].name_1}

62 |

${teachers[0].discribe_1}

63 | 64 |

${teachers[0].par}

65 |
66 | 67 |
68 |
69 | 70 |
71 | A persons' image 72 |
73 |
74 |

${teachers[0].name_2}

75 |

${teachers[0].discribe_2}

76 | 77 |

${teachers[0].par}

78 |
79 | 80 |
81 |
82 | 83 |
84 | A persons' image 85 |
86 |
87 |

${teachers[0].name_3}

88 |

${teachers[0].discribe_3}

89 | 90 |

${teachers[0].par}

91 |
92 | 93 |
94 |
95 | 96 |
97 | A persons' image 98 |
99 |
100 |

${teachers[0].name_4}

101 |

${teachers[0].discribe_4}

102 | 103 |

${teachers[0].par}

104 |
105 | 106 |
107 |
108 | 109 |
110 | A persons' image 111 |
112 |
113 |

${teachers[0].name_5}

114 |

${teachers[0].discribe_5}

115 | 116 |

${teachers[0].par}

117 |
118 | 119 |
120 |
121 | 122 |
123 | A persons' image 124 |
125 |
126 |

${teachers[0].name_6}

127 |

${teachers[0].discribe_6}

128 | 129 |

${teachers[0].par}

130 |
131 | 132 |
133 |
`; 134 | 135 | main.insertBefore(featured, partner); 136 | body.insertBefore(main, footer); 137 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 HERMON GEBRE 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web development capstone project 2 | 3 | 4 | 5 | 6 | 7 | # 📗 Table of Contents 8 | 9 | - [📖 About the Project](#about-project) 10 | - [🛠 Built With](#built-with) 11 | - [Tech Stack](#tech-stack) 12 | - [Key Features](#key-features) 13 | - [🚀 Live Demo](#live-demo) 14 | - [💻 Getting Started](#getting-started) 15 | - [Setup](#setup) 16 | - [Prerequisites](#prerequisites) 17 | - [Install](#install) 18 | - [Usage](#usage) 19 | - [Run tests](#run-tests) 20 | - [Deployment](#triangular_flag_on_post-deployment) 21 | - [👥 Authors](#authors) 22 | - [🔭 Future Features](#future-features) 23 | - [🤝 Contributing](#contributing) 24 | - [⭐️ Show your support](#support) 25 | - [🙏 Acknowledgements](#acknowledgements) 26 | - [📝 License](#license) 27 | 28 | 29 | 30 | # 📖 [Web development capstone project] 31 | 32 | **[Web development capstone project]** is online courses for building websites from scratch where users can choose and take free online web-development courses. 33 | 34 | ## 🛠 Built With 35 | 36 | ### Tech Stack 37 | 38 |
39 | Client 40 | 45 |
46 | 47 | 48 | 49 | ### Key Features 50 | 51 | - **[Display courses]** 52 | - **[Select courses]** 53 | 54 |

(back to top)

55 | 56 | 57 | 58 | ## 🚀 Live Demo 59 | 60 | - [See live here](https://hermon-1995.github.io/Web-development-capstone-project/) 61 | 62 |

(back to top)

63 | 64 | 65 | 66 | 67 | ## 💻 Getting Started 68 | 69 | ### Prerequisites 70 | 71 | In order to run this project you need to: 72 | 73 | - Download [node](https://nodejs.org) 74 | 75 | ### Setup 76 | 77 | Clone this repository to your desired folder: 78 | 79 | ```sh 80 | cd Web-development-capstone-project 81 | git clone https://github.com/HERMON-1995/Web-development-capstone-project.git 82 | ``` 83 | ### Install 84 | 85 | ```sh 86 | cd Web-development-capstone-project 87 | ``` 88 | ```sh 89 | npm install 90 | ``` 91 | 92 | ### Run tests 93 | 94 | ```sh 95 | npx hint . 96 | ``` 97 | ```sh 98 | npx stylelint "**/*.{css,scss}" 99 | ``` 100 | ```sh 101 | npx eslint . 102 | ``` 103 | 104 | ### Deployment 105 | 106 | - GitHub pages 107 | 108 |

(back to top)

109 | 110 | 111 | 112 | ## 👥 Authors 113 | 114 | 👤 **Author1** 115 | *[HERMON Gebre]* 116 | 117 | - [GitHub profile](https://github.com/HERMON-1995) 118 | - [LinkedIn](https://www.linkedin.com/in/hermon-gebre) 119 | 120 |

(back to top)

121 | 122 | 123 | 124 | ## 🔭 Future Features 125 | #[Buy courses] 126 | 127 |

(back to top)

128 | 129 | 130 | 131 | ## 🤝 Contributing 132 | 133 | - [Issues](https://github.com/HERMON-1995/Web-development-capstone-project/issues?q=is%3Aissue+is%3Aclosed) 134 | 135 |

(back to top)

136 | 137 | 138 | 139 | ## ⭐️ Show your support 140 | 141 | If you like this project please show support by staring ⭐️. 142 | 143 |

(back to top)

144 | 145 | 146 | 147 | ## 🙏 Acknowledgments 148 | 149 | * I would like to give Microverse my sincerest gratitude for accommodating me in the Full-time Software Development program. 150 | * Also, I would like to extend my sincerest gratitude to Cindy Shin in Behance for this Creative and beautiful web design. 151 | 152 |

(back to top)

153 | 154 | 155 | 156 | ## 📝 License 157 | 158 | This project is [MIT](./LICENSE) licensed. 159 | 160 |

(back to top)

161 | -------------------------------------------------------------------------------- /about.css: -------------------------------------------------------------------------------- 1 | /* About.html file styles */ 2 | .about-intro { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .about-intro .welcome-par { 9 | padding-left: 0; 10 | } 11 | 12 | .about-intro h1 { 13 | margin-right: 10px; 14 | margin-left: 10px; 15 | text-align: center; 16 | } 17 | 18 | .about-intro .long-par-cont { 19 | margin-left: 50px; 20 | margin-right: 50px; 21 | } 22 | 23 | .about-intro .long-par-cont .desktop-par { 24 | display: none; 25 | } 26 | 27 | .about-intro .h2-header { 28 | font-weight: 100; 29 | font-size: 15px; 30 | padding-left: 0; 31 | text-align: center; 32 | padding-top: 50px; 33 | margin-bottom: 0; 34 | margin-left: 30px; 35 | margin-right: 30px; 36 | } 37 | 38 | .about-intro .location-par { 39 | border-bottom: 1px solid #272a31; 40 | font-weight: 700; 41 | font-size: 15px; 42 | padding-left: 0; 43 | text-align: center; 44 | padding-top: 0; 45 | margin-bottom: 10px; 46 | } 47 | 48 | .about-section1 { 49 | display: flex; 50 | flex-direction: column; 51 | align-items: center; 52 | } 53 | 54 | .about-section1 h3 { 55 | text-align: center; 56 | margin-top: 40px; 57 | } 58 | 59 | .about-section1 p { 60 | margin-left: 50px; 61 | margin-right: 50px; 62 | text-align: center; 63 | margin-top: 40px; 64 | } 65 | 66 | .about-section1 img { 67 | object-fit: contain; 68 | border: 1px solid #d3d3d3; 69 | border-radius: 50px; 70 | width: 250px; 71 | height: 100px; 72 | margin-top: 30px; 73 | margin-bottom: 60px; 74 | } 75 | 76 | .free-about .section1-title { 77 | width: 50%; 78 | } 79 | 80 | .about-courses .one { 81 | text-align: center; 82 | padding: 40px 20px; 83 | color: white; 84 | margin-top: 30px; 85 | margin-left: 20px; 86 | margin-right: 20px; 87 | margin-bottom: 30px; 88 | background-image: url(./images/html-css-about-img.jpg); 89 | background-size: cover; 90 | box-shadow: inset 0 0 0 2000px rgb(200 67 53 / 55%); 91 | transition: 0.8s; 92 | } 93 | 94 | .about-courses .one:hover { 95 | border: 2px solid #272a31; 96 | } 97 | 98 | .about-courses h3 { 99 | margin-top: 0; 100 | } 101 | 102 | .about-courses .two { 103 | text-align: center; 104 | padding: 40px 20px; 105 | color: white; 106 | margin-top: 30px; 107 | margin-left: 20px; 108 | margin-right: 20px; 109 | margin-bottom: 30px; 110 | background-image: url(./images/js-about-img.png); 111 | background-size: cover; 112 | box-shadow: inset 0 0 0 2000px rgb(200 67 53 / 55%); 113 | transition: 0.8s; 114 | } 115 | 116 | .about-courses .two:hover { 117 | border: 2px solid #272a31; 118 | } 119 | 120 | @media screen and (min-width: 768px) { 121 | .desktop-nav ul li .about-link { 122 | color: #ec5242; 123 | border-bottom: 1px solid #ec5242; 124 | } 125 | 126 | .about-intro .welcome-par { 127 | display: none; 128 | } 129 | 130 | .about-intro h1 { 131 | font-size: 100px; 132 | line-height: 75px; 133 | width: 60%; 134 | padding-left: 0; 135 | margin-top: 70px; 136 | } 137 | 138 | .about-intro .long-par-cont .about-par { 139 | margin-bottom: 0; 140 | text-align: center; 141 | } 142 | 143 | .about-intro .long-par-cont .desktop-par { 144 | display: block; 145 | margin-top: 0; 146 | text-align: center; 147 | } 148 | 149 | .about-intro .long-par-cont { 150 | margin-left: 110px; 151 | margin-right: 110px; 152 | } 153 | 154 | .about-intro .h2-header { 155 | font-weight: 100; 156 | font-size: 18px; 157 | } 158 | 159 | .about-intro .location-par { 160 | font-size: 16px; 161 | margin-bottom: 50px; 162 | } 163 | 164 | .about-section1 p { 165 | margin-left: 100px; 166 | margin-right: 100px; 167 | font-size: 20px; 168 | } 169 | 170 | .about-section1 img { 171 | width: 400px; 172 | height: 200px; 173 | } 174 | 175 | .about-courses { 176 | display: flex; 177 | flex-direction: row; 178 | justify-content: center; 179 | gap: 40px; 180 | max-width: 75%; 181 | margin: auto; 182 | } 183 | 184 | .about-courses .about-course { 185 | padding: 75px 90px; 186 | } 187 | 188 | .about-courses .one { 189 | padding-left: 65px; 190 | padding-right: 65px; 191 | transition: 0.8s; 192 | } 193 | 194 | .about-courses .two { 195 | transition: 0.8s; 196 | } 197 | 198 | .partner { 199 | display: none; 200 | } 201 | 202 | footer { 203 | background-color: #272a31; 204 | } 205 | 206 | .foot-container .left-cont h3 { 207 | color: #fff; 208 | font-size: 18px; 209 | margin-top: 20px; 210 | } 211 | 212 | .foot-container .right-cont p { 213 | color: #fff; 214 | font-size: 11px; 215 | margin-top: 20px; 216 | } 217 | 218 | .foot-container .right-cont p br { 219 | display: none; 220 | } 221 | } 222 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Web-Development | Online courses 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 21 |
22 | 23 |
24 | 25 |
26 | 27 | 38 | 46 |
47 |

"Hello! Web Developers"

48 |

You want to know more
49 | about our online courses

50 |
51 |

We're so happy you're here. This course is designed to start you on a path toward future studies in web development and design, no matter how little experience or technical knowledge you currently have.

52 |

The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment or education. But have you ever wondered how these websites actually work? How are they built? How do browsers, computers, and mobile devices interact with the web? What skills are necessary to build a website?

53 |
54 |

55 | Please contact us via Email for any further questions about this online courses! 56 |

57 |

webdevonline2023@gmail.com

58 |
59 |
60 |
61 |
62 |

Web Development Courses Logo

63 | 64 |

The logo of Web Development Courses was decided through the logo competition from January 1 to January 3.

65 | Web Development logo 66 |
67 |
68 |
69 |

See some of our free courses

70 | 71 |

Take our short free courses about basic HTML5, CSS3 and JavaScript with different libraries.

72 |
73 |
74 |

2023

75 |

HTML&CSS Tutorial and Projects Course 2023 (Flexbox&Grid) ...

76 |
77 |
78 |

2022

79 |

Choose from a wide range of top-rated JavaScript courses.

80 |
81 |
82 |
83 | 84 |
85 |

Partners

86 | 87 | 94 |
95 |
96 | 97 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /images/2google-play-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/2google-play-logo.jpg -------------------------------------------------------------------------------- /images/2spotify-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/2spotify-logo.jpg -------------------------------------------------------------------------------- /images/3discord-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/3discord-logo.webp -------------------------------------------------------------------------------- /images/3vimeo-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/3vimeo-logo.jpg -------------------------------------------------------------------------------- /images/3webdev-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/3webdev-logo.png -------------------------------------------------------------------------------- /images/Js-icone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/Js-icone.png -------------------------------------------------------------------------------- /images/apple-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/apple-logo.jpg -------------------------------------------------------------------------------- /images/cssimg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/cssimg.webp -------------------------------------------------------------------------------- /images/facebook-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/facebook-logo.png -------------------------------------------------------------------------------- /images/fifth-photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/fifth-photo.jpg -------------------------------------------------------------------------------- /images/four-teacher.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/four-teacher.jpg -------------------------------------------------------------------------------- /images/git-last-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/git-last-img.png -------------------------------------------------------------------------------- /images/headerwhite-technology-background_52683-31443.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/headerwhite-technology-background_52683-31443.webp -------------------------------------------------------------------------------- /images/html icone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/html icone.jpg -------------------------------------------------------------------------------- /images/html-css-about-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/html-css-about-img.jpg -------------------------------------------------------------------------------- /images/js-about-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/js-about-img.png -------------------------------------------------------------------------------- /images/last-background-technology_1142-9120.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/last-background-technology_1142-9120.webp -------------------------------------------------------------------------------- /images/last-twitter-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/last-twitter-logo.png -------------------------------------------------------------------------------- /images/one-teacher.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/one-teacher.jpg -------------------------------------------------------------------------------- /images/photo-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/photo-background.jpg -------------------------------------------------------------------------------- /images/react-js-icone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/react-js-icone.png -------------------------------------------------------------------------------- /images/redux-icone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/redux-icone.png -------------------------------------------------------------------------------- /images/sixth-teacher.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/sixth-teacher.jpg -------------------------------------------------------------------------------- /images/three-teacher.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/three-teacher.jpg -------------------------------------------------------------------------------- /images/two-photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HERMON-1995/Web-development-capstone-project/4d4a8dd712b7064d5dddbf3fd55d21ab592964c0/images/two-photo.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Web-Development | Online courses 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 20 |
21 | 22 |
23 | 24 |
25 | 26 | 37 | 45 |
46 |

"Hello! Web Developers"

47 |

Web Development
48 | online courses

49 |
50 |

Here at Web-Development courses is everthing you need to know about various programming languages, data structures, design patterns, front-end/back-end libraries, to land your coding dream job.

51 |
52 |

53 | Live courses Comming soon!
54 | 2023.2.8(THUR) ~ 9(FRI) 55 |

56 |

@[https://www.youtube.com/watch?v=q0Ex0l_LgRQ]

57 |
58 |
59 | 60 |
61 |
62 |

Our courses

63 | 64 |
65 |
66 | html image 67 |
68 |

Ultimate HTML5 course

69 |

Everything you need to build fast and stunning websites with HTML5.

70 |
71 |
72 |
73 | css image 74 |
75 |

Ultimate CSS3 course

76 |

Everything you need to build fast and stunning websites with CSS3.

77 |
78 |
79 |
80 | javascript image 81 |
82 |

JavaScript course

83 |

Master JavaScript: Go from Novice to Professional programmer here.

84 |
85 |
86 |
87 | react image 88 |
89 |

For Mastering React

90 |

This course covers, the way forward to building fast, interactive web apps.

91 |
92 |
93 |
94 | git image 95 |
96 |

Ultimate Git course

97 |

Everything you need to know to use Git & GitHub,work effectively as a team.

98 |
99 |
100 |
101 | redux image 102 |
103 |

Ultimate Redux course

104 |

Go from beginner to expert in a couple of hours in this short course redux.

105 |
106 |
107 |
108 | 109 |
110 | 111 |
112 |

Partners

113 | 114 | 121 |
122 |
123 | 124 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /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.27.5", 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 | "name": "html-css-javascript-capstone-project", 14 | "description": "This is HTML/CSS & JavaScript capstone project building web development course web site.", 15 | "version": "1.0.0", 16 | "main": "index.js", 17 | "dependencies": { 18 | "abab": "^2.0.6", 19 | "abbrev": "^1.1.1", 20 | "acorn": "^8.8.2", 21 | "acorn-globals": "^7.0.1", 22 | "acorn-jsx": "^5.3.2", 23 | "acorn-jsx-walk": "^2.0.0", 24 | "acorn-walk": "^8.2.0", 25 | "agent-base": "^6.0.2", 26 | "agentkeepalive": "^4.2.1", 27 | "aggregate-error": "^3.1.0", 28 | "ajv": "^8.12.0", 29 | "ajv-formats": "^2.1.1", 30 | "ansi-align": "^3.0.1", 31 | "ansi-colors": "^4.1.3", 32 | "ansi-regex": "^5.0.1", 33 | "ansi-styles": "^4.3.0", 34 | "anymatch": "^3.1.3", 35 | "aproba": "^2.0.0", 36 | "are-we-there-yet": "^2.0.0", 37 | "argparse": "^1.0.10", 38 | "array-includes": "^3.1.6", 39 | "array-union": "^2.1.0", 40 | "array.prototype.flat": "^1.3.1", 41 | "array.prototype.flatmap": "^1.3.1", 42 | "arrify": "^1.0.1", 43 | "ast-types": "^0.13.4", 44 | "astral-regex": "^2.0.0", 45 | "async": "^3.2.4", 46 | "asynckit": "^0.4.0", 47 | "autoprefixer": "^9.8.8", 48 | "available-typed-arrays": "^1.0.5", 49 | "axe-core": "^4.6.3", 50 | "bail": "^1.0.5", 51 | "balanced-match": "^1.0.2", 52 | "base64-js": "^1.5.1", 53 | "bcp47": "^1.1.2", 54 | "binary-extensions": "^2.2.0", 55 | "bl": "^4.1.0", 56 | "boolbase": "^1.0.0", 57 | "boxen": "^5.1.2", 58 | "brace-expansion": "^1.1.11", 59 | "braces": "^3.0.2", 60 | "browserslist": "^4.21.5", 61 | "buffer": "^5.7.1", 62 | "buffer-crc32": "^0.2.13", 63 | "builtins": "^5.0.1", 64 | "bytes": "^3.1.2", 65 | "cacache": "^16.1.3", 66 | "cacheable-lookup": "^5.0.4", 67 | "cacheable-request": "^7.0.2", 68 | "call-bind": "^1.0.2", 69 | "callsites": "^3.1.0", 70 | "camelcase": "^6.3.0", 71 | "camelcase-keys": "^6.2.2", 72 | "caniuse-lite": "^1.0.30001450", 73 | "canvas": "^2.11.0", 74 | "chalk": "^4.1.2", 75 | "character-entities": "^1.2.4", 76 | "character-entities-legacy": "^1.1.4", 77 | "character-reference-invalid": "^1.1.4", 78 | "chokidar": "^3.5.3", 79 | "chownr": "^2.0.0", 80 | "ci-info": "^3.7.1", 81 | "clean-stack": "^2.2.0", 82 | "cli-boxes": "^2.2.1", 83 | "cli-cursor": "^3.1.0", 84 | "cli-spinners": "^2.7.0", 85 | "clone": "^1.0.4", 86 | "clone-regexp": "^2.2.0", 87 | "clone-response": "^1.0.3", 88 | "cloudinary": "^1.33.0", 89 | "cloudinary-core": "^2.13.0", 90 | "color-convert": "^2.0.1", 91 | "color-name": "^1.1.4", 92 | "color-string": "^1.9.1", 93 | "color-support": "^1.1.3", 94 | "combined-stream": "^1.0.8", 95 | "concat-map": "^0.0.1", 96 | "configstore": "^5.0.1", 97 | "confusing-browser-globals": "^1.0.11", 98 | "console-control-strings": "^1.1.0", 99 | "content-type": "^1.0.5", 100 | "convert-source-map": "^1.9.0", 101 | "core-js": "^3.27.2", 102 | "core-util-is": "^1.0.3", 103 | "cosmiconfig": "^7.1.0", 104 | "cross-fetch": "^3.1.5", 105 | "cross-spawn": "^7.0.3", 106 | "crypto-random-string": "^2.0.0", 107 | "css-select": "^4.3.0", 108 | "css-tree": "^1.1.3", 109 | "css-what": "^6.1.0", 110 | "cssesc": "^3.0.0", 111 | "cssom": "^0.5.0", 112 | "cssstyle": "^2.3.0", 113 | "data-uri-to-buffer": "^3.0.1", 114 | "data-urls": "^3.0.2", 115 | "debug": "^4.3.4", 116 | "decamelize": "^1.2.0", 117 | "decamelize-keys": "^1.1.1", 118 | "decimal.js": "^10.4.3", 119 | "decompress-response": "^6.0.0", 120 | "deep-extend": "^0.6.0", 121 | "deep-is": "^0.1.4", 122 | "defaults": "^1.0.4", 123 | "defer-to-connect": "^2.0.1", 124 | "define-properties": "^1.1.4", 125 | "degenerator": "^3.0.2", 126 | "delayed-stream": "^1.0.0", 127 | "delegates": "^1.0.0", 128 | "depd": "^1.1.2", 129 | "detect-libc": "^2.0.1", 130 | "devtools-protocol": "^0.0.981744", 131 | "dir-glob": "^3.0.1", 132 | "doctrine": "^3.0.0", 133 | "dom-serializer": "^1.4.1", 134 | "domelementtype": "^2.3.0", 135 | "domexception": "^4.0.0", 136 | "domhandler": "^4.3.1", 137 | "domutils": "^2.8.0", 138 | "dot-prop": "^5.3.0", 139 | "duplexer3": "^0.1.5", 140 | "ejs": "^3.1.8", 141 | "electron-to-chromium": "^1.4.286", 142 | "emoji-regex": "^8.0.0", 143 | "encoding": "^0.1.13", 144 | "end-of-stream": "^1.4.4", 145 | "enquirer": "^2.3.6", 146 | "entities": "^2.2.0", 147 | "err-code": "^2.0.3", 148 | "error-ex": "^1.3.2", 149 | "es-abstract": "^1.21.1", 150 | "es-set-tostringtag": "^2.0.1", 151 | "es-shim-unscopables": "^1.0.0", 152 | "es-to-primitive": "^1.2.1", 153 | "escalade": "^3.1.1", 154 | "escape-goat": "^2.1.1", 155 | "escape-string-regexp": "^1.0.5", 156 | "escodegen": "^2.0.0", 157 | "eslint-import-resolver-node": "^0.3.7", 158 | "eslint-module-utils": "^2.7.4", 159 | "eslint-scope": "^5.1.1", 160 | "eslint-utils": "^2.1.0", 161 | "eslint-visitor-keys": "^3.3.0", 162 | "espree": "^7.3.1", 163 | "esprima": "^4.0.1", 164 | "esquery": "^1.4.0", 165 | "esrecurse": "^4.3.0", 166 | "estraverse": "^5.3.0", 167 | "esutils": "^2.0.3", 168 | "eventemitter2": "^6.4.9", 169 | "execa": "^4.1.0", 170 | "execall": "^2.0.0", 171 | "extend": "^3.0.2", 172 | "extract-zip": "^2.0.1", 173 | "fast-deep-equal": "^3.1.3", 174 | "fast-glob": "^3.2.12", 175 | "fast-json-stable-stringify": "^2.1.0", 176 | "fast-levenshtein": "^2.0.6", 177 | "fast-xml-parser": "^3.21.1", 178 | "fastest-levenshtein": "^1.0.16", 179 | "fastq": "^1.15.0", 180 | "fd-slicer": "^1.1.0", 181 | "file-entry-cache": "^6.0.1", 182 | "file-type": "^16.5.4", 183 | "file-uri-to-path": "^2.0.0", 184 | "filelist": "^1.0.4", 185 | "fill-range": "^7.0.1", 186 | "find-up": "^4.1.0", 187 | "flat-cache": "^3.0.4", 188 | "flatted": "^3.2.7", 189 | "for-each": "^0.3.3", 190 | "form-data": "^4.0.0", 191 | "fs-constants": "^1.0.0", 192 | "fs-extra": "^10.1.0", 193 | "fs-minipass": "^2.1.0", 194 | "fs.realpath": "^1.0.0", 195 | "ftp": "^0.3.10", 196 | "function-bind": "^1.1.1", 197 | "function.prototype.name": "^1.1.5", 198 | "functional-red-black-tree": "^1.0.1", 199 | "functions-have-names": "^1.2.3", 200 | "gauge": "^3.0.2", 201 | "gensync": "^1.0.0-beta.2", 202 | "get-intrinsic": "^1.2.0", 203 | "get-stdin": "^8.0.0", 204 | "get-stream": "^5.2.0", 205 | "get-symbol-description": "^1.0.0", 206 | "get-uri": "^3.0.2", 207 | "glob": "^8.1.0", 208 | "glob-parent": "^5.1.2", 209 | "global-dirs": "^3.0.1", 210 | "global-modules": "^2.0.0", 211 | "global-prefix": "^3.0.0", 212 | "globals": "^11.12.0", 213 | "globalthis": "^1.0.3", 214 | "globby": "^11.1.0", 215 | "globjoin": "^0.1.4", 216 | "gonzales-pe": "^4.3.0", 217 | "gopd": "^1.0.1", 218 | "got": "^11.8.6", 219 | "graceful-fs": "^4.2.10", 220 | "hard-rejection": "^2.1.0", 221 | "has": "^1.0.3", 222 | "has-bigints": "^1.0.2", 223 | "has-flag": "^4.0.0", 224 | "has-property-descriptors": "^1.0.0", 225 | "has-proto": "^1.0.1", 226 | "has-symbols": "^1.0.3", 227 | "has-tostringtag": "^1.0.0", 228 | "has-unicode": "^2.0.1", 229 | "has-yarn": "^2.1.0", 230 | "hosted-git-info": "^5.2.1", 231 | "html-encoding-sniffer": "^3.0.0", 232 | "html-tags": "^3.2.0", 233 | "htmlparser2": "^3.10.1", 234 | "http-cache-semantics": "^4.1.1", 235 | "http-errors": "^2.0.0", 236 | "http-proxy-agent": "^5.0.0", 237 | "http2-wrapper": "^1.0.3", 238 | "https": "^1.0.0", 239 | "https-proxy-agent": "^5.0.1", 240 | "human-signals": "^1.1.1", 241 | "humanize-ms": "^1.2.1", 242 | "iconv-lite": "^0.6.3", 243 | "ieee754": "^1.2.1", 244 | "ignore": "^5.2.4", 245 | "image-size": "^1.0.2", 246 | "import-fresh": "^3.3.0", 247 | "import-lazy": "^2.1.0", 248 | "imurmurhash": "^0.1.4", 249 | "indent-string": "^4.0.0", 250 | "infer-owner": "^1.0.4", 251 | "inflight": "^1.0.6", 252 | "inherits": "^2.0.4", 253 | "ini": "^2.0.0", 254 | "internal-slot": "^1.0.4", 255 | "invert-kv": "^3.0.1", 256 | "ip": "^1.1.8", 257 | "is-alphabetical": "^1.0.4", 258 | "is-alphanumerical": "^1.0.4", 259 | "is-array-buffer": "^3.0.1", 260 | "is-arrayish": "^0.3.2", 261 | "is-bigint": "^1.0.4", 262 | "is-binary-path": "^2.1.0", 263 | "is-boolean-object": "^1.1.2", 264 | "is-buffer": "^2.0.5", 265 | "is-callable": "^1.2.7", 266 | "is-ci": "^3.0.1", 267 | "is-core-module": "^2.11.0", 268 | "is-date-object": "^1.0.5", 269 | "is-decimal": "^1.0.4", 270 | "is-docker": "^2.2.1", 271 | "is-extglob": "^2.1.1", 272 | "is-fullwidth-code-point": "^3.0.0", 273 | "is-glob": "^4.0.3", 274 | "is-hexadecimal": "^1.0.4", 275 | "is-installed-globally": "^0.4.0", 276 | "is-interactive": "^1.0.0", 277 | "is-lambda": "^1.0.1", 278 | "is-negative-zero": "^2.0.2", 279 | "is-npm": "^5.0.0", 280 | "is-number": "^7.0.0", 281 | "is-number-object": "^1.0.7", 282 | "is-obj": "^2.0.0", 283 | "is-path-inside": "^3.0.3", 284 | "is-plain-obj": "^1.1.0", 285 | "is-potential-custom-element-name": "^1.0.1", 286 | "is-regex": "^1.1.4", 287 | "is-regexp": "^2.1.0", 288 | "is-shared-array-buffer": "^1.0.2", 289 | "is-stream": "^2.0.1", 290 | "is-string": "^1.0.7", 291 | "is-svg": "^4.3.2", 292 | "is-symbol": "^1.0.4", 293 | "is-typed-array": "^1.1.10", 294 | "is-typedarray": "^1.0.0", 295 | "is-unicode-supported": "^0.1.0", 296 | "is-weakref": "^1.0.2", 297 | "is-wsl": "^2.2.0", 298 | "is-yarn-global": "^0.3.0", 299 | "isarray": "^0.0.1", 300 | "isexe": "^2.0.0", 301 | "jake": "^10.8.5", 302 | "js-library-detector": "^6.6.0", 303 | "js-tokens": "^4.0.0", 304 | "js-yaml": "^3.14.1", 305 | "jsdom": "^20.0.3", 306 | "jsesc": "^2.5.2", 307 | "json-buffer": "^3.0.1", 308 | "json-parse-even-better-errors": "^2.3.1", 309 | "json-schema-traverse": "^1.0.0", 310 | "json-stable-stringify-without-jsonify": "^1.0.1", 311 | "json5": "^2.2.3", 312 | "jsonc-parser": "^3.2.0", 313 | "jsonfile": "^6.1.0", 314 | "jsonparse": "^1.3.1", 315 | "keyv": "^4.5.2", 316 | "kind-of": "^6.0.3", 317 | "known-css-properties": "^0.21.0", 318 | "latest-version": "^5.1.0", 319 | "lcid": "^3.1.1", 320 | "levn": "^0.4.1", 321 | "lines-and-columns": "^1.2.4", 322 | "locate-path": "^5.0.0", 323 | "lockfile": "^1.0.4", 324 | "lodash": "^4.17.21", 325 | "lodash.merge": "^4.6.2", 326 | "lodash.truncate": "^4.4.2", 327 | "log-symbols": "^4.1.0", 328 | "longest-streak": "^2.0.4", 329 | "lowercase-keys": "^2.0.0", 330 | "lru-cache": "^7.14.1", 331 | "make-dir": "^3.1.0", 332 | "make-fetch-happen": "^10.2.1", 333 | "map-age-cleaner": "^0.1.3", 334 | "map-obj": "^4.3.0", 335 | "mathml-tag-names": "^2.1.3", 336 | "mdast-util-from-markdown": "^0.8.5", 337 | "mdast-util-to-markdown": "^0.6.5", 338 | "mdast-util-to-string": "^2.0.0", 339 | "mdn-data": "^2.0.31", 340 | "mem": "^5.1.1", 341 | "meow": "^9.0.0", 342 | "merge-stream": "^2.0.0", 343 | "merge2": "^1.4.1", 344 | "metaviewport-parser": "^0.2.0", 345 | "micromark": "^2.11.4", 346 | "micromatch": "^4.0.5", 347 | "mime-db": "^1.52.0", 348 | "mime-types": "^2.1.35", 349 | "mimic-fn": "^2.1.0", 350 | "mimic-response": "^1.0.1", 351 | "min-indent": "^1.0.1", 352 | "minimatch": "^3.1.2", 353 | "minimist": "^1.2.7", 354 | "minimist-options": "^4.1.0", 355 | "minipass": "^3.3.6", 356 | "minipass-collect": "^1.0.2", 357 | "minipass-fetch": "^2.1.2", 358 | "minipass-flush": "^1.0.5", 359 | "minipass-json-stream": "^1.0.1", 360 | "minipass-pipeline": "^1.2.4", 361 | "minipass-sized": "^1.0.3", 362 | "minizlib": "^2.1.2", 363 | "mkdirp": "^1.0.4", 364 | "mkdirp-classic": "^0.5.3", 365 | "ms": "^2.1.2", 366 | "mutationobserver-shim": "^0.3.7", 367 | "nan": "^2.17.0", 368 | "nanoid": "^3.3.4", 369 | "natural-compare": "^1.4.0", 370 | "negotiator": "^0.6.3", 371 | "netmask": "^2.0.2", 372 | "node-fetch": "^2.6.9", 373 | "node-releases": "^2.0.10", 374 | "nopt": "^5.0.0", 375 | "normalize-package-data": "^3.0.3", 376 | "normalize-path": "^3.0.0", 377 | "normalize-range": "^0.1.2", 378 | "normalize-selector": "^0.2.0", 379 | "normalize-url": "^6.1.0", 380 | "npm-package-arg": "^9.1.2", 381 | "npm-registry-fetch": "^13.3.1", 382 | "npm-run-path": "^4.0.1", 383 | "npmlog": "^5.0.1", 384 | "nth-check": "^2.1.1", 385 | "num2fraction": "^1.2.2", 386 | "nwsapi": "^2.2.2", 387 | "object-assign": "^4.1.1", 388 | "object-inspect": "^1.12.3", 389 | "object-keys": "^1.1.1", 390 | "object.assign": "^4.1.4", 391 | "object.entries": "^1.1.6", 392 | "object.values": "^1.1.6", 393 | "once": "^1.4.0", 394 | "onetime": "^5.1.2", 395 | "optionator": "^0.9.1", 396 | "ora": "^5.4.1", 397 | "os-locale": "^5.0.0", 398 | "p-cancelable": "^2.1.1", 399 | "p-defer": "^1.0.0", 400 | "p-is-promise": "^2.1.0", 401 | "p-limit": "^2.3.0", 402 | "p-locate": "^4.1.0", 403 | "p-map": "^4.0.0", 404 | "p-try": "^2.2.0", 405 | "pac-proxy-agent": "^5.0.0", 406 | "pac-resolver": "^5.0.1", 407 | "package-json": "^6.5.0", 408 | "parent-module": "^1.0.1", 409 | "parse-entities": "^2.0.0", 410 | "parse-json": "^5.2.0", 411 | "parse5": "^6.0.1", 412 | "parse5-htmlparser2-tree-adapter": "^6.0.1", 413 | "path-exists": "^4.0.0", 414 | "path-is-absolute": "^1.0.1", 415 | "path-key": "^3.1.1", 416 | "path-parse": "^1.0.7", 417 | "path-type": "^4.0.0", 418 | "peek-readable": "^4.1.0", 419 | "pend": "^1.2.0", 420 | "picocolors": "^1.0.0", 421 | "picomatch": "^2.3.1", 422 | "pkg-dir": "^4.2.0", 423 | "postcss": "^8.4.21", 424 | "postcss-html": "^0.36.0", 425 | "postcss-less": "^5.0.0", 426 | "postcss-media-query-parser": "^0.2.3", 427 | "postcss-resolve-nested-selector": "^0.1.1", 428 | "postcss-safe-parser": "^6.0.0", 429 | "postcss-sass": "^0.5.0", 430 | "postcss-scss": "^4.0.6", 431 | "postcss-selector-parser": "^6.0.11", 432 | "postcss-syntax": "^0.36.2", 433 | "postcss-value-parser": "^4.2.0", 434 | "prelude-ls": "^1.2.1", 435 | "prepend-http": "^2.0.0", 436 | "proc-log": "^2.0.1", 437 | "progress": "^2.0.3", 438 | "promise-inflight": "^1.0.1", 439 | "promise-retry": "^2.0.1", 440 | "proxy-agent": "^5.0.0", 441 | "proxy-from-env": "^1.1.0", 442 | "psl": "^1.9.0", 443 | "pump": "^3.0.0", 444 | "punycode": "^2.3.0", 445 | "pupa": "^2.1.1", 446 | "puppeteer-core": "^13.7.0", 447 | "q": "^1.5.1", 448 | "querystringify": "^2.2.0", 449 | "queue": "^6.0.2", 450 | "queue-microtask": "^1.2.3", 451 | "quick-lru": "^5.1.1", 452 | "raw-body": "^2.5.1", 453 | "rc": "^1.2.8", 454 | "read-pkg": "^5.2.0", 455 | "read-pkg-up": "^7.0.1", 456 | "readable-stream": "^3.6.0", 457 | "readable-web-to-node-stream": "^3.0.2", 458 | "readdirp": "^3.6.0", 459 | "redent": "^3.0.0", 460 | "regexp.prototype.flags": "^1.4.3", 461 | "regexpp": "^3.2.0", 462 | "registry-auth-token": "^4.2.2", 463 | "registry-url": "^5.1.0", 464 | "remark": "^13.0.0", 465 | "remark-parse": "^9.0.0", 466 | "remark-stringify": "^9.0.1", 467 | "repeat-string": "^1.6.1", 468 | "require-from-string": "^2.0.2", 469 | "requires-port": "^1.0.0", 470 | "resolve": "^1.22.1", 471 | "resolve-alpn": "^1.2.1", 472 | "resolve-from": "^5.0.0", 473 | "responselike": "^2.0.1", 474 | "restore-cursor": "^3.1.0", 475 | "retry": "^0.12.0", 476 | "reusify": "^1.0.4", 477 | "rimraf": "^3.0.2", 478 | "run-parallel": "^1.2.0", 479 | "safe-buffer": "^5.2.1", 480 | "safe-regex-test": "^1.0.0", 481 | "safer-buffer": "^2.1.2", 482 | "saxes": "^6.0.0", 483 | "semver": "^7.3.8", 484 | "semver-diff": "^3.1.1", 485 | "set-blocking": "^2.0.0", 486 | "setimmediate": "^1.0.5", 487 | "setprototypeof": "^1.2.0", 488 | "shebang-command": "^2.0.0", 489 | "shebang-regex": "^3.0.0", 490 | "side-channel": "^1.0.4", 491 | "signal-exit": "^3.0.7", 492 | "simple-concat": "^1.0.1", 493 | "simple-get": "^3.1.1", 494 | "simple-swizzle": "^0.2.2", 495 | "slash": "^3.0.0", 496 | "slice-ansi": "^4.0.0", 497 | "smart-buffer": "^4.2.0", 498 | "socks": "^2.7.1", 499 | "socks-proxy-agent": "^7.0.0", 500 | "source-map": "^0.6.1", 501 | "source-map-js": "^1.0.2", 502 | "spdx-correct": "^3.1.1", 503 | "spdx-exceptions": "^2.3.0", 504 | "spdx-expression-parse": "^3.0.1", 505 | "spdx-license-ids": "^3.0.12", 506 | "specificity": "^0.4.1", 507 | "sprintf-js": "^1.0.3", 508 | "ssri": "^9.0.1", 509 | "statuses": "^2.0.1", 510 | "string_decoder": "^1.3.0", 511 | "string-width": "^4.2.3", 512 | "string.prototype.trimend": "^1.0.6", 513 | "string.prototype.trimstart": "^1.0.6", 514 | "strip-ansi": "^6.0.1", 515 | "strip-bom": "^3.0.0", 516 | "strip-final-newline": "^2.0.0", 517 | "strip-indent": "^3.0.0", 518 | "strip-json-comments": "^2.0.1", 519 | "strnum": "^1.0.5", 520 | "strtok3": "^6.3.0", 521 | "style-search": "^0.1.0", 522 | "stylelint-config-recommended": "^4.0.0", 523 | "sugarss": "^2.0.0", 524 | "supports-color": "^7.2.0", 525 | "supports-preserve-symlinks-flag": "^1.0.0", 526 | "svg-tags": "^1.0.0", 527 | "symbol-tree": "^3.2.4", 528 | "table": "^6.8.1", 529 | "tar": "^6.1.13", 530 | "tar-fs": "^2.1.1", 531 | "tar-stream": "^2.2.0", 532 | "text-table": "^0.2.0", 533 | "through": "^2.3.8", 534 | "to-fast-properties": "^2.0.0", 535 | "to-readable-stream": "^1.0.0", 536 | "to-regex-range": "^5.0.1", 537 | "toidentifier": "^1.0.1", 538 | "token-types": "^4.2.1", 539 | "tough-cookie": "^4.1.2", 540 | "tr46": "^3.0.0", 541 | "trim-newlines": "^3.0.1", 542 | "trough": "^1.0.5", 543 | "tsconfig-paths": "^3.14.1", 544 | "tslib": "^2.5.0", 545 | "tsutils": "^3.21.0", 546 | "type-check": "^0.4.0", 547 | "type-fest": "^0.20.2", 548 | "typed-array-length": "^1.0.4", 549 | "typedarray-to-buffer": "^3.1.5", 550 | "typescript": "^4.9.5", 551 | "unbox-primitive": "^1.0.2", 552 | "unbzip2-stream": "^1.4.3", 553 | "unified": "^9.2.2", 554 | "unique-filename": "^2.0.1", 555 | "unique-slug": "^3.0.0", 556 | "unique-string": "^2.0.0", 557 | "unist-util-find-all-after": "^3.0.2", 558 | "unist-util-is": "^4.1.0", 559 | "unist-util-stringify-position": "^2.0.3", 560 | "universalify": "^2.0.0", 561 | "unpipe": "^1.0.0", 562 | "update-browserslist-db": "^1.0.10", 563 | "update-notifier": "^5.1.0", 564 | "uri-js": "^4.4.1", 565 | "url-parse": "^1.5.10", 566 | "url-parse-lax": "^3.0.0", 567 | "util-deprecate": "^1.0.2", 568 | "v8-compile-cache": "^2.3.0", 569 | "validate-npm-package-license": "^3.0.4", 570 | "validate-npm-package-name": "^4.0.0", 571 | "vfile": "^4.2.1", 572 | "vfile-message": "^2.0.4", 573 | "vm2": "^3.9.14", 574 | "w3c-xmlserializer": "^4.0.0", 575 | "wcwidth": "^1.0.1", 576 | "webidl-conversions": "^7.0.0", 577 | "whatwg-encoding": "^2.0.0", 578 | "whatwg-mimetype": "^3.0.0", 579 | "whatwg-url": "^11.0.0", 580 | "which": "^2.0.2", 581 | "which-boxed-primitive": "^1.0.2", 582 | "which-typed-array": "^1.1.9", 583 | "wide-align": "^1.1.5", 584 | "widest-line": "^3.1.0", 585 | "word-wrap": "^1.2.3", 586 | "wrap-ansi": "^7.0.0", 587 | "wrappy": "^1.0.2", 588 | "write-file-atomic": "^3.0.3", 589 | "ws": "^8.12.0", 590 | "xdg-basedir": "^4.0.0", 591 | "xml-name-validator": "^4.0.0", 592 | "xmlchars": "^2.2.0", 593 | "xregexp": "^2.0.0", 594 | "yallist": "^4.0.0", 595 | "yaml": "^1.10.2", 596 | "yargs-parser": "^20.2.9", 597 | "yauzl": "^2.10.0", 598 | "zwitch": "^1.0.5" 599 | }, 600 | "scripts": { 601 | "test": "echo \"Error: no test specified\" && exit 1" 602 | }, 603 | "repository": { 604 | "type": "git", 605 | "url": "git+https://github.com/HERMON-1995/HTML-CSS-JavaScript-capstone-project.git" 606 | }, 607 | "keywords": [], 608 | "author": "", 609 | "license": "ISC", 610 | "bugs": { 611 | "url": "https://github.com/HERMON-1995/HTML-CSS-JavaScript-capstone-project/issues" 612 | }, 613 | "homepage": "https://github.com/HERMON-1995/HTML-CSS-JavaScript-capstone-project#readme" 614 | } 615 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | width: 100%; 4 | } 5 | 6 | body { 7 | padding: 0; 8 | } 9 | 10 | * { 11 | margin: 0; 12 | padding: 0; 13 | text-decoration: none; 14 | } 15 | 16 | .header { 17 | background-image: url(./images/headerwhite-technology-background_52683-31443.webp); 18 | background-size: cover; 19 | background-repeat: no-repeat; 20 | background-attachment: fixed; 21 | min-height: 600px; 22 | } 23 | 24 | .top { 25 | padding: 5px 150px; 26 | display: none; 27 | justify-content: flex-end; 28 | align-items: center; 29 | gap: 20px; 30 | background-color: #272a31; 31 | color: white; 32 | height: 40px; 33 | } 34 | 35 | .top .facebook { 36 | width: 55px; 37 | height: 55px; 38 | } 39 | 40 | .top .twitter { 41 | width: 35px; 42 | height: 35px; 43 | border-radius: 10px; 44 | } 45 | 46 | .top ul { 47 | display: block; 48 | list-style-type: disc; 49 | margin-block-start: 1em; 50 | margin-block-end: 1em; 51 | margin-inline-start: 0; 52 | margin-inline-end: 0; 53 | padding-inline-start: 40px; 54 | } 55 | 56 | .top ul li { 57 | list-style-type: none; 58 | display: inline-block; 59 | padding: 0 5px; 60 | } 61 | 62 | .mobile-nav a { 63 | display: flex; 64 | justify-content: center; 65 | margin-bottom: 30px; 66 | font-weight: 300; 67 | font-family: 'Lato', sans-serif; 68 | font-size: 25px; 69 | line-height: 44px; 70 | color: #fff; 71 | } 72 | 73 | .top ul li a { 74 | text-decoration: none; 75 | color: white; 76 | } 77 | 78 | .hamburger { 79 | width: 35px; 80 | margin-left: 25px; 81 | padding-top: 20px; 82 | cursor: pointer; 83 | appearance: none; 84 | background: none; 85 | outline: none; 86 | border: none; 87 | position: relative; 88 | display: block; 89 | } 90 | 91 | .hamburger .bar, 92 | .hamburger::after, 93 | .hamburger::before { 94 | content: ''; 95 | display: block; 96 | width: 100%; 97 | height: 6px; 98 | background-color: #272a31; 99 | margin-bottom: 6px; 100 | transition: 0.4s; 101 | } 102 | 103 | .hamburger.x-color { 104 | background-color: #fff; 105 | border-radius: 8px; 106 | height: 45px; 107 | } 108 | 109 | .hamburger.is-active::before { 110 | transform: rotate(-45deg) translate(0, 1px); 111 | } 112 | 113 | .hamburger.is-active::after { 114 | transform: rotate(45deg) translate(-15px, -16px); 115 | } 116 | 117 | .hamburger.is-active .bar { 118 | opacity: 0; 119 | } 120 | 121 | .ham-cont.color { 122 | background-color: #272a31; 123 | } 124 | 125 | .desktop-nav { 126 | display: none; 127 | } 128 | 129 | .mobile-nav.is-active { 130 | position: absolute; 131 | min-height: 100vh; 132 | width: 100%; 133 | z-index: 98; 134 | display: block; 135 | padding-top: 150px; 136 | background: #272a31; 137 | right: 0; 138 | } 139 | 140 | .mobile-nav a:hover { 141 | color: #ec5242; 142 | } 143 | 144 | .mobile-nav { 145 | display: none; 146 | } 147 | 148 | .welcome-par { 149 | color: #ec5242; 150 | font-size: 30px; 151 | padding-left: 25px; 152 | padding-top: 55px; 153 | } 154 | 155 | h1 { 156 | color: #ec5242; 157 | font-size: 50px; 158 | font-weight: 800; 159 | line-height: 1em; 160 | padding-top: 10px; 161 | padding-left: 25px; 162 | } 163 | 164 | .long-par-cont { 165 | border: 3px solid white; 166 | margin-left: 15px; 167 | background-color: #f6f6f6; 168 | margin-top: 50px; 169 | } 170 | 171 | .long-par { 172 | display: block; 173 | margin-block-start: 1em; 174 | margin-block-end: 1em; 175 | margin-inline-start: 0; 176 | margin-inline-end: 0; 177 | font-family: 'Lato', sans-serif; 178 | font-weight: 400; 179 | font-size: 17px; 180 | padding: 10px; 181 | color: #272a31; 182 | text-align: center; 183 | } 184 | 185 | .h2-header { 186 | padding-left: 25px; 187 | padding-top: 10px; 188 | font-size: 30px; 189 | font-weight: 800; 190 | letter-spacing: 0; 191 | } 192 | 193 | .h2-span { 194 | font-size: 18px; 195 | font-weight: 600; 196 | font-family: 'Lato', sans-serif; 197 | letter-spacing: 0; 198 | } 199 | 200 | .location-par { 201 | font-family: 'Lato', sans-serif; 202 | font-size: 20px; 203 | color: #272a31; 204 | font-weight: 800; 205 | padding-left: 25px; 206 | padding-top: 10px; 207 | } 208 | 209 | .section1-title { 210 | font-family: 'Lato', sans-serif; 211 | font-size: 35px; 212 | } 213 | 214 | div { 215 | display: block; 216 | } 217 | 218 | .main-courses { 219 | background-image: url(./images/last-background-technology_1142-9120.webp); 220 | background-size: contain; 221 | color: #d3d3d3; 222 | padding: 15px; 223 | margin: auto; 224 | display: flex; 225 | flex-direction: column; 226 | align-items: center; 227 | } 228 | 229 | .title-line { 230 | display: block; 231 | width: 50px; 232 | height: 2px; 233 | margin: 10px auto; 234 | background-color: #ec5242; 235 | } 236 | 237 | .course { 238 | display: flex; 239 | gap: 30px; 240 | max-width: 700px; 241 | margin-left: auto; 242 | margin-right: auto; 243 | background-color: rgba(255, 255, 255, 0.1); 244 | margin-top: 15px; 245 | padding: 10px; 246 | font-family: 'Lato', sans-serif; 247 | align-items: center; 248 | } 249 | 250 | .course:hover { 251 | border: 1px solid #fff; 252 | } 253 | 254 | .html-img { 255 | width: 40px; 256 | height: 40px; 257 | object-fit: cover; 258 | } 259 | 260 | .css-img { 261 | width: 40px; 262 | height: 40px; 263 | object-fit: cover; 264 | } 265 | 266 | .javascript-img { 267 | width: 40px; 268 | height: 40px; 269 | object-fit: cover; 270 | } 271 | 272 | .react-img { 273 | width: 50px; 274 | height: 40px; 275 | object-fit: cover; 276 | } 277 | 278 | .git-img { 279 | width: 40px; 280 | height: 40px; 281 | border-radius: 15px; 282 | object-fit: cover; 283 | } 284 | 285 | .redux-img { 286 | width: 40px; 287 | height: 40px; 288 | object-fit: cover; 289 | } 290 | 291 | .course h3 { 292 | color: #ec5242; 293 | font-family: 'Lato', sans-serif; 294 | } 295 | 296 | .course p { 297 | color: #fff; 298 | font-family: 'Lato', sans-serif; 299 | font-size: 20px; 300 | } 301 | 302 | .join-btn { 303 | font-family: 'Lato', sans-serif; 304 | font-size: 23px; 305 | cursor: pointer; 306 | background-color: #ec5242; 307 | color: white; 308 | border: none; 309 | padding: 20px 35px; 310 | max-width: 400px; 311 | height: 90px; 312 | margin-top: 50px; 313 | margin-bottom: 30px; 314 | margin-left: auto; 315 | margin-right: auto; 316 | } 317 | 318 | .featured-teachers { 319 | display: flex; 320 | flex-direction: column; 321 | align-items: center; 322 | padding: 40px 15px; 323 | font-family: 'Lato', sans-serif; 324 | font-size: 23px; 325 | color: #272a31; 326 | } 327 | 328 | .teachers { 329 | padding-top: 30px; 330 | } 331 | 332 | .teacher { 333 | display: flex; 334 | flex-direction: row; 335 | gap: 20px; 336 | margin-top: 20px; 337 | max-width: 600px; 338 | } 339 | 340 | .person-text h3 { 341 | font-weight: 700; 342 | letter-spacing: -1px; 343 | color: #272a31; 344 | font-size: 30px; 345 | } 346 | 347 | .person-text h4 { 348 | font-size: 19px; 349 | padding-top: 10px; 350 | color: #ec5242; 351 | font-style: italic; 352 | letter-spacing: 0; 353 | } 354 | 355 | .teacher-line { 356 | margin: 15px 0; 357 | display: block; 358 | width: 35px; 359 | height: 2px; 360 | background-color: #d3d3d3; 361 | } 362 | 363 | .person-text p { 364 | font-size: 17px; 365 | } 366 | 367 | .one-teacher img { 368 | background-image: url(./images/photo-background.jpg); 369 | background-repeat: no-repeat; 370 | background-size: 110px 110px; 371 | background-position: -20px -20px; 372 | padding-left: 15px; 373 | padding-top: 15px; 374 | object-fit: cover; 375 | } 376 | 377 | .partner { 378 | background-color: #272a31; 379 | padding: 40px; 380 | color: white; 381 | } 382 | 383 | .partner-title { 384 | text-align: center; 385 | font-family: 'Lato', sans-serif; 386 | font-size: 35px; 387 | letter-spacing: 1px; 388 | } 389 | 390 | .social-list { 391 | display: flex; 392 | flex-direction: row; 393 | justify-content: center; 394 | align-items: center; 395 | padding-top: 40px; 396 | gap: 40px; 397 | flex-wrap: wrap; 398 | width: 80%; 399 | margin: auto; 400 | } 401 | 402 | .social-list a img { 403 | width: 60px; 404 | border-radius: 30px; 405 | } 406 | 407 | img.vimeo { 408 | width: 200px; 409 | height: 100px; 410 | border-radius: 30px; 411 | } 412 | 413 | footer { 414 | font-family: 'Lato', sans-serif; 415 | color: #272a31; 416 | } 417 | 418 | .foot-container { 419 | gap: 20px; 420 | padding: 20px; 421 | justify-content: center; 422 | display: flex; 423 | flex-direction: row; 424 | } 425 | 426 | .left-cont h3 { 427 | font-size: 18px; 428 | } 429 | 430 | .right-cont p { 431 | font-size: 11px; 432 | padding-top: 10px; 433 | padding-left: 25px; 434 | } 435 | 436 | @media screen and (min-width: 768px) { 437 | .header { 438 | min-height: 800px; 439 | } 440 | 441 | .hamburger { 442 | display: none; 443 | } 444 | 445 | .mobile-nav { 446 | display: none; 447 | } 448 | 449 | .desktop-nav { 450 | display: flex; 451 | justify-content: space-between; 452 | padding: 15px 5vw; 453 | background-color: #fff; 454 | } 455 | 456 | .course img { 457 | border-radius: 10px; 458 | } 459 | 460 | .desktop-nav a img { 461 | width: 200px; 462 | height: 60px; 463 | border-radius: 50px; 464 | margin-right: 5px; 465 | } 466 | 467 | .desktop-nav a img:hover { 468 | border: 2px solid #ec5242; 469 | } 470 | 471 | .desktop-nav ul { 472 | padding-top: 5px; 473 | display: flex; 474 | list-style-type: none; 475 | gap: 15px; 476 | align-items: center; 477 | } 478 | 479 | .desktop-nav ul li a { 480 | text-decoration: none; 481 | font-family: 'Lato', sans-serif; 482 | color: #272a31; 483 | font-size: 18px; 484 | } 485 | 486 | .desktop-nav ul li .connected-div { 487 | width: 150px; 488 | height: 30px; 489 | border: 5px solid #ec5242; 490 | display: flex; 491 | align-items: center; 492 | } 493 | 494 | .desktop-nav .connected a { 495 | color: #ec5242; 496 | padding: 5px 5px; 497 | font-size: 20px; 498 | } 499 | 500 | .desktop-nav ul li a:hover { 501 | color: #ec5242; 502 | } 503 | 504 | .top { 505 | display: flex; 506 | } 507 | 508 | .introduction h1 { 509 | font-size: 100px; 510 | line-height: 75px; 511 | padding-left: 150px; 512 | } 513 | 514 | .introduction .welcome-par { 515 | font-size: 50px; 516 | padding-left: 150px; 517 | } 518 | 519 | .long-par-cont { 520 | margin-left: 150px; 521 | margin-right: 500px; 522 | } 523 | 524 | .long-par-cont .long-par { 525 | display: flex; 526 | margin-left: 20px; 527 | max-width: 90%; 528 | align-self: flex-start; 529 | line-height: 18px; 530 | padding: 5px 5px; 531 | } 532 | 533 | .introduction h2 { 534 | padding-top: 0; 535 | padding-bottom: 0; 536 | padding-left: 150px; 537 | font-size: 50px; 538 | } 539 | 540 | .introduction .location-par { 541 | padding-top: 0; 542 | padding-left: 150px; 543 | font-size: 20px; 544 | } 545 | 546 | .courses { 547 | margin-inline: auto; 548 | display: flex; 549 | flex-direction: row; 550 | width: 80%; 551 | gap: 4px; 552 | } 553 | 554 | .course { 555 | display: flex; 556 | flex-direction: column; 557 | justify-content: center; 558 | text-align: center; 559 | padding: 20px 15px; 560 | } 561 | 562 | .course p { 563 | font-size: 18px; 564 | } 565 | 566 | .teachers { 567 | display: flex; 568 | flex-direction: row; 569 | width: 80%; 570 | flex-wrap: wrap; 571 | gap: 50px; 572 | margin-inline: auto; 573 | } 574 | 575 | .teacher { 576 | margin-inline: auto; 577 | display: flex; 578 | max-width: 40%; 579 | } 580 | } 581 | --------------------------------------------------------------------------------