3d Green Glowing Cube

├── 3d Glowing Cube ├── index.html └── style.css ├── 3d cube ├── index.html └── style.css ├── Animated Card ├── index.html └── style.css ├── Animated Loader ├── index.html └── style.css ├── Animated Navigation Menu ├── index.html └── style.css ├── Button Hover Effect Part-2 ├── index.html └── style.css ├── Button Hover Effects ├── index.html └── style.css ├── Card Hover Effect Part-2 ├── index.html └── style.css ├── Card Hover Effect Part-3 ├── index.html └── style.css ├── Card Hover Effects ├── index.html └── style.css ├── Checkbox Part-1 ├── index.html └── style.css ├── Checkbox Part-2 ├── index.html └── style.css ├── Cursor Movement Effect ├── index.html └── style.css ├── Dark & Light Toggle Switch ├── index.html └── style.css ├── Facebook Login Bar ├── index.html └── style.css ├── Flexbox Accordeon ├── index.html └── style.css ├── Hover Effects ├── index.html └── style.css ├── Instagram Profile Clone ├── index.html └── style.css ├── Loader Part-1 ├── index.html └── style.css ├── Loader Part-2 ├── index.html └── style.css ├── Loader Part-3 ├── index.html └── style.css ├── Loader ├── index.html └── style.css ├── Login Bar ├── index.html └── style.css ├── Login Form ├── index.html └── style.css ├── MENU ├── index.html └── style.css ├── Mail Hover Effect ├── index.html └── style.css ├── Navbar ├── index.html └── style.css ├── Navigation Menu ├── index.html └── style.css ├── New folder └── index.html ├── OTP Verification Form ├── index.html └── style.css ├── README.md ├── Registration Form ├── index.html └── style.css ├── Search Bar ├── index.html └── style.css ├── Sign In Form ├── index.html └── style.css ├── Snowfall Using HTML And CSS ├── index.html └── style.css ├── Social Icons Part-2 ├── index.html └── style.css ├── Social Icons ├── index.html └── style.css ├── Spotify Login Bar ├── index.html └── style.css ├── Toggle Switch ├── index.html └── style.css ├── Tooltip Part-1 ├── index.html └── style.css ├── Weather App Clone Part-2 ├── index.html └── style.css └── Weather Clone Using HTML And CSS ├── index.html └── style.css /3d Glowing Cube/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3d Green Glowing Cube 7 | 8 | 9 | 10 |

11 |

12 |

13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /3d Glowing Cube/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 | min-height: 100vh; 12 | background: #050505; 13 | } 14 | 15 | .cube{ 16 | position: relative; 17 | width: 300px; 18 | height: 300px; 19 | transform-style: preserve-3d; 20 | transform: rotateX(-30deg); 21 | animation: animate 4s linear infinite; 22 | } 23 | 24 | @keyframes animate{ 25 | 0%{ 26 | transform: rotateX(-30deg) rotateY(0deg); 27 | } 28 | 100%{ 29 | transform: rotateX(-30deg) rotateY(360deg); 30 | } 31 | } 32 | 33 | .cube div{ 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100%; 38 | transform-style: preserve-3d; 39 | } 40 | 41 | .cube div span{ 42 | position: absolute; 43 | top: 0; 44 | left: 0; 45 | width: 100%; 46 | height: 100%; 47 | background: linear-gradient(#151515, #00ce00); 48 | transform: rotateY(calc(90deg * var(--i))) translateZ(150px); 49 | } 50 | 51 | .top{ 52 | position: absolute; 53 | top: 0; 54 | left: 0; 55 | width: 300px; 56 | height: 300px; 57 | background: #222; 58 | transform: rotateX(90deg) translateZ(150px); 59 | } 60 | 61 | .top::before{ 62 | content: ''; 63 | position: absolute; 64 | top: 0; 65 | left: 0; 66 | width: 300px; 67 | height: 300px; 68 | background: #0f0; 69 | transform: translateZ(-380px); 70 | filter: blur(20px); 71 | box-shadow: 0 0 120px rgba(0,255,0,0.2), 72 | 0 0 200px rgba(0,255,0,0.4), 73 | 0 0 300px rgba(0,255,0,0.6), 74 | 0 0 400px rgba(0,255,0,0.8), 75 | 0 0 500px rgba(0,255,0,1); 76 | } -------------------------------------------------------------------------------- /3d cube/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3d Cube Using HTML And CSS 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 | 21 | 22 | -------------------------------------------------------------------------------- /3d cube/style.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100%; 6 | } 7 | 8 | .cube { 9 | width: 100px; 10 | height: 100px; 11 | position: relative; 12 | transform-style: preserve-3d; 13 | animation: spin 2s infinite linear; 14 | } 15 | 16 | .side { 17 | position: absolute; 18 | width: 100px; 19 | height: 100px; 20 | opacity: 0.8; 21 | } 22 | 23 | @keyframes spin { 24 | 0% { 25 | transform: rotateX(0deg) rotateY(0deg); 26 | } 27 | 28 | 100% { 29 | transform: rotateX(360deg) rotateY(360deg); 30 | } 31 | } 32 | 33 | .front { 34 | transform: translateZ(50px); 35 | background: linear-gradient(45deg, #ff4e50, #f9d423); 36 | } 37 | 38 | .back { 39 | transform: translateZ(-50px); 40 | background: linear-gradient(45deg, #40e0d0, #ff8c00); 41 | } 42 | 43 | .top { 44 | transform: rotateX(90deg) translateZ(50px); 45 | background: linear-gradient(45deg, #800080, #00bfff); 46 | } 47 | 48 | .bottom { 49 | transform: rotateX(90deg) translateZ(-50px); 50 | background: linear-gradient(45deg, #008000, #ffff00); 51 | } 52 | 53 | .left { 54 | transform: rotateY(90deg) translateZ(50px); 55 | background: linear-gradient(45deg, #0000ff, #ff1493); 56 | } 57 | 58 | .right { 59 | transform: rotateY(90deg) translateZ(-50px); 60 | background: linear-gradient(45deg, #00ffff, #ff0000); 61 | } -------------------------------------------------------------------------------- /Animated Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 | 16 | 17 | -------------------------------------------------------------------------------- /Animated Card/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | .container { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | gap: 20px; 14 | } 15 | 16 | .loader { 17 | position: relative; 18 | width: 150px; 19 | height: 150px; 20 | background: rgba(45, 45, 45, 1); 21 | overflow: hidden; 22 | transform: rotate(calc(90deg * var(--i))); 23 | } 24 | 25 | .loader::before { 26 | content: ""; 27 | position: absolute; 28 | width: 300px; 29 | height: 300px; 30 | background: radial-gradient(var(--clr), transparent); 31 | animation: animate 1.5s linear infinite; 32 | } 33 | 34 | .loader::after { 35 | content: ""; 36 | position: absolute; 37 | inset: 2px; 38 | background: rgba(45, 45, 45, 0.9); 39 | } 40 | 41 | @keyframes animate { 42 | 0% { 43 | transform: translate(-150px, -150px); 44 | } 45 | 25% { 46 | transform: translate(0px, -150px); 47 | } 48 | 50% { 49 | transform: translate(0px, 0px); 50 | } 51 | 75% { 52 | transform: translate(-150px, 0px); 53 | } 54 | 100% { 55 | transform: translate(-150px, -150px); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /Animated Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 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 | -------------------------------------------------------------------------------- /Animated Loader/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | .container { 10 | position: relative; 11 | width: 100%; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .container .square { 18 | position: absolute; 19 | width: 200px; 20 | height: 200px; 21 | } 22 | 23 | .container .square:nth-child(2) { 24 | transform: translate(-25%, -25%) rotateX(180deg); 25 | filter: hue-rotate(60deg); 26 | } 27 | 28 | .container .square:nth-child(3) { 29 | transform: translate(25%, 25%) rotate(180deg); 30 | filter: hue-rotate(180deg); 31 | } 32 | 33 | .container .square::before { 34 | content: ''; 35 | position: absolute; 36 | width: 20px; 37 | height: 20px; 38 | background: #0f0; 39 | box-shadow: 0 0 0 8px #0f03, 0 0 0 15px #0f01; 40 | animation: animateSquare 4s linear infinite; 41 | } 42 | 43 | .container .square span { 44 | position: absolute; 45 | inset: 10px; 46 | overflow: hidden; 47 | transform: rotate(calc(90deg * var(--i))); 48 | } 49 | 50 | .container .square span::before { 51 | content: ''; 52 | position: absolute; 53 | width: 100%; 54 | height: 4px; 55 | background: #0f0; 56 | transform: translateX(-100%); 57 | animation: animate 4s linear infinite; 58 | animation-delay: calc(1s * var(--i)); 59 | } 60 | 61 | @keyframes animateSquare { 62 | 0% { 63 | transform: translate(2px,2px); 64 | } 65 | 66 | 25% { 67 | transform: translate(178px,2px); 68 | } 69 | 70 | 50% { 71 | transform: translate(178px,178px); 72 | } 73 | 74 | 75% { 75 | transform: translate(2px,178px); 76 | } 77 | 78 | 100% { 79 | transform: translate(2px,2px); 80 | } 81 | } 82 | 83 | @keyframes animate { 84 | 0% { 85 | transform: translateX(-100%); 86 | } 87 | 88 | 50%,100% { 89 | transform: translateX(100%); 90 | } 91 | } -------------------------------------------------------------------------------- /Animated Navigation Menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Navigation Menu Using Html And Css 7 | 8 | 9 | 10 |

11 | 12 | 13 | Home 14 | 15 | 16 | 17 | 18 | About 19 | 20 | 21 | 22 | 23 | Help 24 | 25 |

26 | 27 | -------------------------------------------------------------------------------- /Animated Navigation Menu/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background: #212121; 7 | } 8 | 9 | .radio-inputs { 10 | position: relative; 11 | display: flex; 12 | flex-wrap: wrap; 13 | border-radius: 0.5rem; 14 | background-color: #eee; 15 | box-sizing: border-box; 16 | box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06); 17 | padding: 0.25rem; 18 | width: 500px; 19 | font-size: 25px; 20 | } 21 | 22 | .radio-inputs .radio { 23 | flex: 1 1 auto; 24 | text-align: center; 25 | } 26 | 27 | .radio-inputs .radio input { 28 | display: none; 29 | } 30 | 31 | .radio-inputs .radio .name { 32 | display: flex; 33 | cursor: pointer; 34 | align-items: center; 35 | justify-content: center; 36 | border-radius: 0.5rem; 37 | border: none; 38 | color: rgba(51, 65, 85, 1); 39 | padding: 0.5rem 0; 40 | transition: all 0.15s ease-in-out; 41 | } 42 | 43 | .radio-inputs .radio input:checked + .name { 44 | background-color: #51d0e0cf; 45 | font-weight: 600; 46 | } -------------------------------------------------------------------------------- /Button Hover Effect Part-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BUTTON HOVER EFFECT 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Button Hover Effect Part-2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #313131; 7 | } 8 | .button { 9 | padding: 15px 20px; 10 | font-size: 16px; 11 | background: transparent; 12 | border: none; 13 | position: relative; 14 | color: #f0f0f0; 15 | z-index: 1; 16 | } 17 | 18 | .button::after, 19 | .button::before { 20 | content: ""; 21 | position: absolute; 22 | bottom: 0; 23 | right: 0; 24 | z-index: -99999; 25 | transition: all 0.4s; 26 | } 27 | 28 | .button::before { 29 | transform: translate(0%, 0%); 30 | width: 100%; 31 | height: 100%; 32 | background: #28282d; 33 | border-radius: 10px; 34 | } 35 | 36 | .button::after { 37 | transform: translate(10px, 10px); 38 | width: 35px; 39 | height: 35px; 40 | background: #ffffff15; 41 | backdrop-filter: blur(5px); 42 | border-radius: 50px; 43 | } 44 | 45 | .button:hover::before { 46 | transform: translate(5%, 20%); 47 | width: 110%; 48 | height: 110%; 49 | } 50 | 51 | .button:hover::after { 52 | border-radius: 10px; 53 | transform: translate(0, 0); 54 | width: 100%; 55 | height: 100%; 56 | } 57 | 58 | .button:active::after { 59 | transition: 0s; 60 | transform: translate(0, 5%); 61 | } -------------------------------------------------------------------------------- /Button Hover Effects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Button Hover Effects/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | button { 10 | cursor: pointer; 11 | background: transparent; 12 | position: relative; 13 | display: inline-block; 14 | padding: 15px 30px; 15 | outline: none; 16 | border: 2px solid #0f0; 17 | margin: 40px; 18 | width: 150px; 19 | height: 60px; 20 | text-transform: uppercase; 21 | font-weight: 900; 22 | text-decoration: none; 23 | letter-spacing: 2px; 24 | color: #fff; 25 | -webkit-box-reflect: below 0px linear-gradient(transparent, #0002); 26 | transition: 0.45s; 27 | transition-delay: 0s; 28 | } 29 | 30 | button:hover { 31 | transition-delay: 1.5s; 32 | color: #000; 33 | box-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 40px #0f0, 0 0 80px #0f0, 34 | 0 0 100px #0f0; 35 | } 36 | 37 | button span { 38 | position: relative; 39 | z-index: 100; 40 | } 41 | 42 | button::before { 43 | content: ""; 44 | position: absolute; 45 | left: -20px; 46 | top: 50%; 47 | transform: translateY(-50%); 48 | width: 20px; 49 | height: 2px; 50 | background: #0f0; 51 | box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0; 52 | transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s; 53 | transition-delay: 1s, 0.5s, 0s, 0s; 54 | } 55 | 56 | button:hover::before { 57 | width: 60%; 58 | height: 100%; 59 | /* right: -2px; */ 60 | left: -2px; 61 | box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0; 62 | transition-delay: 0s, 0.5s, 1s, 1s; 63 | } 64 | 65 | button::after { 66 | content: ""; 67 | position: absolute; 68 | right: -20px; 69 | top: 50%; 70 | transform: translateY(-50%); 71 | width: 20px; 72 | height: 2px; 73 | background: #0f0; 74 | box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0; 75 | transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s; 76 | transition-delay: 1s, 0.5s, 0s, 0s; 77 | } 78 | 79 | button:hover::after { 80 | width: 60%; 81 | height: 102%; 82 | right: -2px; 83 | box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0; 84 | transition-delay: 0s, 0.5s, 1s, 1s; 85 | } -------------------------------------------------------------------------------- /Card Hover Effect Part-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card Hover Effect Part-2 8 | 9 | 10 |

