├── logo.png ├── blog-1.jpg ├── blog-2.jpg ├── blog-3.jpg ├── client.jpg ├── quote.png ├── ALPHA97.png ├── about-img.png ├── calendar.png ├── comment.png ├── course-1.jpg ├── course-2.jpg ├── course-3.jpg ├── course-4.jpg ├── course-5.jpg ├── course-6.jpg ├── event-img.jpg ├── mockup1.png ├── shape-1.png ├── shape-2.png ├── shape-3.png ├── shape-4.png ├── Capture121.PNG ├── Capture148.PNG ├── banner-img.png ├── banner-line.png ├── cta-bg-img.png ├── logo-footer.png ├── about-img-bg.png ├── banner-img-bg.png ├── feature-icon-1.png ├── feature-icon-2.png ├── feature-icon-3.png ├── instructor-1.jpg ├── instructor-2.jpg ├── instructor-3.jpg ├── instructor-4.jpg ├── student-icon.png ├── coure-features-img.jpg ├── banner-aliment-icon-1.png ├── banner-aliment-icon-2.png ├── banner-aliment-icon-3.png ├── banner-aliment-icon-4.png ├── course-instructor-img.jpg ├── course-category-icon-1-w.png ├── course-category-icon-1.png ├── course-category-icon-2.png ├── course-category-icon-3.png ├── course-category-icon-4.png ├── course-category-icon-5.png ├── course-category-icon-6.png ├── script.js ├── varaible.css ├── README.md ├── animation.css ├── media_queries.css ├── styles.css └── index.html /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/logo.png -------------------------------------------------------------------------------- /blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/blog-1.jpg -------------------------------------------------------------------------------- /blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/blog-2.jpg -------------------------------------------------------------------------------- /blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/blog-3.jpg -------------------------------------------------------------------------------- /client.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/client.jpg -------------------------------------------------------------------------------- /quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/quote.png -------------------------------------------------------------------------------- /ALPHA97.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/ALPHA97.png -------------------------------------------------------------------------------- /about-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/about-img.png -------------------------------------------------------------------------------- /calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/calendar.png -------------------------------------------------------------------------------- /comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/comment.png -------------------------------------------------------------------------------- /course-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-1.jpg -------------------------------------------------------------------------------- /course-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-2.jpg -------------------------------------------------------------------------------- /course-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-3.jpg -------------------------------------------------------------------------------- /course-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-4.jpg -------------------------------------------------------------------------------- /course-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-5.jpg -------------------------------------------------------------------------------- /course-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-6.jpg -------------------------------------------------------------------------------- /event-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/event-img.jpg -------------------------------------------------------------------------------- /mockup1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/mockup1.png -------------------------------------------------------------------------------- /shape-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/shape-1.png -------------------------------------------------------------------------------- /shape-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/shape-2.png -------------------------------------------------------------------------------- /shape-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/shape-3.png -------------------------------------------------------------------------------- /shape-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/shape-4.png -------------------------------------------------------------------------------- /Capture121.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/Capture121.PNG -------------------------------------------------------------------------------- /Capture148.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/Capture148.PNG -------------------------------------------------------------------------------- /banner-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/banner-img.png -------------------------------------------------------------------------------- /banner-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/banner-line.png -------------------------------------------------------------------------------- /cta-bg-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/cta-bg-img.png -------------------------------------------------------------------------------- /logo-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/logo-footer.png -------------------------------------------------------------------------------- /about-img-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/about-img-bg.png -------------------------------------------------------------------------------- /banner-img-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/banner-img-bg.png -------------------------------------------------------------------------------- /feature-icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/feature-icon-1.png -------------------------------------------------------------------------------- /feature-icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/feature-icon-2.png -------------------------------------------------------------------------------- /feature-icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/feature-icon-3.png -------------------------------------------------------------------------------- /instructor-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/instructor-1.jpg -------------------------------------------------------------------------------- /instructor-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/instructor-2.jpg -------------------------------------------------------------------------------- /instructor-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/instructor-3.jpg -------------------------------------------------------------------------------- /instructor-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/instructor-4.jpg -------------------------------------------------------------------------------- /student-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/student-icon.png -------------------------------------------------------------------------------- /coure-features-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/coure-features-img.jpg -------------------------------------------------------------------------------- /banner-aliment-icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/banner-aliment-icon-1.png -------------------------------------------------------------------------------- /banner-aliment-icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/banner-aliment-icon-2.png -------------------------------------------------------------------------------- /banner-aliment-icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/banner-aliment-icon-3.png -------------------------------------------------------------------------------- /banner-aliment-icon-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/banner-aliment-icon-4.png -------------------------------------------------------------------------------- /course-instructor-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-instructor-img.jpg -------------------------------------------------------------------------------- /course-category-icon-1-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-category-icon-1-w.png -------------------------------------------------------------------------------- /course-category-icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-category-icon-1.png -------------------------------------------------------------------------------- /course-category-icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-category-icon-2.png -------------------------------------------------------------------------------- /course-category-icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-category-icon-3.png -------------------------------------------------------------------------------- /course-category-icon-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-category-icon-4.png -------------------------------------------------------------------------------- /course-category-icon-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-category-icon-5.png -------------------------------------------------------------------------------- /course-category-icon-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/edu-institue/main/course-category-icon-6.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // navbar variables 4 | const navbarNav = document.querySelector('.navbar-nav'); 5 | const navbarToggleBtn = document.querySelector('.nav-toggle-btn'); 6 | 7 | // navbar toggle functionality 8 | navbarToggleBtn.addEventListener('click', function () { 9 | 10 | navbarNav.classList.toggle('active'); 11 | this.classList.toggle('active'); 12 | 13 | }); -------------------------------------------------------------------------------- /varaible.css: -------------------------------------------------------------------------------- 1 | /* =========== VARIABLES =========== */ 2 | :root{ 3 | --red-orange-color-wheel: #FFB703; 4 | --ultramarine-blue: #0062ff; 5 | --lavender-blue: #d2dafe; 6 | --oxford-blue: #050e38; 7 | --light-gray: #cccccc; 8 | --sonic-silver: #787878; 9 | --blue-crayola: #0d6dfd; 10 | --cultured: #f2f3f7; 11 | --white: #ffffff; 12 | 13 | --fs-1: 38px; 14 | --fs-2: 35px; 15 | --fs-3: 30px; 16 | --fs-4: 22px; 17 | --fs-5: 20px; 18 | --fs-6: 15px; 19 | 20 | --fw-5: 500; 21 | --fw-6: 600; 22 | --fw-7: 700; 23 | --fw-8: 800; 24 | --fw-9: 900; 25 | 26 | --px: 15px; 27 | --py: 80px; 28 | 29 | --default-transition: 0.25s ease; 30 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # edu-institue 2 | A fully responsive and beautifully designed website for an educational institute built using HTML, CSS, and JavaScript. This project showcases essential pages such as Home, About, Courses, Admissions, Faculty, Gallery, Contact, and Login. It’s ideal for colleges, schools, or training centers. 3 | 4 |
5 | DevOpsShack Banner 6 |
7 | 🧠 Features 8 | ✅ Modern, mobile-first design 9 | ✅ Smooth navigation bar and footer 10 | ✅ Multi-page layout (SPA optional) 11 | ✅ Course cards with details 12 | ✅ Admission form (non-functional by default) 13 | ✅ Image gallery with lightbox or grid 14 | ✅ Contact form (HTML only, can integrate with Formspree or backend) 15 | ✅ Admin/Student login template 16 | ✅ Dark/Light mode toggle (optional) 17 | 18 |
19 | DevOpsShack Banner 20 |
21 | 22 | 🛠️ Technologies Used 23 | HTML5 24 | 25 | CSS3 (Flexbox/Grid, Animations) 26 | 27 | Vanilla JavaScript 28 | 29 | Optional: Chart.js for stats, Swiper.js for carousels 30 | -------------------------------------------------------------------------------- /animation.css: -------------------------------------------------------------------------------- 1 | /* =========== ANIMATION =========== */ 2 | 3 | .drop-anim { animation: drop 2.5s infinite; } 4 | 5 | @keyframes drop { 6 | 7 | 0%, 8 | 20%, 9 | 50%, 10 | 80%, 11 | 100% { transform: translateY(0); } 12 | 40% { transform: translateY(-30px); } 13 | 60% { transform: translateY(-15px); } 14 | 15 | } 16 | 17 | .smooth-zigzag-anim-1 { animation: smooth-zigzag-1 5s linear infinite; } 18 | 19 | @keyframes smooth-zigzag-1 { 20 | 21 | 0%, 22 | 100% { transform: translate(0); } 23 | 25% { transform: translate(10px, 10px); } 24 | 50% { transform: translate( 5px, 5px); } 25 | 75% { transform: translate(10px, -5px); } 26 | 27 | } 28 | 29 | .smooth-zigzag-anim-2 { animation: smooth-zigzag-2 5s linear infinite; } 30 | 31 | @keyframes smooth-zigzag-2 { 32 | 33 | 0%, 34 | 100% { transform: translate(0); } 35 | 25% { transform: translate(-10px, -10px); } 36 | 50% { transform: translate( -5px, -5px); } 37 | 75% { transform: translate(-10px, 5px); } 38 | 39 | } 40 | 41 | .smooth-zigzag-anim-3 { animation: smooth-zigzag-3 5s linear infinite; } 42 | 43 | @keyframes smooth-zigzag-3 { 44 | 45 | 0%, 46 | 100% { transform: translate(0); } 47 | 25% { transform: translate( -7px, -7px); } 48 | 50% { transform: translate(-14px, -14px); } 49 | 75% { transform: translate( -7px, -7px); } 50 | 51 | } 52 | 53 | .pulse-anim { animation: pulse 3s linear infinite; } 54 | 55 | @keyframes pulse { 56 | 57 | 0%, 58 | 70% { box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 1); } 59 | 100% { box-shadow: 0 0 0 15px transparent; } 60 | 61 | } -------------------------------------------------------------------------------- /media_queries.css: -------------------------------------------------------------------------------- 1 | /* =========== MEDIA QUERIES =========== */ 2 | 3 | @media (min-width: 375px) { 4 | /* =========== VARIABLE =========== */ 5 | 6 | :root { 7 | --fs-1: 50px; 8 | --fs-2: 45px; 9 | --fs-7: 18px; 10 | 11 | --px: 30px; 12 | } 13 | 14 | .section-subtitle { 15 | font-size: var(--fs-7); 16 | } 17 | 18 | /* =========== HOME =========== */ 19 | 20 | .home-right .icon-1 { 21 | top: 250px; 22 | } 23 | 24 | .home-right .icon-2 { 25 | display: block; 26 | top: 370px; 27 | right: 50px; 28 | } 29 | 30 | .home-right .icon-3 { 31 | display: block; 32 | top: 450px; 33 | left: 0; 34 | } 35 | 36 | .home-right .icon-4 { 37 | width: 60px; 38 | top: 150px; 39 | right: 50px; 40 | } 41 | 42 | /* =========== ABOUT =========== */ 43 | .about-left .icon-1 { 44 | top: 150px; 45 | } 46 | 47 | .about-left .icon-2 { 48 | display: block; 49 | top: 270px; 50 | right: 0; 51 | } 52 | } 53 | 54 | @media (min-width: 575px) { 55 | /* =========== VARIABLE =========== */ 56 | :root { 57 | --px: 40px; 58 | } 59 | 60 | /* =========== HOME =========== */ 61 | .home .shap-1 img { 62 | width: 100px; 63 | } 64 | 65 | .home .shap-3 img { 66 | width: 250px; 67 | } 68 | 69 | /* =========== ABOUT =========== */ 70 | .about-left .icon-1 { 71 | top: 200px; 72 | } 73 | 74 | .about-left .icon-2 { 75 | top: 350px; 76 | } 77 | 78 | /* =========== EVENT =========== */ 79 | .event .play { 80 | right: -20px; 81 | } 82 | 83 | .event-card { 84 | display: flex; 85 | align-items: center; 86 | text-align: left; 87 | } 88 | 89 | .event-card .content-left { 90 | width: 100px; 91 | padding-bottom: 0; 92 | margin-bottom: 0; 93 | padding-right: 15px; 94 | margin-right: 25px; 95 | box-shadow: 1px 0 0 0 var(--light-gray); 96 | } 97 | 98 | .event .schedule { 99 | justify-content: start; 100 | margin-bottom: 5px; 101 | } 102 | 103 | .event-card .event-name { 104 | text-align: left; 105 | } 106 | 107 | /* =========== CONTACT =========== */ 108 | 109 | .contact h2 { 110 | font-size: 37px; 111 | } 112 | } 113 | 114 | @media (min-width: 767px) { 115 | 116 | /* =========== VARIABLE =========== */ 117 | 118 | :root { 119 | 120 | --fs-1: 60px; 121 | --fs-2: 50px; 122 | --fs-7: 20px; 123 | 124 | --px: 60px; 125 | 126 | } 127 | 128 | /* =========== CATEGORY, COURSE, INSTRUCTOR, BLOG, FOOTER =========== */ 129 | 130 | .category .course-item-group, 131 | .course-grid, 132 | .instructor-grid, 133 | .blog-grid, 134 | .footer-grid { grid-template-columns: 1fr 1fr; } 135 | 136 | 137 | 138 | /* =========== EVENT =========== */ 139 | 140 | .event .play { right: -100px; } 141 | 142 | 143 | 144 | /* =========== CONTACT =========== */ 145 | 146 | .contact-card { padding: 40px 60px; } 147 | 148 | } 149 | 150 | @media (min-width: 850px) { 151 | 152 | /* =========== VARIABLE =========== */ 153 | :root { 154 | --px: 140px; 155 | } 156 | } 157 | 158 | 159 | @media (min-width: 992px) { 160 | 161 | /* =========== VARIABLE =========== */ 162 | 163 | :root { 164 | 165 | --fs-5: 16px; 166 | 167 | --px: 30px; 168 | --py: 120px; 169 | 170 | } 171 | 172 | 173 | 174 | /* =========== HEADER =========== */ 175 | 176 | .navbar { padding: 20px var(--px); } 177 | 178 | .navbar-nav { 179 | background: transparent; 180 | position: static; 181 | box-shadow: none; 182 | padding: 0; 183 | opacity: 1; 184 | transform: scale(1); 185 | pointer-events: all; 186 | display: flex; 187 | align-items: center; 188 | gap: 20px; 189 | } 190 | 191 | .nav-item:not(:last-child) a { border-bottom: none; } 192 | 193 | .nav-toggle-btn { display: none; } 194 | 195 | .navbar .btn { display: block; } 196 | 197 | 198 | 199 | /* =========== HOME =========== */ 200 | 201 | .home { 202 | display: grid; 203 | grid-template-columns: 1fr 1fr; 204 | align-items: center; 205 | } 206 | 207 | .home::before { 208 | top: -100px; 209 | left: -300px; 210 | } 211 | 212 | .home::after { top: 0; } 213 | 214 | .home-left { margin-bottom: 0; } 215 | 216 | .home .section-subtitle, 217 | .main-heading, 218 | .home .section-text { text-align: left; } 219 | 220 | .home .section-text { margin: 0 0 30px; } 221 | 222 | .home-btn-group { justify-content: start; } 223 | 224 | 225 | 226 | /* =========== ABOUT =========== */ 227 | 228 | .about { 229 | display: grid; 230 | grid-template-columns: 1fr 1fr; 231 | align-items: end; 232 | gap: 40px; 233 | } 234 | 235 | .about-left { margin-left: -70px; } 236 | 237 | .about-left img { max-width: unset; } 238 | 239 | .about-right { padding-top: 0; } 240 | 241 | 242 | 243 | /* =========== COURSE =========== */ 244 | 245 | .course { position: relative; } 246 | 247 | .course .section-subtitle, 248 | .course .section-title { max-width: 600px; } 249 | 250 | .course-grid { 251 | grid-template-columns: repeat(3, 1fr); 252 | margin-bottom: 0; 253 | } 254 | 255 | .course .btn-primary { 256 | position: absolute; 257 | top: 130px; 258 | right: var(--px); 259 | } 260 | 261 | 262 | 263 | /* =========== EVENT =========== */ 264 | 265 | .event { 266 | display: grid; 267 | grid-template-columns: 2fr 3fr; 268 | gap: 50px; 269 | align-items: center; 270 | } 271 | 272 | .event-left { margin-bottom: 0; } 273 | 274 | .event .play { right: -10px; } 275 | 276 | 277 | 278 | /* =========== FEATURE =========== */ 279 | 280 | .features { 281 | display: grid; 282 | grid-template-columns: 1fr 1fr; 283 | } 284 | 285 | .features-right { height: auto; } 286 | 287 | 288 | 289 | /* =========== TESTIMONIALS =========== */ 290 | 291 | .testimonials { 292 | display: grid; 293 | grid-template-columns: 1fr 1fr; 294 | gap: 50px; 295 | align-items: center; 296 | } 297 | 298 | 299 | 300 | /* =========== BLOG =========== */ 301 | 302 | .blog-grid { grid-template-columns: repeat(3, 1fr); } 303 | 304 | 305 | 306 | /* =========== CONTACT =========== */ 307 | 308 | .contact-card { grid-template-columns: 1fr 1fr; } 309 | 310 | .contact-card h2 { text-align: left; } 311 | 312 | .contact .btn-primary { 313 | justify-self: end; 314 | align-self: center; 315 | } 316 | 317 | 318 | 319 | /* =========== FOOTER =========== */ 320 | 321 | .footer-grid { grid-template-columns: 2fr 1fr 1fr 2fr; } 322 | 323 | } 324 | 325 | @media (min-width: 1200px) { 326 | 327 | /* =========== VARIABLE =========== */ 328 | 329 | :root { 330 | 331 | --fs-1: 70px; 332 | --fs-2: 55px; 333 | --fs-3: 40px; 334 | --fs-4: 25px; 335 | --fs-7: 22px; 336 | 337 | --px: 120px; 338 | 339 | } 340 | 341 | 342 | 343 | /* =========== HOME =========== */ 344 | 345 | .home-left { padding-bottom: var(--py); } 346 | 347 | .home .section-text { font-size: 18px; } 348 | 349 | 350 | 351 | /* =========== CATEGORY =========== */ 352 | 353 | .category .course-item-group { grid-template-columns: repeat(3, 1fr); } 354 | 355 | 356 | 357 | /* =========== EVENT =========== */ 358 | 359 | .event { grid-template-columns: 1fr 1fr; } 360 | 361 | 362 | 363 | /* =========== INSTRUCTOR =========== */ 364 | 365 | .instructor-grid { grid-template-columns: repeat(4, 1fr); } 366 | 367 | 368 | 369 | /* =========== CONTACT =========== */ 370 | 371 | .contact-card h2 { font-size: 45px; } 372 | 373 | } -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* =========== VARIABLES =========== */ 2 | @import url(./variable.css); 3 | /*you can use your own image too*/ 4 | 5 | /* =========== RESET =========== */ 6 | *, *::before, *::after { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | 11 | } 12 | 13 | li { 14 | list-style: none; 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | font: inherit; 20 | } 21 | 22 | img, span, a, ion-icon { 23 | display: block; 24 | } 25 | 26 | button { 27 | background: none; 28 | border: none; 29 | font: inherit; 30 | cursor: pointer; 31 | } 32 | 33 | html { 34 | font-family: 'Montserrat', sans-serif; 35 | scroll-behavior: smooth; 36 | } 37 | 38 | ::-webkit-scrollbar { width: 5px; } 39 | 40 | ::-webkit-scrollbar-track { background: var(--light-gray);} 41 | 42 | ::-webkit-scrollbar-thumb { 43 | border-radius: 10px; 44 | background: var(--red-orange-color-wheel); 45 | } 46 | 47 | ::-webkit-scrollbar-thumb:hover { 48 | background: var(--ultramarine-blue); 49 | } 50 | 51 | /* =========== COMPONENT =========== */ 52 | 53 | .btn { 54 | position: relative; 55 | font-family: 'Montserrat', sans-serif; 56 | font-size: var(--fs-6); 57 | font-weight: var(--fw-5); 58 | border-radius: 8px; 59 | color: var(--white); 60 | padding: 20px 45px; 61 | text-transform: uppercase; 62 | overflow: hidden; 63 | } 64 | 65 | .btn .btn-text { 66 | position: relative; 67 | z-index: 5; 68 | } 69 | 70 | .btn-primary, 71 | .btn-secondary .square { background: var(--red-orange-color-wheel); } 72 | 73 | .btn .square { 74 | position: absolute; 75 | top: 50%; 76 | right: 20px; 77 | transform: translateY(-50%); 78 | width: 40px; 79 | height: 40px; 80 | border-radius: 8px; 81 | transition: var(--default-transition); 82 | } 83 | 84 | .btn:hover .square { 85 | right: -2px; 86 | width: 102%; 87 | height: 102%; 88 | } 89 | 90 | .btn-primary .square, 91 | .btn-secondary { 92 | background: var(--oxford-blue); 93 | } 94 | 95 | /* =========== REUSED CSS =========== */ 96 | 97 | .section-subtitle { 98 | color: var(--ultramarine-blue); 99 | font-weight: var(--fw-7); 100 | text-transform: uppercase; 101 | } 102 | 103 | .section-text { 104 | color: var(--sonic-silver); 105 | font-family: 'Montserrat', sans-serif; 106 | font-size: var(--fs-6); 107 | line-height: 1.6; 108 | } 109 | 110 | .section-title { 111 | font-size: var(--fs-2); 112 | font-weight: var(--fw-8); 113 | color: var(--oxford-blue); 114 | line-height: 1.3; 115 | } 116 | 117 | /* =========== MAIN =========== */ 118 | 119 | .container { 120 | background: var(--white); 121 | max-width: 1440px; 122 | margin: auto; 123 | overflow: hidden; 124 | } 125 | 126 | .navbar { 127 | position: fixed; 128 | top: 0; 129 | left: 50%; 130 | transform: translateX(-50%); 131 | width: 100%; 132 | max-width: 1440px; 133 | background: hsla(0, 0%, 100%, 0.9); 134 | backdrop-filter: blur(15px); 135 | display: flex; 136 | justify-content: space-between; 137 | align-items: center; 138 | padding: 10px var(--px); 139 | box-shadow: 0 10px 20px -5px hsla(0, 0%, 8%, 0.03); 140 | z-index: 100; 141 | } 142 | 143 | .navbar-nav { 144 | position: absolute; 145 | background: var(--white); 146 | top: calc(100% + 40px); 147 | left: 30px; 148 | right: 30px; 149 | text-align: center; 150 | box-shadow: 0 10px 30px -5px hsla(0, 0%, 8%, 0.25); 151 | padding: 30px; 152 | border-radius: 8px; 153 | opacity: 0; 154 | transform: scale(0.8); 155 | pointer-events: none; 156 | } 157 | 158 | .nav-item a { 159 | padding: 10px; 160 | font-size: var(--fs-5); 161 | font-weight: var(--fw-6); 162 | color: var(--oxford-blue); 163 | transition: var(--default-transition); 164 | } 165 | 166 | .nav-item:not(:last-child) a { 167 | border-bottom: 1px solid hsla(0, 0%, 8%, 0.1); 168 | } 169 | 170 | .nav-item a:hover{ 171 | color: var(--red-orange-color-wheel); 172 | } 173 | 174 | .navbar-nav.active { 175 | animation: menuPopup 0.5s ease forwards; 176 | pointer-events: all; 177 | } 178 | 179 | @keyframes menuPopup { 180 | 0% { 181 | opacity: 0; 182 | transform: scale(0.8); 183 | } 184 | 185 | 50% { 186 | transform: scale(1.1); 187 | } 188 | 189 | 100% { 190 | opacity: 1; 191 | transform: scale(1); 192 | } 193 | } 194 | 195 | .navbar .btn { 196 | display: none; 197 | } 198 | 199 | .nav-toggle-btn { 200 | background: var(--red-orange-color-wheel); 201 | width: 50px; 202 | height: 50px; 203 | border-radius: 8px; 204 | display: flex; 205 | flex-direction: column; 206 | justify-content: center; 207 | align-items: center; 208 | gap: 6px; 209 | } 210 | 211 | .nav-toggle-btn span { 212 | background: var(--white); 213 | width: 30px; 214 | height: 2px; 215 | transition: var(--default-transition); 216 | } 217 | 218 | .nav-toggle-btn .active .one { 219 | transform: rotate(45deg) translate(3px, 3px); 220 | } 221 | 222 | .nav-toggle-btn .active .two { 223 | display: none; 224 | } 225 | 226 | .nav-toggle-btn .active .three { 227 | transform: rotate(-45deg) translate(2px, -2px); 228 | } 229 | 230 | /* =========== HOME =========== */ 231 | 232 | .home { 233 | position: relative; 234 | margin-top: 70px; 235 | padding: var(--py) var(--px); 236 | overflow: hidden; 237 | } 238 | 239 | .home::before { 240 | content: ''; 241 | position: absolute; 242 | top: -200px; 243 | left: -400px; 244 | width: 800px; 245 | height: 800px; 246 | border-radius: 50%; 247 | background: radial-gradient(ellipse at center, hsla(217, 100%, 50%, 0.3), transparent 70%); 248 | } 249 | 250 | .home::after { 251 | content: ''; 252 | position: absolute; 253 | top: 100px; 254 | right: -400px; 255 | width: 800px; 256 | height: 800px; 257 | border-radius: 50%; 258 | background: radial-gradient(ellipse at center, hsla(15, 100%, 55%, 0.3), transparent 70%); 259 | } 260 | 261 | .home .deco-shape { 262 | position: absolute; 263 | } 264 | 265 | .home .shape-1 { 266 | top: 14%; 267 | left: 8%; 268 | } 269 | 270 | .home .shape-2 { 271 | top: 600px; 272 | left: 30px; 273 | } 274 | 275 | .home .shape-3 { 276 | top: 25%; 277 | right: 0; 278 | } 279 | 280 | .home .shape-4 { 281 | top: 570px; 282 | right: 110px; 283 | } 284 | 285 | .home-left { 286 | margin-bottom: 60px; 287 | } 288 | 289 | .home-left, .home-right { 290 | position: relative; 291 | z-index: 10; 292 | } 293 | 294 | .home .section-subtitle { 295 | text-align: center; 296 | margin-bottom: 25px; 297 | } 298 | 299 | .main-heading { 300 | color: var(--oxford-blue); 301 | font-size: var(--fs-1); 302 | font-weight: var(--fw-9); 303 | line-height: 1.2; 304 | margin-bottom: 48px; 305 | text-align: center; 306 | } 307 | 308 | .underline-img { 309 | display: inline-block; 310 | position: relative; 311 | } 312 | 313 | .underline-img img { 314 | position: absolute; 315 | bottom: -5px; 316 | left: 0; 317 | width: 100%; 318 | } 319 | 320 | .home .section-text { 321 | max-width: 500px; 322 | text-align: center; 323 | margin: auto; 324 | margin-bottom: 30px; 325 | } 326 | 327 | .home-btn-group { 328 | display: flex; 329 | justify-content: center; 330 | align-items: center; 331 | flex-wrap: wrap; 332 | gap: 30px; 333 | } 334 | 335 | .home-right .img-box { 336 | position: relative; 337 | } 338 | 339 | .home-right .img-box img { 340 | position: absolute; 341 | } 342 | 343 | .home-right .img-box .banner-img { 344 | position: relative; 345 | width: auto; 346 | max-width: 100%; 347 | 348 | margin: auto; 349 | } 350 | 351 | .home-right .background-shape { 352 | width: auto; 353 | max-width: 100%; 354 | left: 50%; 355 | transform: translateX(-50%); 356 | /* z-index: 1; */ 357 | } 358 | 359 | .home-right .icon-1 { 360 | top: 200px; 361 | left: 20px; 362 | } 363 | 364 | .home-right .icon-2, 365 | .home-right .icon-3 { 366 | display: none; 367 | } 368 | 369 | .home-right .icon-4 { 370 | top: 60px; 371 | right: 20px; 372 | filter: drop-shadow(0 8px 30px hsla(350, 100%, 68%, 0.5)); 373 | } 374 | 375 | .icon-1, .icon-2, .icon-3, .icon-4 { 376 | filter: drop-shadow(0 10px 20px hsla(0, 0%, 0%, 0.2)); 377 | z-index: 5; 378 | } 379 | 380 | /* =========== COURSE CATEGORY =========== */ 381 | .category { 382 | padding: var(--py) var(--px); 383 | } 384 | 385 | .category .section-subtitle { 386 | text-align: center; 387 | margin-bottom: 15px; 388 | } 389 | 390 | .category .section-title { 391 | text-align: center; 392 | margin-bottom: 60px; 393 | } 394 | 395 | .category .course-item-group { 396 | display: grid; 397 | grid-template-columns: 1fr; 398 | gap: 30px; 399 | } 400 | 401 | .course-category-item { 402 | display: flex; 403 | align-items: center; 404 | gap: 20px; 405 | border: 1px solid hsl(0, 0%, 67%); 406 | border-radius: 8px; 407 | padding: 25px; 408 | transition: var(--default-transition); 409 | } 410 | 411 | .course-category-item:hover { 412 | background: var(--red-orange-color-wheel); 413 | border-color: var(--red-orange-color-wheel); 414 | box-shadow: 0 10px 50px -20px var(--red-orange-color-wheel); 415 | } 416 | 417 | .category-icon { 418 | width: 50px; 419 | } 420 | 421 | .category-icon.hover, 422 | .course-category-item:hover .category-icon.default { 423 | display: none; 424 | } 425 | 426 | .category-icon.default, 427 | .course-category-item:hover .category-icon.hover { 428 | display: block; 429 | } 430 | 431 | .category-title a { 432 | color: var(--oxford-blue); 433 | font-size: var(--fs-4); 434 | font-weight: var(--fw-7); 435 | } 436 | 437 | .category-subtitle { 438 | font-family: 'Montserrat', sans-serif; 439 | color: var(--sonic-silver); 440 | font-size: var(--fs-6); 441 | } 442 | 443 | .course-category-item:hover .category-title a, 444 | .course-category-item:hover .category-subtitle { 445 | color: var(--white); 446 | } 447 | 448 | 449 | /* =========== ABOUT =========== */ 450 | 451 | .about { 452 | padding: var(--py) var(--px); 453 | background: var(--cultured); 454 | overflow: hidden; 455 | } 456 | 457 | .about-left .img-box { 458 | position: relative; 459 | } 460 | 461 | .about-left img { 462 | position: absolute; 463 | } 464 | 465 | .about-bg, .about-img { 466 | width: auto; 467 | max-width: 100%; 468 | margin: auto; 469 | } 470 | 471 | .about-left .about-img { 472 | position: relative; 473 | z-index: 2; 474 | } 475 | 476 | .about-left .icon-1{ 477 | top: 130px; 478 | right: 0; 479 | z-index: 5; 480 | } 481 | 482 | .about-left .icon-2 { 483 | display: none; 484 | } 485 | 486 | .about-right { 487 | padding-top: 50px; 488 | } 489 | 490 | .about-right .section-subtitle { 491 | margin-bottom: 10px; 492 | } 493 | 494 | .about-right .section-title { 495 | margin-bottom: 30px; 496 | } 497 | 498 | .about-right .section-text { 499 | margin-bottom: 20px; 500 | } 501 | 502 | .about-ul { 503 | margin-bottom: 40px; 504 | } 505 | 506 | .about-ul li { 507 | display: flex; 508 | align-items: center; 509 | gap: 15px; 510 | } 511 | 512 | .about-ul ion-icon { 513 | font-size: 30px; 514 | color: var(--red-orange-color-wheel); 515 | } 516 | 517 | .about-ul p { 518 | color: var(--oxford-blue); 519 | font-family: 'Montserrat', sans-serif; 520 | font-size: var(--fs-6); 521 | font-weight: var(--fw-5); 522 | line-height: 1.6; 523 | text-align: left; 524 | } 525 | 526 | .about-ul li:not(:last-child) { 527 | margin-bottom: 30px; 528 | } 529 | 530 | /* =========== COURSE =========== */ 531 | .course { 532 | padding: var(--py) var(--px); 533 | } 534 | 535 | .course .section-subtitle { 536 | margin-bottom: 15px; 537 | } 538 | 539 | .course .section-title { 540 | margin-bottom: 60px; 541 | } 542 | 543 | .course-grid { 544 | display: grid; 545 | grid-template-columns: 1fr; 546 | gap: 30px; 547 | margin-bottom: 60px; 548 | } 549 | 550 | .course-card { 551 | background: var(--white); 552 | border-radius: 8px; 553 | box-shadow: 0 10px 50px hsla(0, 0%, 0%, 0.1); 554 | overflow: hidden; 555 | } 556 | 557 | .course-banner { 558 | position: relative; 559 | overflow: hidden; 560 | } 561 | 562 | .course-banner img { 563 | width: 100%; 564 | height: 100%; 565 | object-fit: cover; 566 | transition: var(--default-transition); 567 | } 568 | 569 | .course-card:hover .course-banner img { 570 | transform: scale(1.05); 571 | } 572 | 573 | .course-banner .course-tag-box { 574 | position: absolute; 575 | bottom: 20px; 576 | left: 30px; 577 | display: flex; 578 | align-items: center; 579 | gap: 20px; 580 | } 581 | 582 | .course-banner .badge-tag { 583 | font-family: 'Montserrat', sans-serif; 584 | font-size: var(--fs-6); 585 | color: var(--white); 586 | padding: 8px 20px; 587 | border-radius: 5px; 588 | } 589 | 590 | .course-banner .orange { 591 | background: var(--red-orange-color-wheel); 592 | } 593 | 594 | .course-banner .blue { 595 | background: var(--ultramarine-blue); 596 | } 597 | 598 | .course-card .course-content { 599 | padding: 30px; 600 | padding-bottom: 20px; 601 | } 602 | 603 | .course-card .card-title { 604 | margin-bottom: 20px; 605 | } 606 | 607 | .course-card .card-title a { 608 | color: var(--oxford-blue); 609 | font-size: var(--fs-4); 610 | font-weight: var(--fw-7); 611 | line-height: 1.3; 612 | transition: var(--default-transition); 613 | } 614 | 615 | .course-card:hover .card-title a { 616 | color: var(--red-orange-color-wheel); 617 | } 618 | 619 | .course-card .wrapper { 620 | display: flex; 621 | justify-content: space-between; 622 | align-items: center; 623 | } 624 | 625 | .course-card .border-bottom { 626 | margin-bottom: 15px; 627 | padding-bottom: 30px; 628 | border-bottom: 1px solid var(--light-gray); 629 | } 630 | 631 | .course-card .author { 632 | display: flex; 633 | align-items: center; 634 | gap: 10px; 635 | } 636 | 637 | .course-card .author-img { 638 | border-radius: 50%; 639 | border: 3px solid var(--white); 640 | box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.2); 641 | } 642 | 643 | .course-card .author-name { 644 | font-family: 'Montserrat', sans-serif; 645 | font-size: var(--fs-6); 646 | color: var(--sonic-silver); 647 | transition: var(--default-transition); 648 | } 649 | 650 | .course-card .author-name:hover { 651 | color: var(--oxford-blue); 652 | } 653 | 654 | .course-card .rating { 655 | display: flex; 656 | align-items: center; 657 | gap: 10px; 658 | } 659 | 660 | .course-card .rating ion-icon { 661 | font-size: 20px; 662 | color: hsl(45, 100%, 51%); 663 | } 664 | 665 | .course-card .enrolled p, 666 | .course-card .rating p { 667 | font-family: 'Montserrat', sans-serif; 668 | font-size: var(--fs-6); 669 | color: var(--sonic-silver); 670 | } 671 | 672 | .course-card .course-price { 673 | color: var(--red-orange-color-wheel); 674 | font-size: 20px; 675 | font-weight: var(--fw-7); 676 | } 677 | 678 | .course-card .enrolled { 679 | display: flex; 680 | align-items: center; 681 | gap: 10px; 682 | } 683 | 684 | .course-card .icon-user { 685 | background: hsl(138, 59%, 91%); 686 | width: 30px; 687 | height: 30px; 688 | display: flex; 689 | justify-content: center; 690 | align-items: center; 691 | border-radius: 50%; 692 | } 693 | 694 | .course .btn-primary { 695 | display: block; 696 | margin: auto; 697 | } 698 | 699 | /* =========== EVENT =========== */ 700 | 701 | .event { 702 | padding: var(--py) var(--px); 703 | background: var(--cultured); 704 | } 705 | 706 | .event-left { 707 | position: relative; 708 | max-width: max-content; 709 | margin-bottom: 50px; 710 | } 711 | 712 | .event .banner-img { 713 | width: auto; 714 | max-width: 100%; 715 | border-radius: 8px; 716 | } 717 | 718 | .event .play { 719 | position: absolute; 720 | bottom: 100px; 721 | right: 0; 722 | padding: 30px 40px; 723 | background: var(--red-orange-color-wheel); 724 | display: flex; 725 | align-items: center; 726 | gap: 20px; 727 | border-radius: 8px; 728 | box-shadow: 0 10px 40px hsla(64, 100%, 50%, 0.7); 729 | } 730 | 731 | .event .play-icon { 732 | border-radius: 50%; 733 | box-shadow: 0 0 0 15px transparent; 734 | } 735 | 736 | .event .play ion-icon { 737 | display: block; 738 | color: var(--white); 739 | font-size: 70px; 740 | margin: -8px; 741 | } 742 | 743 | .event .play p { 744 | font-size: var(--fs-4); 745 | font-weight: var(--fw-7); 746 | color: var(--white); 747 | } 748 | 749 | .event .section-subtitle { 750 | margin-bottom: 15px; 751 | } 752 | 753 | .event .section-title { 754 | margin-bottom: 30px; 755 | } 756 | 757 | .event-card-group { 758 | display: grid; 759 | grid-template-columns: 1fr; 760 | gap: 30px; 761 | } 762 | 763 | .event-card { 764 | background: var(--white); 765 | border-radius: 8px; 766 | padding: 30px 25px; 767 | box-shadow: 0 10px 30px hsla(0, 0%, 0%, 0.1); 768 | border-right: 5px solid transparent; 769 | transition: var(--default-transition); 770 | } 771 | 772 | .event-card .content-left { 773 | width: 100%; 774 | text-align: center; 775 | padding-bottom: 15px; 776 | margin-bottom: 25px; 777 | box-shadow: 0 16px 0 -15px var(--light-gray); 778 | } 779 | 780 | .event-card .day { 781 | font-size: var(--fs-3); 782 | font-weight: var(--fw-7); 783 | color: var(--blue-crayola); 784 | } 785 | 786 | .event-card .month { 787 | font-size: var(--fs-6); 788 | font-weight: var(--fw-5); 789 | color: var(--blue-crayola); 790 | } 791 | 792 | .event .schedule { 793 | display: flex; 794 | justify-content: center; 795 | margin-bottom: 10px; 796 | } 797 | 798 | .event .schedule p { 799 | font-family: 'Montserrat', sans-serif; 800 | font-size: var(--fs-6); 801 | color: var(--sonic-silver); 802 | } 803 | 804 | .event .schedule .time { 805 | padding-right: 20px; 806 | margin-right: 20px; 807 | box-shadow: 4px 0 0 -3px var(--light-gray); 808 | } 809 | 810 | .event-card .event-name { 811 | color: var(--oxford-blue); 812 | font-size: var(--fs-4); 813 | font-weight: var(--fw-7); 814 | line-height: 1.6; 815 | text-align: center; 816 | transition: var(--default-transition); 817 | } 818 | 819 | .event-card:hover { 820 | border-color: var(--red-orange-color-wheel); 821 | } 822 | 823 | .event-card:hover .event-name { 824 | color: var(--red-orange-color-wheel); 825 | } 826 | 827 | /* =========== FEATURES =========== */ 828 | .features { 829 | background: var(--oxford-blue); 830 | } 831 | 832 | .features-left { 833 | padding: var(--py) var(--px); 834 | } 835 | 836 | .features .section-subtitle { 837 | margin-bottom: 15px; 838 | } 839 | 840 | .features .section-title { 841 | color: var(--white); 842 | margin-bottom: 30px; 843 | } 844 | 845 | .features-item { 846 | display: flex; 847 | align-items: center; 848 | gap: 20px; 849 | } 850 | 851 | .features-item:not(:last-child) { 852 | margin-bottom: 30px; 853 | } 854 | 855 | .features-item .item-icon-box { 856 | width: 65px; 857 | height: 65px; 858 | display: flex; 859 | justify-content: center; 860 | align-items: center; 861 | border-radius: 8px; 862 | } 863 | 864 | .features-item .blue { 865 | background: hsl(222, 87%, 56%); 866 | } 867 | 868 | .features-item .pink { 869 | background: hsl(336, 73%, 50%); 870 | } 871 | 872 | .features-item .purple { 873 | background: hsl(265, 83%, 44%); 874 | } 875 | 876 | .features-item .wrapper { 877 | max-width: calc(100% - 85px); 878 | } 879 | 880 | .features-item .item-title { 881 | color: var(--white); 882 | font-size: var(--fs-4); 883 | font-weight: var(--fw-7); 884 | margin-bottom: 10px; 885 | } 886 | 887 | .features-item .item-text { 888 | font-family: 'Montserrat', sans-serif; 889 | color: hsl(231, 100%, 94%); 890 | font-size: var(--fs-6); 891 | line-height: 1.6; 892 | } 893 | 894 | .features-right { 895 | height: 500px; 896 | } 897 | 898 | .features-right img { 899 | width: 100%; 900 | height: 100%; 901 | object-fit: cover; 902 | } 903 | 904 | /* =========== INSTRUCTOR =========== */ 905 | .instructor { 906 | padding: var(--py) var(--px); 907 | } 908 | 909 | .instructor .section-subtitle { 910 | text-align: center; 911 | margin-bottom: 15px; 912 | } 913 | 914 | .instructor .section-title { 915 | text-align: center; 916 | margin-bottom: 60px; 917 | } 918 | 919 | .instructor-grid { 920 | display: grid; 921 | grid-template-columns: 1fr; 922 | gap: 30px; 923 | padding: 0 15px; 924 | } 925 | 926 | .instructor-card { 927 | background: hsl(220, 33%, 97%); 928 | padding: 20px; 929 | padding-bottom: 30px; 930 | border-radius: 8px; 931 | text-align: center; 932 | transition: var(--default-transition); 933 | } 934 | 935 | .instructor-card:hover { 936 | background: var(--white); 937 | box-shadow: 0 10px 30px hsla(0, 0%, 0%, 0.1); 938 | } 939 | 940 | .instructor-img-box { 941 | position: relative; 942 | border-radius: 8px; 943 | overflow: hidden; 944 | margin-bottom: 30px; 945 | } 946 | 947 | .instructor-img-box img { 948 | width: 100%; 949 | height: 100%; 950 | object-fit: cover; 951 | transition: var(--default-transition); 952 | } 953 | 954 | .instructor-card:hover .instructor-img-box img { 955 | transform: scale(1.1); 956 | } 957 | 958 | .instructor-card .social-link { 959 | position: absolute; 960 | bottom: -60px; 961 | left: 50%; 962 | transform: translateX(-50%); 963 | display: flex; 964 | justify-content: center; 965 | align-items: center; 966 | gap: 20px; 967 | transition: var(--default-transition); 968 | } 969 | 970 | .instructor-card .social-link a { 971 | background: var(--ultramarine-blue); 972 | color: var(--white); 973 | width: 35px; 974 | height: 35px; 975 | display: flex; 976 | justify-content: center; 977 | align-items: center; 978 | border-radius: 4px; 979 | transition: var(--default-transition); 980 | } 981 | 982 | .instructor-card .social-link a:hover { 983 | background: var(--red-orange-color-wheel); 984 | } 985 | 986 | .instructor-card:hover .social-link { 987 | bottom: 20px; 988 | } 989 | 990 | .instructor-name { 991 | color: var(--oxford-blue); 992 | font-size: var(--fs-4); 993 | font-weight: var(--fw-7); 994 | margin-bottom: 10px; 995 | transition: var(--default-transition); 996 | } 997 | 998 | .instructor-card:hover .instructor-name { 999 | color: var(--red-orange-color-wheel); 1000 | } 1001 | 1002 | .instructor-title { 1003 | color: var(--ultramarine-blue); 1004 | font-family: 'Montserrat', sans-serif; 1005 | font-size: var(--fs-6); 1006 | } 1007 | 1008 | /* =========== TESTIMONIAL =========== */ 1009 | 1010 | .testimonials { 1011 | padding: var(--py) var(--px); 1012 | background: var(--cultured); 1013 | } 1014 | 1015 | .testimonials .section-subtitle { 1016 | margin-bottom: 15px; 1017 | } 1018 | 1019 | .testimonials .section-title { 1020 | margin-bottom: 30px; 1021 | } 1022 | 1023 | testimonials-right { 1024 | padding: 50px 15px 0; 1025 | } 1026 | 1027 | .testimonials-card { 1028 | position: relative; 1029 | background: var(--white); 1030 | border-radius: 8px; 1031 | padding: 40px; 1032 | box-shadow: 0 15px 30px hsla(0, 0%, 0%, 0.1); 1033 | } 1034 | 1035 | .testimonials .quote-img { 1036 | position: absolute; 1037 | bottom: 40px; 1038 | right: 40px; 1039 | z-index: 1; 1040 | } 1041 | 1042 | .testimonials-text { 1043 | color: var(--sonic-silver); 1044 | font-family: 'Montserrat', sans-serif; 1045 | font-size: var(--fs-6); 1046 | line-height: 1.6; 1047 | margin-bottom: 20px; 1048 | } 1049 | 1050 | .testimonials-client { 1051 | position: relative; 1052 | display: flex; 1053 | align-items: center; 1054 | gap: 20px; 1055 | z-index: 2; 1056 | } 1057 | 1058 | .client-img-box { 1059 | border: 2px solid var(--red-orange-color-wheel); 1060 | border-radius: 8px; 1061 | padding: 10px; 1062 | } 1063 | 1064 | .client-img-box img { 1065 | border-radius: 8px; 1066 | } 1067 | 1068 | .client-detail .client-name { 1069 | color: var(--oxford-blue); 1070 | font-size: var(--fs-4); 1071 | line-height: 1.2; 1072 | font-weight: var(--fw-7); 1073 | margin-bottom: 5px; 1074 | } 1075 | 1076 | .client-detail .client-title { 1077 | color: var(--red-orange-color-wheel); 1078 | font-size: var(--fs-6); 1079 | } 1080 | 1081 | /* =========== BLOG =========== */ 1082 | 1083 | .blog { 1084 | padding: var(--py) var(--px) 250px; 1085 | } 1086 | 1087 | .blog .section-subtitle { 1088 | text-align: center; 1089 | margin: 15px; 1090 | } 1091 | 1092 | .blog .section-title { 1093 | text-align: center; 1094 | margin-bottom: 60px; 1095 | } 1096 | 1097 | .blog-grid { 1098 | display: grid; 1099 | grid-template-columns: 1fr; 1100 | gap: 30px; 1101 | } 1102 | 1103 | .blog-card { 1104 | background: var(--white); 1105 | border-radius: 8px; 1106 | box-shadow: 0 10px 30px hsla(0, 0%, 0%, 0.1); 1107 | overflow: hidden; 1108 | } 1109 | 1110 | .blog-banner-box { 1111 | overflow: hidden; 1112 | } 1113 | 1114 | .blog-banner-box img { 1115 | width: 100%; 1116 | height: 100%; 1117 | object-fit: cover; 1118 | transition: var(--default-transition); 1119 | } 1120 | 1121 | .blog-card:hover .blog-banner-box img { 1122 | transform: scale(1.1); 1123 | } 1124 | 1125 | .blog-content { 1126 | padding: 30px; 1127 | padding-bottom: 20px; 1128 | } 1129 | 1130 | .blog-title { 1131 | padding-bottom: 25px; 1132 | border-radius: 1px solid var(--light-gray); 1133 | margin-bottom: 15px; 1134 | } 1135 | 1136 | .blog-title a { 1137 | color: var(--oxford-blue); 1138 | font-size: var(--fs-4); 1139 | font-weight: var(--fw-7); 1140 | transition: var(--default-transition); 1141 | } 1142 | 1143 | .blog-card:hover .blog-title a { 1144 | color: var(--red-orange-color-wheel); 1145 | } 1146 | 1147 | .blog-content .wrapper { 1148 | position: relative; 1149 | display: flex; 1150 | justify-content: space-between; 1151 | align-items: center; 1152 | gap: 5px; 1153 | } 1154 | 1155 | .blog-content .wrapper::before { 1156 | content: ''; 1157 | position: absolute; 1158 | top: 50%; 1159 | left: 50%; 1160 | transform: translate(-50%, -50%); 1161 | background: var(--light-gray); 1162 | width: 1px; 1163 | height: 15px; 1164 | } 1165 | 1166 | .blog-publish-date, 1167 | .blog-comment { 1168 | display: flex; 1169 | align-items: center; 1170 | gap: 10px; 1171 | } 1172 | 1173 | :is(.blog-publish-date, .blog-comment) a { 1174 | color: var(--sonic-silver); 1175 | font-family: 'Montserrat', sans-serif; 1176 | font-size: var(--fs-6); 1177 | transition: var(--default-transition); 1178 | } 1179 | 1180 | :is(.blog-publish-date, .blog-comment) a:hover { 1181 | color: var(--oxford-blue); 1182 | } 1183 | 1184 | /* =========== CONTACT =========== */ 1185 | 1186 | .contact { 1187 | position: relative; 1188 | } 1189 | 1190 | .contact-card { 1191 | position: absolute; 1192 | top: 0; 1193 | left: 50%; 1194 | transform: translate(-50%, -50%); 1195 | background: var(--ultramarine-blue); 1196 | width: calc(100% - var(--px)); 1197 | padding: 30px 20px; 1198 | display: grid; 1199 | grid-template-columns: 1fr; 1200 | gap: 30px; 1201 | border-radius: 8px; 1202 | overflow: hidden; 1203 | } 1204 | 1205 | .contact-card-bg { 1206 | position: absolute; 1207 | width: auto; 1208 | max-width: 100%; 1209 | top: -2px; 1210 | left: -2px; 1211 | } 1212 | 1213 | .contact-card h2 { 1214 | position: relative; 1215 | font-size: 30px; 1216 | color: var(--white); 1217 | font-weight: var(--fw-8); 1218 | text-align: center; 1219 | } 1220 | 1221 | .contact .btn-primary { 1222 | justify-self: center; 1223 | } 1224 | 1225 | 1226 | /* =========== FOOTER =========== */ 1227 | 1228 | footer { 1229 | background: var(--oxford-blue); 1230 | } 1231 | 1232 | .footer-grid { 1233 | display: grid; 1234 | grid-template-columns: 1fr; 1235 | gap: 50px; 1236 | padding: 220px var(--px) 80px; 1237 | } 1238 | 1239 | .footer-logo { 1240 | margin-bottom: 25px; 1241 | } 1242 | 1243 | .footer-text { 1244 | font-family: 'Montserrat', sans-serif; 1245 | font-size: var(--fs-6); 1246 | color: var(--lavender-blue); 1247 | margin-bottom: 35px; 1248 | line-height: 1.6; 1249 | } 1250 | 1251 | .social-link { 1252 | display: flex; 1253 | align-items: center; 1254 | gap: 20px; 1255 | } 1256 | 1257 | .social-link a { 1258 | background: hsla(0, 0%, 100%, 0.1); 1259 | width: 45px; 1260 | height: 45px; 1261 | display: flex; 1262 | justify-content: center; 1263 | align-items: center; 1264 | border-radius: 4px; 1265 | transition: var(--default-transition); 1266 | } 1267 | 1268 | .social-link a:hover { 1269 | background: var(--red-orange-color-wheel); 1270 | } 1271 | 1272 | .social-link ion-icon { 1273 | font-size: 20px; 1274 | color: var(--white); 1275 | } 1276 | 1277 | .grid-item .item-heading { 1278 | font-size: var(--fs-4); 1279 | color: var(--white); 1280 | margin-bottom: 25px; 1281 | } 1282 | 1283 | .grid-item .list-item:not(:last-child) { 1284 | margin-bottom: 10px; 1285 | } 1286 | 1287 | .grid-item .list-item a { 1288 | display: inline-block; 1289 | font-family: 'Montserrat', sans-serif; 1290 | color: var(--lavender-blue); 1291 | font-size: var(--fs-6); 1292 | transition: var(--default-transition); 1293 | } 1294 | 1295 | .grid-item .list-item a:hover { 1296 | transform: translateX(10px); 1297 | color: var(--red-orange-color-wheel); 1298 | } 1299 | 1300 | .grid-item .wrapper { 1301 | position: relative; 1302 | border-radius: 8px; 1303 | overflow: hidden; 1304 | } 1305 | 1306 | .grid-item .wrapper input { 1307 | width: 100%; 1308 | padding: 20px 30px; 1309 | padding-right: 70px; 1310 | color: var(--oxford-blue); 1311 | font-family: 'Montserrat', sans-serif; 1312 | font-size: var(--fs-6); 1313 | border: none; 1314 | outline: none; 1315 | } 1316 | 1317 | .grid-item .send-btn { 1318 | position: absolute; 1319 | top: 0; 1320 | right: 0; 1321 | width: 62px; 1322 | height: 62px; 1323 | background: var(--red-orange-color-wheel); 1324 | display: flex; 1325 | justify-content: center; 1326 | align-items: center; 1327 | transition: var(--default-transition); 1328 | } 1329 | 1330 | .grid-item .send-btn ion-icon { 1331 | font-size: 25px; 1332 | color: var(--white); 1333 | } 1334 | 1335 | .grid-item .send-btn:hover { 1336 | background: var(--ultramarine-blue); 1337 | } 1338 | 1339 | .copyright { 1340 | background: hsl(231, 90%, 8%); 1341 | text-align: center; 1342 | color: var(--lavender-blue); 1343 | font-size: var(--fs-6); 1344 | font-family: 'Montserrat', sans-serif; 1345 | padding: 15px var(--py); 1346 | line-height: 1.7; 1347 | } 1348 | 1349 | .copyright a { 1350 | display: inline-block; 1351 | color: var(--red-orange-color-wheel); 1352 | transition: var(--default-transition); 1353 | } 1354 | 1355 | .copyright a:hover { 1356 | color: var(--ultramarine-blue); 1357 | } 1358 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Alpha97 - Online Courses & Education 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 |
28 | 62 |
63 | 64 |
65 | 66 |
67 |
68 | art shape 69 |
70 |
71 | art shape 72 |
73 |
74 | art shape 75 |
76 |
77 | art shape 78 |
79 | 80 |
81 |

