├── .gitattributes ├── .gitignore ├── .stickler.yml ├── LICENSE ├── README.md ├── css └── styles.css ├── fonts ├── Gotham-Bold.otf ├── Gotham-Light.otf ├── GothamBold.ttf ├── GothamLight.ttf └── helvetica-neue.ttf ├── img ├── logo.png ├── projeto.png └── screenshot.gif ├── index.html ├── search.html ├── stylelint.config.js └── video └── video.mp4 /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.sass 2 | *.scss 3 | *.map 4 | *.json 5 | bootstrap.min.js 6 | node_modules 7 | -------------------------------------------------------------------------------- /.stickler.yml: -------------------------------------------------------------------------------- 1 | # add the linters you want stickler to use for this project 2 | linters: 3 | stylelint: 4 | # indicate where is the config file for stylelint 5 | config: 'stylelint.config.js' 6 | 7 | # PLEASE DO NOT enable auto fixing options 8 | # if you need extra support from you linter - do it in your local env as described in README for this config 9 | 10 | # find full documentation here: https://stickler-ci.com/docs 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Kevin Alves 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 |

HTML Capstone Project

2 | 3 |
4 | 5 | [![Status](https://img.shields.io/badge/status-active-success.svg)]() 6 | [![Github Issues](https://img.shields.io/badge/GitHub-Issues-orange)](https://github.com/kevinfrontend/HTML-CSS-Capstone-Project/issues) 7 | [![GitHub2 Pull Requests](https://img.shields.io/badge/GitHub-Pull%20Requests-blue)](https://github.com/kevinfrontend/HTML-CSS-Capstone-Project/pulls) 8 | [![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE) 9 | [![Made By](https://img.shields.io/badge/Made%20By-Kevin%20Alves-brightgreen)](https://github.com/kevinfrontend) 10 | [![Twitter Follow](https://img.shields.io/twitter/follow/kevinfrontend?label=Follow%20Kevin%20on%20Twitter&style=social)](https://twitter.com/kevinfrontend) 11 | 12 |
13 | 14 | --- 15 | 16 | ## 📝 Content 17 |

18 | About   |    19 | Installing   |    20 | Built with   |    21 | Live Demo   |    22 | Presentation   |    23 | Author 24 |

25 | 26 | 27 | ## 🧐 About 28 |

This is an assigment for Microverse's HTML and CSS course, and the goal is to build your own personalized page, taking this project as parameter, so I designed a online courses shop, like udemy, pluralsight and others.

29 | 30 |

31 | 32 | projeto 33 | Project Screenshot 34 |

35 | 36 | --- 37 | 38 | ## 🔧 Built with 39 | 40 | - [HTML and CSS](https://www.w3schools.com/) - HTML5 and CSS3 41 | - [Sass](https://www.sass.com/) - CSS with Superpowers 42 | - [Stickler](https://stickler-ci.com) - A CSS Linter 43 | - [W3 HTML Validator](https://validator.w3.org/) - A Markup Validation Service 44 | - [Bootstrap 4](https://getbootstrap.com/) - The most popular HTML, CSS, and JS library in the world; 45 | - [JQuery](https://www.jquery.com/) - The Write Less, Do More, JavaScript Library; 46 | - [PhotoShop CC](https://adobe.com/) - The most powerfull photo editor ever made; 47 | 48 | ## 🔴 Live Demo 49 | 50 | [Live Demo](https://rawcdn.githack.com/kevinfrontend/HTML-CSS-Capstone-Project/80499605d8704766ebb4db52f8d89ccee5e8df5d/index.html) 51 | 52 | ## 📺 Video Presentation 53 | 54 | [Video Presentation](https://www.loom.com/share/caf9c0ce3cec45258e279555f6582b84) 55 | 56 | ### 🛠 Installing 57 | 58 | ``` 59 | - Clone or download this repository; 60 | - Unpack (if downloaded); 61 | - Execute index.html on your favorite browser; 62 | 63 | ``` 64 | ## ✒️ Autor 65 | 66 | 👤 **Kevin Alves** 67 | 68 | - Github: [@kevinfrontend](https://github.com/kevinfrontend) 69 | - Twitter: [@kevinfrontend](https://twitter.com/kevinfrontend) 70 | - Linkedin: [@kevinfrontend](https://www.linkedin.com/in/kevinfrontend/) 71 | 72 | ## 🤝 Contributing 73 | 74 | Contributions, issues and feature requests are welcome! 75 | 76 | Feel free to check the [issues page](https://github.com/kevinfrontend/HTML-CSS-Capstone-Project/issues). 77 | 78 | 79 | ## 👍 Show your support 80 | 81 | Give a ⭐️ if you like this project! 82 | 83 | 84 | ## 📝 License 85 | 86 | This project is free to use as learning purposes. For any external content (e.g. logo, images, ...), please contact the proper author and check their license of use. 87 | 88 | 89 | ## 📣 Note from Author to you: 90 | 91 | As always, I like to write some unrelated things here, to make our relationship closer, today I'd like to say a few things, remind you about the covid-19 outbreak: 92 | 93 | ``` 94 | Wash hands 🚿 ; 95 | Avoid touching people 👋; 96 | Stay home! Keep youself safe 🏡; 97 | Take care of your loved ones 👪; 98 | 99 | Wish you a Happy coding and a Happy life ❤️ 100 | ``` 101 | 102 | Template made by Kevin Alves 103 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @font-face { 4 | font-family: 'Gotham bold'; 5 | src: url("../fonts/Gotham-Bold.otf"), url("../fonts/GothamBold.ttf") format("truetype"); 6 | } 7 | 8 | @font-face { 9 | font-family: "Gotham light"; 10 | src: url("../fonts/Gotham-Light.otf") format("woff2"), url("../fonts/GothamLight.ttf") format("truetype"); 11 | } 12 | 13 | @font-face { 14 | font-family: "HelvNeue"; 15 | src: url("../fonts/helvetica-neue.ttf") format("truetype"); 16 | } 17 | 18 | @-webkit-keyframes slideInFromTop { 19 | 0% { 20 | -webkit-transform: translateY(240%); 21 | transform: translateY(240%); 22 | } 23 | 24 | 100% { 25 | -webkit-transform: translateY(0); 26 | transform: translateY(0); 27 | } 28 | } 29 | 30 | @keyframes slideInFromTop { 31 | 0% { 32 | -webkit-transform: translateY(240%); 33 | transform: translateY(240%); 34 | } 35 | 36 | 100% { 37 | -webkit-transform: translateY(0); 38 | transform: translateY(0); 39 | } 40 | } 41 | 42 | :root { 43 | font-size: 13px; 44 | } 45 | 46 | p, 47 | a { 48 | font-size: 1rem; 49 | outline: none; 50 | } 51 | 52 | .go-back { 53 | width: fit-content; 54 | width: -moz-fit-content; 55 | } 56 | 57 | header, 58 | .first-section, 59 | .first-section-left, 60 | .search-content, 61 | .categories, 62 | .categorie, 63 | .hot-promo, 64 | .trending, 65 | .suggestion, 66 | .course-box .text { 67 | display: -webkit-box; 68 | display: -ms-flexbox; 69 | display: flex; 70 | } 71 | 72 | .search { 73 | border-top-left-radius: 5px; 74 | border-bottom-left-radius: 5px; 75 | margin-left: auto; 76 | padding: 8px 10px; 77 | border: none; 78 | width: 35%; 79 | -webkit-transition: width ease-in 400ms; 80 | transition: width ease-in 400ms; 81 | } 82 | 83 | .search::-webkit-input-placeholder { 84 | font-style: italic; 85 | } 86 | 87 | .search::-ms-input-placeholder { 88 | font-style: italic; 89 | } 90 | 91 | main > form .search { 92 | max-width: 600px; 93 | } 94 | 95 | .categorie, 96 | .course-box, 97 | main > form .search { 98 | border: 1px solid rgba(0, 0, 0, 0.075); 99 | } 100 | 101 | h1, 102 | h2, 103 | h3 { 104 | font-family: "Gotham bold", Arial, Helvetica, sans-serif; 105 | } 106 | 107 | .first-section h1, 108 | .search-content, 109 | .categorie-svg, 110 | .hot-ads, 111 | .hot-promo-video-n-text, 112 | .course-box img, 113 | .add-to-cart { 114 | width: 100%; 115 | } 116 | 117 | .star { 118 | display: block; 119 | } 120 | 121 | .star::before { 122 | content: "★★★★★"; 123 | color: #f7bb56; 124 | margin-right: 5px; 125 | } 126 | 127 | html, 128 | body { 129 | height: 100%; 130 | color: #383838; 131 | font-family: "Gotham light", 'Times New Roman', Times, serif; 132 | } 133 | 134 | h4, 135 | h5, 136 | h6, 137 | option { 138 | font-family: "HelvNeue", 'Times New Roman', Times, serif; 139 | } 140 | 141 | body { 142 | background-color: #f9fbfd; 143 | } 144 | 145 | main a, 146 | footer a { 147 | color: #d35266; 148 | } 149 | 150 | .home-svg { 151 | margin-right: 10px; 152 | margin-left: 10px; 153 | } 154 | 155 | .home-svg svg { 156 | width: 20px; 157 | fill: #d35266; 158 | transition: fill ease 300ms; 159 | } 160 | 161 | header a { 162 | color: #d35266; 163 | transition: color ease 300ms; 164 | } 165 | 166 | .search-button svg { 167 | fill: #414141; 168 | height: 50%; 169 | display: block; 170 | margin: 0 auto; 171 | } 172 | 173 | .cart-list { 174 | margin-left: 10px; 175 | } 176 | 177 | .cart-list svg { 178 | height: 25px; 179 | fill: #d35266; 180 | transition: fill ease 300ms; 181 | } 182 | 183 | .home-svg svg:hover, 184 | .cart-list svg:hover { 185 | fill: white; 186 | } 187 | 188 | .logo a { 189 | height: 40px; 190 | background: url("../img/logo.png") no-repeat; 191 | display: block; 192 | width: 40px; 193 | background-size: contain; 194 | } 195 | 196 | .language-container a { 197 | padding: 3px 2px; 198 | border: 3px solid #d35266; 199 | width: 70px; 200 | text-align: center; 201 | color: #d35266; 202 | } 203 | 204 | header a:hover { 205 | text-decoration: none; 206 | color: #fff; 207 | } 208 | 209 | main a:hover, 210 | footer a:hover { 211 | color: #d35266; 212 | } 213 | 214 | header { 215 | height: 60px; 216 | padding: 10px 20px; 217 | padding-right: 10px; 218 | background-color: #383838; 219 | -webkit-box-pack: justify; 220 | -ms-flex-pack: justify; 221 | justify-content: space-between; 222 | -webkit-box-align: center; 223 | -ms-flex-align: center; 224 | align-items: center; 225 | } 226 | 227 | header .login { 228 | border: none; 229 | } 230 | 231 | /* WORKING ON FIRST SECTION */ 232 | .first-section { 233 | -webkit-box-align: center; 234 | -ms-flex-align: center; 235 | align-items: center; 236 | background-color: #e66f73; 237 | background-image: linear-gradient(315deg, #e06468 0%, #f9c1b1 74%); 238 | height: 300px; 239 | -webkit-box-pack: justify; 240 | -ms-flex-pack: justify; 241 | justify-content: space-between; 242 | padding: 30px; 243 | overflow: hidden; 244 | } 245 | 246 | .first-section h1 { 247 | font-size: 2.3rem; 248 | } 249 | 250 | .first-section h3 { 251 | font-size: 0.9rem; 252 | } 253 | 254 | .first-section .logo a { 255 | width: 200px; 256 | height: 200px; 257 | z-index: 1; 258 | position: relative; 259 | top: 107px; 260 | right: -101px; 261 | } 262 | 263 | .clouds { 264 | background: url("https://svgsilh.com/svg/1295100.svg") no-repeat; 265 | display: block; 266 | position: relative; 267 | width: 300px; 268 | height: 200px; 269 | background-size: contain; 270 | top: -20px; 271 | right: -67px; 272 | z-index: 0; 273 | -webkit-animation: 1s ease-out 0s 1 slideInFromTop; 274 | animation: 1s ease-out 0s 1 slideInFromTop; 275 | } 276 | 277 | .first-section-left { 278 | width: 40%; 279 | -webkit-box-orient: vertical; 280 | -webkit-box-direction: normal; 281 | -ms-flex-direction: column; 282 | flex-direction: column; 283 | -webkit-box-align: center; 284 | -ms-flex-align: center; 285 | align-items: center; 286 | margin-top: -50px; 287 | } 288 | 289 | .first-section-left h1 { 290 | width: -webkit-fit-content; 291 | width: fit-content; 292 | width: -moz-fit-content; 293 | } 294 | 295 | .search-content { 296 | height: 35px; 297 | margin: 0 auto; 298 | } 299 | 300 | .first-section-left .search-content { 301 | max-width: 400px; 302 | } 303 | 304 | .first-section-left .logo, 305 | .first-section-left .logo a { 306 | width: 50px; 307 | height: 50px; 308 | } 309 | 310 | .first-section-left .logo a { 311 | position: unset; 312 | } 313 | 314 | /* WORKING ON SEARCH */ 315 | 316 | .form-select { 317 | border: none; 318 | width: 100px; 319 | } 320 | 321 | .search:-ms-input-placeholder { 322 | font-style: italic; 323 | } 324 | 325 | .search::placeholder { 326 | font-style: italic; 327 | } 328 | 329 | .search:focus { 330 | width: 80%; 331 | outline: none; 332 | } 333 | 334 | .search2 { 335 | width: 70px; 336 | border: none; 337 | border-left: 1px solid rgba(0, 0, 0, 0.075); 338 | } 339 | 340 | .search2:focus { 341 | outline: none; 342 | } 343 | 344 | .search-button { 345 | width: 50px; 346 | height: 100%; 347 | border: none; 348 | border-top-right-radius: 5px; 349 | border-bottom-right-radius: 5px; 350 | -webkit-transition: background 200ms linear; 351 | transition: background 200ms linear; 352 | margin-right: auto; 353 | } 354 | 355 | .search-button:focus, 356 | button:focus { 357 | outline: none; 358 | } 359 | 360 | .search-button:hover { 361 | background: #d7d8d8; 362 | } 363 | 364 | /* WORKING ON CATEGORIE */ 365 | .categories { 366 | margin: 40px 0; 367 | -ms-flex-wrap: wrap; 368 | flex-wrap: wrap; 369 | } 370 | 371 | .categories div { 372 | -ms-flex-pack: distribute; 373 | justify-content: space-around; 374 | } 375 | 376 | .language-container a:hover { 377 | text-decoration: none; 378 | border-color: #f0bdbd; 379 | } 380 | 381 | .categories a:hover:not(.show-all) { 382 | text-decoration: none; 383 | } 384 | 385 | .show-all { 386 | text-align: end; 387 | margin: 15px 30px 0 0; 388 | } 389 | 390 | section > h4, 391 | section > .show-all { 392 | width: 100%; 393 | color: #383838; 394 | margin-bottom: 15px; 395 | } 396 | 397 | section > h4 { 398 | padding-bottom: 10px; 399 | border-bottom: 1px solid rgba(0, 0, 0, 0.075); 400 | } 401 | 402 | .categorie-anchor { 403 | margin: 5px; 404 | -webkit-box-flex: 1; 405 | -ms-flex: 1 1 120px; 406 | flex: 1 1 120px; 407 | max-width: 120px; 408 | } 409 | 410 | .categorie { 411 | margin: 10px 5px; 412 | width: 120px; 413 | -webkit-box-align: center; 414 | -ms-flex-align: center; 415 | align-items: center; 416 | -webkit-box-orient: vertical; 417 | -webkit-box-direction: normal; 418 | -ms-flex-direction: column; 419 | flex-direction: column; 420 | background-color: #fff; 421 | -webkit-transition: -webkit-transform 70ms ease-in; 422 | transition: -webkit-transform 70ms ease-in; 423 | transition: transform 70ms ease-in; 424 | transition: transform 70ms ease-in, -webkit-transform 70ms ease-in; 425 | padding: 20px; 426 | } 427 | 428 | .categorie h5 { 429 | width: -webkit-fit-content; 430 | width: fit-content; 431 | width: -moz-fit-content; 432 | font-size: 1rem; 433 | margin-top: 10px; 434 | } 435 | 436 | .categorie:hover { 437 | -webkit-transform: scale(1.1); 438 | transform: scale(1.1); 439 | } 440 | 441 | /* WORKING ON HOT ADS SECTION */ 442 | .hot-ads { 443 | background-color: #fff; 444 | padding: 20px; 445 | } 446 | 447 | .hot-promo-features h6 { 448 | max-width: 154px; 449 | } 450 | 451 | .search-sidebar h6 { 452 | margin-top: 20px; 453 | padding-bottom: 5px; 454 | border-bottom: 1px solid #d35266; 455 | margin-bottom: 20px; 456 | } 457 | 458 | .hot-promo-features h6 + h6 { 459 | margin-left: 10px; 460 | border-left: 1px solid black; 461 | padding-left: 10px; 462 | } 463 | 464 | .hot-ads .video-text h6 { 465 | display: none; 466 | } 467 | 468 | .hot-ads .hot-promo-vid { 469 | display: block; 470 | max-height: 350px; 471 | background-size: cover; 472 | } 473 | 474 | .hot-ads .video-text { 475 | color: #fff; 476 | top: 30%; 477 | left: 50%; 478 | -webkit-transform: translateX(-50%); 479 | transform: translateX(-50%); 480 | text-align: center; 481 | width: 400px; 482 | width: -webkit-fit-content; 483 | width: fit-content; 484 | width: -moz-fit-content; 485 | } 486 | 487 | .course-title h4 { 488 | font-size: 1.125rem; 489 | } 490 | 491 | .hot-ads .video-text h4 { 492 | font-size: 1.875rem; 493 | margin-bottom: 20px; 494 | } 495 | 496 | .footer-categories h5 { 497 | border-bottom: 1px solid #d35266; 498 | padding-bottom: 10px; 499 | } 500 | 501 | .hot-ads .hot-promo-text { 502 | width: 50%; 503 | margin-top: 20px; 504 | } 505 | 506 | .hot-ads .hot-promo-text h5 { 507 | width: -webkit-fit-content; 508 | width: fit-content; 509 | width: -moz-fit-content; 510 | -ms-flex-item-align: center; 511 | -ms-grid-row-align: center; 512 | align-self: center; 513 | font-size: 1rem; 514 | text-align: justify; 515 | margin-bottom: 15px; 516 | } 517 | 518 | .course-star { 519 | display: block; 520 | font-size: 0.8125rem; 521 | } 522 | 523 | .hot-ads .course-star { 524 | margin: 40px 0 10px 0; 525 | } 526 | 527 | .course-price { 528 | display: block; 529 | } 530 | 531 | .hot-ads .course-price { 532 | font-size: 1.25rem; 533 | } 534 | 535 | .hot-ads .big-button { 536 | margin-top: 10px; 537 | border: none; 538 | color: white; 539 | background-color: #d35266; 540 | padding: 3px; 541 | -webkit-transition: background-color linear 300ms; 542 | transition: background-color linear 300ms; 543 | } 544 | 545 | .hot-ads .hot-promo-text .course-price, 546 | .hot-ads .hot-promo-text .course-star, 547 | .hot-ads .hot-promo-text .big-button { 548 | width: 65%; 549 | -ms-flex-item-align: center; 550 | -ms-grid-row-align: center; 551 | align-self: center; 552 | } 553 | 554 | .hot-ads .big-button:hover { 555 | background-color: #c02940; 556 | } 557 | 558 | .hot-ad-heading { 559 | text-transform: uppercase; 560 | font-weight: 700; 561 | margin-bottom: 15px; 562 | } 563 | 564 | .hot-promo { 565 | -webkit-box-align: center; 566 | -ms-flex-align: center; 567 | align-items: center; 568 | position: relative; 569 | -ms-flex-wrap: wrap; 570 | flex-wrap: wrap; 571 | } 572 | 573 | .hot-promo-video-n-text { 574 | margin-top: 10px; 575 | overflow: hidden; 576 | } 577 | 578 | .hot-promo-features { 579 | width: -webkit-fit-content; 580 | width: fit-content; 581 | width: -moz-fit-content; 582 | font-size: 0.75rem; 583 | -ms-flex-item-align: center; 584 | -ms-grid-row-align: center; 585 | align-self: center; 586 | } 587 | 588 | /* TRENDING SECTION */ 589 | .trending, 590 | .suggestion { 591 | -ms-flex-wrap: wrap; 592 | flex-wrap: wrap; 593 | } 594 | 595 | .section-course { 596 | padding-top: 40px; 597 | } 598 | 599 | .course-box { 600 | margin: 2%; 601 | max-width: 73%; 602 | min-width: 260px; 603 | background-color: #fff; 604 | padding: 10px; 605 | -webkit-box-flex: 1; 606 | -ms-flex: 1 1 auto; 607 | flex: 1 1 auto; 608 | -webkit-transition: background-color ease-in 100ms; 609 | transition: background-color ease-in 100ms; 610 | } 611 | 612 | .course-box .text { 613 | padding: 10px; 614 | -webkit-box-orient: vertical; 615 | -webkit-box-direction: normal; 616 | -ms-flex-direction: column; 617 | flex-direction: column; 618 | -webkit-box-pack: justify; 619 | -ms-flex-pack: justify; 620 | justify-content: space-between; 621 | } 622 | 623 | .course-box img { 624 | height: 170px; 625 | -o-object-fit: cover; 626 | object-fit: cover; 627 | } 628 | 629 | .course-box img:hover { 630 | cursor: pointer; 631 | } 632 | 633 | .course-box:hover { 634 | background-color: #fafafa; 635 | } 636 | 637 | .course-price span { 638 | color: #888; 639 | text-decoration: line-through; 640 | } 641 | 642 | .dropdown { 643 | width: 90%; 644 | max-width: 600px; 645 | } 646 | 647 | .add-to-cart { 648 | margin-top: 10px; 649 | margin-bottom: 10px; 650 | border: none; 651 | text-transform: capitalize; 652 | background-color: #d35266; 653 | color: white; 654 | transition: all ease 300ms; 655 | } 656 | 657 | .add-to-cart:hover { 658 | background-color: #c02940; 659 | } 660 | 661 | /* WORKING ON FOOTER */ 662 | footer { 663 | margin-top: 30px; 664 | border-width: thin; 665 | } 666 | 667 | footer, 668 | .footer-2nd-div { 669 | border-top: 1px solid rgba(128, 128, 128, 0.486); 670 | padding-top: 20px; 671 | } 672 | 673 | .footer-1st-div { 674 | -ms-flex-pack: distribute; 675 | justify-content: space-around; 676 | } 677 | 678 | .footer-div { 679 | width: 100%; 680 | } 681 | 682 | .footer-div > div { 683 | margin: 0 auto; 684 | } 685 | 686 | .language-container { 687 | height: -webkit-fit-content; 688 | height: fit-content; 689 | height: -moz-fit-content; 690 | max-width: 200px; 691 | -ms-flex-item-align: center; 692 | -ms-grid-row-align: center; 693 | align-self: center; 694 | } 695 | 696 | .language-container p { 697 | margin-bottom: 0; 698 | } 699 | 700 | .languages > div { 701 | margin-bottom: 10px; 702 | -webkit-box-align: center; 703 | -ms-flex-align: center; 704 | align-items: center; 705 | } 706 | 707 | .footer-logo { 708 | -webkit-box-flex: 1; 709 | -ms-flex: 1 1 auto; 710 | flex: 1 1 auto; 711 | max-width: 50%; 712 | min-width: 250px; 713 | } 714 | 715 | .footer-logo h3 { 716 | color: #888; 717 | } 718 | 719 | .footer-categories { 720 | max-width: 160px; 721 | } 722 | 723 | footer ul { 724 | padding: 0; 725 | } 726 | 727 | .footer-categories ul { 728 | -webkit-box-orient: vertical; 729 | -webkit-box-direction: normal; 730 | -ms-flex-direction: column; 731 | flex-direction: column; 732 | max-height: 200px; 733 | width: 100%; 734 | max-width: 49%; 735 | min-width: 150px; 736 | } 737 | 738 | footer ul li { 739 | list-style-type: none; 740 | padding: 5px; 741 | } 742 | 743 | .footer-categories ul li { 744 | -webkit-box-flex: 1; 745 | -ms-flex: 1 1 30px; 746 | flex: 1 1 30px; 747 | } 748 | 749 | .copy::after { 750 | content: "©"; 751 | margin-left: 5px; 752 | } 753 | 754 | .genericon { 755 | display: inline-block; 756 | color: #666; 757 | margin-right: 10px; 758 | line-height: 20px; 759 | margin-bottom: 15px; 760 | } 761 | 762 | .genericon:hover { 763 | text-decoration: none; 764 | } 765 | 766 | .genericon-facebook:hover { 767 | color: #3b5998; 768 | } 769 | 770 | .genericon-twitter:hover { 771 | color: #1da1f2; 772 | } 773 | 774 | .genericon-instagram { 775 | font-size: 23px; 776 | } 777 | 778 | .genericon-instagram:hover { 779 | color: #1da1f2; 780 | } 781 | 782 | .genericon-tumblr { 783 | font-size: 20px; 784 | } 785 | 786 | .genericon-tumblr:hover { 787 | color: #35465c; 788 | } 789 | 790 | .genericon-linkedin:hover { 791 | color: #0077b5; 792 | } 793 | 794 | /* WORKING ON SEARCH PAGE */ 795 | 796 | .first-div-search { 797 | background-color: #e66f73; 798 | background-image: linear-gradient(315deg, #e06468 0%, #f9c1b1 74%); 799 | } 800 | 801 | .search-sidebar { 802 | border-right: 1px solid rgba(128, 128, 128, 0.486); 803 | padding-right: 20px; 804 | width: 200px; 805 | font-size: 0.8rem; 806 | } 807 | 808 | .search-sidebar label { 809 | display: -webkit-box; 810 | display: -ms-flexbox; 811 | display: flex; 812 | align-items: center; 813 | margin-right: 10px; 814 | } 815 | 816 | .search-sidebar input { 817 | margin-right: 5px; 818 | } 819 | 820 | .container .course-search { 821 | max-width: 100%; 822 | -ms-flex-wrap: wrap; 823 | flex-wrap: wrap; 824 | display: -webkit-box; 825 | display: -ms-flexbox; 826 | display: flex; 827 | margin-left: 20px; 828 | } 829 | 830 | .container .course-search img { 831 | max-width: 290px; 832 | min-width: 230px; 833 | height: 200px; 834 | -webkit-box-flex: 1; 835 | -ms-flex: 1 1; 836 | flex: 1 1; 837 | margin: 0 auto; 838 | } 839 | 840 | .container .course-search .text { 841 | max-width: 290px; 842 | margin: 0 auto; 843 | min-width: 241px; 844 | -webkit-box-flex: 1; 845 | -ms-flex: 1 1; 846 | flex: 1 1; 847 | } 848 | 849 | .first-search-div label + label { 850 | margin-left: 10px; 851 | } 852 | 853 | .show-sidebar { 854 | display: none; 855 | } 856 | 857 | .hide-filter { 858 | display: block; 859 | } 860 | 861 | @media (min-width: 480px) { 862 | :root { 863 | font-size: 13px; 864 | } 865 | 866 | header { 867 | font-size: 1.2rem; 868 | } 869 | 870 | .header-container .logo { 871 | margin-left: 12%; 872 | } 873 | 874 | .purchase-list { 875 | margin-right: 12%; 876 | } 877 | 878 | .first-section-left h1 { 879 | font-size: 2.9rem; 880 | } 881 | 882 | .first-section-left h3 { 883 | font-size: 1.6rem; 884 | } 885 | 886 | .hot-ads .video-text h6 { 887 | display: block; 888 | } 889 | 890 | .footer-div { 891 | width: unset; 892 | } 893 | 894 | .footer-div > div { 895 | margin: unset; 896 | } 897 | } 898 | 899 | @media (min-width: 545px) { 900 | .show-sidebar { 901 | display: block; 902 | } 903 | 904 | .hide-filter { 905 | display: none; 906 | } 907 | } 908 | 909 | @media (min-width: 575px) { 910 | .container .course-search img { 911 | max-width: 290px; 912 | } 913 | 914 | .container .course-search .text { 915 | max-width: 300px; 916 | min-width: unset; 917 | margin: unset; 918 | } 919 | } 920 | 921 | @media (min-width: 768px) { 922 | .form-select { 923 | margin-left: auto; 924 | border-top-left-radius: 5px; 925 | border-bottom-left-radius: 5px; 926 | } 927 | 928 | .first-section-left h1 { 929 | font-size: 3.9rem; 930 | } 931 | 932 | .first-section .search { 933 | margin-left: 0; 934 | border-top-left-radius: 0; 935 | border-bottom-left-radius: 0; 936 | } 937 | 938 | .course-box { 939 | max-width: 40%; 940 | } 941 | 942 | .first-section-left .search-content { 943 | max-width: 100%; 944 | } 945 | 946 | .container .course-search { 947 | max-width: 100%; 948 | } 949 | 950 | .container .course-search img { 951 | height: 235px; 952 | } 953 | } 954 | 955 | @media (min-width: 980px) { 956 | .hot-promo-text { 957 | margin-top: 20px; 958 | -ms-flex-pack: distribute; 959 | justify-content: space-around; 960 | } 961 | 962 | .hot-promo-text div { 963 | -ms-flex-item-align: center; 964 | -ms-grid-row-align: center; 965 | align-self: center; 966 | width: -webkit-fit-content; 967 | width: fit-content; 968 | width: -moz-fit-content; 969 | } 970 | 971 | .trending, 972 | .suggestion { 973 | -webkit-box-pack: normal !important; 974 | -ms-flex-pack: normal !important; 975 | justify-content: normal !important; 976 | } 977 | 978 | .container .course-search { 979 | max-width: 100%; 980 | max-height: 303px; 981 | -webkit-box-flex: 1; 982 | -ms-flex: 1 1 600px; 983 | flex: 1 1 600px; 984 | } 985 | 986 | .container .course-search h4 { 987 | font-size: 1.5rem; 988 | } 989 | 990 | .container .course-search .text { 991 | margin-left: 20px; 992 | max-width: 500px; 993 | height: 85%; 994 | } 995 | 996 | .container .course-search img { 997 | height: 200px; 998 | } 999 | 1000 | .footer-logo { 1001 | max-width: 30%; 1002 | } 1003 | 1004 | .course-box { 1005 | max-width: 20%; 1006 | -webkit-box-flex: 1; 1007 | -ms-flex: 1 1 400px; 1008 | flex: 1 1 400px; 1009 | } 1010 | } 1011 | 1012 | @media (min-width: 1200px) { 1013 | :root { 1014 | font-size: 16px; 1015 | } 1016 | 1017 | header { 1018 | font-size: 1rem; 1019 | } 1020 | 1021 | .lp-hide { 1022 | display: none; 1023 | } 1024 | 1025 | .course-box { 1026 | margin: 5px; 1027 | } 1028 | 1029 | .hot-promo { 1030 | -ms-flex-wrap: nowrap; 1031 | flex-wrap: nowrap; 1032 | } 1033 | 1034 | .hot-ads .hot-promo-text { 1035 | margin-top: 0; 1036 | margin-left: 30px; 1037 | } 1038 | 1039 | .hot-ads .hot-promo-text h5, 1040 | .hot-ads .hot-promo-text .course-price, 1041 | .hot-ads .hot-promo-text .course-star, 1042 | .hot-ads .hot-promo-text .big-button { 1043 | width: 100%; 1044 | } 1045 | 1046 | .hot-promo-video-n-text { 1047 | margin-top: -20px; 1048 | } 1049 | 1050 | .container .course-search img { 1051 | height: 230px; 1052 | } 1053 | } 1054 | 1055 | .empty-a { 1056 | height: 0; 1057 | }/*# sourceMappingURL=styles.css.map */ 1058 | -------------------------------------------------------------------------------- /fonts/Gotham-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevcap/HTML-CSS-Capstone-Project/d946b98df711a88aeada3d53794a7a56aa077f29/fonts/Gotham-Bold.otf -------------------------------------------------------------------------------- /fonts/Gotham-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevcap/HTML-CSS-Capstone-Project/d946b98df711a88aeada3d53794a7a56aa077f29/fonts/Gotham-Light.otf -------------------------------------------------------------------------------- /fonts/GothamBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevcap/HTML-CSS-Capstone-Project/d946b98df711a88aeada3d53794a7a56aa077f29/fonts/GothamBold.ttf -------------------------------------------------------------------------------- /fonts/GothamLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevcap/HTML-CSS-Capstone-Project/d946b98df711a88aeada3d53794a7a56aa077f29/fonts/GothamLight.ttf -------------------------------------------------------------------------------- /fonts/helvetica-neue.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevcap/HTML-CSS-Capstone-Project/d946b98df711a88aeada3d53794a7a56aa077f29/fonts/helvetica-neue.ttf -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevcap/HTML-CSS-Capstone-Project/d946b98df711a88aeada3d53794a7a56aa077f29/img/logo.png -------------------------------------------------------------------------------- /img/projeto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevcap/HTML-CSS-Capstone-Project/d946b98df711a88aeada3d53794a7a56aa077f29/img/projeto.png -------------------------------------------------------------------------------- /img/screenshot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevcap/HTML-CSS-Capstone-Project/d946b98df711a88aeada3d53794a7a56aa077f29/img/screenshot.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rocket Courses | Home 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | Home 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | Collections 49 | 50 | 51 |
Login
52 |
53 | 54 | 55 | 56 |
Logged
57 |
58 |
59 |
60 | 61 | 62 | 63 |
64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 | 88 | 89 | 90 | 91 | 92 | 93 |
94 | Purchase List 95 |
96 |
97 | 98 |
99 |
100 | 103 |

Rocket Courses

104 |

We can take you there

105 |
106 |
107 | 113 | 114 | 117 |
118 | Front-end 119 | AngularJS 120 |
121 |
122 |
123 | 124 |
125 | 132 | 133 |
134 | 135 |
136 |
137 |
Hot Ads
138 |
139 |
140 | 143 |
144 |

Front-end Development Course

145 |
Master the Front-end with HTML, CSS, JavaScript, React, Angular and Vue
146 |
147 |
148 |
149 |
Get the skills to build engaging, interactive user experiences on the web as a front-end web developer.
150 |
151 |
Develop competency with all the most valuables trending tools.
152 |
Apply best practices in responsive design and progressive enhancement.
153 |
Master version control with Git and GitHub.
154 |
155 | (42.914 reviews) 156 | US$ 1.699 US$ 3.465 157 | 158 |
159 |
160 |
161 | 162 |
163 |

Categories

164 |
165 | 166 |
167 |
168 | 169 |
170 |
HTML5
171 |
172 | 173 | 174 | 175 |
176 |
177 | 178 |
179 |
React
180 |
181 | 182 | 183 | 184 |
185 |
186 | 187 |
188 |
Angular
189 |
190 | 191 | 192 | 193 |
194 |
195 | 196 |
197 |
Java
198 |
199 | 200 | 201 | 202 |
203 |
204 | 205 |
206 |
Python
207 |
208 | 209 | 210 | 211 |
212 |
213 | 214 |
215 |
Go
216 |
217 | 218 | 219 | 220 |
221 |
222 | 223 |
224 |
TypeScript
225 |
226 | 227 | 228 | 229 |
230 |
231 | 232 |
233 |
Rails
234 |
235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 |
244 | Show All 245 |
246 | 247 |
248 |

Trending

249 |
250 |
heading
251 | code 252 |
253 |

Data Mining with Weka Porvdova

 254 |
255 | (13.044 reviews) 256 | 257 | US$ 132 US$ 365 258 | 259 |
260 |
261 |
262 | 274 |
heading
275 | code 276 |
277 |

JavaScript: Getting Started

 278 |
279 | (10.544 reviews) 280 | 281 | US$ 64 US$ 125 282 | 283 |
284 |
285 |
286 | 298 | 310 | 322 |
323 | Show All 324 |
325 | 326 |
327 |

Suggestion: Aws

328 |
329 | 341 | 353 |
heading
354 | code 355 |
356 |

Amazon Web Services: Advanced

 357 |
358 | (10.544 reviews) 359 | 360 | US$ 64 US$ 125 361 | 362 |
363 |
364 |
365 | 377 | 389 | 401 |
402 | Show All 403 |
404 | 405 |
406 | 407 |
408 | 482 | 485 | 488 | 489 | 490 | 497 | 498 | -------------------------------------------------------------------------------- /search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rocket Courses | Search Page 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | Home 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | Collections 48 | 49 | 50 |
Login
51 |
52 | 53 | 54 | 55 |
Logged
56 |
57 |
58 |
59 | 60 | 61 | 62 |
63 |
64 | 65 |
66 |
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
86 | 87 | 88 | 89 | 90 | 91 | 92 |
93 | Purchase List 94 |
95 |
96 |
97 | ← Go back home 98 |
99 |
100 | 103 |
104 | Front-end 105 | AngularJS 106 |
107 |
108 |
109 |
110 |

Search result:

111 |

Sorry, we didn't recognize what you've searched. Here are some suggestions based on your preferences:

112 | Filter » 113 |
114 |
115 |
116 | 151 |
152 |

Section title

153 |
154 |
article heading
155 | code 156 |
157 |

Data Mining with Weka

 158 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem id eligendi dolore reprehenderit nesciunt sequi necessitatibus dolorum veniam soluta maxime!

159 |
160 | (13.044 reviews) 161 | 162 | US$ 132 US$ 365 163 | 164 |
165 |
166 |
167 |
article heading
168 | code 169 |
170 |

ReactJS Basics: Getting Started

 171 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem id eligendi dolore reprehenderit nesciunt sequi necessitatibus dolorum veniam soluta maxime!

172 |
173 | (13.044 reviews) 174 | 175 | US$ 132 US$ 365 176 | 177 |
178 |
179 |
180 |
article heading
181 | code 182 |
183 |

JavaScript: Getting Started

 184 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem id eligendi dolore reprehenderit nesciunt sequi necessitatibus dolorum veniam soluta maxime!

185 |
186 | (13.044 reviews) 187 | 188 | US$ 132 US$ 365 189 | 190 |
191 |
192 |
193 |
article heading
194 | code 195 |
196 |

Amazon Web Services: Getting Started

 197 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem id eligendi dolore reprehenderit nesciunt sequi necessitatibus dolorum veniam soluta maxime!

198 |
199 | (13.044 reviews) 200 | 201 | US$ 132 US$ 365 202 | 203 |
204 |
205 |
206 |
article heading
207 | code 208 |
209 |

Data Mining with Weka

 210 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem id eligendi dolore reprehenderit nesciunt sequi necessitatibus dolorum veniam soluta maxime!

211 |
212 | (13.044 reviews) 213 | 214 | US$ 132 US$ 365 215 | 216 |
217 |
218 |
219 |
article heading
220 | code 221 |
222 |

Amazon Web Services: Intermediate

 223 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem id eligendi dolore reprehenderit nesciunt sequi necessitatibus dolorum veniam soluta maxime!

224 |
225 | (13.044 reviews) 226 | 227 | US$ 132 US$ 365 228 | 229 |
230 |
231 |
232 |
article heading
233 | code 234 |
235 |

Amazon Web Services: Advanced

 236 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem id eligendi dolore reprehenderit nesciunt sequi necessitatibus dolorum veniam soluta maxime!

237 |
238 | (13.044 reviews) 239 | 240 | US$ 132 US$ 365 241 | 242 |
243 |
244 |
245 |
246 | Next Page » 247 |
248 |
249 |
250 | 251 | 325 | 328 | 331 | 332 | 333 | 340 | 341 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | module.exports = { 4 | "extends": "stylelint-config-recommended", 5 | "rules": { 6 | "at-rule-empty-line-before": [ "always", { 7 | except: [ 8 | "blockless-after-same-name-blockless", 9 | "first-nested", 10 | ], 11 | ignore: ["after-comment"], 12 | } ], 13 | "at-rule-name-case": "lower", 14 | "at-rule-name-space-after": "always-single-line", 15 | "at-rule-semicolon-newline-after": "always", 16 | "block-closing-brace-empty-line-before": "never", 17 | "block-closing-brace-newline-after": "always", 18 | "block-closing-brace-newline-before": "always-multi-line", 19 | "block-closing-brace-space-before": "always-single-line", 20 | "block-opening-brace-newline-after": "always-multi-line", 21 | "block-opening-brace-space-after": "always-single-line", 22 | "block-opening-brace-space-before": "always", 23 | "color-hex-case": "lower", 24 | "color-hex-length": "short", 25 | "comment-empty-line-before": [ "always", { 26 | except: ["first-nested"], 27 | ignore: ["stylelint-commands"], 28 | } ], 29 | "comment-whitespace-inside": "always", 30 | "custom-property-empty-line-before": [ "always", { 31 | except: [ 32 | "after-custom-property", 33 | "first-nested", 34 | ], 35 | ignore: [ 36 | "after-comment", 37 | "inside-single-line-block", 38 | ], 39 | } ], 40 | "declaration-bang-space-after": "never", 41 | "declaration-bang-space-before": "always", 42 | "declaration-block-semicolon-newline-after": "always-multi-line", 43 | "declaration-block-semicolon-space-after": "always-single-line", 44 | "declaration-block-semicolon-space-before": "never", 45 | "declaration-block-single-line-max-declarations": 1, 46 | "declaration-block-trailing-semicolon": "always", 47 | "declaration-colon-newline-after": "always-multi-line", 48 | "declaration-colon-space-after": "always-single-line", 49 | "declaration-colon-space-before": "never", 50 | "declaration-empty-line-before": [ "always", { 51 | except: [ 52 | "after-declaration", 53 | "first-nested", 54 | ], 55 | ignore: [ 56 | "after-comment", 57 | "inside-single-line-block", 58 | ], 59 | } ], 60 | "function-comma-newline-after": "always-multi-line", 61 | "function-comma-space-after": "always-single-line", 62 | "function-comma-space-before": "never", 63 | "function-max-empty-lines": 0, 64 | "function-name-case": "lower", 65 | "function-parentheses-newline-inside": "always-multi-line", 66 | "function-parentheses-space-inside": "never-single-line", 67 | "function-whitespace-after": "always", 68 | "indentation": 2, 69 | "length-zero-no-unit": true, 70 | "max-empty-lines": 1, 71 | "media-feature-colon-space-after": "always", 72 | "media-feature-colon-space-before": "never", 73 | "media-feature-name-case": "lower", 74 | "media-feature-parentheses-space-inside": "never", 75 | "media-feature-range-operator-space-after": "always", 76 | "media-feature-range-operator-space-before": "always", 77 | "media-query-list-comma-newline-after": "always-multi-line", 78 | "media-query-list-comma-space-after": "always-single-line", 79 | "media-query-list-comma-space-before": "never", 80 | "no-eol-whitespace": true, 81 | "no-missing-end-of-source-newline": true, 82 | "number-leading-zero": "always", 83 | "number-no-trailing-zeros": true, 84 | "property-case": "lower", 85 | "rule-empty-line-before": [ "always-multi-line", { 86 | except: ["first-nested"], 87 | ignore: ["after-comment"], 88 | } ], 89 | "selector-attribute-brackets-space-inside": "never", 90 | "selector-attribute-operator-space-after": "never", 91 | "selector-attribute-operator-space-before": "never", 92 | "selector-combinator-space-after": "always", 93 | "selector-combinator-space-before": "always", 94 | "selector-descendant-combinator-no-non-space": true, 95 | "selector-list-comma-newline-after": "always", 96 | "selector-list-comma-space-before": "never", 97 | "selector-max-empty-lines": 0, 98 | "selector-pseudo-class-case": "lower", 99 | "selector-pseudo-class-parentheses-space-inside": "never", 100 | "selector-pseudo-element-case": "lower", 101 | "selector-pseudo-element-colon-notation": "double", 102 | "selector-type-case": "lower", 103 | "unit-case": "lower", 104 | "value-list-comma-newline-after": "always-multi-line", 105 | "value-list-comma-space-after": "always-single-line", 106 | "value-list-comma-space-before": "never", 107 | "value-list-max-empty-lines": 0, 108 | }, 109 | } -------------------------------------------------------------------------------- /video/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevcap/HTML-CSS-Capstone-Project/d946b98df711a88aeada3d53794a7a56aa077f29/video/video.mp4 --------------------------------------------------------------------------------