11 |

12 |

Hover Me

13 |

Lorem Ipsum

14 |

15 |

16 |

Hover Me

17 |

Lorem Ipsum

18 |

19 |

20 |

Hover Me

21 |

Lorem Ipsum

22 |

23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /Card Hover Effect Part-2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #313131; 7 | } 8 | 9 | .cards { 10 | display: flex; 11 | flex-direction: column; 12 | gap: 15px; 13 | } 14 | 15 | .cards .red { 16 | background-color: #f43f5e; 17 | } 18 | 19 | .cards .blue { 20 | background-color: #3b82f6; 21 | } 22 | 23 | .cards .green { 24 | background-color: #22c55e; 25 | } 26 | 27 | .cards .card { 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | flex-direction: column; 32 | text-align: center; 33 | height: 100px; 34 | width: 250px; 35 | border-radius: 10px; 36 | color: white; 37 | cursor: pointer; 38 | transition: 400ms transform, 400ms box-shadow, 400ms background-color; 39 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 40 | } 41 | 42 | .cards .card p.tip { 43 | font-size: 1em; 44 | font-weight: 700; 45 | } 46 | 47 | .cards .card p.second-text { 48 | font-size: 0.7em; 49 | } 50 | 51 | .cards .card:hover { 52 | transform: scale(1.1); 53 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 54 | background-color: rgb(255 255 255); 55 | color: #333; 56 | } 57 | 58 | .cards:hover > .card:not(:hover) { 59 | filter: blur(10px); 60 | transform: scale(0.9); 61 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 62 | } -------------------------------------------------------------------------------- /Card Hover Effect Part-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card Hover Effect Part-3 8 | 9 | 10 |

11 |

12 |

13 |

14 | 37 | Hover Me 38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 | 47 |

48 | Pasta 49 |

50 |

51 |

52 | Spaguetti Bolognese 53 |

54 | 83 |

84 |

30 Mins | 1 Serving

85 |

86 |

87 |

88 |

89 |