82 | Welcome To Mohit Coaching 83 |

84 | 85 |

86 | Get Class from Top student 87 | Instructor Line 88 |

89 | 90 |

91 | Lorem ipsum dolor sit amet consectetur adipiscing elit tristique facilisis, 92 | interdum euismod posuere odio placerat mauris at. 93 |

94 | 95 |
96 | 100 | 101 | 105 |
106 |
107 | 108 |
109 |
110 | colorful background shape 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 |
119 |
120 |
121 | 122 | 123 |
124 |

Course Category

125 |

Explore Popular Courses

126 |
    127 |
  • 128 |
    129 | category icon 130 | category icon white 131 |
    132 |
    133 |

    134 | Learn Data Science 135 |

    136 |

    Data is Everything

    137 |
    138 |
    • 139 | 140 |
  • 141 |
    142 | category icon 143 | category icon white 144 |
    145 |
    146 |

    147 | Business Strategy 148 |

    149 |

    Grow Your Business

    150 |
    151 |
    • 152 | 153 |
  • 154 |
    155 | category icon 156 | category icon white 157 |
    158 |
    159 |

    160 | Learn Design & Art 161 |

    162 |

    Make Good Design

    163 |
    164 |
    • 165 | 166 |
  • 167 |
    168 | category icon 169 | category icon white 170 |
    171 |
    172 |

    173 | Improve Lifestyle 174 |

    175 |

    Learn New Skills

    176 |
    177 |
    • 178 | 179 |
  • 180 |
    181 | category icon 182 | category icon white 183 |
    184 |
    185 |

    186 | Learn Marketing 187 |

    188 |

    Improve Your Business

    189 |
    190 |
    • 191 | 192 |
  • 193 |
    194 | category icon 195 | category icon white 196 |
    197 |
    198 |

    199 | Learn Finance 200 |

    201 |

    Worth to Learn

    202 |
    203 |
    • 204 |
