├── 3D-glowing-bottle
    ├── index.html
    └── style.css
├── 3d-flip-card-gallery
    ├── index.html
    └── style.css
├── 3d-text-rotating-effect
    ├── index.html
    └── style.css
├── README.md
├── animated-background
    ├── index.html
    └── style.css
├── animated-border
    ├── index.html
    └── style.css
├── animated-text-disappear
    ├── index.html
    └── style.css
├── black-circle-animation
    ├── index.html
    └── style.css
├── bottle-dripping-loading-animation
    ├── index.html
    └── style.css
├── bottom-navigation-bar
    ├── index.html
    └── style.css
├── bouncing-ball
    ├── index.html
    └── style.css
├── bouncy-image-group
    ├── index.html
    └── style.css
├── button-hover
    ├── index.html
    └── style.css
├── christmas-tree-animation
    ├── index.html
    └── style.css
├── circular-progress-bar
    ├── index.html
    └── style.css
├── clipped-square-loader
    ├── index.html
    └── style.css
├── color-selector
    ├── index.html
    └── style.css
├── colors-loader
    ├── index.html
    └── style.css
├── controlled-brightness-in-a-light
    ├── index.html
    └── style.css
├── drag-and-drop-list
    ├── index.html
    └── style.css
├── dropdown-menu
    ├── index.html
    └── style.css
├── dual-search-bar
    ├── index.html
    └── style.css
├── expanding-text-animation
    ├── index.html
    └── style.css
├── fingerprint-login-animation
    ├── index.html
    └── style.css
├── flipping
    ├── index.html
    └── style.css
├── football-preloader
    ├── index.html
    └── style.css
├── glowing-border-animation
    ├── index.html
    └── style.css
├── glowy-button
    ├── index.html
    └── style.css
├── haunted-manor
    ├── index.html
    └── style.css
├── heart-beat-animation
    ├── index.html
    └── style.css
├── hills-animation
    ├── index.html
    └── style.css
├── hover-animation
    ├── index.html
    └── style.css
├── image-corner-hover-effect
    ├── index.html
    └── style.css
├── image-overlay-hover-effect
    ├── index.html
    └── style.css
├── image-rotate-animation
    ├── index.html
    └── style.css
├── interactive-street-lamp
    ├── index.html
    └── style.css
├── leaping-triangles.loader
    ├── index.html
    └── style.css
├── light-and-dark-toggle
    ├── index.html
    └── style.css
├── loader
    ├── index.html
    └── style.css
├── loading-animation
    ├── index.html
    └── style.css
├── loading-knight-animation
    ├── index.html
    └── style.css
├── login-form
    ├── index.html
    └── style.css
├── moving-tabs
    ├── index.html
    └── style.css
├── navigation-bar
    ├── index.html
    └── style.css
├── neon-download-button
    ├── index.html
    └── style.css
├── night-view
    ├── index.html
    └── style.css
├── opening-envelope
    ├── index.html
    └── style.css
├── pill-loader
    ├── index.html
    └── style.css
├── play-button
    ├── index.html
    └── style.css
├── preloader
    ├── index.html
    └── style.css
├── product-card-animation
    ├── index.html
    └── style.css
├── profile-card-hover
    ├── index.html
    └── style.css
├── progress-bar
    ├── index.html
    └── style.css
├── radial-menu
    ├── index.html
    └── style.css
├── radiant-ripple
    ├── index.html
    └── style.css
├── responsive-footer
    ├── index.html
    └── style.css
├── ripple-loader
    ├── index.html
    └── style.css
├── search-bar
    ├── index.html
    └── style.css
├── season-slider
    ├── index.html
    └── style.css
├── sleeping-santa
    ├── index.html
    └── style.css
├── social-media-icon-popup
    ├── index.html
    └── style.css
├── sparkle-card-animation
    ├── index.html
    └── style.css
├── star-rating
    ├── index.html
    └── style.css
├── subscription-form
    ├── index.html
    └── style.css
├── text-animation
    ├── index.html
    └── style.css
├── text-transition
    ├── index.html
    └── style.css
├── vertical-navigation-bar
    ├── index.html
    └── style.css
├── waving-wine-glass
    ├── index.html
    └── style.css
├── weather-animation
    ├── index.html
    └── style.css
├── website-loader
    ├── index.html
    └── style.css
└── windows-loader-animation
    ├── index.html
    └── style.css


/3D-glowing-bottle/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>
 6 | 		3D Glowing Bottle
 7 | 	</title>
 8 | 	<link rel="stylesheet" type="text/css" href="style.css">
 9 | </head>
10 | <body>
11 | 
12 | <section>
13 | 	<div class="shadow"></div>
14 | 	<div class="bowl">
15 | 		<div class="liquid"></div>
16 | 		
17 | 	</div>
18 | </section>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/3D-glowing-bottle/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Kanit&family=Mrs+Sheppards&family=Oswald:wght@700&display=swap');
  2 | 
  3 | *{
  4 | 	margin: 0;
  5 | 	padding: 0;
  6 | 	box-sizing: border-box;
  7 | }
  8 | section{
  9 | 	display: flex;
 10 | 	justify-content: center;
 11 | 	align-items: center;
 12 | 	min-height: 100vh;
 13 | 	background: #121212;
 14 | 
 15 | }
 16 | .bowl{
 17 | 	position: relative;
 18 | 	width: 300px;
 19 | 	height: 300px;
 20 | 	background: rgba(255, 255, 255, 0.1);
 21 | 	border-radius: 50%;
 22 | 	border: 8px solid transparent;
 23 | 	animation: animate 5s linear infinite;
 24 | 	transform-origin: bottom center;
 25 | 	animation-play-state: run;
 26 | }
 27 | @keyframes animate{
 28 | 	0%{
 29 | 		transform: rotate(0deg);
 30 | 	}
 31 | 	25%{
 32 | 		transform: rotate(22deg);
 33 | 	}
 34 | 		50%{
 35 | 		transform: rotate(0deg);
 36 | 	}
 37 | 		75%{
 38 | 		transform: rotate(-22deg);
 39 | 	}
 40 | 	100%{
 41 | 		filter: hue-rotate(360deg);
 42 | 	}
 43 | }
 44 | .bowl::before{
 45 | 	content: "";
 46 | 	position: absolute;
 47 | 	top: -15px;
 48 | 	left: 50%;
 49 | 	transform: translateX(-50%);
 50 | 	width: 40%;
 51 | 	height: 30px;
 52 | 	border: 15px solid #444;
 53 | 	border-radius: 50%;
 54 | 	box-shadow: 0 10px #222;
 55 | 
 56 | }
 57 | .bowl::after{
 58 | 	content: "";
 59 | 	position: absolute;
 60 | 	top: 35%;
 61 | 	left: 50%;
 62 | 	transform: translate(-50%,-50%);
 63 | 	width: 150px;
 64 | 	height: 60px;
 65 | 	background: rgba(255, 255, 255, 0.05);
 66 | 	transform-origin: center;
 67 | 	animation: animatebowlshadow 5s linear infinite;
 68 | 	border-radius: 50%;
 69 | 	animation-play-state: running;
 70 | 
 71 | }
 72 | 
 73 | 
 74 | @keyframes animatebowlshadow{
 75 | 	0%{
 76 | 		left: 50%;
 77 | 		width: 150px;
 78 | 		height: 60px;
 79 | 	}
 80 | 25%{
 81 | 		left: 55%;
 82 | 		width: 140px;
 83 | 		height: 65px;
 84 | 	}50%{
 85 | 		left: 50%;
 86 | 		width: 150px;
 87 | 		height: 60px;
 88 | 	}
 89 | 	75%{
 90 | 		left: 45%;
 91 | 		width: 140px;
 92 | 		height: 65px;
 93 | 	}
 94 | 	100%{
 95 | 
 96 | 
 97 | 	}
 98 | }
 99 | 