90 | 91 | 92 | -------------------------------------------------------------------------------- /Card Hover Effect Part-3/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | } 7 | 8 | .card { 9 | overflow: visible; 10 | width: 190px; 11 | height: 254px; 12 | } 13 | 14 | .content { 15 | width: 100%; 16 | height: 100%; 17 | transform-style: preserve-3d; 18 | transition: transform 300ms; 19 | box-shadow: 0px 0px 10px 1px #000000ee; 20 | border-radius: 5px; 21 | } 22 | 23 | .front, .back { 24 | background-color: #151515; 25 | position: absolute; 26 | width: 100%; 27 | height: 100%; 28 | backface-visibility: hidden; 29 | -webkit-backface-visibility: hidden; 30 | border-radius: 5px; 31 | overflow: hidden; 32 | } 33 | 34 | .back { 35 | width: 100%; 36 | height: 100%; 37 | justify-content: center; 38 | display: flex; 39 | align-items: center; 40 | overflow: hidden; 41 | } 42 | 43 | .back::before { 44 | position: absolute; 45 | content: ' '; 46 | display: block; 47 | width: 160px; 48 | height: 160%; 49 | background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent); 50 | animation: rotation_481 5000ms infinite linear; 51 | } 52 | 53 | .back-content { 54 | position: absolute; 55 | width: 99%; 56 | height: 99%; 57 | background-color: #151515; 58 | border-radius: 5px; 59 | color: white; 60 | display: flex; 61 | flex-direction: column; 62 | justify-content: center; 63 | align-items: center; 64 | gap: 30px; 65 | } 66 | 67 | .card:hover .content { 68 | transform: rotateY(180deg); 69 | } 70 | 71 | @keyframes rotation_481 { 72 | 0% { 73 | transform: rotateZ(0deg); 74 | } 75 | 76 | 0% { 77 | transform: rotateZ(360deg); 78 | } 79 | } 80 | 81 | .front { 82 | transform: rotateY(180deg); 83 | color: white; 84 | } 85 | 86 | .front .front-content { 87 | position: absolute; 88 | width: 100%; 89 | height: 100%; 90 | padding: 10px; 91 | display: flex; 92 | flex-direction: column; 93 | justify-content: space-between; 94 | } 95 | 96 | .front-content .badge { 97 | background-color: #00000055; 98 | padding: 2px 10px; 99 | border-radius: 10px; 100 | backdrop-filter: blur(2px); 101 | width: fit-content; 102 | } 103 | 104 | .description { 105 | box-shadow: 0px 0px 10px 5px #00000088; 106 | width: 100%; 107 | padding: 10px; 108 | background-color: #00000099; 109 | backdrop-filter: blur(5px); 110 | border-radius: 5px; 111 | } 112 | 113 | .title { 114 | font-size: 11px; 115 | max-width: 100%; 116 | display: flex; 117 | justify-content: space-between; 118 | } 119 | 120 | .title p { 121 | width: 50%; 122 | } 123 | 124 | .card-footer { 125 | color: #ffffff88; 126 | margin-top: 5px; 127 | font-size: 8px; 128 | } 129 | 130 | .front .img { 131 | position: absolute; 132 | width: 100%; 133 | height: 100%; 134 | object-fit: cover; 135 | object-position: center; 136 | } 137 | 138 | .circle { 139 | width: 90px; 140 | height: 90px; 141 | border-radius: 50%; 142 | background-color: #ffbb66; 143 | position: relative; 144 | filter: blur(15px); 145 | animation: floating 2600ms infinite linear; 146 | } 147 | 148 | #bottom { 149 | background-color: #ff8866; 150 | left: 50px; 151 | top: 0px; 152 | width: 150px; 153 | height: 150px; 154 | animation-delay: -800ms; 155 | } 156 | 157 | #right { 158 | background-color: #ff2233; 159 | left: 160px; 160 | top: -80px; 161 | width: 30px; 162 | height: 30px; 163 | animation-delay: -1800ms; 164 | } 165 | 166 | @keyframes floating { 167 | 0% { 168 | transform: translateY(0px); 169 | } 170 | 171 | 50% { 172 | transform: translateY(10px); 173 | } 174 | 175 | 100% { 176 | transform: translateY(0px); 177 | } 178 | } -------------------------------------------------------------------------------- /Card Hover Effects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Card Hover Effects 7 | 8 | 9 | 10 |

11 |

12 |

Hover Me

13 |

Lorem Ipsum

14 |

15 |

16 |

Hover Me

17 |

Lorem Ipsum

18 |

19 |

20 |

Hover Me

21 |

Lorem Ipsum

22 |

23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /Card Hover Effects/style.css: -------------------------------------------------------------------------------- 1 | .cards { 2 | display: flex; 3 | flex-direction: row; 4 | gap: 15px; 5 | } 6 | 7 | .cards .red { 8 | background-color: #007e9e; 9 | } 10 | 11 | .cards .blue { 12 | background-color: #0062ff; 13 | } 14 | 15 | .cards .green { 16 | background-color: #18cd5e; 17 | } 18 | 19 | .cards .card { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | flex-direction: column; 24 | text-align: center; 25 | height: 100px; 26 | width: 100px; 27 | border-radius: 10px; 28 | color: white; 29 | cursor: pointer; 30 | transition: 400ms; 31 | } 32 | 33 | .cards .card p.tip { 34 | font-size: 1em; 35 | font-weight: 700; 36 | } 37 | 38 | .cards .card p.second-text { 39 | font-size: .7em; 40 | } 41 | 42 | .cards .card:hover { 43 | transform: scale(1.2, 1.2); 44 | } 45 | 46 | .cards:hover > .card:not(:hover) { 47 | filter: blur(10px); 48 | transform: scale(0.9, 0.9); 49 | } -------------------------------------------------------------------------------- /Checkbox Part-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Checkbox Part-1 / @point_of_the_code 7 | 8 | 9 | 10 | 11 | 12 |

13 |

14 | ENGINE 15 | START 16 | STOP 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Checkbox Part-1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 80vh; 6 | background-color: #212121; 7 | } 8 | 9 | .container input { 10 | position: absolute; 11 | opacity: 0; 12 | cursor: pointer; 13 | height: 0; 14 | width: 0; 15 | } 16 | 17 | .container { 18 | display: block; 19 | position: relative; 20 | cursor: pointer; 21 | font-size: 20px; 22 | user-select: none; 23 | } 24 | 25 | .circle { 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: center; 29 | align-items: center; 30 | width: 6em; 31 | height: 6em; 32 | border-radius: 50%; 33 | border: 6px solid #838996; 34 | background-color: #282828; 35 | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 36 | rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, 37 | rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; 38 | } 39 | 40 | .circle span { 41 | color: #e5e4e2; 42 | font-size: small; 43 | } 44 | 45 | .circle .led { 46 | width: 1em; 47 | height: 0.2em; 48 | background-color: #bbbbbb; 49 | border-radius: 5px; 50 | transition: 0.4s; 51 | } 52 | 53 | .engine-text { 54 | margin-top: 0.75em; 55 | font-weight: 500; 56 | } 57 | 58 | .start-text, 59 | .stop-text { 60 | font-weight: 600; 61 | } 62 | 63 | .container input:checked ~ .circle .led { 64 | background-color: #fdda16; 65 | box-shadow: #fdda16 0px 1px 0px, #fdda16 0px 0px 8px; 66 | } 67 | 68 | .container input:checked ~ .circle { 69 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, 70 | rgba(14, 30, 37, 0.32) 0px 2px 16px 0px, inset 3px 3px 8px 1px #485871, 71 | inset -3px -3px 8px 1px #485871; 72 | } -------------------------------------------------------------------------------- /Checkbox Part-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | checkbox 8 | 9 | 10 |

11 | 12 | Bread 13 | 14 | Cheese 15 | 16 | Coffee 17 |

18 | 19 | 20 | -------------------------------------------------------------------------------- /Checkbox Part-2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #313131; 7 | } 8 | 9 | #checklist { 10 | --background: #303952; 11 | --text: #5d6474; 12 | --check: #cc29f0; 13 | --disabled: #d3c8de; 14 | --width: 100px; 15 | --height: 180px; 16 | --border-radius: 10px; 17 | background: var(--background); 18 | width: var(--width); 19 | height: var(--height); 20 | border-radius: var(--border-radius); 21 | position: relative; 22 | box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); 23 | padding: 30px 85px; 24 | display: grid; 25 | grid-template-columns: 30px auto; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | 30 | #checklist label { 31 | color: var(--text); 32 | position: relative; 33 | cursor: pointer; 34 | display: grid; 35 | align-items: center; 36 | width: fit-content; 37 | transition: color 0.3s ease; 38 | margin-right: 20px; 39 | } 40 | 41 | #checklist label::before, 42 | #checklist label::after { 43 | content: ""; 44 | position: absolute; 45 | } 46 | 47 | #checklist label::before { 48 | height: 2px; 49 | width: 8px; 50 | left: -27px; 51 | background: var(--check); 52 | border-radius: 2px; 53 | transition: background 0.3s ease; 54 | } 55 | 56 | #checklist label:after { 57 | height: 4px; 58 | width: 4px; 59 | top: 8px; 60 | left: -25px; 61 | border-radius: 50%; 62 | } 63 | 64 | #checklist input[type="checkbox"] { 65 | -webkit-appearance: none; 66 | -moz-appearance: none; 67 | position: relative; 68 | height: 15px; 69 | width: 15px; 70 | outline: none; 71 | border: 0; 72 | margin: 0 15px 0 0; 73 | cursor: pointer; 74 | background: var(--background); 75 | display: grid; 76 | align-items: center; 77 | margin-right: 20px; 78 | } 79 | 80 | #checklist input[type="checkbox"]::before, 81 | #checklist input[type="checkbox"]::after { 82 | content: ""; 83 | position: absolute; 84 | height: 2px; 85 | top: auto; 86 | background: var(--check); 87 | border-radius: 2px; 88 | } 89 | 90 | #checklist input[type="checkbox"]::before { 91 | width: 0px; 92 | right: 60%; 93 | transform-origin: right bottom; 94 | } 95 | 96 | #checklist input[type="checkbox"]::after { 97 | width: 0px; 98 | left: 40%; 99 | transform-origin: left bottom; 100 | } 101 | 102 | #checklist input[type="checkbox"]:checked::before { 103 | animation: check-01 0.4s ease forwards; 104 | } 105 | 106 | #checklist input[type="checkbox"]:checked::after { 107 | animation: check-02 0.4s ease forwards; 108 | } 109 | 110 | #checklist input[type="checkbox"]:checked + label { 111 | color: var(--disabled); 112 | animation: move 0.3s ease 0.1s forwards; 113 | } 114 | 115 | #checklist input[type="checkbox"]:checked + label::before { 116 | background: var(--disabled); 117 | animation: slice 0.4s ease forwards; 118 | } 119 | 120 | #checklist input[type="checkbox"]:checked + label::after { 121 | animation: firework 0.5s ease forwards 0.1s; 122 | } 123 | 124 | @keyframes move { 125 | 50% { 126 | padding-left: 8px; 127 | padding-right: 0px; 128 | } 129 | 130 | 100% { 131 | padding-right: 4px; 132 | } 133 | } 134 | 135 | @keyframes slice { 136 | 60% { 137 | width: 100%; 138 | left: 4px; 139 | } 140 | 141 | 100% { 142 | width: 100%; 143 | left: -2px; 144 | padding-left: 0; 145 | } 146 | } 147 | 148 | @keyframes check-01 { 149 | 0% { 150 | width: 4px; 151 | top: auto; 152 | transform: rotate(0); 153 | } 154 | 155 | 50% { 156 | width: 0px; 157 | top: auto; 158 | transform: rotate(0); 159 | } 160 | 161 | 51% { 162 | width: 0px; 163 | top: 8px; 164 | transform: rotate(45deg); 165 | } 166 | 167 | 100% { 168 | width: 5px; 169 | top: 8px; 170 | transform: rotate(45deg); 171 | } 172 | } 173 | 174 | @keyframes check-02 { 175 | 0% { 176 | width: 4px; 177 | top: auto; 178 | transform: rotate(0); 179 | } 180 | 181 | 50% { 182 | width: 0px; 183 | top: auto; 184 | transform: rotate(0); 185 | } 186 | 187 | 51% { 188 | width: 0px; 189 | top: 8px; 190 | transform: rotate(-45deg); 191 | } 192 | 193 | 100% { 194 | width: 10px; 195 | top: 8px; 196 | transform: rotate(-45deg); 197 | } 198 | } 199 | 200 | @keyframes firework { 201 | 0% { 202 | opacity: 1; 203 | box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 204 | 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0; 205 | } 206 | 207 | 30% { 208 | opacity: 1; 209 | } 210 | 211 | 100% { 212 | opacity: 0; 213 | box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 214 | 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, 215 | -14px -8px 0 0px #4f29f0; 216 | } 217 | } 218 | -------------------------------------------------------------------------------- /Cursor Movement Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cursor Movement Effect Using HTML And CSS 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 |

56 |

57 | 58 | 59 | 60 |

61 |

62 |

63 | 64 | 65 | -------------------------------------------------------------------------------- /Cursor Movement Effect/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | @keyframes animate { 10 | 0% { 11 | filter: hue-rotate(0deg); 12 | } 13 | 100% { 14 | filter: hue-rotate(360deg); 15 | } 16 | } 17 | 18 | .container { 19 | position: relative; 20 | top: -80px; 21 | transform: skewY(-20deg); 22 | animation: animate 5s linear infinite; 23 | .cube { 24 | position: relative; 25 | z-index: 2; 26 | &:nth-child(2) { 27 | z-index: 1; 28 | translate: -60px -60px; 29 | } 30 | &:nth-child(3) { 31 | z-index: 3; 32 | translate: 60px 60px; 33 | } 34 | div { 35 | position: absolute; 36 | display: flex; 37 | flex-direction: column; 38 | gap: 30px; 39 | translate: calc(-70px * var(--x)) calc(-60px * var(--y)); 40 | span { 41 | position: relative; 42 | display: inline-block; 43 | width: 50px; 44 | height: 50px; 45 | background: #dcdcdc; 46 | z-index: calc(1 * var(--i)); 47 | transition: 1.5s; 48 | &:hover { 49 | transition: 0s; 50 | background: #ef4149; 51 | filter: drop-shadow(0 0 30px #ef4149); 52 | &:before, 53 | &:after { 54 | transition: 0s; 55 | background: #ef4149; 56 | } 57 | } 58 | &:before { 59 | content: ""; 60 | position: absolute; 61 | left: -40px; 62 | width: 40px; 63 | height: 100%; 64 | background: #fff; 65 | transform-origin: right; 66 | transform: skewY(45deg); 67 | transition: 1.5s; 68 | } 69 | &:after { 70 | content: ""; 71 | position: absolute; 72 | top: -40px; 73 | left: 0px; 74 | width: 100%; 75 | height: 40px; 76 | background: #f2f2f2; 77 | transform-origin: bottom; 78 | transform: skewX(45deg); 79 | transition: 1.5s; 80 | } 81 | } 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /Dark & Light Toggle Switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

12 |

13 |

14 | 21 | 22 |

23 |

24 |

25 |

26 | 27 | 28 |

29 |

30 |

Light

31 |

Dark

32 |

33 | 34 |

35 |

36 |

37 |

38 | 39 | 40 | -------------------------------------------------------------------------------- /Dark & Light Toggle Switch/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | } 7 | 8 | /* GENERAL */ 9 | .app { 10 | position: absolute; 11 | } 12 | 13 | .credit { 14 | position: fixed; 15 | right: 2rem; 16 | bottom: 2rem; 17 | color: white; 18 | } 19 | 20 | .credit a { 21 | color: inherit; 22 | } 23 | 24 | /* Main Circle */ 25 | .main-circle { 26 | width: 40rem; 27 | height: 40rem; 28 | border-radius: 100%; 29 | background: linear-gradient(40deg, #ff0080, #ff8c00 70%); 30 | position: absolute; 31 | z-index: 1; 32 | left: 50%; 33 | -webkit-transform: translate(-50%, -70%); 34 | -ms-transform: translate(-50%, -70%); 35 | transform: translate(-50%, -70%); 36 | } 37 | 38 | /* Phone */ 39 | .phone { 40 | position: relative; 41 | z-index: 2; 42 | width: 18rem; 43 | height: 17rem; 44 | background-color: inherit; 45 | -webkit-box-shadow: 0 4px 35px rgba(0, 0, 0, 0.1); 46 | box-shadow: 0 4px 35px rgba(0, 0, 0, 0.1); 47 | border-radius: 40px; 48 | display: -webkit-box; 49 | display: -ms-flexbox; 50 | display: flex; 51 | -webkit-box-orient: vertical; 52 | -webkit-box-direction: normal; 53 | -ms-flex-direction: column; 54 | flex-direction: column; 55 | } 56 | 57 | /* Top */ 58 | .menu { 59 | /* background-color: blue; */ 60 | font-size: 80%; 61 | opacity: 0.4; 62 | padding: 0.8rem 1.8rem; 63 | display: -webkit-box; 64 | display: -ms-flexbox; 65 | display: flex; 66 | -webkit-box-pack: justify; 67 | -ms-flex-pack: justify; 68 | justify-content: space-between; 69 | -webkit-box-align: center; 70 | -ms-flex-align: center; 71 | align-items: center; 72 | } 73 | 74 | .icons { 75 | display: -webkit-box; 76 | display: -ms-flexbox; 77 | display: flex; 78 | margin-top: 0.5rem; 79 | } 80 | 81 | .battery { 82 | width: 0.85rem; 83 | height: 0.45rem; 84 | background-color: black; 85 | } 86 | 87 | .network { 88 | width: 0; 89 | height: 0; 90 | border-style: solid; 91 | border-width: 0 6.8px 7.2px 6.8px; 92 | border-color: transparent transparent black transparent; 93 | -webkit-transform: rotate(135deg); 94 | -ms-transform: rotate(135deg); 95 | transform: rotate(135deg); 96 | margin: 0.12rem 0.5rem; 97 | } 98 | 99 | /* Middle */ 100 | .content { 101 | display: -webkit-box; 102 | display: -ms-flexbox; 103 | display: flex; 104 | -webkit-box-orient: vertical; 105 | -webkit-box-direction: normal; 106 | -ms-flex-direction: column; 107 | flex-direction: column; 108 | margin: auto; 109 | text-align: center; 110 | width: 70%; 111 | -webkit-transform: translateY(5%); 112 | -ms-transform: translateY(5%); 113 | transform: translateY(5%); 114 | } 115 | 116 | .circle { 117 | position: relative; 118 | border-radius: 100%; 119 | width: 8rem; 120 | height: 8rem; 121 | background: linear-gradient(40deg, #ff0080, #ff8c00 70%); 122 | margin: auto; 123 | } 124 | 125 | .crescent { 126 | position: absolute; 127 | border-radius: 100%; 128 | right: 0; 129 | width: 6rem; 130 | height: 6rem; 131 | background: white; 132 | -webkit-transform: scale(0); 133 | -ms-transform: scale(0); 134 | transform: scale(0); 135 | -webkit-transform-origin: top right; 136 | -ms-transform-origin: top right; 137 | transform-origin: top right; 138 | -webkit-transition: -webkit-transform 0.6s 139 | cubic-bezier(0.645, 0.045, 0.355, 1); 140 | transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); 141 | transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); 142 | transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), 143 | -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); 144 | } 145 | 146 | label, 147 | .toggle { 148 | height: 2.8rem; 149 | border-radius: 100px; 150 | } 151 | 152 | label { 153 | width: 100%; 154 | background-color: rgba(0, 0, 0, 0.1); 155 | border-radius: 100px; 156 | position: relative; 157 | margin: 1.8rem 0 4rem 0; 158 | cursor: pointer; 159 | } 160 | 161 | .toggle { 162 | position: absolute; 163 | width: 50%; 164 | background-color: #fff; 165 | -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); 166 | box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); 167 | -webkit-transition: -webkit-transform 0.3s 168 | cubic-bezier(0.25, 0.46, 0.45, 0.94); 169 | transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 170 | transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 171 | transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 172 | -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 173 | } 174 | 175 | .names { 176 | font-size: 90%; 177 | font-weight: bolder; 178 | color: black; 179 | width: 65%; 180 | margin-left: 17.5%; 181 | position: absolute; 182 | display: -webkit-box; 183 | display: -ms-flexbox; 184 | display: flex; 185 | -webkit-box-pack: justify; 186 | -ms-flex-pack: justify; 187 | justify-content: space-between; 188 | -webkit-user-select: none; 189 | -moz-user-select: none; 190 | -ms-user-select: none; 191 | user-select: none; 192 | } 193 | 194 | .dark { 195 | opacity: 0.5; 196 | } 197 | 198 | .mark { 199 | border-radius: 100px; 200 | background-color: black; 201 | } 202 | 203 | .time { 204 | color: black; 205 | } 206 | /* -------- Switch Styles ------------*/ 207 | [type="checkbox"] { 208 | display: none; 209 | } 210 | /* Toggle */ 211 | [type="checkbox"]:checked + .app .toggle { 212 | -webkit-transform: translateX(100%); 213 | -ms-transform: translateX(100%); 214 | transform: translateX(100%); 215 | background-color: #34323d; 216 | } 217 | 218 | [type="checkbox"]:checked + .app .dark { 219 | opacity: 1; 220 | color: white; 221 | } 222 | 223 | [type="checkbox"]:checked + .app .light { 224 | opacity: 1; 225 | color: white; 226 | } 227 | /* App */ 228 | [type="checkbox"]:checked + .app .body { 229 | background-color: #26242e; 230 | color: white; 231 | } 232 | /* Circle */ 233 | [type="checkbox"]:checked + .app .crescent { 234 | -webkit-transform: scale(1); 235 | -ms-transform: scale(1); 236 | transform: scale(1); 237 | background: #26242e; 238 | } 239 | 240 | [type="checkbox"]:checked + .app .circle { 241 | background: linear-gradient(40deg, #8983f7, #a3dafb 70%); 242 | } 243 | 244 | [type="checkbox"]:checked + .app .main-circle { 245 | background: linear-gradient(40deg, #8983f7, #a3dafb 70%); 246 | } 247 | 248 | [type="checkbox"]:checked + .time { 249 | color: white; 250 | } 251 | 252 | [type="checkbox"]:checked + .app .body .phone .menu .time { 253 | color: white; 254 | } 255 | 256 | [type="checkbox"]:checked + .app .body .phone .menu .icons .network { 257 | border-color: transparent transparent white transparent; 258 | } 259 | 260 | [type="checkbox"]:checked + .app .body .phone .menu .icons .battery { 261 | background-color: white; 262 | } 263 | 264 | [type="checkbox"]:checked + .app .body { 265 | border-radius: 40px; 266 | } 267 | 268 | .menu { 269 | /* background-color: blue; */ 270 | font-size: 80%; 271 | opacity: 0.4; 272 | padding: 0.8rem 1.8rem; 273 | display: -webkit-box; 274 | display: -ms-flexbox; 275 | display: flex; 276 | -webkit-box-pack: justify; 277 | -ms-flex-pack: justify; 278 | justify-content: space-between; 279 | -webkit-box-align: center; 280 | -ms-flex-align: center; 281 | align-items: center; 282 | } -------------------------------------------------------------------------------- /Facebook Login Bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Facebook Login Bar/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | .logo { 10 | margin-bottom: 1rem; 11 | font-size: 1.2rem; 12 | text-align: center; 13 | color: #1877f2; 14 | font-weight: 700; 15 | } 16 | 17 | form { 18 | display: flex; 19 | flex-direction: column; 20 | background: #fff; 21 | padding: 1.5rem 1rem; 22 | width: 300px; 23 | border-radius: 0.5rem; 24 | box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%); 25 | } 26 | 27 | form input { 28 | outline: none; 29 | padding: 0.4rem 0.5rem; 30 | margin-bottom: 0.8rem; 31 | font-size: 0.9rem; 32 | } 33 | 34 | form input:focus { 35 | border: 1.8px solid #1877f2; 36 | } 37 | 38 | form .login { 39 | outline: none; 40 | border: none; 41 | background: #1877f2; 42 | padding: 0.8rem 1rem; 43 | border-radius: 0.4rem; 44 | font-size: 0.9rem; 45 | color: #fff; 46 | } 47 | 48 | form .login:hover { 49 | background: #0f71f1; 50 | cursor: pointer; 51 | } 52 | 53 | form a { 54 | text-decoration: none; 55 | text-align: center; 56 | font-size: 0.9rem; 57 | padding-top: 0.8rem; 58 | color: #1877f2; 59 | } 60 | 61 | form hr { 62 | background: #f7f7f7; 63 | margin: 0.5rem; 64 | } 65 | 66 | form .create-account { 67 | outline: none; 68 | border: none; 69 | background: #06b909; 70 | padding: 0.8rem 1rem; 71 | border-radius: 0.5rem; 72 | font-size: 0.9rem; 73 | color: #fff; 74 | width: 75%; 75 | margin: 0 auto; 76 | } 77 | 78 | form .create-account:hover { 79 | background: #03ad06; 80 | cursor: pointer; 81 | } -------------------------------------------------------------------------------- /Flexbox Accordeon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox Accordeon 7 | 8 | 9 | 10 |

11 |

12 |

13 | First 14 |

15 |

16 | Second 17 |

18 |

19 | Third 20 |

21 |

22 | Fourth 23 |

24 |

25 |

26 | 27 | 28 | -------------------------------------------------------------------------------- /Flexbox Accordeon/style.css: -------------------------------------------------------------------------------- 1 | .frame { 2 | position: absolute; 3 | top: 50%; 4 | left: 50%; 5 | width: 400px; 6 | height: 400px; 7 | margin-top: -200px; 8 | margin-left: -200px; 9 | border-radius: 2px; 10 | box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.25); 11 | overflow: hidden; 12 | background: #333; 13 | color: #fff; 14 | font-family: 'Open Sans', Helvetica, sans-serif; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | .boxes { 20 | display: flex; 21 | flex-direction: row; 22 | align-items: stretch; 23 | width: 100%; 24 | height: 100%; 25 | 26 | .box { 27 | position: relative; 28 | flex: 1 1 auto; 29 | width: 20%; 30 | background: grey; 31 | transition: all .5s ease-in-out; 32 | cursor: pointer; 33 | overflow: hidden; 34 | 35 | .text { 36 | position: absolute; 37 | top: 50%; 38 | left: 50%; 39 | transform: translate(-50%, -50%) scale(0.5); 40 | font-weight: 700; 41 | font-size: 30px; 42 | text-transform: uppercase; 43 | color: transparent; 44 | transition: all .5s ease-in-out; 45 | } 46 | 47 | &.dark { 48 | background: #34495e; 49 | } 50 | &.orange { 51 | background: #e67e22; 52 | } 53 | 54 | &:hover { 55 | width: 100%; 56 | 57 | .text { 58 | color: #fff; 59 | transform: translate(-50%, -50%) scale(1); 60 | } 61 | 62 | } 63 | 64 | } 65 | 66 | } 67 | -------------------------------------------------------------------------------- /Hover Effects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Point of the code 7 | 8 | 9 | 10 |

12 | 💬 13 | Messages 14 |

16 | 17 | 18 | -------------------------------------------------------------------------------- /Hover Effects/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | ul { 10 | position: relative; 11 | display: flex; 12 | gap: 25px; 13 | } 14 | 15 | ul li { 16 | position: relative; 17 | list-style: none; 18 | width: 60px; 19 | height: 60px; 20 | background: #fff; 21 | border-radius: 60px; 22 | cursor: pointer; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); 27 | transition: 0.5s; 28 | } 29 | 30 | ul li:hover { 31 | width: 180px; 32 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0); 33 | } 34 | 35 | ul li::before { 36 | content: ""; 37 | position: absolute; 38 | inset: 0; 39 | border-radius: 60px; 40 | background: linear-gradient(45deg, var(--i), var(--j)); 41 | opacity: 0; 42 | transition: 0.5s; 43 | } 44 | 45 | ul li:hover::before { 46 | opacity: 1; 47 | } 48 | 49 | ul li::after { 50 | content: ""; 51 | position: absolute; 52 | top: 10px; 53 | width: 100%; 54 | height: 100%; 55 | border-radius: 60px; 56 | background: linear-gradient(45deg, var(--i), var(--j)); 57 | transition: 0.5s; 58 | filter: blur(15px); 59 | z-index: -1; 60 | opacity: 0; 61 | } 62 | 63 | ul li:hover::after { 64 | opacity: 0.5; 65 | } 66 | 67 | ul li .icon { 68 | color: #777; 69 | font-size: 1.75em; 70 | transition: 0.5s; 71 | transition-delay: 0.25s; 72 | } 73 | 74 | ul li:hover .icon { 75 | transform: scale(0); 76 | color: #fff; 77 | transition-delay: 0s; 78 | } 79 | 80 | ul li span { 81 | position: absolute; 82 | } 83 | 84 | ul li .title { 85 | color: #fff; 86 | font-size: 1.1em; 87 | text-transform: uppercase; 88 | letter-spacing: 0.1em; 89 | transform: scale(0); 90 | transition: 0.5s; 91 | transition-delay: 0s; 92 | } 93 | 94 | ul li:hover .title { 95 | transform: scale(1); 96 | transition-delay: 0.25s; 97 | } -------------------------------------------------------------------------------- /Instagram Profile Clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Instagram Profile Clone 7 | 8 | 9 | 10 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Instagram Profile Clone/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | .tooltip-container { 10 | position: absolute; 11 | cursor: pointer; 12 | transition: all 0.2s; 13 | font-size: 17px; 14 | border-radius: 10px; 15 | } 16 | 17 | .tooltip { 18 | position: absolute; 19 | top: 0; 20 | left: 50%; 21 | transform: translateX(-50%); 22 | padding: 10px; 23 | opacity: 0; 24 | pointer-events: none; 25 | transition: all 0.3s; 26 | border-radius: 15px; 27 | box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), 28 | inset -5px -5px 15px rgba(255, 255, 255, 0.1), 29 | 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1); 30 | } 31 | 32 | .profile { 33 | background: #2a2b2f; 34 | border-radius: 10px 15px; 35 | padding: 10px; 36 | border: 1px solid #52382f; 37 | } 38 | 39 | .tooltip-container:hover .tooltip { 40 | top: -150px; 41 | opacity: 1; 42 | visibility: visible; 43 | pointer-events: auto; 44 | } 45 | 46 | .icon { 47 | text-decoration: none; 48 | color: #fff; 49 | display: block; 50 | position: relative; 51 | } 52 | .layer { 53 | width: 55px; 54 | height: 55px; 55 | transition: transform 0.3s; 56 | } 57 | .icon:hover .layer { 58 | transform: rotate(-35deg) skew(20deg); 59 | } 60 | .layer span { 61 | position: absolute; 62 | top: 0; 63 | left: 0; 64 | height: 100%; 65 | width: 100%; 66 | border: 1px solid #fff; 67 | border-radius: 15px; 68 | transition: all 0.3s; 69 | } 70 | 71 | .layer span, 72 | .text { 73 | color: #e6683c; 74 | border-color: #e6683c; 75 | } 76 | 77 | .icon:hover.layer span { 78 | box-shadow: -1px 1px 3px #e6683c; 79 | } 80 | .icon .text { 81 | position: absolute; 82 | left: 50%; 83 | bottom: -5px; 84 | opacity: 0; 85 | font-weight: 500; 86 | transform: translateX(-50%); 87 | transition: bottom 0.3s ease, opacity 0.3s ease; 88 | } 89 | .icon:hover .text { 90 | bottom: -35px; 91 | opacity: 1; 92 | } 93 | 94 | .icon:hover .layer span:nth-child(1) { 95 | opacity: 0.2; 96 | } 97 | .icon:hover .layer span:nth-child(2) { 98 | opacity: 0.4; 99 | transform: translate(5px, -5px); 100 | } 101 | .icon:hover .layer span:nth-child(3) { 102 | opacity: 0.6; 103 | transform: translate(10px, -10px); 104 | } 105 | .icon:hover .layer span:nth-child(4) { 106 | opacity: 0.8; 107 | transform: translate(15px, -15px); 108 | } 109 | .icon:hover .layer span:nth-child(5) { 110 | opacity: 1; 111 | transform: translate(20px, -20px); 112 | } 113 | 114 | .instagramSVG { 115 | font-size: 25px; 116 | display: flex; 117 | align-items: center; 118 | justify-content: center; 119 | background: -webkit-linear-gradient( 120 | 45deg, 121 | #f09433 0%, 122 | #e6683c 25%, 123 | #dc2743 50%, 124 | #cc2366 75%, 125 | #bc1888 100% 126 | ); 127 | background: linear-gradient( 128 | 45deg, 129 | #f09433 0%, 130 | #e6683c 25%, 131 | #dc2743 50%, 132 | #cc2366 75%, 133 | #bc1888 100% 134 | ); 135 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); 136 | } 137 | .user { 138 | display: flex; 139 | gap: 10px; 140 | } 141 | .img { 142 | width: 50px; 143 | height: 50px; 144 | font-size: 25px; 145 | font-weight: 700; 146 | border: 1px solid #e6683c; 147 | border-radius: 10px; 148 | display: flex; 149 | align-items: center; 150 | justify-content: center; 151 | background: #fff; 152 | } 153 | .name { 154 | font-size: 17px; 155 | font-weight: 700; 156 | color: #e6683c; 157 | } 158 | .details { 159 | display: flex; 160 | flex-direction: column; 161 | gap: 0; 162 | color: #fff; 163 | } 164 | .about { 165 | color: #ccc; 166 | padding-top: 5px; 167 | } 168 | -------------------------------------------------------------------------------- /Loader Part-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loader part-1 / @point_of_the_code 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 | 17 | 18 | -------------------------------------------------------------------------------- /Loader Part-1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background: #212121; 7 | } 8 | 9 | .loader { 10 | height: 120px; 11 | width: 120px; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | position: relative; 16 | } 17 | 18 | .loader div { 19 | height: 30px; 20 | width: 30px; 21 | position: absolute; 22 | animation: move 4s infinite; 23 | } 24 | 25 | .loader div:nth-child(1) { 26 | background-color: rgb(158, 136, 246); 27 | box-shadow: rgb(158, 136, 246) 0px 7px 29px 0px; 28 | transform: translate(-30px, -30px); 29 | animation-delay: -1s; 30 | } 31 | 32 | .loader div:nth-child(2) { 33 | background-color: rgb(97, 183, 253); 34 | box-shadow: rgb(97, 183, 253) 0px 7px 29px 0px; 35 | transform: translate(30px, -30px); 36 | animation-delay: -2s; 37 | } 38 | 39 | .loader div:nth-child(3) { 40 | background-color: rgb(95, 249, 175); 41 | box-shadow: rgb(95, 249, 175) 0px 7px 29px 0px; 42 | transform: translate(30px, 30px); 43 | animation-delay: -3s; 44 | } 45 | 46 | .loader div:nth-child(4) { 47 | background-color: rgb(243, 171, 89); 48 | box-shadow: rgb(243, 171, 89) 0px 7px 29px 0px; 49 | transform: translate(-30px, 30px); 50 | animation-delay: -4s; 51 | } 52 | 53 | @keyframes move { 54 | 0% { 55 | transform: translate(-30px, -30px); 56 | } 57 | 58 | 25% { 59 | transform: translate(30px, -30px); 60 | } 61 | 62 | 50% { 63 | transform: translate(30px, 30px); 64 | } 65 | 66 | 75% { 67 | transform: translate(-30px, 30px); 68 | } 69 | 70 | 100% { 71 | transform: translate(-30px, -30px); 72 | } 73 | } -------------------------------------------------------------------------------- /Loader Part-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /Loader Part-2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #313131; 7 | } 8 | 9 | .loader { 10 | width: 150px; 11 | height: 150px; 12 | position: relative; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .loader_cube { 19 | position: absolute; 20 | width: 100%; 21 | height: 100%; 22 | border-radius: 30px; 23 | } 24 | 25 | .loader_cube--glowing { 26 | z-index: 2; 27 | background-color: rgba(255, 255, 255, 0.2); 28 | border: 2px solid rgba(255, 255, 255, 0.3); 29 | } 30 | 31 | .loader_cube--color { 32 | z-index: 1; 33 | filter: blur(2px); 34 | background: linear-gradient(135deg, #1afbf0, #da00ff); 35 | animation: loadtwo 2.5s ease-in-out infinite; 36 | } 37 | 38 | @keyframes loadtwo { 39 | 50% { 40 | transform: rotate(-80deg); 41 | } 42 | } -------------------------------------------------------------------------------- /Loader Part-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Loader Part-3 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 | 28 | 29 | -------------------------------------------------------------------------------- /Loader Part-3/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #313131; 7 | } 8 | 9 | .main { 10 | display: flex; 11 | flex-wrap: wrap; 12 | width: 15em; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .card { 18 | width: 40px; 19 | height: 40px; 20 | border-top-left-radius: 10px; 21 | background: lightgrey; 22 | transition: 0.4s ease-in-out, 0.2s background-color; 23 | background: rgba(255, 255, 255, 0.2); 24 | backdrop-filter: blur(5px); 25 | margin: 0.2em; 26 | border-radius: 5px; 27 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 28 | border: 1px solid rgba(255, 255, 255, 0.3); 29 | animation: 2s loading90 infinite; 30 | } 31 | 32 | .card:nth-child(2) { 33 | animation-delay: 1s; 34 | } 35 | 36 | .card:nth-child(4) { 37 | animation-delay: 1s; 38 | } 39 | 40 | .card:nth-child(6) { 41 | animation-delay: 1s; 42 | } 43 | 44 | .card:nth-child(8) { 45 | animation-delay: 1s; 46 | } 47 | 48 | .card:nth-child(10) { 49 | animation-delay: 1s; 50 | } 51 | 52 | .card:nth-child(12) { 53 | animation-delay: 1s; 54 | } 55 | 56 | .card:nth-child(14) { 57 | animation-delay: 1s; 58 | } 59 | 60 | @keyframes loading90 { 61 | 0% { 62 | background: rgba(255, 255, 255, 0.2); 63 | } 64 | 65 | 50% { 66 | background: limegreen; 67 | } 68 | 69 | 100% { 70 | background: rgba(255, 255, 255, 0.2); 71 | } 72 | } -------------------------------------------------------------------------------- /Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML & CSS Loader 7 | 8 | 9 | 10 |

11 | 12 | 13 | -------------------------------------------------------------------------------- /Loader/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | min-height: 100vh; 11 | background-color: #212121; 12 | } 13 | 14 | .content { 15 | position: relative; 16 | width: 110px; 17 | height: 110px; 18 | background: transparent; 19 | border: px solid #3c3c3c; 20 | border-radius: 50%; 21 | text-align: center; 22 | line-height: 111px; 23 | font-family: sans-serif; 24 | color: #fff000; 25 | font-size: 15px; 26 | letter-spacing: 3px; 27 | text-transform: uppercase; 28 | text-shadow: 0 0 20px #fff000; 29 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 30 | } 31 | 32 | @keyframes animate{ 33 | 0% { 34 | transform: rotate(0deg); 35 | } 36 | 37 | 100% { 38 | transform: rotate(360deg); 39 | } 40 | } 41 | 42 | .content:before { 43 | content: ""; 44 | position: absolute; 45 | top: -3px; 46 | left: -3px; 47 | width: 100%; 48 | height: 100%; 49 | border: 3pxx solid transparent; 50 | border-top: 5px solid #fff000; 51 | border-right: 5px solid #fff000; 52 | border-radius: 50%; 53 | animation: animate 2s linear infinite; 54 | } 55 | 56 | 57 | @keyframes animate { 58 | 0% { 59 | transform: rotate(45deg); 60 | } 61 | 62 | 100% { 63 | transform: rotate(405deg); 64 | } 65 | } -------------------------------------------------------------------------------- /Login Bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 12 | 13 | 14 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Login Bar/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | .form { 10 | display: flex; 11 | flex-direction: column; 12 | position: absolute; 13 | gap: 10px; 14 | padding-left: 2em; 15 | padding-right: 2em; 16 | padding-bottom: 0.4em; 17 | background-color: #171717; 18 | border-radius: 25px; 19 | transition: .4s ease-in-out; 20 | } 21 | 22 | .form:hover { 23 | transform: scale(1.05); 24 | border: 1px solid black; 25 | } 26 | 27 | #heading { 28 | text-align: center; 29 | margin: 2em; 30 | color: rgb(255, 255, 255); 31 | font-size: 1.2em; 32 | } 33 | 34 | .field { 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | gap: 0.5em; 39 | border-radius: 25px; 40 | padding: 0.6em; 41 | border: none; 42 | outline: none; 43 | color: white; 44 | background-color: #171717; 45 | box-shadow: inset 2px 5px 10px rgb(5, 5, 5); 46 | } 47 | 48 | .input-field { 49 | background: none; 50 | border: none; 51 | outline: none; 52 | width: 100%; 53 | color: #d3d3d3; 54 | } 55 | 56 | .form .btn { 57 | display: flex; 58 | justify-content: center; 59 | flex-direction: row; 60 | margin-top: 2.5em; 61 | } 62 | 63 | .button1 { 64 | padding: 0.5em; 65 | padding-left: 1.1em; 66 | padding-right: 1.1em; 67 | border-radius: 5px; 68 | margin-right: 0.5em; 69 | border: none; 70 | outline: none; 71 | transition: .4s ease-in-out; 72 | background-color: #252525; 73 | color: white; 74 | } 75 | 76 | .button1:hover { 77 | background-color: black; 78 | color: white; 79 | } 80 | 81 | .button2 { 82 | padding: 0.5em; 83 | padding-left: 2.3em; 84 | padding-right: 2.3em; 85 | border-radius: 5px; 86 | border: none; 87 | outline: none; 88 | transition: .4s ease-in-out; 89 | background-color: #252525; 90 | color: white; 91 | } 92 | 93 | .button2:hover { 94 | background-color: black; 95 | color: white; 96 | } 97 | 98 | .button3 { 99 | margin-bottom: 3em; 100 | padding: 0.5em; 101 | border-radius: 5px; 102 | border: none; 103 | outline: none; 104 | transition: .4s ease-in-out; 105 | background-color: #252525; 106 | color: white; 107 | } 108 | 109 | .button3:hover { 110 | background-color: red; 111 | color: white; 112 | } -------------------------------------------------------------------------------- /Login Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Login Form/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61;; 7 | } 8 | 9 | .group { 10 | position: relative; 11 | } 12 | 13 | .form { 14 | display: -webkit-box; 15 | display: -ms-flexbox; 16 | display: flex; 17 | -webkit-box-pack: center; 18 | -ms-flex-pack: center; 19 | justify-content: center; 20 | -webkit-box-align: center; 21 | -ms-flex-align: center; 22 | align-items: center; 23 | -webkit-box-orient: vertical; 24 | -webkit-box-direction: normal; 25 | -ms-flex-direction: column; 26 | flex-direction: column; 27 | border: 1px solid black; 28 | padding: 120px 40px; 29 | padding-top: 60px; 30 | padding-bottom: 90px; 31 | padding-right: 40px; 32 | padding-left: 40px; 33 | background-color: black; 34 | border-radius: 20px; 35 | position: absolute; 36 | } 37 | 38 | .form p { 39 | padding-bottom: 20px; 40 | font-size: 24px; 41 | font-weight: bold; 42 | letter-spacing: .5px; 43 | color: white; 44 | } 45 | 46 | .container-1 { 47 | padding-top: 30px; 48 | } 49 | 50 | .main-input { 51 | font-size: 16px; 52 | padding: 10px 10px 10px 5px; 53 | display: block; 54 | width: 185px; 55 | border: none; 56 | border-bottom: 1px solid #6c6c6c; 57 | background: transparent; 58 | color: #ffffff; 59 | } 60 | 61 | .main-input:focus { 62 | outline: none; 63 | border-bottom-color: #42ff1c; 64 | } 65 | 66 | .lebal-email { 67 | color: #999999; 68 | font-size: 18px; 69 | font-weight: normal; 70 | position: absolute; 71 | pointer-events: none; 72 | left: 5px; 73 | top: 10px; 74 | transition: 0.2s ease all; 75 | -moz-transition: 0.2s ease all; 76 | -webkit-transition: 0.2s ease all; 77 | } 78 | 79 | .main-input:focus ~ .lebal-email, 80 | .main-input:valid ~ .lebal-email { 81 | top: -20px; 82 | font-size: 14px; 83 | color: #42ff1c; 84 | } 85 | 86 | .highlight-span { 87 | position: absolute; 88 | height: 60%; 89 | width: 0px; 90 | top: 25%; 91 | left: 0; 92 | pointer-events: none; 93 | opacity: 0.5; 94 | } 95 | 96 | .main-input:focus ~ .highlight-span { 97 | -webkit-animation: input-focus 0.3s ease; 98 | animation: input-focus 0.3s ease; 99 | } 100 | 101 | @keyframes input-focus { 102 | from { 103 | background: #42ff1c; 104 | } 105 | 106 | to { 107 | width: 185px; 108 | } 109 | } 110 | 111 | .submit { 112 | margin-top: 1.2rem; 113 | padding: 10px 20px; 114 | border-radius: 10px; 115 | } -------------------------------------------------------------------------------- /MENU/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menu Bar using html css 7 | 8 | 9 | 10 |

11 | 42 | 62 | 85 | 120 | 149 |

150 | 151 | 152 | -------------------------------------------------------------------------------- /MENU/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | min-height: 100vh; 11 | background: #212121; 12 | } 13 | 14 | .input { 15 | display: flex; 16 | justify-content: center; 17 | flex-direction: column; 18 | width: 200px; 19 | border-radius: 5px; 20 | background-color: #0D1117; 21 | } 22 | 23 | .value { 24 | background-color: transparent; 25 | border: none; 26 | padding: 10px; 27 | color: white; 28 | display: flex; 29 | position: relative; 30 | gap: 5px; 31 | cursor: pointer; 32 | border-radius: 4px; 33 | } 34 | 35 | .value:not(:active):hover, 36 | .value:focus { 37 | background-color: #21262C; 38 | } 39 | 40 | .value:focus, 41 | .value:active { 42 | background-color: #1A1F24; 43 | outline: none; 44 | } 45 | 46 | .value::before { 47 | content: ""; 48 | position: absolute; 49 | top: 5px; 50 | left: -10px; 51 | width: 5px; 52 | height: 80%; 53 | background-color: #2F81F7; 54 | border-radius: 5px; 55 | opacity: 0; 56 | } 57 | 58 | .value:focus::before, 59 | .value:active::before { 60 | opacity: 1; 61 | } 62 | 63 | .value svg { 64 | filter: invert(); 65 | height: 15px; 66 | } -------------------------------------------------------------------------------- /Mail Hover Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mail Hover Effect 7 | 8 | 9 | 10 |

11 | 12 | Send mail 13 | Reset 14 |

15 | 19 | 23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /Mail Hover Effect/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | background-color: #313131; 6 | } 7 | 8 | .circle { 9 | position: absolute; 10 | width: 200px; 11 | height: 200px; 12 | top: 65px; 13 | left: 100px; 14 | background: #354a5f; 15 | border-radius: 50%; 16 | } 17 | 18 | .icon { 19 | position: absolute; 20 | z-index: 2; 21 | top: 130px; 22 | left: 140px; 23 | transform: translate3d(0, 0, 0); 24 | fill: none; 25 | stroke-width: 2px; 26 | stroke: #ecf0f1; 27 | stroke-linecap: square; 28 | stroke-dasharray: 325 325; 29 | 30 | &.mail { 31 | width: 120px; 32 | height: 70px; 33 | stroke-dashoffset: 0; 34 | } 35 | 36 | &.plane { 37 | width: 120px; 38 | height: 110px; 39 | stroke-dashoffset: 325; 40 | } 41 | } 42 | 43 | #cb { 44 | display: none; 45 | } 46 | 47 | .button { 48 | position: absolute; 49 | z-index: 10; 50 | width: 200px; 51 | height: 40px; 52 | top: 290px; 53 | left: 100px; 54 | background: #ecf0f1; 55 | color: #2c3e50; 56 | text-align: center; 57 | line-height: 40px; 58 | border-radius: 20px; 59 | font-weight: 600; 60 | text-transform: uppercase; 61 | font-size: 15px; 62 | cursor: pointer; 63 | 64 | &.reset { 65 | opacity: 0; 66 | z-index: 5; 67 | } 68 | 69 | &:hover { 70 | background: #1abc9c; 71 | color: #fff; 72 | } 73 | } 74 | 75 | #cb:checked ~ .button { 76 | animation: button 1.5s ease-in-out 1.7s; 77 | animation-fill-mode: both; 78 | } 79 | #cb:checked ~ .reset { 80 | animation: reset 1s ease-in-out 3.7s; 81 | animation-fill-mode: both; 82 | } 83 | 84 | #cb:checked ~ .circle { 85 | animation: circle 1s ease-in-out; 86 | animation-fill-mode: both; 87 | } 88 | 89 | #cb:checked ~ .circle-outer { 90 | animation: circle 0.8s ease-in-out 0.2s; 91 | animation-fill-mode: both; 92 | } 93 | 94 | #cb:checked ~ .mail { 95 | stroke-dashoffset: 326; 96 | transition: stroke-dashoffset 1s ease-in-out; 97 | } 98 | 99 | #cb:checked ~ .plane { 100 | stroke-dashoffset: 0; 101 | transition: stroke-dashoffset 1s ease-in-out 0.6s; 102 | animation: fly 2.4s ease-in-out; 103 | animation-fill-mode: both; 104 | } 105 | 106 | @keyframes fly { 107 | 0%, 108 | 50% { 109 | transform: translate3d(0, 0, 0) scale(1); 110 | } 111 | 60% { 112 | transform: translate3d(-10px, 5px, 0) scale(1.05); 113 | } 114 | 70% { 115 | opacity: 1; 116 | } 117 | 85% { 118 | opacity: 0; 119 | } 120 | 100% { 121 | transform: translate3d(300px, -150px, 0) scale(0.4); 122 | opacity: 0; 123 | } 124 | } 125 | 126 | @keyframes circle { 127 | 0% { 128 | transform: translate3d(0, 0, 0) scale(1); 129 | } 130 | 20% { 131 | transform: scale(1.1); 132 | } 133 | 100% { 134 | transform: scale(0); 135 | } 136 | } 137 | 138 | @keyframes button { 139 | 0% { 140 | transform: scale(1); 141 | } 142 | 30% { 143 | background: #1abc9c; 144 | color: transparent; 145 | width: 200px; 146 | left: 100px; 147 | } 148 | 50%, 149 | 60% { 150 | width: 40px; 151 | left: 180px; 152 | transform: scale(1); 153 | } 154 | 70% { 155 | transform: scale(1.1); 156 | } 157 | 100% { 158 | width: 40px; 159 | left: 180px; 160 | background: #1abc9c; 161 | color: transparent; 162 | transform: scale(0); 163 | } 164 | } 165 | 166 | @keyframes reset { 167 | from { 168 | opacity: 0; 169 | } 170 | to { 171 | opacity: 1; 172 | } 173 | } -------------------------------------------------------------------------------- /Navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Navbar Glowing Hover Effects 7 | 8 | 9 | 10 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Navbar/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppens', sans-serif; 6 | } 7 | body{ 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: #000; 13 | } 14 | nav a{ 15 | position: relative; 16 | font-size: 1.1em; 17 | font-weight: 500; 18 | color: #333; 19 | text-decoration: none; 20 | padding: 6px 20px; 21 | transition: .5s; 22 | } 23 | nav a:hover{ 24 | color: #0ef; 25 | } 26 | nav a span{ 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | height: 100%; 32 | z-index: -1; 33 | border-bottom: 2px solid #0ef; 34 | border-radius: 15px; 35 | transform: scale(0) translateY(50px); 36 | opacity: 0; 37 | transition: .5s; 38 | } 39 | nav a:hover span{ 40 | transform: scale(1) translateY(0); 41 | opacity: 1; 42 | } -------------------------------------------------------------------------------- /Navigation Menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML & CSS Tutorial 7 | 8 | 9 | 10 |

11 | 27 | 46 | 62 | 82 |

83 | 84 | 85 | -------------------------------------------------------------------------------- /Navigation Menu/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | } 7 | 8 | .container { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | height: 80px; 13 | width: 500px; 14 | gap: 45px; 15 | border-radius: 10px; 16 | background-color: rgb(27, 133, 219); 17 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px, 18 | rgba(27, 133, 219, 0.5) 5px 10px 15px; 19 | } 20 | 21 | .button { 22 | outline: 0; 23 | border: 0; 24 | width: 60px; 25 | height: 60px; 26 | border-radius: 50%; 27 | background-color: transparent; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | color: #fff; 32 | transition: all ease-in-out 0.3s; 33 | cursor: pointer; 34 | } 35 | 36 | .button:hover { 37 | transform: translateY(-6px); 38 | color: black; 39 | background-color: #fff; 40 | } 41 | 42 | .icon { 43 | font-size: 30px; 44 | } -------------------------------------------------------------------------------- /New folder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 96 | 97 | 98 |

99 | 134 |

135 |


136 |           .code-editor  {
137 |           
138 |             border-radius:
139 |             8px;
140 |           
141 |           }
142 |

143 |

144 |

145 | 146 | 147 | -------------------------------------------------------------------------------- /OTP Verification Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OTP Verification Form 7 | 8 | 9 | 10 | 22 | 23 | -------------------------------------------------------------------------------- /OTP Verification Form/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | min-height: 100vh; 11 | background: #212121; 12 | } 13 | 14 | .form { 15 | display: flex; 16 | flex-direction: column; 17 | gap: 10px; 18 | background: #00000000; 19 | border-radius: 16px; 20 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 21 | -webkit-backdrop-filter: blur(8.2px); 22 | backdrop-filter: blur(8.2px); 23 | border: 1px solid #369eff66; 24 | width: 14em; 25 | height: 14em; 26 | } 27 | 28 | .content { 29 | display: flex; 30 | flex-direction: column; 31 | gap: 10px; 32 | margin-top: auto; 33 | margin-bottom: auto; 34 | } 35 | 36 | .form p { 37 | color: #fff; 38 | font-weight: bolder; 39 | } 40 | 41 | .inp { 42 | margin-left: auto; 43 | margin-right: auto; 44 | white-space: 4px; 45 | } 46 | 47 | .input + .input { 48 | margin-left: 0.3em; 49 | } 50 | 51 | .input { 52 | color: #fff; 53 | height: 2em; 54 | width: 2em; 55 | float: left; 56 | text-align: center; 57 | background: #00000000; 58 | outline: none; 59 | border: 1px #369eff solid; 60 | border-radius: 10px; 61 | transition: all 0.6s ease; 62 | } 63 | 64 | .input:focus { 65 | outline: none; 66 | border: 1px #fff solid; 67 | } 68 | 69 | .input:not(:placeholder-shown) { 70 | opacity: 40%; 71 | } 72 | 73 | .form button { 74 | margin-left: auto; 75 | margin-right: auto; 76 | background-color: #00000000; 77 | color: #fff; 78 | width: 8.5em; 79 | height: 2.3em; 80 | border: #369eff 0.2em solid; 81 | border-radius: 11px; 82 | transition: all 0.5s ease; 83 | } 84 | 85 | .form button:hover { 86 | background-color: #369eff; 87 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-Projects 2 | -------------------------------------------------------------------------------- /Registration Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Registration Form Using HTML And CSS 7 | 8 | 9 | 10 |

11 | 26 |

27 | 28 | 29 | -------------------------------------------------------------------------------- /Registration Form/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | .form-container { 10 | display: flex; 11 | flex-direction: column; 12 | position: absolute; 13 | box-sizing: border-box; 14 | padding: 32px 24px; 15 | font-size: 14px; 16 | gap: 20px; 17 | border: 2px solid transparent; 18 | border-radius: 16px; 19 | color: white; 20 | background: linear-gradient(#212121, #212121) padding-box, 21 | linear-gradient(120deg, transparent 25%, #1cb0ff, #40ff99) border-box; 22 | } 23 | 24 | .form { 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | gap: 20px; 29 | } 30 | 31 | .heading { 32 | font-size: 20px; 33 | font-weight: 600; 34 | } 35 | 36 | .form-input { 37 | color: white; 38 | background: transparent; 39 | border: 1px solid #414141; 40 | border-radius: 5px; 41 | padding: 8px; 42 | outline: none; 43 | } 44 | 45 | button { 46 | border-radius: 5px; 47 | padding: 6px; 48 | background: #ffffff14; 49 | color: #c7c5c5; 50 | border: 1px solid #414141; 51 | } 52 | 53 | button:hover { 54 | background: #212121; 55 | cursor: pointer; 56 | } 57 | 58 | .form-group { 59 | display: flex; 60 | flex-direction: column; 61 | gap: 5px; 62 | color: #414141; 63 | position: relative; 64 | } 65 | 66 | .form-group label { 67 | position: absolute; 68 | top: 0; 69 | left: 0; 70 | padding: 5px; 71 | pointer-events: none; 72 | transition: 0.5s; 73 | } 74 | 75 | .form-group input:focus ~ label, 76 | .form-group input:valid ~ label { 77 | top: -16px; 78 | left: 0; 79 | background: #212121 padding-box; 80 | padding: 10px 0 0 0; 81 | color: #bdb8b8; 82 | 83 | font-size: 12px; 84 | } 85 | -------------------------------------------------------------------------------- /Search Bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Search Bar Using HTML & CSS 7 | 8 | 9 | 10 |

11 | 12 | 16 |

17 | 18 | -------------------------------------------------------------------------------- /Search Bar/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 100vh; 6 | background-color: #212121; 7 | } 8 | 9 | .container-input { 10 | position: relative; 11 | } 12 | 13 | .input { 14 | width: 200px; 15 | padding: 20px 0px 20px 40px; 16 | border-radius: 9999px; 17 | border: 1px solid #333; 18 | transition: all .2s ease-in-out; 19 | outline: none; 20 | opacity: 0.8; 21 | } 22 | 23 | .container-input svg { 24 | position: absolute; 25 | top: 12%; 26 | left: 10px; 27 | transform: translate(0, 50%); 28 | } 29 | 30 | .input:focus { 31 | opacity: 1; 32 | width: 300px; 33 | } -------------------------------------------------------------------------------- /Sign In Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sign In Form / @point_of_the_code 7 | 8 | 9 | 10 |

11 |

Sign In

12 | 45 |

46 | 47 | 48 | -------------------------------------------------------------------------------- /Sign In Form/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #525a61; 3 | font-family: Arial, sans-serif; 4 | padding: 20px; 5 | } 6 | 7 | .container { 8 | max-width: 400px; 9 | background-color: #ffffff; 10 | padding: 20px; 11 | border-radius: 8px; 12 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 13 | } 14 | 15 | .form-group { 16 | margin-bottom: 15px; 17 | } 18 | 19 | .form-group label { 20 | display: block; 21 | font-weight: bold; 22 | margin-bottom: 5px; 23 | } 24 | 25 | .form-group input, 26 | .form-group select { 27 | width: 100%; 28 | padding: 10px; 29 | border: 1px solid #ddd; 30 | border-radius: 5px; 31 | box-sizing: border-box; 32 | font-size: 16px; 33 | } 34 | 35 | .form-group input:focus { 36 | outline: none; 37 | border: 1px solid #007bff; 38 | transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 39 | } 40 | 41 | .form-group button { 42 | width: 100%; 43 | padding: 10px; 44 | background-color: #007bff; 45 | color: #ffffff; 46 | border: none; 47 | border-radius: 5px; 48 | font-size: 16px; 49 | cursor: pointer; 50 | } 51 | 52 | .form-group button:hover { 53 | background-color: #0056b3; 54 | } -------------------------------------------------------------------------------- /Snowfall Using HTML And CSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Snowfall Using HTML And CSS 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 | -------------------------------------------------------------------------------- /Snowfall Using HTML And CSS/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #313131; 7 | } 8 | 9 | .loader { 10 | position: relative; 11 | width: 110px; 12 | height: 30px; 13 | background: #fff; 14 | border-radius: 100px; 15 | } 16 | 17 | .loader::before { 18 | content: ''; 19 | position: absolute; 20 | top: -20px; 21 | left: 10px; 22 | width: 30px; 23 | height: 30px; 24 | background: #fff; 25 | border-radius: 50%; 26 | box-shadow: 40px 0 0 20px #fff; 27 | } 28 | 29 | .snow { 30 | position: relative; 31 | display: flex; 32 | z-index: 1; 33 | } 34 | 35 | .snow span { 36 | position: relative; 37 | width: 3px; 38 | height: 3px; 39 | background: #fff; 40 | margin: 0 2px; 41 | border-radius: 50%; 42 | animation: snowing 5s linear infinite; 43 | animation-duration: calc(15s / var(--i)); 44 | transform-origin: bottom; 45 | } 46 | 47 | @keyframes snowing { 48 | 0% { 49 | transform: translateY(0px); 50 | } 51 | 52 | 70% { 53 | transform: translateY(100px) scale(1); 54 | } 55 | 56 | 100% { 57 | transform: translateY(100px) scale(0); 58 | } 59 | } -------------------------------------------------------------------------------- /Social Icons Part-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Social Icons Part-2 8 | 9 | 10 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /Social Icons Part-2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-content: center; 5 | min-height: 90vh; 6 | background-color: #212121; 7 | } 8 | 9 | .social-buttons { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .social-button { 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | width: 50px; 20 | height: 50px; 21 | border-radius: 50%; 22 | margin: 0 10px; 23 | background-color: #fff; 24 | box-shadow: 0px 0px 4px #00000027; 25 | transition: 0.3s; 26 | } 27 | 28 | .social-button:hover { 29 | background-color: #f2f2f2; 30 | box-shadow: 0px 0px 6px 3px #00000027; 31 | } 32 | 33 | .social-buttons svg { 34 | transition: 0.3s; 35 | height: 20px; 36 | } 37 | 38 | .facebook { 39 | background-color: #3b5998; 40 | } 41 | 42 | .facebook svg { 43 | fill: #f2f2f2; 44 | } 45 | 46 | .facebook:hover svg { 47 | fill: #3b5998; 48 | } 49 | 50 | .github { 51 | background-color: #000; 52 | } 53 | 54 | .github svg { 55 | width: 25px; 56 | height: 25px; 57 | fill: #f2f2f2; 58 | } 59 | 60 | .github:hover svg { 61 | fill: #333; 62 | } 63 | 64 | .linkedin { 65 | background-color: #0077b5; 66 | } 67 | 68 | .linkedin svg { 69 | fill: #f2f2f2; 70 | } 71 | 72 | .linkedin:hover svg { 73 | fill: #0077b5; 74 | } 75 | 76 | .instagram { 77 | background-color: #c13584; 78 | } 79 | 80 | .instagram svg { 81 | fill: #f2f2f2; 82 | } 83 | 84 | .instagram:hover svg { 85 | fill: #c13584; 86 | } -------------------------------------------------------------------------------- /Social Icons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Social Icons / @point_of_the_code 7 | 8 | 9 | 10 |

11 |

12 | 15 | 18 |

19 |

20 | 23 | 26 |

27 |

28 | 29 | -------------------------------------------------------------------------------- /Social Icons/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background: #525a61; 7 | } 8 | 9 | .main { 10 | display: flex; 11 | flex-direction: column; 12 | gap: 0.5em; 13 | } 14 | 15 | .up { 16 | display: flex; 17 | flex-direction: row; 18 | gap: 0.5em; 19 | } 20 | 21 | .down { 22 | display: flex; 23 | flex-direction: row; 24 | gap: 0.5em; 25 | } 26 | 27 | .card1 { 28 | width: 90px; 29 | height: 90px; 30 | outline: none; 31 | border: none; 32 | background: white; 33 | border-radius: 90px 5px 5px 5px; 34 | box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 35 | transition: .2s ease-in-out; 36 | } 37 | 38 | .instagram { 39 | margin-top: 1.5em; 40 | margin-left: 1.2em; 41 | fill: #cc39a4; 42 | } 43 | 44 | .card2 { 45 | width: 90px; 46 | height: 90px; 47 | outline: none; 48 | border: none; 49 | background: white; 50 | border-radius: 5px 90px 5px 5px; 51 | box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 52 | transition: .2s ease-in-out; 53 | } 54 | 55 | .twitter { 56 | margin-top: 1.5em; 57 | margin-left: -.9em; 58 | fill: #03A9F4; 59 | } 60 | 61 | .card3 { 62 | width: 90px; 63 | height: 90px; 64 | outline: none; 65 | border: none; 66 | background: white; 67 | border-radius: 5px 5px 5px 90px; 68 | box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 69 | transition: .2s ease-in-out; 70 | } 71 | 72 | .github { 73 | margin-top: -.6em; 74 | margin-left: 1.2em; 75 | } 76 | 77 | .card4 { 78 | width: 90px; 79 | height: 90px; 80 | outline: none; 81 | border: none; 82 | background: white; 83 | border-radius: 5px 5px 90px 5px; 84 | box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 85 | transition: .2s ease-in-out; 86 | } 87 | 88 | .discord { 89 | margin-top: -.9em; 90 | margin-left: -1.2em; 91 | fill: #8c9eff; 92 | } 93 | 94 | .card1:hover { 95 | cursor: pointer; 96 | scale: 1.1; 97 | background-color: #cc39a4; 98 | } 99 | 100 | .card1:hover .instagram { 101 | fill: white; 102 | } 103 | 104 | .card2:hover { 105 | cursor: pointer; 106 | scale: 1.1; 107 | background-color: #03A9F4; 108 | } 109 | 110 | .card2:hover .twitter { 111 | fill: white; 112 | } 113 | 114 | .card3:hover { 115 | cursor: pointer; 116 | scale: 1.1; 117 | background-color: black; 118 | } 119 | 120 | .card3:hover .github { 121 | fill: white; 122 | } 123 | 124 | .card4:hover { 125 | cursor: pointer; 126 | scale: 1.1; 127 | background-color: #8c9eff; 128 | } 129 | 130 | .card4:hover .discord { 131 | fill: white; 132 | } -------------------------------------------------------------------------------- /Spotify Login Bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spotify Colne Using HTML | CSS 7 | 8 | 9 | 10 |

11 | 39 |

40 | 41 | -------------------------------------------------------------------------------- /Spotify Login Bar/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background: #e8e8e8; 7 | } 8 | 9 | .form { 10 | display: grid; 11 | place-items: center; 12 | position: relative; 13 | width: 300px; 14 | height: 472px; 15 | padding: 25px; 16 | background-color: #161616; 17 | border-radius: 10px; 18 | } 19 | 20 | .form-body { 21 | position: absolute; 22 | top: 50%; 23 | right: 25px; 24 | left: 25px; 25 | width: 230px; 26 | margin: -156px auto 0 auto; 27 | } 28 | 29 | .spotify-text { 30 | text-align: center; 31 | line-height: 1; 32 | } 33 | 34 | .spotify-text-1 { 35 | color: #00ff7f; 36 | font-weight: 600; 37 | font-size: 40px; 38 | } 39 | 40 | .spotify-text-2 { 41 | color: #ffffff; 42 | font-size: 18px; 43 | margin-top: 17px; 44 | } 45 | 46 | .input-area { 47 | margin-top: 40px; 48 | } 49 | 50 | .form-inp{ 51 | padding: 11px 25px; 52 | background: transparent; 53 | border: 1px solid #e3e3e3; 54 | line-height: 1; 55 | border-radius: 8px; 56 | } 57 | 58 | .form-inp:focus { 59 | border: 1px solid #00ff7f; 60 | } 61 | 62 | .form-inp:first-child { 63 | margin-bottom: 15px; 64 | } 65 | 66 | .form-inp input { 67 | width: 100%; 68 | background: none; 69 | font-size: 13.4px; 70 | color: #00ff7f; 71 | border: none; 72 | padding: 0; 73 | margin: 0; 74 | } 75 | 76 | .form-inp input:focus { 77 | outline: none; 78 | } 79 | 80 | .login-btn { 81 | margin-top: 20px; 82 | } 83 | 84 | .submit-btn { 85 | display: block; 86 | width: 100%; 87 | color: #00ff7f; 88 | background-color: transparent; 89 | font-weight: 600; 90 | font-size: 14px; 91 | margin: 0; 92 | padding: 14px 13px 12px 13px; 93 | border: 0; 94 | outline: 1px solid #00ff7f; 95 | border-radius: 8px; 96 | line-height: 1; 97 | cursor: pointer; 98 | transition: all ease-in-out 0.3s; 99 | } 100 | 101 | .submit-btn:hover { 102 | transition: all ease-in-out 0.3s; 103 | background-color: #00ff7f; 104 | color: #161616; 105 | cursor: pointer; 106 | } 107 | 108 | .password { 109 | text-align: center; 110 | margin-top: 10px; 111 | } 112 | 113 | .password a { 114 | color: #868686; 115 | font-size: 12px; 116 | text-decoration: none; 117 | } 118 | 119 | .bar { 120 | position: absolute; 121 | left: 50%; 122 | bottom: -22%; 123 | width: 28px; 124 | height: 8px; 125 | margin-left: -33px; 126 | background-color: #00ff7f; 127 | border-radius: 10px; 128 | } 129 | 130 | .bar:before, 131 | .bar:after { 132 | content: ""; 133 | position: absolute; 134 | width: 8px; 135 | height: 8px; 136 | background-color: #ececec; 137 | border-radius: 50%; 138 | } 139 | 140 | .bar:before { 141 | right: -20px; 142 | } 143 | 144 | .bar:after { 145 | right: -38px; 146 | } -------------------------------------------------------------------------------- /Toggle Switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Point Of The Code 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | Day 15 | Night 16 | 17 |

18 | 19 | 20 | -------------------------------------------------------------------------------- /Toggle Switch/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | .checkbox { 10 | width: 223px; 11 | height: 60px; 12 | background-color: #d0d0d0; 13 | border-radius: 30px; 14 | position: relative; 15 | color: black; 16 | overflow: hidden; 17 | } 18 | 19 | #checkbox_toggle { 20 | display: none; 21 | } 22 | 23 | .checkbox .toggle { 24 | width: 100px; 25 | height: 50px; 26 | position: absolute; 27 | border-radius: 30px; 28 | left: 5px; 29 | cursor: pointer; 30 | background: linear-gradient(40deg, #ff0080, #ff8c00 70%); 31 | transition: 0.4s; 32 | box-shadow: 0px 0px 3px rgb(255, 255, 20), 0px 0px 5px rgb(255, 255, 20); 33 | } 34 | 35 | .checkbox .slide { 36 | width: 230px; 37 | height: 60px; 38 | display: flex; 39 | align-items: center; 40 | justify-content: space-around; 41 | cursor: pointer; 42 | } 43 | 44 | .checkbox .slide .text { 45 | font-size: 16px; 46 | font-weight: 700; 47 | z-index: 100; 48 | cursor: pointer; 49 | } 50 | 51 | .check:checked + .checkbox .slide .toggle { 52 | transform: translateX(113px); 53 | background: linear-gradient(40deg, #8983f7, #a3dafb 70%); 54 | box-shadow: -0px -0px 10px #8983f7, -0px -0px 3px #8983f7; 55 | } 56 | 57 | .check:checked + .checkbox .slide { 58 | background-color: #0a1929; 59 | color: #fff; 60 | } -------------------------------------------------------------------------------- /Tooltip Part-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tooltip Part-1 / @point_of_the_code 7 | 8 | 9 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Tooltip Part-1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #525a61; 7 | } 8 | 9 | .tooltip-container { 10 | --background: linear-gradient(45deg, #22d3ee, #1f9df5); 11 | position: relative; 12 | background: var(--background); 13 | cursor: pointer; 14 | transition: all 0.2s; 15 | font-size: 17px; 16 | padding: 0.7em 1.8em; 17 | border-radius: 8px; 18 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 19 | color: #fff; 20 | } 21 | 22 | .tooltip { 23 | position: absolute; 24 | top: 100%; 25 | left: 50%; 26 | transform: translateX(-50%) scale(0.8); 27 | transform-origin: bottom; 28 | padding: 0.3em 0.6em; 29 | opacity: 0; 30 | pointer-events: none; 31 | transition: all 0.3s; 32 | background: var(--background); 33 | border-radius: 4px; 34 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 35 | } 36 | 37 | .tooltip::before { 38 | position: absolute; 39 | content: ""; 40 | height: 0.6em; 41 | width: 0.6em; 42 | bottom: -0.2em; 43 | left: 50%; 44 | transform: translate(-50%) rotate(45deg); 45 | background: var(--background); 46 | } 47 | 48 | .tooltip-container:hover .tooltip { 49 | top: -45px; 50 | opacity: 1; 51 | visibility: visible; 52 | pointer-events: auto; 53 | transform: translateX(-50%) scale(1); 54 | } 55 | .tooltip-container:hover { 56 | transform: scale(0.9); 57 | } 58 | -------------------------------------------------------------------------------- /Weather App Clone Part-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

11 |

12 |

PINK CITY

13 |

PARTILY CLOUDY

14 | 34 |

32°

35 |

36 |

37 |

Min

38 |

30°

39 |

40 |

41 |

Max

42 |

32°

43 |

44 |

45 |

46 |

47 | 48 | 49 | -------------------------------------------------------------------------------- /Weather App Clone Part-2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | width: 100%; 7 | height: 100%; 8 | background-color: #313131; 9 | background-image: radial-gradient( 10 | rgba(255, 255, 255, 0.171) 2px, 11 | transparent 0 12 | ); 13 | background-size: 30px 30px; 14 | background-position: -5px -5px; 15 | } 16 | 17 | .cardContainer { 18 | width: fit-content; 19 | position: relative; 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | 25 | .card { 26 | position: relative; 27 | width: 220px; 28 | height: 250px; 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | justify-content: space-between; 33 | padding: 20px 10px; 34 | border-radius: 10px; 35 | backdrop-filter: blur(30px); 36 | background-color: rgba(65, 65, 65, 0.308); 37 | border: 1px solid rgba(255, 255, 255, 0.089); 38 | cursor: pointer; 39 | } 40 | 41 | .city { 42 | font-weight: 700; 43 | font-size: 0.9em; 44 | letter-spacing: 1.2px; 45 | color: white; 46 | } 47 | 48 | .weather { 49 | font-weight: 500; 50 | font-size: 0.7em; 51 | letter-spacing: 1.2px; 52 | color: rgb(197, 197, 197); 53 | } 54 | 55 | .temp { 56 | font-size: 1.8em; 57 | color: white; 58 | } 59 | 60 | .minmaxContainer { 61 | width: 100%; 62 | display: flex; 63 | align-items: center; 64 | justify-content: space-between; 65 | } 66 | 67 | .min, 68 | .max { 69 | width: 50%; 70 | display: flex; 71 | flex-direction: column; 72 | align-items: flex-end; 73 | justify-content: center; 74 | padding: 0px 20px; 75 | gap: 4px; 76 | } 77 | 78 | .max { 79 | align-items: flex-start; 80 | border-left: 2px solid white; 81 | } 82 | 83 | .maxHeading, 84 | .minHeading { 85 | font-size: 0.7em; 86 | font-weight: 600; 87 | color: white; 88 | } 89 | 90 | .maxTemp, 91 | .minTemp { 92 | font-size: 0.6em; 93 | font-weight: 500; 94 | color: rgb(197, 197, 197); 95 | } 96 | 97 | .cardContainer::before { 98 | width: 100px; 99 | height: 100px; 100 | content: ""; 101 | position: absolute; 102 | background-color: rgb(144, 161, 255); 103 | z-index: -1; 104 | border-radius: 50%; 105 | left: 100px; 106 | top: 50px; 107 | transition: all 1s; 108 | } 109 | 110 | .cardContainer:hover::before { 111 | transform: translate(-50px, 50px); 112 | } -------------------------------------------------------------------------------- /Weather Clone Using HTML And CSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather Clone 8 | 9 | 10 |

11 |

12 | 34 |

23 °C

35 |

Dunmore, Ireland

36 |

37 | 38 |

39 |

40 |

41 |

Humidity
30%

42 | 83 |

84 | 85 |

86 |

Wind
8 Km/h

87 | 128 |

129 |

130 | 131 |

132 |

133 | 169 |

AQI
30

170 |

171 | 172 |

173 | 214 |

Real Feel
21 °C

215 |

216 | 217 |

218 | 256 |

Pressure
1012 mbar

257 |

258 |

Healthy

259 |

260 |

261 |

262 | 263 | 264 | -------------------------------------------------------------------------------- /Weather Clone Using HTML And CSS/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 90vh; 6 | background-color: #212121; 7 | } 8 | 9 | .cardm { 10 | position: absolute; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | top: 46.64%; 15 | left: 50%; 16 | } 17 | 18 | .card { 19 | position: absolute; 20 | width: 250px; 21 | height: 130px; 22 | border-radius: 25px; 23 | background: whitesmoke; 24 | color: black; 25 | z-index: 2; 26 | transition: .4s ease-in-out; 27 | } 28 | 29 | .weather { 30 | position: relative; 31 | margin: 1em; 32 | } 33 | 34 | .main { 35 | font-size: 2em; 36 | position: relative; 37 | top: -3em; 38 | left: 4.3em; 39 | } 40 | 41 | .mainsub { 42 | position: relative; 43 | top: -10.2em; 44 | left: 14em; 45 | font-size: 0.6em; 46 | } 47 | 48 | .card2 { 49 | position: absolute; 50 | display: flex; 51 | flex-direction: row; 52 | width: 240px; 53 | height: 130px; 54 | border-radius: 35px; 55 | background: white; 56 | z-index: -1; 57 | transition: .4s ease-in-out; 58 | } 59 | 60 | .card:hover { 61 | background-color: #FFE87C; 62 | cursor: pointer; 63 | } 64 | 65 | .card:hover + .card2 { 66 | height: 300px; 67 | border-bottom-left-radius: 0px; 68 | border-bottom-right-radius: 0px; 69 | } 70 | 71 | .card:hover + .card2 .lower { 72 | top: 20.2em; 73 | } 74 | 75 | .upper { 76 | display: flex; 77 | flex-direction: row; 78 | position: relative; 79 | color: black; 80 | left: 1.8em; 81 | top: 0.5em; 82 | gap: 4em; 83 | } 84 | 85 | .humiditytext { 86 | position: relative; 87 | left: 3.6em; 88 | top: 2.7em; 89 | font-size: 0.6em; 90 | } 91 | 92 | .airtext { 93 | position: relative; 94 | left: 3.8em; 95 | top: 2.7em; 96 | font-size: 0.6em; 97 | } 98 | 99 | .lower { 100 | display: flex; 101 | flex-direction: row; 102 | position: absolute; 103 | text-align: center; 104 | color: black; 105 | left: 3em; 106 | top: 1em; 107 | margin-top: 0.7em; 108 | font-size: 0.7em; 109 | transition: .4s ease-in-out; 110 | } 111 | 112 | .aqi { 113 | margin-right: 3.25em; 114 | } 115 | 116 | .realfeel { 117 | margin-right: 1.8em; 118 | } 119 | 120 | .card3 { 121 | position: absolute; 122 | display: flex; 123 | flex-direction: row; 124 | justify-content: center; 125 | align-items: center; 126 | width: 240px; 127 | height: 30px; 128 | top: 4.7em; 129 | left: -2.4em; 130 | font-size: 1.24em; 131 | border-bottom-left-radius: 35px; 132 | border-bottom-right-radius: 35px; 133 | background: limegreen; 134 | transition: .4s ease-in-out; 135 | } --------------------------------------------------------------------------------