205 |
206 | 207 | 208 |
209 |
210 |
211 | about bg 212 | about person 213 | 214 | 215 |
216 |
217 | 218 |
219 |

About Us

220 |

We Have Best Online Education

221 |

222 | Lorem ipsum dolor sit amet consectetur adipiscing elit, 223 | faucibus montes magnis integer sed dis donec, odio ante 224 | ac habitasse scelerisque ultricies. Turpis tincidunt 225 | malesuada a ultrices convallis primis luctus aliquam 226 | sociis, arcu maecenas penatibus praesent duis habitasse 227 | hendrerit lectus. 228 |

229 | 230 |
    231 |
  • 232 | 233 |

    Lorem ipsum dolor sit amet consectetur adipiscing.

    234 |
    • 235 | 236 |
  • 237 | 238 |

    Lorem ipsum dolor sit amet consectetur adipiscing.

    239 |
    • 240 | 241 |
  • 242 | 243 |

    Lorem ipsum dolor sit amet consectetur adipiscing.

    244 |
    • 245 |
246 | 247 | 251 |
252 |
253 | 254 | 255 |
256 |

Our Online Courses

257 |

Find The Best Online Course For You

258 | 259 |
260 |
261 |
262 | course banner 263 |
264 | Business 265 | Marketing 266 |
267 |
268 | 269 |
270 |

