├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── LICENSE ├── README.md ├── about.css ├── about.html ├── images ├── backend-icon.png ├── bootcamp1.jpg ├── bootcamp2.jpg ├── cloudflare_light.png ├── collapse-arrow.png ├── cross-icon-black.png ├── cross-icon.png ├── expand-arrow.png ├── facebook-icon.png ├── favicon.png ├── front-end-icon.png ├── git-github-icon.png ├── github.png ├── google.png ├── hero-bg-reverse.png ├── hero-bg.png ├── hero-title-bg.jpg ├── join-the-dot-icon.png ├── linekdin-icon.png ├── linkedin.png ├── logo-big.png ├── logo-dark-grey.png ├── logo-grey.png ├── logo.png ├── menu-icon.png ├── meta_light.png ├── netflix.png ├── program.png ├── raihan.jpg ├── tiles.png ├── twttier-icon.png ├── uber_light.png └── web-icon.png ├── index.html ├── js ├── app.js └── hoempage.js ├── 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 | # .gitignore 2 | node_modules/ -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Abu Raihan 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 | # Code With Raihan - Full stack Bootcamp 2 | 3 | > This is A simple but effective and responsive (mobile first) Microverse Capstone Project 1. 4 | > 5 | > The theme about this project is a online full stack webdevelopment bootcamp. 6 | > 7 | 8 | ### ***Live Preview of my project***. 9 | >

10 | >

