├── 01. Animated Search Box ├── app.js ├── index.html └── style.css ├── 02. CSS Text Animation Effects ├── index.html └── style.css ├── 03. Custom Skills Bar ├── app.js ├── index.html └── style.css ├── 04. Glowing Button ├── index.html └── style.css ├── 05. Creative Musical Loading Animation ├── index.html └── style.css ├── 06. Circular Progress Bar ├── index.html └── style.css ├── 07. Rotating Loading Animation ├── index.html └── style.css ├── 08. Copy Text to Clipboard ├── app.js ├── index.html └── style.css ├── 09. Glowing Text Animation Effects ├── index.html └── style.css ├── 10. Animated Navigation ├── index.html └── style.css ├── 11. Neumorphism Loading Spinner ├── index.html └── style.css ├── 12. Heart Shape ├── index.html └── style.css ├── 13. CSS GLITCH Effect ├── index.html └── style.css ├── 14. Netflix Logo ├── index.html └── style.css ├── 15. Windows Preloader ├── index.html └── style.css ├── 16. Mousemove Animation ├── index.html └── style.css ├── 17. CSS Amazing Loader ├── index.html └── style.css ├── 18. Complex CSS Loading Animation ├── index.html └── style.css ├── 19. Safari Logo ├── index.html └── style.css ├── 20. Instagram Logo ├── index.html └── style.css ├── 21. Background Video ├── index.html └── style.css ├── 22. Creative Loading Animation ├── index.html └── style.css ├── 23. Custom Scrollbar ├── index.html └── style.css ├── 24. Creative Image Hover Effect ├── index.html └── style.css ├── 25. Top 5 Creative Buttons ├── btn1 │ ├── index.html │ └── style.css ├── btn2 │ ├── index.html │ └── style.css ├── btn3 │ ├── index.html │ └── style.css ├── btn4 │ ├── index.html │ └── style.css └── btn5 │ ├── index.html │ └── style.css ├── 26. Creative Menus ├── 01. Menu │ ├── index.html │ └── style.css ├── 02. Menu │ ├── index.html │ └── style.css └── 03. Menu │ ├── index.html │ └── style.css ├── 27. Creative Image Effect ├── 01. Effect 1 │ ├── index.html │ ├── rayul-_M6gy9oHgII-unsplash.jpg │ └── style.css ├── 02. Effect 2 │ ├── hisu-lee-2qvxIr_DXGo-unsplash.jpg │ ├── index.html │ └── style.css └── 03. Effect 3 │ ├── index.html │ ├── milad-shams-AxqT51VT8mw-unsplash.jpg │ └── style.css ├── 28. Creative Cards ├── 01. Card 1 │ ├── index.html │ └── style.css └── 02. Card 2 │ ├── index.html │ ├── marian-oleksyn-Edv_EEWiB3E-unsplash.jpg │ └── style.css ├── 29. Tooltip ├── index.html └── style.css ├── 30. Accordion ├── index.html └── style.css ├── 31. Scrollbar ├── index.html └── style.css ├── 32. Image Background Text ├── index.html └── style.css ├── 33. Construction Landing Page ├── Images │ ├── Zayn.jpg │ ├── one.jpg │ ├── scott-blake-x-ghf9LjrVg-unsplash.jpg │ ├── three.jpg │ └── two.jpg ├── index.html └── style.css ├── 34. Foody Landing Page ├── assets │ └── Images │ │ ├── ian-dooley-d1UPkiFd04A-unsplash.jpg │ │ ├── img-1.png │ │ └── img-2.png ├── index.html └── style.css ├── 35. Coffee ├── Images │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── pexels-chitokan-2183027-removebg-preview.png │ └── pexels-nao-triponez-129207.jpg ├── index.html └── style.css ├── 36. The Art ├── index.html └── style.css ├── 37. Hoodie ├── images │ ├── Product │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ └── 4.png │ ├── alireza-esmaeeli-BGSZ1t80rpM-unsplash.jpg │ ├── gesphotoss-1i9K55ni5Dk-unsplash.jpg │ ├── joshua-rondeau-xazIYnxpS2Q-unsplash.jpg │ ├── milan-popovic-kOnmHdLJTNI-unsplash.jpg │ ├── oswaldo-ibanez-1NPUmTaiMeg-unsplash.jpg │ └── yogendra-singh-uWs_N5Dlyiw-unsplash.jpg ├── index.html └── style.css ├── 38. Chairs ├── Images │ ├── bruno-emmanuelle--MUoHL1XULM-unsplash-removebg-preview.png │ ├── daniil-silantev-1P6AnKDw6S8-unsplash-removebg-preview.png │ ├── daniil-silantev-1P6AnKDw6S8-unsplash.jpg │ ├── pexels-ron-lach-8346055-removebg-preview.png │ └── scott-webb-eD853mTbBA0-unsplash-removebg-preview.png ├── index.html └── style.css ├── 39. Portfolio Site ├── Images │ ├── Projects │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9d9769144508357.628db230127df.png │ ├── clients │ │ ├── alex-mccarthy-RGKdWJOUFH0-unsplash.jpg │ │ ├── ali-morshedlou-WMD64tMfc4k-unsplash.jpg │ │ └── nasik-lababan-AY2dgFfdqVk-unsplash.jpg │ └── simon-de-vries-UQluWXKUn7A-unsplash.jpg ├── components │ ├── _about.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _nav.scss │ ├── _projects.scss │ ├── _resets.scss │ ├── _reviews.scss │ └── _variables.scss ├── index.html ├── style.css ├── style.css.map └── style.scss ├── 40. Awesome Header ├── index.html ├── meysam-jarahkar-LI7jB1925j0-unsplash.jpg └── style.scss └── README.md /01. Animated Search Box/app.js: -------------------------------------------------------------------------------- 1 | // 1. Select Elements 2 | let search = document.querySelector(".search"); 3 | let close = document.querySelector(".close"); 4 | let searchWrapper = document.querySelector(".search-wrapper"); 5 | 6 | // 2. Attach Events 7 | search.addEventListener("click", () => { 8 | searchWrapper.classList.add("active"); 9 | }); 10 | 11 | close.addEventListener("click", () => { 12 | searchWrapper.classList.remove("active"); 13 | }); 14 | -------------------------------------------------------------------------------- /01. Animated Search Box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Search Box 7 | 8 | 9 | 10 | 17 | 18 | 19 |
20 |
21 |
22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 | 30 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /01. Animated Search Box/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | height: 100vh; 13 | background: linear-gradient(to left, #21d4fd, #b721ff); 14 | } 15 | 16 | .search-wrapper { 17 | position: relative; 18 | width: 60px; 19 | height: 60px; 20 | background: #fff; 21 | display: flex; 22 | justify-content: space-between; 23 | overflow: hidden; 24 | box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1); 25 | transition: 0.4s; 26 | border-radius: 100px; 27 | } 28 | 29 | .search-wrapper .search { 30 | position: relative; 31 | min-width: 60px; 32 | height: 60px; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | font-size: 1.5rem; 37 | cursor: pointer; 38 | } 39 | 40 | .search-wrapper .search i { 41 | color: #111; 42 | font-size: 1.5rem; 43 | } 44 | 45 | .search-wrapper .close i { 46 | color: #555; 47 | font-size: 1.5rem; 48 | } 49 | 50 | .search-wrapper .close { 51 | position: relative; 52 | width: 60px; 53 | height: 60px; 54 | display: flex; 55 | justify-content: center; 56 | align-items: center; 57 | cursor: pointer; 58 | transition: 0.5s; 59 | scale: 0; 60 | } 61 | 62 | .search-wrapper .searchInput { 63 | position: absolute; 64 | left: 60px; 65 | width: calc(100% - 120px); 66 | height: 100%; 67 | line-height: 60px; 68 | } 69 | 70 | .search-wrapper .searchInput input { 71 | position: absolute; 72 | width: 100%; 73 | height: 100%; 74 | border: none; 75 | outline: none; 76 | } 77 | 78 | /* JS classes */ 79 | .search-wrapper.active { 80 | width: 360px; 81 | transition-delay: 0.3s; 82 | } 83 | .search-wrapper.active .close { 84 | scale: 1; 85 | transition-delay: 0.5s; 86 | } 87 | -------------------------------------------------------------------------------- /02. CSS Text Animation Effects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Text Animation 7 | 8 | 9 | 10 | 11 |
12 |

CSS Text Animation

13 |

CSS Text Animation

14 |

CSS Text Animation

15 |

CSS Text Animation

16 |

CSS Text Animation

17 |

CSS Text Animation

18 |

CSS Text Animation

19 |

CSS Text Animation

20 |

CSS Text Animation

21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /02. CSS Text Animation Effects/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | min-height: 100vh; 13 | background: #101010; 14 | } 15 | 16 | .box { 17 | position: relative; 18 | display: flex; 19 | flex-direction: column; 20 | } 21 | 22 | .box p { 23 | font-size: 2rem; 24 | -webkit-text-stroke: 1px yellow; 25 | color: transparent; 26 | text-transform: uppercase; 27 | animation: animate 2s linear infinite; 28 | animation-delay: calc(-0.25s * var(--i)); 29 | } 30 | 31 | @keyframes animate { 32 | 0%, 33 | 10% { 34 | color: yellow; 35 | filter: hue-rotate(0deg); 36 | } 37 | 10.1% { 38 | color: transparent; 39 | } 40 | 100% { 41 | color: transparent; 42 | filter: hue-rotate(720deg); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /03. Custom Skills Bar/app.js: -------------------------------------------------------------------------------- 1 | const progressBars = document.querySelectorAll(".progress-bar"); 2 | 3 | progressBars.forEach((bar) => { 4 | bar.style.width = bar.textContent; 5 | }); 6 | -------------------------------------------------------------------------------- /03. Custom Skills Bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Custom Skills Bar 7 | 8 | 9 | 10 |
11 |
12 |

My Skillset

13 |
14 |
15 | HTML 16 |
85%
17 |
18 |
19 | HTML 20 |
85%
21 |
22 |
23 | HTML 24 |
85%
25 |
26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /03. Custom Skills Bar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: #171717; 13 | font-family: sans-serif; 14 | } 15 | 16 | header { 17 | margin: 0 0 80px; 18 | } 19 | 20 | header h1 { 21 | color: #fff; 22 | font-size: 40px; 23 | font-weight: 800; 24 | } 25 | 26 | .progress { 27 | position: relative; 28 | width: 380px; 29 | height: 30px; 30 | margin: 70px 0 0; 31 | background: #d8d8d8; 32 | border-radius: 20px; 33 | } 34 | 35 | .progress span { 36 | position: absolute; 37 | top: -32px; 38 | color: #fff; 39 | font-size: 20px; 40 | font-weight: 600; 41 | } 42 | 43 | .progress .progress-bar { 44 | display: flex; 45 | justify-content: center; 46 | align-items: center; 47 | width: 85%; 48 | height: 100%; 49 | color: #fff; 50 | font-weight: 600; 51 | font-size: 20px; 52 | border-radius: 20px; 53 | } 54 | 55 | .progress:nth-child(2) .progress-bar { 56 | background: linear-gradient(90deg, #85ffbd, #fffb7b); 57 | } 58 | 59 | .progress:nth-child(3) .progress-bar { 60 | background: linear-gradient(90deg, #21d4fd, #b721ff); 61 | } 62 | 63 | .progress:nth-child(4) .progress-bar { 64 | background: linear-gradient(90deg, #ff3cac, #784ba0, #2b86c5); 65 | } 66 | -------------------------------------------------------------------------------- /04. Glowing Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Glowing Button 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /04. Glowing Button/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | height: 100vh; 13 | background: #000; 14 | } 15 | 16 | button { 17 | position: relative; 18 | padding: 1.2rem 4rem; 19 | font-size: 28px; 20 | text-transform: uppercase; 21 | color: #fff; 22 | background: rgba(255, 255, 255, 0.1); 23 | outline: none; 24 | cursor: pointer; 25 | transition: 0.5s; 26 | } 27 | 28 | button:hover { 29 | z-index: 1; 30 | border-color: transparent; 31 | background: linear-gradient( 32 | 90deg, 33 | #f9d923, 34 | #00a19d, 35 | #0c87b7, 36 | #cb49ff, 37 | #ff6666, 38 | #f9d923 39 | ); 40 | background-size: 400%; 41 | box-shadow: 0 0 15px rgb(2, 4, 24); 42 | animation: glow 12s linear forwards; 43 | } 44 | 45 | button::before { 46 | content: ""; 47 | position: absolute; 48 | top: -1px; 49 | bottom: -1px; 50 | right: -1px; 51 | left: -1px; 52 | background: inherit; 53 | filter: blur(36px); 54 | z-index: -1; 55 | opacity: 0; 56 | transition: 0.5s ease-out; 57 | } 58 | 59 | button:hover::before { 60 | opacity: 1; 61 | z-index: -1; 62 | } 63 | 64 | @keyframes glow { 65 | from { 66 | background-position: 0%; 67 | } 68 | to { 69 | background-position: 400%; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /05. Creative Musical Loading Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creative Musical Loading Animation 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /05. Creative Musical Loading Animation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: grid; 9 | place-items: center; 10 | min-height: 100vh; 11 | background: #100f13; 12 | } 13 | 14 | .loader { 15 | display: flex; 16 | height: 150px; 17 | transform: rotate(180deg); 18 | } 19 | 20 | .loader span { 21 | width: 60px; 22 | background: #fff; 23 | margin: 0 2px; 24 | border-radius: 4px; 25 | animation: loading 2s infinite; 26 | } 27 | 28 | .loader span:nth-child(1) { 29 | animation-delay: 0.2s; 30 | } 31 | .loader span:nth-child(2) { 32 | animation-delay: 0.4s; 33 | } 34 | .loader span:nth-child(3) { 35 | animation-delay: 0.6s; 36 | } 37 | .loader span:nth-child(4) { 38 | animation-delay: 0.8s; 39 | } 40 | .loader span:nth-child(5) { 41 | animation-delay: 1s; 42 | } 43 | 44 | @keyframes loading { 45 | 0%, 46 | 100% { 47 | height: 10px; 48 | background: #5865f2; 49 | } 50 | 51 | 25% { 52 | height: 90px; 53 | background: #57f287; 54 | } 55 | 56 | 50% { 57 | height: 40px; 58 | background: #fee75c; 59 | } 60 | 61 | 75% { 62 | height: 160px; 63 | background: #ed4245; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /06. Circular Progress Bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Circular Progress Bar 7 | 8 | 9 | 10 |
11 |
95%
12 |
13 |
14 |
64%
15 |
16 |
17 |
50%
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /06. Circular Progress Bar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | min-height: 100vh; 13 | background: #1d1e22; 14 | } 15 | 16 | .circle { 17 | display: grid; 18 | place-items: center; 19 | margin: 0 20px; 20 | width: 200px; 21 | height: 200px; 22 | background: #fff; 23 | border-radius: 50%; 24 | } 25 | 26 | .circle .circle_inner { 27 | display: grid; 28 | place-items: center; 29 | width: 170px; 30 | height: 170px; 31 | background: #1d1e22; 32 | border-radius: 50%; 33 | font-size: 30px; 34 | } 35 | 36 | .circle.crimson { 37 | color: crimson; 38 | background: conic-gradient(crimson 0 95%, #303238 95% 100%); 39 | } 40 | .circle.blueviolet { 41 | color: crimson; 42 | background: conic-gradient(blueviolet 0 64%, #303238 64% 100%); 43 | } 44 | .circle.yellow { 45 | color: yellow; 46 | background: conic-gradient(yellow 0 50%, #303238 50% 100%); 47 | } 48 | -------------------------------------------------------------------------------- /07. Rotating Loading Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rotating Loading Animation 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /07. Rotating Loading Animation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #151320; 13 | } 14 | 15 | .loader { 16 | width: 100px; 17 | height: 100px; 18 | border-radius: 50%; 19 | perspective: 800px; 20 | } 21 | 22 | .loader .line { 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | border-radius: 50%; 27 | } 28 | 29 | .loader .line:nth-child(1) { 30 | border-bottom: 6px solid chocolate; 31 | transform: rotateX(35deg) rotateY(-45deg); 32 | animation: rotate1 1s linear infinite; 33 | } 34 | 35 | .loader .line:nth-child(2) { 36 | border-bottom: 6px solid pink; 37 | transform: rotateX(50deg) rotateY(10deg); 38 | animation: rotate2 2s linear infinite; 39 | } 40 | .loader .line:nth-child(3) { 41 | border-bottom: 6px solid crimson; 42 | transform: rotateX(35deg) rotateY(55deg); 43 | animation: rotate3 3s linear infinite; 44 | } 45 | 46 | @keyframes rotate1 { 47 | to { 48 | transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); 49 | } 50 | } 51 | @keyframes rotate2 { 52 | to { 53 | transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); 54 | } 55 | } 56 | @keyframes rotate3 { 57 | to { 58 | transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /08. Copy Text to Clipboard/app.js: -------------------------------------------------------------------------------- 1 | const textInput = document.getElementById("input"); 2 | const copyBtn = document.getElementById("copy"); 3 | 4 | copyBtn.addEventListener("click", () => { 5 | textInput.select(); 6 | document.execCommand("copy"); 7 | }); 8 | -------------------------------------------------------------------------------- /08. Copy Text to Clipboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Copy Text to Clipboard using JavaScript 7 | 8 | 9 | 10 | 17 | 18 | 19 |
20 | 21 | 24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /08. Copy Text to Clipboard/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | min-height: 100vh; 13 | background: #0d0d0d; 14 | } 15 | 16 | .box { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | background: #fff; 21 | padding: 10px 14px; 22 | } 23 | 24 | .box input { 25 | width: 300px; 26 | height: 50px; 27 | font-size: 20px; 28 | font-weight: 500; 29 | padding-right: 12px; 30 | border: none; 31 | outline: none; 32 | } 33 | 34 | .box button { 35 | width: 40px; 36 | height: 40px; 37 | font-size: 24px; 38 | background: #f79817; 39 | color: #fff; 40 | border-radius: 3px; 41 | border: none; 42 | outline: none; 43 | cursor: pointer; 44 | } 45 | -------------------------------------------------------------------------------- /09. Glowing Text Animation Effects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Glowing Text Animation 7 | 8 | 9 | 10 |

11 | A 12 | W 13 | E 14 | S 15 | O 16 | M 17 | E 18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /09. Glowing Text Animation Effects/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: #000; 13 | } 14 | 15 | h1 { 16 | font-size: 5rem; 17 | color: #555; 18 | letter-spacing: 1.2rem; 19 | } 20 | 21 | h1 span { 22 | display: table-cell; 23 | animation: animateText 4s linear infinite; 24 | } 25 | 26 | span:nth-child(1) { 27 | animation-delay: 0.5s; 28 | } 29 | span:nth-child(2) { 30 | animation-delay: 0.75s; 31 | } 32 | span:nth-child(3) { 33 | animation-delay: 1s; 34 | } 35 | span:nth-child(4) { 36 | animation-delay: 1.25s; 37 | } 38 | span:nth-child(5) { 39 | animation-delay: 1.5s; 40 | } 41 | span:nth-child(6) { 42 | animation-delay: 1.75s; 43 | } 44 | span:nth-child(7) { 45 | animation-delay: 2s; 46 | } 47 | 48 | @keyframes animateText { 49 | 0% { 50 | color: #fff; 51 | filter: blur(2px); 52 | text-shadow: 0 0 10px #dc143c, 0 0 20px #dc143c, 0 0 40px #dc143c, 53 | 0 0 80px #dc143c, 0 0 100px #dc143c, 0 0 120px #dc143c, 0 0 200px #dc143c; 54 | } 55 | 56 | 5% { 57 | color: #fff; 58 | filter: blur(0px); 59 | text-shadow: none; 60 | } 61 | 62 | 95% { 63 | color: #fff; 64 | filter: blur(0px); 65 | text-shadow: none; 66 | } 67 | 68 | 100% { 69 | color: #fff; 70 | filter: blur(2px); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /10. Animated Navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Navigation Menu 7 | 8 | 9 | 10 |
11 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /10. Animated Navigation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | height: 100vh; 13 | background: #20c1c1; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | width: 100%; 21 | } 22 | 23 | nav { 24 | background: #fff; 25 | padding: 5px; 26 | box-shadow: 0 20px 10px -20px rgba(0, 0, 0, 0.4); 27 | border-radius: 100px; 28 | } 29 | 30 | nav ul li { 31 | position: relative; 32 | list-style: none; 33 | display: inline-block; 34 | padding: 8px 20px; 35 | margin: 10px; 36 | font-weight: 500; 37 | color: #777; 38 | cursor: pointer; 39 | z-index: 2; 40 | transition: color 0.5s; 41 | } 42 | 43 | nav ul li:hover { 44 | color: #fff; 45 | } 46 | 47 | nav ul li::after { 48 | content: ""; 49 | position: absolute; 50 | top: 100%; 51 | left: 50%; 52 | transform: translate(-50%, -50%); 53 | width: 100%; 54 | height: 100%; 55 | background: teal; 56 | border-radius: 30px; 57 | z-index: -1; 58 | opacity: 0; 59 | transition: top 0.5s, opacity 0.5s; 60 | } 61 | 62 | nav ul li:hover::after { 63 | top: 50%; 64 | opacity: 1; 65 | } 66 | -------------------------------------------------------------------------------- /11. Neumorphism Loading Spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Neumorphism Loading Ring Spinner 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /11. Neumorphism Loading Spinner/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #0e0e0e; 13 | } 14 | 15 | .wrapper { 16 | position: relative; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | width: 300px; 21 | height: 300px; 22 | border-radius: 50%; 23 | box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1), 24 | inset 10px 10px 10px rgba(217, 217, 217, 0.1); 25 | } 26 | 27 | .wrapper::before { 28 | content: ""; 29 | position: absolute; 30 | width: 200px; 31 | height: 200px; 32 | border-radius: 50%; 33 | box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1), 34 | inset 10px 10px 10px rgba(217, 217, 217, 0.1); 35 | } 36 | 37 | span { 38 | position: absolute; 39 | width: 220px; 40 | height: 186px; 41 | animation: rotate 5s infinite; 42 | } 43 | 44 | span::before { 45 | content: ""; 46 | position: absolute; 47 | width: 30px; 48 | height: 30px; 49 | background: crimson; 50 | border-radius: 50%; 51 | } 52 | 53 | @keyframes rotate { 54 | 0% { 55 | transform: rotate(0deg); 56 | } 57 | 100% { 58 | transform: rotate(360deg); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /12. Heart Shape/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pure CSS Heart Shape 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /12. Heart Shape/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | } 13 | 14 | .heart { 15 | position: relative; 16 | width: 300px; 17 | height: 300px; 18 | background: #f00; 19 | transform: rotate(-45deg) scale(0.7); 20 | animation: changeColor 5s linear infinite; 21 | } 22 | 23 | .heart::before { 24 | content: ""; 25 | position: absolute; 26 | top: -50%; 27 | width: 100%; 28 | height: 100%; 29 | background: inherit; 30 | border-radius: 50%; 31 | } 32 | 33 | .heart::after { 34 | content: ""; 35 | position: absolute; 36 | top: 0%; 37 | left: 50%; 38 | width: 100%; 39 | height: 100%; 40 | background: inherit; 41 | border-radius: 50%; 42 | } 43 | 44 | @keyframes changeColor { 45 | 0% { 46 | filter: hue-rotate(0deg); 47 | } 48 | 100% { 49 | filter: hue-rotate(360deg); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /13. CSS GLITCH Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS GLITCH 7 | 8 | 9 | 10 |
HuXn
11 | 12 | 13 | -------------------------------------------------------------------------------- /13. CSS GLITCH Effect/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap"); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | background: #111; 15 | font-family: "Playfair Display", serif; 16 | } 17 | 18 | .glitch { 19 | position: absolute; 20 | font-size: 100px; 21 | text-transform: uppercase; 22 | color: #fff; 23 | letter-spacing: 8px; 24 | cursor: pointer; 25 | } 26 | 27 | .glitch::before { 28 | content: "HuXn"; 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | display: block; 33 | } 34 | 35 | .glitch:hover::before { 36 | color: red; 37 | z-index: -2; 38 | animation: glitch 0.3s linear 6; 39 | } 40 | 41 | .glitch::after { 42 | content: "HuXn"; 43 | position: absolute; 44 | top: 0; 45 | left: 0; 46 | display: block; 47 | } 48 | 49 | .glitch:hover::before { 50 | color: red; 51 | z-index: -1; 52 | animation: glitch 0.3s linear 6 reverse; 53 | } 54 | 55 | @keyframes glitch { 56 | 0% { 57 | top: 0; 58 | left: 0; 59 | } 60 | 20% { 61 | top: -5px; 62 | left: -5px; 63 | } 64 | 40% { 65 | top: 5px; 66 | left: 5px; 67 | } 68 | 60% { 69 | top: -5px; 70 | left: 5px; 71 | } 72 | 80% { 73 | top: 5px; 74 | left: -5px; 75 | } 76 | 100% { 77 | top: 0; 78 | left: 0; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /14. Netflix Logo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Netflix Logo 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /14. Netflix Logo/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #000; 9 | } 10 | 11 | .container { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | width: 150px; 17 | height: 250px; 18 | } 19 | 20 | .container span { 21 | position: absolute; 22 | width: 50px; 23 | height: 0; 24 | background: #db0001; 25 | } 26 | 27 | .left-line { 28 | left: 0; 29 | bottom: 0; 30 | animation: animate 1s linear forwards; 31 | animation-delay: 1s; 32 | } 33 | 34 | .center-line { 35 | top: 0; 36 | left: 0; 37 | transform: skewX(22deg); 38 | transform-origin: top left; 39 | box-shadow: 0 0 50px #000; 40 | animation: animate 1s linear forwards; 41 | animation-delay: 2s; 42 | } 43 | 44 | .right-line { 45 | right: 0; 46 | bottom: 0; 47 | animation: animate 1s linear forwards; 48 | animation-delay: 3s; 49 | } 50 | 51 | .container::after { 52 | content: ""; 53 | position: absolute; 54 | width: 120%; 55 | height: 20px; 56 | background: #000; 57 | border-radius: 50%; 58 | z-index: 5; 59 | bottom: -10px; 60 | left: -10%; 61 | } 62 | 63 | @keyframes animate { 64 | 100% { 65 | height: 100%; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /15. Windows Preloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Windows Loader Animation 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |

Please Wait

32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /15. Windows Preloader/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #0079d7; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 100%; 18 | display: flex; 19 | justify-content: center; 20 | } 21 | 22 | .wrapper { 23 | position: absolute; 24 | top: -35px; 25 | transform: scale(1.5); 26 | } 27 | 28 | .loader { 29 | position: absolute; 30 | width: 50px; 31 | height: 50px; 32 | animation: rotate 3.5s linear infinite; 33 | } 34 | 35 | .loader .dot { 36 | position: relative; 37 | top: 30px; 38 | width: 7px; 39 | height: 7px; 40 | background: #fff; 41 | border-radius: 50%; 42 | } 43 | 44 | .loader:nth-child(1) { 45 | animation-delay: 0.15s; 46 | } 47 | .loader:nth-child(2) { 48 | animation-delay: 0.3s; 49 | } 50 | .loader:nth-child(3) { 51 | animation-delay: 0.45s; 52 | } 53 | .loader:nth-child(4) { 54 | animation-delay: 0.6s; 55 | } 56 | .loader:nth-child(5) { 57 | animation-delay: 0.75s; 58 | } 59 | .loader:nth-child(6) { 60 | animation-delay: 0.9s; 61 | } 62 | 63 | p { 64 | position: absolute; 65 | color: #fff; 66 | bottom: -95px; 67 | left: 50%; 68 | font-family: sans-serif; 69 | } 70 | 71 | @keyframes rotate { 72 | 30% { 73 | transform: rotate(220deg); 74 | } 75 | 40% { 76 | transform: rotate(450deg); 77 | } 78 | 75% { 79 | transform: rotate(720deg); 80 | opacity: 1; 81 | } 82 | 76% { 83 | opacity: 0; 84 | } 85 | 100% { 86 | transform: rotate(0deg); 87 | opacity: 0; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /16. Mousemove Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mouse Move Animation 7 | 8 | 9 | 10 |
11 | 111 |
112 | 113 | 114 | -------------------------------------------------------------------------------- /16. Mousemove Animation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | position: relative; 9 | width: 100%; 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | flex-wrap: wrap; 15 | background: #13000c; 16 | overflow: hidden; 17 | animation: anime 5s linear infinite; 18 | } 19 | 20 | .container span { 21 | position: relative; 22 | display: block; 23 | width: 40px; 24 | height: 40px; 25 | } 26 | 27 | .container span::before { 28 | content: ""; 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | width: 200%; 33 | height: 200%; 34 | box-shadow: 0 0 10px #dc1f4f, 0 0 20px #dc1f4f, 0 0 40px #dc1f4f, 35 | 0 0 60px #dc1f4f, 0 0 80px #dc1f4f, 0 0 100px #dc1f4f; 36 | background: #dc1f4f; 37 | border-radius: 50%; 38 | transform: scale(0); 39 | transition: 2s; 40 | } 41 | 42 | .container span:hover::before { 43 | transform: scale(1); 44 | transition: 0s; 45 | } 46 | 47 | @keyframes anime { 48 | 0% { 49 | filter: hue-rotate(0deg); 50 | } 51 | 100% { 52 | filter: hue-rotate(360deg); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /17. CSS Amazing Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cool Loader 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /17. CSS Amazing Loader/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #eef5fe; 13 | } 14 | 15 | .wrapper { 16 | display: flex; 17 | column-gap: 10px; 18 | } 19 | 20 | .wrapper .circle { 21 | width: 20px; 22 | height: 20px; 23 | background: #fd2e6c; 24 | border-radius: 50%; 25 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 26 | animation: bounce 1s ease-in-out infinite alternate; 27 | } 28 | 29 | .circle:nth-child(1) { 30 | animation-delay: -0.75s; 31 | } 32 | .circle:nth-child(2) { 33 | background: #4de600; 34 | animation-delay: -0.5s; 35 | } 36 | .circle:nth-child(3) { 37 | background: #005eff; 38 | animation-delay: -0.75s; 39 | } 40 | .circle:nth-child(4) { 41 | background: #1c1c1c; 42 | animation-delay: -0.1s; 43 | } 44 | 45 | @keyframes bounce { 46 | 0% { 47 | transform: translateY(-10px); 48 | } 49 | 100% { 50 | transform: translateY(5px); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /18. Complex CSS Loading Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Complex CSS Loading Animation 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 |

Loading...

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /18. Complex CSS Loading Animation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #000; 13 | } 14 | 15 | .loader { 16 | position: relative; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | width: 200px; 21 | height: 200px; 22 | } 23 | 24 | .loader span { 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 100%; 30 | border: 2px solid #fff; 31 | pointer-events: none; 32 | animation: animate 5s linear infinite; 33 | } 34 | 35 | .loader span:nth-child(1) { 36 | border-radius: 65% 66% 34% 30% / 44% 59% 40% 60%; 37 | } 38 | .loader span:nth-child(2) { 39 | animation-direction: reverse; 40 | border-radius: 57% 74% 26% 43% / 73% 27% 56% 44%; 41 | } 42 | .loader span:nth-child(3) { 43 | animation-duration: 3s; 44 | border-radius: 43% 35% 65% 57% / 38% 62% 64% 36%; 45 | } 46 | 47 | .loader h2 { 48 | color: #fff; 49 | font-weight: 500; 50 | } 51 | 52 | @keyframes animate { 53 | 0% { 54 | transform: rotate(0deg); 55 | } 56 | 100% { 57 | transform: rotate(360deg); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /19. Safari Logo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Safari Logo 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /19. Safari Logo/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #f8f8f8; 13 | } 14 | 15 | .safari { 16 | position: relative; 17 | width: 400px; 18 | height: 400px; 19 | background: #f2f2f2; 20 | border-radius: 50px; 21 | box-shadow: 0 30px 20px #ccc, 0 30px 30px rgba(0, 0, 0, 0.25), 22 | 0 28px 0 rgba(0, 0, 0, 0.5), 0 50px 60px rgba(0, 0, 0, 0.1); 23 | } 24 | 25 | .circle-lines { 26 | position: absolute; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | inset: 35px; 31 | background: linear-gradient(#1ec9ff, #2971e7); 32 | border-radius: 50%; 33 | box-shadow: 0 -5px 0 5px rgba(0, 0, 0, 0.15) inset 0 10px 0 rgba(0, 0, 0, 0.1); 34 | } 35 | 36 | .circle-lines span { 37 | position: absolute; 38 | width: 2px; 39 | height: 24px; 40 | transform: translateY(-137.55px) rotate(calc(10deg * var(--i))); 41 | transform-origin: 1px 150px; 42 | background: #fff; 43 | filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.15)); 44 | } 45 | 46 | .circle-lines span::before { 47 | content: ""; 48 | position: absolute; 49 | width: 2px; 50 | height: 12px; 51 | background: #fff; 52 | transform-origin: 0 150px; 53 | transform: rotate(5deg); 54 | } 55 | 56 | .niddle { 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | position: absolute; 61 | width: 36px; 62 | inset: 50px; 63 | transform: translateX(130px) rotate(45deg); 64 | filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25)); 65 | transition: 2s cubic-bezier(1, -0.39, 0.5, 1); 66 | } 67 | 68 | .safari:hover .niddle { 69 | transform: translateX(130px) rotate(405deg); 70 | } 71 | 72 | .niddle::before { 73 | content: ""; 74 | position: absolute; 75 | top: -150px; 76 | height: 150px; 77 | border-left: 18px solid transparent; 78 | border-right: 18px solid transparent; 79 | border-bottom: 150px solid rgb(231, 51, 51); 80 | } 81 | 82 | .niddle::after { 83 | content: ""; 84 | position: absolute; 85 | top: 150px; 86 | border-left: 18px solid transparent; 87 | border-right: 18px solid transparent; 88 | border-bottom: 150px solid white; 89 | } 90 | -------------------------------------------------------------------------------- /20. Instagram Logo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Instagram Logo 7 | 8 | 9 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /20. Instagram Logo/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #121212; 13 | } 14 | 15 | .logo .logo-bg { 16 | position: relative; 17 | width: 275px; 18 | height: 275px; 19 | border-radius: 65px; 20 | background: linear-gradient( 21 | 45deg, 22 | #ffcc00, 23 | 0%, 24 | #fe6104 32%, 25 | #ff0c5a 50%, 26 | #fc03bb 62%, 27 | #7d0cfd 100% 28 | ); 29 | } 30 | 31 | .logo .logo-icon { 32 | position: absolute; 33 | top: 50%; 34 | left: 50%; 35 | width: 100px; 36 | height: 100px; 37 | border: 18px solid #fff; 38 | border-radius: 50%; 39 | transform: translate(-50%, -50%); 40 | } 41 | 42 | .logo .logo-icon::before { 43 | content: ""; 44 | position: absolute; 45 | top: 50%; 46 | left: 50%; 47 | width: 170px; 48 | height: 170px; 49 | border: 18px solid #fff; 50 | border-radius: 30%; 51 | transform: translate(-50%, -50%); 52 | } 53 | 54 | .logo .logo-icon::after { 55 | content: ""; 56 | position: absolute; 57 | top: -35px; 58 | right: -35px; 59 | width: 24px; 60 | height: 24px; 61 | background: #fff; 62 | border-radius: 50%; 63 | transform: translate(-50%, -50%); 64 | } 65 | -------------------------------------------------------------------------------- /21. Background Video/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Video 7 | 8 | 9 | 10 |
11 | 15 | 16 |
17 |

Journey

18 | Explore 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /21. Background Video/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | .hero { 9 | width: 100%; 10 | height: 100vh; 11 | background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3)); 12 | position: relative; 13 | padding: 0 5%; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | 19 | .content { 20 | text-align: center; 21 | } 22 | 23 | .content h1 { 24 | font-size: 160px; 25 | color: #fff; 26 | font-weight: 600; 27 | transition: 0.5s; 28 | } 29 | 30 | .content h1:hover { 31 | -webkit-text-stroke: 2px white; 32 | color: transparent; 33 | } 34 | 35 | .content a { 36 | text-decoration: none; 37 | display: inline-block; 38 | color: #fff; 39 | font-size: 24px; 40 | border: 2px solid white; 41 | padding: 14px 50px; 42 | margin-top: 20px; 43 | transition: 0.5s; 44 | } 45 | 46 | .content a:hover { 47 | background: #fff; 48 | color: #000; 49 | } 50 | 51 | .back-video { 52 | position: absolute; 53 | right: 0; 54 | bottom: 0; 55 | z-index: -1; 56 | } 57 | 58 | @media (min-aspect-ratio: 16/9) { 59 | .back-video { 60 | width: 100%; 61 | height: auto; 62 | } 63 | } 64 | 65 | @media (max-aspect-ratio: 16/9) { 66 | .back-video { 67 | width: auto; 68 | height: 100%; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /22. Creative Loading Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loading Animation 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /22. Creative Loading Animation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #00008bcb; 9 | } 10 | 11 | .wrapper { 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | min-height: 100vh; 16 | } 17 | 18 | .wrapper .loader { 19 | display: flex; 20 | justify-content: space-evenly; 21 | padding: 0 20px; 22 | } 23 | 24 | .loader .loading { 25 | background: #fff; 26 | width: 30px; 27 | height: 30px; 28 | border-radius: 50px; 29 | margin: 0 10px; 30 | animation: load 0.8s ease infinite; 31 | } 32 | 33 | .loader .loading.one { 34 | animation-delay: 0.3s; 35 | } 36 | .loader .loading.two { 37 | animation-delay: 0.4s; 38 | } 39 | .loader .loading.three { 40 | animation-delay: 0.5s; 41 | } 42 | 43 | @keyframes load { 44 | 0% { 45 | width: 30px; 46 | height: 30px; 47 | } 48 | 50% { 49 | width: 20px; 50 | height: 20px; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /23. Custom Scrollbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Custom Scrollbar 7 | 8 | 9 | 10 |
11 |
12 |

Title 1

13 |

14 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 15 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 16 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 17 | laborum ea. 18 |

19 |
20 |
21 |

Title 2

22 |

23 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 24 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 25 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 26 | laborum ea. 27 |

28 |
29 |
30 |

Title 3

31 |

32 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 33 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 34 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 35 | laborum ea. 36 |

37 |
38 |
39 |

Title 4

40 |

41 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 42 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 43 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 44 | laborum ea. 45 |

46 |
47 |
48 |

Title 5

49 |

50 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 51 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 52 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 53 | laborum ea. 54 |

55 |
56 |
57 |

Title 6

58 |

59 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 60 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 61 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 62 | laborum ea. 63 |

64 |
65 |
66 |

Title 7

67 |

68 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 69 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 70 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 71 | laborum ea. 72 |

73 |
74 |
75 |

Title 8

76 |

77 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 78 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 79 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 80 | laborum ea. 81 |

82 |
83 |
84 |

Title 8

85 |

86 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 87 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 88 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 89 | laborum ea. 90 |

91 |
92 |
93 |

Title 8

94 |

95 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 96 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 97 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 98 | laborum ea. 99 |

100 |
101 |
102 |

Title 8

103 |

104 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 105 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 106 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 107 | laborum ea. 108 |

109 |
110 |
111 |

Title 8

112 |

113 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 114 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 115 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 116 | laborum ea. 117 |

118 |
119 |
120 |

Title 8

121 |

122 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 123 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 124 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 125 | laborum ea. 126 |

127 |
128 |
129 |

Title 8

130 |

131 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 132 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 133 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 134 | laborum ea. 135 |

136 |
137 |
138 |

Title 8

139 |

140 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 141 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 142 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 143 | laborum ea. 144 |

145 |
146 |
147 |

Title 8

148 |

149 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 150 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 151 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 152 | laborum ea. 153 |

154 |
155 |
156 |

Title 8

157 |

158 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 159 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 160 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 161 | laborum ea. 162 |

163 |
164 |
165 |

Title 8

166 |

167 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate 168 | illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab 169 | unde. Nesciunt temporibus saepe rem similique excepturi sapiente, 170 | laborum ea. 171 |

172 |
173 |
174 | 175 | 176 | -------------------------------------------------------------------------------- /23. Custom Scrollbar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body { 9 | background: crimson; 10 | } 11 | 12 | .card { 13 | width: 700px; 14 | background: #ccc; 15 | padding: 20px; 16 | margin: 20px; 17 | font-family: sans-serif; 18 | line-height: 28px; 19 | } 20 | 21 | /* Scrollbar */ 22 | ::-webkit-scrollbar { 23 | background-color: transparent; 24 | width: 10px; 25 | } 26 | 27 | ::-webkit-scrollbar-thumb { 28 | background: linear-gradient(#21d4fd, #b721ff); 29 | border-radius: 100px; 30 | } 31 | -------------------------------------------------------------------------------- /24. Creative Image Hover Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creative Image Hover Effect 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /24. Creative Image Hover Effect/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #555; 5 | height: 100vh; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | 11 | .container { 12 | position: relative; 13 | width: 800px; 14 | height: 500px; 15 | background: #222; 16 | } 17 | 18 | .clip { 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | height: 100%; 24 | transition: all 0.5s; 25 | } 26 | 27 | .clip1 { 28 | background: url(https://images.unsplash.com/photo-1604537466158-719b1972feb8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80); 29 | background-size: cover; 30 | background-position: center; 31 | clip-path: polygon(0 0, 46% 0, 39% 100%, 0 100%); 32 | } 33 | 34 | .clip2 { 35 | background: url(https://images.unsplash.com/photo-1502228213426-d4e9f2add0e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); 36 | background-size: cover; 37 | background-position: center; 38 | clip-path: polygon(19% 0, 87% 0, 64% 100%, 33% 100%); 39 | } 40 | 41 | .clip3 { 42 | background: url(https://images.unsplash.com/photo-1519757043093-285fcb07a4e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80); 43 | background-size: cover; 44 | background-position: center; 45 | clip-path: polygon(82% 0, 100% 0, 100% 100%, 63% 100%); 46 | } 47 | 48 | .container:hover .clip { 49 | clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); 50 | } 51 | 52 | .container .clip:hover { 53 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 54 | } 55 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Btn 1 7 | 8 | 9 | 10 |
11 | Hover Me 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: rgb(16, 16, 16); 13 | font-family: sans-serif; 14 | } 15 | 16 | a { 17 | text-decoration: none; 18 | color: antiquewhite; 19 | border: 2px solid antiquewhite; 20 | padding: 2rem 5rem; 21 | position: relative; 22 | overflow: hidden; 23 | transition: all 1s; 24 | } 25 | 26 | a:before { 27 | content: "DOWNLOAD"; 28 | font-weight: bold; 29 | color: #000; 30 | position: absolute; 31 | left: 0; 32 | top: 0; 33 | width: 100%; 34 | height: 100%; 35 | background: antiquewhite; 36 | transform: translateY(-100%); 37 | transition: all 1s; 38 | /* center */ 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | } 43 | 44 | a:hover:before { 45 | transform: translateY(0); 46 | } 47 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Btn 2 7 | 8 | 9 | 10 | Hover Me 11 | 12 | 13 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | font-family: sans-serif; 7 | } 8 | 9 | a { 10 | padding: 2rem 3rem; 11 | text-transform: uppercase; 12 | background-color: blueviolet; 13 | color: #fff; 14 | font-size: 1.5rem; 15 | position: relative; 16 | text-decoration: none; 17 | } 18 | 19 | a::before { 20 | content: "button"; 21 | position: absolute; 22 | top: 0; 23 | left: 0; 24 | width: 100%; 25 | height: 100%; 26 | background: crimson; 27 | /* center our content */ 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | /* Let's provide our rotation/animation */ 32 | transform: rotateX(270deg); 33 | transform-origin: top; 34 | transition: all 0.5s; 35 | } 36 | 37 | a::after { 38 | content: "button"; 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background: rgb(14, 231, 14); 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | transform: rotateX(270deg); 49 | transform-origin: top; 50 | transition: all 0.5s; 51 | transition-delay: 0.25s; 52 | } 53 | 54 | a:hover:before, 55 | a:hover:after { 56 | transform: rotateX(0); 57 | } 58 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Btn 3 7 | 8 | 9 | 10 | Hover Me 11 | 12 | 13 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn3/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | font-family: sans-serif; 7 | } 8 | 9 | a { 10 | width: 300px; 11 | height: 60px; 12 | text-decoration: none; 13 | text-transform: uppercase; 14 | background: transparent; 15 | text-align: center; 16 | line-height: 60px; 17 | font-weight: bold; 18 | letter-spacing: 2px; 19 | position: relative; 20 | transition: all 0.2s; 21 | color: #fff; 22 | } 23 | 24 | a:before { 25 | content: ""; 26 | position: absolute; 27 | top: -3px; 28 | left: -3px; 29 | width: 100%; 30 | height: 100%; 31 | background: #06c988a4; 32 | z-index: -1; 33 | mix-blend-mode: multiply; 34 | transition: all 0.2s; 35 | transform-origin: top; 36 | } 37 | 38 | a:after { 39 | content: ""; 40 | position: absolute; 41 | top: 3px; 42 | left: 3px; 43 | width: 100%; 44 | height: 100%; 45 | background: #ffff00a6; 46 | z-index: -1; 47 | mix-blend-mode: multiply; 48 | transition: all 0.2s; 49 | transform-origin: bottom; 50 | } 51 | 52 | a:hover:before { 53 | top: -6px; 54 | left: 0; 55 | transform: perspective(1000px) rotateX(75deg); 56 | } 57 | 58 | a:hover:after { 59 | top: 6px; 60 | left: 0; 61 | transform: perspective(1000px) rotateX(-75deg); 62 | } 63 | 64 | a:hover { 65 | color: #000; 66 | } 67 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Btn 4 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn4/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-family: sans-serif; 13 | background: crimson; 14 | } 15 | 16 | .btn { 17 | border: none; 18 | padding: 1rem 4rem; 19 | background: rgba(17, 17, 137, 0.824); 20 | color: #fff; 21 | font-size: 22px; 22 | text-transform: uppercase; 23 | position: relative; 24 | cursor: pointer; 25 | } 26 | 27 | .btn:before { 28 | content: ""; 29 | position: absolute; 30 | width: 24px; 31 | height: 24px; 32 | top: -10px; 33 | left: -10px; 34 | /* background: teal; */ 35 | border-top: 4px solid darkblue; 36 | border-left: 4px solid darkblue; 37 | transition: all 0.25s; 38 | } 39 | 40 | .btn:hover:before, 41 | .btn:hover:after { 42 | height: 100%; 43 | width: 100%; 44 | } 45 | 46 | .btn:after { 47 | content: ""; 48 | position: absolute; 49 | width: 24px; 50 | height: 24px; 51 | bottom: -10px; 52 | right: -10px; 53 | border-bottom: 4px solid darkblue; 54 | border-right: 4px solid darkblue; 55 | transition: all 0.25s; 56 | } 57 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Btn 5 7 | 8 | 9 | 10 |
11 | Hover Me 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /25. Top 5 Creative Buttons/btn5/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-family: sans-serif; 13 | background: #000; 14 | } 15 | 16 | a { 17 | position: absolute; 18 | text-decoration: none; 19 | text-transform: uppercase; 20 | padding: 1rem 4rem; 21 | background: #fff; 22 | color: #000; 23 | border-radius: 100px; 24 | font-size: 1.5rem; 25 | transition: all 0.2s; 26 | } 27 | 28 | a:before { 29 | content: ""; 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | width: 100%; 34 | height: 100%; 35 | background: #fff; 36 | border-radius: 100px; 37 | transition: all 1s; 38 | z-index: -1; 39 | } 40 | 41 | a:hover:before { 42 | transform: scaleX(1.4) scaleY(1.6); 43 | opacity: 0; 44 | } 45 | 46 | a:hover { 47 | transform: translateY(-3px); 48 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 49 | } 50 | 51 | a:active { 52 | transform: translateY(-1px); 53 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 54 | } 55 | -------------------------------------------------------------------------------- /26. Creative Menus/01. Menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creative Menu Effect 7 | 8 | 9 | 10 |
11 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /26. Creative Menus/01. Menu/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-family: sans-serif; 13 | background: #000; 14 | } 15 | 16 | ul { 17 | padding: 0; 18 | margin: 0; 19 | display: flex; 20 | flex-wrap: wrap; 21 | text-align: center; 22 | } 23 | 24 | ul li { 25 | list-style: none; 26 | } 27 | 28 | ul li a { 29 | text-decoration: none; 30 | color: #fff; 31 | font-size: 22px; 32 | padding: 1rem 2rem; 33 | position: relative; 34 | } 35 | 36 | a:before { 37 | content: ""; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | width: 100%; 42 | height: 2px; 43 | background: #fff; 44 | transform: scaleX(0); 45 | transition: all 1s; 46 | transform-origin: left; 47 | } 48 | 49 | ul li a:hover:before, 50 | ul li a:hover:after { 51 | transform: scaleX(1); 52 | } 53 | 54 | a:after { 55 | content: ""; 56 | position: absolute; 57 | bottom: 0; 58 | left: 0; 59 | width: 100%; 60 | height: 2px; 61 | background: #fff; 62 | transform: scaleX(0); 63 | transition: all 1s; 64 | transform-origin: right; 65 | } 66 | -------------------------------------------------------------------------------- /26. Creative Menus/02. Menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creative Menu Effect 7 | 8 | 9 | 10 |
11 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /26. Creative Menus/02. Menu/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-family: sans-serif; 13 | } 14 | 15 | ul { 16 | margin: 0; 17 | padding: 0; 18 | display: flex; 19 | } 20 | 21 | li { 22 | list-style: none; 23 | } 24 | 25 | .list-items { 26 | position: relative; 27 | display: block; 28 | padding: 15px 30px; 29 | text-decoration: none; 30 | text-transform: uppercase; 31 | color: #000; 32 | font-size: 22px; 33 | font-weight: bold; 34 | transition: 1s; 35 | } 36 | 37 | .list-items:before { 38 | content: ""; 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | opacity: 0; 45 | transform: scaleY(2); 46 | transition: 1s; 47 | border-top: 2px solid crimson; 48 | border-bottom: 2px solid crimson; 49 | } 50 | 51 | .list-items:hover:before { 52 | transform: scaleY(1.2); 53 | opacity: 1; 54 | } 55 | 56 | .list-items:after { 57 | content: ""; 58 | background: crimson; 59 | position: absolute; 60 | top: 2; 61 | left: 0; 62 | width: 100%; 63 | height: 100%; 64 | transition: 1s; 65 | transform: scale(0); 66 | z-index: -1; 67 | } 68 | 69 | .list-items:hover:after { 70 | transform: scale(1); 71 | } 72 | 73 | .list-items:hover { 74 | color: #fff; 75 | } 76 | -------------------------------------------------------------------------------- /26. Creative Menus/03. Menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creative Menu Effect 7 | 8 | 9 | 10 |
11 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /26. Creative Menus/03. Menu/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-family: sans-serif; 13 | background: #000; 14 | } 15 | 16 | ul { 17 | display: flex; 18 | } 19 | 20 | li { 21 | list-style: none; 22 | } 23 | 24 | ul li a { 25 | color: #fff; 26 | font-size: 2rem; 27 | text-decoration: none; 28 | padding: 0.4rem 1rem; 29 | margin: 0 10px; 30 | position: relative; 31 | transition: all 0.5s; 32 | text-transform: uppercase; 33 | } 34 | 35 | .list-items:before { 36 | content: ""; 37 | position: absolute; 38 | bottom: 12px; 39 | left: 12px; 40 | width: 12px; 41 | height: 12px; 42 | border: 3px solid white; 43 | border-width: 0 0 3px 3px; 44 | opacity: 0; 45 | transition: all 0.6s; 46 | } 47 | 48 | .list-items:hover:before { 49 | opacity: 1; 50 | bottom: -8px; 51 | left: -8px; 52 | } 53 | 54 | .list-items:after { 55 | content: ""; 56 | position: absolute; 57 | top: 0; 58 | right: 0; 59 | width: 12px; 60 | height: 12px; 61 | border: 3px solid white; 62 | border-width: 3px 3px 0 0; 63 | opacity: 0; 64 | transition: all 0.6s; 65 | } 66 | 67 | .list-items:hover:after { 68 | opacity: 1; 69 | top: -8px; 70 | right: -8px; 71 | } 72 | -------------------------------------------------------------------------------- /27. Creative Image Effect/01. Effect 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Effect 1 7 | 8 | 9 | 10 |
11 | 12 |
13 |

Welcome To The Real World 😉

14 |

Write Your Content Here 🥂

15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /27. Creative Image Effect/01. Effect 1/rayul-_M6gy9oHgII-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/27. Creative Image Effect/01. Effect 1/rayul-_M6gy9oHgII-unsplash.jpg -------------------------------------------------------------------------------- /27. Creative Image Effect/01. Effect 1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | font-family: sans-serif; 7 | } 8 | 9 | .container { 10 | width: 30rem; 11 | height: 30rem; 12 | position: relative; 13 | overflow: hidden; 14 | } 15 | 16 | .container img { 17 | width: 100%; 18 | transition: all 1s; 19 | } 20 | 21 | .content { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 100%; 27 | /* center the text */ 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: center; 31 | align-items: center; 32 | color: #fff; 33 | transition: all 1s; 34 | background: rgb(23, 23, 23); 35 | transform: translateX(-100%); 36 | } 37 | 38 | .container:hover .content { 39 | transform: translateX(0); 40 | } 41 | 42 | .container:hover img { 43 | transform: translateX(100%); 44 | } 45 | -------------------------------------------------------------------------------- /27. Creative Image Effect/02. Effect 2/hisu-lee-2qvxIr_DXGo-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/27. Creative Image Effect/02. Effect 2/hisu-lee-2qvxIr_DXGo-unsplash.jpg -------------------------------------------------------------------------------- /27. Creative Image Effect/02. Effect 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Effect 2 7 | 8 | 9 | 10 |
11 | 12 |
13 |

Card Title 🔥

14 |

Content Goes Here 🥂

15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /27. Creative Image Effect/02. Effect 2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | font-family: sans-serif; 7 | } 8 | 9 | .container { 10 | width: 30rem; 11 | height: 30rem; 12 | position: relative; 13 | overflow: hidden; 14 | } 15 | 16 | .container img { 17 | width: 100%; 18 | transition: all 0.5s; 19 | } 20 | 21 | .content { 22 | position: absolute; 23 | bottom: 0; 24 | left: 0; 25 | height: 25%; 26 | width: 100%; 27 | /* center the content */ 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: center; 31 | align-items: center; 32 | color: #fff; 33 | transition: all 0.5s; 34 | background: rgb(23, 23, 23); 35 | transform: translateY(100%); 36 | } 37 | 38 | .container:hover .content { 39 | transform: translateY(0); 40 | } 41 | 42 | .container:hover img { 43 | transform: translateY(-30%); 44 | } 45 | -------------------------------------------------------------------------------- /27. Creative Image Effect/03. Effect 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Effect 3 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 | 15 |
16 |

Card Title

17 |

18 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut rem 19 | nesciunt illo veniam mollitia harum ea. 20 |

21 | Learn More 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /27. Creative Image Effect/03. Effect 3/milad-shams-AxqT51VT8mw-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/27. Creative Image Effect/03. Effect 3/milad-shams-AxqT51VT8mw-unsplash.jpg -------------------------------------------------------------------------------- /27. Creative Image Effect/03. Effect 3/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: rgb(23, 23, 23); 3 | height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | font-family: sans-serif; 8 | } 9 | 10 | .card { 11 | position: relative; 12 | width: 30rem; 13 | height: 35rem; 14 | background-color: black; 15 | box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.5); 16 | } 17 | 18 | .content { 19 | position: absolute; 20 | bottom: 0px; 21 | width: 80%; 22 | height: 10px; 23 | background: crimson; 24 | left: 10%; 25 | text-align: center; 26 | transition: 0.5s; 27 | overflow: hidden; 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | 34 | h3 { 35 | font-size: 30px; 36 | text-transform: uppercase; 37 | margin: 25px; 38 | color: #fff; 39 | } 40 | 41 | p { 42 | width: 80%; 43 | margin: 10px auto; 44 | font-size: 18px; 45 | transition: 0.5s; 46 | opacity: 0; 47 | line-height: 25px; 48 | color: #fff; 49 | } 50 | 51 | a { 52 | text-decoration: none; 53 | background-color: black; 54 | color: #fff; 55 | padding: 10px 15px; 56 | display: inline-block; 57 | margin-top: 10px; 58 | transition: 0.5s; 59 | opacity: 0; 60 | line-height: 25px; 61 | color: #fff; 62 | } 63 | 64 | img { 65 | width: 100%; 66 | height: 100%; 67 | object-fit: cover; 68 | transition: 1s; 69 | } 70 | 71 | .card:hover .content { 72 | height: 100%; 73 | width: 100%; 74 | left: 0; 75 | } 76 | 77 | .card:hover p, 78 | .card:hover a { 79 | opacity: 1; 80 | transition-delay: 0.5s; 81 | } 82 | 83 | .img-container { 84 | position: absolute; 85 | top: 0; 86 | left: 0; 87 | width: 100%; 88 | height: 100%; 89 | transition: 1s; 90 | } 91 | 92 | .card:hover img { 93 | opacity: 0; 94 | } 95 | -------------------------------------------------------------------------------- /28. Creative Cards/01. Card 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creative Card 1 7 | 8 | 9 | 10 |
11 |
12 |

Title

13 |

14 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde adipisci 15 | placeat enim omnis rem vero hic, saepe quis fugiat? Molestiae 16 | consectetur, esse quidem at magni explicabo ab est suscipit odit? 17 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta 18 | laborum dolorum eos libero enim illum rem, aliquid voluptatibus 19 | obcaecati tenetur consequuntur nihil aut a officia culpa molestias? 20 | Nostrum, temporibus ea! 21 |

22 | Read More 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /28. Creative Cards/01. Card 1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | font-family: sans-serif; 6 | background: rgb(10, 10, 10); 7 | height: 100vh; 8 | } 9 | 10 | .card-container { 11 | position: relative; 12 | width: 320px; 13 | padding: 40px; 14 | background: white; 15 | overflow: hidden; 16 | } 17 | 18 | .card-container:before { 19 | content: ""; 20 | position: absolute; 21 | left: 0; 22 | bottom: calc(-100% + 5px); 23 | width: 100%; 24 | height: 100%; 25 | background: blueviolet; 26 | z-index: 1; 27 | transition: 1s; 28 | } 29 | 30 | .card-container:hover:before { 31 | bottom: 0; 32 | } 33 | 34 | .content { 35 | position: relative; 36 | color: #000; 37 | z-index: 2; 38 | transition: 1s; 39 | } 40 | 41 | h2 { 42 | font-size: 30px; 43 | } 44 | 45 | p { 46 | line-height: 25px; 47 | padding: 20px 0; 48 | margin: 20px 0; 49 | } 50 | 51 | a { 52 | font-size: 12px; 53 | color: #fff; 54 | text-decoration: none; 55 | background: rgb(22, 7, 35); 56 | padding: 0.6rem 1rem; 57 | } 58 | 59 | .card-container:hover .content { 60 | color: #fff; 61 | } 62 | -------------------------------------------------------------------------------- /28. Creative Cards/02. Card 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creative Card 2 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 |

Olivia

16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /28. Creative Cards/02. Card 2/marian-oleksyn-Edv_EEWiB3E-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/28. Creative Cards/02. Card 2/marian-oleksyn-Edv_EEWiB3E-unsplash.jpg -------------------------------------------------------------------------------- /28. Creative Cards/02. Card 2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | height: 100vh; 4 | background: linear-gradient(#0093e9, #80d0c7); 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | font-family: sans-serif; 9 | } 10 | 11 | .card { 12 | position: relative; 13 | width: 30rem; 14 | height: 30rem; 15 | background: white; 16 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 17 | } 18 | 19 | .card:before, 20 | .card:after { 21 | content: ""; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 100%; 27 | background: white; 28 | transition: 1s; 29 | z-index: -1; 30 | } 31 | 32 | .card:hover:before { 33 | transform: rotate(20deg); 34 | box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); 35 | } 36 | 37 | .card:hover:after { 38 | transform: rotate(10deg); 39 | box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); 40 | } 41 | 42 | .imgBox { 43 | position: absolute; 44 | top: 10px; 45 | left: 10px; 46 | bottom: 10px; 47 | right: 10px; 48 | background: #222; 49 | transition: 1s; 50 | z-index: 2; 51 | } 52 | 53 | img { 54 | position: absolute; 55 | top: 0; 56 | left: 0; 57 | width: 100%; 58 | height: 100%; 59 | object-fit: cover; 60 | } 61 | 62 | .card:hover .imgBox { 63 | bottom: 80px; 64 | } 65 | 66 | .details { 67 | position: absolute; 68 | left: 10px; 69 | right: 10px; 70 | bottom: 10px; 71 | height: 60px; 72 | text-align: center; 73 | } 74 | -------------------------------------------------------------------------------- /29. Tooltip/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tooltip 7 | 8 | 9 | 10 |
11 | Tooltip Text 12 | Hover Me 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /29. Tooltip/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | width: 100%; 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background: linear-gradient(#8bc6ec, #9599e2); 14 | font-family: sans-serif; 15 | } 16 | 17 | #container { 18 | position: relative; 19 | padding: 7px; 20 | font-size: 25px; 21 | font-weight: bold; 22 | cursor: pointer; 23 | } 24 | 25 | #tooltip-content { 26 | position: absolute; 27 | left: 50%; 28 | top: 0; 29 | transform: translateX(-50%); 30 | background: #000; 31 | color: #fff; 32 | white-space: nowrap; 33 | padding: 10px 15px; 34 | border-radius: 7px; 35 | visibility: hidden; 36 | opacity: 0; 37 | transition: opacity 0.5s ease; 38 | } 39 | 40 | #tooltip-content::before { 41 | content: ""; 42 | position: absolute; 43 | left: 50%; 44 | top: 100%; 45 | transform: translateX(-50%); 46 | border: 15px solid; 47 | border-color: #000 #0000 #0000 #0000; 48 | } 49 | 50 | #container:hover #tooltip-content { 51 | top: -130%; 52 | visibility: visible; 53 | opacity: 1; 54 | } 55 | -------------------------------------------------------------------------------- /30. Accordion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Accordion 7 | 8 | 9 | 10 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /30. Accordion/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: crimson; 9 | font-family: sans-serif; 10 | } 11 | 12 | #accordion { 13 | margin: 100px auto; 14 | width: 600px; 15 | } 16 | 17 | #accordion li { 18 | list-style: none; 19 | width: 100%; 20 | margin-bottom: 10px; 21 | background: #fff; 22 | padding: 10px; 23 | } 24 | 25 | #accordion li label { 26 | padding: 10px; 27 | display: flex; 28 | justify-content: space-between; 29 | align-items: center; 30 | font-size: 18px; 31 | font-weight: 500; 32 | color: dodgerblue; 33 | cursor: pointer; 34 | } 35 | 36 | #accordion li label span { 37 | transform: rotate(90deg); 38 | font-size: 22px; 39 | color: dodgerblue; 40 | } 41 | 42 | #accordion label + input[type="radio"] { 43 | display: none; 44 | } 45 | 46 | #accordion .content { 47 | padding: 0 10px; 48 | line-height: 26px; 49 | max-height: 0; 50 | overflow: hidden; 51 | transition: max-height 0.5s; 52 | } 53 | 54 | #accordion label + input[type="radio"]:checked + .content { 55 | max-height: 400px; 56 | } 57 | -------------------------------------------------------------------------------- /31. Scrollbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scrollbar 7 | 8 | 9 | 10 |
11 |
12 |
13 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo labore 14 | corporis, illum ratione ut, facere rem aut necessitatibus fugit, 15 | exercitationem commodi delectus odio excepturi minima temporibus minus 16 | architecto quasi dolorem officia enim quos illo nemo consectetur 17 | placeat. Earum, eius fugiat. Voluptate aperiam ullam pariatur totam 18 | veniam inventore architecto, ratione quos voluptates optio ab dolorem 19 | commodi quaerat omnis officia quibusdam dolores reiciendis impedit 20 | aliquam exercitationem eos? Illum similique reiciendis deserunt ipsam 21 | molestiae natus consequuntur voluptates eligendi tenetur inventore 22 | doloribus, doloremque quis aut vitae aspernatur porro dignissimos 23 | autem. Impedit perspiciatis nulla laborum. Doloremque corrupti impedit 24 | iure aspernatur ex porro consequatur magni nisi sit eveniet, corporis 25 | cupiditate tempora quis, sint accusamus illum provident eius molestiae 26 | molestias pariatur iusto aliquid numquam accusantium blanditiis. Aut, 27 | eum. Veritatis quo sequi esse nemo consectetur ullam quia 28 | exercitationem aliquam repudiandae in dignissimos numquam qui, at 29 | dolor vitae mollitia inventore iure distinctio quaerat ipsum doloribus 30 | molestias enim nisi? Necessitatibus quo eaque, minima assumenda et 31 | placeat nobis. Odit accusamus quisquam fugit molestiae et! At 32 | provident reprehenderit veniam quas porro eaque enim ducimus neque 33 | tempore nesciunt pariatur assumenda, voluptates, quod deleniti soluta, 34 | nostrum ex ratione consequuntur distinctio vero magni blanditiis in 35 | optio dignissimos? Dolorum error deleniti necessitatibus, quibusdam 36 | distinctio neque beatae, eaque magnam nulla eum maiores explicabo 37 | ipsum magni voluptates, dolore adipisci qui ea debitis quod. Est, 38 | officia error? Natus fugiat impedit et voluptas minus quisquam 39 | voluptatum magni provident quos voluptates, delectus, veritatis 40 | accusamus voluptate eveniet mollitia aliquid nisi assumenda reiciendis 41 | laborum officiis illum magnam a? Reprehenderit vel animi adipisci 42 | doloribus explicabo dolorum odio consectetur, totam placeat illum 43 | quam! Impedit alias velit saepe, quis sapiente architecto laboriosam 44 | porro officiis omnis, unde minus corporis voluptate. Voluptates, 45 | quisquam deleniti vero impedit inventore corrupti repudiandae nesciunt 46 | facilis placeat fugiat corporis et autem mollitia! Nam id consectetur, 47 | voluptatum libero recusandae ipsam assumenda. Ad provident aperiam, 48 | laborum praesentium nihil iure voluptates et natus temporibus eum 49 | aliquam ratione similique eveniet repellat nisi velit, commodi fuga 50 | autem facere soluta. Deleniti numquam officiis ea labore odio minima 51 | laudantium doloremque asperiores repudiandae id quo ad eum enim, 52 | cupiditate veniam hic modi minus, praesentium qui! Ut soluta dolore et 53 | reiciendis ea beatae maxime enim facilis quibusdam. Optio nulla 54 | dignissimos accusamus mollitia rerum nemo magnam unde illo asperiores, 55 | voluptatum eius at corporis quos voluptate tempore, quasi praesentium 56 | debitis non nam in veniam maiores illum, reprehenderit quod. Impedit 57 | quisquam rem animi iste deleniti error, nemo harum illum inventore 58 | dolores quo eum officiis minus, eaque corporis. Ipsam perferendis 59 | labore qui exercitationem voluptatibus quam dignissimos non, harum 60 | animi nobis quaerat nesciunt, itaque quasi aperiam minus, maiores 61 | officia rem dolorem! Perspiciatis architecto sint molestiae ipsam, 62 | repellat consequuntur ipsum pariatur assumenda cum similique harum 63 | laborum quo molestias iure iste laudantium recusandae nostrum. Ea 64 | reiciendis dignissimos nostrum laborum obcaecati perspiciatis aliquam 65 | praesentium officiis repellendus maiores aperiam quibusdam facere 66 | sapiente similique temporibus distinctio officia autem non ipsum 67 | corrupti, corporis atque, nulla illo? Iure aspernatur non praesentium 68 | libero nobis, facilis corporis officiis quia, soluta quam sapiente 69 | enim qui ex adipisci iusto minus quaerat commodi. Beatae alias ab 70 | iusto cupiditate veniam! 71 |
72 |
73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /31. Scrollbar/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | font-family: sans-serif; 6 | color: #fff; 7 | } 8 | 9 | .scroll-container { 10 | background: rgb(7, 7, 7); 11 | width: 25rem; 12 | padding: 30px; 13 | } 14 | 15 | .scroll-div { 16 | width: 400px; 17 | height: 500px; 18 | background: rgb(7, 7, 7); 19 | overflow: hidden; 20 | overflow-y: scroll; 21 | } 22 | 23 | .scroll-object { 24 | padding: 20px; 25 | } 26 | -------------------------------------------------------------------------------- /32. Image Background Text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Bg Text 7 | 8 | 9 | 10 |

HuXn WebDev

11 | 12 | 13 | -------------------------------------------------------------------------------- /32. Image Background Text/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | font-family: "Abril Fatface", cursive; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background: #000; 16 | } 17 | 18 | .heading { 19 | font-size: 10rem; 20 | font-weight: 900; 21 | background: url(https://images.unsplash.com/photo-1446329813274-7c9036bd9a1f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170); 22 | background-size: cover; 23 | background-clip: text; 24 | -webkit-background-clip: text; 25 | color: transparent; 26 | } 27 | -------------------------------------------------------------------------------- /33. Construction Landing Page/Images/Zayn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/33. Construction Landing Page/Images/Zayn.jpg -------------------------------------------------------------------------------- /33. Construction Landing Page/Images/one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/33. Construction Landing Page/Images/one.jpg -------------------------------------------------------------------------------- /33. Construction Landing Page/Images/scott-blake-x-ghf9LjrVg-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/33. Construction Landing Page/Images/scott-blake-x-ghf9LjrVg-unsplash.jpg -------------------------------------------------------------------------------- /33. Construction Landing Page/Images/three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/33. Construction Landing Page/Images/three.jpg -------------------------------------------------------------------------------- /33. Construction Landing Page/Images/two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/33. Construction Landing Page/Images/two.jpg -------------------------------------------------------------------------------- /33. Construction Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dream Home 8 | 9 | 10 | 11 | 12 | 23 |
24 |
25 |

Build Your

26 |

27 | DREAM HOME 28 |

29 |

WE CONSTRUCT YOUR FUTURE

30 | Learn More 31 |
32 |
33 | 34 |

35 | OUR SERVICES 36 |

37 | 38 | 39 |
40 | 41 |
42 |
43 |
44 |

Construction

45 |
46 |
47 |
48 |

ARCHITECTURE PLANING

49 |
50 |
51 |
52 |

CONSULTANCY

53 |
54 |
55 |
56 | 57 |

WHY CHOOSE US?

58 | 59 | 60 |
61 |
62 |
63 |
64 |

1

65 |
66 |

HIGH QUALIFIED & TECHNICAL PROFESSIONALS

67 |
68 |
69 |
70 |

2

71 |
72 |

ADVANCE PLANING

73 |
74 |
75 |
76 |

3

77 |
78 |

STABILITY RESOURCES & EXPERTIES

79 |
80 |
81 |
82 |

4

83 |
84 |

PASSION, INTEGRITY, & PUNCTUALITY

85 |
86 |
87 |
88 |

5

89 |
90 |

BREADTH OF SERVICES

91 |
92 |
93 |
94 |
95 |
96 |
97 | 98 |

99 | PROJECT #DETAILS 100 |

101 | 102 | 103 |
104 |
105 |
106 |
107 |
108 |
109 |

ARCHITECTURE DESIGN

110 |
111 |
112 |

1

113 |
114 |

2D & 3D MODELING

115 |
116 |
117 |
118 |

2

119 |
120 |

INTERIAL & EXTERIOR DESIGN

121 |
122 |
123 |
124 |

3

125 |
126 |

LANDSCAPING & OUTDOOR GARDENING

127 |
128 |
129 |
130 |

4

131 |
132 |

133 | ELECTRICAL, PLUMBING & SEWERAGE DRAWING PLANE. 134 |

135 |
136 |
137 |
138 |

5

139 |
140 |

SOIL INVESTIGATION

141 |
142 |
143 |
144 | 145 |
146 |
147 |

CONSTRUCTION

148 | 149 |
150 |
151 |

1

152 |
153 |

RESIDENTIAL & COMMERCIAL PROJECTS

154 |
155 |
156 |
157 |

2

158 |
159 |

TURNKEY PROJECT (WITH MATERIAL)

160 |
161 |
162 |
163 |

3

164 |
165 |

LANDSCAPING & OUTDOOR GARDENING

166 |
167 |
168 |
169 |

4

170 |
171 |

DEMOLATION

172 |
173 |
174 |
175 |

5

176 |
177 |

RENOVATION & RE-CONSTRUCTION

178 |
179 |
180 |
181 |
182 |
183 |
184 | 185 | 186 |
187 |
188 |
189 |
190 |
191 |

REAL ESTATE

192 |
193 |
194 |

1

195 |
196 |

197 | B - 17 MULTI GARDEN

198 |
199 |
200 |
201 |

2

202 |
203 |

PARK VIEW CITY

204 |
205 |
206 |
207 |

3

208 |
209 |

BEAUTY OF HILLS

210 |
211 |
212 |
213 |

4

214 |
215 |

216 | FAISAL MARGALLAH CITY. 217 |

218 |
219 |
220 |
221 |

5

222 |
223 |

BLUE WORLD CITY

224 |
225 |
226 |
227 | 228 |
229 | 230 | 231 | 232 | Submit 233 |
234 | 235 | 242 | 243 | 244 | -------------------------------------------------------------------------------- /33. Construction Landing Page/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | /* GLOBAL STYLES */ 8 | :root { 9 | --primary-color: #87bc29; 10 | --primary-font: Algerian; 11 | --bg-image-center: no-repeat center/cover; 12 | } 13 | 14 | .center { 15 | text-align: center; 16 | } 17 | 18 | /* ***** NAVIGATION ***** */ 19 | .nav { 20 | display: flex; 21 | justify-content: space-around; 22 | align-items: center; 23 | flex-wrap: wrap; 24 | text-align: center; 25 | background-color: rgba(0, 0, 0, 0.5); 26 | position: fixed; 27 | width: 100%; 28 | padding: 20px; 29 | z-index: 999; 30 | } 31 | 32 | .list-items { 33 | display: inline; 34 | } 35 | 36 | .list-items a { 37 | padding: 20px; 38 | text-decoration: none; 39 | font-family: sans-serif; 40 | color: #fff; 41 | } 42 | 43 | .list-items a:hover { 44 | border-bottom: 2px solid #fff; 45 | } 46 | 47 | .nav__logo h1 { 48 | color: #fff; 49 | font-size: 2rem; 50 | text-align: center; 51 | } 52 | 53 | span { 54 | color: var(--primary-color); 55 | } 56 | 57 | /* ***** HEADER ***** */ 58 | .hero { 59 | background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.616)), 60 | url("Images/scott-blake-x-ghf9LjrVg-unsplash.jpg") var(--bg-image-center) 61 | fixed; 62 | } 63 | 64 | .hero__headings-container { 65 | height: 100vh; 66 | display: flex; 67 | flex-direction: column; 68 | justify-content: center; 69 | align-items: flex-start; 70 | font-family: sans-serif; 71 | margin-left: 10rem; 72 | color: #fff; 73 | } 74 | 75 | .hero__main-headings { 76 | font-size: 5rem; 77 | color: white; 78 | } 79 | 80 | .main-span { 81 | font-family: var(--primary-font); 82 | } 83 | 84 | .hero__headings-container p { 85 | font-weight: bold; 86 | } 87 | 88 | .main-btn { 89 | text-decoration: none; 90 | margin-top: 20px; 91 | color: #fff; 92 | border-bottom: 2px solid var(--primary-color); 93 | padding-bottom: 5px; 94 | font-weight: bold; 95 | } 96 | 97 | /* ****** SERVICES *******/ 98 | .main-headings { 99 | font-family: sans-serif; 100 | font-size: 3rem; 101 | font-weight: normal; 102 | margin: 50px; 103 | transition-property: all; 104 | transition-duration: 0.5s; 105 | } 106 | 107 | .main-headings:hover { 108 | transform: skew(30deg); 109 | } 110 | 111 | /* CARDS */ 112 | .cards { 113 | display: flex; 114 | justify-content: center; 115 | align-items: center; 116 | flex-wrap: wrap; 117 | } 118 | 119 | .card { 120 | padding: 20px; 121 | margin: 20px; 122 | transition-property: all; 123 | transition-duration: 1s; 124 | border: 1px solid #ccc; 125 | } 126 | 127 | .card:hover { 128 | box-shadow: 2px 2px 2px 2px #ccc; 129 | transform: scale(1.1); 130 | cursor: pointer; 131 | } 132 | 133 | .card-image { 134 | width: 300px; 135 | height: 250px; 136 | } 137 | 138 | .card p { 139 | color: rgb(39, 39, 39); 140 | font-family: sans-serif; 141 | padding: 10px; 142 | } 143 | 144 | .img-one { 145 | background: url("Images/one.jpg") var(--bg-image-center); 146 | } 147 | .img-two { 148 | background: url("Images/two.jpg") var(--bg-image-center); 149 | } 150 | .img-three { 151 | background: url("Images/three.jpg") var(--bg-image-center); 152 | } 153 | 154 | /* ******* WHY US ******* */ 155 | .why-us { 156 | display: flex; 157 | justify-content: space-between; 158 | flex-wrap: wrap; 159 | } 160 | 161 | .lists-container { 162 | margin-left: 30px; 163 | font-family: sans-serif; 164 | } 165 | 166 | .list { 167 | display: flex; 168 | align-items: center; 169 | text-align: center; 170 | } 171 | 172 | .list-number { 173 | width: 30px; 174 | height: 30px; 175 | border: 2px solid var(--primary-color); 176 | border-radius: 50%; 177 | display: flex; 178 | flex-direction: column; 179 | justify-content: center; 180 | align-items: center; 181 | margin: 10px 20px; 182 | } 183 | 184 | .list-number p { 185 | color: var(--primary-color); 186 | text-align: center; 187 | } 188 | 189 | .list-info { 190 | color: rgb(122, 122, 122); 191 | transition-property: all; 192 | transition-duration: 0.7s; 193 | } 194 | 195 | .list-info:hover { 196 | transform: scale(1.1); 197 | font-weight: bold; 198 | } 199 | 200 | .owner-image { 201 | background: url(Images/Zayn.jpg) no-repeat top/cover; 202 | width: 300px; 203 | height: 300px; 204 | margin-right: 10rem; 205 | border-radius: 50%; 206 | border: 10px solid var(--primary-color); 207 | transition-property: all; 208 | transition-duration: 1s; 209 | } 210 | 211 | .owner-image:hover { 212 | transform: scale(1.2); 213 | } 214 | 215 | /* ******* PROJECT DETAILS ******* */ 216 | .project-details__container-left { 217 | display: flex; 218 | justify-content: space-around; 219 | align-items: center; 220 | flex-wrap: wrap; 221 | margin-top: 10rem; 222 | font-family: sans-serif; 223 | } 224 | 225 | .project-details__container-right { 226 | display: flex; 227 | justify-content: space-around; 228 | align-items: center; 229 | flex-wrap: wrap; 230 | margin-top: 10rem; 231 | font-family: sans-serif; 232 | } 233 | 234 | .project-details-img { 235 | box-shadow: 10px 10px 5px var(--primary-color); 236 | transition-property: all; 237 | transition-duration: 1s; 238 | } 239 | 240 | .project-details-img:hover { 241 | transform: scale(1.1); 242 | box-shadow: 20px 20px 10px var(--primary-color); 243 | transform: skew(10deg); 244 | } 245 | 246 | .title { 247 | margin-left: 40px; 248 | } 249 | 250 | /* ********* FORM ********* */ 251 | form { 252 | display: flex; 253 | flex-direction: column; 254 | justify-content: center; 255 | align-items: flex-start; 256 | margin: 10rem 10rem; 257 | } 258 | 259 | input { 260 | border: none; 261 | border-bottom: 1px solid #ccc; 262 | margin-bottom: 20px; 263 | outline: none; 264 | width: 50%; 265 | } 266 | 267 | input:focus { 268 | border-bottom: 2px solid var(--primary-color); 269 | } 270 | 271 | .form-btn { 272 | text-decoration: none; 273 | color: var(--primary-color); 274 | border-bottom: 3px solid var(--primary-color); 275 | } 276 | 277 | /* ********* FOOTER ********* */ 278 | footer { 279 | height: 30vh; 280 | background-color: #000000be; 281 | display: flex; 282 | justify-content: center; 283 | align-items: center; 284 | } 285 | 286 | footer > a { 287 | color: #fff; 288 | text-decoration: none; 289 | margin: 20px; 290 | font-family: "IBM Plex Sans Condensed", sans-serif; 291 | } 292 | -------------------------------------------------------------------------------- /34. Foody Landing Page/assets/Images/ian-dooley-d1UPkiFd04A-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/34. Foody Landing Page/assets/Images/ian-dooley-d1UPkiFd04A-unsplash.jpg -------------------------------------------------------------------------------- /34. Foody Landing Page/assets/Images/img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/34. Foody Landing Page/assets/Images/img-1.png -------------------------------------------------------------------------------- /34. Foody Landing Page/assets/Images/img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/34. Foody Landing Page/assets/Images/img-2.png -------------------------------------------------------------------------------- /34. Foody Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Foody 8 | 9 | 10 | 11 | 12 |
13 |

Foody

14 |
15 |
16 |

A Chef In Every Tasty Meal Box

17 |
18 | Select Program 19 | View Menu 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 |
29 |
We Deliver Anywhere
30 |

31 | Each fresh meal is perfectly sized for 1 person to enjoy at 1 32 | sittings.
33 | Our fully-prepared meals are delivered freash, & to eat in 3 minutes. 34 |

35 |
36 | Select Program 37 | View Menu 38 |
39 |
40 |
41 | 42 |
43 |

Why Foody Meal

44 |
45 |
46 |

Variety

47 |
48 |

60+ recipes a week, cooked from 10 mins

49 |

50 | Family classics, global cuisines plus Joe Wickss health rang 51 |

52 |

Tasty plant based and gluten free options too

53 |
54 |
55 |

Quality

56 |
57 |

Fresh ingredients from trusted suppliers

58 |

100% British fresh meat

59 |

60 | All recipes tried, tasted and loved by our chefs and customers 61 |

62 |
63 |
64 |

Simplicity

65 |
66 |

Easy-to follow recipe cards

67 |

Precise ingredients with zero food waste

68 |

Precise ingredients with zero food waste

69 |
70 |
71 |
72 | Get Started 73 |
74 |
75 | 76 |
77 |
78 |
79 |

80 | "I love coming home to a foody with four different ban ging recipes 81 | each week. With so many dishes to choose from there's always something 82 | new to try!" 83 |

84 |

85 | Joe Wicks | The Body Coach 86 |

87 |
88 |
89 | 90 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /34. Foody Landing Page/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&family=Roboto&display=swap"); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | :root { 10 | --main-color: #d41b27; 11 | --black-color: #050505; 12 | --main-font: "Playfair Display"; 13 | --secondary-font: Roboto; 14 | } 15 | 16 | .logo { 17 | color: #000; 18 | font-family: var(--main-font); 19 | margin-left: 4rem; 20 | } 21 | 22 | .highlight { 23 | color: var(--main-color); 24 | } 25 | 26 | .main-btn-fill { 27 | background: var(--main-color); 28 | text-decoration: none; 29 | color: #fff; 30 | padding: 10px 20px; 31 | border-radius: 50px; 32 | font-family: var(--secondary-font); 33 | margin: 10px; 34 | } 35 | 36 | .main-btn { 37 | background: #000; 38 | text-decoration: none; 39 | color: #fff; 40 | padding: 10px 20px; 41 | border-radius: 50px; 42 | font-family: var(--secondary-font); 43 | margin: 10px; 44 | } 45 | 46 | .btn-animation:hover { 47 | background: #fff; 48 | color: #000; 49 | border: 1px solid #000; 50 | transition: 0.5s ease; 51 | } 52 | 53 | /* HEADER */ 54 | .top-header { 55 | height: 80vh; 56 | } 57 | 58 | .top-header__content { 59 | display: flex; 60 | justify-content: center; 61 | align-items: center; 62 | margin-top: 2rem; 63 | text-align: center; 64 | } 65 | 66 | .main-headings { 67 | color: var(--black-color); 68 | font-family: var(--main-font); 69 | font-size: 400%; 70 | margin: 3rem; 71 | } 72 | 73 | .main-img { 74 | margin-right: 20px; 75 | width: 40%; 76 | height: 40%; 77 | display: flex; 78 | flex-direction: column; 79 | justify-content: center; 80 | align-items: center; 81 | } 82 | 83 | /* SECTION 2 */ 84 | .delivery { 85 | display: flex; 86 | flex-wrap: wrap; 87 | justify-content: center; 88 | align-items: center; 89 | background: #000; 90 | color: #fff; 91 | padding-top: 10rem; 92 | padding-bottom: 5rem; 93 | } 94 | 95 | .delivery__img { 96 | width: 250px; 97 | height: 250px; 98 | background-image: url(assets/Images/img-2.png); 99 | background-position: center; 100 | background-size: cover; 101 | margin-right: 3rem; 102 | } 103 | 104 | .delivery__content { 105 | width: 30rem; 106 | } 107 | 108 | .delivery__headings { 109 | font-family: var(--secondary-font); 110 | margin-bottom: 10px; 111 | font-size: 3rem; 112 | font-weight: normal; 113 | } 114 | 115 | .delivery__sub-headings { 116 | font-family: var(--secondary-font); 117 | margin-bottom: 2rem; 118 | } 119 | 120 | .delivery-btn { 121 | border: 1px solid #fff; 122 | } 123 | 124 | /* SECTION 3 */ 125 | .why-foody { 126 | height: 110vh; 127 | background: #fff; 128 | color: #000; 129 | } 130 | 131 | .foody-headings { 132 | text-align: center; 133 | margin-top: 10rem; 134 | padding-top: 2rem; 135 | } 136 | 137 | .why-foody__cards { 138 | display: flex; 139 | justify-content: center; 140 | align-items: center; 141 | } 142 | 143 | .cards__card { 144 | width: 30%; 145 | margin: 0 auto; 146 | } 147 | 148 | .card__title { 149 | font-family: var(--main-font); 150 | font-size: 2rem; 151 | text-align: center; 152 | margin-bottom: 20px; 153 | } 154 | 155 | .card__img { 156 | width: 120px; 157 | height: 120px; 158 | background-size: cover; 159 | background-position: center; 160 | margin: 20px; 161 | margin: 0 auto; 162 | } 163 | 164 | .img-one { 165 | background-image: url("assets/Images/img-2.png"); 166 | } 167 | 168 | .card-info { 169 | margin: 20px; 170 | font-family: var(--secondary-font); 171 | text-align: center; 172 | line-height: 20px; 173 | } 174 | 175 | .btn-container { 176 | text-align: center; 177 | margin-top: 10px; 178 | } 179 | 180 | /* SECTION 4 */ 181 | .testimonial { 182 | height: 100vh; 183 | display: flex; 184 | flex-wrap: wrap; 185 | justify-content: center; 186 | align-items: center; 187 | background: #000; 188 | color: #fff; 189 | } 190 | 191 | .user-img { 192 | background-image: url("assets/Images/ian-dooley-d1UPkiFd04A-unsplash.jpg"); 193 | background-size: cover; 194 | background-position: center; 195 | width: 26%; 196 | height: 30rem; 197 | box-shadow: 20px 20px 2px 2px #fff; 198 | } 199 | 200 | .user-rating-info { 201 | width: 20rem; 202 | height: 20px; 203 | margin-left: 40px; 204 | font-size: 20px; 205 | } 206 | 207 | .user-name { 208 | font-size: 20px; 209 | margin-top: 20px; 210 | font-family: var(--main-font); 211 | } 212 | 213 | /* FOOTER */ 214 | .footer { 215 | display: flex; 216 | flex-wrap: wrap; 217 | justify-content: center; 218 | align-items: center; 219 | background: #fff; 220 | color: #000; 221 | height: 40vh; 222 | } 223 | 224 | .footer-card { 225 | margin: 0 auto; 226 | font-family: var(--secondary-font); 227 | font-weight: normal; 228 | } 229 | 230 | .footer-title { 231 | margin-bottom: 20px; 232 | } 233 | 234 | .footer-info { 235 | margin-bottom: 10px; 236 | } 237 | 238 | @media only screen and (max-width: 600px) { 239 | .main-headings { 240 | font-size: 2rem; 241 | } 242 | 243 | .btns { 244 | display: flex; 245 | justify-content: center; 246 | align-items: center; 247 | } 248 | 249 | .delivery { 250 | text-align: center; 251 | } 252 | .delivery__img { 253 | margin: 0 auto; 254 | margin-bottom: 2rem; 255 | } 256 | 257 | .delivery__headings { 258 | font-size: 2rem; 259 | } 260 | .delivery__sub-headings { 261 | font-size: 12px; 262 | } 263 | 264 | .why-foody { 265 | height: 120vh; 266 | } 267 | 268 | .card__title { 269 | font-size: 1.4rem; 270 | } 271 | 272 | .user-img { 273 | width: 50%; 274 | height: 50%; 275 | } 276 | 277 | .user-rating-info { 278 | margin-bottom: 8rem; 279 | text-align: center; 280 | } 281 | .user-name { 282 | font-size: 20px; 283 | margin-top: 20px; 284 | font-family: var(--main-font); 285 | } 286 | 287 | .footer { 288 | margin-top: 10rem; 289 | } 290 | } 291 | -------------------------------------------------------------------------------- /35. Coffee/Images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/35. Coffee/Images/1.png -------------------------------------------------------------------------------- /35. Coffee/Images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/35. Coffee/Images/2.png -------------------------------------------------------------------------------- /35. Coffee/Images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/35. Coffee/Images/3.png -------------------------------------------------------------------------------- /35. Coffee/Images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/35. Coffee/Images/4.png -------------------------------------------------------------------------------- /35. Coffee/Images/pexels-chitokan-2183027-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/35. Coffee/Images/pexels-chitokan-2183027-removebg-preview.png -------------------------------------------------------------------------------- /35. Coffee/Images/pexels-nao-triponez-129207.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/35. Coffee/Images/pexels-nao-triponez-129207.jpg -------------------------------------------------------------------------------- /35. Coffee/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coffee 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 |
23 |

START YOUR DAY

24 |

WITH OUR COFFEE

25 | 26 |
27 | 28 | 29 | 30 |
31 |
32 |
33 |
34 |
35 |
36 | 37 |

Our Story

38 |
39 |

40 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor 41 | doloremque reiciendis ea voluptatibus. Quis modi ratione incidunt 42 | ipsam 43 |

44 | 45 |
46 |
47 | 48 | 49 |
50 |
51 |
52 |

53 | Perfect Place
54 | To Enjoy Your
55 | Coffee 56 |

57 |
58 |

Lorem ipsum dolor sit amet consectetur adipisicing elit.

59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | 68 |
69 |

Products

70 | 71 |
72 |
73 |
74 |
75 |

Mocha

76 |
77 |
78 |

Espresso

79 |

Chocolate

80 |

Steamed Milk

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

Mocha

88 |
89 |
90 |

Espresso

91 |

Chocolate

92 |

Steamed Milk

93 |
94 | 95 |
96 |
97 |
98 |
99 |

Mocha

100 |
101 |
102 |

Espresso

103 |

Chocolate

104 |

Steamed Milk

105 |
106 | 107 |
108 |
109 |
110 | 111 | 112 |
113 | 136 |
137 | 138 |

139 | Copyright @ 2022 HuXn WebDev | Provided by HuXn WebDev 140 |

141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /35. Coffee/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&display=swap"); 2 | 3 | :root { 4 | --main-color: #deab5f; 5 | --primary-color: #312e2e; 6 | } 7 | 8 | /* Utility Styles */ 9 | button { 10 | padding: 10px 30px; 11 | background: var(--main-color); 12 | border: none; 13 | cursor: pointer; 14 | } 15 | 16 | * { 17 | padding: 0; 18 | margin: 0; 19 | box-sizing: border-box; 20 | } 21 | 22 | body { 23 | background: #100e0f; 24 | } 25 | 26 | nav { 27 | display: flex; 28 | justify-content: space-around; 29 | align-items: center; 30 | color: #fff; 31 | font-family: sans-serif; 32 | padding-top: 15px; 33 | } 34 | 35 | li { 36 | display: inline; 37 | list-style: none; 38 | } 39 | 40 | li a { 41 | color: #fff; 42 | text-decoration: none; 43 | margin-left: 40px; 44 | } 45 | 46 | li a:hover { 47 | border-bottom: 2px solid #deab5f; 48 | } 49 | 50 | .header { 51 | background: url("Images/pexels-nao-triponez-129207.jpg"); 52 | background-position: center; 53 | background-size: cover; 54 | height: 100vh; 55 | font-family: "Playfair Display SC", serif; 56 | font-weight: normal; 57 | display: flex; 58 | flex-direction: column; 59 | justify-content: center; 60 | align-items: center; 61 | color: #fff; 62 | position: relative; 63 | text-align: center; 64 | } 65 | 66 | .main-headings { 67 | position: absolute; 68 | top: 7rem; 69 | font-size: 4rem; 70 | word-spacing: 10px; 71 | } 72 | .primary-heading { 73 | position: absolute; 74 | bottom: 4rem; 75 | font-size: 4rem; 76 | word-spacing: 10px; 77 | margin-bottom: -40px; 78 | } 79 | 80 | .main-btn { 81 | position: absolute; 82 | bottom: 2rem; 83 | padding: 10px 30px; 84 | margin-top: 20px; 85 | background: transparent; 86 | background: var(--main-color); 87 | border: none; 88 | cursor: pointer; 89 | transform: translateY(60px); 90 | } 91 | 92 | #our-story { 93 | margin-top: 15%; 94 | display: flex; 95 | flex-wrap: wrap; 96 | justify-content: space-around; 97 | align-items: center; 98 | } 99 | 100 | .img { 101 | width: 400px; 102 | height: 400px; 103 | background: url(Images/pexels-chitokan-2183027-removebg-preview.png); 104 | background-position: center; 105 | background-size: cover; 106 | } 107 | 108 | .title-style { 109 | display: flex; 110 | align-items: center; 111 | } 112 | 113 | .title { 114 | font-family: "Playfair Display SC", serif; 115 | font-size: 4rem; 116 | color: #fff; 117 | transform: translateX(-100px); 118 | } 119 | 120 | .line { 121 | width: 100px; 122 | height: 2px; 123 | background: #fff; 124 | transform: translateX(-120px); 125 | } 126 | 127 | .section-content p { 128 | max-width: 500px; 129 | color: #fff; 130 | font-family: sans-serif; 131 | line-height: 20px; 132 | margin: 20px 0; 133 | } 134 | 135 | .coffee-container { 136 | display: flex; 137 | justify-content: space-around; 138 | align-items: center; 139 | flex-wrap: wrap; 140 | margin-top: 10rem; 141 | } 142 | 143 | .content-section p { 144 | max-width: 500px; 145 | } 146 | 147 | .img-container { 148 | width: 500px; 149 | height: 400px; 150 | } 151 | 152 | .img-2 { 153 | width: 400px; 154 | height: 400px; 155 | } 156 | 157 | .title-two { 158 | font-size: 3rem; 159 | color: #fff; 160 | font-family: "Playfair Display SC", serif; 161 | font-weight: normal; 162 | } 163 | 164 | .content-section p { 165 | color: white; 166 | margin-top: 20px; 167 | font-family: sans-serif; 168 | } 169 | 170 | .products { 171 | margin-top: 5rem; 172 | } 173 | 174 | .title-three { 175 | font-size: 4rem; 176 | margin-left: 10rem; 177 | margin-top: 10rem; 178 | margin-bottom: 10rem; 179 | } 180 | 181 | .cards { 182 | display: flex; 183 | flex-wrap: wrap; 184 | flex-direction: row; 185 | justify-content: space-around; 186 | align-items: center; 187 | } 188 | 189 | .card { 190 | border: 2px solid #deab5f; 191 | padding: 0 20px; 192 | height: 400px; 193 | width: 300px; 194 | display: flex; 195 | flex-direction: column; 196 | justify-content: space-around; 197 | align-items: center; 198 | border-radius: 5px; 199 | position: relative; 200 | margin-bottom: 4rem; 201 | } 202 | 203 | .card-img { 204 | width: 100px; 205 | height: 100px; 206 | position: absolute; 207 | top: -60px; 208 | } 209 | 210 | .img-one { 211 | background: url(Images/1.png); 212 | background-position: center; 213 | background-size: cover; 214 | } 215 | .img-two { 216 | background: url(Images/3.png); 217 | background-position: center; 218 | background-size: cover; 219 | } 220 | .img-three { 221 | background: url(Images/4.png); 222 | background-position: center; 223 | background-size: cover; 224 | } 225 | 226 | .card-title { 227 | color: #fff; 228 | font-family: sans-serif; 229 | margin-top: 50px; 230 | } 231 | 232 | .card .items p { 233 | color: #fff; 234 | margin: 20px 0; 235 | font-family: sans-serif; 236 | } 237 | 238 | /* footer */ 239 | footer { 240 | height: 50vh; 241 | display: flex; 242 | flex-wrap: wrap; 243 | align-items: center; 244 | justify-content: center; 245 | color: #fff; 246 | font-family: sans-serif; 247 | } 248 | 249 | footer .container { 250 | margin: 20px; 251 | max-width: 300px; 252 | text-align: center; 253 | } 254 | 255 | footer .heading-info { 256 | margin-bottom: 20px; 257 | } 258 | 259 | footer p { 260 | line-height: 25px; 261 | } 262 | 263 | span { 264 | color: #deab5f; 265 | } 266 | 267 | hr { 268 | margin-bottom: 20px; 269 | border-color: #deab5f; 270 | width: 500px; 271 | margin: 0 auto; 272 | } 273 | 274 | .para { 275 | color: white; 276 | font-family: sans-serif; 277 | text-align: center; 278 | margin-top: 20px; 279 | } 280 | 281 | @media only screen and (max-width: 768px) { 282 | .main-headings, 283 | .primary-heading { 284 | font-size: 2.5rem; 285 | } 286 | 287 | #our-story { 288 | text-align: center; 289 | } 290 | 291 | #our-story .title { 292 | transform: translateX(50px); 293 | } 294 | 295 | #our-story .line { 296 | display: none; 297 | } 298 | 299 | .content-section { 300 | text-align: center; 301 | } 302 | 303 | #our-story .img-container .img { 304 | width: 70%; 305 | text-align: center; 306 | margin: 0 auto; 307 | } 308 | 309 | .coffee-container .img-container { 310 | margin-top: 5rem; 311 | width: 50%; 312 | } 313 | 314 | hr { 315 | width: 400px; 316 | } 317 | 318 | .hr-two { 319 | display: none; 320 | } 321 | 322 | .para { 323 | margin-top: 10rem; 324 | } 325 | } 326 | -------------------------------------------------------------------------------- /36. The Art/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | theArt 7 | 8 | 9 | 10 | 11 | 22 | 23 | 24 |
25 |

26 | WHAT
27 | IS CALLED ART? 28 |

29 |

30 | Art, also called (to distinguish it from other art forms) visual art, a 31 | visual object or experience consciously 32 | created through an expression of skill or imagination. 33 |

34 |
35 | 36 |
37 | 41 | 45 | 49 | 53 | 57 | 61 |
62 | 63 |
64 |

7 TYPES OF ART

65 |

66 | The seven different art forms are 67 | 68 | Painting, Sculpture, Literature, Architecture, Theater, Film, and 69 | Music 70 | 71 | . However, back in the day, the seven different art forms were called 72 | the Liberal Arts, consisting of Grammar, Logic, Rhetoric, Arithmetic, 73 | Geometry, Astronomy, and Music. 74 |

75 | 76 |
77 |
78 |

PAINTING

79 | 82 |
83 |
84 |

SCULPTURE

85 | 88 |
89 |
90 |

LITERATURE

91 | 94 |
95 |
96 |

ARCHITECTURE

97 | 100 |
101 |
102 |

CINEMA

103 | 106 |
107 |
108 |

MUSIC

109 | 112 |
113 |
114 |

THEATER

115 | 118 |
119 |
120 |
121 | 122 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /36. The Art/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | /* Fonts */ 8 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"); 9 | @import url("https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap"); 10 | 11 | /* Basic */ 12 | body { 13 | background-color: #ebeae9; 14 | } 15 | 16 | html { 17 | font-family: "Open Sans", sans-serif; 18 | } 19 | 20 | nav { 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | color: #fff; 25 | padding: 20px; 26 | margin-bottom: 5rem; 27 | } 28 | 29 | nav ul { 30 | margin-left: 5rem; 31 | list-style: none; 32 | } 33 | 34 | li a { 35 | text-decoration: none; 36 | color: #000; 37 | } 38 | 39 | nav .burger { 40 | margin-right: 5rem; 41 | cursor: pointer; 42 | } 43 | 44 | nav .burger span { 45 | height: 4px; 46 | border: 2px solid black; 47 | margin: 4px; 48 | background: #000; 49 | } 50 | 51 | header { 52 | margin: 6rem; 53 | } 54 | 55 | .main-headings { 56 | width: 50%; 57 | font-size: 3rem; 58 | } 59 | 60 | .primary-headings { 61 | width: 50%; 62 | margin-top: 3rem; 63 | font-size: 1.5rem; 64 | line-height: 30px; 65 | } 66 | 67 | .bg-gray { 68 | background: rgb(53, 53, 53); 69 | color: #fff; 70 | padding: 2px 10px; 71 | font-weight: bold; 72 | } 73 | /* Header End */ 74 | 75 | /* Main Start */ 76 | main { 77 | margin: 0 4rem; 78 | display: flex; 79 | flex-wrap: wrap; 80 | margin: 40px; 81 | } 82 | 83 | main .img { 84 | width: 50%; 85 | } 86 | 87 | /* SECTION THREE START */ 88 | .section-three { 89 | margin-left: 5rem; 90 | } 91 | 92 | .section-three .primary-headings { 93 | margin-bottom: 10rem; 94 | } 95 | 96 | .list { 97 | display: flex; 98 | flex-wrap: wrap; 99 | justify-content: center; 100 | align-items: center; 101 | } 102 | 103 | .section-three .item h1 { 104 | font-size: 2rem; 105 | color: rgb(53, 53, 53); 106 | margin-left: 1rem; 107 | } 108 | 109 | .section-three img { 110 | width: 400px; 111 | height: 500px; 112 | margin: 50px; 113 | } 114 | /* SECTION THREE END */ 115 | 116 | /* FOOTER START */ 117 | footer { 118 | background: var(--primary-color); 119 | margin-top: 10rem; 120 | display: flex; 121 | flex-wrap: wrap; 122 | justify-content: space-around; 123 | align-items: center; 124 | height: 100vh; 125 | color: #fff; 126 | } 127 | 128 | footer .logo-container h1 { 129 | font-size: 4rem; 130 | font-family: var(--main-font); 131 | margin-bottom: 20px; 132 | } 133 | 134 | footer .logo-container p { 135 | max-width: 400px; 136 | font-family: sans-serif; 137 | line-height: 25px; 138 | } 139 | 140 | footer .about-company { 141 | display: flex; 142 | flex-wrap: wrap; 143 | justify-content: center; 144 | align-items: center; 145 | } 146 | 147 | footer .about-company .container { 148 | margin-right: 40px; 149 | margin-top: 20px; 150 | } 151 | 152 | .about-company .container h1 { 153 | margin-bottom: 50px; 154 | } 155 | 156 | .about-company .container p { 157 | font-family: sans-serif; 158 | margin-bottom: 20px; 159 | } 160 | 161 | footer { 162 | height: 100vh; 163 | background: rgb(43, 43, 43); 164 | } 165 | 166 | @media screen and (max-width: 740px) { 167 | header .main-headings { 168 | width: 100%; 169 | } 170 | header .primary-headings { 171 | width: 100%; 172 | font-size: 1.5rem; 173 | } 174 | 175 | .section-three .main-headings { 176 | width: 100%; 177 | } 178 | .section-three .primary-headings { 179 | width: 100%; 180 | font-size: 1.5rem; 181 | } 182 | 183 | .section-three img { 184 | margin: 0; 185 | } 186 | } 187 | -------------------------------------------------------------------------------- /37. Hoodie/images/Product/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/Product/1.png -------------------------------------------------------------------------------- /37. Hoodie/images/Product/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/Product/2.png -------------------------------------------------------------------------------- /37. Hoodie/images/Product/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/Product/3.png -------------------------------------------------------------------------------- /37. Hoodie/images/Product/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/Product/4.png -------------------------------------------------------------------------------- /37. Hoodie/images/alireza-esmaeeli-BGSZ1t80rpM-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/alireza-esmaeeli-BGSZ1t80rpM-unsplash.jpg -------------------------------------------------------------------------------- /37. Hoodie/images/gesphotoss-1i9K55ni5Dk-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/gesphotoss-1i9K55ni5Dk-unsplash.jpg -------------------------------------------------------------------------------- /37. Hoodie/images/joshua-rondeau-xazIYnxpS2Q-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/joshua-rondeau-xazIYnxpS2Q-unsplash.jpg -------------------------------------------------------------------------------- /37. Hoodie/images/milan-popovic-kOnmHdLJTNI-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/milan-popovic-kOnmHdLJTNI-unsplash.jpg -------------------------------------------------------------------------------- /37. Hoodie/images/oswaldo-ibanez-1NPUmTaiMeg-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/oswaldo-ibanez-1NPUmTaiMeg-unsplash.jpg -------------------------------------------------------------------------------- /37. Hoodie/images/yogendra-singh-uWs_N5Dlyiw-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/37. Hoodie/images/yogendra-singh-uWs_N5Dlyiw-unsplash.jpg -------------------------------------------------------------------------------- /37. Hoodie/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hoodie 7 | 8 | 9 | 10 | 20 | 21 |
22 |
23 |

24 | New Cocktail
25 | Hoodies 26 |

27 |

28 | Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed do 29 | eiusmod. Sit amet, constecture orem Ipsum dolor adipiscing elit, sed 30 | do eiusmod. 31 |

32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 |
40 |
41 | 42 |
43 |
44 |
45 |
46 | 47 |
48 |

49 | Summer Sell
Offer 50 | 51 |

52 |

53 | Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed do 54 | eiusmod. 55 |

56 | 57 |
58 | 59 |
60 | 61 | 62 |
63 |

OUR PRODUCTS

64 | 65 |
66 | 67 | 68 | 69 |
70 | 71 |
72 |
73 |
74 | 75 |
76 |

Red Hoodie

77 |

$52.99

78 | View Product 79 |
80 |
81 |
82 | 83 |
84 |

Black Luxurious Hoodie

85 |

$52.99

86 | View Product 87 |
88 |
89 |
90 | 91 |
92 |

Teal Expensive Hoodie

93 |

$52.99

94 | View Product 95 |
96 |
97 |
98 | 99 |
100 |

Red Hoodie

101 |

$52.99

102 | View Product 103 |
104 |
105 |
106 | 107 |
108 |

Black Luxurious Hoodie

109 |

$52.99

110 | View Product 111 | 112 |
113 |
114 |
115 | 116 |
117 |

Teal Expensive Hoodie

118 |

$52.99

119 | View Product 120 |
121 |
122 |
123 | 124 | 125 |

OUR CLIENT'S SAYS

126 |
127 | 128 |
129 |
130 |
131 |
132 | 133 |

Anna Maria

134 | 135 |

Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed

136 |
137 | 138 |
139 |
140 |
141 |
142 |

Anna Maria

143 | 144 |

Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed

145 |
146 | 147 |
148 |
149 |
150 |
151 |

Anna Maria

152 |

Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed.

153 |
154 |
155 | 156 | 157 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /37. Hoodie/style.css: -------------------------------------------------------------------------------- 1 | /* Playfair Display */ 2 | @import url("https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&display=swap"); 3 | 4 | /* Roboto */ 5 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap"); 6 | 7 | * { 8 | padding: 0; 9 | margin: 0; 10 | box-sizing: border-box; 11 | } 12 | 13 | :root { 14 | --main-color: #239b7e; 15 | --main-font: "Playfair Display SC", serif; 16 | --primary-font: "Roboto", sans-serif; 17 | } 18 | 19 | nav { 20 | display: flex; 21 | flex-wrap: wrap; 22 | justify-content: space-between; 23 | align-items: center; 24 | padding: 20px; 25 | font-family: var(--primary-font); 26 | font-weight: bold; 27 | } 28 | 29 | .logo { 30 | margin-left: 5rem; 31 | } 32 | 33 | .burger { 34 | display: flex; 35 | flex-direction: column; 36 | justify-content: center; 37 | align-items: center; 38 | cursor: pointer; 39 | margin-right: 5rem; 40 | /* --- uncomment this code --- */ 41 | /* border: 2px solid #000; */ 42 | } 43 | 44 | .burger span { 45 | border: 2px solid var(--main-color); 46 | width: 40px; 47 | height: 1px; 48 | margin: 2px; 49 | } 50 | 51 | /* header */ 52 | header { 53 | display: flex; 54 | flex-wrap: wrap; 55 | justify-content: space-around; 56 | align-items: center; 57 | height: 90vh; 58 | margin-top: 2rem; 59 | } 60 | 61 | .main-headings { 62 | font-size: 4rem; 63 | font-family: var(--main-font); 64 | transform: translateY(-40px); 65 | color: #00000097; 66 | line-height: 5rem; 67 | } 68 | 69 | .main-headings span { 70 | color: #000; 71 | } 72 | 73 | .primary-headings { 74 | max-width: 500px; 75 | font-family: var(--primary-font); 76 | line-height: 25px; 77 | margin-bottom: 1rem; 78 | color: #716d6d; 79 | } 80 | 81 | .btn-fill { 82 | background: var(--main-color); 83 | color: #fff; 84 | border: none; 85 | padding: 12px 20px; 86 | margin-right: 10px; 87 | cursor: pointer; 88 | transition: all 0.5s ease-out; 89 | } 90 | 91 | .btn-fill:hover { 92 | background-color: #fff; 93 | border: 1px solid var(--main-color); 94 | color: var(--main-color); 95 | } 96 | 97 | .btn-outline.active { 98 | border: 2px solid var(--main-color); 99 | color: var(--main-color); 100 | background: transparent; 101 | padding: 10px 20px; 102 | cursor: pointer; 103 | transition: all 0.5s ease-out; 104 | } 105 | 106 | .btn-outline.active:hover { 107 | background: var(--main-color); 108 | color: #fff; 109 | } 110 | 111 | .btn-outline { 112 | border: 2px solid #ccc; 113 | color: #ccc; 114 | background: transparent; 115 | padding: 10px 20px; 116 | cursor: pointer; 117 | transition: all 0.5s ease-out; 118 | } 119 | 120 | .btn-outline:hover { 121 | border-color: var(--main-color); 122 | color: var(--main-color); 123 | } 124 | 125 | .img-container { 126 | border-radius: 50%; 127 | box-shadow: 4px 7px 5px 2px #bcbaba; 128 | } 129 | 130 | .header-img { 131 | border-radius: 100%; 132 | background: url(images/oswaldo-ibanez-1NPUmTaiMeg-unsplash.jpg); 133 | background-position: top; 134 | background-size: cover; 135 | width: 400px; 136 | height: 400px; 137 | } 138 | 139 | /* Section 1 */ 140 | .section-one { 141 | display: flex; 142 | flex-wrap: wrap; 143 | justify-content: space-around; 144 | align-items: center; 145 | margin-top: 7rem; 146 | } 147 | 148 | .img-container { 149 | border-radius: 50%; 150 | box-shadow: 4px 7px 5px 2px #bcbaba; 151 | } 152 | 153 | .section-one-img { 154 | background: url(images/gesphotoss-1i9K55ni5Dk-unsplash.jpg); 155 | background-position: top; 156 | background-size: cover; 157 | } 158 | 159 | .primary-headings { 160 | max-width: 500px; 161 | font-family: var(--primary-font); 162 | line-height: 25px; 163 | margin-bottom: 1rem; 164 | color: #716d6d; 165 | } 166 | 167 | /* Products */ 168 | .products { 169 | margin-top: 10rem; 170 | display: flex; 171 | flex-wrap: wrap; 172 | flex-direction: column; 173 | justify-content: center; 174 | align-items: center; 175 | } 176 | 177 | .products .products-heading { 178 | font-family: var(--primary-font); 179 | font-size: 2rem; 180 | margin-bottom: 3rem; 181 | } 182 | 183 | .products .product-categories button { 184 | margin-right: 20px; 185 | margin-bottom: 2rem; 186 | } 187 | 188 | .products .product-items-container { 189 | display: flex; 190 | flex-wrap: wrap; 191 | justify-content: center; 192 | align-items: center; 193 | margin: 20px; 194 | max-width: 60rem; 195 | } 196 | 197 | .products .product-items-container .item { 198 | margin: 20px; 199 | } 200 | 201 | .products .product-items-container .item-layer { 202 | background: #ebf1f0; 203 | padding: 40px; 204 | margin-right: 20px; 205 | margin: 0 auto; 206 | margin-bottom: 20px; 207 | } 208 | 209 | .products .product-items-container .item-layer img { 210 | width: 150px; 211 | height: 200px; 212 | } 213 | 214 | .products .product-items-container .item .item-name { 215 | font-family: var(--primary-font); 216 | margin-bottom: 10px; 217 | } 218 | 219 | .products .product-items-container .item .item-price { 220 | font-family: var(--primary-font); 221 | margin-bottom: 10px; 222 | } 223 | 224 | .products .product-items-container .item .view-product { 225 | font-family: var(--primary-font); 226 | margin-bottom: 10px; 227 | text-decoration: none; 228 | color: var(--main-color); 229 | border-bottom: 1px solid var(--main-color); 230 | } 231 | 232 | /* Customers */ 233 | .customers-reviews { 234 | margin-top: 7rem; 235 | display: flex; 236 | flex-wrap: wrap; 237 | justify-content: space-around; 238 | align-items: center; 239 | } 240 | 241 | .customer { 242 | text-align: center; 243 | } 244 | 245 | .customers-heading { 246 | font-family: var(--primary-font); 247 | font-size: 2rem; 248 | margin-bottom: 20px; 249 | text-align: center; 250 | margin-top: 10rem; 251 | } 252 | 253 | .customers-reviews .customer-description { 254 | font-size: 12px; 255 | margin-top: 20px; 256 | max-width: 200px; 257 | text-align: center; 258 | margin: 10px; 259 | font-family: var(--primary-font); 260 | } 261 | 262 | .customer .customer-img .img { 263 | width: 200px; 264 | height: 200px; 265 | border-radius: 100%; 266 | background-size: cover; 267 | background-position: center; 268 | margin: 0 auto; 269 | margin-bottom: 20px; 270 | } 271 | 272 | .customer-img .img-one { 273 | background: url(images/yogendra-singh-uWs_N5Dlyiw-unsplash.jpg); 274 | } 275 | .customer-img .img-two { 276 | background: url(images/joshua-rondeau-xazIYnxpS2Q-unsplash.jpg); 277 | } 278 | .customer-img .img-three { 279 | background: url(images/milan-popovic-kOnmHdLJTNI-unsplash.jpg); 280 | } 281 | 282 | footer { 283 | background: #1f1e1e; 284 | margin-top: 10rem; 285 | color: #fff; 286 | display: flex; 287 | flex-wrap: wrap; 288 | justify-content: space-around; 289 | align-items: center; 290 | height: 100vh; 291 | font-family: var(--primary-font); 292 | } 293 | 294 | footer .container .footer-heading { 295 | margin-bottom: 3rem; 296 | } 297 | 298 | footer .container .footer-primary-heading { 299 | font-weight: normal; 300 | font-size: 15px; 301 | margin-bottom: 20px; 302 | } 303 | 304 | /* You can make it responsive for your own screen if you wanna to, but for now this is good enough. */ 305 | @media only screen and (max-width: 900px) { 306 | header { 307 | height: 120vh; 308 | text-align: center; 309 | } 310 | 311 | .section-one { 312 | height: 120vh; 313 | text-align: center; 314 | } 315 | 316 | .header-img { 317 | width: 250px; 318 | height: 250px; 319 | } 320 | 321 | .main-headings { 322 | font-size: 3rem; 323 | margin-top: 2rem; 324 | } 325 | 326 | .primary-headings { 327 | width: 400px; 328 | } 329 | 330 | .customer .customer-img .img { 331 | width: 150px; 332 | height: 150px; 333 | } 334 | } 335 | -------------------------------------------------------------------------------- /38. Chairs/Images/bruno-emmanuelle--MUoHL1XULM-unsplash-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/38. Chairs/Images/bruno-emmanuelle--MUoHL1XULM-unsplash-removebg-preview.png -------------------------------------------------------------------------------- /38. Chairs/Images/daniil-silantev-1P6AnKDw6S8-unsplash-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/38. Chairs/Images/daniil-silantev-1P6AnKDw6S8-unsplash-removebg-preview.png -------------------------------------------------------------------------------- /38. Chairs/Images/daniil-silantev-1P6AnKDw6S8-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/38. Chairs/Images/daniil-silantev-1P6AnKDw6S8-unsplash.jpg -------------------------------------------------------------------------------- /38. Chairs/Images/pexels-ron-lach-8346055-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/38. Chairs/Images/pexels-ron-lach-8346055-removebg-preview.png -------------------------------------------------------------------------------- /38. Chairs/Images/scott-webb-eD853mTbBA0-unsplash-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/38. Chairs/Images/scott-webb-eD853mTbBA0-unsplash-removebg-preview.png -------------------------------------------------------------------------------- /38. Chairs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Chairs 7 | 8 | 9 | 10 | 24 | 25 |
26 |
27 |

28 | The Most
29 | Comfortable
30 | Chair For You 31 |

32 |

33 | Lorem Ipsum is simply dummy text of the printing and typesetting 34 | industry. Lorem Ipsum has been the industry's standard dummy text ever 35 | since the 1500s 36 |

37 |
38 | 39 | 40 |
41 |
42 | 43 |
44 | 47 |
48 |
49 |
50 |
51 |

12k+

52 |

Premium Product

53 |
54 |
55 |

21k+

56 |

Happy Customers

57 |
58 |
59 |

28k+

60 |

Awards Winnings

61 |
62 |
63 | 64 |
65 |

66 | Shop Popular
67 | Categories 68 |

69 | 70 |
71 |
72 |
73 |
74 |
75 |
76 |

Workshop Chair

77 |

Indoor Chair

78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |

Workshop Chair

86 |

Indoor Chair

87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |

Workshop Chair

95 |

Indoor Chair

96 |
97 |
98 |
99 |
100 | 101 | 102 |
103 |
104 | 105 |
106 |
107 |
108 |
109 |
110 |
111 | 112 |
113 |

Why Choose Us?

114 |

115 | Lorem Ipsum is simply dummy text of the printing and typesetting 116 | industry. Lorem Ipsum has been the industry's standard dummy text ever 117 | since the 1500s. 118 |

119 |
120 |
121 |
★
122 |

Longevity

123 |

124 | Lorem Ipsum is simply dummy text of the printing and typesetting 125 | industry. 126 |

127 |
128 |
129 |

Quality

130 |

131 | Lorem Ipsum is simply dummy text of the printing and typesetting 132 | industry. 133 |

134 |
135 |
136 |

Heritage

137 |

138 | Lorem Ipsum is simply dummy text of the printing and typesetting 139 | industry. 140 |

141 |
142 |
143 |
★
144 |

Community

145 |

146 | Lorem Ipsum is simply dummy text of the printing and typesetting 147 | industry. 148 |

149 |
150 |
151 |
152 |
153 | 154 |
155 |
156 |

Best Features

157 |

158 | Lorem Ipsum is simply dummy text of the printing and typesetting 159 | industry. Lorem Ipsum has been the industry's standard dummy text ever 160 | since the 1500s. 161 |

162 |
163 |
164 |
★
165 |

Dilvery

166 |

167 | Lorem Ipsum is simply dummy text of the printing and typesetting 168 | industry. 169 |

170 |
171 |
172 |
★
173 |

Gurantee

174 |

175 | Lorem Ipsum is simply dummy text of the printing and typesetting 176 | industry. 177 |

178 |
179 |
180 |
★
181 |

Free Repair

182 |

183 | Lorem Ipsum is simply dummy text of the printing and typesetting 184 | industry. 185 |

186 |
187 |
188 |
189 | 190 |
191 | 195 |
196 |
197 | 198 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /39. Portfolio Site/Images/Projects/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/Projects/1.png -------------------------------------------------------------------------------- /39. Portfolio Site/Images/Projects/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/Projects/2.png -------------------------------------------------------------------------------- /39. Portfolio Site/Images/Projects/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/Projects/3.png -------------------------------------------------------------------------------- /39. Portfolio Site/Images/Projects/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/Projects/4.png -------------------------------------------------------------------------------- /39. Portfolio Site/Images/Projects/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/Projects/5.png -------------------------------------------------------------------------------- /39. Portfolio Site/Images/Projects/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/Projects/6.png -------------------------------------------------------------------------------- /39. Portfolio Site/Images/Projects/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/Projects/7.png -------------------------------------------------------------------------------- /39. Portfolio Site/Images/Projects/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/Projects/8.png -------------------------------------------------------------------------------- /39. Portfolio Site/Images/Projects/9d9769144508357.628db230127df.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/Projects/9d9769144508357.628db230127df.png -------------------------------------------------------------------------------- /39. Portfolio Site/Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg -------------------------------------------------------------------------------- /39. Portfolio Site/Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg -------------------------------------------------------------------------------- /39. Portfolio Site/Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg -------------------------------------------------------------------------------- /39. Portfolio Site/Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/39. Portfolio Site/Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg -------------------------------------------------------------------------------- /39. Portfolio Site/components/_about.scss: -------------------------------------------------------------------------------- 1 | .about { 2 | height: 80vh; 3 | display: flex; 4 | flex-direction: column; 5 | flex-wrap: wrap; 6 | justify-content: flex-end; 7 | align-items: flex-start; 8 | font-family: $primary-font; 9 | margin-top: 23rem; 10 | padding: 3rem 5rem; 11 | 12 | p { 13 | line-height: 1.7; 14 | color: #e8d4ef; 15 | width: 400px; 16 | 17 | span { 18 | padding: 5px; 19 | background: $gradient; 20 | border-radius: 100px; 21 | } 22 | } 23 | 24 | .two { 25 | align-self: flex-end; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /39. Portfolio Site/components/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | margin-top: 10rem; 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-around; 6 | align-items: center; 7 | color: #fff; 8 | 9 | h1 { 10 | font-size: 2rem; 11 | } 12 | 13 | p { 14 | max-width: 400px; 15 | font-family: $primary-font; 16 | line-height: 25px; 17 | } 18 | 19 | .about-company { 20 | display: flex; 21 | flex-wrap: wrap; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .footer-container { 27 | margin-right: 40px; 28 | margin-top: 20px; 29 | 30 | h1 { 31 | margin-bottom: 50px; 32 | } 33 | 34 | p { 35 | font-family: $primary-font; 36 | margin-bottom: 20px; 37 | } 38 | } 39 | 40 | @media screen and (max-width: 1000px) { 41 | height: 80vh; 42 | margin-top: 20rem; 43 | } 44 | 45 | @media screen and (max-width: 800px) { 46 | height: 140vh; 47 | margin-top: 30rem; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /39. Portfolio Site/components/_header.scss: -------------------------------------------------------------------------------- 1 | .frame-container { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 80vh; 6 | 7 | .gradient { 8 | width: 72%; 9 | height: 76%; 10 | position: absolute; 11 | bottom: 74px; 12 | background: $gradient; 13 | border-radius: 10px; 14 | } 15 | 16 | header { 17 | width: 70%; 18 | height: 90%; 19 | margin-top: 2rem; 20 | background-image: url(Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg); 21 | background-size: cover; 22 | background-position: 0 -280px; 23 | background-repeat: no-repeat; 24 | position: relative; 25 | 26 | @media screen and (max-width: 700px) { 27 | background-position: center; 28 | } 29 | 30 | .social { 31 | height: 100%; 32 | width: 10%; 33 | display: flex; 34 | flex-direction: column; 35 | justify-content: center; 36 | color: #fff; 37 | margin-left: 10px; 38 | text-align: center; 39 | 40 | .fa-brands { 41 | margin-bottom: 10px; 42 | } 43 | 44 | .line { 45 | margin: 0 auto; 46 | width: 4px; 47 | border-radius: 10px; 48 | height: 20%; 49 | background: #ae81bf; 50 | margin-bottom: 20px; 51 | } 52 | } 53 | 54 | h1 { 55 | margin-left: 50px; 56 | color: white; 57 | font-size: 5rem; 58 | font-family: $main-font; 59 | font-weight: normal; 60 | transform: translateY(-50px); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /39. Portfolio Site/components/_nav.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 50vh; 3 | background: linear-gradient(to right, #4f2d62, #ac39ea); 4 | 5 | nav { 6 | display: flex; 7 | justify-content: flex-end; 8 | font-family: $primary-font; 9 | 10 | ul { 11 | margin-right: 40px; 12 | margin-top: 20px; 13 | 14 | li { 15 | display: inline; 16 | list-style: none; 17 | margin-left: 30px; 18 | 19 | a { 20 | text-decoration: none; 21 | color: #fff; 22 | } 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /39. Portfolio Site/components/_projects.scss: -------------------------------------------------------------------------------- 1 | .projects { 2 | .title { 3 | margin-left: 50px; 4 | margin-top: 8rem; 5 | color: white; 6 | font-size: 4rem; 7 | font-family: $main-font; 8 | font-weight: normal; 9 | transform: translateY(-50px); 10 | 11 | span { 12 | background: $label-color; 13 | } 14 | } 15 | 16 | .images-container { 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | img { 24 | width: 170px; 25 | height: 100vh; 26 | margin: 30px 10px; 27 | } 28 | 29 | .img-one { 30 | transform: translateY(200px); 31 | } 32 | .img-two { 33 | transform: translateY(150px); 34 | } 35 | .img-three { 36 | transform: translateY(100px); 37 | } 38 | 39 | @media screen and (max-width: 680px) { 40 | .img-one { 41 | margin-bottom: 6rem; 42 | } 43 | .img-two { 44 | margin-bottom: 6rem; 45 | } 46 | .img-three { 47 | margin-bottom: 6rem; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /39. Portfolio Site/components/_resets.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /39. Portfolio Site/components/_reviews.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | 3 | .clients { 4 | height: 100vh; 5 | margin-top: 15rem; 6 | 7 | h1 { 8 | text-align: right; 9 | margin-right: 4rem; 10 | margin-top: 8rem; 11 | color: white; 12 | font-size: 4rem; 13 | font-family: Branden Raulner; 14 | font-weight: normal; 15 | transform: translateY(-50px); 16 | 17 | span { 18 | background: $label-color; 19 | } 20 | } 21 | 22 | section.cards-container { 23 | .cards { 24 | display: flex; 25 | flex-wrap: wrap; 26 | justify-content: center; 27 | align-items: center; 28 | 29 | .card { 30 | background: #2b252e; 31 | padding: 40px; 32 | color: #fff; 33 | line-height: 1.5; 34 | margin: 10px; 35 | 36 | p { 37 | width: 200px; 38 | font-family: "Roboto", sans-serif; 39 | color: rgb(197, 197, 197); 40 | } 41 | 42 | .user-info { 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | 47 | .user-img { 48 | margin-right: 20px; 49 | width: 50px; 50 | height: 50px; 51 | border-radius: 100px; 52 | background: url(Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg) 53 | $bg-image-cover; 54 | } 55 | 56 | .user-img-two { 57 | background: url(Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg) 58 | $bg-image-cover; 59 | } 60 | .user-img-three { 61 | background: url(Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg) 62 | $bg-image-cover; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /39. Portfolio Site/components/_variables.scss: -------------------------------------------------------------------------------- 1 | $bg-image-cover: no-repeat center/cover; 2 | $label-color: #ae81bf64; 3 | $main-font: Branden Raulner; 4 | $primary-font: "Roboto", sans-serif; 5 | $gradient: linear-gradient(to left, #35d08f, #e32e64); 6 | -------------------------------------------------------------------------------- /39. Portfolio Site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Portfolio 7 | 8 | 15 | 16 | 17 |
18 | 26 | 27 |
28 |
29 |
30 | 37 | 38 |

39 | ALEX
40 | MERSON 41 |

42 |
43 |
44 |
45 | 46 |
47 |

48 | HuXn Is a Software Engineer, and also a UI/UX lover he has 49 | worked with lots of popular & unpopular technologies, frameworks, and 50 | libraries such as React, Angular, Vue, and countless other 51 |

52 |

53 | Not only Frameworks and libraries but also different 54 | programming languages like Python, JavaScript, Golang, TypeScript, Java, 55 | C, C++, etc. 56 |

57 |

58 | He is also known as HuXn WebDev on YouTube where he shares 59 | all of his knowledge with the world totally for free. 60 |

61 |
62 | 63 |
64 |

65 | RECENT
66 | PROJECTS 67 |

68 | 69 |
70 |
71 | 72 | 73 | 74 | 75 |
76 |
77 | 78 | 79 | 80 | 81 |
82 |
83 |
84 | 85 |
86 |

87 | CLIENTS
88 | REVIEWS 89 |

90 | 91 |
92 |
93 |
94 |

95 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab 96 | aliquam, dolores quaerat facilis rem iure asperiores odio enim 97 | dolorum ut repellat dolore. 98 |

99 |
100 | 101 | 108 |
109 |
110 |

111 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab 112 | aliquam, dolores quaerat facilis rem iure asperiores odio enim 113 | dolorum ut repellat dolore. 114 |

115 |
116 | 117 | 124 |
125 |
126 |

127 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab 128 | aliquam, dolores quaerat facilis rem iure asperiores odio enim 129 | dolorum ut repellat dolore. 130 |

131 |
132 | 133 | 140 |
141 |
142 |
143 |
144 | 145 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /39. Portfolio Site/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | .container { 9 | height: 50vh; 10 | background: linear-gradient(to right, #4f2d62, #ac39ea); 11 | } 12 | .container nav { 13 | display: flex; 14 | justify-content: flex-end; 15 | font-family: "Roboto", sans-serif; 16 | } 17 | .container nav ul { 18 | margin-right: 40px; 19 | margin-top: 20px; 20 | } 21 | .container nav ul li { 22 | display: inline; 23 | list-style: none; 24 | margin-left: 30px; 25 | } 26 | .container nav ul li a { 27 | text-decoration: none; 28 | color: #fff; 29 | } 30 | 31 | .frame-container { 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | height: 80vh; 36 | } 37 | .frame-container .gradient { 38 | width: 72%; 39 | height: 76%; 40 | position: absolute; 41 | bottom: 74px; 42 | background: linear-gradient(to left, #35d08f, #e32e64); 43 | border-radius: 10px; 44 | } 45 | .frame-container header { 46 | width: 70%; 47 | height: 90%; 48 | margin-top: 2rem; 49 | background-image: url(Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg); 50 | background-size: cover; 51 | background-position: 0 -280px; 52 | background-repeat: no-repeat; 53 | position: relative; 54 | } 55 | @media screen and (max-width: 700px) { 56 | .frame-container header { 57 | background-position: center; 58 | } 59 | } 60 | .frame-container header .social { 61 | height: 100%; 62 | width: 10%; 63 | display: flex; 64 | flex-direction: column; 65 | justify-content: center; 66 | color: #fff; 67 | margin-left: 10px; 68 | text-align: center; 69 | } 70 | .frame-container header .social .fa-brands { 71 | margin-bottom: 10px; 72 | } 73 | .frame-container header .social .line { 74 | margin: 0 auto; 75 | width: 4px; 76 | border-radius: 10px; 77 | height: 20%; 78 | background: #ae81bf; 79 | margin-bottom: 20px; 80 | } 81 | .frame-container header h1 { 82 | margin-left: 50px; 83 | color: white; 84 | font-size: 5rem; 85 | font-family: Branden Raulner; 86 | font-weight: normal; 87 | transform: translateY(-50px); 88 | } 89 | 90 | .about { 91 | height: 80vh; 92 | display: flex; 93 | flex-direction: column; 94 | flex-wrap: wrap; 95 | justify-content: flex-end; 96 | align-items: flex-start; 97 | font-family: "Roboto", sans-serif; 98 | margin-top: 23rem; 99 | padding: 3rem 5rem; 100 | } 101 | .about p { 102 | line-height: 1.7; 103 | color: #e8d4ef; 104 | width: 400px; 105 | } 106 | .about p span { 107 | padding: 5px; 108 | background: linear-gradient(to left, #35d08f, #e32e64); 109 | border-radius: 100px; 110 | } 111 | .about .two { 112 | align-self: flex-end; 113 | } 114 | 115 | .projects .title { 116 | margin-left: 50px; 117 | margin-top: 8rem; 118 | color: white; 119 | font-size: 4rem; 120 | font-family: Branden Raulner; 121 | font-weight: normal; 122 | transform: translateY(-50px); 123 | } 124 | .projects .title span { 125 | background: rgba(174, 129, 191, 0.3921568627); 126 | } 127 | .projects .images-container { 128 | display: flex; 129 | flex-direction: column; 130 | justify-content: center; 131 | align-items: center; 132 | } 133 | .projects img { 134 | width: 170px; 135 | height: 100vh; 136 | margin: 30px 10px; 137 | } 138 | .projects .img-one { 139 | transform: translateY(200px); 140 | } 141 | .projects .img-two { 142 | transform: translateY(150px); 143 | } 144 | .projects .img-three { 145 | transform: translateY(100px); 146 | } 147 | @media screen and (max-width: 680px) { 148 | .projects .img-one { 149 | margin-bottom: 6rem; 150 | } 151 | .projects .img-two { 152 | margin-bottom: 6rem; 153 | } 154 | .projects .img-three { 155 | margin-bottom: 6rem; 156 | } 157 | } 158 | 159 | .clients { 160 | height: 100vh; 161 | margin-top: 15rem; 162 | } 163 | .clients h1 { 164 | text-align: right; 165 | margin-right: 4rem; 166 | margin-top: 8rem; 167 | color: white; 168 | font-size: 4rem; 169 | font-family: Branden Raulner; 170 | font-weight: normal; 171 | transform: translateY(-50px); 172 | } 173 | .clients h1 span { 174 | background: rgba(174, 129, 191, 0.3921568627); 175 | } 176 | .clients section.cards-container .cards { 177 | display: flex; 178 | flex-wrap: wrap; 179 | justify-content: center; 180 | align-items: center; 181 | } 182 | .clients section.cards-container .cards .card { 183 | background: #2b252e; 184 | padding: 40px; 185 | color: #fff; 186 | line-height: 1.5; 187 | margin: 10px; 188 | } 189 | .clients section.cards-container .cards .card p { 190 | width: 200px; 191 | font-family: "Roboto", sans-serif; 192 | color: rgb(197, 197, 197); 193 | } 194 | .clients section.cards-container .cards .card .user-info { 195 | display: flex; 196 | align-items: center; 197 | justify-content: center; 198 | } 199 | .clients section.cards-container .cards .card .user-info .user-img { 200 | margin-right: 20px; 201 | width: 50px; 202 | height: 50px; 203 | border-radius: 100px; 204 | background: url(Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg) no-repeat center/cover; 205 | } 206 | .clients section.cards-container .cards .card .user-info .user-img-two { 207 | background: url(Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg) no-repeat center/cover; 208 | } 209 | .clients section.cards-container .cards .card .user-info .user-img-three { 210 | background: url(Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg) no-repeat center/cover; 211 | } 212 | 213 | footer { 214 | margin-top: 10rem; 215 | display: flex; 216 | flex-wrap: wrap; 217 | justify-content: space-around; 218 | align-items: center; 219 | color: #fff; 220 | } 221 | footer h1 { 222 | font-size: 2rem; 223 | } 224 | footer p { 225 | max-width: 400px; 226 | font-family: "Roboto", sans-serif; 227 | line-height: 25px; 228 | } 229 | footer .about-company { 230 | display: flex; 231 | flex-wrap: wrap; 232 | justify-content: center; 233 | align-items: center; 234 | } 235 | footer .footer-container { 236 | margin-right: 40px; 237 | margin-top: 20px; 238 | } 239 | footer .footer-container h1 { 240 | margin-bottom: 50px; 241 | } 242 | footer .footer-container p { 243 | font-family: "Roboto", sans-serif; 244 | margin-bottom: 20px; 245 | } 246 | @media screen and (max-width: 1000px) { 247 | footer { 248 | height: 80vh; 249 | margin-top: 20rem; 250 | } 251 | } 252 | @media screen and (max-width: 800px) { 253 | footer { 254 | height: 140vh; 255 | margin-top: 30rem; 256 | } 257 | } 258 | 259 | body { 260 | background: #211f22; 261 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /39. Portfolio Site/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","components/_resets.scss","style.css","components/_nav.scss","components/_variables.scss","components/_header.scss","components/_about.scss","components/_projects.scss","components/_reviews.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ,wGAAA;ACAR;EACE,SAAA;EACA,UAAA;EACA,sBAAA;ACEF;;ACLA;EACE,YAAA;EACA,uDAAA;ADQF;ACNE;EACE,aAAA;EACA,yBAAA;EACA,iCCJW;AFYf;ACNI;EACE,kBAAA;EACA,gBAAA;ADQN;ACNM;EACE,eAAA;EACA,gBAAA;EACA,iBAAA;ADQR;ACNQ;EACE,qBAAA;EACA,WAAA;ADQV;;AG5BA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;AH+BF;AG7BE;EACE,UAAA;EACA,WAAA;EACA,kBAAA;EACA,YAAA;EACA,sDDPO;ECQP,mBAAA;AH+BJ;AG5BE;EACE,UAAA;EACA,WAAA;EACA,gBAAA;EACA,qEAAA;EACA,sBAAA;EACA,6BAAA;EACA,4BAAA;EACA,kBAAA;AH8BJ;AG5BI;EAVF;IAWI,2BAAA;EH+BJ;AACF;AG7BI;EACE,YAAA;EACA,UAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;AH+BN;AG7BM;EACE,mBAAA;AH+BR;AG5BM;EACE,cAAA;EACA,UAAA;EACA,mBAAA;EACA,WAAA;EACA,mBAAA;EACA,mBAAA;AH8BR;AG1BI;EACE,iBAAA;EACA,YAAA;EACA,eAAA;EACA,4BDvDM;ECwDN,mBAAA;EACA,4BAAA;AH4BN;;AIvFA;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,eAAA;EACA,yBAAA;EACA,uBAAA;EACA,iCFJa;EEKb,iBAAA;EACA,kBAAA;AJ0FF;AIxFE;EACE,gBAAA;EACA,cAAA;EACA,YAAA;AJ0FJ;AIxFI;EACE,YAAA;EACA,sDFdK;EEeL,oBAAA;AJ0FN;AItFE;EACE,oBAAA;AJwFJ;;AK/GE;EACE,iBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,4BHJQ;EGKR,mBAAA;EACA,4BAAA;ALkHJ;AKhHI;EACE,6CHVQ;AF4Hd;AK9GE;EACE,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;ALgHJ;AK7GE;EACE,YAAA;EACA,aAAA;EACA,iBAAA;AL+GJ;AK5GE;EACE,4BAAA;AL8GJ;AK5GE;EACE,4BAAA;AL8GJ;AK5GE;EACE,4BAAA;AL8GJ;AK3GE;EACE;IACE,mBAAA;EL6GJ;EK3GE;IACE,mBAAA;EL6GJ;EK3GE;IACE,mBAAA;EL6GJ;AACF;;AM1JA;EACE,aAAA;EACA,iBAAA;AN6JF;AM3JE;EACE,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,4BAAA;EACA,mBAAA;EACA,4BAAA;AN6JJ;AM3JI;EACE,6CJhBQ;AF6Kd;AMxJI;EACE,aAAA;EACA,eAAA;EACA,uBAAA;EACA,mBAAA;AN0JN;AMxJM;EACE,mBAAA;EACA,aAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AN0JR;AMxJQ;EACE,YAAA;EACA,iCAAA;EACA,yBAAA;AN0JV;AMvJQ;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;ANyJV;AMvJU;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,6FAAA;ANyJZ;AMrJU;EACE,8FAAA;ANuJZ;AMpJU;EACE,6FAAA;ANsJZ;;AOlNA;EACE,iBAAA;EACA,aAAA;EACA,eAAA;EACA,6BAAA;EACA,mBAAA;EACA,WAAA;APqNF;AOnNE;EACE,eAAA;APqNJ;AOlNE;EACE,gBAAA;EACA,iCLXW;EKYX,iBAAA;APoNJ;AOjNE;EACE,aAAA;EACA,eAAA;EACA,uBAAA;EACA,mBAAA;APmNJ;AOhNE;EACE,kBAAA;EACA,gBAAA;APkNJ;AOhNI;EACE,mBAAA;APkNN;AO/MI;EACE,iCL/BS;EKgCT,mBAAA;APiNN;AO7ME;EAvCF;IAwCI,YAAA;IACA,iBAAA;EPgNF;AACF;AO9ME;EA5CF;IA6CI,aAAA;IACA,iBAAA;EPiNF;AACF;;AFrPA;EACE,mBAAA;AEwPF","file":"style.css"} -------------------------------------------------------------------------------- /39. Portfolio Site/style.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); 2 | 3 | @import "./components/resets"; 4 | @import "./components/variables"; 5 | @import "./components/nav"; 6 | @import "./components/header"; 7 | @import "./components/about"; 8 | @import "./components/projects"; 9 | @import "./components/reviews"; 10 | @import "./components/footer"; 11 | 12 | body { 13 | background: #211f22; 14 | } 15 | -------------------------------------------------------------------------------- /40. Awesome Header/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Awesome Header 7 | 8 | 9 | 16 | 17 | 18 | 31 | 32 |
33 |
34 |
35 |

BADGE

36 |

I'm a software engineer and UI/UX lover.

37 |
38 |
39 |

TOOLS

40 |

41 | I've worked with lots of popular & unpopular technologies, 42 | frameworks, and libraries. 43 |

44 |
45 |
46 |

Languages

47 |
48 |

JS

49 |

Golang

50 |

Python

51 |

Java

52 |

Dart

53 |

C++

54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 | 62 |
63 |
64 |

Previous Work

65 |

Previously I've worked with FQ8, Xerus, 2FGC

66 |
67 |
68 |

Hobbies

69 |
70 |

Cricket

71 |

Football

72 |

Swimming

73 |

Reading

74 |

Writing

75 |

Coding

76 |
77 |
78 |
79 |

Location

80 |

Downtown San Francisco

81 |
82 |
83 |
84 | 85 | 86 | -------------------------------------------------------------------------------- /40. Awesome Header/meysam-jarahkar-LI7jB1925j0-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Advance-CSS-40-Projects/49f5fdf309c44fe24233935607264219196390cb/40. Awesome Header/meysam-jarahkar-LI7jB1925j0-unsplash.jpg -------------------------------------------------------------------------------- /40. Awesome Header/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: radial-gradient(#fff0f0, #f6fdff); 9 | } 10 | 11 | nav { 12 | display: flex; 13 | justify-content: space-around; 14 | align-items: center; 15 | margin-top: 2rem; 16 | 17 | .icons i { 18 | margin-left: 20px; 19 | font-size: 20px; 20 | cursor: pointer; 21 | } 22 | 23 | ul li { 24 | display: inline; 25 | margin-left: 20px; 26 | list-style: none; 27 | a { 28 | text-decoration: none; 29 | font-family: sans-serif; 30 | color: #181818; 31 | } 32 | } 33 | } 34 | 35 | main { 36 | display: flex; 37 | justify-content: space-around; 38 | align-items: center; 39 | flex-wrap: wrap; 40 | margin: 6rem; 41 | } 42 | 43 | .image-container { 44 | background: #fff; 45 | border-radius: 200px; 46 | padding: 20px; 47 | box-shadow: 4px 4px 10px -4px #ccc; 48 | 49 | .image { 50 | background: url(meysam-jarahkar-LI7jB1925j0-unsplash.jpg); 51 | background-repeat: no-repeat; 52 | background-size: cover; 53 | background-position: center; 54 | width: 300px; 55 | height: 500px; 56 | border-radius: 200px; 57 | } 58 | } 59 | 60 | .content { 61 | margin: 3rem 0; 62 | font-family: sans-serif; 63 | 64 | .badge-label { 65 | margin-bottom: 20px; 66 | font-size: 1.4rem; 67 | } 68 | 69 | p.info { 70 | width: 300px; 71 | color: #4a4a4a; 72 | line-height: 1.5; 73 | } 74 | } 75 | 76 | .pills-container { 77 | display: grid; 78 | grid-template-columns: 100px 100px 100px; 79 | gap: 10px; 80 | .pill { 81 | border: 2px solid white; 82 | box-shadow: 4px 4px 10px -4px #ccc; 83 | 84 | padding: 10px 20px; 85 | 86 | border-radius: 100px; 87 | width: 100px; 88 | text-align: center; 89 | } 90 | } 91 | 92 | .content2 { 93 | text-align: right; 94 | 95 | .info { 96 | transform: translateX(20px); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS-Advance-Projects 2 | --------------------------------------------------------------------------------