271 | Become product manager learn skills. 272 |

273 |
274 |
275 | course instructor img 276 | Daniel Sams 277 |
278 | 279 |
280 | 281 |

5.0 (3k)

282 |
283 |
284 | 285 |
286 |
$50.00
287 |
288 |
289 | user icon 290 |
291 | 292 |

580k

293 |
294 |
295 |
296 |
297 | 298 |
299 |
300 | course banner 301 |
302 | Business 303 | Marketing 304 |
305 |
306 | 307 |
308 |

309 | Fashion and luxury fashion in a changing. 310 |

311 |
312 |
313 | course instructor img 314 | Daniel Sams 315 |
316 | 317 |
318 | 319 |

4.8 (3k)

320 |
321 |
322 | 323 |
324 |
$80.00
325 |
326 |
327 | user icon 328 |
329 | 330 |

545k

331 |
332 |
333 |
334 |
335 | 336 |
337 |
338 | course banner 339 |
340 | Business 341 | Marketing 342 |
343 |
344 | 345 |
346 |

347 | Learning to write as professional. 348 |

349 |
350 |
351 | course instructor img 352 | Daniel Sams 353 |
354 | 355 |
356 | 357 |

4.1 (3k)

358 |
359 |
360 | 361 |
362 |
$29.00
363 |
364 |
365 | user icon 366 |
367 | 368 |