11 | 12 | ## Built With 13 | 14 | - Html 15 | - CSS 16 | - Javascript 17 | - Technologies used 18 | I use nodejs for linting the project and github action for automative linter check. 19 | 20 | ## Live Demo 21 | [Live Demo Link](https://raihan2bd.github.io/code-with-raihan/) 22 | 23 | ## Getting Started 24 | 25 | Please follow the instructions to clone my repo 26 | 27 | To get a local copy, follow these simple example steps. 28 | 29 | Clone this repository or download the Zip folder: 30 | 31 | ```sh 32 | git clone https://github.com/raihan2bd/code-with-raihan.git 33 | ``` 34 | 35 | Navigate to the location of the folder in your machine: 36 | 37 | you@your-Pc-name:~$ cd 38 | Press Enter to navigate to your local clone. 39 | 40 | and type this command in your terminal to download npm package (make sure you have installed the [nodejs](https://nodejs.org)) 41 | ```sh 42 | npm install 43 | ``` 44 | 45 | To get a local copy up and running follow these simple example steps. 46 | 47 | 👤 **Author** 48 | 49 | - GitHub: [@githubhandle](https://github.com/raihan2bd) 50 | - Twitter: [@twitterhandle](https://twitter.com/raihan2bd) 51 | - LinkedIn: [LinkedIn](https://linkedin.com/in/raihan2bd) 52 | 53 | 54 | 55 | ## 🤝 Contributing 56 | 57 | Contributions, issues, and feature requests are welcome! 58 | 59 | Feel free to check the [issues page](../../issues/). 60 | 61 | ## Show your support 62 | 63 | Give a ⭐️ if you like this project! 64 | 65 | ## Acknowledgments 66 | 67 | - Inspired by original design for Creative Commons by Cindy Shin on [Behance](https://www.behance.net/gallery/29845175/CC-Global-Summit-2015) 68 | - Without Microverse this project is not compleated by me at all and thanks to Microverse for giving me this wanderfull oppertunity. 69 | 70 | ## 📝 License 71 | 72 | This project is [MIT](LICENSE) licensed. 73 | -------------------------------------------------------------------------------- /about.css: -------------------------------------------------------------------------------- 1 | /* Headline Section */ 2 | .about-headline { 3 | background: url('./images/hero-bg-reverse.png'); 4 | background-repeat: no-repeat; 5 | background-size: cover; 6 | min-height: 60vh; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | flex-direction: column; 11 | background-color: #d6d6d6; 12 | padding: 20px; 13 | overflow: hidden; 14 | } 15 | 16 | .headline-block { 17 | max-width: 100%; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | flex-direction: column; 22 | margin-top: 70px; 23 | gap: 10px; 24 | } 25 | 26 | .headline-title { 27 | font-size: 2.5rem; 28 | font-weight: 900; 29 | color: #ec5242; 30 | margin: 20px 0; 31 | padding: 20px; 32 | } 33 | 34 | .headline-details { 35 | background: #fff; 36 | color: #272a31; 37 | padding: 25px; 38 | max-width: 100%; 39 | border: 1px solid #d6d6d6; 40 | } 41 | 42 | .headline-block h5 { 43 | font-weight: normal; 44 | color: #272a31; 45 | } 46 | 47 | address { 48 | text-decoration: underline; 49 | font-style: normal; 50 | font-weight: bold; 51 | margin-bottom: 20px; 52 | } 53 | 54 | /* About Logo */ 55 | .about-logo { 56 | display: flex; 57 | justify-content: center; 58 | align-items: center; 59 | padding: 25px; 60 | background: #fff; 61 | flex-direction: column; 62 | border-bottom: 1px solid #d6d6d6; 63 | } 64 | 65 | .logo-block { 66 | max-width: 800px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | align-items: center; 71 | gap: 25px; 72 | } 73 | 74 | .logo-block .program-title { 75 | color: #272a31; 76 | } 77 | 78 | .logo-img { 79 | padding: 35px; 80 | border: 1px solid #d6d6d6; 81 | margin-bottom: 25px; 82 | } 83 | 84 | .logo-img img { 85 | width: 100%; 86 | max-width: 500px; 87 | } 88 | 89 | /* Past Section */ 90 | 91 | .about-past { 92 | display: flex; 93 | flex-direction: column; 94 | justify-content: center; 95 | align-items: center; 96 | background: #fff; 97 | padding: 30px 20px; 98 | } 99 | 100 | .about-past .program-title { 101 | color: #272a31; 102 | } 103 | 104 | .about-past-details { 105 | margin: 20px 0; 106 | padding: 15px; 107 | } 108 | 109 | .past-bootcamp { 110 | display: flex; 111 | flex-direction: column; 112 | max-width: 800px; 113 | justify-content: center; 114 | align-items: center; 115 | gap: 20px; 116 | list-style: none; 117 | } 118 | 119 | .past-bootcamp-item { 120 | position: relative; 121 | overflow: hidden; 122 | } 123 | 124 | .past-bootcamp-item img { 125 | width: 100%; 126 | } 127 | 128 | .bootcamp-info { 129 | display: flex; 130 | justify-content: center; 131 | align-items: center; 132 | flex-direction: column; 133 | position: absolute; 134 | width: 100%; 135 | height: 100%; 136 | top: 0; 137 | left: 0; 138 | color: #fff; 139 | text-align: center; 140 | background: rgba(216, 34, 34, 0.7); 141 | padding: 20px; 142 | transition: all 0.1s ease-in-out; 143 | } 144 | 145 | .bootcamp-year { 146 | margin-bottom: 10px; 147 | font-size: 2rem; 148 | font-weight: 900; 149 | } 150 | 151 | .bootcamp-info p { 152 | font-size: 1.2rem; 153 | line-height: 22px; 154 | font-weight: 500; 155 | } 156 | 157 | .bootcamp-info:hover { 158 | transform: scale(1.3); 159 | background: rgba(216, 34, 34, 0.8); 160 | } 161 | 162 | .d-footer { 163 | display: none !important; 164 | } 165 | 166 | @media screen and (min-width: 768px) { 167 | .headline-block { 168 | max-width: 800px; 169 | display: flex; 170 | justify-content: center; 171 | align-items: center; 172 | flex-direction: column; 173 | margin-top: 70px; 174 | gap: 10px; 175 | } 176 | 177 | .headline-title { 178 | font-size: 4rem; 179 | } 180 | 181 | .past-bootcamp { 182 | flex-direction: row; 183 | flex-wrap: wrap; 184 | } 185 | 186 | .past-bootcamp-item { 187 | max-width: 47%; 188 | } 189 | 190 | .black-footer { 191 | background: #272a31; 192 | color: #d6d6d6; 193 | } 194 | 195 | .m-footer { 196 | display: none; 197 | } 198 | 199 | .d-footer { 200 | display: block !important; 201 | } 202 | } 203 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Code With Raihan 14 | 15 | 16 | 17 |
18 |
19 |
    20 |
  • 21 | Github 22 |
    • 23 |
  • 24 | Linkedin 25 |
    • 26 |
  • 27 | English 28 |
    • 29 |
  • 30 | Mypage 31 |
    • 32 |
  • 33 | Logout 34 |
    • 35 |
36 |
37 |
78 | 79 | 80 |
81 | 82 | 83 |
84 |
85 |

Full Stack WebDevelopment
Bootcamp 2023

86 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus numquam sint laborum itaque quis aut recusandae dolores corporis nesciunt pariatur esse, veritatis, aperiam deserunt perferendis dignissimos facilis! Aut, saepe pariatur?

87 |
Please Contack us if you need any furthur information about this Bootcamp
88 |
example@example.com
89 |
90 |
91 | 92 | 93 | 103 | 104 | 105 |
106 |

See Our Past Bootcamp Activities

107 |

Take a look our past Bootcamps first day assembly zoom call.

108 |
    109 |
  • 110 | bootcamp 2022 111 |
    112 |

    2022

    113 |

    Full-Stack Webdevelopment
    Bootcamp January 2022

    114 |
    115 |
    • 116 |
  • 117 | bootcamp 2022 118 |
    119 |

    2021

    120 |

    Full-Stack Webdevelopment
    Bootcamp January 2021

    121 |
    122 |
    • 123 |