100 | 
101 | .liquid{
102 | 	position: absolute;
103 | 	top: 50%;
104 | 	left: 5px;
105 | 	right: 5px;
106 | 	bottom: 5px;
107 | 	background: #1ae907;
108 | 	border-bottom-left-radius: 150px;
109 | 	border-bottom-right-radius: 150px;
110 | 	filter: drop-shadow(0 0 80px #1ae907);
111 | 	transform-origin: top center;
112 | 	animation: animateliquid 5s linear infinite;
113 | 	animation-play-state: running;
114 | }
115 | 
116 | @keyframes animateliquid{
117 | 	0%{
118 | 		transform: rotate(0deg);
119 | 	}
120 | 	25%{
121 | 		transform: rotate(-22deg);
122 | 	}
123 | 	30%{
124 | 		transform: rotate(-23deg);
125 | 	}
126 | 	50%{
127 | 		transform: rotate(0deg);
128 | 	}
129 | 	75%{
130 | 		transform: rotate(22deg);
131 | 	}
132 | 		80%{
133 | 		transform: rotate(23deg);
134 | 	}
135 | 	100%{
136 | 		transform: rotate(0deg);
137 | 	}
138 | 
139 | 
140 | }
141 | .liquid::before{
142 | 	content: "";
143 | 	position: absolute;
144 | 	top: -10px;
145 | 	width: 100%;
146 | 	height: 20px;
147 | 	background: #15be05;
148 | 	border-radius: 50%;
149 | 	filter:drop-shadow(0 0 80px #15be05) ;
150 | }
151 | .shadow{
152 | 	position: absolute;
153 | 	top: calc(50% + 150px);
154 | 	left: 50%;
155 | 	transform: translate(-50%,-50%);
156 | 	width: 260px;
157 | 	height: 40px;
158 | 	background: rgba(0, 0, 0, 0.5);
159 | 	border-radius: 50%;
160 | 	animation: animateshadow 5s linear infinite;
161 | 	animation-play-state: running;
162 | 
163 | }
164 | @keyframes animateshadow{
165 | 	0%{
166 | 		left: 50%;
167 | 		width: 260px;
168 | 		height: 40px;
169 | 		top: calc(50% + 150px);
170 | 
171 | 	}
172 | 
173 | 	25%{
174 | 		left: 55%;
175 | 		width: 265px;
176 | 		height: 30px;
177 | 		top: calc(50% + 130px);
178 | 		
179 | 	}50%{
180 | 		left: 50%;
181 | 		width: 260px;
182 | 		height: 40px;
183 | 		top: calc(50% + 150px);
184 | 		
185 | 	}75%{
186 | 		left: 45%;
187 | 		width: 265px;
188 | 		height: 30px;
189 | 		top: calc(50% + 130px);
190 | 		
191 | 	}100%{
192 | 	}
193 | }
194 | 
195 | 
196 | 
197 | 
198 | 
199 | 
200 | 
201 | 
202 | 
203 | 
204 | 


--------------------------------------------------------------------------------
/3d-flip-card-gallery/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>3D Flip Card Gallery</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <ul class='list'>
11 |         <li class='item'></li>
12 |         <li class='item'></li>
13 |         <li class='item'></li>
14 |         <li class='item'></li>
15 |         <li class='item'></li>
16 |       </ul>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/3d-flip-card-gallery/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |   }
 6 |   
 7 |   body {
 8 |     height: 100vh;
 9 |     display: grid;
10 |     place-items: center;
11 |   }
12 |   
13 |   .list {
14 |     display: flex;
15 |     gap: 0.25rem;
16 |     transform-style: preserve-3d;
17 |     list-style-type: none;
18 |   
19 |     &:hover :not(:hover) {
20 |       margin: 0 -20px;
21 |       transform: perspective(500px) rotateY(45deg) scale(0.95);
22 |     }
23 |   
24 |     &:hover :not(:hover)::after {
25 |       opacity: 0.4;
26 |     }
27 |   }
28 |   
29 |   .item {
30 |     position: relative;
31 |     width: 120px;
32 |     aspect-ratio: 3/4;
33 |     border-radius: 0.5rem;
34 |     background-size: cover;
35 |     background-position: center;
36 |     transition: margin 0.5s, transform 0.5s;
37 |   
38 |     &:nth-of-type(1) { background-image: url(https://images.unsplash.com/photo-1601004890684-d8cbf643f5f2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2215&q=80); }
39 |     &:nth-of-type(2) { background-image: url(https://images.unsplash.com/photo-1528825871115-3581a5387919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2215&q=80); }
40 |     &:nth-of-type(3) { background-image: url(https://images.unsplash.com/photo-1557800636-894a64c1696f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2265&q=80); }
41 |     &:nth-of-type(4) { background-image: url(https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2244&q=80); }
42 |     &:nth-of-type(5) { background-image: url(https://images.unsplash.com/photo-1618897996318-5a901fa6ca71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2264&q=80); }
43 |   
44 |     &:hover ~ .item {
45 |       transform: perspective(500px) rotateY(-45deg) scale(0.95);
46 |     }
47 |   
48 |     &:hover {
49 |       transform: perspective(500px) rotateY(0) scale(1.2);
50 |     }
51 |   
52 |     &::after {
53 |       content: '';
54 |       position: absolute;
55 |       width: inherit;
56 |       aspect-ratio: inherit;
57 |       border-radius: inherit;
58 |       background-color: black;
59 |       opacity: 0;
60 |       transition: opacity 0.5s;
61 |     }
62 |   }


--------------------------------------------------------------------------------
/3d-text-rotating-effect/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>3D Text Rotating Effect</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="wrap">
11 |         <div class="container">
12 |           <div class="cube">
13 |             <div class="side side1">CodeCrafters</div>
14 |             <div class="side side2">Like</div>
15 |             <div class="side side3">Share</div>
16 |             <div class="side side4">Follow</div>
17 |           </div>
18 |         </div>
19 |       </div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/3d-text-rotating-effect/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     height: 100vh;
 3 |     padding: 50px;
 4 |     display:flex;
 5 |     justify-content:center;
 6 |     align-items:center;
 7 |     background-color: aqua;
 8 |   } 
 9 |   .wrap{
10 |     width:500px;
11 |     height:300px;
12 |   }
13 |   .container {
14 |     position: absolute;
15 |     height: 50px;
16 |     width: auto;
17 |     perspective: 400px;
18 |   }
19 |   .cube {
20 |     height: 50px;
21 |     widht: auto;
22 |     transform-origin: center;
23 |     transform-style: preserve-3d;
24 |     animation: rotate 8s infinite ease-in-out;
25 |   }
26 |   .side {
27 |     position: absolute;
28 |     display: block;
29 |     height: 50px;
30 |     width: auto;
31 |     font-size: 50px;
32 |     font-family: "SF Pro", Helvetica, Arial, Sans-serif;
33 |     font-weight: bold;
34 |     backface-visibility: hidden;
35 |   }
36 |   .side1 {
37 |     transform: translateZ(25px);
38 |   }
39 |   .side3 {
40 |     transform: rotateX(180deg) translateZ(25px);
41 |   }
42 |   .side4 {
43 |     transform: rotateX(90deg) translateZ(25px);
44 |   }
45 |   .side2 {
46 |     transform: rotateX(-90deg) translateZ(25px);
47 |   }
48 |   
49 |   @keyframes rotate {
50 |     0% {
51 |       transform: rotateX(0deg) rotateY(0deg);
52 |     }
53 |     20%,
54 |     25% {
55 |       transform: rotateX(90deg) rotateY(0deg);
56 |     }
57 |     45%,
58 |     50% {
59 |       transform: rotateX(180deg) rotateY(0deg);
60 |     }
61 |     70%,
62 |     75% {
63 |       transform: rotateX(270deg) rotateY(0deg);
64 |     }
65 |     95%,
66 |     100% {
67 |       transform: rotateX(360deg) rotateY(0deg);
68 |     }
69 |   }
70 |   
71 |   a {
72 |     font-family: helvetica;
73 |     color: #428bca;
74 |     text-align: center;
75 |     display: block;
76 |   }
77 |   


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # css-projects
2 | You can find all source codes for all css projects here
3 | 


--------------------------------------------------------------------------------
/animated-background/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     background: -moz-linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
  3 |     background: -webkit-linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
  4 |     background: linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
  5 |     background-size: 400% 400%;
  6 |     -webkit-animation: Gradient 15s ease infinite;
  7 | 	-moz-animation: Gradient 15s ease infinite;
  8 | 	animation: Gradient 15s ease infinite;
  9 | 	min-height: calc(100vh - 2rem);
 10 | 	display: flex;
 11 | 	flex-direction: column;
 12 | 	align-items: stretch;
 13 | 	justify-content: space-evenly;
 14 | 	overflow: hidden;
 15 | 	position: relative; 
 16 | }
 17 | 
 18 | body::before, 
 19 | body::after {
 20 | 	content: "";
 21 | 	width: 70vmax;
 22 | 	height: 70vmax;
 23 | 	position: absolute;
 24 | 	background: rgba(255, 255, 255, 0.07);
 25 | 	left: -20vmin;
 26 | 	top: -20vmin;
 27 | 	animation: morph 15s linear infinite alternate, spin 20s linear infinite;
 28 | 	z-index: 1;
 29 | 	will-change: border-radius, transform;
 30 | 	transform-origin: 30% 30%;
 31 | 	pointer-events: none; 
 32 | }
 33 | 	
 34 | body::after {
 35 |     width: 70vmin;
 36 |     height: 70vmin;
 37 |     left: auto;
 38 |     right: -10vmin;
 39 |     top: auto;
 40 |     bottom: 0;
 41 |     animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
 42 |     transform-origin: 10% 10%; 
 43 | }
 44 | 
 45 | @-webkit-keyframes Gradient {
 46 | 	0% {
 47 | 		background-position: 0 50%
 48 | 	}
 49 | 	50% {
 50 | 		background-position: 100% 50%
 51 | 	}
 52 | 	100% {
 53 | 		background-position: 0 50%
 54 | 	}
 55 | }
 56 | 
 57 | @-moz-keyframes Gradient {
 58 | 	0% {
 59 | 		background-position: 0 50%
 60 | 	}
 61 | 	50% {
 62 | 		background-position: 100% 50%
 63 | 	}
 64 | 	100% {
 65 | 		background-position: 0 50%
 66 | 	}
 67 | }
 68 | 
 69 | @keyframes Gradient {
 70 | 	0% {
 71 | 		background-position: 0 50%
 72 | 	}
 73 | 	50% {
 74 | 		background-position: 100% 50%
 75 | 	}
 76 | 	100% {
 77 | 		background-position: 0 50%
 78 | 	}
 79 | }
 80 | 
 81 | @keyframes morph {
 82 |   0% {
 83 |     border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
 84 |   100% {
 85 |     border-radius: 40% 60%; } 
 86 | }
 87 | 
 88 | @keyframes spin {
 89 |   to {
 90 |     transform: rotate(1turn); 
 91 |   } 
 92 | }
 93 | 
 94 | 	.st0{display:none;}
 95 | 	.st1{display:inline;}
 96 | 	.st2{opacity:0.29;}
 97 | 	.st3{fill:#FFFFFF;}
 98 | 	.st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
 99 | 	.st5{clip-path:url(#SVGID_4_);}
100 | 	.st6{clip-path:url(#SVGID_6_);}
101 | 	.st7{clip-path:url(#SVGID_8_);}
102 | 	.st8{clip-path:url(#SVGID_10_);}
103 | 	.st9{fill:none;}
104 | 	.st10{clip-path:url(#SVGID_12_);}
105 | 	.st11{opacity:0.7;}
106 | 	.st12{clip-path:url(#SVGID_14_);}
107 | 	.st13{opacity:0.2;}
108 | 	.st14{clip-path:url(#SVGID_16_);}
109 | 	.st15{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}


--------------------------------------------------------------------------------
/animated-border/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Animated Border</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="modal"> </div>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/animated-border/style.css:
--------------------------------------------------------------------------------
 1 | @property --rotate {
 2 | 	syntax: "<angle>";
 3 | 	initial-value: 0deg;
 4 | 	inherits: false;
 5 | }
 6 | 
 7 | body {
 8 | 	height: 100vh;
 9 | 	width: 100vw;
10 | 	background: white;
11 | 	display: flex;
12 | 	align-items: center;
13 | 	flex-direction: column;
14 | 	padding-top: 2rem;
15 | 	padding-bottom: 2rem;
16 | 	box-sizing: border-box;
17 | }
18 | 
19 | .modal {
20 | 	background: white;
21 | 	width: 90%;
22 | 	height: 90%;
23 | 	padding: 3px;
24 | 	position: relative;
25 | 	border-radius: 6px;
26 | }
27 | 
28 | .modal::before {
29 | 	content: "";
30 | 	display: block;
31 | 	width: 104%;
32 | 	height: 110%;
33 | 	border-radius: 8px;
34 | 	background: conic-gradient(
35 | 			from var(--rotate) at 50% 50%,
36 | 			#1d7afc 6%,
37 | 			transparent 30%,
38 | 			transparent 70%,
39 | 			#f8e6a0 90%,
40 | 			#1d7afc 100%
41 | 		),
42 | 		#8bdbe5;
43 | 	/* 	background: linear-gradient(140deg, #1d7afc, transparent 60%),
44 | 		linear-gradient(-55deg, #f8e6a0, transparent 50%), #8bdbe5; */
45 | 	position: absolute;
46 | 	z-index: -1;
47 | 	top: -5%;
48 | 	left: -2%;
49 | 	animation: spin 2s linear infinite;
50 | }
51 | 
52 | @keyframes spin {
53 | 	0% {
54 | 		--rotate: 0deg;
55 | 	}
56 | 	100% {
57 | 		--rotate: 360deg;
58 | 	}
59 | }
60 | 


--------------------------------------------------------------------------------
/animated-text-disappear/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>
 6 | 		Animated Text Disappear
 7 | 	</title>
 8 | 	<link rel="stylesheet" type="text/css" href="style.css">
 9 | </head>
10 | <body>
11 | 
12 | <div class="disappear">
13 | 	<span>d</span>
14 | 		<span>i</span>
15 | 			<span>s</span>
16 | 				<span>a</span>
17 | 					<span>p</span>
18 | 						<span>p</span>
19 | 							<span>e</span>
20 | 								<span>a</span>
21 | 									<span>r</span>
22 | </div>
23 | 
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/animated-text-disappear/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
  2 | 
  3 | body{
  4 |     background-color: black;
  5 | 	height: 100vh;
  6 | 	font-family: 'Poppins' sans-serif;
  7 | 	font-size: 12vw;
  8 | 	text-transform: uppercase;
  9 | 	overflow: hidden;
 10 | }
 11 | .disappear{
 12 | 	position: absolute;
 13 | 	left: 0;
 14 | 	right: 0;
 15 | 	margin: auto;
 16 | 	width: 100%;
 17 | 	text-align: center;
 18 | 	height: fit-content;
 19 | 	bottom: 0;
 20 | 	top: 0;
 21 | }
 22 | .disappear span{
 23 | 	display: inline-block;
 24 | 	color: transparent;
 25 | 	text-shadow: 0px 0px 0px rgb(255, 255, 255);
 26 | 	animation-duration: 3s;
 27 | 	animation-iteration-count: infinite;
 28 | }
 29 | .disappear span:nth-child(1)
 30 | {
 31 | 	animation-name: disappearleft;
 32 | }
 33 | 
 34 | 
 35 | .disappear span:nth-child(2)
 36 | {
 37 | 	animation-name: disappearleft;
 38 | 	animation-delay: .3s;
 39 | }
 40 | 
 41 | .disappear span:nth-child(2)
 42 | {
 43 | 	animation-name: disappearleft;
 44 | 	animation-delay: .3s;
 45 | }
 46 | 
 47 | .disappear span:nth-child(3)
 48 | {
 49 | 	animation-name: disappearleft;
 50 | 	animation-delay: .6s;
 51 | }
 52 | 
 53 | .disappear span:nth-child(4)
 54 | {
 55 | 	animation-name: disappearright;
 56 | 	animation-delay: .8s;
 57 | }
 58 | 
 59 | .disappear span:nth-child(5)
 60 | {
 61 | 	animation-name: disappearright;
 62 | 	animation-delay: 1s;
 63 | }
 64 | 
 65 | .disappear span:nth-child(6)
 66 | {
 67 | 	animation-name: disappearright;
 68 | 	animation-delay: 1.3s;
 69 | }
 70 | 
 71 | 
 72 | .disappear span:nth-child(7)
 73 | {
 74 | 	animation-name: disappearleft;
 75 | 	animation-delay: 1.6s;
 76 | }
 77 | 
 78 | .disappear span:nth-child(8)
 79 | {
 80 | 	animation-name: disappearright;
 81 | 	animation-delay: 2s;
 82 | }
 83 | 
 84 | .disappear span:nth-child(9)
 85 | {
 86 | 	animation-name: disappearright;
 87 | 	animation-delay: 2.3s;
 88 | }
 89 | 
 90 | 
 91 | 
 92 | @keyframes disappearleft{
 93 | 	50%{
 94 | 		transform: skew(50deg) translateY(-200%);
 95 | 		text-shadow: 0px 0px 50px;
 96 | 		opacity: 0;
 97 | 	}
 98 | }
 99 | 
100 | 
101 | @keyframes disappearright{
102 | 	50%{
103 | 		transform: skew(-50deg) translateY(-200%);
104 | 		text-shadow: 0px 0px 50px;
105 | 		opacity: 0;
106 | 	}
107 | }
108 | 
109 | 
110 | 


--------------------------------------------------------------------------------
/black-circle-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Black Circle Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <ul>
11 |         <li></li>
12 |         <li></li>
13 |         <li></li>
14 |     </ul>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/black-circle-animation/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	display: flex;
 3 | 	align-items: center;
 4 | 	justify-content: center;
 5 | 	height: 100vh;
 6 | 	width: 100vw;
 7 | }
 8 | 
 9 | ul {
10 | 	filter: blur(10px) contrast(15);
11 | 	background: white;
12 | 	display: flex;
13 | 	align-items: center;
14 | 	justify-content: center;
15 | 	height: 500px;
16 | 	width: 500px;
17 | 	list-style: none;
18 | }
19 | 
20 | li {
21 | 	width: 100px;
22 | 	height: 100px;
23 | 	animation: 5s rotate infinite alternate-reverse;
24 | 	border-radius: 50% 43% 45% 50%;
25 | 	background: black;
26 | }
27 | 
28 | @keyframes rotate {
29 | 	to {
30 | 		transform: rotate(1turn) translate(50px);
31 | 	}
32 | }
33 | 
34 | li:nth-child(even) {
35 | 	animation: 2s rotate infinite alternate-reverse;
36 | }
37 | 
38 | li:nth-child(3) {
39 | 	animation-duration: 5;
40 | 	animation-delay: -1.5s;
41 | }
42 | 


--------------------------------------------------------------------------------
/bottle-dripping-loading-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Bottle Dripping Loading Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <main class='container'>
11 |         <div class='loader'></div>
12 |         <div class='loader-drip'></div>
13 |         <div class='loader-drop'></div>
14 |       </main>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/bottle-dripping-loading-animation/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --primary: rgb(219, 92, 120);
  3 |   }
  4 |   
  5 |   * {
  6 |     margin: 0;
  7 |     padding: 0;
  8 |     box-sizing: border-box;
  9 |   }
 10 |   
 11 |   body {
 12 |     height: 100vh;
 13 |     display: grid;
 14 |     place-items: center;
 15 |     background-color: rgb(53, 47, 55);
 16 |   }
 17 |   
 18 |   .container { position: relative; }
 19 |   
 20 |   .loader {
 21 |     position: relative;
 22 |     width: 3rem;
 23 |     height: 4rem;
 24 |     background-color: rgb(158, 199, 199);
 25 |     border-radius: 1rem;
 26 |     box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
 27 |     overflow: hidden;
 28 |   }
 29 |   
 30 |   .loader::before {
 31 |     content: '';
 32 |     position: absolute;
 33 |     top: 1.5rem;
 34 |     left: 50%;
 35 |     transform: translateX(-50%);
 36 |     width: 6rem;
 37 |     height: 6rem;
 38 |     background-color: var(--primary);
 39 |     border-radius: 40%;
 40 |     animation: waves 8s linear infinite;
 41 |   }
 42 |   
 43 |   @keyframes waves {
 44 |     100% {
 45 |       transform: translate(-50%) rotate(360deg);
 46 |     }
 47 |   }
 48 |   
 49 |   .loader::after {
 50 |     content: '';
 51 |     position: absolute;
 52 |     right: 0.25rem;
 53 |     top: 50%;
 54 |     transform: translateY(-50%);
 55 |     width: 0.4rem;
 56 |     height: 2rem;
 57 |     border-radius: 1rem;
 58 |     background-color: rgba(255,255,255,0.3);
 59 |   }
 60 |   
 61 |   .loader-drip {
 62 |     position: absolute;
 63 |     bottom: 0;
 64 |     left: 50%;
 65 |     transform: translateX(-50%);
 66 |     width: 0.75rem;
 67 |     height: 0.75rem;
 68 |     background-color: var(--primary);
 69 |     border-radius: 50%;
 70 |     animation: drip 2s linear infinite;
 71 |   }
 72 |   
 73 |   @keyframes drip {
 74 |     15% {
 75 |       transform: translate(-50%,calc(0.75rem/2)) scale(1.1);
 76 |     }
 77 |   }
 78 |   
 79 |   .loader-drop {
 80 |     position: absolute;
 81 |     bottom: 0;
 82 |     left: 50%;
 83 |     transform: translateX(-50%);
 84 |     z-index: 10;
 85 |     width: 0.75rem;
 86 |     height: 0.75rem;
 87 |     background-color: var(--primary);
 88 |     border-radius: 50%;
 89 |     animation: drop 2s linear infinite;
 90 |   }
 91 |   
 92 |   @keyframes drop {
 93 |     90% {
 94 |       opacity: 1;
 95 |     }
 96 |     100% {
 97 |       transform: translate(-50%,5rem);
 98 |       opacity: 0;
 99 |     }
100 |   }


--------------------------------------------------------------------------------
/bottom-navigation-bar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Bottom Navigation Bar</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
10 | </head>
11 | <body>
12 |     <div class="menu">
13 |         <ul>
14 |             <li>
15 |                 <a href=""><span class="icon"><i class="fa-solid fa-house-user"></i></span> <span
16 |                         class="title">Home</span></a>
17 |             </li>
18 |             <li>
19 |                 <a href=""><span class="icon"><i class="fa-solid fa-wallet"></i></span> <span
20 |                         class="title">Wallet</span></a>
21 |             </li>
22 |             <li>
23 |                 <a href=""><span class="icon"><i class="fa-solid fa-qrcode"></i></span> <span
24 |                         class="title">Scan</span></a>
25 |             </li>
26 |             <li>
27 |                 <a href=""><span class="icon"><i class="fa-solid fa-cart-shopping"></i></span> <span
28 |                         class="title">Cart</span></a>
29 |             </li>
30 |             <li>
31 |                 <a href=""><span class="icon"><i class="fa-solid fa-user"></i></span> <span
32 |                         class="title">Account</span></a>
33 |             </li>
34 |         </ul>
35 |     </div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/bottom-navigation-bar/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background-color: #9ae7bd;
 3 |     height: 100vh;
 4 |     display: flex;
 5 |     justify-content: center;
 6 |     align-items: center;
 7 | }
 8 | 
 9 | .menu ul {
10 |     display: flex;
11 |     list-style: none;
12 |     margin: 0;
13 |     padding: 0 30px;
14 |     background-color: #006105;
15 |     border-radius: 12px;
16 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
17 | }
18 | 
19 | .menu ul li a {
20 |     color: #fff;
21 |     display: flex;
22 |     flex-direction: column;
23 |     font-size: 20px;
24 |     font-family: poppins;
25 |     text-decoration: none;
26 |     height: 70px;
27 |     width: 70px;
28 |     position: relative;
29 | }
30 | 
31 | .menu ul li a .title {
32 |     position: absolute;
33 |     font-size: 16px;
34 |     top: 50%;
35 |     left: 50%;
36 |     transform: translate(-50%, -50%);
37 |     opacity: 0;
38 |     transition: .5s;
39 | }
40 | 
41 | .menu ul li a .icon {
42 |     position: absolute;
43 |     font-size: 20px;
44 |     top: 50%;
45 |     left: 50%;
46 |     transform: translate(-50%, -50%);
47 |     transition: .5s;
48 |     width: 50px;
49 |     height: 50px;
50 |     border-radius: 50%;
51 |     display: flex;
52 |     justify-content: center;
53 |     align-items: center;
54 | }
55 | 
56 | .menu ul li a:hover .title {
57 |     transform: translate(-50%, calc(-50% + 10px));
58 |     opacity: 1;
59 | }
60 | 
61 | .menu ul li a:hover .icon {
62 |     top: 0;
63 |     background-color: #55eb5d;
64 |     color: #fff;
65 |     outline: 4px #fff solid;
66 | }


--------------------------------------------------------------------------------
/bouncing-ball/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Bouncing Egg</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="easter-animation">
11 |         <div class="egg">
12 |           <div class="eyes"></div>
13 |         </div>
14 |         <div class="shadow"></div>
15 |         <div class="clouds">
16 |           <div class="cloud1"></div>
17 |           <div class="cloud2"></div>
18 |           <div class="cloud3"></div>
19 |         </div>
20 |       </div>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/bouncing-ball/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     align-items: center;
  3 |     display: flex;
  4 |     justify-content: center;
  5 |     overflow: hidden;
  6 |     height: 100vh; 
  7 |     background-color: #f2e8cf;
  8 |   }
  9 |   
 10 |   .easter-animation {
 11 |     position: relative;
 12 |   }
 13 |   
 14 |   .egg {
 15 |       position: relative;
 16 |     width:150px;
 17 |     height: 200px;
 18 |     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
 19 |     background: linear-gradient(295deg, #ff595e 15%, #8ac926 15%, #8ac926 30%, #ff595e 30%, #ff595e 49%, #8ac926 49%, #8ac926 70%, #ff595e 70%);
 20 |     overflow: hidden;
 21 |     animation: bounce 1s linear infinite;
 22 |           }
 23 |   
 24 |   .egg:before, .egg:after {
 25 |     position: absolute;
 26 |     content:"";
 27 |   }
 28 |   
 29 |   .egg:before {
 30 |     width: 200px;
 31 |     height: 100px;
 32 |     background-color: #1982c4;
 33 |     top:160px;
 34 |     box-shadow: 0 -50px #ffca3a, 0 -65px #8ac926, 0 -90px #6a4c93, 0 -95px #ffca3a;
 35 |   }
 36 |   
 37 |   .egg:after {
 38 |     border-radius: 50%;
 39 |     width:15px;
 40 |     height: 15px;
 41 |     background-color: #ffca3a;
 42 |     left:90px;
 43 |     top:75px;
 44 |     box-shadow: -40px 0 #ffca3a, 40px 0 #ffca3a, -80px 0 #ffca3a, -120px 0 #ffca3a;
 45 |   }
 46 |   
 47 |   .eyes {
 48 |     position: absolute;
 49 |     background-color: #333;
 50 |     border-radius: 50%;
 51 |     width:20px;
 52 |     height: 30px;
 53 |     left:90px;
 54 |     top:120px;
 55 |     box-shadow: 20px 0 #333;
 56 |   }
 57 |   
 58 |   .eyes:before {
 59 |     position: absolute;
 60 |     content:"";
 61 |     background-color: #fff;
 62 |     width:5px;
 63 |     height: 12px;
 64 |     border-radius: 50%;
 65 |     left:12px;
 66 |     top:10px;
 67 |     box-shadow:20px 0 #fff;
 68 |   }
 69 |   
 70 |   .eyes:after {
 71 |     content:"";
 72 |     position: absolute;
 73 |     width:200px;
 74 |     height: 30px;
 75 |     background-color: #1982c4;
 76 |     top:-130px;
 77 |     left:-100px;
 78 |   }
 79 |   
 80 |    @keyframes bounce {
 81 |           0%   { transform: scale(1,1) translateY(0); }
 82 |           10%  { transform: scale(1.1,.9) translateY(0); }
 83 |           30%  { transform: scale(.9,1.1) translateY(-70px) translateX(30px);}
 84 |           50%  { transform: scale(1.05,.95) translateY(0)translateX(30px) rotate(-10deg); }
 85 |           58%  { transform: scale(1,1) translateY(-7px)translateX(0); }
 86 |           65%  { transform: scale(1,1) translateY(0);}
 87 |           100% { transform: scale(1,1) translateY(0);}
 88 |       }
 89 |   
 90 |   .shadow {
 91 |     position: absolute;
 92 |     z-index:-1;
 93 |     background-color: rgba(0,0,0,.2);
 94 |     width:100px;
 95 |     height: 20px;
 96 |     border-radius:50%;
 97 |     left:20px;
 98 |     top:190px;
 99 |     animation: move 1s linear infinite;
100 |   }
101 |   
102 |   @keyframes move {
103 |       0%   { transform: translateX(0); }
104 |           10%  { transform: translateX(0) scale(.8);}
105 |           30%  { transform: translateX(0) scale(.8);}
106 |           50%  { transform: translateX(30px) scale(.7); }
107 |           58%  { transform: translateX(20px);}
108 |           65%  { transform: translateX(0);}
109 |           100% { transform: translateX(0);}
110 |   }
111 |   
112 |   .clouds {
113 |     position: absolute;
114 |     width: 500px;
115 |   }
116 |   
117 |   .cloud1, .cloud2, .cloud3 {
118 |     position: absolute;
119 |     background-color: white;
120 |     width: 100px;
121 |     height: 25px;
122 |     border-radius:100px;
123 |   }
124 |   
125 |   .cloud1:before, .cloud2:before, .cloud3:before {
126 |     position: absolute;
127 |     content:"";
128 |     width:40px;
129 |     height: 40px;
130 |     top:-20px;
131 |     left:20px;
132 |     background-color: white;
133 |     border-radius: 50%;
134 |   }
135 |   
136 |   .cloud1 {
137 |     top:-150px;
138 |     z-index:-1;
139 |     animation: clouds 2s linear infinite;
140 |   }
141 |   
142 |   .cloud2 {
143 |     top:-70px;
144 |     opacity:.5;
145 |     transform: scale(.7);
146 |     animation: clouds 1.8s linear infinite;
147 |   }
148 |   
149 |   .cloud3 {
150 |     top:-100px;
151 |     opacity:.5;
152 |     transform: scale(.9);
153 |     animation: clouds 1.5s linear infinite;
154 |     z-index:-2;
155 |   }
156 |   
157 |   @keyframes clouds {  
158 |     from{ 
159 |       left:500px; 
160 |     }
161 |     to{ 
162 |       left: -500px; 
163 |     }
164 |   }


--------------------------------------------------------------------------------
/bouncy-image-group/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Bouncy Image Group</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <fieldset>
11 |         <label style="--_img: url(https://assets.codepen.io/2585/fiddle-leaf.jpeg)">
12 |           <input type="radio" name="images" value="Fiddle Leaf">
13 |         </label>
14 |         <label style="--_img: url(https://assets.codepen.io/2585/pink-princess.jpeg)">
15 |           <input type="radio" name="images" value="Pink Princess">
16 |         </label>
17 |         <label style="--_img: url(https://assets.codepen.io/2585/kara-eads-zcVArTF8Frs-unsplash.jpg)">
18 |           <input type="radio" name="images" value="Monstera" checked>
19 |         </label>
20 |         <label style="--_img: url(https://assets.codepen.io/2585/pothos.jpeg)">
21 |           <input type="radio" name="images" value="Pothos">
22 |         </label>
23 |         <label style="--_img: url(https://assets.codepen.io/2585/rubber-tree.webp)">
24 |           <input type="radio" name="images" value="Rubber Tree">
25 |         </label>
26 |       </fieldset>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/bouncy-image-group/style.css:
--------------------------------------------------------------------------------
 1 | @import "https://unpkg.com/open-props" layer(design.system);
 2 | 
 3 | @layer demo {
 4 |   fieldset {
 5 |     grid-template-columns: 
 6 |       var(--col-1, 1fr) 
 7 |       var(--col-2, 1fr) 
 8 |       var(--col-3, 1fr) 
 9 |       var(--col-4, 1fr) 
10 |       var(--col-5, 1fr)
11 |     ;
12 |     
13 |     @media (prefers-reduced-motion: no-preference) {
14 |       transition: grid-template-columns 2s var(--ease-spring-5);
15 |     }
16 |     
17 |     &:has(label:nth-child(1) > input:checked) {
18 |       --col-1: 5fr;
19 |       --col-2: 3fr;
20 |     }
21 |     &:has(label:nth-child(2) > input:checked) {
22 |       --col-1: 2fr;
23 |       --col-2: 5fr;
24 |       --col-3: 2fr;
25 |     }
26 |     &:has(label:nth-child(3) > input:checked) {
27 |       --col-2: 2fr;
28 |       --col-3: 5fr;
29 |       --col-4: 2fr;
30 |     }
31 |     &:has(label:nth-child(4) > input:checked) {
32 |       --col-3: 2fr;
33 |       --col-4: 5fr;
34 |       --col-5: 2fr;
35 |     }
36 |     &:has(label:nth-child(5) > input:checked) {
37 |       --col-4: 3fr;
38 |       --col-5: 5fr;
39 |     }
40 |     
41 |     > label {
42 |       background-image: var(--_img);
43 |       background-position: center;
44 |       background-size: auto 125%;
45 |     }
46 |   }
47 | }
48 | 
49 | @layer demo.support {
50 |   html {
51 |     background: var(--gradient-9);
52 |     block-size: 100%;
53 |   }
54 |   
55 |   body {
56 |     min-block-size: 100%;
57 |     display: grid;
58 |     place-content: center;
59 |     padding: var(--size-5);
60 |     gap: var(--size-5);
61 |   }
62 |   
63 |   fieldset {
64 |     inline-size: 80vw;
65 |     
66 |     display: grid;
67 |     grid-auto-flow: column;
68 |     grid-template-rows: 50vh;
69 |     gap: var(--size-3);
70 |     border: none;
71 |     
72 |     > label {
73 |       cursor: pointer;
74 |       border-radius: var(--radius-4);
75 |       
76 |       &:focus-within {
77 |         outline: 1px solid green;
78 |         outline-offset: 5px;
79 |       }
80 |       
81 |       > input {
82 |         opacity: 0;
83 |       }
84 |     }
85 |   }
86 | }


--------------------------------------------------------------------------------
/button-hover/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Button Hover</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <a href="#"><span>Contact Us</span></a>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/button-hover/style.css:
--------------------------------------------------------------------------------
 1 | @import "https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap";
 2 | 
 3 | * {
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: "Montserrat", sans-serif;
 8 | }
 9 | 
10 | body {
11 |     display: grid;
12 |     place-items: center;
13 |     min-height: 100vh;
14 |     background: #fff;
15 | }
16 | 
17 | a {
18 |     position: relative;
19 |     cursor: pointer;
20 |     background: #eee;
21 |     padding: 1rem 2rem;
22 |     margin: 0 20px;
23 |     font-size: 1.7rem;
24 |     display: inline-block;
25 |     color: #eee;
26 |     text-decoration: none;
27 |     overflow: hidden;
28 |     border: 2px solid #000;
29 |     border-radius: 5px;
30 | }
31 | 
32 | a span {
33 |     position: relative;
34 |     mix-blend-mode: difference;
35 | }
36 | 
37 | a::before {
38 |     content: "";
39 |     position: absolute;
40 |     top: 0;
41 |     left: 0;
42 |     width: 100%;
43 |     height: 100%;
44 |     background: #000;
45 |     transition: transform 0.3s;
46 |     transform: scaleX(0);
47 |     transform-origin: right;
48 | }
49 | 
50 | a:hover::before {
51 |     transform: scaleX(1);
52 |     transform-origin: left;
53 | }
54 | 


--------------------------------------------------------------------------------
/christmas-tree-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Christmas Tree Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div id="christmas-tree" class="christmas-tree">
11 |         <div class="tree">
12 |           <div class="tree-details"></div>
13 |         </div>
14 |         <div class="lights">
15 |           <div class="row-one"></div>
16 |           <div class="row-two"></div>
17 |         </div>
18 |         <div class="balls"></div>
19 |         <div class="star"></div>
20 |         <div class="shadow"></div>
21 |       </div>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/circular-progress-bar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Circular Progress Bar</title>
 7 |     <!--Google Fonts and Icons-->
 8 |     <link rel="stylesheet"
 9 |       href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|
10 |       Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"/>
11 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
12 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13 |     <link
14 |       href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
15 |       rel="stylesheet"/>
16 |     <link rel="stylesheet" href="style.css"/>
17 |   </head>
18 |   <body>
19 |     <div class="center">
20 |       <div class="progress">
21 |         <svg class="progress-bar" width="300" height="300">
22 |           <circle class="progress-circle" cx="150" cy="150" r="135"></circle>
23 |           <circle class="progress-circle" cx="150" cy="150" r="135"></circle>
24 |         </svg>
25 |         <div class="text">
26 |           75%
27 |           <span>Completed</span>
28 |         </div>
29 |       </div>
30 |     </div>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/circular-progress-bar/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   width: 100%;
 3 |   height: 100vh;
 4 |   margin: 0;
 5 |   padding: 0;
 6 | }
 7 | 
 8 | .center {
 9 |   width: 100%;
10 |   height: 100%;
11 |   display: flex;
12 |   align-items: center;
13 |   justify-content: center;
14 |   background: rgb(25, 25, 50);
15 | }
16 | 
17 | .progress {
18 |   width: 400px;
19 |   height: 400px;
20 |   background: rgb(69, 74, 110);
21 |   border-radius: 5mm;
22 |   display: flex;
23 |   align-items: center;
24 |   justify-content: center;
25 |   position: relative;
26 | }
27 | 
28 | circle {
29 |   fill: none;
30 | }
31 | 
32 | svg {
33 |   transform: rotate(-90deg);
34 | }
35 | 
36 | circle:nth-child(1) {
37 |   stroke: rgb(25, 26, 49);
38 |   stroke-width: 12px;
39 | }
40 | 
41 | circle:nth-child(2) {
42 |   stroke: white;
43 |   stroke-dasharray: 848;
44 |   stroke-dashoffset: calc(848 - (848 * 75) / 100);
45 |   stroke-linecap: round;
46 |   stroke-width: 16px;
47 |   animation: progress 1s ease;
48 | }
49 | 
50 | @keyframes progress {
51 |   from {
52 |     stroke-dashoffset: 848;
53 |   }
54 | }
55 | 
56 | .text {
57 |   position: absolute;
58 |   top: 50%;
59 |   left: 50%;
60 |   transform: translate(-50%, -50%);
61 |   font-family: poppins;
62 |   font-size: 60px;
63 |   color: rgb(255, 196, 0);
64 |   font-weight: 500;
65 |   display: flex;
66 |   align-items: center;
67 |   justify-content: center;
68 |   flex-direction: column;
69 | }
70 | 
71 | .text span {
72 |   font-size: 14px;
73 |   color: rgb(230, 230, 230);
74 | }


--------------------------------------------------------------------------------
/clipped-square-loader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Clipped Square Loader</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="loader"></div>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/clipped-square-loader/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--bg1: #05253a;
 3 | 	--bg2: #c41146;
 4 | 	--wrm: #d1faff;
 5 | 	--deg: -12deg;
 6 | 	--sz: 15vmin;
 7 | 	--spd: 2.05s;
 8 | }
 9 | 
10 | @property --deg {
11 | 	syntax: '<angle>';
12 | 	inherits: false;
13 | 	initial-value: -12deg;
14 | }
15 | 
16 | body {
17 | 	margin: 0;
18 | 	padding: 0;
19 | 	width: 100vw;
20 | 	height: 100vh;
21 | 	overflow: hidden;
22 | 	display: flex;
23 | 	align-items: center;
24 | 	justify-content: center;
25 | 	background: var(--bg1);
26 | }
27 | 
28 | .loader {
29 | 	width: var(--sz);
30 | 	height: var(--sz);
31 | 	background: conic-gradient(from var(--deg) at 50% 50%, var(--bg1) 0, var(--wrm) 25deg 50deg, var(--bg1) 51deg 100%);
32 | 	clip-path: polygon(0% 0%, 40% 0%, 50% 10%, 60% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 50% 90%, 40% 100%, 0% 100%, 0% 60%, 10% 50%, 0% 40%);
33 | 	animation: spin var(--spd) linear 0s infinite;
34 | 	display: flex;
35 | 	align-items: center;
36 | 	justify-content: center;
37 | 	position: relative;
38 | 	border-radius: calc(var(--sz) / 10);
39 | }
40 | 
41 | .loader:hover {
42 | 	animation: spin var(--spd) linear 0s infinite, rotation var(--spd) linear 0s infinite;
43 | }
44 | 
45 | .loader:before {
46 | 	content: "";
47 | 	position: absolute;
48 | 	width: calc(100% - calc(var(--sz) / 10));
49 | 	height: calc(100% - calc(var(--sz) / 10));
50 | 	border-radius: calc(var(--sz) / 20);
51 | 	background: var(--bg2);
52 | 	clip-path: polygon(0% 0%, 38% 0%, 50% 12%, 62% 0%, 100% 0%, 100% 38%, 88% 50%, 100% 62%, 100% 100%, 62% 100%, 50% 88%, 38% 100%, 0% 100%, 0% 62%, 12% 50%, 0% 38%);
53 | }
54 | 
55 | @keyframes spin {
56 | 	  0% { --deg: -12deg; }
57 | 	100% { --deg: 348deg; }
58 | }
59 | 
60 | @keyframes rotation {
61 | 	  0% { transform: rotate(0deg); }
62 | 	100% { transform: rotate(-360deg); }
63 | }


--------------------------------------------------------------------------------
/color-selector/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Color Selector</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="colors">
11 |         <div class="color active" onclick="selectcolor(this)" style="
12 |           --gradient: linear-gradient(to right bottom, #ffa51a, #ff910c, #ff7c07, #ff640c, #ff4816);">
13 |           <div></div>
14 |           <div></div>
15 |           <div></div>
16 |           <div></div>
17 |         </div>
18 |         <div class="color" onclick="selectcolor(this)" style="
19 |           --gradient: linear-gradient(135deg, #3cfd7f, #02fa99, #00f6af, #00f1c1, #12ebcf);">
20 |           <div></div>
21 |           <div></div>
22 |           <div></div>
23 |           <div></div>
24 |         </div>
25 |         <div class="color" onclick="selectcolor(this)" style="
26 |           --gradient: linear-gradient(to right bottom,  #2eadff, #3d83ff, #7e61ff);">
27 |           <div></div>
28 |           <div></div>
29 |           <div></div>
30 |           <div></div>
31 |         </div>
32 |         <div class="leftbar" style="--gradient: linear-gradient(to right bottom, #ffa51a, #ff910c, #ff7c07, #ff640c, #ff4816);"></div>
33 |         <div class="rightbar" style="--gradient: linear-gradient(to right bottom, #ffa51a, #ff910c, #ff7c07, #ff640c, #ff4816);"></div>
34 |       </div>
35 |     
36 |     <script>
37 |         if (location.pathname.match(/fullcpgrid/i) ? true : false) {
38 |         document.documentElement.style.fontSize = "32px"
39 |         }
40 | 
41 |         const colorsEl = document.querySelector(".colors")
42 | 
43 |         function selectcolor(el) {
44 |             if (el.classList.contains("active")) {return} 
45 |             document.querySelector(".active").classList.remove("active")
46 |             el.classList.add("active")
47 |             document.querySelectorAll(".leftbar").forEach(barEl => barEl.style.animation = "leftOut 400ms ease forwards")
48 |             document.querySelectorAll(".rightbar").forEach(barEl => barEl.style.animation = "rightOut 400ms ease forwards")
49 |   
50 |         const el1 = document.createElement("div");
51 |         el1.classList.add("leftbar");
52 |         el1.style.setProperty("--gradient", el.style.getPropertyValue("--gradient"))
53 |         colorsEl.appendChild(el1)
54 |         const el2 = document.createElement("div");
55 |         el2.classList.add("rightbar");
56 |         el2.style.setProperty("--gradient", el.style.getPropertyValue("--gradient"))
57 |         colorsEl.appendChild(el2)
58 |         }
59 |     </script>     
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/color-selector/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  2 | 
  3 | :root {
  4 |   font-family: "Inter";
  5 |   font-size: 16px;
  6 | }
  7 | 
  8 | *, *:before, *:after {
  9 |     -webkit-box-sizing: border-box;
 10 |     -moz-box-sizing: border-box;
 11 |     box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   margin: 0;
 16 |   height: 100vh;
 17 |   width: 100%;
 18 |   background: #8b8787;
 19 |   overflow: hidden;
 20 |   display: grid;
 21 |   place-content: center;
 22 | }
 23 | 
 24 | .colors {
 25 |   display: flex;
 26 |   justify-content: center;
 27 |   position: relative;
 28 |   background: #29292c;
 29 |   border-radius: 1rem;
 30 |   overflow: hidden;
 31 |   padding: 0.5rem 1.5rem;
 32 | }
 33 | .colors:before {
 34 |   position: absolute;
 35 |   content: "";
 36 |   inset: 0.0625rem;
 37 |   border-radius: 0.9375rem;
 38 |   background: #18181b;
 39 |   z-index: 2
 40 | }
 41 | 
 42 | .leftbar, .rightbar {
 43 |   position: absolute;
 44 |   content: "";
 45 |   width: 0.25rem;
 46 |   border-radius: 0.125rem;
 47 |   background: var(--gradient);
 48 |   transition: transform 300ms ease;
 49 |   z-index: 4;
 50 | }
 51 | .leftbar {
 52 |   inset: 0.65rem auto 0.65rem 0.5rem;
 53 |   animation: leftIn 400ms ease;
 54 | }
 55 | .rightbar {
 56 |   inset: 0.65rem 0.5rem 0.65rem auto;
 57 |   animation: rightIn 400ms ease;
 58 | }
 59 | 
 60 | @media (hover: hover) {
 61 |   .colors:hover .leftbar {
 62 |     transform: translateX(0.15rem)
 63 |   }
 64 |   .colors:hover .rightbar {
 65 |     transform: translateX(-0.15rem)
 66 |   }
 67 | }
 68 | @keyframes leftIn {
 69 |   from {
 70 |     transform: translateX(0.5rem) scale(0.9);
 71 |     opacity: 0;
 72 |   }
 73 | }
 74 | @keyframes rightIn {
 75 |   from {
 76 |     transform: translateX(-0.5rem) scale(0.9);
 77 |     opacity: 0;
 78 |   }
 79 | }
 80 | @keyframes leftOut {
 81 |   to {
 82 |     transform: translateX(-0.7rem) scale(1.1);
 83 |     opacity: 0;
 84 |   }
 85 | }
 86 | @keyframes rightOut {
 87 |   to {
 88 |     transform: translateX(0.7rem) scale(1.1);
 89 |     opacity: 0;
 90 |   }
 91 | }
 92 | 
 93 | 
 94 | .color {
 95 |   position: relative;
 96 |   width: 2.5rem;
 97 |   height: 2.5rem;
 98 |   border-radius: 50%;
 99 |   z-index: 6;
100 |   margin: 0.5rem;
101 | }
102 | .color > div {
103 |   position: absolute;
104 |   content: "";
105 |   border-radius: 50%;
106 | }
107 | .color > div:nth-child(1) {
108 |   border: 0.0625rem solid #29292c;
109 |   inset: 0rem;
110 |   opacity: 1;
111 |   transition: transform 450ms ease, opacity 450ms ease;
112 | }
113 | .color.active > div:nth-child(1) {
114 |   opacity: 0;
115 |   transform: scale(1.2);
116 |   transition: transform 300ms ease, opacity 300ms ease;
117 | }
118 | 
119 | .color > div:nth-child(2) {
120 |   background: var(--gradient);
121 |   inset: 0;
122 |   transform: scale(0.7);
123 |   transition: transform 450ms ease;
124 | }
125 | .color.active > div:nth-child(2) {
126 |   transform: scale(1);
127 |   transition: transform 300ms ease;
128 | }
129 | 
130 | .color > div:nth-child(3) {
131 |   background: #18181b;
132 |   inset: 0rem;
133 |   transform: scale(0);
134 |   transition: transform 300ms ease;
135 | }
136 | .color.active > div:nth-child(3) {
137 |   transform: scale(0.85);
138 |   transition: transform 300ms ease;
139 | }
140 | 
141 | .color > div:nth-child(4) {
142 |   background: var(--gradient);
143 |   inset: 0rem;
144 |   transform: scale(0);
145 |   transition: transform 300ms ease;
146 | }
147 | .color.active > div:nth-child(4) {
148 |   transform: scale(0.6);
149 |   transition: transform 375ms ease 75ms;
150 | }


--------------------------------------------------------------------------------
/colors-loader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Colors Loader</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div>
11 |     <svg version="1.1" id="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
12 | 	 width="100px" height="100px" viewBox="0 0 120 120" xml:space="preserve">
13 | 	<g>
14 | 	<defs>
15 | 		<path id="c_path" d="M87.417,78.237c-0.209-0.245-0.432-0.471-0.666-0.685c-0.47-0.428-0.984-0.787-1.528-1.075
16 | 			c-2.65-1.406-6.001-1.141-8.42,0.926h-0.002l-0.002-0.001c-3.945,3.373-9.066,5.413-14.666,5.413
17 | 			c-12.474,0-22.586-10.111-22.586-22.585s10.112-22.585,22.586-22.585c5.586,0,10.697,2.03,14.64,5.391l0.004-0.003
18 | 			c0.009,0.009,0.018,0.017,0.026,0.024c2.419,2.067,5.77,2.332,8.42,0.926c0.544-0.289,1.057-0.647,1.528-1.075
19 | 			c0.232-0.212,0.457-0.439,0.666-0.685c2.696-3.155,2.329-7.895-0.815-10.599c-0.007-0.004-0.015-0.011-0.02-0.016
20 | 			c-0.009-0.008-0.02-0.015-0.028-0.024c-6.575-5.609-15.101-8.997-24.421-8.997c-20.789,0-37.643,16.854-37.643,37.643
21 | 			c0,20.788,16.854,37.642,37.643,37.642c9.318,0,17.846-3.386,24.419-8.993c0.011-0.011,0.021-0.019,0.032-0.029
22 | 			c0.005-0.005,0.011-0.01,0.018-0.016C89.746,86.131,90.112,81.393,87.417,78.237z"/>
23 | 	</defs>
24 | 	<clipPath id="c_shape">
25 | 		<use xlink:href="#c_path"  overflow="visible"/>
26 | 	</clipPath>
27 | 	<g clip-path="url(#c_shape)">
28 | 		<rect fill="#3E2D54" width="40.289" height="120"/>
29 | 		<rect x="39.289" fill="#40587B" width="16.057" height="120"/>
30 | 		<rect x="54.346" fill="#4D90A3" width="16.057" height="120"/>
31 | 		<rect x="69.403" fill="#7CB694" width="16.057" height="120"/>
32 | 		<rect x="84.46" fill="#DCD280" width="35.54" height="120"/>
33 | 	</g>
34 | 	</g>
35 | 	</svg>
36 |     </div>         
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/colors-loader/style.css:
--------------------------------------------------------------------------------
 1 | #loader {
 2 |   position: absolute;
 3 |   left: 50%;
 4 |   top: 50%;
 5 |   margin: -50px -50px;
 6 | }
 7 |   
 8 | #c_shape {
 9 |   animation: loader 1.5s linear infinite;
10 |   transform-origin: 62.1px 60.3px;
11 |   animation-play-state: running!important;
12 | }
13 | 
14 | @keyframes loader {
15 |   100% { transform: rotate(360deg)}
16 | }
17 |   
18 | #loader rect {
19 |   animation: none 1.5s linear infinite;
20 |   display: inline-block;
21 |   animation-play-state: running!important;
22 | }
23 | 
24 | #loader rect:nth-child(1) {
25 |   animation-name: loader1;
26 | }
27 | 
28 | #loader rect:nth-child(2) {
29 |   animation-name: loader2;
30 | }
31 | 
32 | #loader rect:nth-child(3) {
33 |   animation-name: loader3;
34 | }
35 | 
36 | #loader rect:nth-child(4) {
37 |   animation-name: loader4;
38 | }
39 | 
40 | #loader rect:nth-child(5) {
41 |   animation-name: loader5;
42 | }
43 |   
44 | @keyframes loader1 {
45 |   0% { fill: #3E2C53;}
46 |   33.3333% { fill: #AC2B61;}
47 |   66.6666% { fill: #F3E3B4;}
48 | }
49 | 
50 | @keyframes loader2 {
51 |   0% { fill: #3F577A;}
52 |   33.3333% { fill: #E33D5F;}
53 |   66.6666% { fill: #BADCC8;}
54 | }
55 | 
56 | @keyframes loader3 {
57 |   0% { fill: #4C8FA2;}
58 |   33.3333% { fill: #EF7C5E;}
59 |   66.6666% { fill: #7FC7BF;}
60 | }
61 | 
62 | @keyframes loader4 {
63 |   0% { fill: #7BB594;}
64 |   33.3333% { fill: #F9C65F;}
65 |   66.6666% { fill: #EE7B73;}
66 | }
67 | 
68 | @keyframes loader5 {
69 |   0% { fill: #DBD17F;}
70 |   33.3333% { fill: #F5EF9E;}
71 |   66.6666% { fill: #D4385F;}
72 | }
73 |   
74 | html, body {
75 |   height: 100%;
76 |   font-family: 'Varela Round', sans-serif;
77 |   -webkit-font-smoothing: antialiased;
78 |   margin: 0;
79 | }


--------------------------------------------------------------------------------
/controlled-brightness-in-a-light/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>
 6 | 		Controlled Brightness in a Lamp
 7 | 	</title>
 8 | 	<link rel="stylesheet" type="text/css" href="style.css">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="lamp-wrapper">
13 |         <div class="lamp-rope"></div>
14 |         <div class="lamp">
15 |           <div class="lamp-part -top">
16 |               <div class="lamp-part -top-part"></div>
17 |               <div class="lamp-part -top-part right"></div>
18 |           </div>
19 |           <div class="lamp-part -body"></div>
20 |           <div class="lamp-part -body right"></div>
21 |           <div class="lamp-part -bottom"></div>
22 |           <div class="blub"></div>
23 |         </div>
24 |         <div class="wall-light-shadow"></div>
25 |       </div>
26 |       
27 |       <form oninput="body.setAttribute('data-light', slider.value)">
28 |         <div class="icon sun">
29 |           <div class="ray"></div>
30 |           <div class="ray"></div>
31 |           <div class="ray"></div>
32 |           <div class="ray"></div>
33 |           <div class="ray"></div>
34 |           <div class="ray"></div>
35 |           <div class="ray"></div>
36 |           <div class="ray"></div>
37 |         </div>
38 |         <input type="range" id="slider" value="0" min="0" max="10">
39 |       </form>
40 |       
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/drag-and-drop-list/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Drag and Drop List</title>
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <link
  9 |       href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
 10 |       rel="stylesheet"/>
 11 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 12 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 13 |     <link
 14 |       href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
 15 |       rel="stylesheet"/>
 16 |   </head>
 17 |   <body>
 18 |     <div class="center">
 19 |       <div class="container">
 20 |         <div class="item">
 21 |           <div class="name">Item 1</div>
 22 |           <span class="material-icons-round">drag_indicator</span>
 23 |         </div>
 24 |         <div class="item">
 25 |           <div class="name">Item 2</div>
 26 |           <span class="material-icons-round">drag_indicator</span>
 27 |         </div>
 28 |         <div class="item">
 29 |           <div class="name">Item 3</div>
 30 |           <span class="material-icons-round">drag_indicator</span>
 31 |         </div>
 32 |         <div class="item">
 33 |           <div class="name">Item 4</div>
 34 |           <span class="material-icons-round">drag_indicator</span>
 35 |         </div>
 36 |       </div>
 37 |     </div>
 38 |     <script>
 39 |       let isDragging = false;
 40 |       let currentItem = null;
 41 |       let containerOffsetY = 0;
 42 |       let initY = 0;
 43 | 
 44 |       const container = document.querySelector(".container");
 45 |       container.style.width = container.offsetWidth + "px";
 46 |       container.style.height = container.offsetHeight + "px";
 47 | 
 48 |       document.addEventListener("mousedown", (e) => {
 49 |         const item = e.target.closest(".item");
 50 |         if (item) {
 51 |           isDragging = true;
 52 |           currentItem = item;
 53 |           containerOffsetY = currentItem.offsetTop;
 54 |           currentItem.classList.add("dragging");
 55 |           document.body.style.userSelect = "none";
 56 |           currentItem.classList.add("insert-animation");
 57 |           currentItem.style.top = containerOffsetY + "px";
 58 |           initY = e.clientY;
 59 |         }
 60 |       });
 61 |       document.addEventListener("mousemove", (e) => {
 62 |         if (isDragging && currentItem) {
 63 |           currentItem.classList.remove("insert-animation");
 64 |           let newTop = containerOffsetY - (initY - e.clientY);
 65 |           if (newTop < -50) {
 66 |             newTop = -50;
 67 |           } else if (newTop > container.offsetHeight - 30) {
 68 |             newTop = container.offsetHeight - 30;
 69 |           }
 70 |           currentItem.style.top = newTop + "px";
 71 | 
 72 |           let itemSibilings = [
 73 |             ...document.querySelectorAll(".item:not(.dragging)"),
 74 |           ];
 75 |           let nextItem = itemSibilings.find((sibiling) => {
 76 |             return (
 77 |               e.clientY - container.getBoundingClientRect().top <=
 78 |               sibiling.offsetTop + sibiling.offsetHeight / 2
 79 |             );
 80 |           });
 81 | 
 82 |           itemSibilings.forEach((sibiling) => {
 83 |             sibiling.style.marginTop = "10px";
 84 |           });
 85 | 
 86 |           if (nextItem) {
 87 |             nextItem.style.marginTop = currentItem.offsetHeight + 20 + "px";
 88 |           }
 89 |           container.insertBefore(currentItem, nextItem);
 90 |         }
 91 |       });
 92 | 
 93 |       document.addEventListener("mouseup", () => {
 94 |         if (currentItem) {
 95 |           currentItem.classList.remove("dragging");
 96 |           currentItem.style.top = "auto";
 97 |           currentItem = null;
 98 |           isDragging = false;
 99 | 
100 |           document.body.style.userSelect = "auto";
101 |         }
102 | 
103 |         let itemSibilings = [
104 |           ...document.querySelectorAll(".item:not(.dragging)"),
105 |         ];
106 | 
107 |         itemSibilings.forEach((sibiling) => {
108 |           sibiling.style.marginTop = "10px";
109 |         });
110 |       });
111 |     </script>
112 |   </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/drag-and-drop-list/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     width: 100%;
 3 |     height: 100vh;
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     background: rgb(166, 255, 0);
 7 | }
 8 |   
 9 | .center {
10 |     width: 100%;
11 |     height: 100%;
12 |     display: flex;
13 |     align-items: center;
14 |     justify-content: center;
15 | }
16 | 
17 | .container {
18 |     position: relative;
19 |     display: flex;
20 |     align-items: center;
21 |     justify-content: center;
22 |     flex-direction: column;
23 | }
24 | 
25 | .item {
26 |     width: 350px;
27 |     height: 60px;
28 |     box-sizing: border-box;
29 |     display: flex;
30 |     align-items: center;
31 |     justify-content: center;
32 |     position: relative;
33 |     background: white;
34 |     border-radius: 3mm;
35 |     margin: 10px 0;
36 |     cursor: grab;
37 |     box-shadow: rgba(0, 0, 0, 0.19) 0px 5px 10px,
38 |       rgba(0, 0, 0, 0.23) 0px 3px 3px;
39 |     transition: margin 0.25s;
40 | }
41 | 
42 | .name {
43 |     width: 100%;
44 |     text-align: center;
45 |     font-family: poppins;
46 |     font-size: 18px;
47 |     font-weight: 500;
48 | }
49 | 
50 | .item span {
51 |     position: absolute;
52 |     top: 50%;
53 |     right: 10px;
54 |     transform: translate(0, -50%);
55 |     font-size: 30px;
56 |     color: rgb(180, 180, 180);
57 | }
58 | 
59 | .item.dragging {
60 |     position: absolute;
61 |     left: 50%;
62 |     transform: translate(-50%, 0) scale(1.15);
63 |     pointer-events: none;
64 |     z-index: 1000;
65 | }
66 | 
67 | .insert-animation {
68 |     animation: scaleit 0.1s ease-in-out;
69 | }
70 | 
71 | @keyframes scaleit {
72 |     from {
73 |       transform: translate(-50%, 0) scale(1);
74 |     }
75 | }
76 | 
77 | .item.dragging .name {
78 |     color: rgb(218, 83, 80);
79 | }
80 | 
81 | .item.dragging span {
82 |     color: rgb(214, 104, 103);
83 | }


--------------------------------------------------------------------------------
/dropdown-menu/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Dropdown Menu</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <nav class="navbar">
13 |             <ul class="nav-links">
14 |                 <li class="nav-link">
15 |                     <a href="#">Home</a>
16 |                 </li>
17 |                 <li class="nav-link services">
18 |                     <a href="#">Services
19 |                         <span class="material-icons dropdown-icon">
20 |                             arrow_drop_down
21 |                         </span>
22 |                     </a>
23 |                     <ul class="drop-down">
24 |                         <li>Service 1</li>
25 |                         <li>Service 2</li>
26 |                         <li>Service 3</li>
27 |                     </ul>
28 |                 </li>
29 |                 <li class="nav-link">
30 |                     <a href="#">About</a>
31 |                 </li>
32 |                 <li class="nav-link">
33 |                     <a href="#">Contact</a>
34 |                 </li>
35 |             </ul>
36 |         </nav>
37 |     </div>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/dropdown-menu/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 5 | }
 6 | 
 7 | .container {
 8 |     display: flex;
 9 |     font-size: 14px;
10 |     height: 100vh;
11 |     background: #880303;
12 | }
13 | 
14 | .navbar {
15 |     margin: auto;
16 |     padding: 0.5rem 1.5rem;
17 |     background: #fff;
18 |     border-radius: 1rem;
19 |     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
20 | }
21 | 
22 | .nav-links {
23 |     display: flex;
24 |     gap: 2rem;
25 | }
26 | 
27 | .nav-link, .drop-down li {
28 |     list-style: none;
29 |     height: 100%;
30 |     padding: 0.5rem 1rem;
31 |     font-weight: 600;
32 |     cursor: pointer;
33 | }
34 | 
35 | a {
36 |     text-decoration: none;
37 |     color: currentColor;
38 | }
39 | 
40 | .drop-down {
41 |     position: absolute;
42 |     padding: 0.5rem 0;
43 |     margin: 0.5rem -0.5rem;
44 |     background: antiquewhite;
45 |     color: black;
46 |     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
47 |     border-radius: 0.5rem;
48 |     font-size: 12px;
49 |     display: none;
50 | }
51 | 
52 | .nav-link:hover {
53 |     background-color: black;
54 |     color: #fff;
55 |     border-radius: 0.5rem;
56 | }
57 | 
58 | .services:hover .drop-down {
59 |     display: block;
60 | }
61 | 
62 | .services a {
63 |     display: flex;
64 |     align-items: center;
65 | }
66 | 
67 | .services .dropdown-icon {
68 |     font-size: 18px;
69 |     position: relative;
70 |     right: -5px;
71 |     transform: rotate(0deg);
72 |     transition: 0.3s ease-in-out all;
73 | }
74 | 
75 | .services:hover .dropdown-icon {
76 |     transform: rotate(180deg);
77 | }
78 | 
79 | .drop-down li:hover {
80 |     background: black;
81 |     color: #fff;
82 |     border-radius: 0.5rem;
83 | }


--------------------------------------------------------------------------------
/dual-search-bar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Dual Search Bar</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <!--Google Fonts and Icons-->
10 |     <link
11 |       href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
12 |       rel="stylesheet"
13 |     />
14 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
15 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16 |     <link
17 |       href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
18 |       rel="stylesheet"
19 |     />
20 |   </head>
21 |   <body>
22 |     <div class="center">
23 |       <div class="search-bar">
24 |         <span class="inputf">
25 |           <input
26 |             type="search"
27 |             id="search1"
28 |             placeholder="Job Title / Keywords"
29 |           />
30 |         </span>
31 |         <span class="inputf">
32 |           <input type="search" id="search2" placeholder="Location" />
33 |         </span>
34 |         <button type="button">Search</button>
35 |       </div>
36 |     </div>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/dual-search-bar/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     width: 100%;
 3 |     height: 100vh;
 4 |     margin: 0;
 5 |     padding: 0;
 6 | }
 7 | 
 8 | .center {
 9 |     width: 100%;
10 |     height: 100%;
11 |     display: flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     background: rgb(161, 126, 0);
15 | }
16 | 
17 | .search-bar {
18 |     width: fit-content;
19 |     height: fit-content;
20 |     background: white;
21 |     display: flex;
22 |     align-items: center;
23 |     justify-content: center;
24 |     border: 0.5mm solid rgb(3, 35, 67);
25 |     border-radius: 1mm;
26 |     padding: 7px 10px;
27 | }
28 |   
29 | .inputf {
30 |     width: fit-content;
31 |     height: fit-content;
32 |     position: relative;
33 | }
34 | 
35 | .search-bar input {
36 |     width: 225px;
37 |     flex-grow: 1;
38 |     height: 35px;
39 |     box-sizing: border-box;
40 |     padding: 10px 25px;
41 |     background: transparent;
42 |     font-family: poppins;
43 |     outline: none;
44 |     border: none;
45 |     position: relative;
46 | }
47 |  
48 | #search1 {
49 |     border-right: 0.5mm solid rgba(3, 35, 67, 0.5);
50 |     margin-right: 10px;
51 | }
52 | 
53 |   
54 | .inputf::before {
55 |     content: "search";
56 |     font-family: "Material Icons";
57 |     font-size: 20px;
58 |     color: rgba(0, 0, 0, 0.7);
59 |     position: absolute;
60 |     top: 50%;
61 |     left: -3px;
62 |     transform: translate(0, -50%) rotateY(180deg);
63 |     z-index: 1;
64 | }
65 | 
66 | .inputf:nth-child(2)::before {
67 |     content: "location_on";
68 | }
69 | 
70 | .search-bar button {
71 |     width: 80px;
72 |     height: 35px;
73 |     font-family: poppins;
74 |     background: rgb(41, 41, 41);
75 |     color: white;
76 |     outline: none;
77 |     border: none;
78 |     border-radius: 1mm;
79 |     font-weight: 500;
80 |     cursor: pointer;
81 |     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
82 | }
83 | 
84 | input[type="search"]::-webkit-search-cancel-button {
85 |     appearance: none;
86 |     position: relative;
87 |     right: -10px;
88 |     width: 16px;
89 |     height: 16px;
90 |     background-image: url(../images/cancel.svg);
91 |     background-repeat: no-repeat;
92 |     background-position: center;
93 |     background-size: 16px 16px;
94 |     cursor: pointer;
95 | }


--------------------------------------------------------------------------------
/expanding-text-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>
 6 |         Expanding Text Animation
 7 |     </title>
 8 |     <link rel="stylesheet" type="text/css" href="style.css">
 9 | </head>
10 | <body>  
11 |     <span data-splitting="chars">CodeCrafters!!</span>
12 | </body>  
13 | </html>
14 | 


--------------------------------------------------------------------------------
/expanding-text-animation/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
 2 | 
 3 | * {
 4 | 	margin: 0;
 5 | 	padding: 0;
 6 | 	box-sizing: border-box;
 7 | 	font-family: "Inter", sans-serif;
 8 | }
 9 | 
10 | body {
11 | 	display: flex;
12 | 	align-items: center;
13 | 	justify-content: center;
14 | 	min-height: 100vh;
15 | 	background: #eee;
16 | }
17 | 
18 | span {
19 | 	font-size: 10vw;
20 | 	text-decoration: none;
21 | 	font-weight: 100;
22 | 	letter-spacing: -3px;
23 | 	animation: weight 2s infinite;
24 | 	animation-delay: calc(var(--char-index) * 150ms);
25 | }
26 | 
27 | @keyframes weight {
28 | 	from {
29 | 		font-weight: 100;
30 | 	}
31 | 
32 | 	50% {
33 | 		font-weight: 900;
34 | 	}
35 | 
36 | 	to {
37 | 		font-weight: 100;
38 | 	}
39 | }
40 | 


--------------------------------------------------------------------------------
/fingerprint-login-animation/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     align-items: center;
  3 |     display: flex;
  4 |     font-family: sans-serif;
  5 |     font-weight: 600;
  6 |     font-size: 26px;
  7 |     height: 100vh;
  8 |     justify-content: center;
  9 |     margin: 0;
 10 |   }
 11 |   .container {
 12 |     align-items: center;
 13 |     background: #000;
 14 |     border-radius: 40px;
 15 |     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 16 |     display: flex;
 17 |     height: 80px;
 18 |     justify-content: center;
 19 |     position: relative;
 20 |     width: 200px;
 21 |   }
 22 |   .text {
 23 |     color: white;
 24 |     position: absolute;
 25 |     transition: opacity 300ms;
 26 |     user-select: none;
 27 |     -moz-user-select: none;
 28 |   }
 29 |   .fingerprint {
 30 |     /* height: 80px; */
 31 |     left: -8px;
 32 |     opacity: 0;
 33 |     position: absolute;
 34 |     stroke: #777;
 35 |     top: -9px;
 36 |     transition: opacity 1ms;
 37 |   }
 38 |   .fingerprint-active {
 39 |     stroke: #fff;
 40 |   }
 41 |   .fingerprint-out {
 42 |     opacity: 1;
 43 |   }
 44 |   .odd {
 45 |     stroke-dasharray: 0px 50px;
 46 |     stroke-dashoffset: 1px;
 47 |     transition: stroke-dasharray 1ms;
 48 |   }
 49 |   .even {
 50 |     stroke-dasharray: 50px 50px;
 51 |     stroke-dashoffset: -41px;
 52 |     transition: stroke-dashoffset 1ms;
 53 |   }
 54 |   .ok {
 55 |     opacity: 0;
 56 |   }
 57 |   .active.container {
 58 |     animation: 6s Container;
 59 |   }
 60 |   .active .text {
 61 |     opacity: 0;
 62 |     animation: 6s Text forwards;
 63 |   }
 64 |   .active .fingerprint {
 65 |     opacity: 1;
 66 |     transition: opacity 300ms 200ms;
 67 |   }
 68 |   .active .fingerprint-base .odd {
 69 |     stroke-dasharray: 50px 50px;
 70 |     transition: stroke-dasharray 800ms 100ms;
 71 |   }
 72 |   .active .fingerprint-base .even {
 73 |     stroke-dashoffset: 0px;
 74 |     transition: stroke-dashoffset 800ms;
 75 |   }
 76 |   .active .fingerprint-active .odd {
 77 |     stroke-dasharray: 50px 50px;
 78 |     transition: stroke-dasharray 2000ms 1500ms;
 79 |   }
 80 |   .active .fingerprint-active .even {
 81 |     stroke-dashoffset: 0px;
 82 |     transition: stroke-dashoffset 2000ms 1300ms;
 83 |   }
 84 |   .active .fingerprint-out {
 85 |     opacity: 0;
 86 |     transition: opacity 300ms 4100ms;
 87 |   }
 88 |   .active .ok {
 89 |     opacity: 1;
 90 |     animation: 6s Ok forwards;
 91 |   }
 92 |   @keyframes Container {
 93 |     0% { width: 200px }
 94 |     6% { width: 80px }
 95 |     71% { transform: scale(1); }
 96 |     75% { transform: scale(1.2); }
 97 |     77% { transform: scale(1); }
 98 |   
 99 |     94% { width: 80px }
100 |     100% { width: 200px }
101 |   }
102 |   @keyframes Text {
103 |     0% { opacity: 1; transform: scale(1); }
104 |     6% { opacity: 0; transform: scale(0.5); }
105 |   
106 |     94% { opacity: 0; transform: scale(0.5); }
107 |     100% { opacity: 1; transform: scale(1); }
108 |   }
109 |   @keyframes Ok {
110 |     0% { opacity: 0 }
111 |     70% { opacity: 0; transform: scale(0); }
112 |     75% { opacity: 1; transform: scale(1.1); }
113 |     77% { opacity: 1; transform: scale(1); }
114 |     92% { opacity: 1; transform: scale(1); }
115 |     96% { opacity: 0; transform: scale(0.5); }
116 |     100% { opacity: 0 }
117 |   }


--------------------------------------------------------------------------------
/flipping/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Flipping</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="loading">
11 |         <div class="letter">
12 |             <div>L</div>
13 |             <div class="back">L</div>
14 |         </div>
15 |         <div class="letter">
16 |             <div>o</div>
17 |             <div class="back">o</div>
18 |         </div>
19 |         <div class="letter">
20 |             <div>a</div>
21 |             <div class="back">a</div>
22 |         </div>
23 |         <div class="letter">
24 |             <div>d</div>
25 |             <div class="back">d</div>
26 |         </div>
27 |         <div class="letter">
28 |             <div>i</div>
29 |             <div class="back">i</div>
30 |         </div>
31 |         <div class="letter">
32 |             <div>n</div>
33 |             <div class="back">n</div>
34 |         </div>
35 |         <div class="letter">
36 |             <div>g</div>
37 |             <div class="back">g</div>
38 |         </div>
39 |         <div class="letter dot">
40 |             <div>.</div>
41 |             <div class="back">.</div>
42 |         </div>
43 |         <div class="letter dot">
44 |             <div>.</div>
45 |             <div class="back">.</div>
46 |         </div>
47 |         <div class="letter dot">
48 |             <div>.</div>
49 |             <div class="back">.</div>
50 |         </div>
51 |     </div>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/flipping/style.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     padding: 0;
 3 |     height: 100%;
 4 |     display: table;
 5 |     margin: 0 auto;
 6 |     font-size: 52px;
 7 |     font-family: Monaco, Consolas, "Lucida Console", monospace;
 8 |     background-color: #012501;
 9 |     background-image: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/kindajean.png");
10 | }
11 | 
12 | .loading {
13 |     text-align: center;
14 |     display: table-cell;
15 |     vertical-align: middle;
16 |     text-shadow: grey 1px 1px 1px;
17 | }
18 | 
19 | .letter {
20 |     float: left;
21 |     width: 35px;
22 |     height: 60px;
23 |     position: relative;
24 |     -webkit-animation: flip 2s infinite;
25 |     -webkit-transform-style: preserve-3d;
26 |     -webkit-transition: -webkit-transform 1s;
27 | }
28 | 
29 | .letter div {
30 |     width: 100%;
31 |     height: 100%;
32 |     position: absolute;
33 |     -webkit-transform: translate(0);
34 |     -webkit-backface-visibility: hidden;
35 |     -webkit-animation: color 8s infinite;
36 | }
37 | 
38 | .letter div.back { -webkit-transform: rotateY(180deg); }
39 | 
40 | .letter:nth-child(1), .letter:nth-child(1) div { -webkit-animation-delay: 0.125s; }
41 | .letter:nth-child(2), .letter:nth-child(2) div { -webkit-animation-delay: 0.25s; }
42 | .letter:nth-child(3), .letter:nth-child(3) div { -webkit-animation-delay: 0.375s; }
43 | .letter:nth-child(4), .letter:nth-child(4) div { -webkit-animation-delay: 0.5s; }
44 | .letter:nth-child(5), .letter:nth-child(5) div { -webkit-animation-delay: 0.625s; }
45 | .letter:nth-child(6), .letter:nth-child(6) div { -webkit-animation-delay: 0.75s; }
46 | .letter:nth-child(7), .letter:nth-child(7) div { -webkit-animation-delay: 0.875s; }
47 | .letter:nth-child(8), .letter:nth-child(8) div { -webkit-animation-delay: 1s; }
48 | .letter:nth-child(9), .letter:nth-child(9) div { -webkit-animation-delay: 1.125s; }
49 | .letter:nth-child(10), .letter:nth-child(10) div { -webkit-animation-delay: 1.25s; }
50 | 
51 | @-webkit-keyframes flip {
52 |     0% { -webkit-transform: rotateY(0deg) translate(0); }
53 |     40%, 100% { -webkit-transform: rotateY(180deg) translate(0); }
54 | }
55 | 
56 | @-webkit-keyframes color {
57 |     0% { color: #88E488; }
58 |     25% { color: #EEADB7; }
59 |     50% { color: #90C9DB; }
60 |     75% { color: #F3B034; }
61 |     100% { color: #828282; }
62 | }


--------------------------------------------------------------------------------
/football-preloader/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     border: 0;
  3 |     box-sizing: border-box;
  4 |     margin: 0;
  5 |     padding: 0;
  6 |   }
  7 |   
  8 |   :root {
  9 |     --hue: 210;
 10 |     --bg: hsl(var(--hue), 10%, 85%);
 11 |     --fg: hsl(var(--hue), 10%, 15%);
 12 |     --red: hsl(344, 75%, 40%);
 13 |     --white: hsl(0, 0%, 100%);
 14 |     --blue: hsl(213, 81%, 21%);
 15 |     --trans-dur: 0.3s;
 16 |     font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
 17 |   }
 18 |   
 19 |   body {
 20 |     background-color: var(--bg);
 21 |     color: var(--fg);
 22 |     display: flex;
 23 |     font: 1em/1.5 sans-serif;
 24 |     height: 100vh;
 25 |     transition: background-color var(--trans-dur), color var(--trans-dur);
 26 |   }
 27 |   
 28 |   .pl {
 29 |     display: block;
 30 |     margin: auto;
 31 |     width: 14em;
 32 |     height: auto;
 33 |     --dur: 3s;
 34 |   
 35 |     /* Debugging styles */
 36 |     /* Uncomment below if debugging is needed */
 37 |     /* 
 38 |     --delay: calc(var(--dur) * 0);
 39 |     outline: 1px solid;
 40 |     */
 41 |   }
 42 |   
 43 |   .pl__ball,
 44 |   .pl__ball-shadow,
 45 |   .pl__ball-texture,
 46 |   .pl__stripe,
 47 |   .pl__stripe-dot,
 48 |   .pl__stripe-rotate {
 49 |     animation: animation-name var(--dur) linear infinite;
 50 |   }
 51 |   
 52 |   .pl__ball {
 53 |     animation-name: ball;
 54 |   }
 55 |   
 56 |   .pl__ball-shadow {
 57 |     animation-name: ball-shadow;
 58 |   }
 59 |   
 60 |   .pl__ball-texture {
 61 |     animation-name: ball-texture;
 62 |   }
 63 |   
 64 |   .pl__stripe {
 65 |     animation-name: stripe;
 66 |   }
 67 |   
 68 |   .pl__stripe--1 {
 69 |     animation-name: stripe1;
 70 |   }
 71 |   
 72 |   .pl__stripe--2 {
 73 |     animation-name: stripe2;
 74 |   }
 75 |   
 76 |   .pl__stripe--3 {
 77 |     animation-name: stripe3;
 78 |   }
 79 |   
 80 |   .pl__stripe-dot {
 81 |     animation-name: stripe-dot;
 82 |   }
 83 |   
 84 |   .pl__stripe-rotate {
 85 |     animation-name: stripe-rotate;
 86 |   }
 87 |   
 88 |   /* Keyframe Animations */
 89 |   @keyframes ball {
 90 |     from {
 91 |       transform: rotate(0) translate(0, -15.75px);
 92 |     }
 93 |     to {
 94 |       transform: rotate(1turn) translate(0, -15.75px);
 95 |     }
 96 |   }
 97 |   
 98 |   @keyframes ball-shadow {
 99 |     from {
100 |       transform: rotate(0);
101 |     }
102 |     to {
103 |       transform: rotate(-1turn);
104 |     }
105 |   }
106 |   
107 |   @keyframes ball-texture {
108 |     from {
109 |       transform: translate(-16px, 0);
110 |     }
111 |     to {
112 |       transform: translate(48px, 0);
113 |     }
114 |   }
115 |   
116 |   @keyframes stripe-dot {
117 |     from {
118 |       r: 1.25px;
119 |     }
120 |     16.67%, to {
121 |       r: 0;
122 |     }
123 |   }
124 |   
125 |   @keyframes stripe-rotate {
126 |     from {
127 |       transform: rotate(0);
128 |     }
129 |     to {
130 |       transform: rotate(1turn);
131 |     }
132 |   }
133 |   
134 |   @keyframes stripe1 {
135 |     from,
136 |     to {
137 |       stroke-dashoffset: -114.7 * 0.835;
138 |     }
139 |     50% {
140 |       animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
141 |       stroke-dashoffset: -114.7 * 0.66;
142 |     }
143 |   }
144 |   
145 |   @keyframes stripe2 {
146 |     from,
147 |     to {
148 |       stroke-dashoffset: -106.8 * 0.75;
149 |     }
150 |     50% {
151 |       animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
152 |       stroke-dashoffset: -106.8 * 0.5;
153 |     }
154 |   }
155 |   
156 |   @keyframes stripe3 {
157 |     from,
158 |     to {
159 |       stroke-dashoffset: -99 * 0.735;
160 |     }
161 |     50% {
162 |       animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
163 |       stroke-dashoffset: -99 * 0.49;
164 |     }
165 |   }
166 |   


--------------------------------------------------------------------------------
/glowing-border-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Glowing Border Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <img src="https://picsum.photos/id/58/300/300" alt="a lighthouse">
11 |     <img src="https://picsum.photos/id/61/300/300" class="alt" alt="an old city">
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/glowing-border-animation/style.css:
--------------------------------------------------------------------------------
 1 | @property --a {
 2 |   syntax: "<angle>";
 3 |   inherits: false;
 4 |   initial-value: 0deg; 
 5 | }
 6 | @property --i {
 7 |   syntax: "<number>";
 8 |   inherits: false;
 9 |   initial-value: 0; 
10 | }
11 | img {
12 |   width: 230px;
13 |   aspect-ratio: 1;
14 |   border-radius: 30px;
15 |   border: 5px solid #ccc;
16 |   padding: 10px; /* control the gap */
17 |   mask: 
18 |     conic-gradient(#000 0 0) content-box,
19 |     linear-gradient(calc(mod(var(--a),180deg)*var(--i) + var(--_a,45deg)),
20 |       #0000 30%,#000 40% 60%,#0000 70%) subtract,
21 |     conic-gradient(#000 0 0) padding-box;
22 |   transition: --i .5s,--a 0s .5s;
23 |   cursor: pointer;
24 | }
25 | img.alt {
26 |   --_a: -45deg;
27 | }
28 | img:hover {
29 |   --i: 1;
30 |   --a: 15turn; 
31 |   transition: --i 0s,--a 30s linear;
32 | }
33 | 
34 | 
35 | body {
36 |   margin: 0;
37 |   min-height: 100vh;
38 |   display: grid;
39 |   place-content: center;
40 |   grid-auto-flow: column;
41 |   gap: 50px;
42 |   background: #000;
43 | }


--------------------------------------------------------------------------------
/glowy-button/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title> Glowy Button</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <button>CodeCrafters</button>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/glowy-button/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --hue: 310;
 3 |   --hue-adjust: 135;
 4 |   --hue-2: calc(var(--hue) + var(--hue-adjust));
 5 |   --page-background: oklch(10% 0.0666 var(--hue));
 6 | }
 7 | 
 8 | button {
 9 |   --button-background: oklch(20% 0.0666 var(--hue));
10 |   --text-base: oklch(45% 0.175 var(--hue));
11 |   --text-hover: oklch(95% 0.145 calc(var(--hue) + 30));
12 |   --shadow-start: oklch(95% 0.145 var(--hue-2));
13 |   --shadow-end: oklch(60% 0.29 var(--hue));
14 |   --shadow-inner: 60% 0.29 var(--hue);
15 | 
16 |   all: unset;
17 |   color: var(--text-base);
18 |   font: 700 1.125rem/1.2 Raleway, sans-serif;
19 |   letter-spacing: 0.08em;
20 |   text-transform: uppercase;
21 |   text-align: center;
22 |   padding: 0.85em;
23 |   max-width: 100%;
24 |   width: 12em;
25 |   background-color: var(--button-background);
26 |   background-clip: padding-box;
27 |   border: 5px solid var(--text-base);
28 |   border-radius: 2em;
29 |   cursor: pointer;
30 |   position: relative;
31 |   transition: 0.25s ease-out;
32 | 
33 |   &::before,
34 |   &::after {
35 |       content: "";
36 |       border-radius: inherit;
37 |       transition: inherit;
38 |       position: absolute;
39 |       inset: 0;
40 |       pointer-events: none;
41 |   }
42 | 
43 |   &::before {
44 |       inset: -0.2em;
45 |       z-index: -1;
46 |       background: linear-gradient(var(--shadow-start), var(--shadow-end));
47 |       filter: blur(1.2em) saturate(1.2);
48 |       transform-origin: bottom;
49 |       transform: scaleY(0.5);
50 |       opacity: 0;
51 |   }
52 | 
53 |   &::after {
54 |       box-shadow: inset 0 0 0 1px #fff,
55 |                   0 0 0 4px hsla(0deg, 0%, 100%, 0.5),
56 |                   1px 1px 0 4px #fff;
57 |       mix-blend-mode: overlay;
58 |       opacity: 0;
59 |   }
60 | 
61 |   &:hover,
62 |   &:focus {
63 |       color: var(--text-hover);
64 |       border-color: transparent;
65 |       box-shadow: inset 0 1.4em 0 oklch(var(--shadow-inner) / 0.1),
66 |                   inset 0 0 1.4em oklch(var(--shadow-inner) / 0.32),
67 |                   0 1px 1px oklch(var(--shadow-inner) / 0.32);
68 | 
69 |       &::before,
70 |       &::after {
71 |           transform: none;
72 |           opacity: 1;
73 |       }
74 |   }
75 | }
76 | 
77 | body {
78 |   background: var(--page-background);
79 |   display: flex;
80 |   min-height: 100vh;
81 |   justify-content: center;
82 |   align-content: center;
83 |   align-items: center;
84 | }
85 | 


--------------------------------------------------------------------------------
/haunted-manor/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Haunted Manor</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="spooky-house">
11 |         <div class="content-circle">
12 |           <div class="house">
13 |             <div class="porch"></div>
14 |             <div class="first-floor"></div>
15 |             <div class="second-floor"></div>
16 |             <div class="roof"></div>
17 |             <div class="door"></div>
18 |             <div class="small-windows"></div>
19 |             <div class="big-window"></div>
20 |             <div class="frames"></div>
21 |           </div>
22 |           <div class="moon"></div>
23 |           <div class="rain">
24 |             <div class="dropOne"></div>
25 |             <div class="dropTwo"></div>
26 |             <div class="dropThree"></div>
27 |             <div class="dropFour"></div>
28 |             <div class="dropFive"></div>
29 |           </div>
30 |         </div>
31 |       </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/heart-beat-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>
 6 | 		Heart Beat Animation
 7 | 	</title>
 8 | 
 9 | 	<link rel="stylesheet" type="text/css" href="style.css">
10 | </head>
11 | <body>
12 | 
13 | <section>
14 | <div class="container">
15 | 	<div class="content">
16 | 		<div class="heart-rate">
17 | 			 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
18 |              x="0px" y="0px" width="150px" height="73px" viewBox="0 0 150 73" enable-background="new 0 0 150 73" xml:space="preserve">
19 |     <polyline fill="none" stroke="#009B9E" stroke-width="3" stroke-miterlimit="10" 
20 |     points="0,45.486 38.514,45.486 44.595,33.324 50.676,45.486 57.771,45.486 62.838,55.622 71.959,9 80.067,
21 |     63.729 84.122,45.486 97.297,45.486 103.379,40.419 110.473,45.486 150,45.486"
22 |     />
23 |   </svg>
24 | 
25 |   <div class="fade-in"> </div>
26 | 
27 |   <div class="fade-out"> </div>
28 | 		</div>
29 | 		
30 | 	</div>
31 | 	
32 | </div> 
33 | 
34 | </section>
35 | 
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/heart-beat-animation/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 | 	background: #000 none repeat scroll 0 0;
 3 | 	color: #999;
 4 | 	font-size: 100%;
 5 | 	line-height: 24px;
 6 | 	margin: 0;
 7 | 	padding: 0;
 8 | 	font-family: sans-serif;
 9 | }
10 | 
11 | .container{
12 |     display: flex;
13 |     justify-content: center;
14 |     align-items: center;
15 |     height: 100vh;
16 | }
17 | 
18 | .heart-rate{
19 | 	width: 150px;
20 | 	height: 73px;
21 | 	position: relative;
22 | 	margin: 20px auto;
23 | }
24 | 
25 | .fade-in{
26 | position: absolute;
27 | width: 100%;
28 | height: 100%;
29 | background-color: #000;
30 | top: 0;
31 | right: 0;
32 | animation: heartRateIn 2.5s linear infinite;
33 | }
34 | 
35 | .fade-out{
36 | position: absolute;
37 | width: 120%;
38 | height: 100%;
39 | background-color: #000;
40 | top: 0;
41 | right: -120%;
42 | animation: heartRateOut 2.5s linear infinite;
43 | background: rgba(0, 0, 0, 1);
44 | background: linear-gradient(to right,rgba(0,0,0,1)0%, rgba(0,0,0,1)80%,rgba(0,0,0,0)100%);
45 | }
46 | 
47 | @keyframes heartRateIn{
48 | 	0%{
49 | 		width: 100%;
50 | 	}
51 | 	50%{
52 | 		width: 0;
53 | 	}
54 | 	100%{
55 | 		width: 0;
56 | 	}
57 | }
58 | @keyframes heartRateOut{
59 | 	0%{
60 | 		left: -120%;
61 | 	}
62 | 	30%{
63 | 		left: -120%;
64 | 	}
65 | 	100%{
66 | 		left: 0;
67 | 	}
68 | 
69 | }
70 | 


--------------------------------------------------------------------------------
/hover-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Hover Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <main>
11 |         <h1 class='text'>NIKE</h1>
12 |         <h1 class='stroke'>NIKE</h1>
13 |         <img class='image' src='https://i.imgur.com/QcDIWD0.png'>
14 |       </main>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/hover-animation/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   height: 100vh;
 9 |   display: grid;
10 |   place-items: center;
11 |   overflow: hidden;
12 | }
13 | 
14 | main {
15 |   position: relative;
16 |   display: grid;
17 |   place-items: center;
18 | 
19 |   & h1 {
20 |     font: 550 5.5rem 'arial-black',impact,sans-serif;
21 |     cursor: pointer; 
22 |   }
23 | 
24 |   & :where(h1, .image) {
25 |     grid-column: 1;
26 |     grid-row: 1;
27 |   }
28 | }
29 | 
30 | .stroke {
31 |   z-index: 10;
32 |   -webkit-text-stroke-width: 0.25rem;
33 |   -webkit-text-stroke-color: black;
34 |   -webkit-text-fill-color: transparent;
35 | 
36 |   &:hover + .image {
37 |     opacity: 1;
38 |     transform: translateX(0) rotate(-25deg);
39 |     transition: transform 1s, opacity 0.5s;
40 |   }
41 | }
42 | 
43 | .image {
44 |   width: 400px;
45 |   opacity: 0;
46 |   transform: translateX(150%);
47 |   transition: transform 1s, opacity 0.5s 0.25s;
48 | }


--------------------------------------------------------------------------------
/image-corner-hover-effect/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Image Corner Hover Effect</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <figure><img src="https://picsum.photos/id/133/200/200" alt="cars"></figure>
11 |     <figure class="alt" style="--g: 20px;--b:5px;--s: 80px;--c:#6A4A3C;">
12 |     <img src="https://picsum.photos/id/183/200/200" alt="van"></figure>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/image-corner-hover-effect/style.css:
--------------------------------------------------------------------------------
 1 | figure {
 2 | 	--b: 8px; /* border thickness */
 3 | 	--s: 60px; /* size of the corner */
 4 | 	--g: 14px; /* the gap */
 5 | 	--c: #edc951;
 6 | 	position: relative;
 7 | 	line-height: 0;
 8 | 	padding: var(--g);
 9 | }
10 | 
11 | figure::before, figure::after {
12 | 	content: "";
13 | 	box-sizing: border-box;
14 | 	position: absolute;
15 | 	border: solid var(--c);
16 | 	transition: transform 0.3s var(--speed, 0.3s), inset 0.3s calc(0.3s - var(--speed, 0.3s));
17 | }
18 | 
19 | figure::before {
20 | 	inset: 0 calc(100% - var(--s)) calc(100% - var(--s)) 0;
21 | 	border-width: var(--b) 0 0 var(--b);
22 | 	transform: translate(calc(var(--b) * -1), calc(var(--b) * -1));
23 | }
24 | 
25 | figure::after {
26 | 	inset: calc(100% - var(--s)) 0 0 calc(100% - var(--s));
27 | 	border-width: 0 var(--b) var(--b) 0;
28 | 	transform: translate(var(--b), var(--b));
29 | }
30 | 
31 | figure.alt, figure.alt > * {
32 | 	transform: scaleX(-1);
33 | }
34 | 
35 | figure:hover::before, figure:hover::after {
36 | 	--speed: 0s;
37 | 	--s: 100%;
38 | 	transform: translate(0, 0);
39 | }
40 | 
41 | body {
42 | 	margin: 0;
43 | 	min-height: 100vh;
44 | 	display: flex;
45 | 	align-items: center;
46 | 	justify-content: center;
47 | 	gap: 33px;
48 | 	background: #90d1bd;
49 | }
50 | 


--------------------------------------------------------------------------------
/image-overlay-hover-effect/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Image Overlay Hover Effect</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <main class="container">
11 |         <article class="item">
12 |           <figure class="item-image">
13 |             <img src="https://assets.adidas.com/images/w_600,f_auto,q_auto/8ea5dbd147604771846f4538dc380bc9_9366/Samba_OG_Shoes_White_ID0492_01_standard.jpg" 
14 |             alt="Adidas Limited Edition Shoes">
15 |           </figure>
16 |           <div class="item-text">
17 |             <h2>Adidas</h2>
18 |             <p>Limited Edition</p>
19 |             <button>Buy now</button>
20 |           </div>
21 |         </article>
22 |       </main>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/image-overlay-hover-effect/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --background-color: #071f10;
  3 |     --text-color: #fff;
  4 |     --transition-duration: 1.2s;
  5 |     --font-family: "Open Sans", sans-serif;
  6 |   }
  7 |   
  8 |   * {
  9 |     margin: 0;
 10 |     padding: 0;
 11 |     box-sizing: border-box;
 12 |   }
 13 |   
 14 |   body {
 15 |     background-color: var(--background-color);
 16 |     font-family: var(--font-family);
 17 |   }
 18 |   
 19 |   .container {
 20 |     height: 100vh;
 21 |     display: grid;
 22 |     place-items: center;
 23 |   }
 24 |   
 25 |   .item {
 26 |     position: relative;
 27 |     overflow: hidden;
 28 |   }
 29 |   
 30 |   .item::after {
 31 |     content: '';
 32 |     display: block;
 33 |     background-color: var(--background-color);
 34 |     opacity: 0.8;
 35 |     position: absolute;
 36 |     top: 0;
 37 |     left: 0;
 38 |     bottom: 0;
 39 |     right: 0;
 40 |     transform: scale(2) translate(-65%, -65%) rotate(45deg);
 41 |     transition: transform var(--transition-duration) ease-in-out;
 42 |   }
 43 |   
 44 |   .item:hover::after {
 45 |     transform: scale(2) translate(0, 0) rotate(45deg);
 46 |   }
 47 |   
 48 |   .item-image img {
 49 |     width: 100%;
 50 |     height: auto;
 51 |     max-width: 350px;
 52 |     object-fit: cover;
 53 |     transition: transform 1s ease;
 54 |   }
 55 |   
 56 |   .item:hover .item-image img {
 57 |     transform: scale(1.2);
 58 |   }
 59 |   
 60 |   .item-text {
 61 |     position: absolute;
 62 |     top: 0;
 63 |     left: 0;
 64 |     width: 100%;
 65 |     height: 100%;
 66 |     display: flex;
 67 |     align-items: center;
 68 |     justify-content: center;
 69 |     flex-direction: column;
 70 |     text-align: center;
 71 |     z-index: 1;
 72 |     opacity: 0;
 73 |     color: var(--text-color);
 74 |     transform: translateY(-30px);
 75 |     transition: opacity 2s ease, transform 1s ease;
 76 |     transition-delay: 0.5s;
 77 |   }
 78 |   
 79 |   .item:hover .item-text {
 80 |     opacity: 1;
 81 |     transform: translateY(0);
 82 |   }
 83 |   
 84 |   .item-text h2 {
 85 |     font-size: 4rem;
 86 |     letter-spacing: 3px;
 87 |     margin: 5px;
 88 |     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
 89 |     transition: transform 0.5s, text-shadow 0.5s; 
 90 |   }
 91 |   
 92 |   .item-text p {
 93 |     font-size: 2.5rem;
 94 |     letter-spacing: 3px;
 95 |     margin: 10px;
 96 |     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 97 |     transition: transform 0.5s, text-shadow 0.5s; 
 98 |   }
 99 |   
100 |   .item:hover .item-text h2,
101 |   .item:hover .item-text p {
102 |     transform: translateZ(10px) rotateX(10deg) rotateY(10deg); 
103 |     text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); 
104 |   }
105 |   
106 |   .item-text button {
107 |     font-size: 1.5rem;
108 |     margin: 4px;
109 |     padding: 6px 12px;
110 |     border-radius: 30px;
111 |     background: transparent;
112 |     color: var(--text-color);
113 |     border: 2px solid var(--text-color);
114 |     cursor: pointer;
115 |     transition: background 0.3s, color 0.3s, transform 0.5s, text-shadow 0.5s;
116 |     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
117 |   }
118 |   
119 |   .item-text button:hover,
120 |   .item-text button:focus {
121 |     background: var(--text-color);
122 |     color: var(--background-color);
123 |     outline: none;
124 |     transform: translateZ(10px) rotateX(10deg) rotateY(10deg);
125 |     text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); 
126 |   }
127 |   


--------------------------------------------------------------------------------
/image-rotate-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>
 6 | 		Image Rotate Animation
 7 | 	</title>
 8 |     
 9 |     <link rel="stylesheet" type="text/css" href="style.css">
10 |     
11 | </head>
12 | <body>
13 | 
14 |     <div>
15 |         <img src="https://picsum.photos/id/61/300/300" alt="City">
16 |         <img src="https://picsum.photos/id/95/300/300" alt="Trees">
17 |     </div>
18 | 
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/image-rotate-animation/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     min-height: 100vh;
 4 |     display: grid;
 5 |     place-content: center;
 6 |     grid-auto-flow: column;
 7 |     gap: 30px;
 8 |     background: #460c0c;
 9 | }
10 | 
11 | @property --a { 
12 |     syntax: "<angle>";
13 |     initial-value: 0deg; 
14 |     inherits: true;
15 | }
16 | 
17 |   @property --d { 
18 |     syntax: "<percentage>";
19 |     initial-value: 0%; 
20 |     inherits: true;
21 | }
22 | 
23 | img {
24 |     --b: 10px; /* control the border thickness */
25 |     --g: 20px; /* control the gap */
26 |     
27 |     --d: 30%;
28 |     --a: 45deg;
29 |     --_o:50% + (var(--d) + var(--g) + var(--b));
30 |     --_i:50% + (var(--d) + var(--g));
31 |     --_f:50% + (var(--d));
32 |     clip-path: polygon(
33 |       /*  */
34 |       calc(var(--_o)*sin(-45deg + var(--a))) calc(var(--_o)*cos(-45deg + var(--a))),
35 |       calc(var(--_o)*sin( 45deg + var(--a))) calc(var(--_o)*cos( 45deg + var(--a))),
36 |       calc(var(--_o)*sin(135deg + var(--a))) calc(var(--_o)*cos(135deg + var(--a))),
37 |       calc(var(--_o)*sin(225deg + var(--a))) calc(var(--_o)*cos(225deg + var(--a))),
38 |       calc(var(--_o)*sin(-45deg + var(--a))) calc(var(--_o)*cos(-45deg + var(--a))),
39 |       /*  */
40 |       calc(var(--_i)*sin(-45deg + var(--a))) calc(var(--_i)*cos(-45deg + var(--a))),
41 |       calc(var(--_i)*sin(225deg + var(--a))) calc(var(--_i)*cos(225deg + var(--a))),
42 |       calc(var(--_i)*sin(135deg + var(--a))) calc(var(--_i)*cos(135deg + var(--a))),
43 |       calc(var(--_i)*sin( 45deg + var(--a))) calc(var(--_i)*cos( 45deg + var(--a))),
44 |       calc(var(--_i)*sin(-45deg + var(--a))) calc(var(--_i)*cos(-45deg + var(--a))),
45 |       /*  */
46 |       calc(var(--_f)*sin(-45deg + var(--a))) calc(var(--_f)*cos(-45deg + var(--a))),
47 |       calc(var(--_f)*sin( 45deg + var(--a))) calc(var(--_f)*cos( 45deg + var(--a))),
48 |       calc(var(--_f)*sin(135deg + var(--a))) calc(var(--_f)*cos(135deg + var(--a))),
49 |       calc(var(--_f)*sin(225deg + var(--a))) calc(var(--_f)*cos(225deg + var(--a))),
50 |       calc(var(--_f)*sin(-45deg + var(--a))) calc(var(--_f)*cos(-45deg + var(--a)))
51 | );
52 | 
53 |     outline: 166px solid #2c2c2c; /* color here */
54 |     outline-offset: 2px; /* a small value to avoid a visual glitch */
55 |     cursor: pointer;
56 |     transition: --d .3s,--a .2s .2s;
57 | }
58 | 
59 | img:hover {
60 |     --a: 0deg;
61 |     --d: 71%;
62 |     transition: --a .3s,--d .2s .2s;
63 | }
64 |   
65 |   
66 |   


--------------------------------------------------------------------------------
/interactive-street-lamp/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Interactive Street Lamp</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <input type="checkbox" name="btn" id="btn" checked>
11 | <div class="content">
12 | 	<div class="buildings">
13 | 		<div class="window"></div>
14 | 		<div class="window"></div>
15 | 		<div class="window"></div>
16 | 		<div class="window"></div>
17 | 		<div class="window"></div>
18 | 		<div class="window"></div>
19 | 	</div>
20 | 	<div class="ground">
21 | 		<div class="sewer"></div>
22 | 	</div>
23 | 	<div class="streetlamp">
24 | 		<div class="base"></div>
25 | 		<div class="basetop"></div>
26 | 		<div class="pole"></div>
27 | 		<div class="poletop"></div>
28 | 		<div class="head">
29 | 			<label for="btn"></label>
30 | 			<div class="top"></div>
31 | 			<div class="glass"></div>
32 | 			<div class="bot"></div>
33 | 		</div>
34 | 		<div class="light"></div>
35 | 		<div class="ground-light"></div>
36 | 	</div>
37 | </div>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/leaping-triangles.loader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Leaping Triangles Loader</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="loader">
11 |         <span></span>
12 |         <span></span>
13 |         <span></span>
14 |         </div>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/leaping-triangles.loader/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --c: #ffa500;
 3 |   }
 4 |   
 5 |   body {
 6 |     margin: 0;
 7 |     padding: 0;
 8 |     width: 100vw;
 9 |     height: 100vh;
10 |     overflow: hidden;
11 |     display: flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     background: radial-gradient(circle at 50% 50%, #252525, #010101);
15 |   }
16 |   
17 |   
18 |   .loader {
19 |     width: 15vmin;
20 |     height: 15vmin;
21 |     position: relative;
22 |     display: flex;
23 |     align-items: center;
24 |     justify-content: center;
25 |     background: conic-gradient(from 150deg at 50% 14%, var(--c) 0 60deg, #fff0 0 100%);
26 |     filter: 
27 |       drop-shadow(0.2vmin 0.2vmin 0vmin #bf7200) drop-shadow(0.2vmin 0.2vmin 0vmin #ab6701) 
28 |       drop-shadow(0.2vmin 0.2vmin 0vmin #9c5e01) drop-shadow(0.2vmin 0.2vmin 0vmin #8d5502) 
29 |       drop-shadow(0.4vmin 0.2vmin 0vmin #744602) drop-shadow(0.4vmin 0.2vmin 0vmin #5f3900) 
30 |       drop-shadow(0.4vmin 0.2vmin 0vmin #4d2e00) drop-shadow(0.4vmin 0.2vmin 0vmin #382200) 
31 |       drop-shadow(4vmin 3vmin 1vmin #0008);
32 |   }
33 |   
34 |   .loader span {
35 |     width: 100%;
36 |     height: 100%;
37 |     position: absolute;
38 |     transform-origin: 100% 100%;
39 |     transform: rotate(60deg);
40 |     animation: spin 1.5s ease-in-out -1.245s infinite;
41 |     background: conic-gradient(from 150deg at 50% 14%, var(--c) 0 60deg, #fff0 0 100%);
42 |   }
43 |   
44 |   .loader span + span {
45 |     transform-origin: 0% 100%;
46 |   }
47 |   
48 |   .loader span + span + span {
49 |     transform-origin: 50% 14%;
50 |   }
51 |   
52 |   @keyframes spin {
53 |     100% { transform: rotate(300deg); }  
54 |   }


--------------------------------------------------------------------------------
/light-and-dark-toggle/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>Light And Dark Mode Toggle </title>
 6 |     <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
 7 | 
 8 |     <link rel="stylesheet" type="text/css" href="style.css">
 9 | </head>
10 | <body>
11 | 
12 | <label>
13 | 	<input type="checkbox" name="checkbox" class="toggle-checkbox" />
14 | 	<div class="toggle-slot">
15 | 		<div class="sun-icon-wrapper">
16 | 			<div class="iconify sun-icon" data-icon="feather-sun" data-inline="false"> </div>
17 | 		</div>
18 | 
19 | 		<div class="toggle-button"></div>
20 | 			<div class="moon-icon-wrapper">
21 | 			<div class="iconify moon-icon" data-icon="feather-moon" data-inline="false"> </div>
22 | 			</div>
23 | 	</div>
24 | </label>
25 | 
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/light-and-dark-toggle/style.css:
--------------------------------------------------------------------------------
  1 | body{
  2 | 	height: 100vh;
  3 | 	display: flex;
  4 | 	align-items: center;
  5 | 	justify-content: center;
  6 | }
  7 | .toggle-checkbox{
  8 | 	position: absolute;
  9 | 	opacity: 0;
 10 | 	cursor: pointer;
 11 | 	height: 0;
 12 | 	width: 0;
 13 | }
 14 | .toggle-slot{
 15 | 	position: relative;
 16 | 	height: 10em;
 17 | 	width: 20em;
 18 | 	border: 5px solid #e4e7ec;
 19 | 	border-radius: 10em;
 20 | 	background-color: white;
 21 | 	box-shadow: 0px 10px 25px #e4e7ec;
 22 | 	transition: background-color 250ms;
 23 | }
 24 | .toggle-checkbox:checked ~ .toggle-slot{
 25 | 	background-color: #374151;
 26 | }
 27 | .toggle-button{
 28 | 	transform: translate(11.75em,1.75em);
 29 | 	position: absolute;
 30 | 	height: 6.5em;
 31 | 	width: 6.5em;
 32 | 	border-radius: 50%;
 33 | 	background-color: #ffeccf;
 34 | 	box-shadow: inset 0px 0px 0px 0.75em #ffbb52;
 35 | 	transition: background-color 250ms,border-color 250ms,transform 1500ms cubic-bezier(.26,2,.46,.71);
 36 | 
 37 | }
 38 | .toggle-checkbox:checked ~ .toggle-slot .toggle-button{
 39 | background-color: #485367;
 40 | box-shadow: inset 0px 0px 0px 0.75em white;
 41 | transform: translate(1.75em,1.75em);
 42 | 
 43 | }
 44 | 
 45 | .sun-icon{
 46 | 	position: absolute;
 47 | 	height: 6em;
 48 | 	width: 6em;
 49 | 	color: #ffbb52;
 50 | }
 51 | 
 52 | .sun-icon-wrapper{
 53 | 	position: absolute;
 54 | 	height: 6em;
 55 | 	width: 6em;
 56 | 	opacity: 1;
 57 | 	transform: translate(2em ,2em) rotate(15deg);
 58 | 	transform-origin: 50% 50%;
 59 | 	transition: opacity 150ms,transform 1500ms cubic-bezier(.26,2,.46,.71)
 60 | }
 61 | 
 62 | .toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper{
 63 | 
 64 | opacity: 0;
 65 | transform: translate(3em,2em) rotate(0deg);
 66 | }
 67 | 
 68 | .moon-icon{
 69 | 	position: absolute;
 70 | 	height: 6em;
 71 | 	width: 6em;
 72 | 	color: white;
 73 | }
 74 | 
 75 | .moon-icon-wrapper{
 76 | 	position: absolute;
 77 | 	height: 6em;
 78 | 	width: 6em;
 79 | 	opacity: 0;
 80 | 	transform: translate(11em ,2em) rotate(0deg);
 81 | 	transform-origin: 50% 50%;
 82 | 	transition: opacity 150ms,transform 1500ms cubic-bezier(.26,2,.46,.71)
 83 | }
 84 | 
 85 | .toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper{
 86 | 
 87 | opacity: 1;
 88 | transform: translate(12em,2em) rotate(-15deg);
 89 | }
 90 | 
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 | 
101 | 
102 | 
103 | 
104 | 
105 | 
106 | 
107 | 
108 | 
109 | 
110 | 
111 | 
112 | 
113 | 
114 | 
115 | 
116 | 


--------------------------------------------------------------------------------
/loader/index.html:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/loader/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
 2 | 
 3 | *{
 4 |     box-sizing: border-box;
 5 |     margin: 0;
 6 |     padding: 0;
 7 | }
 8 | 
 9 | body {
10 |     font-family: sans-serif;
11 |     min-height: 100vh;
12 |     width: 100%;
13 |     display: flex;
14 |     align-items: center;
15 |     justify-content: center;
16 |     background-color: #6C9A8B;
17 |     font-family: 'poppins';
18 | }
19 | 
20 | .load {
21 |     display: flex;
22 |     align-items: flex-end;
23 |     justify-content: center;
24 |     column-gap: 5px;
25 |     height: 200px;
26 |     width: 200px;
27 |     background-color: #fff;
28 |     border-radius: 50% 20% / 10% 40%;
29 |     padding-bottom: 4rem;
30 | }
31 | 
32 | .load span {
33 |   --duration: 1s;  
34 |   height: var(--height);
35 |   width: 10px;
36 |   background-color: #E8998D;
37 |   border: none;
38 |   border-radius: 5px;
39 |   animation: animation var(--duration) ease-in-out infinite;
40 | }
41 | 
42 | .load span:nth-child(1) {
43 |     --height: 40px;
44 |     animation-delay: 0.25s;
45 | }
46 | 
47 | .load span:nth-child(2) {
48 |     --height: 60px;
49 |     animation-delay: 0.55s;
50 | }
51 | 
52 | .load span:nth-child(3) {
53 |     --height: 75px;
54 |     animation-delay: 0.75s;
55 | }
56 | 
57 | .load span:nth-child(4) {
58 |     --height: 60px;
59 |     animation-delay: 1s;
60 | }
61 | 
62 | .load span:nth-child(5) {
63 |     --height: 40px;
64 |   animation-delay: 1.25s;
65 | }
66 | 
67 | .attribute{
68 |     position: absolute;
69 |     bottom: 10px;
70 | }
71 | 
72 | @keyframes animation {
73 |     0%, 100% {
74 |       transform: translateY(25%);
75 |       opacity: 0.4;
76 |       box-shadow: 0 0 20px #EED2CC;
77 |     }
78 |     50% {
79 |       transform: translateY(0);
80 |       opacity: 1;
81 |       box-shadow: none;
82 |       height: calc(var(--height) + 25px);
83 |     }
84 | }


--------------------------------------------------------------------------------
/loading-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Loading Animation</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 |     <div class="spinner"></div>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/loading-animation/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background: linear-gradient(to bottom right, rgb(38, 70, 2), rgb(4, 77, 77));
 3 |     display: flex;
 4 |     height: 100vh;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |   }
 8 |   
 9 |   .spinner{
10 |     height: 120px;
11 |     width: 120px;
12 |     border: 6px solid;
13 |     border-color: white transparent white transparent;
14 |     border-radius: 50%;
15 |     animation: spin 1.3s linear infinite;
16 |   }
17 |   
18 |   @keyframes spin {
19 |     to {
20 |       transform: rotate(360deg);
21 |     }
22 |   }
23 |   


--------------------------------------------------------------------------------
/loading-knight-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Loading Knight Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <svg class="svg" viewBox="0 0 12 14">
11 |         <defs>
12 |             <linearGradient id="gradient" x1="0%" y1="100%" x2="82%" y2="18%">
13 |                 <stop offset="0%" stop-color="hsl(30, 100%, 49%)"/>
14 |                 <stop offset="100%" stop-color="hsl(35, 100%, 60%)"/>
15 |             </linearGradient>
16 |             
17 |             <linearGradient id="fillgradient" x1="0%" y1="100%" x2="82%" y2="18%">
18 |                 <stop offset="0%" stop-color="hsl(30, 100%, 49%)" stop-opacity="1"/>
19 |                 <stop offset="30%" stop-color="hsl(31.5, 100%, 52.3%)" stop-opacity="1"/>
20 |                 <stop offset="30%" stop-opacity="0"/>
21 |             </linearGradient>
22 |             
23 |             <filter id="glow">
24 |             <feGaussianBlur stdDeviation="0.3" result="coloredBlur"/>
25 |             <feMerge>
26 |             <feMergeNode in="coloredBlur"/>
27 |             <feMergeNode in="SourceGraphic"/>
28 |             </feMerge>
29 |             </filter>
30 |         </defs>
31 |         <path xmlns="http://www.w3.org/2000/svg" d="M 2 11 L 1 13 L 9 13 L 8 11 L 8 10 Q 8 9 6 7 C 7 8 7.5 7 8.25 7.5 Q 9 8 10 7 C 11 6 11 6 8.5 4 Q 6 2 6 1 C 5 1 5 2 4 2 Q 2 2 2 11" 
32 |         fill="url(#fillgradient)" filter="url(#glow)"/>
33 |         <path xmlns="http://www.w3.org/2000/svg" d="M 2 11 L 1 13 L 9 13 L 8 11 L 8 10 Q 8 9 6 7 C 7 8 7.5 7 8.25 7.5 Q 9 8 10 7 C 11 6 11 6 8.5 4 Q 6 2 6 1 C 5 1 5 2 4 2 Q 2 2 2 11" 
34 |         stroke="url(#gradient)" stroke-width="0.5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="30 70" pathLength="100" stroke-dashoffset="50" filter="url(#glow)"/>
35 |     </svg>
36 | 
37 |     <script>
38 |     const svgelement = document.querySelector(".svg");
39 |     let rotation = 0;
40 |     let loadprogress = 0;
41 | 
42 |     setInterval(function () {
43 | 	if ( loadprogress < 100 ) { loadprogress += 0.4; }
44 | 	rotation += 1;
45 | 	if ( rotation == 100 ) { rotation = 0; }
46 | 	svgelement.innerHTML = `
47 | 	<defs>
48 | 		<linearGradient id="gradient" x1="0%" y1="100%" x2="82%" y2="18%">
49 | 			<stop offset="0%" stop-color="hsl(30, 100%, 49%)"/>
50 | 			<stop offset="100%" stop-color="hsl(35, 100%, 60%)"/>
51 | 		</linearGradient>
52 | 		
53 | 		<linearGradient id="fillgradient" x1="0%" y1="100%" x2="82%" y2="18%">
54 | 			<stop offset="0%" stop-color="hsl(30, 100%, 49%)" stop-opacity="1"/>
55 | 			<stop offset="${loadprogress}%" stop-color="hsl(${loadprogress * 0.05 + 30}, 100%, ${loadprogress * 0.11 + 49}%)" stop-opacity="1"/>
56 | 			<stop offset="${loadprogress}%" stop-opacity="0"/>
57 | 		</linearGradient>
58 | 		
59 | 		<filter id="glow">
60 |     	<feGaussianBlur stdDeviation="0.3" result="coloredBlur"/>
61 |     	<feMerge>
62 |         <feMergeNode in="coloredBlur"/>
63 |         <feMergeNode in="SourceGraphic"/>
64 |     	</feMerge>
65 | 		</filter>
66 | 	</defs>
67 | 	<path xmlns="http://www.w3.org/2000/svg" d="M 2 11 L 1 13 L 9 13 L 8 11 L 8 10 Q 8 9 6 7 C 7 8 7.5 7 8.25 7.5 Q 9 8 10 7 C 11 6 11 6 8.5 4 Q 6 2 6 1 C 5 1 5 2 4 2 Q 2 2 2 11" 
68 |     fill="url(#fillgradient)" filter="url(#glow)"/>
69 | 	<path xmlns="http://www.w3.org/2000/svg" d="M 2 11 L 1 13 L 9 13 L 8 11 L 8 10 Q 8 9 6 7 C 7 8 7.5 7 8.25 7.5 Q 9 8 10 7 C 11 6 11 6 8.5 4 Q 6 2 6 1 C 5 1 5 2 4 2 Q 2 2 2 11" 
70 |     stroke="url(#gradient)" stroke-width="0.5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="${loadprogress} ${100 - loadprogress}" pathLength="100" stroke-dashoffset="${rotation}" filter="url(#glow)"/>`
71 |     }, 1000 / 60);
72 |     </script>     
73 |   </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/loading-knight-animation/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--gradient: linear-gradient(20deg, hsl(30, 100%, 49%), hsl(35, 100%, 60%));
 3 | }
 4 | 
 5 | body {
 6 | 	height: 100vh;
 7 | 	margin: 0;
 8 | 	display: grid;
 9 | 	place-items: center;
10 | 	background: #141415;
11 | }
12 | 
13 | .svg {
14 | 	width: 10em;
15 | 	height: 12em;
16 | }


--------------------------------------------------------------------------------
/login-form/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Login Form</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <!--Google Fonts and Icons-->
 9 |     <link
10 |       href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
11 |       rel="stylesheet"/>
12 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
13 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14 |     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
15 |       rel="stylesheet"/>
16 |   </head>
17 |   <body>
18 |     <div class="center">
19 |       <form action="">
20 |         <div class="title">Login</div>
21 |         <span class="inputs">
22 |           <span class="inputf">
23 |             <input type="email" class="input" placeholder="Email" />
24 |             <span class="label">Email</span>
25 |             <span class="material-icons icon">email</span>
26 |           </span>
27 |           <span class="inputf">
28 |             <input type="password" class="input" placeholder="Password" />
29 |             <span class="label">Password</span>
30 |             <span class="material-icons icon">lock</span>
31 |           </span>
32 |         </span>
33 |         <div class="links">
34 |           <a href="#">Forgot Password</a>
35 |           <label for="remember">
36 |             <input type="checkbox" id="remember" />
37 |             Remember Me
38 |           </label>
39 |         </div>
40 |         <button type="button" class="btn">
41 |           <span>Login</span>
42 |           <div class="dots">
43 |             <div class="dot" style="--delay: 0s"></div>
44 |             <div class="dot" style="--delay: 0.25s"></div>
45 |             <div class="dot" style="--delay: 0.5s"></div>
46 |           </div>
47 |         </button>
48 |         <div class="text">
49 |           New user? Create an account <a href="#">Register</a>
50 |         </div>
51 |       </form>
52 |     </div>
53 |     <script>
54 |       var btn = document.querySelector(".btn");
55 |       var inputs = document.querySelectorAll(".input");
56 |       btn.onclick = function () {
57 |         btn.classList.toggle("active");
58 |         setTimeout(() => {
59 |           btn.classList.toggle("active");
60 |           inputs[1].classList.toggle("active");
61 |         }, 1500);
62 |         setTimeout(() => {
63 |           inputs[1].classList.toggle("active");
64 |         }, 3000);
65 |       };
66 |     </script>
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/login-form/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     width: 100%;
  3 |     height: 100vh;
  4 |     margin: 0;
  5 |     padding: 0;
  6 | }
  7 | 
  8 | .center {
  9 |     width: 100%;
 10 |     height: 100%;
 11 |     display: flex;
 12 |     align-items: center;
 13 |     justify-content: center;
 14 |     background: url(../images/login-back.png);
 15 |     background-size: cover;
 16 | }
 17 | 
 18 | form {
 19 |     width: 400px;
 20 |     height: 450px;
 21 |     box-sizing: border-box;
 22 |     border-radius: 5mm;
 23 |     padding: 40px 30px;
 24 |     backdrop-filter: blur(5px) saturate(160%);
 25 |     -webkit-backdrop-filter: blur(5px) saturate(160%);
 26 |     background: #000; /* Changed to solid black */
 27 |     border: 0.5mm solid rgba(0, 0, 0, 0.65);
 28 |     position: relative;
 29 | }
 30 | 
 31 | .title {
 32 |     width: 100%;
 33 |     font-family: poppins;
 34 |     font-size: 30px;
 35 |     text-align: center;
 36 |     margin-bottom: 20px;
 37 |     color: white;
 38 | }
 39 | 
 40 | .inputs {
 41 |     width: 100%;
 42 |     height: fit-content;
 43 |     display: flex;
 44 |     align-items: center;
 45 |     justify-content: center;
 46 |     flex-direction: column;
 47 | }
 48 | 
 49 | .inputf {
 50 |     width: 100%;
 51 |     height: fit-content;
 52 |     box-sizing: border-box;
 53 |     margin: 15px 0;
 54 |     position: relative;
 55 | }
 56 | 
 57 | .input {
 58 |     width: 100%;
 59 |     height: 45px;
 60 |     box-sizing: border-box;
 61 |     border: none;
 62 |     border-bottom: 0.55mm solid rgb(255, 255, 255);
 63 |     background: none;
 64 |     padding: 0 15px;
 65 |     font-family: poppins;
 66 |     font-size: 15px;
 67 |     color: white;
 68 |     outline: none;
 69 | }
 70 | 
 71 | .input::placeholder {
 72 |     color: rgb(241, 232, 232);
 73 | }
 74 | 
 75 | .label {
 76 |     position: absolute;
 77 |     top: 0;
 78 |     left: 0;
 79 |     color: white;
 80 |     font-size: 13px;
 81 |     font-weight: 500;
 82 |     font-family: poppins;
 83 |     opacity: 0;
 84 |     z-index: -1;
 85 |     transition: 0.25s ease-out;
 86 | }
 87 | 
 88 | .input:focus + .label {
 89 |     top: -20px;
 90 |     opacity: 1;
 91 |     z-index: 1;
 92 | }
 93 | 
 94 | .input:focus::placeholder {
 95 |     opacity: 0;
 96 | }
 97 | 
 98 | .input:not(:placeholder-shown) + .label {
 99 |     top: -20px;
100 |     opacity: 1;
101 |     z-index: 1;
102 | }
103 | 
104 | .icon {
105 |     color: white;
106 |     position: absolute;
107 |     right: 0px;
108 |     top: 50%;
109 |     transform: translate(0, -50%);
110 |     font-size: 18px;
111 | }
112 | 
113 | .links {
114 |     width: 100%;
115 |     display: flex;
116 |     align-items: center;
117 |     justify-content: space-between;
118 |     font-size: 12px;
119 |     font-family: poppins;
120 |     margin-bottom: 50px;
121 |     color: white;
122 | }
123 | 
124 | .links label {
125 |     display: flex;
126 |     align-items: center;
127 |     justify-content: center;
128 | }
129 | 
130 | .links a {
131 |     font-weight: 600;
132 |     color: white;
133 | }
134 | 
135 | .btn {
136 |     width: 100%;
137 |     height: 40px;
138 |     background: white;
139 |     outline: none;
140 |     border: none;
141 |     cursor: pointer;
142 |     border-radius: 6mm;
143 |     display: flex;
144 |     align-items: center;
145 |     justify-content: center;
146 |     margin-bottom: 10px;
147 | }
148 | 
149 | .btn span {
150 |     color: rgb(40, 40, 40);
151 |     font-family: poppins;
152 |     font-size: 16px;
153 | }
154 | 
155 | .text {
156 |     width: 100%;
157 |     font-family: poppins;
158 |     font-size: 13px;
159 |     text-align: center;
160 |     color: rgb(240, 240, 240);
161 | }
162 | 
163 | .text a {
164 |     color: white;
165 |     font-weight: 600;
166 | }
167 | 
168 | .dots {
169 |     width: fit-content;
170 |     height: fit-content;
171 |     display: flex;
172 |     align-items: center;
173 |     justify-content: center;
174 | }
175 | 
176 | .dot {
177 |     width: 12px;
178 |     height: 12px;
179 |     border-radius: 50%;
180 |     background: rgba(0, 0, 0, 0.1);
181 |     margin: 1px;
182 |     animation: load 0.5s ease-out infinite alternate var(--delay);
183 | }
184 | 
185 | @keyframes load {
186 |     0% {
187 |       background: rgb(0, 0, 0);
188 |     }
189 |     50%,
190 |     100% {
191 |       background: rgba(0, 0, 0, 0.1);
192 |     }
193 | }
194 | 
195 | .btn .dots {
196 |     display: none;
197 | }
198 | 
199 | .btn span {
200 |     display: block;
201 | }
202 | 
203 | .btn.active .dots {
204 |     display: flex;
205 | }
206 | 
207 | .btn.active span {
208 |     display: none;
209 | }
210 | 
211 | .input.active {
212 |     animation: shake 0.25s ease-in-out 3;
213 | }
214 | 
215 | @keyframes shake {
216 |     0% {
217 |       margin-left: 0px;
218 |     }
219 |     25% {
220 |       margin-left: 5px;
221 |     }
222 |     75% {
223 |       margin-left: -5px;
224 |     }
225 |     100% {
226 |       margin-left: 0px;
227 |     }
228 | }


--------------------------------------------------------------------------------
/moving-tabs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Moving Tabs</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |         <div class="tabs">
12 |           <input type="radio" id="radio-1" name="tabs" checked />
13 |           <label class="tab" for="radio-1">Upcoming<span class="notification">2</span></label>
14 |           <input type="radio" id="radio-2" name="tabs" />
15 |           <label class="tab" for="radio-2">Development<span class="notification">1</span></label>
16 |           <input type="radio" id="radio-3" name="tabs" />
17 |           <label class="tab" for="radio-3">Completed <span class="notification">3</span></label>
18 |           <span class="glider"></span>
19 |         </div>
20 |       </div>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/moving-tabs/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
  2 | 
  3 | :root {
  4 |   --primary-color: #111;
  5 |   --secondary-color: #a8adb3;
  6 | }
  7 | 
  8 | *,
  9 | *:after,
 10 | *:before {
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: "Inter", sans-serif;
 16 |   background-color: #2b2929;
 17 | }
 18 | 
 19 | .container {
 20 |   position: absolute;
 21 |   left: 0;
 22 |   top: 0;
 23 |   right: 0;
 24 |   bottom: 0;
 25 |   display: flex;
 26 |   align-items: center;
 27 |   justify-content: center;
 28 | }
 29 | 
 30 | .tabs {
 31 |   display: flex;
 32 |   position: relative;
 33 |   background-color: #fff;
 34 |   box-shadow: 0 0 1px 0 rgb(233 234 236 / 15%),
 35 |     0 6px 12px 0 rgb(241 244 248 / 15%);
 36 |   padding: 0.75rem;
 37 |   border-radius: 99px;
 38 | }
 39 | 
 40 | .tabs * {
 41 |   z-index: 2;
 42 | }
 43 | 
 44 | input[type="radio"] {
 45 |   display: none;
 46 | }
 47 | 
 48 | .tab {
 49 |   display: flex;
 50 |   align-items: center;
 51 |   justify-content: center;
 52 |   height: 54px;
 53 |   width: 200px;
 54 |   font-size: 1.25rem;
 55 |   font-weight: 500;
 56 |   border-radius: 99px;
 57 |   cursor: pointer;
 58 |   transition: color 0.15s ease-in;
 59 | }
 60 | 
 61 | .notification {
 62 |   display: flex;
 63 |   align-items: center;
 64 |   justify-content: center;
 65 |   width: 2rem;
 66 |   height: 2rem;
 67 |   margin-left: 0.75rem;
 68 |   border-radius: 50%;
 69 |   background-color: var(--secondary-color);
 70 |   transition: 0.15s ease-in;
 71 | }
 72 | 
 73 | input[type="radio"]:checked + label {
 74 |   color: var(--primary-color);
 75 | }
 76 | 
 77 | input[type="radio"]:checked + label > .notification {
 78 |   background-color: var(--primary-color);
 79 |   color: #fff;
 80 | }
 81 | 
 82 | input[id="radio-1"]:checked ~ .glider {
 83 |   transform: translateX(0);
 84 | }
 85 | 
 86 | input[id="radio-2"]:checked ~ .glider {
 87 |   transform: translateX(100%);
 88 | }
 89 | 
 90 | input[id="radio-3"]:checked ~ .glider {
 91 |   transform: translateX(200%);
 92 | }
 93 | 
 94 | .glider {
 95 |   position: absolute;
 96 |   display: flex;
 97 |   height: 54px;
 98 |   width: 200px;
 99 |   background-color: var(--secondary-color);
100 |   z-index: 1;
101 |   border-radius: 99px;
102 |   transition: 0.25s ease-out;
103 | }
104 | 
105 | @media (max-width: 700px) {
106 |   .tabs {
107 |     transform: scale(0.6);
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/navigation-bar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Navigation Bar</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="wrapper">
11 |         <div class="navbar">
12 |             <a href="#" class="navitem active" onclick="select(this)" data-clr="#e4ecfa">
13 |                 <div class="indicator"></div>
14 |                 <div class="hoverindicator"></div>
15 |                 <ion-icon name="home"></ion-icon>
16 |             </a>
17 |             <a href="#" class="navitem" onclick="select(this)" data-clr="#fff6cc">
18 |                 <div class="indicator"></div>
19 |                 <div class="hoverindicator"></div>
20 |                 <ion-icon name="person"></ion-icon>
21 |             </a>
22 |             <div class="navsearch">
23 |                 <input class="searchbox"></input>
24 |                 <div class="searchicon" onclick="selectsearch()">
25 |                     <ion-icon name="search"></ion-icon>
26 |                 </div>
27 |             </div>
28 |             <a href="#" class="navitem" onclick="select(this)" data-clr="#f0e4fa">
29 |                 <div class="indicator"></div>
30 |                 <div class="hoverindicator"></div>
31 |                 <ion-icon name="cog"></ion-icon>
32 |             </a>
33 |         </div>
34 |     </div>
35 |     
36 |     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
37 |     <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
38 |     <script>
39 |         function select(el) {
40 | 	    document.querySelector(".navsearch").classList.remove("active")
41 | 	    document.querySelector(".active").classList.remove("active")
42 | 	
43 | 	        el.classList.add("active")
44 | 	
45 | 	    document.body.style.setProperty('--activeclr', el.dataset.clr);
46 |     }
47 |     function selectsearch() {
48 | 	    console.log("select")
49 | 	    const el = document.querySelector(".navsearch")
50 | 	    el.classList.toggle("active")
51 | 	if (el.classList.contains("active")) {
52 | 		document.querySelector(".searchbox").focus()
53 | 	    }
54 |     }
55 |     </script>     
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/navigation-bar/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 | 	--activeclr: #e4ecfa;
  3 | 	margin: 0;
  4 | 	padding: 0;
  5 | 	display: flex;
  6 | 	justify-content: center;
  7 | 	align-items: center;
  8 | 	height: 100vh;
  9 | 	background: var(--activeclr);
 10 | 	transition: --activeclr 300ms ease;
 11 | }
 12 | 
 13 | @property --activeclr {
 14 |   syntax: "<color>";
 15 |   initial-value: #e4ecfa;
 16 |   inherits: true;
 17 | }
 18 | 
 19 | .wrapper {
 20 | 	border-radius: 1rem;
 21 | 	overflow: hidden;
 22 | 	height: 8rem;
 23 | 	width: 22rem;
 24 | 	background: var(--activeclr);
 25 | 	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 26 | }
 27 | 
 28 | .navbar {
 29 | 	display: flex;
 30 | 	justify-content: space-between;
 31 | 	height: 4.5rem;
 32 | 	background: white;
 33 | 	padding: 0 0.75rem;
 34 | 	transition: padding 300ms ease;
 35 | }
 36 | 
 37 | .navbar:has(.navsearch.active) {
 38 | 	padding: 0 0.75rem;
 39 | }
 40 | 
 41 | .navitem, .navsearch {
 42 | 	position: relative;
 43 | 	display: grid;
 44 | 	place-content: center;
 45 | 	color: #fff;
 46 | 	width: 4.5rem;
 47 | 	text-align: center;
 48 | 	color: black;
 49 | 	font-size: 1.5rem;
 50 | 	transition: width 300ms ease, flex-grow 300ms ease;
 51 | }
 52 | 
 53 | .navbar:has(.navsearch.active) .navitem {
 54 | 	width: 3rem;
 55 | }
 56 | 
 57 | .hoverindicator {
 58 | 	position: absolute;
 59 | 	width: 2.5rem;
 60 | 	inset: 50% auto auto 50%;
 61 | 	transform: translate(-50%, -50%);
 62 | 	background: var(--activeclr);
 63 | 	opacity: 0;
 64 | 	border-radius: 0.5rem;
 65 | 	height: 0.25rem;
 66 | 	inset: auto auto -0.25rem 50%;
 67 | 	transition: inset 300ms ease, opacity 300ms ease;
 68 | }
 69 | 
 70 | @media (hover: hover) {
 71 | 	.navitem:not(.active):hover .hoverindicator,
 72 | 	.navsearch:not(.active):hover .searchbox {
 73 | 		border-radius: 1.25rem;
 74 | 		height: 2.5rem;
 75 | 		opacity: 1;
 76 | 		transition: opacity 150ms ease;
 77 | 	}
 78 | }
 79 | 
 80 | .active .hoverindicator {
 81 | 	opacity: 1;
 82 | 	border-radius: 0.5rem;
 83 | 	height: 0.25rem;
 84 | 	inset: auto auto 0.25rem 50%;
 85 | 	transition: inset 300ms ease, height 300ms ease, border-radius 300ms ease;
 86 | }
 87 | 
 88 | .navsearch.active {
 89 | 	flex-grow: 1;
 90 | }
 91 | 
 92 | .searchbox {
 93 | 	position: absolute;
 94 | 	inset: 1rem;
 95 | 	background: var(--activeclr);
 96 | 	border-radius: 1.25rem;
 97 | 	opacity: 0;
 98 | 	transition: inset 300ms ease, padding 300ms ease, color 100ms ease, opacity 300ms ease;
 99 | 	border: none;
100 | 	padding: 0 1rem 0 1rem;
101 | 	font-size: 1rem;
102 | 	color: transparent;
103 | }
104 | 
105 | .active .searchbox {
106 | 	inset: 1rem 0.25rem;
107 | 	height: 2.5rem;
108 | 	border-radius: 1.25rem;
109 | 	padding: 0 2.5rem 0 1rem;
110 | 	opacity: 1;
111 | 	color: black;
112 | 	transition: inset 300ms ease, padding 300ms ease, color 200ms ease 50ms, opacity 300ms ease;
113 | }
114 | 
115 | .searchicon {
116 | 	position: absolute;
117 | 	inset: 0 0 0 auto;
118 | 	width: 4.5rem;
119 | 	display: grid;
120 | 	place-content: center;
121 | 	transition: width 300ms ease;
122 | }
123 | 
124 | .active .searchicon {
125 | 	width: 3rem;
126 | }


--------------------------------------------------------------------------------
/neon-download-button/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Neon Download Button</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="down" onclick="downstart()">
11 |         <div class="downprogress">
12 |           <div class="progressfill"></div>
13 |         </div>
14 |         <div class="downbtn"></div>
15 |         <div class="downicon">
16 |           <svg version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
17 |             <g>
18 |               <path d="M112 268L256 412L400 268M256 392L256 100" fill="none" opacity="1" stroke="#ff7c07" stroke-linecap="round" stroke-linejoin="round" stroke-width="30"/>
19 |       </g>
20 |           </svg>
21 |         </div>
22 |         <div class="downcheck"><ion-icon name="checkmark-outline"></ion-icon></div>
23 |       </div>
24 |       
25 |       <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
26 |       <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
27 |     
28 |     <script>
29 |         const el = document.querySelector(".down")
30 |         let state = "normal"
31 | 
32 |         if (location.pathname.match(/fullcpgrid/i) ? true : false) {
33 |             document.documentElement.style.fontSize = "48px"
34 |             el.style.transform = "translateX(-4rem)"
35 |   
36 |         setTimeout(function() {
37 |             el.classList.add("inprogress")
38 |             state = "inprogress"
39 |         }, 250);
40 |         }
41 | 
42 |         function downstart() {
43 |             if (state == "finished") {
44 |                 state = "normal"
45 |                 el.classList.remove("finished")
46 |             } else if (state == "normal") {
47 |             state = "inprogress"
48 |             el.classList.add("inprogress")
49 |             }
50 |         }
51 | 
52 |         function downend() {
53 |             if (state == "inprogress") {
54 |                 state = "finished"
55 |                 el.classList.remove("inprogress")
56 |                 el.classList.add("finished")
57 |             }
58 |         }
59 |         document.querySelector(".downprogress > div").addEventListener("transitionend", downend);
60 |     </script>     
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/neon-download-button/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  2 | 
  3 | :root {
  4 |   font-family: "Inter";
  5 |   font-size: 16px;
  6 |   --gradient: linear-gradient(to right bottom, #ffa51a, #ff910c, #ff7c07, #ff640c, #ff4816);
  7 |   --color: #ff7c07;
  8 | }
  9 | 
 10 | *, *:before, *:after {
 11 |     -webkit-box-sizing: border-box;
 12 |     -moz-box-sizing: border-box;
 13 |     box-sizing: border-box;
 14 | }
 15 | 
 16 | body {
 17 |   margin: 0;
 18 |   height: 100vh;
 19 |   width: 100%;
 20 |   background: #ffffff;
 21 |   overflow: hidden;
 22 |   display: grid;
 23 |   place-content: center;
 24 | }
 25 | 
 26 | .down {
 27 |   display: grid;
 28 |   position: relative;
 29 |   width: 4rem;
 30 |   height: 4rem;
 31 |   background: var(--gradient);
 32 |   border-radius: 50%;
 33 |   touch-action: none;
 34 | }
 35 | 
 36 | .downbtn {
 37 |   margin: 0.125rem;
 38 |   border-radius: 50%;
 39 |   background: #18181b;
 40 |   font-size: 1.8rem;
 41 |   overflow: hidden;
 42 |   position: relative;
 43 | }
 44 | 
 45 | .downprogress {
 46 |   position: absolute;
 47 |   inset: 0.5rem auto 0.5rem 2rem;
 48 |   width: 0;
 49 |   border-radius: 1rem;
 50 |   background: var(--gradient);
 51 |   transition: width 750ms ease;
 52 | }
 53 | 
 54 | .inprogress .downprogress,
 55 | .finished .downprogress {
 56 |   transition: width 500ms ease;
 57 |   width: 10rem;
 58 | }
 59 | 
 60 | .downprogress > .progressfill {
 61 |   position: absolute;
 62 |   inset: 0.125rem;
 63 |   border-radius: 0.875rem;
 64 |   background: #18181b;
 65 |   overflow: hidden;
 66 | }
 67 | 
 68 | .downprogress > .progressfill:before {
 69 |   position: absolute;
 70 |   content: "";
 71 |   inset: 0;
 72 |   background: var(--gradient);
 73 |   transform: translateX(-9rem);
 74 |   transition: transform 0ms 750ms
 75 | }
 76 | 
 77 | .inprogress .downprogress > .progressfill:before,
 78 | .finished .downprogress > .progressfill:before {
 79 |   transition: transform 2s ease 750ms;
 80 |   transform: none;
 81 | }
 82 | 
 83 | .downprogress > .progressfill:after {
 84 |   position: absolute;
 85 |   content: "Open file.txt";
 86 |   display: grid;
 87 |   padding-left: 1rem;
 88 |   place-content: center;
 89 |   inset: 0 0 0 auto;
 90 |   width: 10rem;
 91 |   background: #18181b;
 92 |   transform: translateY(2rem);
 93 |   opacity: 0;
 94 |   transition: transform 350ms ease 1s, opacity 350ms ease 350ms;
 95 |   color: var(--color);
 96 | }
 97 | 
 98 | .inprogress .downprogress > .progressfill:after,
 99 | .finished .downprogress > .progressfill:after {
100 |   transform: none;
101 |   opacity: 1;
102 |   transition: transform 350ms ease 2.4s, opacity 250ms ease 2.4s;
103 | }
104 | 
105 | .downicon {
106 |   position: absolute;
107 |   inset: 0 auto auto 0;
108 |   width: 100%;
109 |   height: 100%;
110 |   pointer-events: none;
111 |   color: var(--color);
112 |   z-index: 5;
113 |   display: flex;
114 |   justify-content: center;
115 |   align-items: center;
116 |   font-size: 2rem;
117 |   transition: transform 350ms ease 200ms, opacity 350ms ease 200ms;
118 | }
119 | 
120 | .downicon > svg {
121 |   width: 55%;
122 |   height: 55%;
123 | }
124 | 
125 | .inprogress .downicon {
126 |   transition: transform 500ms ease, inset 1.25s cubic-bezier(0.355, 0.045, 0.500, 0.345) 250ms, opacity 250ms linear 1.25s;
127 |   inset: 0 auto auto 9rem;
128 |   opacity: 0;
129 |   transform: rotate(-90deg);
130 | }
131 | 
132 | .finished .downicon {
133 |   transform: translateY(-2rem);
134 |   opacity: 0;
135 | }
136 | 
137 | .downcheck {
138 |   position: absolute;
139 |   inset: 0;
140 |   color: var(--color);
141 |   display: grid;
142 |   place-content: center;
143 |   font-size: 2rem;
144 |   transform: translateY(2rem);
145 |   opacity: 0;
146 |   transition: transform 350ms ease, opacity 350ms ease;
147 | }
148 | 
149 | .inprogress .downcheck,
150 | .finished .downcheck {
151 |   transform: none;
152 |   opacity: 1;
153 |   transition: transform 350ms ease 2.4s, opacity 350ms ease 2.4s;
154 | }
155 | 
156 | .progressname {
157 |   position: absolute;
158 |   inset: 0;
159 |   background: #0c0c0b;
160 |   color: var(--color);
161 |   display: grid;
162 |   place-content: center;
163 |   font-size: 2rem;
164 |   transform: translateY(2rem);
165 |   opacity: 0;
166 |   transition: transform 350ms ease, opacity 350ms ease;
167 | }
168 | 
169 | .inprogress .progressfill,
170 | .finished .progressfill {
171 |   transform: none;
172 |   opacity: 1;
173 |   transition: transform 350ms ease 2.4s, opacity 350ms ease 2.4s;
174 | }


--------------------------------------------------------------------------------
/night-view/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Night View</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div id="city-at-night">
11 |         <div class="night-container">
12 |           <div class="river"></div>
13 |           <div class="river-float"></div>
14 |           <div class="building-rowOne">
15 |             <div class="track"></div>
16 |             <div class="train-container">
17 |               <div class="train"></div>
18 |             </div>
19 |             <div class="further-train">
20 |               <div class="train"></div>
21 |             </div>
22 |             <div class="windows">
23 |             </div>
24 |           </div>
25 |           <div class="reflection">
26 |               <div class="building-rowOne">
27 |             <div class="track"></div>
28 |             <div class="train-container">
29 |               <div class="train"></div>
30 |             </div>
31 |             <div class="windows">
32 |             </div>
33 |           </div>
34 |           </div>
35 |           <div class="building-rowTwo">
36 |             <div class="banner"></div>
37 |             <div class="windows-rowTwo"></div>
38 |           </div>
39 |             <div class="building-rowThree"></div>
40 |         </div>
41 |         </div>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/opening-envelope/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Opening Envelope</title>
 5 |     </head>
 6 |         <link rel="stylesheet" type="text/css" href="style.css">
 7 |     <body>
 8 |         <div class="letter-image">
 9 |             <div class="animated-mail">
10 |                 <div class="back-fold"></div>
11 |                 <div class="letter">
12 |                     <div class="letter-border"></div>
13 |                     <div class="letter-title"></div>
14 |                     <div class="letter-context"></div>
15 |                     <div class="letter-stamp">
16 |                         <div class="letter-stamp-inner"></div>
17 |                     </div>
18 |                 </div>
19 |                 <div class="top-fold"></div>
20 |                 <div class="body"></div>
21 |                 <div class="left-fold"></div>
22 |             </div>
23 |             <div class="shadow"></div>
24 |         </div>
25 |     </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/opening-envelope/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 | 	background: #323641;
  3 | }
  4 | 
  5 | .letter-image {
  6 | 	position: absolute;
  7 | 	top: 50%;
  8 | 	left: 50%;
  9 | 	width: 200px;
 10 | 	height: 200px;
 11 | 	-webkit-transform: translate(-50%, -50%);
 12 | 	-moz-transform: translate(-50%, -50%);
 13 | 	transform: translate(-50%, -50%);
 14 | 	cursor: pointer;
 15 | }
 16 | 
 17 | .animated-mail {
 18 | 	position: absolute;
 19 | 	height: 150px;
 20 | 	width: 200px;
 21 | 	-webkit-transition: .4s;
 22 | 	-moz-transition: .4s;
 23 | 	transition: .4s;
 24 | 	
 25 | 	.body {
 26 | 		position: absolute;
 27 | 		bottom: 0;
 28 | 		width: 0;
 29 | 		height: 0;
 30 | 		border-style: solid;
 31 | 		border-width: 0 0 100px 200px;
 32 | 		border-color: transparent transparent #e95f55 transparent;
 33 | 		z-index: 2;
 34 | 	}
 35 | 	
 36 | 	.top-fold {
 37 | 		position: absolute;
 38 | 		top: 50px;
 39 | 		width: 0;
 40 | 		height: 0;
 41 | 		border-style: solid;
 42 | 		border-width: 50px 100px 0 100px;
 43 | 		-webkit-transform-origin: 50% 0%;
 44 | 		-webkit-transition: transform .4s .4s, z-index .2s .4s;
 45 | 		-moz-transform-origin: 50% 0%;
 46 | 		-moz-transition: transform .4s .4s, z-index .2s .4s;
 47 | 		transform-origin: 50% 0%;
 48 | 		transition: transform .4s .4s, z-index .2s .4s;
 49 | 		border-color: #cf4a43 transparent transparent transparent;
 50 | 		z-index: 2;
 51 | 	}
 52 | 	
 53 | 	.back-fold {
 54 | 		position: absolute;
 55 | 		bottom: 0;
 56 | 		width: 200px;
 57 | 		height: 100px;
 58 | 		background: #cf4a43;
 59 | 		z-index: 0;
 60 | 	}
 61 | 	
 62 | 	.left-fold {
 63 | 		position: absolute;
 64 | 		bottom: 0;
 65 | 		width: 0;
 66 | 		height: 0;
 67 | 		border-style: solid;
 68 | 		border-width: 50px 0 50px 100px;
 69 | 		border-color: transparent transparent transparent #e15349;
 70 | 		z-index: 2;
 71 | 	}
 72 | 	
 73 | 	.letter {
 74 | 		left: 20px;
 75 | 		bottom: 0px;
 76 | 		position: absolute;
 77 | 		width: 160px;
 78 | 		height: 60px;
 79 | 		background: white;
 80 | 		z-index: 1;
 81 | 		overflow: hidden;
 82 | 		-webkit-transition: .4s .2s;
 83 | 		-moz-transition: .4s .2s;
 84 | 		transition: .4s .2s;
 85 | 		
 86 | 		.letter-border {
 87 | 			height: 10px;
 88 | 			width: 100%;
 89 |       background: repeating-linear-gradient(
 90 |         -45deg,
 91 |         #cb5a5e,
 92 |         #cb5a5e 8px,
 93 |         transparent 8px,
 94 |         transparent 18px
 95 |       );
 96 | 		}
 97 | 		
 98 | 		.letter-title {
 99 | 			margin-top: 10px;
100 | 			margin-left: 5px;
101 | 			height: 10px;
102 | 			width: 40%;
103 | 			background: #cb5a5e;
104 | 		}
105 | 		.letter-context {
106 | 			margin-top: 10px;
107 | 			margin-left: 5px;
108 | 			height: 10px;
109 | 			width: 20%;
110 | 			background: #cb5a5e;
111 | 		}
112 | 		
113 | 		.letter-stamp {
114 | 			margin-top: 30px;
115 | 			margin-left: 120px;
116 | 			border-radius: 100%;
117 | 			height: 30px;
118 | 			width: 30px;
119 | 			background: #cb5a5e;
120 | 			opacity: 0.3;
121 | 		}
122 | 	}
123 | }
124 | 
125 | .shadow {
126 | 	position: absolute;
127 | 	top: 200px;
128 | 	left: 50%;
129 | 	width: 400px;
130 | 	height: 30px;
131 | 	transition: .4s;
132 | 	transform: translateX(-50%);
133 | 	-webkit-transition: .4s;
134 | 	-webkit-transform: translateX(-50%);
135 | 	-moz-transition: .4s;
136 | 	-moz-transform: translateX(-50%);
137 | 	
138 | 	border-radius: 100%;
139 | 	background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
140 | }
141 | 
142 | 	.letter-image:hover {
143 | 		.animated-mail {
144 | 			transform: translateY(50px);
145 | 			-webkit-transform: translateY(50px);
146 | 			-moz-transform: translateY(50px);
147 | 		}
148 | 		
149 | 		.animated-mail .top-fold {
150 | 			transition: transform .4s, z-index .2s;
151 | 			transform: rotateX(180deg);
152 | 			-webkit-transition: transform .4s, z-index .2s;
153 | 			-webkit-transform: rotateX(180deg);
154 | 			-moz-transition: transform .4s, z-index .2s;
155 | 			-moz-transform: rotateX(180deg);
156 | 			z-index: 0;
157 | 		}
158 | 		
159 | 		.animated-mail .letter {
160 | 			height: 180px;
161 | 		}
162 | 		
163 | 		.shadow {
164 | 			width: 250px;
165 | 		}
166 | 	}


--------------------------------------------------------------------------------
/pill-loader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Pill Loader</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="content">
11 |         <div class="pill">
12 |             <div class="medicine">
13 |                 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
14 |             </div>
15 |             <div class="side"></div>
16 |             <div class="side"></div>
17 |         </div>
18 |     </div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/play-button/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="UTF-8"/>
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Play Button</title>
 7 |         <link rel="stylesheet" href="style.css">
 8 |     </head>
 9 |     <body>
10 |         <div class="content">
11 |             <input type="checkbox" id="play">
12 |             <label for="play">
13 |                 <div class="letter-p"></div>
14 |                 <div class="letter-l"></div>
15 |                 <div class="letter-a"><span></span></div>
16 |                 <div class="letter-y"></div>
17 |             </label>
18 |         </div>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/preloader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Preloader</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="load">
11 |       <hr/><hr/><hr/><hr/>
12 |     </div>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/preloader/style.css:
--------------------------------------------------------------------------------
 1 | body{background:#ECF0F1}
 2 | 
 3 | .load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
 4 |   /*change these sizes to fit into your project*/
 5 |   width:100px;
 6 |   height:100px;
 7 | }
 8 | .load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
 9 | 
10 | .load :first-child{background:#19A68C;animation-delay:-1.5s}
11 | .load :nth-child(2){background:#F63D3A;animation-delay:-1s}
12 | .load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
13 | .load :last-child{background:#193B48}
14 | 
15 | @keyframes spin{
16 |   0%,100%{transform:translate(0)}
17 |   25%{transform:translate(160%)}
18 |   50%{transform:translate(160%, 160%)}
19 |   75%{transform:translate(0, 160%)}
20 | }


--------------------------------------------------------------------------------
/product-card-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>
 6 | 		Product Card Animation
 7 | 	</title>
 8 |     <link rel="stylesheet" type="text/css" href="style.css">
 9 | </head>
10 | 
11 | <body>  
12 |    <div class="container">  
13 |      <div class="card">  
14 |        <div class="imgBx">  
15 |          <img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5782.png" alt="nike-air-shoe">  
16 |        </div>  
17 |        <div class="contentBx">  
18 |          <h2>Nike Shoes</h2>  
19 |          <div class="size">  
20 |            <h3>Size :</h3>  
21 |            <span>7</span>  
22 |            <span>8</span>  
23 |            <span>9</span>  
24 |            <span>10</span>  
25 |          </div>  
26 |          <div class="color">  
27 |            <h3>Color :</h3>  
28 |            <span></span>  
29 |            <span></span>  
30 |            <span></span>  
31 |          </div>  
32 |          <a href="#">Buy Now</a>  
33 |        </div>  
34 |      </div>  
35 |    </div>  
36 | </body>  
37 | </html>  
38 | 


--------------------------------------------------------------------------------
/product-card-animation/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600,700,800, 800i, 900&display=swap');  
  2 | * {  
  3 |   padding: 0;  
  4 |   margin: 0;  
  5 |   font-family: 'Poppins', sans-serif;  
  6 | }  
  7 | body {  
  8 |   display: flex;  
  9 |   justify-content: center;  
 10 |   align-items: center;  
 11 |   min-height: 100vh;  
 12 |   background: #000000;  
 13 | }  
 14 | .container {  
 15 |   position: relative;  
 16 | }  
 17 | .container .card {  
 18 |   position: relative;  
 19 |   width: 320px;  
 20 |   height: 450px;  
 21 |   background: #232323;  
 22 |   border-radius: 20px;  
 23 |   overflow: hidden;  
 24 | }  
 25 | .container .card:before {  
 26 |   content: "";  
 27 |   position: absolute;  
 28 |   top: 0;  
 29 |   left: 0;  
 30 |   width: 100%;  
 31 |   height: 100%;  
 32 |   background: #1BBFE9;  
 33 |   clip-path: circle(150px at 80% 20%);  
 34 |   transition: 0.5s ease-in-out;  
 35 | }  
 36 | .container .card:hover:before {  
 37 |   clip-path: circle(300px at 80% -20%);  
 38 | }  
 39 | .container .card:after {  
 40 |   content: "Nike";  
 41 |   position: absolute;  
 42 |   top: 30%;  
 43 |   left: -20%;  
 44 |   font-size: 12em;  
 45 |   font-weight: 800;  
 46 |   font-style: italic;  
 47 |   color: rgba(255, 255, 255, 0.04);  
 48 | }  
 49 | .container .card .imgBx {  
 50 |   position: absolute;  
 51 |   top: 50%;  
 52 |   transform: translateY(-50%);  
 53 |   z-index: 1000;  
 54 |   width: 100%;  
 55 |   height: 100%;  
 56 |   transition: .5s;  
 57 | }  
 58 | .container .card:hover .imgBx {  
 59 |   top: 0%;  
 60 |   transform: translateY(-25%);  
 61 |   /* bug */  
 62 | }  
 63 | .container .card .imgBx img {  
 64 |   position: absolute;  
 65 |   top: 50%;  
 66 |   left: 50%;  
 67 |   transform: translate(-50%, -50%) rotate(20deg);  
 68 |   width: 270px;  
 69 | }  
 70 | .container .card .contentBx {  
 71 |   position: absolute;  
 72 |   bottom: 0;  
 73 |   width: 100%;  
 74 |   height: 100px;  
 75 |   text-align: center;  
 76 |   transition: 1s;  
 77 |   z-index: 90;  
 78 | }  
 79 | .container .card:hover .contentBx {  
 80 |   height: 210px;  
 81 | }  
 82 | .container .card .contentBx h2 {  
 83 |   position: relative;  
 84 |   font-weight: 600;  
 85 |   letter-spacing: 1px;  
 86 |   color: #fff;  
 87 | }  
 88 | .container .card .contentBx .size,  
 89 | .container .card .contentBx .color {  
 90 |   display: flex;  
 91 |   justify-content: center;  
 92 |   align-items: center;  
 93 |   padding: 8px 20px;  
 94 |   transition: .5s;  
 95 |   opacity: 0;  
 96 |   visibility: hidden;  
 97 | }  
 98 | .container .card:hover .contentBx .size {  
 99 |   opacity: 1;  
100 |   visibility: visible;  
101 |   transition-delay: .5s;  
102 | }  
103 | .container .card:hover .contentBx .color {  
104 |   opacity: 1;  
105 |   visibility: visible;  
106 |   transition-delay: .6s;  
107 | }  
108 | .container .card .contentBx .size h3,  
109 | .container .card .contentBx .color h3 {  
110 |   color: white;  
111 |   font-weight: 300;  
112 |   font-size: 14px;  
113 |   text-transform: uppercase;  
114 |   letter-spacing: 2px;  
115 |   margin-right: 10px;  
116 | }  
117 | .container .card .contentBx .size span {  
118 |   width: 26px;  
119 |   height: 26px;  
120 |   text-align: center;  
121 |   line-height: 26px;  
122 |   font-size: 14px;  
123 |   display: inline-block;  
124 |   color: #111;  
125 |   background: #fff;  
126 |   margin: 0 5px;  
127 |   transition: .5s;  
128 |   color: #111;  
129 |   border-radius: 4px;  
130 |   cursor: pointer;  
131 | }  
132 | .container .card .contentBx .size span:hover { /* other bug */  
133 |   background: #B90000;  
134 | }  
135 | .container .card .contentBx .color span {  
136 |   width: 20px;  
137 |   height: 20px;  
138 |   background: #ff0;  
139 |   border-radius: 50%;  
140 |   margin: 0 5px;  
141 |   cursor: pointer;  
142 | }  
143 | .container .card .contentBx .color span:nth-child(2) {  
144 |    background: #1BBFE9;  
145 | }  
146 | .container .card .contentBx .color span:nth-child(3) {  
147 |    background: #1B2FE9;  
148 | }  
149 | .container .card .contentBx .color span:nth-child(4) {  
150 |    background: #080481;  
151 | }  
152 | .container .card .contentBx a {  
153 |   display: inline-block;  
154 |   padding: 10px 20px;  
155 |   background: #fff;  
156 |   border-radius: 4px;  
157 |   margin-top: 10px;  
158 |   text-decoration: none;  
159 |   font-weight: 600;  
160 |   color: #111;  
161 |   opacity: 0;  
162 |   transform: translateY(50px);  
163 |   transition: .5s;  
164 | }  
165 | .container .card:hover .contentBx a {  
166 |   opacity: 1;  
167 |   transform: translateY(0px);  
168 |   transition-delay: .7s;  
169 | }   


--------------------------------------------------------------------------------
/profile-card-hover/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Profile Card Hover</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <main class='card'>
11 |         <div class='card-container'>
12 |           <div class='bio'>
13 |             <h2>Janelle Howard</h2>
14 |             <p>Graphic Designer</p>
15 |           </div>
16 |           <ul class='data'>
17 |             <li>
18 |               <span class='count'>100</span>
19 |               <span class='type'>Posts</span>
20 |             </li>
21 |             <li>
22 |               <span class='count'>550</span>
23 |               <span class='type'>Followers</span>
24 |             </li>
25 |             <li>
26 |               <span class='count'>200</span>
27 |               <span class='type'>Following</span>
28 |             </li>
29 |           </ul>
30 |           <div class='cta'>
31 |             <button class='follow'>Follow</button>
32 |             <button class='message'>Message</button>
33 |           </div>
34 |         </div>
35 |       </main>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/profile-card-hover/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --name: rgba(0,0,0,0.65);
  3 |     --dark: rgba(0,0,0,0.5);
  4 |     --gray: rgba(0,0,0,0.25);
  5 |     --primary: rgb(164, 221, 107);
  6 |   }
  7 |   
  8 |   * {
  9 |     margin: 0;
 10 |     padding: 0;
 11 |     box-sizing: border-box;
 12 |   }
 13 |   
 14 |   body {
 15 |     height: 100vh;
 16 |     display: grid;
 17 |     place-items: center;
 18 |   }
 19 |   
 20 |   .card {
 21 |     position: relative;
 22 |     width: 275px;
 23 |     height: 170px;
 24 |     border-radius: 1rem;
 25 |     background-color: white;
 26 |     box-shadow: 0 0 8px 1px rgba(0,0,0,0.1);
 27 |     transition: height 1s;
 28 |   
 29 |     &:hover {
 30 |       height: 300px;
 31 |     }
 32 |   
 33 |     &:hover .card-container {
 34 |       height: 200px;
 35 |     }
 36 |   
 37 |     &:hover::after {
 38 |       left: 57.5%;
 39 |       transform: scale(1.3) translate(-50%,-45%);
 40 |     }
 41 |   
 42 |     &::after {
 43 |       content: '';
 44 |       position: absolute;
 45 |       top: 0;
 46 |       left: 50%;
 47 |       transform-origin: center;
 48 |       transform: scale(1) translate(-50%,-40%);
 49 |       width: 125px;
 50 |       height: 125px;
 51 |       background-image: url(https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2261&q=80);
 52 |       background-size: cover;
 53 |       border-radius: 1rem;
 54 |       box-shadow: 0 1px 7px rgba(0,0,0,0.2);
 55 |       transition: all 1.2s;
 56 |     }
 57 |   }
 58 |   
 59 |   .card-container {
 60 |     height: 70px;
 61 |     transform: translatey(100px);
 62 |     display: flex;
 63 |     flex-direction: column;
 64 |     align-items: center;
 65 |     gap: 1.75rem;
 66 |     font: 1rem helvetica, sans-serif;
 67 |     text-align: center;
 68 |     overflow: hidden;
 69 |     transition: height 1s;
 70 |   
 71 |     & .bio {
 72 |       & h2 {
 73 |         font-size: 1.1rem;
 74 |         color: var(--name);
 75 |         margin-bottom: 0.4rem;
 76 |       }
 77 |   
 78 |       & p {
 79 |         font-size: 0.75rem;
 80 |         color: var(--gray);
 81 |       }
 82 |     }
 83 |   
 84 |     & .data {
 85 |       display: flex;
 86 |       list-style-type: none;
 87 |   
 88 |       & li {
 89 |         width: 85px;
 90 |       }
 91 |   
 92 |       & li span {
 93 |         display: block;
 94 |       }
 95 |   
 96 |       & .count {
 97 |         font-size: 0.8rem;
 98 |         font-weight: 900;
 99 |         color: var(--dark);
100 |         margin-bottom: 0.25rem;
101 |       }
102 |   
103 |       & .type {
104 |         font-size: 0.7rem;
105 |         color: var(--gray);
106 |       }
107 |     }
108 |   
109 |     & .cta {
110 |       & button {
111 |         width: 100px;
112 |         margin: 0 0.25rem;
113 |         padding: 0.5rem 0;
114 |         background-color: transparent;
115 |         font-size: 0.9rem;
116 |         font-weight: 900;
117 |         border: 1px solid var(--gray);
118 |         border-radius: 0.25rem;
119 |         cursor: pointer;
120 |       }
121 |   
122 |       & .follow {
123 |         background-color: var(--primary);
124 |         border-color: var(--primary);
125 |         color: white;
126 |       }
127 |   
128 |       & .message {
129 |         color: var(--gray);
130 |       }
131 |     }
132 |   }


--------------------------------------------------------------------------------
/progress-bar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Progress Bar</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="center">
11 |       <div class="progress-bar"></div>
12 |     </div>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/progress-bar/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     width: 100%;
 3 |     height: 100vh;
 4 |     margin: 0;
 5 |     padding: 0;
 6 | }
 7 | 
 8 | .center {
 9 |     width: 100%;
10 |     height: 100%;
11 |     display: flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     background: rgb(124, 19, 19);
15 | }
16 | 
17 | .progress-bar {
18 |     width: 400px;
19 |     height: 24px;
20 |     box-sizing: border-box; 
21 |     outline: 0.6mm solid rgb(255, 255, 0);
22 |     position: relative;
23 | }
24 | 
25 | .progress-bar::before {
26 |     position: absolute;
27 |     content: "";
28 |     top: 50%;
29 |     left: 2px;
30 |     transform: translate(0, -50%);
31 |     width: 0;
32 |     height: 20px;
33 |     background: rgb(255, 255, 0);
34 |     animation: progress 1.5s forwards infinite;
35 | }
36 | 
37 | @keyframes progress {
38 |     to {
39 |       width: calc(100% - 2px);
40 |     }
41 | }


--------------------------------------------------------------------------------
/radial-menu/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>
 6 | 		Radial Menu
 7 | 	</title>
 8 |     
 9 |     <link rel="stylesheet" type="text/css" href="style.css">
10 |     
11 | </head>
12 | <body>
13 | 
14 | <span><span></span></span>
15 | <div class="wrap">
16 | 	<a href="#"><div></div></a>
17 | 	<a href="#"><div></div></a>
18 | 	<a href="#"><div></div></a>
19 | 	<a href="#"><div></div></a>
20 | 	<a href="#"><div></div></a>
21 | 
22 | </div>
23 | 
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/radial-menu/style.css:
--------------------------------------------------------------------------------
  1 | body,html{
  2 | 	margin: 0;
  3 | 	padding: 0;
  4 | 	height: 100%;
  5 | }
  6 | body{
  7 | 	background: #E3DFD2;
  8 | 	box-shadow: inset 0 0 20vmin 0 #585247;
  9 | }
 10 | .wrap{
 11 | 	position: relative;
 12 | 	width: 80vmin;
 13 | 	height: 80vmin;
 14 | 	background: inherit;
 15 | 	transform: scale(0.2) translateZ(0px);
 16 | 	opacity: 0;
 17 | 	transition: transform .5s, opacity .5s;
 18 | 	margin: 0 auto;
 19 | }
 20 | 
 21 | a{
 22 | 	position: absolute;
 23 | 	left: 0; top: 0;
 24 | 	width: 47.5%;height: 47.5%;
 25 | 	overflow: hidden;
 26 | 	transform: scale(.5) translateZ(0px);
 27 | 	background: #585247;
 28 | }
 29 | a div{
 30 | 	height: 100%;
 31 | 	background-size: cover;
 32 | 	opacity: .5;
 33 | 	transition: opacity .5s;
 34 | 	border-radius: inherit;
 35 | 
 36 | }
 37 | a:nth-child(1)
 38 | {
 39 | 	border-radius: 40vmin 0 0 0;
 40 | 	transform-origin: 110% 110%;
 41 | 	transition: transform .4s .15s;
 42 | }
 43 | a:nth-child(1) div{
 44 | 	background-image:url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
 45 | }
 46 | 
 47 | a:nth-child(2)
 48 | {
 49 | 	border-radius: 0 40vmin 0 0;
 50 | 	left: 52.5%;
 51 | 	transform-origin: -10% 110%;
 52 | 	transition: transform .4s .2s;
 53 | }
 54 | a:nth-child(2) div{
 55 | 	background-image:url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg');
 56 | }
 57 | 
 58 | 
 59 | a:nth-child(3)
 60 | {
 61 | 	border-radius: 0 0 0 40vmin;
 62 | 	top: 52.5%;
 63 | 	transform-origin: 110% -10%;
 64 | 	transition: transform .4s .25s;
 65 | }
 66 | a:nth-child(3) div{
 67 | 	background-image:url('https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg');
 68 | }
 69 | a:nth-child(4)
 70 | {
 71 | 	border-radius: 0 0 40vmin 0;
 72 | 	top: 52.5%; left: 52.5%;
 73 | 	transform-origin: -10% -10%;
 74 | 	transition: transform .4s .3s;
 75 | }
 76 | a:nth-child(4) div{
 77 | 	background-image: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');
 78 | }
 79 | 
 80 | 
 81 | a:nth-child(5)
 82 | {
 83 | 	border-radius: 50vmin;
 84 | 	width: 55%; height: 55%;
 85 | 	top: 22.5%; left: 22.5%;
 86 | 	transform-origin: -10% -10%;
 87 | 	transform: scale(1);
 88 | 	box-shadow: 0 0 0 5vmin #E3DfD2;
 89 | 
 90 | }
 91 | a:nth-child(5) div{
 92 | 	background-image: url('https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg');
 93 | 
 94 | }
 95 | 
 96 | span{
 97 | 	position: relative;
 98 | 	display: block;
 99 | 	margin: 0 auto;
100 | 	top: 45vmin;
101 | 	width: 10vmin;
102 | 	height: 10vmin;
103 | 	border-radius: 100%;
104 | 	background: #585247;
105 | 	transform: translateZ(0px);
106 | }
107 | span span{
108 | 	position: absolute;
109 | 	width: 60%;
110 | 	height: 3px;
111 | 	background: #ACA696;
112 | 	left: 20%;
113 | 	top: 50%;
114 | 	border-radius: 0;
115 | }
116 | span span:after, span span:before{
117 | 	content: "";
118 | 	position: absolute;
119 | 	left: 0;
120 | 	top: -1.5vmin;
121 | 	width: 100%;
122 | 	height: 100%;
123 | 	background: inherit;
124 | }
125 | span span:after{
126 | 	top: 1.5vmin;
127 | }
128 | span:hover + .wrap, .wrap:hover{
129 | 	transform: scale(0.8) translateZ(0px);
130 | 	opacity: 1;
131 | }
132 | span:hover + .wrap a, .wrap:hover a{
133 | transform: scale(1) translateZ(0px);
134 | }
135 | 
136 | 
137 | 
138 | a:hover div{
139 | 	opacity: 1;
140 | 	transform: translateZ(0px);
141 | }
142 | 
143 | 
144 | 
145 | 
146 | 
147 | 
148 | 
149 | 


--------------------------------------------------------------------------------
/radiant-ripple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>RadiantRipple</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="loader">
11 |         <span></span>
12 |         <span></span>
13 |         <span></span>
14 |         <span></span>
15 |       </div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/radiant-ripple/style.css:
--------------------------------------------------------------------------------
 1 | *{box-sizing:border-box}
 2 | body {
 3 |   margin: 0;
 4 |   display: flex;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 |   height: 100vh;
 8 | }
 9 | @keyframes loader {
10 |   0% {transform:rotate(-45deg)}
11 |   50%{transform:rotate(-135deg)}
12 |   100%{transform:rotate(-225deg)}}
13 | @keyframes span-1 {
14 |   0% {transform:translate(0);}
15 |   50%{transform:translate(-50px, 0);border-color:#EE4D68}
16 |   100%{transform:translate(0);}}
17 | @keyframes span-2 {
18 |   0%{transform:translate(0);}
19 |   50%{transform:translate(50px, 0);border-color:#875678}
20 |   100%{transform:translate(0);}}
21 | @keyframes span-3 {
22 |   0%{transform:translate(0);}
23 |   50%{transform:translate(0, -50px);border-color:#FF9900}
24 |   100%{transform:translate(0);}}
25 | @keyframes span-4 {
26 |   0%{transform:translate(0);}
27 |   50%{transform:translate(0, 50px);border-color:#00E4F6}
28 |   100%{transform:translate(0);}}
29 | .loader {
30 |   width: 50px;
31 |   height: 50px;
32 |   position: relative;
33 |   animation: loader 2s infinite ease-in-out;
34 | }
35 | .loader span {
36 |   width: 50px;
37 |   height: 50px;
38 |   position: absolute;
39 |   left: 0;
40 |   top: 0;
41 |   border: 4px solid #0B1B48;
42 | }
43 | .loader span:nth-child(1) {
44 |   animation: span-1 2s ease-in-out infinite;
45 | }
46 | .loader span:nth-child(2) {
47 |   animation: span-2 2s ease-in-out infinite;
48 | }
49 | .loader span:nth-child(3) {
50 |   animation: span-3 2s ease-in-out infinite;
51 | }
52 | .loader span:nth-child(4) {
53 |   animation: span-4 2s ease-in-out infinite;
54 | }


--------------------------------------------------------------------------------
/responsive-footer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Responsive Footer</title>
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <section class="footer">
12 |         <div class="footer-row">
13 |           <div class="footer-col">
14 |             <h4>Info</h4>
15 |             <ul class="links">
16 |               <li><a href="#">About Us</a></li>
17 |               <li><a href="#">Compressions</a></li>
18 |               <li><a href="#">Customers</a></li>
19 |               <li><a href="#">Service</a></li>
20 |               <li><a href="#">Collection</a></li>
21 |             </ul>
22 |           </div>
23 |   
24 |           <div class="footer-col">
25 |             <h4>Get Help</h4>
26 |             <ul class="links">
27 |               <li><a href="#">FAQ</a></li>
28 |               <li><a href="#">Shipping</a></li>
29 |               <li><a href="#">Returns</a></li>
30 |               <li><a href="#">Order Status</a></li>
31 |               <li><a href="#">Payment Options</a></li>
32 |             </ul>
33 |           </div>
34 |   
35 |           <div class="footer-col">
36 |             <h4>Quick Links</h4>
37 |             <ul class="links">
38 |               <li><a href="#">Terms and Conditions</a></li>
39 |               <li><a href="#">Privacy Policy</a></li>
40 |               <li><a href="#">Disclaimer</a></li>
41 |             </ul>
42 |           </div>
43 |   
44 |           <div class="footer-col">
45 |             <h4>Newsletter</h4>
46 |             <p>
47 |               Subscribe to our newsletter for a weekly dose
48 |               of news, updates, helpful tips, and
49 |               exclusive offers.
50 |             </p>
51 |             <form action="#">
52 |               <input type="text" placeholder="Enter your email address" required>
53 |               <button type="submit">SUBSCRIBE</button>
54 |             </form>
55 |             <div class="icons">
56 |               <i class="fa-brands fa-facebook-f"></i>
57 |               <i class="fa-brands fa-twitter"></i>
58 |               <i class="fa-brands fa-instagram"></i>
59 |               <i class="fa-brands fa-youtube"></i>
60 |             </div>
61 |           </div>
62 |         </div>
63 |       </section>
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/responsive-footer/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: 'Open Sans', sans-serif;
  8 | }
  9 | 
 10 | .footer {
 11 |   position: absolute;
 12 |   top: 50%;
 13 |   left: 50%;
 14 |   transform: translate(-50%, -50%);
 15 |   max-width: 1280px;
 16 |   width: 95%;
 17 |   background: #000000;
 18 |   border-radius: 6px;
 19 | }
 20 | 
 21 | .footer .footer-row {
 22 |   display: flex;
 23 |   flex-wrap: wrap;
 24 |   justify-content: space-between;
 25 |   gap: 3.5rem;
 26 |   padding: 60px;
 27 | }
 28 | 
 29 | .footer-row .footer-col h4 {
 30 |   color: #fff;
 31 |   font-size: 1.2rem;
 32 |   font-weight: 400;
 33 | }
 34 | 
 35 | .footer-col .links {
 36 |   margin-top: 20px;
 37 | }
 38 | 
 39 | .footer-col .links li {
 40 |   list-style: none;
 41 |   margin-bottom: 10px;
 42 | }
 43 | 
 44 | .footer-col .links li a {
 45 |   text-decoration: none;
 46 |   color: #bfbfbf;
 47 | }
 48 | 
 49 | .footer-col .links li a:hover {
 50 |   color: #fff;
 51 | }
 52 | 
 53 | .footer-col p {
 54 |   margin: 20px 0;
 55 |   color: #bfbfbf;
 56 |   max-width: 300px;
 57 | }
 58 | 
 59 | .footer-col form {
 60 |   display: flex;
 61 |   gap: 5px;
 62 | }
 63 | 
 64 | .footer-col input {
 65 |   height: 40px;
 66 |   border-radius: 6px;
 67 |   background: none;
 68 |   width: 100%;
 69 |   outline: none;
 70 |   border: 1px solid #7489C6 ;
 71 |   caret-color: #fff;
 72 |   color: #fff;
 73 |   padding-left: 10px;
 74 | }
 75 | 
 76 | .footer-col input::placeholder {
 77 |   color: #ccc;
 78 | }
 79 | 
 80 |  .footer-col form button {
 81 |   background: #ca1f1f;
 82 |   color: white;
 83 |   outline: none;
 84 |   border: none;
 85 |   padding: 10px 15px;
 86 |   border-radius: 6px;
 87 |   cursor: pointer;
 88 |   font-weight: 500;
 89 |   transition: 0.2s ease;
 90 | }
 91 | 
 92 | .footer-col form button:hover {
 93 |   background: #cecccc;
 94 | }
 95 | 
 96 | .footer-col .icons {
 97 |   display: flex;
 98 |   margin-top: 30px;
 99 |   gap: 30px;
100 |   cursor: pointer;
101 | }
102 | 
103 | .footer-col .icons i {
104 |   color: #afb6c7;
105 | }
106 | 
107 | .footer-col .icons i:hover  {
108 |   color: #fff;
109 | }
110 | 
111 | @media (max-width: 768px) {
112 |   .footer {
113 |     position: relative;
114 |     bottom: 0;
115 |     left: 0;
116 |     transform: none;
117 |     width: 100%;
118 |     border-radius: 0;
119 |   }
120 | 
121 |   .footer .footer-row {
122 |     padding: 20px;
123 |     gap: 1rem;
124 |   }
125 | 
126 |   .footer-col form {
127 |     display: block;
128 |   }
129 | 
130 |   .footer-col form :where(input, button) {
131 |     width: 100%;
132 |   }
133 | 
134 |   .footer-col form button {
135 |     margin: 10px 0 0 0;
136 |   }
137 | }
138 | 


--------------------------------------------------------------------------------
/ripple-loader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Ripple Loader</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="content">
11 |         <div class="surface">
12 |             <div class="waves"></div>
13 |             <div class="waves"></div>
14 |         </div>
15 |         <div class="loaders">
16 |             <div class="loader"></div>
17 |         </div>
18 |         <div class="loaders">
19 |             <div class="loader shadow"></div>
20 |         </div>
21 |     </div>    
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/ripple-loader/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--loader: #111;
  3 | 	--blue: #2196f3;
  4 | 	--spd: 1.725s;
  5 | }
  6 | 
  7 | * { 
  8 | 	transform-style: preserve-3d;
  9 | 	box-sizing: border-box;
 10 | }
 11 | 
 12 | body {
 13 | 	margin: 0;
 14 | 	padding: 0;
 15 | 	width: 100vw;
 16 | 	height: 100vh;
 17 | 	overflow: hidden;
 18 | 	display: flex;
 19 | 	align-items: center;
 20 | 	justify-content: center;
 21 | 	perspective: 100vmin;
 22 | 	background: var(--blue);
 23 | }
 24 | 
 25 | .content {
 26 | 	width: 70vmin;
 27 | 	height: 50vmin;
 28 | 	display: flex;
 29 | 	align-items: center;
 30 | 	justify-content: center;
 31 | }
 32 | 
 33 | .surface {
 34 | 	width: 70vmin;
 35 | 	height: 70vmin;
 36 | 	transform: rotateX(60deg);
 37 | }
 38 | 
 39 | .surface:before,
 40 | .surface:after {
 41 | 	content: "";
 42 | 	background: 
 43 | 		linear-gradient(180deg, #fff0 1.35vmin, var(--blue) 0 1.7vmin, #fff0 0 0vmin),
 44 | 		radial-gradient(circle at 50% 95%, #fff0 1vmin, var(--blue) calc(1vmin + 1px) 1.5vmin, #fff0 0 100%), 
 45 | 		radial-gradient(circle at 50% 5%, #fff0 1vmin, var(--blue) calc(1vmin + 1px) 1.5vmin, #fff0 0 100%);
 46 | 	width: 2.15vmin;
 47 | 	height: 3vmin;
 48 | 	position: absolute;
 49 | 	left: 14.95vmin;
 50 | 	top: 34vmin;
 51 | 	transform: rotateX(90deg);
 52 | 	border-radius: 5px;
 53 | 	animation: hide var(--spd) 0s infinite;
 54 | 	opacity: 0;
 55 | }
 56 | 
 57 | .surface:after {
 58 | 	left: 52.8vmin;
 59 | 	animation-delay: calc(var(--spd) / 2);
 60 | }
 61 | 
 62 | @keyframes hide {
 63 | 	0%, 10% { opacity: 1; }	
 64 | 	15%, 100% { opacity: 0; }
 65 | }
 66 | 
 67 | .loaders { 
 68 | 	position: absolute;
 69 | 	width: 40vmin;
 70 | 	height: 40vmin;
 71 | 	clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
 72 | }
 73 | 
 74 | .loader { 
 75 | 	position: absolute;
 76 | 	width: 40vmin;
 77 | 	height: 40vmin;
 78 | 	background: 
 79 | 		radial-gradient(circle at 20vmin 50%, #fff0 18.1vmin, var(--loader) calc(18.1vmin + 1px) 100%),
 80 | 		radial-gradient(circle at 50% 50%, var(--loader) 0.88vmin, #fff0 calc(0.88vmin + 1px) 100%),
 81 | 		radial-gradient(circle at 50% 50%, var(--loader) 0.88vmin, #fff0 calc(0.88vmin + 1px) 100%);
 82 | 	background-size: 6vmin 6vmin, 1.9vmin 1.9vmin, 1.9vmin 1.9vmin;
 83 | 	background-position: 0 50%, 0.2vmin 43%, 0.2vmin 57%;
 84 | 	background-repeat: no-repeat;
 85 | 	border-radius: 100%;
 86 | 	transform: rotate(-25deg);
 87 | 	transition: all 1s ease 0s;
 88 | 	animation: loading var(--spd) linear 0s infinite;
 89 | }
 90 | 
 91 | .loader.shadow {
 92 | 	opacity: 0.25;
 93 | 	transform: rotateX(180deg) rotate(-25deg); 
 94 | 	animation-name: loading-shadow;
 95 | }
 96 | 
 97 | @keyframes loading {
 98 | 	100% { transform: rotate(335deg); }
 99 | }
100 | 
101 | @keyframes loading-shadow {
102 | 	100% { transform: rotateX(180deg) rotate(335deg); }
103 | }
104 | 
105 | .loaders + .loaders { 
106 | 	clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
107 | }
108 | 
109 | .waves {
110 | 	width: 100%;
111 | 	height: 100%;
112 | 	position: absolute;
113 | 	filter: blur(1px);
114 | }
115 | 
116 | .waves:before, 
117 | .waves:after {
118 | 	content: "";
119 | 	width: 5vmin;
120 | 	height: 5vmin;
121 | 	border-radius: 100%;
122 | 	position: absolute;
123 | 	top: 32vmin;
124 | 	left: 13.1vmin;
125 | 	border: 1px solid #333;
126 | 	animation: wave var(--spd) ease 0s infinite;
127 | 	transform:scale(0); 
128 | 	opacity: 0;
129 | }
130 | 
131 | .waves:after {
132 | 	top: 32vmin;
133 | 	left: 51.35vmin;
134 | 	animation-delay: calc(calc(var(--spd) / 4) * 1.85); /*1.9s*/
135 | }
136 | 
137 | @keyframes wave {
138 | 	0% { transform:scale(0); opacity: 1;}
139 | 	60% { transform:scale(2); opacity: 0;}
140 | 	100% { transform:scale(0); opacity: 0;}	
141 | }
142 | 
143 | .waves + .waves:before, 
144 | .waves + .waves:after {
145 | 	width: 2vmin;
146 | 	height: 2vmin;
147 | 	margin-left: 1.5vmin;
148 | 	margin-top: 1.5vmin;
149 | 	animation-delay: calc(var(--spd) / 8);
150 | }
151 | 
152 | .waves + .waves:after {
153 | 	animation-delay: calc(calc(var(--spd) / 4) * 2.5) ;
154 | }


--------------------------------------------------------------------------------
/search-bar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=">
 6 |     <title>
 7 |         Search Bar
 8 |     </title>
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
10 |     <link rel="stylesheet" type="text/css" href="style.css">
11 | </head>
12 | 
13 | <body>
14 |     <div class = 'search-box'>
15 |       <input class = "search-text" type="text" placeholder = "Search Anything">
16 |     <a href="#" class = "search-btn">
17 |       <i class="fas fa-search"></i>
18 |     </a>
19 |     </div>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/search-bar/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body {
 3 | 	margin: 0;
 4 | 	padding: 0;
 5 | 	background: #99a811;
 6 |   }
 7 |   
 8 |   .search-box {
 9 | 	position: absolute;
10 | 	top : 50%;
11 | 	left: 50%;
12 | 	transform: translate(-50%, -50%);
13 | 	background: #2f3640;
14 | 	height: 40px;
15 | 	border-radius: 40px;
16 | 	padding: 10px;
17 |   }
18 |   
19 |   .search-box:hover > .search-text{
20 | 	width: 240px;
21 | 	padding: 0 6px;
22 |   }
23 |   
24 |   .search-box:hover > .search-btn{
25 | 	background: white;
26 | 	color: black;
27 |   }
28 |   
29 |   .search-btn {
30 | 	color: #ffd000;
31 | 	float: right;
32 | 	width: 40px;
33 | 	height: 40px;
34 | 	border-radius: 50%;
35 | 	background: #2f3640;
36 | 	display: flex;
37 | 	justify-content: center;
38 | 	align-items: center;
39 | 	transition: 0.4s;
40 | 	cursor: pointer;
41 | 	text-decoration: none;
42 |   }
43 |   
44 |   .search-text {
45 | 	border: none;
46 | 	background: none;
47 | 	outline: none;
48 | 	float: left;
49 | 	padding: 0;
50 | 	color: white;
51 | 	font-size: 16px;
52 | 	font-weight: normal;
53 | 	transition: 0.4s;
54 | 	line-height: 40px;
55 | 	width: 0px;
56 |   }


--------------------------------------------------------------------------------
/season-slider/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Season Slider</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="four-seasons">
11 |         <div class="window">
12 |             <div>
13 |         <input type="radio" id="spring" name="slideshow" value="spring">
14 |         <label class="spring" for="spring">
15 |           <div class="r-button1"></div>
16 |           <div class="flowers"></div>
17 |         </label>
18 |         </div>
19 |             <div>
20 |         <input type="radio" id="summer" name="slideshow" value="summer">
21 |         <label class="summer" for="summer">
22 |           <div class="r-button2"></div>
23 |           <div class="sun"></div>
24 |         </label>
25 |         </div>
26 |             <div>
27 |         <input type="radio" id="autumn" name="slideshow" value="autumn">
28 |         <label class="autumn" for="autumn">
29 |           <div class="r-button3"></div>
30 |           <div class="leaf"></div>
31 |         </label>
32 |         </div>
33 |             <div>
34 |        <input type="radio" id="winter" name="slideshow" value="winter">
35 |         <label class="winter" for="winter">
36 |           <div class="r-button4"></div>
37 |           <div class="snow"></div>
38 |         </label>
39 |         </div>
40 |         </div>
41 |         <div class="window-sill"></div>
42 |       </div>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/sleeping-santa/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Sleeping Santa</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="circular-bg">
11 |         <div class="moon"></div> 
12 |         <div class="snores">
13 |           <div class="snore snore1">Z</div>
14 |           <div class="snore snore2">Z</div>
15 |           <div class="snore snore3">Z</div>
16 |         </div>
17 |         <div class="santa">
18 |           <div class="disc"></div>
19 |           
20 |           <div class="hat">
21 |             <div class="hat-space"></div>
22 |           </div>
23 |           <div class="furr"></div>
24 |           
25 |           <div class="face">
26 |             <div class="eyebrows eyebrows--left"></div>
27 |             <div class="eyebrows eyebrows--right"></div>
28 |             <div class="nose"></div>
29 |             <div class="beard">
30 |               <div class="beard--left"></div>
31 |               <div class="beard--right"></div>
32 |             </div>
33 |             <div class="mouth"> </div>
34 |           </div>
35 |           <div class="hand--up">
36 |           <div class="arm--right"></div>
37 |             
38 |           <div class="hand--right"></div>
39 |             
40 |           </div>
41 |           <div class="hand--left"></div>
42 |           <div class="stomach">
43 |             <div class="belt-buckle"></div>
44 |           </div>
45 |           <div class="leg--up"></div>
46 |           <div class="leg--down"></div>
47 |         </div>
48 |         <div class="christmas-tree">
49 |             <div class="tree-top4"></div>
50 |             <div class="tree-top3"></div>
51 |             <div class="tree-top2"></div>
52 |             <div class="tree-top1"></div>
53 |             <div class="tree-bottom"></div>
54 |         </div>
55 |         <div class="christmas-tree-small">
56 |             <div class="tree-top4"></div>
57 |             <div class="tree-top3"></div>
58 |             <div class="tree-top2"></div>
59 |             <div class="tree-top1"></div>
60 |             <div class="tree-bottom"></div>
61 |         </div>
62 |         <div class="christmas-tree-white">
63 |             <div class="tree-top4"></div>
64 |             <div class="tree-top3"></div>
65 |             <div class="tree-top2"></div>
66 |             <div class="tree-top1"></div>
67 |             <div class="tree-bottom"></div>
68 |         </div>
69 |         <div class="gift gift--orange">
70 |           <div class="gift-bow--left"></div>
71 |           <div class="gift-bow--right"></div>
72 |           <div class="gift-ribbon"></div>
73 |           <div class="gift-top"></div>
74 |           <div class="gift-bottom"></div>
75 |         </div>
76 |         <div class="gift">
77 |           <div class="gift-bow--left"></div>
78 |           <div class="gift-bow--right"></div>
79 |           <div class="gift-ribbon"></div>
80 |           <div class="gift-top"></div>
81 |           <div class="gift-bottom"></div>
82 |         </div>
83 |       </div>
84 |       
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/social-media-icon-popup/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Social Media Icon Popup</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 9 |   </head>
10 |   <body>
11 |     <ul class="wrapper">
12 |         <li class="icon facebook">
13 |           <span class="tooltip">Facebook</span>
14 |           <span><i class="fab fa-facebook-f"></i></span>
15 |         </li>
16 |         <li class="icon twitter">
17 |           <span class="tooltip">Twitter</span>
18 |           <span><i class="fab fa-twitter"></i></span>
19 |         </li>
20 |         <li class="icon instagram">
21 |           <span class="tooltip">Instagram</span>
22 |           <span><i class="fab fa-instagram"></i></span>
23 |         </li>
24 |         <li class="icon github">
25 |           <span class="tooltip">Github</span>
26 |           <span><i class="fab fa-github"></i></span>
27 |         </li>
28 |         <li class="icon youtube">
29 |           <span class="tooltip">Youtube</span>
30 |           <span><i class="fab fa-youtube"></i></span>
31 |         </li>
32 |       </ul>    
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/social-media-icon-popup/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | *:focus,
 10 | *:active {
 11 |   outline: none !important;
 12 |   -webkit-tap-highlight-color: transparent;
 13 | }
 14 | 
 15 | html,
 16 | body {
 17 |   display: grid;
 18 |   height: 100%;
 19 |   width: 100%;
 20 |   font-family: "Poppins", sans-serif;
 21 |   place-items: center;
 22 |   background: linear-gradient(315deg, #026e2f, #0ce680);
 23 | }
 24 | 
 25 | .wrapper {
 26 |   display: inline-flex;
 27 |   list-style: none;
 28 | }
 29 | 
 30 | .wrapper .icon {
 31 |   position: relative;
 32 |   background: #ffffff;
 33 |   border-radius: 50%;
 34 |   padding: 15px;
 35 |   margin: 10px;
 36 |   width: 50px;
 37 |   height: 50px;
 38 |   font-size: 18px;
 39 |   display: flex;
 40 |   justify-content: center;
 41 |   align-items: center;
 42 |   flex-direction: column;
 43 |   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
 44 |   cursor: pointer;
 45 |   transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 46 | }
 47 | 
 48 | .wrapper .tooltip {
 49 |   position: absolute;
 50 |   top: 0;
 51 |   font-size: 14px;
 52 |   background: #ffffff;
 53 |   color: #ffffff;
 54 |   padding: 5px 8px;
 55 |   border-radius: 5px;
 56 |   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
 57 |   opacity: 0;
 58 |   pointer-events: none;
 59 |   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 60 | }
 61 | 
 62 | .wrapper .tooltip::before {
 63 |   position: absolute;
 64 |   content: "";
 65 |   height: 8px;
 66 |   width: 8px;
 67 |   background: #ffffff;
 68 |   bottom: -3px;
 69 |   left: 50%;
 70 |   transform: translate(-50%) rotate(45deg);
 71 |   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 72 | }
 73 | 
 74 | .wrapper .icon:hover .tooltip {
 75 |   top: -45px;
 76 |   opacity: 1;
 77 |   visibility: visible;
 78 |   pointer-events: auto;
 79 | }
 80 | 
 81 | .wrapper .icon:hover span,
 82 | .wrapper .icon:hover .tooltip {
 83 |   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
 84 | }
 85 | 
 86 | .wrapper .facebook:hover,
 87 | .wrapper .facebook:hover .tooltip,
 88 | .wrapper .facebook:hover .tooltip::before {
 89 |   background: #1877F2;
 90 |   color: #ffffff;
 91 | }
 92 | 
 93 | .wrapper .twitter:hover,
 94 | .wrapper .twitter:hover .tooltip,
 95 | .wrapper .twitter:hover .tooltip::before {
 96 |   background: #1DA1F2;
 97 |   color: #ffffff;
 98 | }
 99 | 
100 | .wrapper .instagram:hover,
101 | .wrapper .instagram:hover .tooltip,
102 | .wrapper .instagram:hover .tooltip::before {
103 |   background: #E4405F;
104 |   color: #ffffff;
105 | }
106 | 
107 | .wrapper .github:hover,
108 | .wrapper .github:hover .tooltip,
109 | .wrapper .github:hover .tooltip::before {
110 |   background: #333333;
111 |   color: #ffffff;
112 | }
113 | 
114 | .wrapper .youtube:hover,
115 | .wrapper .youtube:hover .tooltip,
116 | .wrapper .youtube:hover .tooltip::before {
117 |   background: #CD201F;
118 |   color: #ffffff;
119 | }
120 | 


--------------------------------------------------------------------------------
/sparkle-card-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Sparkle Card Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <main>
11 |         <div class="container">
12 |           <a class="card" href="#">
13 |             <img alt="Owl" height="40" src="https://assets.codepen.io/221808/owl.svg" width="40" />
14 |             <h2>Owl</h2>
15 |             <p>
16 |               A nocturnal bird that flies silently. Known for its large eyes,
17 |               sharp claws, and as a symbol of wisdom.
18 |             </p>
19 |           </a>
20 |           <a class="card" href="#">
21 |       
22 |             <img alt="Rabbit" height="40" src="https://assets.codepen.io/221808/rabbit.svg" width="40" />
23 |             <h2>Rabbit</h2>
24 |             <p>
25 |               A herbivorous animal with long ears and a hopping motion. Loved for
26 |               its cute appearance.
27 |             </p>
28 |           </a>
29 |           <a class="card" href="#">
30 |             <img alt="Rabbit" height="40" src="https://assets.codepen.io/221808/raven.svg" width="40" />
31 |             <h2>Raven</h2>
32 |             <p>
33 |               A smart bird with black feathers. Often depicted in myths and
34 |               stories as a symbol of mystery.
35 |             </p>
36 |           </a>
37 |         </div>
38 |       </main>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/sparkle-card-animation/style.css:
--------------------------------------------------------------------------------
 1 | @property --gradient-angle {
 2 |     syntax: "<angle>";
 3 |     initial-value: 0turn;
 4 |     inherits: false;
 5 |   }
 6 |   
 7 |   .card {
 8 |     animation: 2s gradient-angle infinite linear;
 9 |     border: 2px solid transparent;
10 |     background-image: linear-gradient(#584827, #2d230f),
11 |       conic-gradient(
12 |         from var(--gradient-angle),
13 |         #584827 0%,
14 |         #c7a03c 37%,
15 |         #f9de90 30%,
16 |         #c7a03c 33%,
17 |         #584827 40%,
18 |         #584827 50%,
19 |         #c7a03c 77%,
20 |         #f9de90 80%,
21 |         #c7a03c 83%,
22 |         #584827 90%
23 |       );
24 |     background-clip: padding-box, border-box;
25 |     background-origin: padding-box, border-box;
26 |   }
27 |   
28 |   @keyframes gradient-angle {
29 |     to {
30 |       --gradient-angle: 1turn;
31 |     }
32 |   }
33 |   
34 |   /* その他 */
35 |   html,
36 |   body {
37 |     background: #141819;
38 |   }
39 |   
40 |   body {
41 |     font-family: "游ゴシック Medium", YuGothic, YuGothicM,
42 |       "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
43 |     line-height: 1.6;
44 |     display: grid;
45 |     align-content: center;
46 |     min-height: 100svh;
47 |     padding: 24px;
48 |     color: #d5cec0;
49 |     gap: 24px;
50 |   
51 |     @media (width < 970px) {
52 |       align-content: start;
53 |     }
54 |   }
55 |   
56 |   .container {
57 |     display: grid;
58 |     justify-content: center;
59 |     margin-inline: auto;
60 |     grid-auto-flow: column;
61 |     gap: 16px 40px;
62 |     @media (width < 970px) {
63 |       grid-auto-flow: row;
64 |     }
65 |   }
66 |   
67 |   .card {
68 |     display: grid;
69 |     max-width: 240px;
70 |     padding: 20px;
71 |     text-decoration: none;
72 |     color: currentColor;
73 |     border-radius: 20px;
74 |     place-content: center;
75 |     place-items: center;
76 |     aspect-ratio: 1/1;
77 |     row-gap: 16px;
78 |   }
79 |   
80 |   .card h2 {
81 |     font-family: "Comfortaa", sans-serif;
82 |     font-size: 18px;
83 |     font-weight: 700;
84 |     font-style: normal;
85 |     font-optical-sizing: auto;
86 |   }
87 |   
88 |   .card p {
89 |     font-size: 12px;
90 |   }
91 |   


--------------------------------------------------------------------------------
/star-rating/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Star Rating</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="star-rating">
11 |         <div class="stars">
12 |           <label class="number"><input type="radio" name="rating" value="0"></label>
13 |           <label class="star"><input type="radio" name="rating" value="1"></label>
14 |           <label class="star"><input type="radio" name="rating" value="2"></label>
15 |           <label class="star"><input type="radio" name="rating" value="3" checked></label>
16 |           <label class="star"><input type="radio" name="rating" value="4"></label>
17 |           <label class="star"><input type="radio" name="rating" value="5"></label>
18 |           <div class="number-rating"></div>
19 |         </div>
20 |       </div>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/subscription-form/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Subcription form</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <div class="subscription-form">
11 |         <h2>Subscribe to our <span>Newsletter</span> </h2>
12 |         <form>
13 |           <input type="email" placeholder="example@gmail.com" required>
14 |           <button type="submit">Subscribe</button>
15 |         </form>
16 |       </div>
17 |       
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/subscription-form/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
 2 | 
 3 | *:before,
 4 | *:after {
 5 |     box-sizing: inherit;
 6 | }
 7 | :root{
 8 |     --clr-bg: #880808;
 9 |     --clr-primary: rgb(138, 28, 21);
10 |     --clr-secondary: rgba(236, 38, 24, 0.62);
11 | }
12 | body {
13 |     min-height: 100vh;
14 |     display: flex;
15 |     font-family: 'poppins', Arial;
16 |     justify-content: center;
17 |     align-items: center;
18 |     column-gap: 40px;
19 |     background: var(--clr-bg);
20 |     overflow: hidden;
21 | }
22 | .subscription-form {
23 |     min-width: 350px;
24 |     text-align: center;
25 |     background-color: #cccccc9c;
26 |     padding: 20px;
27 |     display: flex;
28 |     flex-direction: column;
29 |     align-items: center;
30 |     border: none;
31 |     border-radius: 32px 64px;
32 | }
33 |   
34 | h2 {
35 |     font-size: 24px;
36 |     margin-bottom: 20px;
37 | }
38 | h2 span{
39 |     color: var(--clr-primary);
40 | }
41 | input[type="email"] {
42 |     width: 90%;
43 |     padding: 10px;
44 |     margin-bottom: 10px;
45 |     border: 1px solid #ccc;
46 |     border-radius: 5px;
47 | }
48 |   
49 | button[type="submit"] {
50 |     padding: 10px 20px;
51 |     background-color: var(--clr-primary);
52 |     color: white;
53 |     border: none;
54 |     border-radius: 10px;
55 |     cursor: pointer;
56 |     font-weight: bold;
57 |     font-size: 1.1rem;
58 |     transition: all .25s ease-in;
59 | }
60 |   
61 | button[type="submit"]:hover {
62 |     background-color: var(--clr-secondary);
63 | }
64 |   


--------------------------------------------------------------------------------
/text-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Text Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
11 | 
12 |     <div class="content">
13 |         <div class="content__container">
14 |             <p class="content__container__text">
15 |                 Hello
16 |             </p>
17 |     
18 |             <ul class="content__container__list">
19 |                 <li class="content__container__list__item">codecrafters !</li>
20 |                 <li class="content__container__list__item">fam !</li>
21 |                 <li class="content__container__list__item">followers !</li>
22 |                 <li class="content__container__list__item">everybody !</li>
23 |             </ul>
24 |         </div>
25 |     </div>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/text-animation/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     width: 100%;
  3 |     height: 100%;
  4 |     position: fixed;
  5 |     background-color: #34495e;
  6 |   }
  7 |   
  8 |   .content {
  9 |     position: absolute;
 10 |     top: 50%;
 11 |     left: 50%;
 12 |     transform: translate(-50%, -50%);
 13 |     height: 160px;
 14 |     overflow: hidden;
 15 |     font-family: 'Lato', sans-serif;
 16 |     font-size: 35px;
 17 |     line-height: 40px;
 18 |     color: #ecf0f1;
 19 |   }
 20 |   
 21 |   .content__container {
 22 |     font-weight: 600;
 23 |     overflow: hidden;
 24 |     height: 40px;
 25 |     padding: 0 40px;
 26 |   }
 27 |   
 28 |   .content__container:before {
 29 |     content: '[';
 30 |     left: 0;
 31 |   }
 32 |   
 33 |   .content__container:after {
 34 |     content: ']';
 35 |     position: absolute;
 36 |     right: 0;
 37 |   }
 38 |   
 39 |   .content__container:before,
 40 |   .content__container:after {
 41 |     position: absolute;
 42 |     top: 0;
 43 |     color: #16a085;
 44 |     font-size: 42px;
 45 |     line-height: 40px;
 46 |     -webkit-animation-name: opacity;
 47 |     -webkit-animation-duration: 2s;
 48 |     -webkit-animation-iteration-count: infinite;
 49 |     animation-name: opacity;
 50 |     animation-duration: 2s;
 51 |     animation-iteration-count: infinite;
 52 |   }
 53 |   
 54 |   .content__container__text {
 55 |     display: inline;
 56 |     float: left;
 57 |     margin: 0;
 58 |   }
 59 |   
 60 |   .content__container__list {
 61 |     margin-top: 0;
 62 |     padding-left: 110px;
 63 |     text-align: left;
 64 |     list-style: none;
 65 |     -webkit-animation-name: change;
 66 |     -webkit-animation-duration: 10s;
 67 |     -webkit-animation-iteration-count: infinite;
 68 |     animation-name: change;
 69 |     animation-duration: 10s;
 70 |     animation-iteration-count: infinite;
 71 |   }
 72 |   
 73 |   .content__container__list__item {
 74 |     line-height: 40px;
 75 |     margin: 0;
 76 |   }
 77 |   
 78 |   @-webkit-keyframes opacity {
 79 |     0%, 100% {
 80 |       opacity: 0;
 81 |     }
 82 |     50% {
 83 |       opacity: 1;
 84 |     }
 85 |   }
 86 |   
 87 |   @-webkit-keyframes change {
 88 |     0%, 12.66%, 100% {
 89 |       transform: translate3d(0, 0, 0);
 90 |     }
 91 |     16.66%, 29.32% {
 92 |       transform: translate3d(0, -25%, 0);
 93 |     }
 94 |     33.32%, 45.98% {
 95 |       transform: translate3d(0, -50%, 0);
 96 |     }
 97 |     49.98%, 62.64% {
 98 |       transform: translate3d(0, -75%, 0);
 99 |     }
100 |     66.64%, 79.3% {
101 |       transform: translate3d(0, -50%, 0);
102 |     }
103 |     83.3%, 95.96% {
104 |       transform: translate3d(0, -25%, 0);
105 |     }
106 |   }
107 |   
108 |   @-o-keyframes opacity {
109 |     0%, 100% {
110 |       opacity: 0;
111 |     }
112 |     50% {
113 |       opacity: 1;
114 |     }
115 |   }
116 |   
117 |   @-o-keyframes change {
118 |     0%, 12.66%, 100% {
119 |       transform: translate3d(0, 0, 0);
120 |     }
121 |     16.66%, 29.32% {
122 |       transform: translate3d(0, -25%, 0);
123 |     }
124 |     33.32%, 45.98% {
125 |       transform: translate3d(0, -50%, 0);
126 |     }
127 |     49.98%, 62.64% {
128 |       transform: translate3d(0, -75%, 0);
129 |     }
130 |     66.64%, 79.3% {
131 |       transform: translate3d(0, -50%, 0);
132 |     }
133 |     83.3%, 95.96% {
134 |       transform: translate3d(0, -25%, 0);
135 |     }
136 |   }
137 |   
138 |   @-moz-keyframes opacity {
139 |     0%, 100% {
140 |       opacity: 0;
141 |     }
142 |     50% {
143 |       opacity: 1;
144 |     }
145 |   }
146 |   
147 |   @-moz-keyframes change {
148 |     0%, 12.66%, 100% {
149 |       transform: translate3d(0, 0, 0);
150 |     }
151 |     16.66%, 29.32% {
152 |       transform: translate3d(0, -25%, 0);
153 |     }
154 |     33.32%, 45.98% {
155 |       transform: translate3d(0, -50%, 0);
156 |     }
157 |     49.98%, 62.64% {
158 |       transform: translate3d(0, -75%, 0);
159 |     }
160 |     66.64%, 79.3% {
161 |       transform: translate3d(0, -50%, 0);
162 |     }
163 |     83.3%, 95.96% {
164 |       transform: translate3d(0, -25%, 0);
165 |     }
166 |   }
167 |   
168 |   @keyframes opacity {
169 |     0%, 100% {
170 |       opacity: 0;
171 |     }
172 |     50% {
173 |       opacity: 1;
174 |     }
175 |   }
176 |   
177 |   @keyframes change {
178 |     0%, 12.66%, 100% {
179 |       transform: translate3d(0, 0, 0);
180 |     }
181 |     16.66%, 29.32% {
182 |       transform: translate3d(0, -25%, 0);
183 |     }
184 |     33.32%, 45.98% {
185 |       transform: translate3d(0, -50%, 0);
186 |     }
187 |     49.98%, 62.64% {
188 |       transform: translate3d(0, -75%, 0);
189 |     }
190 |     66.64%, 79.3% {
191 |       transform: translate3d(0, -50%, 0);
192 |     }
193 |     83.3%, 95.96% {
194 |       transform: translate3d(0, -25%, 0);
195 |     }
196 |   }
197 |   


--------------------------------------------------------------------------------
/text-transition/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Text Transition</title>
 5 |     </head>
 6 |         <link rel="stylesheet" type="text/css" href="style.css">
 7 |     <body>
 8 |         <svg viewBox="0 0 960 300">
 9 |             <symbol id="s-text">
10 |                 <text text-anchor="middle" x="50%" y="80%">FOLLOW!!</text>
11 |             </symbol>
12 |         
13 |             <g class = "g-ants">
14 |                 <use xlink:href="#s-text" class="text-copy"></use>
15 |                 <use xlink:href="#s-text" class="text-copy"></use>
16 |                 <use xlink:href="#s-text" class="text-copy"></use>
17 |                 <use xlink:href="#s-text" class="text-copy"></use>
18 |                 <use xlink:href="#s-text" class="text-copy"></use>
19 |             </g>
20 |         </svg>
21 |     </body>
22 |     </html>
23 | 


--------------------------------------------------------------------------------
/text-transition/style.css:
--------------------------------------------------------------------------------
 1 | @import url(https://fonts.googleapis.com/css?family=Montserrat);
 2 | 
 3 | html, body{
 4 |   height: 100%;
 5 |   font-weight: 800;
 6 | }
 7 | 
 8 | body{
 9 |   background: #000000;
10 |   font-family: Arial;
11 | }
12 | 
13 | svg {
14 |     display: block;
15 |     font: 8em 'Montserrat';
16 |     width: 100%;
17 |     height: 400px;
18 |     margin: 0 auto;
19 | }
20 | 
21 | .text-copy {
22 |     fill: none;
23 |     stroke: white;
24 |     stroke-dasharray: 6% 29%;
25 |     stroke-width: 5px;
26 |     stroke-dashoffset: 0%;
27 |     animation: stroke-offset 5.5s infinite linear;
28 | }
29 | 
30 | .text-copy:nth-child(1){
31 | 	stroke: #4D163D;
32 | 	animation-delay: -1;
33 | }
34 | 
35 | .text-copy:nth-child(2){
36 | 	stroke: #cf1578;
37 | 	animation-delay: -2s;
38 | }
39 | 
40 | .text-copy:nth-child(3){
41 | 	stroke: #e8d21d;
42 | 	animation-delay: -3s;
43 | }
44 | 
45 | .text-copy:nth-child(4){
46 | 	stroke: #039fbe;
47 | 	animation-delay: -4s;
48 | }
49 | 
50 | .text-copy:nth-child(5){
51 | 	stroke: #b20238;
52 | 	animation-delay: -5s;
53 | }
54 | 
55 | @keyframes stroke-offset{
56 | 	100% {stroke-dashoffset: -35%;}
57 | }


--------------------------------------------------------------------------------
/vertical-navigation-bar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vertical Navigation Bar</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 9 |   </head>
10 |   <body>
11 |     <div class="card">
12 |         <div class="menu">
13 |           <div class="toggle">
14 |             <div class="line-1"></div>
15 |             <div class="line-2"></div>
16 |           </div>
17 |             <ul>
18 |               <li>
19 |                 <i class="fas fa-home fa-lg"></i>
20 |                 <span>Home</span>
21 |               </li>
22 |               <li>
23 |                 <i class="fas fa-envelope fa-lg"></i>
24 |                 <span>Messages</span>
25 |               </li>
26 |               <li>
27 |                 <i class="fas fa-cog fa-lg"></i>
28 |                 <span>Settings</span>
29 |               </li>
30 |               <li>
31 |                 <i class="fas fa-sign-out-alt fa-lg"></i>
32 |                 <span>Log Out</span>
33 |               </li>
34 |             </ul>
35 |         </div>
36 |       </div>
37 |   <script>
38 |     let menu = document.querySelector('.menu');
39 |     let toggle = document.querySelector('.toggle');
40 | 
41 |     toggle.addEventListener('click', () => {
42 |     menu.classList.toggle('active');
43 |     });
44 |   </script>      
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/vertical-navigation-bar/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 |     font-family: 'Open Sans', sans-serif;
  6 | }
  7 |   
  8 | html,
  9 | body {
 10 |     height: 100vh;
 11 |     background-color: #004257;
 12 | }
 13 |   
 14 | body {
 15 |     display: flex;
 16 |     align-items: center;
 17 |     justify-content: center;
 18 | }
 19 |   
 20 | .card {
 21 |     position: relative;
 22 | }
 23 |   
 24 | .menu {
 25 |     width: 67px;
 26 |     height: 300px;
 27 |     background-color: #ffffff;
 28 |     border-radius: 10px;
 29 |     box-shadow: 10px 0 50px rgba(0, 0, 0, 0.2);
 30 |     overflow: hidden;
 31 |     transition: 0.5s;
 32 | }
 33 |   
 34 | .menu.active {
 35 |     width: 225px;
 36 | }
 37 |   
 38 | .toggle {
 39 |     position: absolute;
 40 |     top: -20px;
 41 |     right: -15px;
 42 |     height: 40px;
 43 |     width: 40px;
 44 |     border-radius: 50%;
 45 |     z-index: 1;
 46 |     background-color: #000000;
 47 |     display: flex;
 48 |     align-items: center;
 49 |     justify-content: center;
 50 |     cursor: pointer;
 51 | }
 52 |   
 53 | .line-1,
 54 | .line-2 {
 55 |     height: 2px;
 56 |     width: 15px;
 57 |     background-color: #ffffff;
 58 |     transition: 0.5s ease;
 59 | }
 60 |   
 61 | .line-1 {
 62 |     transform: rotate(-35deg) translate(5px, 8px);
 63 | }
 64 |   
 65 | .line-2 {
 66 |     transform: rotate(35deg) translate(-8px, 0px);
 67 | }
 68 |   
 69 | .menu.active .line-1 {
 70 |     transform: rotate(-45deg) translate(5px, 6px);
 71 | }
 72 |   
 73 | .menu.active .line-2 {
 74 |     transform: rotate(45deg) translate(-5px, 6px);
 75 | }
 76 |   
 77 | ul {
 78 |     position: relative;
 79 |     width: 100%;
 80 | }
 81 |   
 82 | li {
 83 |     position: relative;
 84 |     list-style: none;
 85 |     height: 75px;
 86 |     width: 100%;
 87 |     padding-left: 23px;
 88 |     display: flex;
 89 |     align-items: center;
 90 |     cursor: pointer;
 91 | }
 92 |   
 93 | li:hover {
 94 |     background-color: #dddddd;
 95 | }
 96 |   
 97 | span {
 98 |     margin-left: 20px;
 99 |     white-space: nowrap;
100 |     visibility: hidden;
101 |     opacity: 0;
102 | }
103 |   
104 | .menu.active span {
105 |     visibility: visible;
106 |     opacity: 1;
107 | }


--------------------------------------------------------------------------------
/waving-wine-glass/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Waving Wine Glass</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="wine-glass">
11 |         <div class="glass">
12 |             <div class="stand"></div>
13 |             <div class="inner">
14 |                 <div class="wine">
15 |                     <div class="wine-back"></div>
16 |                     <div class="wine-front"></div>
17 |                 </div>
18 |                 <div class="shine">
19 |                 </div>
20 |             </div>
21 |     </div>
22 |     </div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/waving-wine-glass/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     background-color: #aa4465;
  3 |     display: flex;
  4 |     align-items: center;
  5 |     justify-content: center;
  6 |     height:100vh;
  7 |     overflow: hidden;
  8 | }
  9 | .wine-glass {
 10 |     position: relative;
 11 |     height: 350px;
 12 |     width: 200px;
 13 | }
 14 | 
 15 | @keyframes move {
 16 |     0%, 50%, 100% {transform: rotate(15deg);}
 17 |     25%, 75% {transform: rotate(-15deg);}
 18 | }
 19 | .glass {
 20 |     position: relative;
 21 |     border-radius: 50%;
 22 |     width: 150px;
 23 |     height: 150px;
 24 |     background-color: rgb(191,123,122);
 25 |     top:60px;
 26 |     left: 25px;
 27 |      transform-origin: bottom;
 28 |     animation: move 2s linear infinite;
 29 |     
 30 | }
 31 | .glass:before {
 32 |     content:"";
 33 |     position: absolute;
 34 |     border-bottom: 100px solid rgb(191,123,122);
 35 |     border-left: 23px solid transparent;
 36 |     border-right: 23px solid transparent;
 37 |     height: 0;
 38 |     width: 100px;
 39 |     top:-40px;
 40 |     left:2px;
 41 | }
 42 | 
 43 | .stand {
 44 |     position: absolute;
 45 |     background-color: rgb(191,123,122);
 46 |     width: 10px;
 47 |     height: 150px;
 48 |     left:70px;
 49 |     top:120px;
 50 | }
 51 | .stand:before {
 52 |     content:"";
 53 |     position: absolute;
 54 |     background-color: rgb(191,123,122);
 55 |     width: 100px;
 56 |     height: 20px;
 57 |     top:150px;
 58 |     left:-43.5px;
 59 |     border-radius: 50% 50% 70% 30% / 100% 100% 0% 0%;
 60 | }
 61 | .inner {
 62 |     position: absolute;
 63 |     width: 135px;
 64 |     height: 135px;
 65 |     background-color: #e094ad;
 66 |     border-radius: 50%;
 67 |     left:7.5px;
 68 |     top:7.5px;
 69 | }
 70 | 
 71 | .inner:before {
 72 |     content:"";
 73 |     position: absolute;
 74 |     border-bottom: 90px solid #e094ad;
 75 |     border-left: 20.5px solid transparent;
 76 |     border-right: 20px solid transparent;
 77 |     height: 0;
 78 |     width: 90px;
 79 |     top:-39px;
 80 |     left:2px;
 81 | }
 82 | 
 83 | .wine {
 84 |     position: absolute;
 85 |     width: 135px;
 86 |     height: 135px;
 87 |     background-color: transparent;
 88 |     border-radius: 50%;  
 89 |     overflow: hidden;
 90 | }
 91 | .wine:before {
 92 |     content:"";
 93 |     position: absolute;
 94 |     background-color: #8c1c13;
 95 |     width:480px;
 96 |     height:100px;
 97 |     left:-175px;
 98 |     top:97px;
 99 |     z-index:3;
100 |     
101 | }
102 | 
103 | .wine-front {
104 |     position: absolute;
105 |     width: 100px;
106 |     height: 150px;
107 |     border-top: 15px solid #8c1c13;
108 |     border-right: 15px solid #8c1c13;
109 |     border-left: 15px solid #8c1c13;
110 |     border-radius: 50%;
111 |     box-shadow: -174px 0 #8c1c13, 173px 0 #8c1c13;
112 |     background-color: #8c1c13;
113 |     top:35px;
114 |     animation: 0.8s linear infinite swirl;
115 | }
116 | 
117 | .wine-front:before, .wine-front:after {
118 |     content:"";
119 |     position: absolute;
120 |     width: 100px;
121 |     border-radius: 50%;
122 |     border-top: 15px solid transparent;
123 |     border-right: 15px solid transparent;
124 |     border-left: 15px solid transparent;
125 |     border-bottom: 15px solid #8c1c13;
126 |     height: 150px;
127 |     top:-125px;
128 | }
129 | 
130 | .wine-front:before {
131 |     left: -102px;
132 | 
133 | }
134 | .wine-front:after {
135 |     left:71px;
136 | }
137 | 
138 | .wine-back {
139 |     position: absolute;
140 |     width: 100px;
141 |     height: 150px;
142 |     border-top: 15px solid #6a040f;
143 |     border-right: 15px solid #6a040f;
144 |     border-left: 15px solid #6a040f;
145 |     border-radius: 50%;
146 |     box-shadow: -174px 0 #6a040f, 173px 0 #6a040f;
147 |     background-color: #6a040f;
148 |     top:30px;
149 |     animation: 0.8s linear infinite swirl reverse;
150 | }
151 | 
152 |         .wine-back:before, .wine-back:after {
153 |     content:"";
154 |     position: absolute;
155 |     width: 100px;
156 |     border-radius: 50%;
157 |     border-top: 15px solid transparent;
158 |     border-right: 15px solid transparent;
159 |     border-left: 15px solid transparent;
160 |     border-bottom: 15px solid #6a040f;
161 |     height: 150px;
162 |     top:-125px;
163 | }
164 | 
165 | .wine-back:before {
166 |     left: -102px;
167 | 
168 | }
169 | .wine-back:after {
170 |     left:71px;
171 | }
172 | 
173 | 
174 | 
175 | @keyframes swirl {  
176 | from { left: -85px; }
177 | to { left: 85px; }
178 | }
179 | 


--------------------------------------------------------------------------------
/weather-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>
 6 | 		Weather Animation
 7 | 	</title>
 8 | 	<link rel="stylesheet" type="text/css" href="style.css">
 9 | </head>
10 | <body>
11 | 
12 |   <div id="fabrizio"></div>
13 |   <a href="http://fabrizio.co">fabrizio.co</a>
14 |   
15 |   <div class="container">
16 |     <div class="sunny"></div> 
17 |     <div class="cloudy"></div>
18 |     <div class="rainy"></div>
19 |     <div class="snowy"></div>
20 |     <div class="rainbow"></div>
21 |     <div class="starry"></div>
22 |     <div class="stormy"></div>
23 |   </div>
24 |   
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/website-loader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Website Loader</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <main>
11 |         <section class="title">
12 |           <h1>Loading</h1>
13 |           <div class="dots">
14 |             <div class="dot__item dot__item-1"></div>
15 |               <div class="dot__item dot__item-2"></div>
16 |               <div class="dot__item dot__item-3"></div>
17 |           </div>
18 |         </section>
19 |         
20 |         <section class="progress">
21 |           <div class="progress__bar"></div>
22 |         </section>
23 |       </main>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/website-loader/style.css:
--------------------------------------------------------------------------------
  1 | /*..EXTEND...*/
  2 | .flex-center {
  3 |     display: flex;
  4 |     align-items: center;
  5 |     justify-content: center;
  6 |   }
  7 |   
  8 |   body {
  9 |     background: #00a096;
 10 |     margin: 0;
 11 |     min-height: 100vh;
 12 |     display: flex;
 13 |     align-items: center;
 14 |     justify-content: center;
 15 |   }
 16 |   
 17 |   /*TITLE*/
 18 |   h1 {
 19 |     color: #fafafa;
 20 |     font-family: 'Courier Prime', monospace;
 21 |     font-size: 32px;
 22 |     text-align: center;
 23 |     margin: 0 0 8px;
 24 |   }
 25 |   
 26 |   /*TITLES*/
 27 |   .title {
 28 |     display: flex;
 29 |     align-items: center;
 30 |     justify-content: center;
 31 |   }
 32 |   
 33 |   /*...DOTS...*/
 34 |   .dots {
 35 |     display: flex;
 36 |     align-items: center;
 37 |     justify-content: center;
 38 |   }
 39 |   
 40 |   .dot__item {
 41 |     background: #fafafa;
 42 |     border-radius: 50%;
 43 |     height: 4px;
 44 |     width: 4px;
 45 |     margin: 0 4px;
 46 |     animation: dot linear infinite;
 47 |   }
 48 |   
 49 |   .dot__item-1 {
 50 |     animation-duration: 1s;
 51 |   }
 52 |   
 53 |   .dot__item-2 {
 54 |     animation-delay: 1s;
 55 |     animation-duration: 1.5s;
 56 |   }
 57 |   
 58 |   .dot__item-3 {
 59 |     animation-delay: 2s;
 60 |     animation-duration: 2s;
 61 |   }
 62 |   
 63 |   /*PROGRESS BAR*/
 64 |   .progress {
 65 |     border: 4px solid #f7dd27;
 66 |     height: 32px;
 67 |     width: 400px;
 68 |     display: flex;
 69 |   }
 70 |   
 71 |   .progress__bar {
 72 |     background: #ed5a70;
 73 |     animation: progressBar 5s linear infinite;
 74 |     animation-delay: 1s;
 75 |   }
 76 |   
 77 |   /*KEYFRAMES*/
 78 |   @keyframes progressBar {
 79 |     0% {
 80 |       width: 4px;
 81 |     }
 82 |     30% {
 83 |       width: 250px;
 84 |     }
 85 |     60% {
 86 |       width: 255px;
 87 |     }
 88 |     80% {
 89 |       width: 300px;
 90 |     }
 91 |     85% {
 92 |       width: 308px;
 93 |     }
 94 |     90% {
 95 |       width: 308px;
 96 |     }
 97 |     95% {
 98 |       width: 390px;
 99 |     }
100 |     100% {
101 |       width: 400px;
102 |       opacity: 1;
103 |     }
104 |   }
105 |   
106 |   @keyframes dot {
107 |     0% {
108 |       margin: 0 4px;
109 |     }
110 |     50% {
111 |       margin: 0 4px 8px;
112 |     }
113 |     100% {
114 |       margin: 0 4px;
115 |     }
116 |   }
117 |   


--------------------------------------------------------------------------------
/windows-loader-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Windows Loader Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <div class="wrapper">
12 |             <div class="loader"><div class="dot"></div></div>
13 |             <div class="loader"><div class="dot"></div></div>
14 |             <div class="loader"><div class="dot"></div></div>
15 |             <div class="loader"><div class="dot"></div></div>
16 |             <div class="loader"><div class="dot"></div></div>
17 |             <div class="loader"><div class="dot"></div></div>
18 |         </div>
19 |         <div class="text">Please wait</div>
20 |     </div>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/windows-loader-animation/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-family: sans-serif;
 5 | }
 6 | 
 7 | body {
 8 |     display: flex;
 9 |     justify-content: center;
10 |     align-items: center;
11 |     min-height: 100vh;
12 |     background: #0079d7;
13 | }
14 | 
15 | .container {
16 |     position: relative;
17 |     width: 100%;
18 |     display: flex;
19 |     justify-content: center;
20 | }
21 | 
22 | .container .wrapper {
23 |     position: absolute;
24 |     top: -35px;
25 |     transform: scale(1.5);
26 | }
27 | 
28 | .loader {
29 |     position: absolute;
30 |     left: -25px;
31 |     width: 50px;
32 |     height: 50px;
33 |     animation: rotate 3.5s linear infinite;
34 | }
35 | 
36 | .loader:nth-child(1) {
37 |     animation-delay: 0.15s;
38 | }
39 | 
40 | .loader:nth-child(2) {
41 |     animation-delay: 0.30s;
42 | }
43 | 
44 | .loader:nth-child(3) {
45 |     animation-delay: 0.45s;
46 | }
47 | 
48 | .loader:nth-child(4) {
49 |     animation-delay: 0.60s;
50 | }
51 | 
52 | .loader:nth-child(5) {
53 |     animation-delay: 0.75s;
54 | }
55 | 
56 | .loader:nth-child(6) {
57 |     animation-delay: 0.90s;
58 | }
59 | 
60 | @keyframes rotate {
61 |     30% {
62 |         transform: rotate(220deg);
63 |     }
64 |     40% {
65 |         transform: rotate(450deg);
66 |     }
67 |     75% {
68 |         transform: rotate(720deg);
69 |         opacity: 1;
70 |     }
71 |     76% {
72 |         opacity: 0;
73 |     }
74 |     100% {
75 |         transform: rotate(0deg);
76 |         opacity: 0;
77 |     }
78 | }
79 | 
80 | .loader .dot {
81 |     position: relative;
82 |     top: 30px;
83 |     width: 7px;
84 |     height: 7px;
85 |     background: #fff;
86 |     border-radius: 50%;
87 | }
88 | 
89 | .container .text {
90 |     position: absolute;
91 |     color: #fff;
92 |     bottom: -85px;
93 |     font-size: 25px;
94 | }
95 | 


--------------------------------------------------------------------------------