317k

369 |
370 |
371 |
372 |
373 | 374 |
375 |
376 | course banner 377 |
378 | Business 379 | Marketing 380 |
381 |
382 | 383 |
384 |

385 | Improving accessibility of your markdown. 386 |

387 |
388 |
389 | course instructor img 390 | Daniel Sams 391 |
392 | 393 |
394 | 395 |

4.9 (3k)

396 |
397 |
398 | 399 |
400 |
$81.00
401 |
402 |
403 | user icon 404 |
405 | 406 |

259k

407 |
408 |
409 |
410 |
411 | 412 |
413 |
414 | course banner 415 |
416 | Business 417 | Marketing 418 |
419 |
420 | 421 |
422 |

423 | Master query in a short period of time. 424 |

425 |
426 |
427 | course instructor img 428 | Daniel Sams 429 |
430 | 431 |
432 | 433 |

4.6 (3k)

434 |
435 |
436 | 437 |
438 |
$56.00
439 |
440 |
441 | user icon 442 |
443 | 444 |

309k

445 |
446 |
447 |
448 |
449 | 450 |
451 |
452 | course banner 453 |
454 | Business 455 | Marketing 456 |
457 |
458 | 459 |
460 |

461 | Business intelligent anaylyst course 2023. 462 |

463 |
464 |
465 | course instructor img 466 | Daniel Sams 467 |
468 | 469 |
470 | 471 |