124 |
125 | 126 |
127 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /images/backend-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/backend-icon.png -------------------------------------------------------------------------------- /images/bootcamp1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/bootcamp1.jpg -------------------------------------------------------------------------------- /images/bootcamp2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/bootcamp2.jpg -------------------------------------------------------------------------------- /images/cloudflare_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/cloudflare_light.png -------------------------------------------------------------------------------- /images/collapse-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/collapse-arrow.png -------------------------------------------------------------------------------- /images/cross-icon-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/cross-icon-black.png -------------------------------------------------------------------------------- /images/cross-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/cross-icon.png -------------------------------------------------------------------------------- /images/expand-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/expand-arrow.png -------------------------------------------------------------------------------- /images/facebook-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/facebook-icon.png -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/favicon.png -------------------------------------------------------------------------------- /images/front-end-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/front-end-icon.png -------------------------------------------------------------------------------- /images/git-github-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/git-github-icon.png -------------------------------------------------------------------------------- /images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/github.png -------------------------------------------------------------------------------- /images/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/google.png -------------------------------------------------------------------------------- /images/hero-bg-reverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/hero-bg-reverse.png -------------------------------------------------------------------------------- /images/hero-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/hero-bg.png -------------------------------------------------------------------------------- /images/hero-title-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/hero-title-bg.jpg -------------------------------------------------------------------------------- /images/join-the-dot-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/join-the-dot-icon.png -------------------------------------------------------------------------------- /images/linekdin-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/linekdin-icon.png -------------------------------------------------------------------------------- /images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/linkedin.png -------------------------------------------------------------------------------- /images/logo-big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/logo-big.png -------------------------------------------------------------------------------- /images/logo-dark-grey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/logo-dark-grey.png -------------------------------------------------------------------------------- /images/logo-grey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/logo-grey.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/logo.png -------------------------------------------------------------------------------- /images/menu-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/menu-icon.png -------------------------------------------------------------------------------- /images/meta_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/meta_light.png -------------------------------------------------------------------------------- /images/netflix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/netflix.png -------------------------------------------------------------------------------- /images/program.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/program.png -------------------------------------------------------------------------------- /images/raihan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/raihan.jpg -------------------------------------------------------------------------------- /images/tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/tiles.png -------------------------------------------------------------------------------- /images/twttier-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/twttier-icon.png -------------------------------------------------------------------------------- /images/uber_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/uber_light.png -------------------------------------------------------------------------------- /images/web-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raihan2bd/code-with-raihan/6dc226b8bd51a76c08b2bf84b92e70f01c1b2960/images/web-icon.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Code With Raihan 13 | 14 | 15 | 16 |
17 |
18 |
    19 |
  • 20 | Github 21 |
    • 22 |
  • 23 | Linkedin 24 |
    • 25 |
  • 26 | English 27 |
    • 28 |
  • 29 | Mypage 30 |
    • 31 |
  • 32 | Logout 33 |
    • 34 |
35 |
36 |
77 | 78 | 79 |
80 | 81 |
82 |
83 |

"Hello Tech Lovers"

84 |

BECOME A PROFESSIONAL FULLSTACK DEVELOPER

85 |

Boost your career joining our highly professional fullstack Bootcamp and start a remote international fulltime job. Through out this Bootcamp your learning path will be practical and beginner friendly.

86 |

Our Next Bootcamp Will Start Soon!

87 |

Our Next Bootcamp registration is open so hurry up!

88 |
89 |
90 | 91 | 92 |
93 |

Main Program

94 |
    95 |
  • 96 |
    97 | Web Introduction 98 |
    99 |
    Intro
    100 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla culpa similique minima natus rem odit!

    101 |
    • 102 |
  • 103 |
    104 | git and github 105 |
    106 |
    Git & Github
    107 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla culpa similique minima natus rem odit!

    108 |
    • 109 |
  • 110 |
    111 | frontend 112 |
    113 |
    Frontend
    114 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla culpa similique minima natus rem odit!

    115 |
    • 116 |
  • 117 |
    118 | backend 119 |
    120 |
    Backend
    121 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla culpa similique minima natus rem odit!

    122 |
    • 123 |
  • 124 |
    125 | join the dot 126 |
    127 |
    Join The Dot
    128 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla culpa similique minima natus rem odit!

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

Feature Tutors

137 |
    138 |
139 |
    140 |
141 | 142 |
143 | 144 | 145 |
146 |

Our Sponser

147 |
    148 |
  • 149 | Google 150 |
    • 151 |
  • 152 | Netflix 153 |
    • 154 |
  • 155 | Meta 156 |
    • 157 |
  • 158 | Cloudflare 159 |
    • 160 |
  • 161 | Ubar 162 |
    • 163 |
164 |
165 |
166 |
167 | X 168 |