4.9 (3k)

472 |
473 |
474 | 475 |
476 |
$95.00
477 |
478 |
479 | user icon 480 |
481 | 482 |

425k

483 |
484 |
485 |
486 |
487 |
488 | 489 | 493 |
494 | 495 | 496 |
497 |
498 |
499 | 500 |
501 | 502 | 508 |
509 | 510 |
511 |

Our Events

512 |

Join Our Upcoming Events

513 |
514 |
515 |
516 |

29

517 |

Jan, 2023

518 |
519 |
520 |
521 |

12:45 PM to 5:30 PM

522 |

Norway

523 |
524 | Business Ideas Workshop 525 |
526 |
527 | 528 |
529 |
530 |

15

531 |

Feb, 2023

532 |
533 |
534 |
535 |

12:45 PM to 5:30 PM

536 |

Norway

537 |
538 | Street Performance: Call for Art 539 |
540 |
541 | 542 |
543 |
544 |

20

545 |

Apr, 2023

546 |
547 |
548 |
549 |

12:45 PM to 5:30 PM

550 |

Norway

551 |
552 | Digital Transformation Conference 553 |
554 |
555 |
556 |
557 |
558 | 559 | 560 |
561 |
562 |

Core Features

563 |

See What Our Mission Are

564 |
    565 |
  • 566 |
    567 | feature icon 568 |
    569 | 570 |
    571 |

    Student Life

    572 |

    Lorem ipsum dolor sit amet consectetur adipiscing elit, 573 | fermentum ornare vulputate himenaeos rutrum montes nibh

    574 |
    575 |
    • 576 | 577 |
  • 578 |
    579 | feature icon 580 |
    581 | 582 |
    583 |

    Best Online Class

    584 |

    Lorem ipsum dolor sit amet consectetur adipiscing elit, 585 | fermentum ornare vulputate himenaeos rutrum montes nibh

    586 |
    587 |
    • 588 | 589 |
  • 590 |
    591 | feature icon 592 |
    593 | 594 |
    595 |

    24/7 Program

    596 |

    Lorem ipsum dolor sit amet consectetur adipiscing elit, 597 | fermentum ornare vulputate himenaeos rutrum montes nibh

    598 |
    599 |
    • 600 |
601 |
602 | 603 |
604 | core features 605 |
606 |
607 | 608 | 609 |
610 |

Best Coach

611 |

Our Expert Instructor

612 | 613 |
614 |
615 |
616 | instructor 617 | 630 |
631 |

James King

632 |

Instructor

633 |
634 | 635 |
636 |
637 | instructor 638 | 651 |
652 |

Mark Henry

653 |

Instructor

654 |
655 | 656 |
657 |
658 | instructor 659 | 672 |
673 |

Moona Lisa

674 |

Instructor

675 |
676 | 677 |
678 |
679 | instructor 680 | 693 |
694 |

Marina John

695 |

Instructor

696 |
697 |
698 |
699 | 700 | 701 |
702 |
703 |

Testimonial

704 |

What Our Clients Say About Us

705 |

706 | Lorem ipsum dolor sit amet consectetur adipiscing elit 707 | fringilla feugiat platea rhoncus ut aliquam luctus, 708 | tempor massa hac ante leo vestibulum nibh cursus 709 | suscipit mauris cum class. 710 |

711 |
712 | 713 |
714 |
715 | quote icon 716 |

717 | "Lorem ipsum dolor sit amet consectetur adipiscing elit 718 | fringilla feugiat platea rhoncus ut aliquam luctus, 719 | tempor massa hac ante leo vestibulum nibh cursus 720 | suscipit mauris cum class". 721 |