Modal Title

169 |

The site is under construction and This section will added soon!

170 |
171 |
172 |
173 | 181 | 182 | 183 | 184 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | // Shortcut function for dom manupulation 2 | const gElem = (x) => document.querySelector(x); 3 | const gElemAll = (x) => document.querySelectorAll(x); 4 | 5 | // Function for toggling class 6 | const toggleMnav = () => gElem('.m-nav').classList.toggle('df'); 7 | 8 | // Showing navigaioon item using toggle class 9 | const menu = gElem('.menu-icon'); 10 | menu.addEventListener('click', toggleMnav); 11 | 12 | // Add event listener on every nav; 13 | gElemAll('.m-nav .nav-link').forEach((item) => { 14 | item.addEventListener('click', toggleMnav); 15 | }); 16 | 17 | // Clossing mobile menu using cross icon 18 | gElem('.cross-icon').addEventListener('click', toggleMnav); 19 | 20 | // this peace of code is responsible for scroll spy 21 | const sections = document.querySelectorAll('section'); 22 | const navLinks = document.querySelectorAll('.nav-link'); 23 | window.onscroll = () => { 24 | sections.forEach((section) => { 25 | const top = window.scrollY; 26 | const offset = section.offsetTop - 200; 27 | const height = section.offsetHeight; 28 | const id = section.getAttribute('id'); 29 | if (top >= offset && top < height + offset) { 30 | navLinks.forEach((link) => { 31 | link.classList.remove('active'); 32 | document.querySelectorAll(`a[href*=${id}]`).forEach((item) => item.classList.add('active')); 33 | }); 34 | } 35 | }); 36 | }; -------------------------------------------------------------------------------- /js/hoempage.js: -------------------------------------------------------------------------------- 1 | // this function will toggle article modal 2 | const toggleModal = () => { 3 | document.querySelector('.modal-article').classList.toggle('df'); 4 | }; 5 | 6 | // selecting program btn a modal 7 | const seeMoreProgram = document.querySelectorAll('.btn-modal'); 8 | seeMoreProgram.forEach((btn) => { 9 | btn.addEventListener('click', toggleModal); 10 | }); 11 | 12 | // close article modal using cross button 13 | document.querySelector('.cross-modal').addEventListener('click', toggleModal); 14 | 15 | // Feature Turor Section 16 | 17 | // Fake Backend Tutor Data 18 | const tutorsData = [ 19 | { 20 | id: 'tutor1', 21 | profileImage: './images/raihan.jpg', 22 | name: 'Abu Raihan', 23 | position: 'Full Stack Engineer', 24 | description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cumque error earum minus aliquam obcaecati', 25 | }, 26 | { 27 | id: 'tutor2', 28 | profileImage: './images/raihan.jpg', 29 | name: 'Abu Raihan', 30 | position: 'Full Stack Engineer', 31 | description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cumque error earum minus aliquam obcaecati', 32 | }, 33 | { 34 | id: 'tutor3', 35 | profileImage: './images/raihan.jpg', 36 | name: 'Abu Raihan', 37 | position: 'Full Stack Engineer', 38 | description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cumque error earum minus aliquam obcaecati', 39 | }, 40 | { 41 | id: 'tutor4', 42 | profileImage: './images/raihan.jpg', 43 | name: 'Abu Raihan', 44 | position: 'Full Stack Engineer', 45 | description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cumque error earum minus aliquam obcaecati', 46 | }, 47 | { 48 | id: 'tutor5', 49 | profileImage: './images/raihan.jpg', 50 | name: 'Abu Raihan', 51 | position: 'Full Stack Engineer', 52 | description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cumque error earum minus aliquam obcaecati', 53 | }, 54 | { 55 | id: 'tutor6', 56 | profileImage: './images/raihan.jpg', 57 | name: 'Abu Raihan', 58 | position: 'Full Stack Engineer', 59 | description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cumque error earum minus aliquam obcaecati', 60 | }, 61 | 62 | ]; 63 | 64 | // Initialize pagination variables 65 | let currentPage = 1; 66 | const perpage = 3; 67 | 68 | // Selecting the More button from Feature Turor 69 | const seeMoreTutors = document.querySelector('.see-more-tutors'); 70 | 71 | // This function is resposible for Update Tutor List 72 | const updateTutorDom = (data, hasPage, d = false) => { 73 | let mobileTutor = document.querySelector('#m-tutor-group'); 74 | 75 | // check if this is for desktop or not 76 | if (d) { 77 | mobileTutor = document.querySelector('#d-tutor-group'); 78 | } 79 | 80 | // hide or show the more button when Next page is not available 81 | if (!hasPage && !d) { 82 | seeMoreTutors.classList.remove('df'); 83 | } else { 84 | seeMoreTutors.classList.add('df'); 85 | } 86 | 87 | // Iterate tutor data and appending on the dom 88 | data.forEach((item) => { 89 | const mobileTutorList = document.createElement('li'); 90 | mobileTutorList.id = item.id; 91 | mobileTutorList.className = 'tutor-list'; 92 | mobileTutorList.innerHTML = ` 93 |
94 | tiles 95 | ${item.name} 96 |
97 |
98 |