722 |
723 |
724 | client 725 |
726 |
727 |

Meka Johns

728 |

Customer

729 |
730 |
731 |
732 |
733 |
734 | 735 | 736 | 737 |
738 |

Our Blog

739 |

Latest Blog & News

740 | 741 |
742 |
743 |
744 | blog banner 745 |
746 |
747 |

748 | Lorem ipsum dolor sit amet 749 |

750 |
751 |
752 | calender icon 753 | 05 Jan, 2023 754 |
755 |
756 | comment icon 757 | 4 Comments 758 |
759 |
760 |
761 |
762 | 763 |
764 |
765 | blog banner 766 |
767 |
768 |

769 | Lorem ipsum dolor sit amet 770 |

771 |
772 |
773 | calender icon 774 | 09 Jan, 2023 775 |
776 |
777 | comment icon 778 | 10 Comments 779 |
780 |
781 |
782 |
783 | 784 |
785 |
786 | blog banner 787 |
788 |
789 |

790 | Lorem ipsum dolor sit amet 791 |

792 |
793 |
794 | calender icon 795 | 15 Feb, 2023 796 |
797 |
798 | comment icon 799 | 12 Comments 800 |
801 |
802 |
803 |
804 |
805 |
806 | 807 | 808 |
809 |
810 | shape 811 |

Start Your Best Online Classes WIth Us

812 | 813 | 817 |
818 |
819 | 820 |
821 | 822 | 823 | 824 | 825 | 915 | 916 |
917 | 918 | 919 | 920 | 921 | 922 | 923 | 924 | 925 | 926 | 927 | 928 | 929 | 930 | 931 | 932 | 933 | 934 | --------------------------------------------------------------------------------