${item.name}

99 |
100 | ${item.position} 101 |
102 |

${item.description}

103 |
`; 104 | mobileTutor.append(mobileTutorList); 105 | }); 106 | }; 107 | 108 | // This function is responsible for updating the mobile feature data with pagination. 109 | const fecthTutorDataForMobile = (page = 1) => { 110 | currentPage = page; 111 | const hasPage = currentPage * perpage < tutorsData.length; 112 | const mobileTutorArr = []; 113 | if (perpage < tutorsData.length) { 114 | for ( 115 | let i = Math.abs(currentPage * perpage - perpage); 116 | i < currentPage * perpage && i <= tutorsData.length && i >= 0; i += 1) { 117 | mobileTutorArr.push(tutorsData[i]); 118 | } 119 | } 120 | 121 | // calling this function for update the dom 122 | updateTutorDom(mobileTutorArr, hasPage); 123 | }; 124 | 125 | // Add EventListener to More button and update dom 126 | seeMoreTutors.addEventListener('click', () => { 127 | if (currentPage * perpage < tutorsData.length) { 128 | fecthTutorDataForMobile(currentPage + 1); 129 | } else { 130 | seeMoreTutors.classList.remove('df'); 131 | } 132 | }); 133 | 134 | // Fetching Data for desktop 135 | const fecthTutorDataForDesktop = () => updateTutorDom(tutorsData, false, true); 136 | 137 | // Fetching dinamic data on the fly using this window objec 138 | window.onload = () => { 139 | fecthTutorDataForMobile(); 140 | fecthTutorDataForDesktop(); 141 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "code-with-raihan", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-eslint": "^10.1.0", 14 | "eslint": "^7.32.0", 15 | "eslint-config-airbnb-base": "^14.2.1", 16 | "eslint-plugin-import": "^2.26.0", 17 | "hint": "^7.1.3", 18 | "stylelint": "^13.13.1", 19 | "stylelint-config-standard": "^21.0.0", 20 | "stylelint-csstree-validator": "^1.9.0", 21 | "stylelint-scss": "^3.21.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | font-family: 'Lato', sans-serif; 10 | background: #d3d3d3; 11 | scroll-behavior: smooth; 12 | } 13 | 14 | a { 15 | text-decoration: none; 16 | } 17 | 18 | .dn { 19 | display: none; 20 | } 21 | 22 | .df { 23 | display: flex !important; 24 | } 25 | 26 | .db { 27 | display: block; 28 | } 29 | 30 | .dib { 31 | display: inline-block; 32 | } 33 | 34 | .primary-color { 35 | color: #ec5242; 36 | } 37 | 38 | .header { 39 | left: 0; 40 | top: 0; 41 | display: flex; 42 | position: fixed; 43 | flex-direction: column; 44 | min-height: 70px; 45 | align-items: center; 46 | width: 100%; 47 | z-index: 100; 48 | padding: 0 20px; 49 | justify-content: center; 50 | box-shadow: 0 3px 5px rgba(155, 155, 155, 0.3); 51 | background: rgba(255, 255, 255, 0.5); 52 | } 53 | 54 | .header-top { 55 | display: none; 56 | } 57 | 58 | /* Navigation Bar */ 59 | .navbar { 60 | width: 100%; 61 | max-width: 880px; 62 | display: flex; 63 | justify-content: flex-start; 64 | align-items: center; 65 | } 66 | 67 | .brand { 68 | padding-left: 25px; 69 | } 70 | 71 | .menu-icon { 72 | color: #272a31; 73 | width: 25px; 74 | height: 25px; 75 | align-self: center; 76 | cursor: pointer; 77 | } 78 | 79 | .menu-icon img { 80 | width: 100%; 81 | height: 100%; 82 | } 83 | 84 | .nav-item-group { 85 | display: flex; 86 | list-style: none; 87 | align-items: center; 88 | } 89 | 90 | .d-nav { 91 | display: none; 92 | } 93 | 94 | .m-nav { 95 | top: 0; 96 | left: 0; 97 | width: 100%; 98 | height: 100%; 99 | display: none; 100 | min-height: 100vh; 101 | position: absolute; 102 | flex-direction: column; 103 | background: rgba(236, 82, 66, 0.4); 104 | align-items: flex-start; 105 | padding: 25px; 106 | backdrop-filter: blur(5px); 107 | -webkit-backdrop-filter: blur(5px); 108 | } 109 | 110 | .m-nav.nav-item-group { 111 | padding-top: 35px; 112 | font-weight: bold; 113 | } 114 | 115 | .nav-link { 116 | width: 100%; 117 | display: block; 118 | margin: 10px; 119 | color: #fff; 120 | font-size: 20px; 121 | padding: 10px; 122 | transition: color 0.1s ease-in-out; 123 | } 124 | 125 | .nav-link:hover { 126 | color: #ec5242; 127 | } 128 | 129 | .nav-link:active { 130 | color: #d3d3d3; 131 | } 132 | 133 | .nav-box { 134 | border: 3px solid #ec5242; 135 | font-weight: bold; 136 | color: #ec5242 !important; 137 | } 138 | 139 | .nav-box:hover { 140 | background: #ec5242; 141 | color: #fff !important; 142 | } 143 | 144 | .nav-box:active { 145 | color: #ec5242 !important; 146 | background: #fff !important; 147 | } 148 | 149 | .active { 150 | color: #ec5242 !important; 151 | } 152 | 153 | .cross-icon { 154 | position: absolute; 155 | top: 25px; 156 | right: 25px; 157 | cursor: pointer; 158 | } 159 | 160 | /* End of navigation bar */ 161 | 162 | /* Main Container */ 163 | 164 | /* Hero Section */ 165 | .hero { 166 | display: flex; 167 | flex-direction: column; 168 | min-height: 90vh; 169 | background-size: cover; 170 | background-repeat: no-repeat; 171 | background-image: url("./images/hero-bg.png"); 172 | padding: 15px; 173 | align-items: center; 174 | } 175 | 176 | .hero-block { 177 | max-width: 800px; 178 | margin-top: 70px; 179 | } 180 | 181 | .hero-greeting { 182 | font-size: 20px; 183 | margin-bottom: 10px; 184 | } 185 | 186 | .hero-title { 187 | font-size: 2rem; 188 | font-weight: 900; 189 | background-image: url("./images/hero-title-bg.jpg"); 190 | background-size: cover; 191 | background-attachment: fixed; 192 | color: transparent; 193 | -webkit-background-clip: text; 194 | } 195 | 196 | .hero-details { 197 | background: #f7f7f7; 198 | border: 4px solid #fff; 199 | color: #272a31; 200 | line-height: 30px; 201 | padding: 15px; 202 | margin: 10px 0; 203 | text-align: justify; 204 | max-width: 800px; 205 | } 206 | 207 | .hero-deadline-title { 208 | font-size: 1.7rem; 209 | font-weight: 900; 210 | margin: 15px 0; 211 | color: #616161; 212 | } 213 | 214 | .hero-deadline-details { 215 | font-size: 16px; 216 | } 217 | 218 | /* Program Section */ 219 | .program { 220 | display: flex; 221 | flex-direction: column; 222 | align-items: center; 223 | justify-content: center; 224 | background-size: cover; 225 | background-repeat: no-repeat; 226 | background-image: url("./images/program.png"); 227 | } 228 | 229 | .program-title { 230 | margin: 35px; 231 | padding: 15px; 232 | color: #fff; 233 | text-align: center; 234 | } 235 | 236 | .program-title::after { 237 | content: ''; 238 | border-bottom: 3px solid #ec5242; 239 | display: block; 240 | padding-bottom: 10px; 241 | margin: 0 auto; 242 | width: 90px; 243 | } 244 | 245 | .program-group { 246 | display: flex; 247 | flex-direction: column; 248 | gap: 15px; 249 | width: 100%; 250 | list-style: none; 251 | } 252 | 253 | .program-item { 254 | display: flex; 255 | flex-direction: row; 256 | padding: 10px; 257 | background: rgba(255, 255, 255, 0.08); 258 | border: 2px solid transparent; 259 | transition: all 0.3s ease-in-out; 260 | margin: 0 15px; 261 | } 262 | 263 | .program-item:hover { 264 | transform: translateY(-3px); 265 | border-color: #fff; 266 | } 267 | 268 | .program-img { 269 | align-self: center; 270 | margin: 10px 0; 271 | width: 40px; 272 | } 273 | 274 | .program-img img { 275 | width: 100%; 276 | } 277 | 278 | .program-name { 279 | color: #ec5242; 280 | font-size: 1.1rem; 281 | font-weight: bold; 282 | text-align: center; 283 | margin: 10px 0; 284 | width: 40%; 285 | align-self: center; 286 | } 287 | 288 | .program-details { 289 | color: #fff; 290 | text-align: left; 291 | width: 50%; 292 | align-self: center; 293 | font-size: 14px; 294 | } 295 | 296 | .btn-program { 297 | width: 80%; 298 | text-decoration: none; 299 | color: #fff; 300 | background: #ec5242; 301 | margin: 35px 0; 302 | padding: 20px; 303 | border: 1px solid #ec5242; 304 | } 305 | 306 | .btn-program:hover { 307 | background: #fff; 308 | color: #ec5242; 309 | } 310 | 311 | .btn-program:active { 312 | background: #d6d6d6; 313 | color: #272a31; 314 | } 315 | 316 | /* Tutor Section */ 317 | .tutor { 318 | display: flex; 319 | flex-direction: column; 320 | justify-content: center; 321 | background: #fff; 322 | padding: 25px 0; 323 | } 324 | 325 | .tutor-title { 326 | color: #272a31; 327 | } 328 | 329 | .tutor-group { 330 | display: flex; 331 | list-style: none; 332 | max-width: 800px; 333 | flex-direction: column; 334 | margin: 0 auto; 335 | } 336 | 337 | .tutor-list { 338 | display: flex; 339 | padding: 10px; 340 | box-shadow: 0 3px 7px #d3d3d3; 341 | width: 100%; 342 | transition: all 0.2s ease-in-out; 343 | } 344 | 345 | .tutor-list:hover { 346 | background: #fcc2a7; 347 | } 348 | 349 | .tutor-img { 350 | position: relative; 351 | min-width: 120px; 352 | min-height: 120px; 353 | } 354 | 355 | .tiles { 356 | width: 65px; 357 | height: 65px; 358 | } 359 | 360 | .profile { 361 | width: 100px; 362 | height: 100px; 363 | position: absolute; 364 | left: 20px; 365 | top: 20px; 366 | transition: transform 0.2s ease-in-out; 367 | } 368 | 369 | .tutor-list:hover .profile { 370 | transform: translate(-20px, -20px); 371 | } 372 | 373 | .tutor-info { 374 | margin-left: 10px; 375 | flex: 1; 376 | align-self: center; 377 | } 378 | 379 | .tutor-position { 380 | margin: 10px 0; 381 | color: #ec5242; 382 | } 383 | 384 | .tutor-details { 385 | font-size: 14px; 386 | text-align: justify; 387 | } 388 | 389 | .see-more-tutors { 390 | padding: 10px 15px; 391 | border: 1px solid #272a31; 392 | transition: all 0.1s ease-in-out; 393 | display: none; 394 | justify-content: center; 395 | align-items: center; 396 | gap: 10px; 397 | margin: 30px 20px; 398 | font-size: 16px; 399 | cursor: pointer; 400 | } 401 | 402 | .see-more-tutors:hover { 403 | border-color: #ec5242; 404 | color: #ec5242; 405 | border-radius: 10px; 406 | } 407 | 408 | .see-more-tutors:active { 409 | background: #d3d3d3; 410 | } 411 | 412 | #d-tutor-group { 413 | display: none; 414 | } 415 | 416 | #m-tutor-group { 417 | display: flex; 418 | } 419 | 420 | /* Sponser Section */ 421 | .sponser { 422 | background: #272a31; 423 | color: #d3d3d3; 424 | padding: 10px; 425 | display: flex; 426 | align-items: center; 427 | justify-content: center; 428 | flex-direction: column; 429 | } 430 | 431 | .sponser > .program-title { 432 | color: #d3d3d3; 433 | } 434 | 435 | .sponser-item-group { 436 | display: flex; 437 | max-width: 800px; 438 | flex-wrap: wrap; 439 | justify-content: center; 440 | align-items: center; 441 | list-style: none; 442 | margin-bottom: 25px; 443 | } 444 | 445 | .sponser-item { 446 | margin: 10px; 447 | } 448 | 449 | .sponser-item img { 450 | width: 100%; 451 | max-width: 90px; 452 | } 453 | 454 | /* Modal Article */ 455 | .modal-article { 456 | display: none; 457 | background: rgba(39, 41, 48, 0.95); 458 | justify-content: center; 459 | align-items: center; 460 | height: 100%; 461 | position: fixed; 462 | width: 100%; 463 | top: 0; 464 | left: 0; 465 | bottom: 0; 466 | z-index: 200; 467 | } 468 | 469 | .modal-card { 470 | position: relative; 471 | display: flex; 472 | min-height: 50vh; 473 | min-width: 50vw; 474 | background: #fff; 475 | flex-direction: column; 476 | gap: 20px; 477 | border-radius: 20px; 478 | margin: 10px; 479 | } 480 | 481 | .cross-modal { 482 | top: 20px; 483 | right: 20px; 484 | padding: 5px; 485 | cursor: pointer; 486 | position: absolute; 487 | border-radius: 3px; 488 | background: #f00; 489 | } 490 | 491 | .cross-modal:hover { 492 | background: #ec5242; 493 | } 494 | 495 | .cross-modal:active { 496 | background: #f00; 497 | transform: translateY(-2px); 498 | } 499 | 500 | .modal-title { 501 | font-size: 2rem; 502 | font-weight: 900; 503 | margin-bottom: 20px; 504 | color: #ec5242; 505 | text-align: center; 506 | padding: 20px; 507 | border-bottom: 1px solid #d3d3d3; 508 | } 509 | 510 | .modal-details { 511 | background: #089b21; 512 | color: #fff; 513 | padding: 20px; 514 | border-radius: 10px; 515 | width: 80%; 516 | align-self: center; 517 | min-height: 100px; 518 | justify-self: center; 519 | } 520 | 521 | /* Footer */ 522 | .footer { 523 | background: #d6d6d6; 524 | color: #272a31; 525 | padding: 20px; 526 | } 527 | 528 | .footer-block { 529 | display: flex; 530 | max-width: 800px; 531 | justify-content: space-between; 532 | align-items: center; 533 | align-self: center; 534 | margin: 0 auto; 535 | } 536 | 537 | .footer-block .logo { 538 | margin-right: 10px; 539 | align-self: center; 540 | justify-self: center; 541 | } 542 | 543 | .footer-block h3 { 544 | font-size: 1rem; 545 | } 546 | 547 | @media screen and (min-width: 768px) { 548 | /* Header */ 549 | .header { 550 | background: #fff; 551 | padding: 0; 552 | } 553 | 554 | .header-top { 555 | display: flex; 556 | background: #272a31; 557 | color: #fff; 558 | justify-content: flex-end; 559 | align-items: center; 560 | width: 100%; 561 | } 562 | 563 | .top-header-group { 564 | display: flex; 565 | justify-content: flex-end; 566 | align-items: center; 567 | list-style: none; 568 | } 569 | 570 | .top-header-item { 571 | margin-right: 20px; 572 | padding: 5px; 573 | } 574 | 575 | .top-header-item-link { 576 | color: #fff; 577 | font-size: 14px; 578 | align-self: center; 579 | } 580 | 581 | .top-header-item-link:hover { 582 | color: #ec5242; 583 | } 584 | 585 | .top-social-icon { 586 | max-height: 16px; 587 | } 588 | 589 | .navbar { 590 | padding: 20px; 591 | justify-content: space-between; 592 | } 593 | 594 | .m-nav { 595 | display: none; 596 | } 597 | 598 | .d-nav { 599 | display: flex; 600 | } 601 | 602 | .menu-icon { 603 | display: none; 604 | } 605 | 606 | .nav-link { 607 | font-size: 1rem; 608 | margin: 0 10px; 609 | padding: 8px; 610 | color: #272a31; 611 | font-weight: normal; 612 | } 613 | 614 | /* Main container */ 615 | .container { 616 | margin-top: 70px; 617 | } 618 | 619 | /* Hero Section */ 620 | .hero { 621 | padding: 70px 10px; 622 | } 623 | 624 | .hero-greeting { 625 | font-size: 28px; 626 | } 627 | 628 | .hero-title { 629 | font-size: 4rem; 630 | margin-bottom: 50px; 631 | } 632 | 633 | /* Program Section */ 634 | .program-group { 635 | display: flex; 636 | flex-direction: row; 637 | gap: 3px; 638 | max-width: 800px; 639 | margin: 0 auto; 640 | } 641 | 642 | .program-item { 643 | flex-direction: column; 644 | margin: 0; 645 | margin: 0 3px; 646 | } 647 | 648 | .program-name { 649 | width: 100%; 650 | } 651 | 652 | .program-details { 653 | width: 100%; 654 | text-align: center; 655 | } 656 | 657 | /* Feature Tutors */ 658 | #m-tutor-group { 659 | display: none; 660 | } 661 | 662 | #d-tutor-group { 663 | display: flex; 664 | } 665 | 666 | .tutor-group { 667 | flex-direction: row; 668 | flex-wrap: wrap; 669 | } 670 | 671 | .tutor-list { 672 | width: 47%; 673 | margin: 25px 5px; 674 | } 675 | 676 | .see-more-tutors { 677 | display: none !important; 678 | } 679 | 680 | .btn-program { 681 | text-decoration: underline; 682 | color: #fff; 683 | background: initial; 684 | border: none; 685 | margin: 35px 0; 686 | padding: 10px 15px; 687 | } 688 | 689 | .btn-program:hover { 690 | background: initial; 691 | color: #ec5242; 692 | } 693 | 694 | .btn-program:active { 695 | background: initial; 696 | color: #fff; 697 | } 698 | 699 | /* sponser section */ 700 | .sponser { 701 | padding: 30px; 702 | } 703 | 704 | .sponser-item-group { 705 | flex-wrap: nowrap; 706 | } 707 | 708 | .sponser-item { 709 | margin: 25px; 710 | } 711 | 712 | .sponser-item img { 713 | max-width: 150px; 714 | } 715 | 716 | /* Footer */ 717 | .footer { 718 | padding: 30px; 719 | } 720 | } 721 | --------------------------------------------------------------------------------