├── 3D - Glowing Bottle
    ├── index.html
    └── style.css
├── 3D Glowing Bottle
├── 3D Glowing Bottlee
├── Albumcolors Website Design
    ├── index.html
    └── style.css
├── Animated Login Form
    ├── index.html
    └── style.css
├── Animated Search Box
    ├── index.html
    ├── script.js
    └── style.css
├── App menu with lock screen
    ├── index.html
    ├── script.js
    └── style.css
├── Auto Text Typing Animation
    ├── index.html
    └── style.css
├── Autumn Umbrellas
    ├── index.html
    ├── script.js
    └── style.css
├── Bikes Images Gallery by using flex
    ├── index.html
    └── style.css
├── Bouncing Egg
    ├── index.html
    └── style.css
├── Button Hover
    ├── index.html
    └── style.css
├── Calculator
    ├── index.html
    ├── script.js
    └── style.css
├── Card Outer Glow Effect
    ├── index.html
    └── style.css
├── Christmas Tree Animation
    ├── index.html
    └── style.css
├── Circular Rotating Carousel
    ├── index.html
    └── style.css
├── Distorted Text Animation
    ├── index.html
    └── style.css
├── Ecommerce Website Design
    ├── Ecommerce-Website-Design-images.zip
    ├── index.html
    └── style.css
├── Esports-athelete-card-design
    ├── index.html
    └── style.css
├── Facebook Emoji's Reaction
    ├── index.html
    └── style.css
├── Flower Animation
    ├── index.html
    └── style.css
├── Fruit Product Card Design
    ├── index.html
    └── style.css
├── Glassmorphism camera website landing page
    ├── 1 (1).png
    ├── index.html
    └── style.css
├── Glowing Heart Animations
    ├── app.js
    ├── index.html
    └── style.css
├── Glowing Name
    ├── index.html
    └── style.css
├── Guess number game
    ├── index.html
    ├── script.js
    └── style.css
├── Gym clone website
    ├── index.html
    └── style.css
├── Happy Holi
    ├── index.html
    ├── script.js
    └── style.css
├── Haunted Manor
    ├── index.html
    └── style.css
├── Hexa Loading Animations
    ├── index.html
    └── style.css
├── Hide Social Media Icons
    ├── index.html
    └── style.css
├── Hill Animation
    ├── index.html
    └── style.css
├── Icons hover effects
    ├── index.html
    └── style.css
├── Image Effect Hover on Name
    ├── index.html
    ├── script.js
    └── style.css
├── Images Carousel
    ├── app.css
    ├── index.html
    ├── script.js
    └── style.css
├── Images slider
    ├── index.html
    ├── script.js
    └── style.css
├── Input Form Designs
    ├── index.html
    └── style.css
├── Leaping Triangle Animation
    ├── index.html
    └── style.css
├── Lighting Text Animation
    ├── index.html
    └── style.css
├── Linear Gredient Rotating Card Design
    ├── index.html
    └── style.css
├── Loading Bar Animations
    ├── index.html
    └── style.css
├── Login Form
    ├── index.html
    └── style.css
├── Loginform
    ├── index.html
    ├── script.js
    └── style.css
├── Magical Navigation Bar
    ├── index.html
    ├── script.js
    └── style.css
├── Menu Bar Animation
    ├── index.html
    └── style.css
├── Modern Navbar Design
    ├── index.html
    └── style.css
├── Modern-Login-Page
    ├── index.html
    ├── script.js
    └── style.css
├── Mouse-Movement-Animation
    ├── index.html
    ├── script.js
    └── style.css
├── Music Player Card design
    ├── index.html
    └── style.css
├── Night View
    ├── index.html
    └── style.css
├── OLA landing page
    ├── index.html
    ├── logo.svg
    ├── ola.png
    └── style.css
├── PrintMotion
    ├── index.html
    ├── script.js
    └── style.css
├── Profile Picture Card Design
    ├── index.html
    └── styel.css
├── QR Generator
    ├── index.html
    ├── script.js
    └── style.css
├── Radiant Ripple
    ├── index.html
    └── style.css
├── Responsive Footer Design
    ├── index.html
    └── style.css
├── Scribble Image Reveal with SVG Blend Mode
    ├── index.html
    └── style.css
├── Seasons Slider
    ├── index.html
    └── style.css
├── Selling car landing page
    ├── index.html
    ├── script.js
    └── style.css
├── Shoes box image sliders
    ├── index.html
    ├── script.js
    └── style.css
├── Shoes box images slider
├── Sleeping santa
    ├── index.html
    └── style.css
├── Smoke effect on name
    ├── index.html
    ├── smoke.mp4
    └── style.css
├── Social Media Icons with Hover Effect
    ├── index.html
    └── style.css
├── Spring Tabs
    ├── index.html
    ├── script.js
    └── style.css
├── Stars in Sky Animation
    ├── index.html
    └── style.css
├── Submit Button Animation
    ├── index.html
    ├── script.js
    └── style.css
├── Text to Speech Converter
    ├── index.html
    ├── script.js
    └── style.css
├── Tic Toe Game
    ├── index.html
    ├── script.js
    └── style.css
├── Toggle Button
    ├── index.html
    ├── script.js
    └── style.css
├── Water Effect On Name
    ├── index.html
    └── style.css
├── Water Effect
    ├── index.html
    └── style.css
├── Waving Wine Glass
    ├── index.html
    └── style.css
├── X-ray Animation
    ├── index.html
    ├── script.js
    └── style.css
├── Xmas Animation
    ├── index.html
    ├── script.js
    └── style.css
├── animated border
    ├── index.html
    └── style.css
├── black circle animation
    ├── index.html
    └── style.css
├── clipped square loader
    ├── index.html
    └── style.css
├── index.html
├── portion bottle
    ├── index.html
    ├── script.js
    └── style.css
├── ripple loader
    ├── index.html
    └── style.css
└── star rating
    ├── index.html
    └── style.css


/3D - Glowing Bottle/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>3D Glowing Bottle</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 | <section>
11 | 	<div class="shadow"></div>
12 | 	<div class="bowl">
13 | 		<div class="liquid"></div>
14 | 		
15 | 	</div>
16 | </section>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/3D Glowing Bottle:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/3D Glowing Bottlee:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/Albumcolors Website Design/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 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Document</title>
 9 | </head>
10 | <body>
11 |     <div class="main">
12 |         <div class="header">
13 |             <h1>Album Colors</h1>
14 |             <div class="navbar">
15 |                 <div class="nav">
16 |                     <ul>
17 |                         <li><a href="#">Archive</a></li>
18 |                         <li><a href="#">Generator</a></li>
19 |                         <li><a href="#">About</a></li>
20 |                     </ul>
21 |                 </div>
22 |                 <div class="search">
23 |                     <i class="fa-solid fa-magnifying-glass"></i>
24 |                     <h2>Search an Album and Artist</h2>
25 |                 </div>
26 |             </div>
27 |         </div>
28 |         <div class="section">
29 |             <div class="image">
30 |                 <img src="https://images.unsplash.com/photo-1504898770365-14faca6a7320?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bXVzaWMlMjBhbGJ1bXxlbnwwfHwwfHx8MA%3D%3D" alt="">
31 |                 <img src="https://images.unsplash.com/photo-1598387846148-47e82ee120cc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fG11c2ljJTIwYWxidW18ZW58MHx8MHx8fDA%3D" alt="">
32 |                 <img src="https://images.unsplash.com/photo-1505282722405-413748d3de7a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTg5fHxtdXNpYyUyMGFsYnVtfGVufDB8fDB8fHww" alt="">
33 |                 <i class="fa-solid fa-chevron-right"></i>
34 |             </div>
35 |             <div class="footer">
36 |                 <h3>codewithrutu_09</h3>
37 |                 <div class="social">
38 |                     <h3>instagram</h3>
39 |                     <h3>Twitter</h3>
40 |                 </div>
41 |                 <h4>@ 2023 all Right Reserved</h4>
42 |             </div>
43 |         </div>
44 |     </div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/Albumcolors Website Design/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Signika+Negative:wght@700&display=swap');
  2 | 
  3 | 
  4 | *{
  5 |     margin: 0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Poppins', sans-serif;
  9 |     /* font-family: 'Signika Negative', sans-serif; */
 10 | }
 11 | 
 12 | body{
 13 |     width: 100vw;
 14 |     height: 100%;
 15 |     overflow-x: hidden;
 16 |     background: #fffaf9;
 17 | }
 18 | 
 19 | .main{
 20 |     width: 98%;
 21 |     height: 100%;
 22 |     margin: 0 auto ;
 23 | }
 24 | 
 25 | .header{
 26 |     width: 100vw;
 27 |     height: 38vh;
 28 | }
 29 | 
 30 | .header h1{
 31 |     font-size: 25.8vh;
 32 |     line-height: 1.1;
 33 |     text-transform: uppercase;
 34 | }
 35 | 
 36 | .navbar{
 37 |     display: flex;
 38 |     justify-content: space-between;
 39 |     align-items: center;
 40 |     line-height: 1.2;
 41 | }
 42 | 
 43 | .nav ul{
 44 |     display: flex;
 45 |     justify-content: center;
 46 |     align-items: center;
 47 |     gap: 30px;
 48 |     list-style: none;
 49 | }
 50 | 
 51 | .nav ul li a{
 52 |     color: #8a8a8a;
 53 |     text-decoration: none;
 54 |     font-weight: 700;
 55 |     text-transform: uppercase;
 56 | }
 57 | 
 58 | .search{
 59 |     display: flex;
 60 |     justify-content: left;
 61 |     align-items: flex-start;
 62 |     text-transform: uppercase;
 63 |     margin-right: 4.1rem;
 64 |     gap: 5px;
 65 | }
 66 | 
 67 | .search i{
 68 |     margin-top: 2px;
 69 |     font-size: 16px;
 70 |     color: #2c2c2c;
 71 |     cursor: pointer;
 72 | }
 73 | 
 74 | .search h2{
 75 |     font-size: 16px;
 76 |     color: #2c2c2c;
 77 |     pointer-events: none;
 78 | }
 79 | 
 80 | .section{
 81 |     width: 100vw;
 82 |     height: 87vh;
 83 | }
 84 | 
 85 | .image{
 86 |     display: flex;
 87 |     justify-content: left;
 88 |     align-items: center;
 89 |     gap: 50px;
 90 | }
 91 | 
 92 | .image i{
 93 |     font-size: 30px;
 94 |     color: #2c2c2c;
 95 |     cursor: pointer;
 96 | }
 97 | 
 98 | .section img{
 99 |     width: 550px;
100 |     height: auto;
101 |     border-radius: 5px;
102 | }
103 | 
104 | .footer{
105 |     margin-top: 80px;
106 |     display: flex;
107 |     justify-content: space-between;
108 |     cursor: pointer;
109 | }
110 | 
111 | .footer h3{
112 |     font-size: 16px;
113 |     text-transform: uppercase;
114 |     font-weight: 600;
115 |     color: #1b1b1b;
116 | }
117 | 
118 | .footer h4{
119 |     margin-right: 4.1rem;
120 |     font-size: 16px;
121 |     text-transform: uppercase;
122 |     font-weight: 600;
123 |     color: #1b1b1b;
124 | }
125 | 
126 | .social{
127 |     display: flex;
128 |     justify-content: center;
129 |     align-items: center;
130 |     gap: 15px;
131 | }
132 | 


--------------------------------------------------------------------------------
/Animated Login Form/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - A Pen by Arun</title>
 6 |   <link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <!DOCTYPE html>
12 | <html lang="en">
13 | 
14 | <head>
15 |     <meta charset="UTF-8">
16 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
17 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
18 |     <title>Awesome Form</title>
19 |     <link rel="stylesheet" href="style.css">
20 | </head>
21 | 
22 | <body>
23 |     <form method="#" id="login-form" class="login-form" autocomplete="off" role="main">
24 |         <h1 class="a11y-hidden">Login Form</h1>
25 |         <div>
26 |             <label class="label-email">
27 |                 <input type="email" class="text" name="email" placeholder="Email" tabindex="1" required />
28 |                 <span class="required">Email</span>
29 |             </label>
30 |         </div>
31 |         <input type="checkbox" name="show-password" class="show-password a11y-hidden" id="show-password" tabindex="3" />
32 |         <label class="label-show-password" for="show-password">
33 |             <span>Show Password</span>
34 |         </label>
35 |         <div>
36 |             <label class="label-password">
37 |                 <input type="text" class="text" name="password" placeholder="Password" tabindex="2" required />
38 |                 <span class="required">Password</span>
39 |             </label>
40 |         </div>
41 |         <input type="submit" value="Log In" />
42 |         <div class="email">
43 |             <a href="#">Forgot password?</a>
44 |         </div>
45 |         <figure aria-hidden="true">
46 |             <div class="person-body"></div>
47 |             <div class="neck skin"></div>
48 |             <div class="head skin">
49 |                 <div class="eyes"></div>
50 |                 <div class="mouth"></div>
51 |             </div>
52 |             <div class="hair"></div>
53 |             <div class="ears"></div>
54 |             <div class="shirt-1"></div>
55 |             <div class="shirt-2"></div>
56 |         </figure>
57 |     </form>
58 | </body>
59 | 
60 | </html>
61 | <!-- partial -->
62 |   
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/Animated Search Box/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Animated Search Box</title>
 6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 7 |     <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
 8 |     <link rel="stylesheet" href="style.css">
 9 | 
10 | </head>
11 | <body>
12 | <!-- partial:index.partial.html -->
13 | <!----- close button ----->
14 | <div class="close">
15 |   <i class="fa fa-close"></i>
16 | </div>
17 | 
18 | <!---- search field ------->
19 | <div class="search">
20 |   <i class="fa fa-search"></i>
21 |   <input type="text" class="input">
22 | </div>
23 | <!-- partial -->
24 |   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
25 |   </script><script  src="script.js"></script>
26 | 
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Animated Search Box/script.js:
--------------------------------------------------------------------------------
 1 | (function($){
 2 |     var search_button = $('.fa-search'),
 3 |         close_button  = $('.close'),
 4 |         input = $('.input');
 5 |     search_button.on('click',function(){
 6 |       $(this).parent().addClass('open');
 7 |       close_button.fadeIn(500);
 8 |       input.fadeIn(500);
 9 |     });
10 |     
11 |     close_button.on('click',function(){
12 |       search_button.parent().removeClass('open');
13 |       close_button.fadeOut(500);
14 |       input.fadeOut(500);
15 |     });
16 |   })(jQuery);
17 | 


--------------------------------------------------------------------------------
/Animated Search Box/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0;
 3 |     padding:0;
 4 |     -webkit-box-sizing:border-box;
 5 |     -moz-box-sizing:border-box;
 6 |     box-sizing:border-box;
 7 |   }
 8 |   
 9 |   body{
10 |     background:#263238;
11 |     position:relative;
12 |   }
13 |   
14 |   .close{
15 |     position:absolute;
16 |     color:#fff;
17 |     top:20px;
18 |     right:50px;
19 |     font-size:1.7em;
20 |     cursor:pointer;
21 |     display:none;
22 |     z-index:999;
23 |     -webkit-transform:rotate(0deg);
24 |     transform:rotate(0deg);
25 |     -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
26 |     transition:all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 
27 |   }
28 |   
29 |   .close:hover{
30 |     font-size:2.4em;
31 |     -webkit-transform:rotate(360deg);
32 |     transform:rotate(360deg);
33 |   }
34 |   /*-------------- saerch section -----------*/
35 |   .search{
36 |     position:fixed;
37 |     top:50%;
38 |     left:50%;
39 |     -webkit-transform:translate(-50%, -50%);
40 |     transform:translate(-50%, -50%);
41 |     border-radius:1000px;
42 |     width:0;
43 |     height:0;
44 |     background:#03a9f4;
45 |      -webkit-transition: all .4s linear;
46 |     transition:  all .4s linear;
47 |   }
48 |   
49 |   .search i{
50 |     color:#03a9f4;
51 |     font-size:1.7em;
52 |     cursor:pointer;
53 |   }
54 |   
55 |   .search .input{
56 |     position:absolute;
57 |     top:50%;
58 |     left:50%;
59 |     -webkit-transform:translate(-50%, -50%);
60 |     transform:translate(-50%, -50%);
61 |     width:350px;
62 |     height:40px;
63 |     background:transparent;
64 |     border:none;
65 |     outline:none;
66 |     border-bottom:3px solid #eee;
67 |     color:#eee;
68 |     font-size:1.3em;
69 |     display:none;
70 |   }
71 |   
72 |   
73 |   .search.open{
74 |     height:4000px;
75 |     width:4000px;
76 |   }
77 | 


--------------------------------------------------------------------------------
/App menu with lock screen/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - App Menu With Lock Screen</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0">
 7 | <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
 8 | 
 9 | </head>
10 | <body>
11 | <!-- partial:index.partial.html -->
12 | <div id="root"></div>
13 | <!-- partial -->
14 | <script src='https://unpkg.com/react@17/umd/react.development.js'></script>
15 | <script src='https://unpkg.com/react-dom@17/umd/react-dom.development.js'></script>
16 | <script src='https://unpkg.com/browse/@types/react@16.4.14/index.d.ts'></script>
17 | <script src='https://unpkg.com/browse/@types/react-dom@17.0.2/index.d.ts'></script>
18 | <script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.1/index.min.js'></script>
19 | <script src='https://codepen.io/Hyperplexed/pen/xxYJYjM/54407644e24173ad6019b766443bf2a6.js'></script><script  src="script.js"></script>
20 | 
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Auto Text Typing Animation/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 |     <link rel="stylesheet" href="style.css">
 7 |     <title>Text Typing Animation</title>
 8 | </head>
 9 | <body>
10 | 
11 | 
12 | 
13 |     <div class="container">
14 |         <h1>I'm <span class="auto-type"></span> </h1>
15 |     </div>
16 |     <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
17 | 
18 |     <script>
19 |         var typed = new Typed(".auto-type", {
20 |             strings:["Rutuja Shinde", "Front End Developer", "Content Creator"],
21 |             typeSpeed:150,
22 |             backSpeed:150,
23 |             loop:true
24 |         })
25 |     </script>
26 | 
27 |     
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Auto Text Typing Animation/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Koulen&family=Poppins:wght@600;700;800;900&display=swap');
 2 | 
 3 |         *{
 4 |             margin: 0;
 5 |             padding: 0;
 6 |             box-sizing: border-box;
 7 |             font-family: 'Poppins', sans-serif;
 8 |         }
 9 | 
10 |         .container{
11 |             width: 100vw;
12 |             height: 100vh;
13 |             background-color: #2b323c;
14 |             color: #fff;
15 |             display: flex;
16 |             align-items: center;
17 |             justify-content: center;
18 |         }
19 | 
20 |         .container h1{
21 |             font-size: 80px;
22 |             font-weight: 600;
23 |         }
24 | 
25 |         span{
26 |             color: #e639a1;
27 |         }
28 | 


--------------------------------------------------------------------------------
/Autumn Umbrellas/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>Autumn Umbrellas</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <canvas></canvas>
11 |     <script src="script.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/Autumn Umbrellas/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0
 4 |   }
 5 |   
 6 |   body {
 7 |     background-color: #eeeeee;
 8 |     overflow: hidden;
 9 |   }
10 |   
11 |   canvas {
12 |     background-color: #e34848;
13 |   }
14 | 


--------------------------------------------------------------------------------
/Bikes Images Gallery by using flex/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Image Gallery</title>
 6 |   <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 7 | <link rel="stylesheet" href="style.css">
 8 | 
 9 | </head>
10 | <body>
11 | <!-- partial:index.partial.html -->
12 | <div class="container">
13 |   <h1>Bikes Image Gallery</h1>
14 | 
15 |   <div class="gallery-wrap">
16 |     <div class="item item-1"></div>
17 |     <div class="item item-2"></div>
18 |     <div class="item item-3"></div>
19 |     <div class="item item-4"></div>
20 |     <div class="item item-5"></div>
21 |   </div>
22 |  </div>
23 | 
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Bikes Images Gallery by using flex/style.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     width: 100%;
 3 |     height: 100%;
 4 |   }
 5 |   
 6 |   .container {
 7 |     padding: 75px 0;
 8 |     margin: 0 auto;
 9 |     width: 1140px;
10 |   }
11 |   
12 |   h1 {
13 |     position: relative;
14 |     margin-bottom: 45px;
15 |     font-family: "Oswald", sans-serif;
16 |     font-size: 44px;
17 |     text-transform: uppercase;
18 |     color: #424242;
19 |     text-align: center;
20 |   }
21 |   
22 |   .gallery-wrap {
23 |     display: flex;
24 |     flex-direction: row;
25 |     width: 100%;
26 |     height: 70vh;
27 |   }
28 |   
29 |   .item {
30 |     flex: 1;
31 |     height: 100%;
32 |     background-position: center;
33 |     background-size: cover;
34 |     background-repeat: none;
35 |     transition: flex 0.8s ease;
36 |     filter: blur(1px);
37 |     border-radius: 25px;
38 |   }
39 |   .item:hover {
40 |     flex: 7;
41 |     filter: blur(0px);
42 |   }
43 |   
44 |   .item-1 {
45 |     background-image: url("https://images.unsplash.com/photo-1591378603223-e15b45a81640?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
46 |   }
47 |   
48 |   .item-2 {
49 |     background-image: url("https://images.unsplash.com/photo-1662788019531-89849ebb754a?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
50 |   }
51 |   
52 |   .item-3 {
53 |     background-image: url("https://images.unsplash.com/photo-1508357710528-af900c15fe96?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
54 |   }
55 |   
56 |   .item-4 {
57 |     background-image: url("https://images.unsplash.com/photo-1652182992424-44dbb8539072?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
58 |   }
59 |   
60 |   .item-5 {
61 |     background-image: url("https://images.unsplash.com/photo-1671430373742-cfc70b151e79?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
62 |   }
63 |   
64 |   .social {
65 |     position: absolute;
66 |     right: 35px;
67 |     bottom: 0;
68 |   }
69 |   .social img {
70 |     display: block;
71 |     width: 32px;
72 |   }
73 | 


--------------------------------------------------------------------------------
/Bouncing Egg/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 | 


--------------------------------------------------------------------------------
/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>Codewithrutu</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 | 


--------------------------------------------------------------------------------
/Calculator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Calculator</title>
 6 |   <meta charset="utf-8">
 7 |   <meta name="description" content="This is a simple javascript calculator built with HTML, CSS, and vanilla javascript.">
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link href="https://fonts.googleapis.com/css?family=Inconsolata|Quicksand" rel="stylesheet"><link rel="stylesheet" href="style.css">
10 | 
11 | </head>
12 | <body>
13 | <!-- partial:index.partial.html -->
14 | <div class="spacer"></div>
15 |   <div id ="calc">
16 |     <form>
17 |       <input type="text" id="calc-display" disabled>
18 |       <br>
19 |       <input type="button" value="C" class="keys" onclick="toScreen('C')">
20 |       <input type="button" value="CE" class="keys" onclick="backSpace()">
21 |       <input type="button" value="sqr" class="keys" onclick="sqr()">
22 |       <input type="button" value="+" class="keys" onclick="toScreen('+')">
23 |       <br>
24 |       <input type="button" value="7" class="keys" onclick="toScreen('7')">
25 |       <input type="button" value="8" class="keys" onclick="toScreen('8')">
26 |       <input type="button" value="9" class="keys" onclick="toScreen('9')">
27 |       <input type="button" value="-" class="keys" onclick="toScreen('-')">
28 |       <br>
29 |       <input type="button" value="4" class="keys" onclick="toScreen('4')">
30 |       <input type="button" value="5" class="keys" onclick="toScreen('5')">
31 |       <input type="button" value="6" class="keys" onclick="toScreen('6')">
32 |       <input type="button" value="*" class="keys" onclick="toScreen('*')">
33 |       <br>
34 |       <input type="button" value="1" class="keys" onclick="toScreen('1')">
35 |       <input type="button" value="2" class="keys" onclick="toScreen('2')">
36 |       <input type="button" value="3" class="keys" onclick="toScreen('3')">
37 |       <input type="button" value="/" class="keys" onclick="toScreen('/')">
38 |       <br>
39 |       <input type="button" value="0" class="keys" class="bottom" onclick="toScreen('0')">
40 |       <input type="button" value="." class="keys" class="bottom" onclick="toScreen('.')">
41 |       <input type="button" value="=" id="equals" onclick="answer()">
42 |     </form>
43 |   </div>
44 |   <div class="spacer"></div>
45 | <!-- partial -->
46 |   <script  src="script.js"></script>
47 | 
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/Calculator/script.js:
--------------------------------------------------------------------------------
 1 | var box = document.getElementById("calc-display");
 2 | 
 3 | function toScreen(x){
 4 |   box.value+=x;
 5 |   if(x==='C'){
 6 |     box.value='';
 7 |   }
 8 | }
 9 | 
10 | function answer(){
11 |   x=box.value;
12 |   x=eval(x);
13 |   box.value=x;
14 | }
15 | 
16 | function sqr(){
17 |   x=box.value;
18 |   x=eval(x*x);
19 |   box.value=x;
20 | }
21 | 
22 | function backSpace(){
23 |   var num = box.value;
24 |   var len = num.length-1;
25 |   var newNum = num.substring(0,len);
26 |   box.value = newNum;
27 | }
28 | 


--------------------------------------------------------------------------------
/Calculator/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     background-color: #e0fbfc;
  3 |     width: 100vw;
  4 |     height: 100vh;
  5 |     display: flex;
  6 |     justify-content: center;
  7 |     align-items: center;
  8 |     text-align: center;
  9 |   }
 10 |   
 11 |   
 12 |   #calc {
 13 |     width: 350px;
 14 |     height: 450px;
 15 |     padding: 20px;
 16 |     border-radius: 20px;
 17 |     margin: 20px auto;
 18 |     background: #253237;
 19 |     box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
 20 |      rgba(0, 0, 0, 0.22) 0px 15px 12px;
 21 |   }
 22 |   
 23 |   #calc-display {
 24 |     margin-bottom: 20px;
 25 |     background: #c2dfe3;
 26 |     box-shadow: inset -5px 5px 4px #abc4c8,
 27 |               inset 5px -5px 4px #d9fafe;
 28 |     height: 35px;
 29 |     width: 300px;
 30 |     padding: 5px;
 31 |     outline: none;
 32 |     border-radius: 10px;
 33 |     text-align: right;
 34 |     font-family: Quicksand;
 35 |     font-size: 14px;
 36 |     color: #1d282b;
 37 |     font-weight: bolder;
 38 |     font-size: 18px;
 39 |     border: none;
 40 |   }
 41 |   
 42 |   .keys {
 43 |     cursor: pointer;
 44 |     outline: none;
 45 |     color: #e0fbfc;
 46 |     background: #253237;
 47 |     box-shadow:  -8px 8px 16px #1d282b,
 48 |                8px -8px 16px #2d3d43;
 49 |     width: 50px;
 50 |     height: 50px;
 51 |     margin: 10px;
 52 |     font-weight: bold;
 53 |     border: none;
 54 |     font-size: 18px;
 55 |   }
 56 |   
 57 |   .keys:active {
 58 |     border: none;
 59 |     background: #253237;
 60 |     box-shadow: inset -8px 8px 16px #1d282b,
 61 |               inset 8px -8px 16px #2d3d43;
 62 |     color: #e0fbfc;
 63 |   }
 64 |   
 65 |   .bottom {
 66 |     position: relative;
 67 |     left: -2px;
 68 |   }
 69 |   
 70 |   #equals {
 71 |     cursor: pointer;
 72 |     outline: none;
 73 |     color: #000;
 74 |     width: 135px;
 75 |     height: 45px;
 76 |     border: none;
 77 |     margin-right: 10px;
 78 |     color: #e0fbfc;
 79 |     background: #253237;
 80 |     box-shadow:  -8px 8px 16px #1d282b,
 81 |     8px -8px 16px #2d3d43;
 82 |   }
 83 |   
 84 |   #equals:active {
 85 |     border: none;
 86 |     background: #253237;
 87 |     box-shadow: inset -8px 8px 16px #1d282b,
 88 |               inset 8px -8px 16px #2d3d43;
 89 |     color: #e0fbfc;
 90 |   }
 91 |   
 92 |   div > h3 {
 93 |     color: #aaa;
 94 |     opacity: 0.56;
 95 |     font-family: Quicksand;
 96 |     letter-spacing: 3px;
 97 |     text-shadow: 1px 4px #111;
 98 |   }
 99 |   
100 |   .spacer {
101 |     padding: 50px;
102 |   }
103 | 


--------------------------------------------------------------------------------
/Card Outer Glow Effect/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Card Outer GLow Effect</title>
 6 |   <link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <!DOCTYPE html>
12 | <html>
13 | <head>
14 | <title>Card Effect</title>
15 | </head>
16 | <body>
17 |      <script src="https://kit.fontawesome.com/95a02bd20d.js"></script>
18 | 
19 |   <div class="container">
20 |      <div class="card">
21 |        <div class="face face1">
22 |          <div class="content">
23 |             <i class="fab fa-windows"></i>            
24 |            <h3>Windows</h3>
25 |          </div>
26 |        </div>
27 |        <div class="face face2">
28 |          <div class="content">
29 |            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur alias corporis?</p>
30 |            <a href="#" type="button">Read More</a>
31 |          </div>
32 |        </div>
33 |     </div>
34 |     
35 |     <div class="card">
36 |        <div class="face face1">
37 |          <div class="content">
38 |       <i class="fab fa-android"></i>               <h3>Android</h3>
39 |          </div>
40 |        </div>
41 |        <div class="face face2">
42 |          <div class="content">
43 |            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur alias corporis?</p>
44 |            <a href="#" type="button">Read More</a>
45 |          </div>
46 |        </div>
47 |     </div>
48 |     
49 |     
50 |     <div class="card">
51 |        <div class="face face1">
52 |          <div class="content">
53 |            <i class="fab fa-apple"></i>
54 |             <h3>Apple</h3>
55 |          </div>
56 |        </div>
57 |        <div class="face face2">
58 |          <div class="content">
59 |            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur alias corporis?</p>
60 |            <a href="#" type="button">Read More</a>
61 |          </div>
62 |        </div>
63 |     </div>  
64 |     
65 |   </div>
66 |   
67 | </body>
68 | </html>
69 | <!-- partial -->
70 |   
71 | </body>
72 | </html>
73 | 
74 | 


--------------------------------------------------------------------------------
/Card Outer Glow Effect/style.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |   display:flex;
  3 |   margin:0;
  4 |   padding:0;
  5 |   min-height: 100vh;
  6 |   background: #444;
  7 |   justify-content: center;
  8 |   align-items: center;
  9 |   font-family: arial;
 10 | }
 11 | 
 12 | .container{
 13 |   width: 1000px;
 14 |   position: relative;
 15 |   display: flex;
 16 |   justify-content: space-between;
 17 |   flex-wrap:wrap;
 18 |   
 19 | }
 20 | 
 21 | .container .card{
 22 |   position: relative;
 23 | }
 24 | 
 25 | .container .card .face{
 26 |   width:300px;
 27 |   height: 200px;
 28 |   transition:.4s;
 29 |   
 30 | }
 31 | 
 32 | .container .card .face.face1{
 33 |   position: relative;
 34 |   background: #333;
 35 |   display: flex;
 36 |   justify-content: center;
 37 |   align-content:center;
 38 |   align-items: center;
 39 |   z-index: 1;
 40 |   transform: translateY(100px);
 41 | }
 42 | 
 43 | .container .card:hover .face.face1{
 44 |   transform: translateY(0);
 45 |   box-shadow:
 46 |     inset 0 0 60px whitesmoke,
 47 |     inset 20px 0 80px #f0f,
 48 |     inset -20px 0 80px #0ff,
 49 |     inset 20px 0 300px #f0f,
 50 |     inset -20px 0 300px #0ff,
 51 |     0 0 50px #fff,
 52 |     -10px 0 80px #f0f,
 53 |     10px 0 80px #0ff; 
 54 | }
 55 | 
 56 | 
 57 | .container .card .face.face1 .content{
 58 |   opacity: .2;
 59 |   transition:  0.5s;
 60 |   text-align: center; 
 61 | }
 62 | 
 63 | .container .card:hover .face.face1 .content{
 64 |   opacity: 1;
 65 |  
 66 | }
 67 | 
 68 | .container .card .face.face1 .content i{
 69 |   font-size: 3em;
 70 |   color: white;
 71 |   display: inline-block;
 72 |    
 73 | }
 74 | 
 75 | .container .card .face.face1 .content h3{
 76 |   font-size: 1em;
 77 |   color: white;
 78 |   text-align: center;
 79 | }
 80 | 
 81 | .container .card .face.face1 .content a{
 82 |    transition: .5s;
 83 | }
 84 | 
 85 | .container .card .face.face2{
 86 |    position: relative;
 87 |    background: whitesmoke;
 88 |    display: flex;
 89 |    align-items: center;
 90 |    justify-content: center;
 91 |    padding: 20px;
 92 |   box-sizing: border-box;
 93 |   box-shadow: 0 20px 50px rgba(0,0,0,.8);
 94 |   transform: translateY(-100px);
 95 | }
 96 | 
 97 | .container .card:hover .face.face2{
 98 |     transform: translateY(0);
 99 | }
100 | 
101 | .container .card .face.face2 .content p, a{
102 |   font-size: 10pt;
103 |   margin: 0 ;
104 |   padding: 0;
105 |   color:#333;
106 | }
107 | 
108 | .container .card .face.face2 .content a{
109 |   text-decoration:none;
110 |   color: black;
111 |   box-sizing: border-box;
112 |   outline : 1px dashed #333;
113 |   padding: 10px;
114 |   margin: 15px 0 0;
115 |   display: inline-block;
116 | }
117 | 
118 | .container .card .face.face2 .content a:hover{
119 |   background: #333 ;
120 |   color: whitesmoke; 
121 |   box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
122 | }
123 | 


--------------------------------------------------------------------------------
/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 Rotating Carousel/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Circular Rotating Carousel</title>
 6 |   <link rel="stylesheet" href="style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <div class="void" id="void">
12 | 	<div class="crop">
13 | 	<ul id="card-list" style="--count: 6;">
14 | 		<li><div class="card"><a href=""><span class="model-name">codewithrutu_09</span><span>A Instagram and Linkedin account run by a web developer and creator named Rutuja.</span></a></div></li>
15 | 		<li><div class="card"><a href=""><span class="model-name">codewithrutu_09</span><span>A Instagram and Linkedin account run by a web developer and creator named Rutuja.</span></a></div></li>
16 | 		<li><div class="card"><a href=""><span class="model-name">codewithrutu_09</span><span>A Instagram and Linkedin account run by a web developer and creator named Rutuja.</span></a></div></li>
17 | 		<li><div class="card"><a href=""><span class="model-name">codewithrutu_09</span><span>A Instagram and Linkedin account run by a web developer and creator named Rutuja.</span></a></div></li>
18 | 		<li><div class="card"><a href=""><span class="model-name">codewithrutu_09</span><span>A Instagram and Linkedin account run by a web developer and creator named Rutuja.</span></a></div></li>
19 | 		<li><div class="card"><a href=""><span class="model-name">codewithrutu_09</span><span>A Instagram and Linkedin account run by a web developer and creator named Rutuja.</span></a></div></li>
20 | 	</ul>
21 | 	<div class="last-circle"></div>
22 | 	<div class="second-circle"></div>
23 | 	</div>
24 | 	<div class="mask"></div>
25 | 	<div class="center-circle"></div>
26 | <div>
27 | <!-- partial -->
28 |   
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Distorted Text Animation/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 |     <link rel="stylesheet" href="style.css">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <ul>
11 |         <li data-title="R">R</li>
12 |         <li data-title="U">U</li>
13 |         <li data-title="T">T</li>
14 |         <li data-title="U">U</li>
15 |         <li data-title="J">J</li>
16 |         <li data-title="A">A</li>
17 |     </ul>
18 | </body>
19 | </html>
20 | 
21 | 


--------------------------------------------------------------------------------
/Distorted Text Animation/style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | body{
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     background: #f28482;
  6 | }
  7 | 
  8 | ul{
  9 |     position: absolute;
 10 |     top: 50%;
 11 |     left: 10%;
 12 |     transform: translate(0, -50%);
 13 | }
 14 | 
 15 | li{
 16 |     list-style: none;
 17 |     float: left;
 18 |     color: transparent;
 19 |     font-family: "Arial black";
 20 |     font-size: 13em;
 21 |     position: relative;
 22 | }
 23 | 
 24 | ul li:before,
 25 | ul li:after{
 26 |     content: attr(data-title);
 27 |     color: #262626;
 28 |     position: absolute;
 29 |     top: 0;
 30 |     left: 0;
 31 |     overflow: hidden;
 32 | }
 33 | 
 34 | ul li:nth-child(odd):before{
 35 |     -webkit-clip-path:polygon(55% 0, 0 0, 0 100%, 35% 100%);
 36 |     clip-path:polygon(55% 0, 0 0, 0 100%, 35% 100%);
 37 |     top: -7px;
 38 |     left: -2px;
 39 | }
 40 | 
 41 | ul li:nth-child(odd):after{
 42 |     -webkit-clip-path:polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
 43 |     clip-path:polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
 44 |     top: 2px;
 45 |     left: 2px;
 46 | }
 47 | 
 48 | ul li:nth-child(even):before{
 49 |     -webkit-clip-path:polygon(25% 0, 0 0, 0 100%, 75% 100%);
 50 |     clip-path:polygon(25% 0, 0 0, 0 100%, 75% 100%);
 51 |     top: 10px;
 52 |     left: -2px;
 53 | }
 54 | 
 55 | ul li:nth-child(even):after{
 56 |     -webkit-clip-path:polygon(25% 0, 100% 0, 100% 100%, 75% 100%);
 57 |     clip-path:polygon(25% 0, 100% 0, 100% 100%, 75% 100%);
 58 |     top: 2px;
 59 |     left: 2px;
 60 | }
 61 | 
 62 | ul li:nth-child(even){
 63 |     animation: even 3s linear infinite;
 64 | }
 65 | 
 66 | ul li:nth-child(odd){
 67 |     animation: odd 3s linear infinite;
 68 | }
 69 | 
 70 | @keyframes even{
 71 |     0%{
 72 |         transform: rotate(15deg);
 73 |     }
 74 |     25%{
 75 |         transform: rotate(0deg);
 76 |     }
 77 |     50%{
 78 |         transform: rotate(-15deg);
 79 |     }
 80 |     75%{
 81 |         transform: rotate(0deg);
 82 |     }
 83 |     100%{
 84 |         transform: rotate(15deg);
 85 |     }
 86 | }
 87 | 
 88 | @keyframes odd{
 89 |     0%{
 90 |         transform: rotate(-15deg);
 91 |     }
 92 |     25%{
 93 |         transform: rotate(0deg);
 94 |     }
 95 |     50%{
 96 |         transform: rotate(15deg);
 97 |     }
 98 |     75%{
 99 |         transform: rotate(0deg);
100 |     }
101 |     100%{
102 |         transform: rotate(-15deg);
103 |     }
104 | }
105 | 


--------------------------------------------------------------------------------
/Ecommerce Website Design/Ecommerce-Website-Design-images.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutuja927/HTML-CSS-JAVASCRIPT-PROJECTS/386dfa59397a4d79fb89ac3929a76c366a68defb/Ecommerce Website Design/Ecommerce-Website-Design-images.zip


--------------------------------------------------------------------------------
/Esports-athelete-card-design/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 |     <link rel="stylesheet" href="./style.css">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <div class="card">
12 |             <div class="top">
13 |                 <h1>INDIA</h1>
14 |             </div>
15 |             <div class="bottom">
16 |                 <img src="https://w0.peakpx.com/wallpaper/796/203/HD-wallpaper-scout-vector-prajwal-pubg-pubgmobile-sc0ut-op-scout.jpg" alt="">
17 |                 <h1>SCOUTOP</h1>
18 |                 <h2>Esports Athlete</h2>
19 |                 <div class="stats">
20 |                     <span>12</span>
21 |                     <span>2000</span>
22 |                 </div>
23 |                 <div class="values">
24 |                     <span>Kills</span>
25 |                     <span>Damage</span>
26 |                 </div>
27 |                 <a href="#" class="btn">Follow</a>
28 |                 <p>ScoutOp is one of the top BGMI players in the Indian Esports community. You could also say that scout is the first BGMI player to play in India.</p>
29 |             </div>
30 |         </div>
31 |     </div>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Esports-athelete-card-design/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
  2 | 
  3 | *{
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     font-family: 'Poppins', sans-serif;
  8 | }
  9 | 
 10 | .container{
 11 |     width: 100vw;
 12 |     height: 100vh;
 13 |     background: linear-gradient(to right, #be93c5, #7bc6cc);
 14 |     display: flex;
 15 |     justify-content: center;
 16 |     align-items: center;
 17 | }
 18 | 
 19 | .card{
 20 |     width: 400px;
 21 |     height: 600px;
 22 |     background-color: #faf3dd;
 23 |     display: flex;
 24 |     justify-content: space-between;
 25 |     align-items: center;
 26 |     flex-direction: column;
 27 |     border-radius: 20px;
 28 |     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 29 | }
 30 | 
 31 | .top{
 32 |     position: relative;
 33 |     width: 100%;
 34 |     height: 100%;
 35 |     flex-basis: 35%;
 36 |     background: url("https://g2g.news/wp-content/uploads/2023/02/Sc0utOP.jpg");
 37 |     background-size: cover;
 38 |     background-position: center;
 39 |     background-repeat: no-repeat;
 40 |     filter: grayscale(0.6) ;
 41 |     border-radius: 20px;
 42 |     box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
 43 |     overflow: hidden;
 44 | }
 45 | 
 46 | .top h1{
 47 |     position: absolute;
 48 |     font-weight: 900;
 49 |     font-size: 35px;
 50 |     text-transform: uppercase;
 51 |     letter-spacing: 0.1em;
 52 |     left: 3%;
 53 |     color: #fff;
 54 |     opacity: 0.6;
 55 |     pointer-events: none;
 56 | }
 57 | 
 58 | .bottom{
 59 |     width: 100%;
 60 |     height: 100%;
 61 |     flex-basis: 65%;
 62 |     display: flex;
 63 |     justify-content: center;
 64 |     align-items: center;
 65 |     flex-direction: column;
 66 |     border-radius: 20px;
 67 |     padding: 20px;
 68 | }
 69 | 
 70 | .bottom img{
 71 |     width: 150px;
 72 |     height: 150px;
 73 |     border-radius: 50%;
 74 |     margin-top: -110px;
 75 |     z-index: 122;
 76 |     border: 2px solid white;
 77 |     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 78 |     cursor: pointer;
 79 | }
 80 | 
 81 | .bottom h1{
 82 |     margin-top: 20px;
 83 |     font-size: 30px;
 84 |     font-weight: 800;
 85 |     text-transform: uppercase;
 86 |     line-height: 0.9;
 87 |     letter-spacing: 0.1em;
 88 |     text-shadow: 2px 2px 3px rgba(87, 87, 87, 1);
 89 | }
 90 | .bottom h2{
 91 |     font-size: 22px;
 92 |     font-weight: 500;
 93 |     
 94 | }
 95 | 
 96 | .bottom h2{
 97 |     font-size: 18px;
 98 |     font-weight: 300; 
 99 |     text-align: center;
100 | }
101 | 
102 | .stats{
103 |     display: flex;
104 |     justify-content: center;
105 |     align-items: center;
106 |     gap: 150px;
107 | }
108 | 
109 | .stats span{
110 |     font-size: 25px;
111 |     font-weight: 600;
112 | }
113 | 
114 | .values{
115 |     display: flex;
116 |     justify-content: center;
117 |     align-items: center;
118 |     gap: 120px;
119 | }
120 | 
121 | .values span{
122 |     font-size: 22px;
123 |     font-weight: 300;
124 |     line-height: 1;
125 |     text-transform: uppercase;
126 | }
127 | 
128 | .btn{
129 |     margin: 20px 0;
130 |     padding: 10px 120px;
131 |     border: 3px solid #183a37;
132 |     background-color: #183a37;
133 |     text-align: center;
134 |     font-size: 18px;
135 |     font-weight: 600;
136 |     border-radius: 25px;
137 |     text-decoration: none;
138 |     color: #faf3dd;
139 |     letter-spacing: 0.1em;
140 |     text-transform: uppercase;
141 |     transition: 0.4s;
142 | }
143 | 
144 | .btn:hover{
145 |     background-color: #faf3dd;
146 |     color: #183a37;
147 | }
148 | 


--------------------------------------------------------------------------------
/Facebook Emoji's Reaction/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Facebook Emojies Reaction!</title>
 6 |   <link rel="stylesheet" href="style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <div class="box">
12 |   <input type="checkbox" id="like" class="field-reactions">
13 |   <h3 class="text-desc">Press space and after tab key to navigation</h3>
14 |   <label for="like" class="label-reactions">Like</label>
15 |   <div class="toolbox"></div>
16 |   <label class="overlay" for="like"></label>
17 |   <button class="reaction-like"><span class="legend-reaction">Like</span></button>
18 |   <button class="reaction-love"><span class="legend-reaction">Love</span></button>
19 |   <button class="reaction-haha"><span class="legend-reaction">Haha</span></button>
20 |   <button class="reaction-wow"><span class="legend-reaction">Wow</span></button>
21 |   <button class="reaction-sad"><span class="legend-reaction">Sad</span></button>
22 |   <button class="reaction-angry"><span class="legend-reaction">Angry</span></button>
23 | </div>
24 | <!-- partial -->
25 |   <script  src="escript.js"></script>
26 | 
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Flower Animation/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>Loading animation | untoldcoding</title>
 7 |     <style></style>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div class="untoldcoding"></div>
13 |       <div class="untoldcoding"></div>
14 |       <div class="untoldcoding"></div>
15 |       <div class="untoldcoding"></div>
16 |       <div class="untoldcoding"></div>
17 |       <div class="untoldcoding"></div>
18 |       <div class="untoldcoding"></div>
19 |       <div class="untoldcoding"></div>
20 |       <div class="untoldcoding"></div>
21 |       <div class="untoldcoding"></div>
22 |       <div class="untoldcoding"></div>
23 |       <div class="untoldcoding"></div>
24 |       <div class="untoldcoding"></div>
25 |       <div class="untoldcoding"></div>
26 |       <div class="untoldcoding"></div>
27 |       <div class="untoldcoding"></div>
28 |       <div class="untoldcoding"></div>
29 |       <div class="untoldcoding"></div>
30 |       <div class="untoldcoding"></div>
31 |       <div class="untoldcoding"></div>
32 |       <div class="untoldcoding"></div>
33 |       <div class="untoldcoding"></div>
34 |       <div class="untoldcoding"></div>
35 |       <div class="untoldcoding"></div>
36 |       <div class="untoldcoding"></div>
37 |       <div class="untoldcoding"></div>
38 |       <div class="untoldcoding"></div>
39 |       <div class="untoldcoding"></div>
40 |       <div class="untoldcoding"></div>
41 |       <div class="untoldcoding"></div>
42 |       <div class="untoldcoding"></div>
43 |       <div class="untoldcoding"></div>
44 |       <div class="untoldcoding"></div>
45 |       <div class="untoldcoding"></div>
46 |       <div class="untoldcoding"></div>
47 |       <div class="untoldcoding"></div>
48 |       <div class="untoldcoding"></div>
49 |       <div class="untoldcoding"></div>
50 |       <div class="untoldcoding"></div>
51 |       <div class="untoldcoding"></div>
52 |       <div class="untoldcoding"></div>
53 |       <div class="untoldcoding"></div>
54 |       <div class="untoldcoding"></div>
55 |       <div class="untoldcoding"></div>
56 |       <div class="untoldcoding"></div>
57 |       <div class="untoldcoding"></div>
58 |       <div class="untoldcoding"></div>
59 |       <div class="untoldcoding"></div>
60 |       <div class="untoldcoding"></div>
61 |       <div class="untoldcoding"></div>
62 |       <div class="untoldcoding"></div>
63 |       <div class="untoldcoding"></div>
64 |       <div class="untoldcoding"></div>
65 |       <div class="untoldcoding"></div>
66 |       <div class="untoldcoding"></div>
67 |       <div class="untoldcoding"></div>
68 |       <div class="untoldcoding"></div>
69 |       <div class="untoldcoding"></div>
70 |       <div class="untoldcoding"></div>
71 |       <div class="untoldcoding"></div>
72 |     </div>
73 |   </body>
74 | </html>
75 | 
76 | 


--------------------------------------------------------------------------------
/Fruit Product Card Design/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 |     <link rel="stylesheet" href="./style.css">
 7 |     <title>Apple Card Design</title>
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <div class="card">
12 |             <div class="image">
13 |                 <img src="https://www.urbangroc.com/wp-content/uploads/2023/01/pngwing.com_.png.webp" alt="">
14 |             </div>
15 |             <div class="content">
16 |                 <h1>Green Apples</h1>
17 |                 <h4>BHARAT (kashmir)</h4>
18 |                 <p>RS <span>100</span></p>
19 |                 <h3>Select the Color</h3>
20 |                 <div class="apples">
21 |                     <img src="https://www.urbangroc.com/wp-content/uploads/2023/01/pngwing.com_.png.webp" 
22 |                     style=" border:2px solid#e63946;">
23 |                     <img src="https://img.freepik.com/premium-vector/ripe-yellow-apple_157999-207.jpg">
24 |                     <img src="https://png.pngtree.com/element_our/png/20181129/vector-illustration-of-fresh-
25 |                     red-apple-with-single-leaf-png_248312.jpg">
26 |                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBNRHegczLCygzstUF-yx5Ts
27 |                     NmWo7EkN2l3Q&usqp=CAU">
28 |                 </div>
29 |                 <h3>BENEFITS</h3>
30 |                 <ul>
31 |                     <li>Boosts Heart Health.</li>
32 |                     <li>May Support Weight Management.</li>
33 |                     <li>Decreases the Risk of Cancer.</li>
34 |                     <li>Could be good for your heart.</li>
35 |                 </ul>
36 |                 <a href="" class="btn">Add to Cart</a>
37 |             </div>
38 |         </div>
39 |     </div>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Fruit Product Card Design/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
  2 | 
  3 | *{
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     font-family: 'Poppins', sans-serif;
  8 | }
  9 | 
 10 |         .container{
 11 |             width: 100vw;
 12 |             height: 100vh;
 13 |             display: flex;
 14 |             justify-content: center;
 15 |             align-items: center;
 16 |             background-color: #386641;
 17 |         }
 18 | 
 19 |         .card{
 20 |             position: relative;
 21 |             width: 60%;
 22 |             height: 80%;
 23 |             margin: auto;
 24 |             background-color: #fff;
 25 |         }
 26 | 
 27 |         .image{
 28 |             position: absolute;
 29 |             top: 10.5%;
 30 |             left: -60px;
 31 |             width: 400px;
 32 |             height: 450px;
 33 |             background-color: #6a994e;
 34 |             box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
 35 |             rgba(0, 0, 0, 0.22) 0px 10px 10px;
 36 |             border-radius: 25px;
 37 |         }
 38 | 
 39 |         .image img{
 40 |             position: absolute;
 41 |             top: 20px;
 42 |             left: -50px;
 43 |             width: 100%;
 44 |             height: auto;
 45 |         }
 46 | 
 47 |         .content{
 48 |             position: absolute;
 49 |             left: 43%;
 50 |             top: 20px;
 51 |         }
 52 | 
 53 |         .content h1{
 54 |             color: #000;
 55 |             font-size: 45px;
 56 |             font-weight: 900;
 57 |             text-transform: uppercase;
 58 |             letter-spacing: 0.05em;
 59 |         }
 60 | 
 61 |         .content h4{
 62 |             color: #333;
 63 |             line-height: 0.7;
 64 |             font-weight: 500;
 65 |         }
 66 | 
 67 |         .content p{
 68 |             margin-top: 10px;
 69 |             color: #e63946;
 70 |             font-size: 30px;
 71 |         }
 72 | 
 73 |         .content p span{
 74 |             font-size: 55px;
 75 |             font-weight: 600;
 76 |         }
 77 | 
 78 |         .content h3{
 79 |             margin-top: 20px;
 80 |             font-size:18px;
 81 |             color: #777;
 82 |             text-transform: uppercase;
 83 |             letter-spacing: 0.1em;
 84 |             font-weight: 500;
 85 |         }
 86 | 
 87 |         .apples{
 88 |             margin: 10px 0;
 89 |             display: flex;
 90 |             justify-content: start;
 91 |             align-items: center;
 92 |             gap: 30px;
 93 |         }
 94 | 
 95 |         .apples img{
 96 |             padding: 5px;
 97 |             width: 50px;
 98 |             border: 2px solid #202020;
 99 |             border-radius: 15px;
100 |         }
101 | 
102 |         ul{
103 |             margin-bottom: 30px;
104 |         }
105 | 
106 |         .btn{
107 |             text-decoration: none;
108 |             color: #fff;
109 |             background-color: #e63946;
110 |             padding: 15px 40px;
111 |             transition: 0.4s;
112 |         }
113 | 
114 |         .btn:hover{
115 |             border: 2px solid #e63946;
116 |             background-color: #fff;
117 |             color: #e63946;
118 |         }
119 | 


--------------------------------------------------------------------------------
/Glassmorphism camera website landing page/1 (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutuja927/HTML-CSS-JAVASCRIPT-PROJECTS/386dfa59397a4d79fb89ac3929a76c366a68defb/Glassmorphism camera website landing page/1 (1).png


--------------------------------------------------------------------------------
/Glassmorphism camera website landing page/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 |     <link rel="stylesheet" href="style.css">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 | 
11 |     <div class="main">
12 |         <div class="container">
13 |             <div class="header">
14 |                 <div class="navlinks">
15 |                     <ul>
16 |                         <li><ion-icon name="grid"></ion-icon></li>
17 |                         <li><a href="#">Home</a></li>
18 |                         <li><a href="#">Old Models</a></li>
19 |                         <li><a href="#">New</a></li>
20 |                         <li><a href="#">About</a></li>
21 |                     </ul>
22 |                 </div>
23 |                 <div class="search">
24 |                     <ul>
25 |                         <li><a href="#"><ion-icon name="cart"></ion-icon></a></li>
26 |                         <li><a href="#"><ion-icon name="search"></ion-icon></a></li>
27 |                         <li><a href="#"><ion-icon name="person"></ion-icon></a></li>
28 |                     </ul>
29 |                 </div>
30 |             </div>
31 |             
32 | 
33 |             <div class="section">
34 |                 <div class="old-model">
35 |                     <ion-icon name="chevron-back"></ion-icon>
36 |                     <h2>Model 2022</h2>
37 |                 </div>
38 | 
39 |                 <div class="main-content">
40 |                     <div class="left">
41 |                         <h2>The Best Camera for Creative in 2019</h2>
42 |                         <h1>It's Coming</h1>
43 |                     </div>
44 |                     <div class="image">
45 |                         <img src="./1.png" alt="">
46 |                     </div>
47 |                     <div class="right">
48 |                         <h2>Make Sure You Did a Preorder</h2>
49 |                         <h1>Next Week</h1>
50 |                     </div>
51 |                 </div>
52 |                 <div class="new-model">
53 |                     <h2>Model 2024</h2>
54 |                     <ion-icon name="chevron-forward"></ion-icon>
55 |                 </div>
56 |                 <a href="#" class="btn">Preorder</a>
57 | 
58 |                 <div class="social">
59 |                     <ion-icon name="logo-instagram"></ion-icon>
60 |                     <ion-icon name="logo-linkedin"></ion-icon>
61 |                     <ion-icon name="logo-twitter"></ion-icon>
62 |                     <ion-icon name="logo-github"></ion-icon>
63 |                 </div>
64 |             </div>
65 |         </div>
66 | 
67 |         
68 | 
69 |     </div>  
70 | 
71 | 
72 | 
73 |     <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
74 |     <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
75 | </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/Glowing Heart Animations/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>Glowing Heart Animation</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 |  <canvas id="canvas" width="1400" height="600">
12 | </canvas>
13 | 
14 | <!-- js here -->
15 |     <script src="app.js"></script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Glowing Heart Animations/style.css:
--------------------------------------------------------------------------------
1 | body {  
2 |     background-color: #000;    
3 |     margin: 0;  
4 |     overflow: hidden;  
5 |     background-repeat: no-repeat;  
6 |    }  
7 | 


--------------------------------------------------------------------------------
/Glowing Name/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 |             <!DOCTYPE html>
 3 |             <html lang="en">
 4 |             <head>
 5 |                 <meta charset="UTF-8">
 6 |                 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |                 <link rel="stylesheet" href="style.css">
 9 |                 <title>glowing</title>
10 |             </head>
11 |             <body>
12 |                 <h1>
13 |                     <span>R</span>
14 |                     <span>U</span>
15 |                     <span>T</span>
16 |                     <span>U</span>
17 |                     <span>J</span>
18 |                     <span>A</span>
19 |                 </h1>
20 |             </body>
21 |             </html>
22 | 


--------------------------------------------------------------------------------
/Glowing Name/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |         *{
 4 |             margin:0;
 5 |             padding: 0%;
 6 |             box-sizing: border-box;
 7 |         }
 8 | 
 9 |         body{
10 |             font-family: Arial, Helvetica, sans-serif;
11 |             display: flex;
12 |             justify-content: center;
13 |             align-items: center;
14 |             height: 100vh;
15 |             background: #000;
16 |         }
17 | 
18 |         h1{
19 |             margin: 0%;
20 |             padding: 0%;
21 |             color: #111;
22 |             font-size: 12em;
23 |         }
24 | 
25 |         h1 span{
26 |             display: table-cell;
27 |             margin: 20px;
28 |             padding: 2rem;
29 |             animation: animate 3s ease infinite;
30 |         }
31 | 
32 | 
33 | 
34 |         h1 span:nth-child(1)
35 |         {
36 |             animation-delay: 0s;
37 |         }
38 |         h1 span:nth-child(2)
39 |         {
40 |             animation-delay: 0.3s;
41 |         }
42 |         h1 span:nth-child(3)
43 |         {
44 |             animation-delay: 0.6s;
45 |         }
46 |         h1 span:nth-child(4)
47 |         {
48 |             animation-delay: 0.9s;
49 |         }
50 |         h1 span:nth-child(5)
51 |         {
52 |             animation-delay: 1.2s;
53 |         }
54 |         h1 span:nth-child(6)
55 |         {
56 |             animation-delay: 1.6s;
57 |         }
58 | 
59 | 
60 |         @keyframes animate{
61 |             0%,100%{
62 |                 color: #fff;
63 |                 filter: blur(2px);
64 |                 text-shadow: 0 0 10px #ff9d00,
65 |                 0 0 20px #ff9d00,
66 |                 0 0 400px #ff9d00,
67 |                 0 0 80px #ff9d00,
68 |                 0 0 120px #ff9d00,
69 |                 0 0 200px #ff9d00,
70 |                 0 0 300px #ff9d00,
71 |                 0 0 400px #ff9d00;
72 |             }
73 | 
74 |             5%,95%{
75 |                 color: #111;
76 |                 filter: blur(0px);
77 |                 text-shadow: none;
78 |             }
79 |         }
80 | 


--------------------------------------------------------------------------------
/Guess number game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - Guess the number</title>
 6 |   <link rel="stylesheet" href="style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <html>
12 |   <body>
13 |     <div id="game">
14 |       <h1> Guess the Number </h1>
15 |       <p>Whats your guess between 1 and 100?<br/>
16 |          You have 7 guesses.</p>
17 |       <form>
18 |         <input type="text" id="guess">
19 |         <div>
20 |           <button id="btnSubmit">Guess</button>
21 |           <button id="btnReset">New Game</button>
22 |         </div>
23 |       </form>
24 |       <div id="inputLabel"></div>
25 |     </div>
26 |   </body>
27 | </html>
28 | <!-- partial -->
29 |   <script  src="script.js"></script>
30 | 
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Guess number game/script.js:
--------------------------------------------------------------------------------
 1 | var correctGuess = 0;
 2 | var guessesTaken = 0;
 3 | var maxGuesses = 7;
 4 | var gameDone = 0;
 5 | 
 6 | var newGame = function() { 
 7 |   var lbl = document.getElementById('inputLabel');
 8 |   lbl.innerHTML = " ";
 9 |   guessesTaken = 0;
10 |   correctGuess = Math.floor((Math.random() * 100)+1);
11 | };
12 | 
13 | newGame();
14 | 
15 | var btnReset = document.getElementById('btnReset');
16 | btnReset.onclick = newGame;
17 | 
18 | var response = function(txtGuess) {
19 |   var answer;
20 |   
21 |   while (guessesTaken < maxGuesses && gameDone == 0) {
22 |     if (txtGuess == correctGuess) {
23 |       answer = "Correct! ";
24 |     } else if (txtGuess < correctGuess && txtGuess > 0) {
25 |       answer = "Higher, ";
26 |     } else if (txtGuess > correctGuess && txtGuess < 101) {
27 |       answer = "Lower, ";
28 |     } else {
29 |       answer = "Enter a number, ";
30 |       return answer; /*exit loop to prevent increasing guessesTaken*/
31 |     }
32 |     
33 |     guessesTaken += 1;
34 |     return answer;
35 |   }
36 |   
37 |   return "New game?";
38 | };
39 | 
40 | var btnSubmit = document.getElementById('btnSubmit');
41 | btnSubmit.onclick = function(e) {
42 |   var txtGuess = document.getElementById('guess').value;
43 |   var answer = response(txtGuess);
44 |   var remainingMessage = (maxGuesses - guessesTaken).toString() + " guess(es) remain"; 
45 |   var lbl = document.getElementById('inputLabel');
46 |   if (gameDone == 0) {
47 |     if (answer == "Correct! ") {
48 |       lbl.innerHTML += answer + "<p> Play again </p>";
49 |       gameDone = 1;
50 |     } else if (guessesTaken == maxGuesses) {
51 |       lbl.innerHTML += "<p> You lost. New game? </p>";
52 |       gameDone = 1;
53 |     } else {
54 |       lbl.innerHTML += "<span id='response'>" + txtGuess + "</span>" + answer + remainingMessage + "<br />";
55 |     }
56 |   }
57 |   var txtGuess = document.getElementById('guess');
58 |   txtGuess.value = null;
59 |   return false;
60 | };
61 | 


--------------------------------------------------------------------------------
/Guess number game/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
  2 | 
  3 | *{
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: 'Poppins', sans-serif;
  8 | }
  9 | 
 10 | body {
 11 |   background: #247b7b;
 12 |   width: 100vw;
 13 |   height: 100vh;
 14 |   display: flex;
 15 |   justify-content: center;
 16 |   align-items: center;
 17 | }
 18 | 
 19 | #game {
 20 |   width: 450px;
 21 |   height: 600px;
 22 |   margin: auto;
 23 |   padding: 20px;
 24 |   border-radius: 36px;
 25 |   background: #247b7b;
 26 |   box-shadow: inset 8px 8px 16px #1c6060,
 27 |             inset -8px -8px 16px #2c9696;
 28 | }
 29 | 
 30 | h1 {
 31 |   font-size: 35px;
 32 |   text-align: center;
 33 |   text-transform: uppercase;
 34 |   font-weight: 900;
 35 |   letter-spacing: 0.05em;
 36 |   color: #093f44;
 37 |   margin-bottom: 30px;
 38 |   text-shadow: 0px 2px 1px rgba(255, 255, 250, 1);
 39 | }
 40 | 
 41 | p{
 42 |   font-size: 20px;
 43 |   text-align: left;
 44 |   font-weight: 600;
 45 |   color: #fffffa;
 46 |   margin-bottom: 30px;
 47 | }
 48 | 
 49 | form{
 50 |   display: flex;
 51 |   justify-content: center;
 52 |   align-items: center;
 53 |   flex-direction: column;
 54 | }
 55 | 
 56 | input{
 57 |   padding: 0 30px;
 58 |   width: 70%;
 59 |   height: 40px;
 60 |   margin-bottom: 30px;
 61 |   border-radius: 15px;
 62 |   border: none;
 63 |   outline: none;
 64 |   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px,
 65 |  rgba(0, 0, 0, 0.23) 0px 3px 6px;
 66 | }
 67 | 
 68 | input:focus-within{
 69 |   font-size: 18px;
 70 |   font-weight: 500;
 71 |   color: #093f44;
 72 | }
 73 | 
 74 | #canvas-container {
 75 |   background-color: grey;
 76 | }
 77 | 
 78 | 
 79 | #btnSubmit{
 80 |   padding: 8px 20px;
 81 |   font-size: 18px;
 82 |   cursor: pointer;
 83 |   letter-spacing: 0.1em;
 84 |   font-weight: 600;
 85 |   background: #093f44;
 86 |   outline: none;
 87 |   border: none;
 88 |   text-align: center;
 89 |   color: #fffffa;
 90 |   text-transform: uppercase;
 91 |   margin-right: 30px;
 92 | }
 93 | 
 94 | #btnReset{
 95 |   padding: 8px 20px;
 96 |   font-size: 18px;
 97 |   cursor: pointer;
 98 |   letter-spacing: 0.1em;
 99 |   font-weight: 600;
100 |   background: #fffffa;
101 |   outline: none;
102 |   border: none;
103 |   text-align: center;
104 |   color: #093f44;
105 |   text-transform: uppercase;
106 | }
107 | 
108 | #response {
109 |   padding-right: 10px;
110 | }
111 | 
112 | #game, #inputLabel {
113 |   /* height: 100%; */
114 |   min-height: 250px;
115 | }
116 | 


--------------------------------------------------------------------------------
/Happy Holi/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>Document</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <canvas></canvas>
11 |     <div>Happy Holi</div>
12 |     <p>( CLICK ON BLANK SPACES TO CHANGE FLUID COLOR )</P>
13 | </body>
14 | <script src="script.js"></script>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Happy Holi/style.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     overflow: hidden;
 3 |     padding:50px;
 4 |     color:#eae3e3;
 5 | }
 6 | 
 7 | body {
 8 | background: url(http://www.nhembram.com/images/happy_holi.jpg) no-repeat center center fixed;
 9 | 	-webkit-background-size: cover;
10 | 	-moz-background-size: cover;
11 | 	-o-background-size: cover;
12 | 	background-size: cover;
13 | }
14 | 
15 | canvas {
16 | 	position: fixed;
17 | 	top:0;
18 | 	left:0;
19 | 	width:100%;
20 | 	height:100%;
21 | 	z-index:0.5;
22 | 	opacity:1;
23 | }
24 | div{
25 |     position:relative;
26 |     z-index:1;
27 |     font-size:70px;
28 |     padding:0;
29 |     display: table;
30 |     margin:auto;
31 |     letter-spacing:2px;
32 |     font-family: 'Great Vibes', cursive;
33 | }
34 | P{
35 |     display: table;
36 |     margin:20px auto;
37 | 	font-family:Arial, Helvetica, sans-serif;
38 |     text-align:center;
39 |     font-size:8px; 
40 |     letter-spacing:2px;
41 |     position:absolute;
42 |     bottom:10px;
43 |     left:50%;   
44 |     z-index:1; 
45 |     -webit-transform:translateX(-50%);
46 |     -moz-transform:translateX(-50%);
47 |     transform:translateX(-50%);
48 | }
49 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Hide Social Media Icons/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 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Document</title>
 9 | </head>
10 | <body>
11 |     <nav class="social">
12 |         <ul>
13 |             <li><a href="">Instagram <i class="fa-brands fa-instagram"></i></a></li>
14 |             <li><a href="">Github <i class="fa-brands fa-github"></i></a></li>
15 |             <li><a href="">Telegram <i class="fa-brands fa-telegram"></i></a></li>
16 |             <li><a href="">Twitter <i class="fa-brands fa-twitter"></i></a></li>
17 |             <li><a href="">Linkedin <i class="fa-brands fa-linkedin-in"></i></a></li>
18 | 
19 |         </ul>
20 |     </nav>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Hide Social Media Icons/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background: #3d405bd7;
 3 |     color: #fff;
 4 |     font-family: 'Raleway', sans-serif;
 5 |   }
 6 | 
 7 | a {
 8 |     color: #fff;
 9 |     text-decoration: none;
10 |   }
11 |   .me {
12 |     width: 400px;
13 |     margin: 90px auto;
14 |   }
15 |   .me p,
16 |   .me h1 {
17 |     letter-spacing: 3px;
18 |     text-align: center;
19 |   }
20 |   .me p {
21 |     font-weight: 200;
22 |   }
23 |   .me span {
24 |     font-weight: bold;
25 |   }
26 |   .social {
27 |     position: fixed;
28 |     top: 30%;
29 |     left: 15px;
30 |   }
31 |   .social ul {
32 |     padding: 0px;
33 |     transform: translate(-270px, 0);
34 |   }
35 |   .social ul li {
36 |     display: block;
37 |     margin: 5px;
38 |     background: rgba(0, 0, 0, 0.36);
39 |     width: 300px;
40 |     text-align: right;
41 |     padding: 10px;
42 |     border-radius: 0 30px 30px 0;
43 |     transition: all 1s;
44 |   }
45 |   .social ul li:hover {
46 |     transform: translate(110px, 0);
47 |     background: rgba(255, 255, 255, 0.4);
48 |   }
49 |   .social ul li:hover a {
50 |     color: #fff;
51 |     font-weight: 500;
52 |     letter-spacing: 0.1em;
53 |     font-size: 18px;
54 |   }
55 |   .social ul li:hover i {
56 |     background: #fff;
57 |     transform: rotate(360deg);
58 |     transition: all 1s;
59 |   }
60 | 
61 |   .social ul li:hover .fa-instagram{
62 |     color:#E1306C;
63 |   }
64 |   .social ul li:hover .fa-github{
65 |     color:#6e5494;
66 |   }
67 |   .social ul li:hover .fa-telegram{
68 |     color:#229ED9;
69 |   }
70 |   .social ul li:hover .fa-twitter{
71 |     color:#1DA1F2;
72 |   }
73 |   .social ul li:hover .fa-linkedin-in{
74 |     color:#0077b5;
75 |   }
76 | 
77 | 
78 |   .social ul li i {
79 |     margin-left: 10px;
80 |     color: #fff;
81 |     background: #000;
82 |     padding: 10px;
83 |     border-radius: 50%;
84 |     width: 30px;
85 |     height: 30px;
86 |     font-size: 30px;
87 |     transform: rotate(0deg);
88 |   }
89 |   
90 |  
91 | 


--------------------------------------------------------------------------------
/Icons hover effects/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 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Document</title>
 9 | </head>
10 | <body>
11 |     <ul>
12 |         <li style="--clr:#2483ff;">a
13 |             <a href="">
14 |                 <i class="fa-solid fa-house"></i>
15 |                 <span>Home</span>
16 |             </a></li>
17 |         <li style="--clr:#fff200;">
18 |             <a href="">
19 |                 <i class="fa-solid fa-user"></i>
20 |                 <span>Profile</span>
21 |             </a></li>
22 |         <li style="--clr:#ff253f;">
23 |             <a href="">
24 |                 <i class="fa-solid fa-heart"></i>
25 |                 <span>Likes</span>
26 |             </a></li>
27 |         <li style="--clr:#25d366;">
28 |             <a href="">
29 |                 <i class="fa-solid fa-gear"></i>
30 |                 <span>Settings</span>
31 |             </a></li>
32 |         <li style="--clr:#f32ec8;">
33 |             <a href="">
34 |                 <i class="fa-solid fa-magnifying-glass"></i>
35 |                 <span>Search</span>
36 |             </a></li>
37 |     </ul>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/Icons hover effects/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | :root{
  8 |     --bg:#222;
  9 | }
 10 | 
 11 | body{
 12 |     display: flex;
 13 |     justify-content: center;
 14 |     align-items: center;
 15 |     min-height: 100vh;
 16 |     background: var(--bg);
 17 | }
 18 | 
 19 | ul{
 20 |     position: relative;
 21 |     display: flex;
 22 |     gap: 50px;
 23 | }
 24 | 
 25 | ul li{
 26 |     position: relative;
 27 |     list-style: none;
 28 |     width: 80px;
 29 |     height: 80px;
 30 |     display: flex;
 31 |     justify-content: center;
 32 |     align-items: center;
 33 |     cursor: pointer;
 34 |     transition: 0.5s;
 35 | }
 36 | 
 37 | ul li::before{
 38 |     content: '';
 39 |     position: absolute;
 40 |     inset: 30px;
 41 |     box-shadow: 0 0 0 10px var(--clr),
 42 |     0 0 0 20px var(--bg),
 43 |     0 0 0 22px var(--clr);
 44 |     transition: 0.5s;
 45 | }
 46 | 
 47 | ul li:hover::before{
 48 |     inset: 15px;
 49 | }
 50 | 
 51 | ul li::after{
 52 |     content: '';
 53 |     position: absolute;
 54 |     inset: 0;
 55 |     background: var(--bg);
 56 |     transform: rotate(45deg);
 57 |     transition: 0.5s;
 58 | }
 59 | 
 60 | ul li:hover::after{
 61 |     inset: 0px;
 62 |     transform: rotate(0deg);
 63 | }
 64 | 
 65 | ul li a{
 66 |     position: relative;
 67 |     text-decoration: none;
 68 |     z-index: 10;
 69 |     display: flex;
 70 |     justify-content: center;
 71 |     align-items: center;
 72 | }
 73 | 
 74 | ul li a i{
 75 |     font-size: 2em;
 76 |     transition: 0.5s;
 77 |     color: var(--clr);
 78 |     /* opacity: 0; */
 79 |     transition: 0.5s;
 80 | }
 81 | 
 82 | ul li:hover a i{
 83 |     color: var(--clr);
 84 |     transform: translateY(-40%);
 85 | }
 86 | 
 87 | ul li a span{
 88 |     position: absolute;
 89 |     font-family: 'consolas';
 90 |     color: var(--clr);
 91 |     opacity: 0;
 92 |     transition: 0.5s;
 93 |     transform: scale(0) translateY(200%);
 94 | }
 95 | 
 96 | ul li:hover a span{
 97 |     opacity: 1;
 98 |     transform: scale(1) translateY(100%);
 99 | }
100 | 
101 | ul li:hover a i,
102 | ul li:hover a span{
103 |     filter: drop-shadow(0 0 10px var(--clr)) 
104 |     drop-shadow(0 0 20px var(--clr)) 
105 |     drop-shadow(0 0 30px var(--clr));
106 | }
107 | 


--------------------------------------------------------------------------------
/Image Effect Hover on Name/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 |     <link rel="stylesheet" href="style.css">
 7 |     <title>Image Effect on Hover Name</title>
 8 | </head>
 9 | <body>
10 | 
11 | 
12 | <div id="app">  
13 |       <a href="#" class="image-hover" style="--i: 0">
14 |         <span class="title" data-title="MS Dhoni">MS Dhoni</span>
15 |         <img src="https://m.timesofindia.com/photo/104125264/104125264.jpg" alt="">
16 |       </a>
17 |       <a href="#" class="image-hover" style="--i: 1">
18 |         <span class="title" data-title="Virat Kohli">Virat Kohli</span>
19 |         <img src="https://i.pinimg.com/736x/78/96/9e/78969efd3ca5c81769d31337b140005d.jpg" alt="">
20 |       </a>
21 |       <a href="#" class="image-hover" style="--i: 2">
22 |         <span class="title" data-title="Rohit Sharma">Rohit Sharma</span>
23 |         <img src="https://w0.peakpx.com/wallpaper/915/468/HD-wallpaper-rohit-sharma-best-sunglasses-rohit-sharma-in-sunglasses-cricketer-hitman-thumbnail.jpg" alt="">
24 |       </a>
25 |       <a href="#" class="image-hover" style="--i: 3">
26 |         <span class="title" data-title="Ravindra Jadeja">Ravindra Jadeja</span>
27 |         <img src="https://wallpapers.com/images/hd/ravindra-jadeja-tattoo-n92b0vdfdmhkt6xu.jpg" alt="">
28 |       </a>
29 |       <a href="#" class="image-hover" style="--i: 4">
30 |         <span class="title" data-title="Shubnman Gill">Shubnman Gill</span>
31 |         <img src="https://st1.bollywoodlife.com/wp-content/uploads/2023/04/6-162.png" alt="">
32 |       </a>
33 |       <a href="#" class="image-hover" style="--i: 4">
34 |         <span class="title" data-title="KL Rahul">KL Rahul</span>
35 |         <img src="https://i.pinimg.com/736x/89/ae/39/89ae39414b2c940426e36cf009a99493.jpg" alt="">
36 |       </a> 
37 | </div>
38 |   
39 |   <script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
40 |   <script src="script.js"></script>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/Image Effect Hover on Name/script.js:
--------------------------------------------------------------------------------
 1 | console.clear();
 2 | const elApp = document.querySelector("#app");
 3 | 
 4 | document.body.addEventListener("mousemove", (event) => {
 5 |   console.log({
 6 |     x: event.clientX,
 7 |     y: event.clientY
 8 |   });
 9 | 
10 |   elApp.style.setProperty("--x", event.clientX);
11 |   elApp.style.setProperty("--y", event.clientY);
12 | });
13 | 
14 | let el = document.body;
15 | el.addEventListener("click", function (e) {
16 |   el.hidden = true;
17 |   requestAnimationFrame(() => {
18 |     el.hidden = false;
19 |   });
20 | });
21 | 


--------------------------------------------------------------------------------
/Image Effect Hover on Name/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");
  2 | 
  3 | *,
  4 | *::before,
  5 | *::after {
  6 |   box-sizing: border-box;
  7 |   position: relative;
  8 | }
  9 | 
 10 | html,
 11 | body,
 12 | #app {
 13 |   height: 100%;
 14 |   width: 100%;
 15 |   margin: 0;
 16 |   padding: 0;
 17 | }
 18 | 
 19 | .main-nav {
 20 |   display: flex;
 21 |   flex-direction: column;
 22 |   justify-content: center;
 23 |   height: 90vh;
 24 |   padding: 2vh 1vw;
 25 | }
 26 | 
 27 | html {
 28 |   background: #060706;
 29 |   color: #fff;
 30 |   overflow: hidden;
 31 |   --easing: cubic-bezier(0.5, 0.5, 0.2, 1);
 32 | }
 33 | 
 34 | .image-hover {
 35 |   display: block;
 36 |   color: white;
 37 |   text-decoration: none;
 38 |   text-align: center;
 39 |   padding: 2vh 0;
 40 |   transform-origin: top left;
 41 |   animation: skwoop 0.7s var(--easing) backwards;
 42 |   animation-duration: calc(0.6s + (var(--i) * 0.1s));
 43 |   animation-delay: calc((var(--i) * 50ms));
 44 |   cursor: pointer;
 45 | 
 46 |   @keyframes skwoop {
 47 |     from {
 48 |       opacity: 0;
 49 |       transform: translateY(5vh) skewY(5deg);
 50 |     }
 51 |   }
 52 | 
 53 |   .title {
 54 |     font-family: "Roboto";
 55 |     font-weight: 900;
 56 |     font-size: 9vh;
 57 |     letter-spacing: 0.1ch;
 58 | 
 59 |     &::after {
 60 |       content: attr(data-title);
 61 |       position: absolute;
 62 |       top: 0;
 63 |       left: 0;
 64 |       z-index: 5;
 65 |       color: transparent;
 66 |       -webkit-text-stroke: 2px #fff;
 67 |     }
 68 |   }
 69 | 
 70 |   > img {
 71 |     position: fixed;
 72 |     top: 50%;
 73 |     left: 50%;
 74 |     transform: translate(-50%, -50%);
 75 |     object-fit: cover;
 76 |     width: 300px;
 77 |     height: 500px;
 78 |     pointer-events: none;
 79 |     z-index: 2;
 80 |     visibility: hidden;
 81 |     opacity: 0;
 82 |     transition: opacity 0.2s linear, visibility 0s linear 0.2s;
 83 |   }
 84 | 
 85 |   &:hover,
 86 |   &:focus {
 87 |     z-index: 10;
 88 |     .title::after {
 89 |       display: block;
 90 |     }
 91 |     > img {
 92 |       transition-delay: 0s;
 93 |       visibility: visible;
 94 |       opacity: 1;
 95 |     }
 96 |   }
 97 | }
 98 | 
 99 | #app{
100 |   margin-top: 150px;
101 | }
102 | 
103 | #app span{
104 |   font-size: 50px;
105 | }
106 | .image-hover > img {
107 |   --x-px: calc(var(--x) * 1px);
108 |   --y-px: calc(var(--y) * 1px);
109 |   top: 0;
110 |   left: 0;
111 |   transform: translate(var(--x-px),
112 |   var(--y-px)) translate(-50%, -50%);
113 | }
114 | 
115 | 
116 | 


--------------------------------------------------------------------------------
/Images Carousel/app.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     border: 0;
 5 |     font-size: 100%;
 6 |     font: inherit;
 7 |     vertical-align: baseline;
 8 |   }
 9 |   /* HTML5 display-role reset for older browsers */
10 |   article,
11 |   aside,
12 |   details,
13 |   figcaption,
14 |   figure,
15 |   footer,
16 |   header,
17 |   hgroup,
18 |   menu,
19 |   nav,
20 |   section {
21 |     display: block;
22 |   }
23 |   body {
24 |     line-height: 1;
25 |   }
26 |   ol,
27 |   ul {
28 |     list-style: none;
29 |   }
30 |   blockquote,
31 |   q {
32 |     quotes: none;
33 |   }
34 |   blockquote:before,
35 |   blockquote:after,
36 |   q:before,
37 |   q:after {
38 |     content: "";
39 |     content: none;
40 |   }
41 |   table {
42 |     border-collapse: collapse;
43 |     border-spacing: 0;
44 |   }
45 | 


--------------------------------------------------------------------------------
/Images Carousel/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>Slick Slider</title>
 8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
 9 |     <link
10 |       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
11 |       rel="stylesheet"
12 |     />
13 |     <script
14 |       type="module"
15 |       src="https://unpkg.com/ionicons@5.5.2/dist/ion
16 |       icons/ionicons.esm.js"
17 |     ></script>
18 |     <script
19 |       nomodule
20 |       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
21 |     ></script>
22 |     <link rel="stylesheet" href="style.css" />
23 |     <link
24 |       rel="stylesheet"
25 |       type="text/css"
26 |       href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
27 |     />
28 |     <link rel="stylesheet" href="app.css" />
29 |   </head>
30 |   <body>
31 | 
32 | 
33 |     <div class="image-slider">
34 |       <div class="image-item">
35 |         <div class="image">
36 |           <img
37 |             src="https://wallpaperaccess.com/full/2159149.jpg"
38 |             alt=""
39 |           />
40 |         </div>
41 |         <h3 class="image-title">Game Of Thrones</h3>
42 |       </div>
43 |       <div class="image-item">
44 |         <div class="image">
45 |           <img
46 |             src="https://wallpaperaccess.com/full/642647.jpg"
47 |             alt=""
48 |           />
49 |         </div>
50 |         <h3 class="image-title">Stranger Things</h3>
51 |       </div>
52 | 
53 |       
54 |       <div class="image-item">
55 |         <div class="image">
56 |           <img
57 |             src="https://wallpaperaccess.com/full/1103727.jpg"
58 |             alt=""
59 |           />
60 |         </div>
61 |         <h3 class="image-title">Money heist</h3>
62 |       </div>
63 |       <div class="image-item">
64 |         <div class="image">
65 |           <img
66 |             src="https://c4.wallpaperflare.com/wallpaper/738/105/227/clay-jensen-katherine-langford-hannah-baker-13-reasons-why-wallpaper-preview.jpg"
67 |             alt=""
68 |           />
69 |         </div>
70 |         <h3 class="image-title">13 Reasons Why</h3>
71 |       </div>
72 |       <div class="image-item">
73 |         <div class="image">
74 |           <img
75 |             src="https://wallpaperaccess.com/full/4305965.jpg"
76 |             alt=""
77 |           />
78 |         </div>
79 |         <h3 class="image-title">The 100</h3>
80 |       </div>
81 |     </div>
82 |     <script
83 |       type="text/javascript"
84 |       src="https://code.jquery.com/jquery-1.11.0.min.js"
85 |     ></script>
86 |     <script
87 |       type="text/javascript"
88 |       src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"
89 |     ></script>
90 |     <script
91 |       type="text/javascript"
92 |       src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
93 |     ></script>
94 |     <script src="script.js"></script>
95 |   </body>
96 | </html>
97 | 


--------------------------------------------------------------------------------
/Images Carousel/script.js:
--------------------------------------------------------------------------------
 1 |   
 2 |   
 3 |    $(document).ready(function () {
 4 |         $(".image-slider").slick({
 5 |           slidesToShow: 4,
 6 |           slidesToScroll: 1,
 7 |           infinite: true,
 8 |           arrows: true,
 9 |           draggable: false,
10 |           prevArrow: `<button type='button' class='slick-prev slick-arrow'><ion-icon name="arrow-back-outline"></ion-icon></button>`,
11 |           nextArrow: `<button type='button' class='slick-next slick-arrow'><ion-icon name="arrow-forward-outline"></ion-icon></button>`,
12 |           dots: true,
13 |           responsive: [
14 |             {
15 |               breakpoint: 1025,
16 |               settings: {
17 |                 slidesToShow: 3,
18 |               },
19 |             },
20 |             {
21 |               breakpoint: 480,
22 |               settings: {
23 |                 slidesToShow: 1,
24 |                 arrows: false,
25 |                 infinite: false,
26 |               },
27 |             },
28 |           ],
29 |           // autoplay: true,
30 |           // autoplaySpeed: 1000,
31 |         });
32 |       });
33 | 


--------------------------------------------------------------------------------
/Images Carousel/style.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *:before,
  3 | *:after {
  4 |   box-sizing: border-box;
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | a {
  9 |   text-decoration: none;
 10 | }
 11 | img {
 12 |   display: block;
 13 |   max-width: 100%;
 14 | }
 15 | body,
 16 | input,
 17 | button,
 18 | textarea,
 19 | select {
 20 |   outline: none;
 21 |   font-size: 12px;
 22 |   line-height: 1.5;
 23 |   font-family: "Poppins", sans-serif;
 24 | }
 25 | input {
 26 |   line-height: normal;
 27 | }
 28 | button {
 29 |   cursor: pointer;
 30 | }
 31 | body {
 32 |   padding: 50px 20px;
 33 | }
 34 | .image-slider {
 35 |   padding-bottom: 50px;
 36 | }
 37 | .image {
 38 |   height: 500px;
 39 |   margin-bottom: 20px;
 40 | }
 41 | .image img {
 42 |   width: 100%;
 43 |   height: 100%;
 44 |   object-fit: cover;
 45 |   border-radius: 12px;
 46 | }
 47 | .image-title {
 48 |   font-size: 20px;
 49 |   color: #8e8fb5;
 50 | }
 51 | .slick-initialized .slick-slide {
 52 |   margin: 0 10px;
 53 | }
 54 | .slick-arrow {
 55 |   position: absolute;
 56 |   top: 50%;
 57 |   transform: translateY(-50%);
 58 |   border: none;
 59 |   width: 50px;
 60 |   height: 50px;
 61 |   display: flex;
 62 |   justify-content: center;
 63 |   align-items: center;
 64 |   font-size: 20px;
 65 |   line-height: 1;
 66 |   z-index: 5;
 67 |   transition: all 0.2s linear;
 68 | }
 69 | .slick-arrow:hover {
 70 |   background-color: #2cccff;
 71 |   color: white;
 72 | }
 73 | .slick-prev {
 74 |   left: 0;
 75 | }
 76 | .slick-next {
 77 |   right: 0;
 78 | }
 79 | 
 80 | 
 81 |     .slick-dots {
 82 |     position: absolute;
 83 |     bottom: 0;
 84 |     left: 50%;
 85 |     transform: translate(-50%, 0);
 86 |     display: flex !important;
 87 |     align-items: center;
 88 |     justify-content: center;
 89 |     gap: 0 20px;
 90 |     }
 91 |     .slick-dots button {
 92 |     font-size: 0;
 93 |     width: 15px;
 94 |     height: 15px;
 95 |     border-radius: 100rem;
 96 |     background-color: #eee;
 97 |     border: none;
 98 |     outline: none;
 99 |     transition: all 0.2s linear;
100 |     }
101 | 
102 | 
103 | 
104 | .slick-dots .slick-active button {
105 |   background-color: #2cccff;
106 | }
107 | 


--------------------------------------------------------------------------------
/Images slider/script.js:
--------------------------------------------------------------------------------
 1 | //step 1: get DOM
 2 | let nextDom = document.getElementById('next');
 3 | let prevDom = document.getElementById('prev');
 4 | 
 5 | let carouselDom = document.querySelector('.carousel');
 6 | let SliderDom = carouselDom.querySelector('.carousel .list');
 7 | let thumbnailBorderDom = document.querySelector('.carousel .thumbnail');
 8 | let thumbnailItemsDom = thumbnailBorderDom.querySelectorAll('.item');
 9 | let timeDom = document.querySelector('.carousel .time');
10 | 
11 | thumbnailBorderDom.appendChild(thumbnailItemsDom[0]);
12 | let timeRunning = 2000;
13 | let timeAutoNext = 7000;
14 | 
15 | nextDom.onclick = function(){
16 |     showSlider('next');    
17 | }
18 | 
19 | prevDom.onclick = function(){
20 |     showSlider('prev');    
21 | }
22 | let runTimeOut;
23 | let runNextAuto = setTimeout(() => {
24 |     next.click();
25 | }, timeAutoNext)
26 | function showSlider(type){
27 |     let  SliderItemsDom = SliderDom.querySelectorAll('.carousel .list .item');
28 |     let thumbnailItemsDom = document.querySelectorAll('.carousel .thumbnail .item');
29 |     
30 |     if(type === 'next'){
31 |         SliderDom.appendChild(SliderItemsDom[0]);
32 |         thumbnailBorderDom.appendChild(thumbnailItemsDom[0]);
33 |         carouselDom.classList.add('next');
34 |     }else{
35 |         SliderDom.prepend(SliderItemsDom[SliderItemsDom.length - 1]);
36 |         thumbnailBorderDom.prepend(thumbnailItemsDom[thumbnailItemsDom.length - 1]);
37 |         carouselDom.classList.add('prev');
38 |     }
39 |     clearTimeout(runTimeOut);
40 |     runTimeOut = setTimeout(() => {
41 |         carouselDom.classList.remove('next');
42 |         carouselDom.classList.remove('prev');
43 |     }, timeRunning);
44 | 
45 |     clearTimeout(runNextAuto);
46 |     runNextAuto = setTimeout(() => {
47 |         next.click();
48 |     }, timeAutoNext)
49 | }
50 | 


--------------------------------------------------------------------------------
/Input Form Designs/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 |     <link rel="stylesheet" href="style.css">
 7 |     <title>Form input Design</title>
 8 | </head>
 9 | <body>
10 | 
11 | 
12 | 
13 |     <div class="container">
14 |         <div class="box">
15 |             <input type="text" autocomplete="off" required="required">
16 |             <span>First Name</span>
17 |         </div>
18 |         <div class="box">
19 |             <input type="text" autocomplete="off" required="required">
20 |             <span>Last Name</span>
21 |         </div>
22 |         <div class="box">
23 |             <input type="text" autocomplete="off" required="required">
24 |             <span>Email Id</span>
25 |         </div>
26 |         <div class="box">
27 |             <input type="text" autocomplete="off" required="required">
28 |             <span>Pincode</span>
29 |         </div>
30 |         <div class="box">
31 |             <input type="text" autocomplete="off" required="required">
32 |             <span>Address</span>
33 |         </div>
34 |     </div>
35 | 
36 |     
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Input Form Designs/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 2 | 
 3 | *{
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | 
11 | 
12 |         .container{
13 |             display: flex;
14 |             justify-content: center;
15 |             align-items: center;
16 |             min-height: 100vh;
17 |             flex-direction: column;
18 |             gap: 30px;
19 |             background-color: #25252b;
20 |         }
21 | 
22 |         .box{
23 |             position: relative;
24 |             width: 250px;
25 |         }
26 | 
27 |         .box input{
28 |             width: 100%;
29 |             padding: 10px;
30 |             border: 1px solid #ffffff40;
31 |             background-color: #25252b;
32 |             border-radius: 5px;
33 |             outline: none;
34 |             color: #fff;
35 |             font-size: 1em;
36 |         }
37 | 
38 |         .box span{
39 |             position: absolute;
40 |             left: 0;
41 |             padding: 10px;
42 |             pointer-events: none;
43 |             font-size: 1em;
44 |             color: rgba(255, 255, 255, 0.25);
45 |             text-transform: uppercase;
46 |             font-weight: 500;
47 |             letter-spacing: 0.2em;
48 |             transition: 0.5s;
49 |         }
50 | 
51 |         .box input:valid ~ span,
52 |         .box input:focus ~ span{
53 |             color: green;
54 |             transform: translateX(10px) translateY(-7px);
55 |             font-size: 0.65em;
56 |             padding: 0 10px;
57 |             background-color: #25252b;
58 |             border-left: 1px solid green;
59 |             border-right: 1px solid green;
60 |         }
61 | 
62 |         .box:nth-child(2) input:valid ~ span,
63 |         .box:nth-child(2) input:focus ~ span{
64 |             color: #25252b;
65 |             background-color: green;
66 |             border-radius: 5px;
67 |         }
68 | 
69 |         .box:nth-child(3) input:valid ~ span,
70 |         .box:nth-child(3) input:focus ~ span{
71 |             border: 1px solid green;
72 |             border-radius: 5px;
73 |         }
74 | 
75 |         .box:nth-child(4) input:valid ~ span,
76 |         .box:nth-child(4) input:focus ~ span{
77 |             border-top: 1px solid green;
78 |             border-bottom: 1px solid green;
79 |             border-left: none;
80 |             border-right: none;
81 |         }
82 | 
83 |         .box:nth-child(5) input:valid ~ span,
84 |         .box:nth-child(5) input:focus ~ span{
85 |             border: 1px solid green;
86 |             width: 80%;
87 |             text-align: center;
88 |         }
89 | 
90 |         .box input:valid,
91 |         .box input:focus{
92 |             border: 1px solid green;
93 |         }
94 | 


--------------------------------------------------------------------------------
/Leaping Triangle 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>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 Triangle Animation/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 |   }
55 | 


--------------------------------------------------------------------------------
/Lighting Text 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 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Lighting Text Animation</title>
 9 | </head>
10 | <body>
11 |     <h1>
12 |         <span>C</span>
13 |         <span>O</span>
14 |         <span>D</span>
15 |         <span>E</span>
16 |         <span> </span>
17 |         <span>R</span>
18 |         <span>U</span>
19 |         <span>T</span>
20 |         <span>U</span>
21 |         <span>_09</span>
22 |         <span> </span>
23 |         <span>W</span>
24 |         <span>I</span>
25 |         <span>T</span>
26 |         <span>H</span>
27 |     </h1>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Lighting Text Animation/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
 2 | 
 3 | *{
 4 |     margin:0;
 5 |     padding: 0%;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Bebas Neue', sans-serif;
 8 | }
 9 | 
10 | body{
11 |     display: flex;
12 |     justify-content: center;
13 |     align-items: center;
14 |     height: 100vh;
15 |     background: #000;
16 | }
17 | 
18 | h1{
19 |     margin: 0%;
20 |     padding: 0%;
21 |     color: #111;
22 |     font-size: 14em;
23 | }
24 | 
25 | h1 span{
26 |     font-size: 80px;
27 |     display: table-cell;
28 |     margin: 10px;
29 |     padding: 1.5rem;
30 |     animation: animate 2s ease infinite;
31 | }
32 | 
33 | h1 span:nth-child(6)
34 | {
35 |     animation-delay: 0.4s;
36 | }
37 | h1 span:nth-child(7)
38 | {
39 |     animation-delay: 0.4s;
40 | }
41 | h1 span:nth-child(8)
42 | {
43 |     animation-delay: 0.4s;
44 | }
45 | h1 span:nth-child(9)
46 | {
47 |     animation-delay: 0.4s;
48 | }
49 | h1 span:nth-child(10)
50 | {
51 |     animation-delay: 0.4s;
52 | }
53 | 
54 | 
55 | @keyframes animate{
56 | 
57 |     0%,100%{
58 |         color: #fff;
59 |         filter: blur(2px);
60 |         text-shadow: 0 0 10px #fff,
61 |         0 0 20px #fff,
62 |         0 0 40px #fff;
63 |     }
64 | 
65 |     5%,95%{
66 |         color: #111;
67 |         filter: blur(0px);
68 |         text-shadow: none;
69 |     }
70 | }
71 | 


--------------------------------------------------------------------------------
/Linear Gredient Rotating Card Design/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 |     <link rel="stylesheet" href="style.css">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <div class="card">    
12 |         </div>
13 |         <div class="image">
14 |             <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:
15 |             ANd9GcTlzzoIxc6Ax0lsh_qZLU4LhaqXtClCqj7Mww&usqp=CAU" alt="">
16 |         </div>
17 |         <h1>Pikachu</h1>
18 |     </div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Linear Gredient Rotating Card Design/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | .container{
 8 |     position: relative;
 9 |     width: 100%;
10 |     height: 100vh;
11 |     display: flex;
12 |     justify-content: center;
13 |     align-items: center;
14 |     background: #3b3b3c;
15 | }
16 | 
17 | .card{
18 |     position: absolute;
19 |     display: flex;
20 |     justify-content: center;
21 |     align-items: center;
22 |     width: 250px;
23 |     height: 250px;
24 |     background: linear-gradient(90deg, rgba(255,0,0,1) 0%,
25 |      rgba(232,255,0,1) 25%, rgba(0,255,25,1) 50%,
26 |      rgba(0,65,255,1) 75%, rgba(248,0,255,1) 100%);
27 |     border-radius: 50%;
28 |     animation: rotate 5s linear infinite;
29 | }
30 | 
31 | @keyframes rotate{
32 |     0%{
33 |         transform: rotate(0deg);
34 |     }
35 |     100%{
36 |         transform: rotate(360deg);
37 |     }
38 | }
39 | 
40 | .image{
41 |     position: absolute;
42 |     display: flex;
43 |     justify-content: center;
44 |     align-items: center;
45 |     width: 235px;
46 |     height: 235px;
47 |     background-color: #25252b;
48 |     border-radius: 50%;
49 |     overflow: hidden;
50 |     padding: 1rem;
51 |     animation: none;
52 |     border: 2px solid white;
53 | }
54 | 
55 | .image img{
56 |     width: 120%;
57 |     height: 120%;
58 |     object-fit: cover;
59 |     overflow: hidden;
60 |     filter: grayscale(0.5);
61 | }
62 | 
63 | h1{
64 |     position: absolute;
65 |     top: 69%;
66 |     text-transform: uppercase;
67 |     font-family: Arial, Helvetica, sans-serif;
68 |     color: #f5f5f5;
69 |     letter-spacing: 0.05em;
70 | }
71 | 


--------------------------------------------------------------------------------
/Loading Bar Animations/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | <!DOCTYPE html>
 6 | <html lang="en">
 7 | <head>
 8 |     <meta charset="UTF-8">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 |     <title>Loading animation by codewithrutu_09</title>
11 |     <link rel="stylesheet" href="style.css">
12 | </head>
13 | 
14 | <body>
15 |     <div class="lds-roller">
16 |         <div></div>
17 |         <div></div>
18 |         <div></div>
19 |         <div></div>
20 |         <div></div>
21 |         <div></div>
22 |         <div></div>
23 |         <div></div>
24 |     </div>
25 |     <div class="lds-ring">
26 |         <div></div>
27 |         <div></div>
28 |         <div></div>
29 |         <div></div>
30 |     </div>
31 |     <div class="lds-heart">
32 |         <div></div>
33 |     </div>
34 |     <div class="lds-hourglass"></div>
35 |     <div class="lds-ellipsis">
36 |         <div></div>
37 |         <div></div>
38 |         <div></div>
39 |         <div></div>
40 |     </div>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Loginform/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - login &amp; signup form</title>
 6 |   <link rel="stylesheet" href="style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <div class="wrapper">
12 |   <div class="title-text">
13 |     <div class="title login">Login Form</div>
14 |     <div class="title signup">Signup Form</div>
15 |   </div>
16 |   <div class="form-container">
17 |     <div class="slide-controls">
18 |       <input type="radio" name="slide" id="login" checked>
19 |       <input type="radio" name="slide" id="signup">
20 |       <label for="login" class="slide login">Login</label>
21 |       <label for="signup" class="slide signup">Signup</label>
22 |       <div class="slider-tab"></div>
23 |     </div>
24 |     <div class="form-inner">
25 |       <form action="#" class="login">
26 |         <div class="field">
27 |           <input type="text" placeholder="Email Address" required>
28 |         </div>
29 |         <div class="field">
30 |           <input type="password" placeholder="Password" required>
31 |         </div>
32 |         <div class="pass-link"><a href="#">Forgot password?</a></div>
33 |         <div class="field btn">
34 |           <div class="btn-layer"></div>
35 |           <input type="submit" value="Login">
36 |         </div>
37 |         <div class="signup-link">Not a member? <a href="#">Signup now</a></div>
38 |       </form>
39 |       <form action="#" class="signup">
40 |         <div class="field">
41 |           <input type="text" placeholder="Email Address" required>
42 |         </div>
43 |         <div class="field">
44 |           <input type="password" placeholder="Password" required>
45 |         </div>
46 |         <div class="field">
47 |           <input type="password" placeholder="Confirm password" required>
48 |         </div>
49 |         <div class="field btn">
50 |           <div class="btn-layer"></div>
51 |           <input type="submit" value="Signup">
52 |         </div>
53 |       </form>
54 |     </div>
55 |   </div>
56 | </div>
57 | <!-- partial -->
58 |   <script  src="./script.js"></script>
59 | 
60 | </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/Loginform/script.js:
--------------------------------------------------------------------------------
 1 | const loginText = document.querySelector(".title-text .login");
 2 | const loginForm = document.querySelector("form.login");
 3 | const loginBtn = document.querySelector("label.login");
 4 | const signupBtn = document.querySelector("label.signup");
 5 | const signupLink = document.querySelector("form .signup-link a");
 6 | signupBtn.onclick = () => {
 7 |   loginForm.style.marginLeft = "-50%";
 8 |   loginText.style.marginLeft = "-50%";
 9 | };
10 | loginBtn.onclick = () => {
11 |   loginForm.style.marginLeft = "0%";
12 |   loginText.style.marginLeft = "0%";
13 | };
14 | signupLink.onclick = () => {
15 |   signupBtn.click();
16 |   return false;
17 | };
18 | 


--------------------------------------------------------------------------------
/Magical Navigation Bar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Magic Navigation Menu</title>
 6 |   <link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | <div class='navigation'>
12 | 	<ul>
13 | 		<li class="list active" style="--clr:#f44336"><a href="#"><span class="icon">
14 | 					<ion-icon name="home-outline"></ion-icon>
15 | 				</span></a></li>
16 | 		<li class="list" style="--clr:#ffa117"><a href="#"><span class="icon">
17 | 					<ion-icon name="person-outline"></ion-icon>
18 | 				</span></a></li>
19 | 		<li class="list" style="--clr:#0fc70f"><a href="#"><span class="icon">
20 | 					<ion-icon name="chatbubble-outline"></ion-icon>
21 | 				</span></a></li>
22 | 		<li class="list" style="--clr:#2196f3"><a href="#"><span class="icon">
23 | 					<ion-icon name="camera-outline"></ion-icon>
24 | 				</span></a></li>
25 | 		<li class="list" style="--clr:#b145e9"><a href="#"><span class="icon">
26 | 					<ion-icon name="settings-outline"></ion-icon>
27 | 				</span></a></li>
28 | 		<div class="indicator"></div>
29 | 	</ul>
30 | </div>
31 | 
32 | <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
33 | <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
34 | <!-- partial -->
35 |   <script  src="./script.js"></script>
36 | 
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Magical Navigation Bar/script.js:
--------------------------------------------------------------------------------
1 | console.clear();
2 | const list = document.querySelectorAll('.list');
3 | const nav = document.querySelector('.navigation');
4 | list.forEach(item => item.addEventListener('click', function(e){
5 | 	list.forEach(li => li.classList.remove('active'));
6 | 	e.currentTarget.classList.add('active');
7 | }));  
8 | 
9 | 


--------------------------------------------------------------------------------
/Magical Navigation Bar/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	margin: 0;
  3 | 	padding: 0;
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 | 	display: flex;
  9 | 	justify-content: center;
 10 | 	align-items: center;
 11 | 	min-height: 100vh;
 12 | 	background: #282A36;
 13 | }
 14 | 
 15 | .navigation {
 16 | 	position: relative;
 17 | 	width: 400px;
 18 | 	height: 60px;
 19 | 	background: white;
 20 | 	display: flex;
 21 | 	justify-content: center;
 22 | 	align-items: center;
 23 | 	border-radius: 10px;
 24 | }
 25 | 
 26 | .navigation ul {
 27 | 	width: 350px;
 28 | 	display: flex;
 29 | }
 30 | 
 31 | 
 32 | .navigation ul li {
 33 | 	list-style: none;
 34 | 	position: relative;
 35 | 	width: 70px; /* ul: width 350 / 5 = 70 */
 36 | 	height: 60px;
 37 | 	z-index: 2;
 38 | }
 39 | 
 40 | .navigation ul li a {
 41 | 	text-decoration: none;
 42 | 	color:#555;	
 43 | 	position: relative;
 44 | 	display: flex;
 45 | 	justify-content: center;
 46 | 	align-items: center;
 47 | 	width: 100%;
 48 | 	height: 100%;
 49 | }
 50 | 
 51 | .navigation ul li a .icon {
 52 | 	position:relative;
 53 | 	background: #fff;
 54 | 	display:block;
 55 | 	width: 55px;
 56 | 	height: 55px;
 57 | 	text-align: center;
 58 | 	line-height: 65px;
 59 | 	border-radius: 65px;
 60 | 	color: #222327;
 61 | 	font-size: 1.5em;
 62 | 	transition: 0.5s;
 63 | 	transition-delay: 0s;
 64 | }
 65 | 
 66 | .navigation ul li.active a .icon {
 67 | 	background: var(--clr);
 68 | 	color: #fff;
 69 | 	transform: translatey(-27px);
 70 | 	transition-delay: 0.25s;
 71 | }
 72 | 
 73 | .navigation ul li a .icon:before {
 74 | 	content: '';
 75 | 	position: absolute;
 76 | 	top: 10px;
 77 | 	left: 0;
 78 | 	width: 100%;
 79 | 	height: 100%;
 80 | 	background: var(--clr);
 81 | 	border-radius: 50%;
 82 | 	filter: blur(5px);
 83 | 	opacity:0;
 84 | 	transition: .5s;
 85 | 	transition-delay: 0.15s;
 86 | }
 87 | 
 88 | .navigation ul li.active a .icon:before {
 89 | 	opacity: 0.5;
 90 | 	transition-delay: 0.25s;
 91 | }
 92 | 
 93 | .indicator {
 94 | 	position: absolute;
 95 | 	top: -35px;
 96 | 	width: 70px;
 97 | 	height: 70px;
 98 | 	background: #fff;
 99 | 	border-radius: 50%;
100 | 	z-index: 1;
101 | 	transition: 0.5s;
102 | }
103 | 
104 | .indicator::before {
105 | 	content: '';
106 | 	position: absolute;
107 | 	top: 5px;
108 | 	left: -27.5px;
109 | 	width: 30px;
110 | 	height: 30px;
111 | 	border-radius: 50%;
112 | 	box-shadow: 15px 18px #fff
113 | }
114 | 
115 | .indicator::after {
116 | 	content: '';
117 | 	position: absolute;
118 | 	top: 5px;
119 | 	right: -27.5px;
120 | 	width: 30px;
121 | 	height: 30px;
122 | 	border-radius: 50%;
123 | 	box-shadow: -15px 18px #fff
124 | }
125 | 
126 | .navigation ul li:nth-child(1).active ~ .indicator {
127 | 	transform: translatex(calc(70px * 0));
128 | }
129 | 
130 | .navigation ul li:nth-child(2).active ~ .indicator {
131 | 	transform: translatex(calc(70px * 1));
132 | }
133 | 
134 | .navigation ul li:nth-child(3).active ~ .indicator {
135 | 	transform: translatex(calc(70px * 2));
136 | }
137 | 
138 | .navigation ul li:nth-child(4).active ~ .indicator {
139 | 	transform: translatex(calc(70px * 3));
140 | }
141 | 
142 | .navigation ul li:nth-child(5).active ~ .indicator {
143 | 	transform: translatex(calc(70px * 4));
144 | }
145 | 


--------------------------------------------------------------------------------
/Menu Bar Animation/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>Menu bar animation</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <ul id="menu">
12 |         <a
13 |           class="menu-button icon-plus"
14 |           id="open-menu"
15 |           href="#menu"
16 |           title="Show navigation"
17 |         ></a>
18 |         <a class="menu-button icon-minus" href="#0" title="Hide navigation"></a>
19 |         <li class="menu-item">
20 |           <a href="#menu">
21 |             <span class="fa fa-github"></span>
22 |           </a>
23 |         </li>
24 |         <li class="menu-item">
25 |           <a href="#menu">
26 |             <span class="fa fa-linkedin"></span>
27 |           </a>
28 |         </li>
29 |         <li class="menu-item">
30 |           <a href="#menu">
31 |             <span class="fa fa-instagram"></span>
32 |           </a>
33 |         </li>
34 |         <li class="menu-item">
35 |           <a href="#menu">
36 |             <span class="fa fa-twitter"></span>
37 |           </a>
38 |         </li>
39 |         <li class="menu-item">
40 |           <a href="#menu">
41 |             <span class="fa fa-twitter"></span>
42 |           </a>
43 |         </li>
44 |       </ul>
45 | 
46 |       <div class="content">
47 |         <div class="text">
48 |           <h5>Click On Picture!</h5>
49 |         </div>
50 |       </div>
51 |     </div>
52 |     <script>
53 |       window.onload = function () {
54 |         var menuButton = document.getElementById("open-menu");
55 |         menuButton.click();
56 |       };
57 |     </script>
58 |     <script
59 |       src="https://kit.fontawesome.com/28069d2172.js"
60 |       crossorigin="anonymous"
61 |     ></script>
62 |   </body>
63 | </html>
64 | 
65 | 


--------------------------------------------------------------------------------
/Menu Bar Animation/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: "Dosis", sans-serif;
  3 |     text-align: center;
  4 |     background-color: rgb(1, 27, 122);
  5 |     color: white;
  6 |   }
  7 |   
  8 |   #menu {
  9 |     width: 150px;
 10 |     height: 150px;
 11 |     position: absolute;
 12 |     left: 50%;
 13 |     top: 50%;
 14 |     margin: -75px 0 0 -75px;
 15 |     list-style: none;
 16 |     font-size: 200%;
 17 |   }
 18 |   
 19 |   .menu-button {
 20 |     opacity: 0;
 21 |     z-index: -1;
 22 |   }
 23 |   
 24 |   .menu-button {
 25 |     width: 150px;
 26 |     height: 150px;
 27 |     position: absolute;
 28 |     left: 50%;
 29 |     top: 50%;
 30 |     margin: -75px 0 0 -75px;
 31 |     border-radius: 50%;
 32 |     background: url(Untold\ Coding.png);
 33 |     background-size: 100%;
 34 |     overflow: hidden;
 35 |     text-decoration: none;
 36 |     background-repeat: no-repeat;
 37 |     box-shadow: 0 0 15px rgb(246, 159, 159);
 38 |   }
 39 |   
 40 |   #menu:not(:target) > a:first-of-type,
 41 |   #menu:target > a:last-of-type {
 42 |     opacity: 1;
 43 |     z-index: 1;
 44 |   }
 45 |   
 46 |   #menu:not(:target) > .icon-plus:before,
 47 |   #menu:target > .icon-minus:before {
 48 |     opacity: 1;
 49 |   }
 50 |   
 51 |   .menu-item {
 52 |     width: 70px;
 53 |     height: 70px;
 54 |     position: absolute;
 55 |     left: 55%;
 56 |     line-height: 5px;
 57 |     top: 50%;
 58 |     margin: -50px 0 0 -50px;
 59 |     border-radius: 50%;
 60 |     background-color: rgba(160, 21, 21, 0.588);
 61 |     transform: translate(0px, 0px);
 62 |     transition: transform 500ms;
 63 |     z-index: -2;
 64 |   }
 65 |   
 66 |   .menu-item:hover {
 67 |     background-color: #c71414;
 68 |     color: #c71414;
 69 |     box-shadow: 0 0 10px rgb(255, 255, 255);
 70 |   }
 71 |   
 72 |   .menu-item a {
 73 |     color: #ffffff;
 74 |     position: relative;
 75 |     top: 30%;
 76 |     left: 0;
 77 |     text-decoration: none;
 78 |   }
 79 |   
 80 |   #menu:target > .menu-item:nth-child(6) {
 81 |     transform: rotate(60deg) translateY(-150px) rotate(300deg);
 82 |     transition-delay: 0s;
 83 |   }
 84 |   
 85 |   #menu:target > .menu-item:nth-child(5) {
 86 |     transform: rotate(20deg) translateY(-155px) rotate(-20deg);
 87 |     transition-delay: 0.1s;
 88 |   }
 89 |   
 90 |   #menu:target > .menu-item:nth-child(3) {
 91 |     transform: rotate(-20deg) translateY(-155px) rotate(20deg);
 92 |     transition-delay: 0.2s;
 93 |   }
 94 |   
 95 |   #menu:target > .menu-item:nth-child(4) {
 96 |     transform: rotate(-60deg) translateY(-150px) rotate(60deg);
 97 |     transition-delay: 0.3s;
 98 |   }
 99 |   
100 |   .content {
101 |     position: absolute;
102 |     text-align: center;
103 |     margin: -10px 0 0 -30px;
104 |     top: 65%;
105 |     left: 50%;
106 |     font-size: 15px;
107 |   }
108 |   
109 | 


--------------------------------------------------------------------------------
/Modern Navbar Design/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 |     <link rel="stylesheet" href="style.css">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |         <ul>
11 |             <li><a href="#" data-text="Home"><img src="images/1.png">Home</a></li>
12 |             <li><a href="#" data-text="About"><img src="2.png">About</a></li>
13 |             <li><a href="#" data-text="Services"><img src="images/3.png">Services</a></li>
14 |             <li><a href="#" data-text="portfolio"><img src="4.png">portfolio</a></li>
15 |             <li><a href="#" data-text="Team"><img src="images/5.png">Team</a></li>
16 |             <li><a href="#" data-text="Contact"><img src="images/6.png">Contact</a></li>
17 |             <div class="cursor"></div>
18 |         </ul>
19 | 
20 |     <script>
21 |         let nav = document.documentElement;
22 |         nav.addEventListener("mousemove", e => {
23 |             nav.style.setProperty('--x', e.clientX + "px ");     
24 |             nav.style.setProperty('--y', e.clientY + "px ");     
25 |         })
26 |     </script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Modern Navbar Design/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 2 | 
 3 | *{
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | body{ 
11 |     display: flex;
12 |     justify-content: center;
13 |     align-items: center;
14 |     min-height: 100vh;
15 |     background: #142329;
16 |     overflow: hidden;
17 |     cursor: none;
18 | }
19 | 
20 | ul li{
21 |     /* position: relative; */
22 |     list-style: none;
23 | }
24 | 
25 | ul li a{
26 |     color: #fff;
27 |     text-decoration: none;
28 |     font-size: 3em;
29 |     font-weight: 800;
30 |     text-transform: uppercase;
31 |     transition: 0.5s;
32 | }
33 | 
34 | ul:hover li a{
35 |     opacity: 0.1;
36 | }
37 | 
38 | ul li a:hover{
39 |     opacity: 1;
40 |     /* color: transparent; */
41 | }
42 | 
43 | ul li a img{
44 |     position: absolute;
45 |     top: var(--y);
46 |     left: var(--x);
47 |     transform: translate(-50%, -50%) scale(0);
48 |     opacity: 0;
49 |     transition: 0.2s;
50 |     pointer-events: none;
51 |     z-index: -2;
52 |     filter: grayscale(1);
53 |     border-radius: 25px;
54 | }
55 | 
56 | ul li a:hover img{
57 |     transform: translate(-50%, -50%) scale(1);
58 |     opacity: 1;
59 | }
60 | 
61 | ul li a::before{
62 |     content: attr(data-text);
63 |     position: absolute;
64 |     top: var(--y);
65 |     left: var(--x);
66 |     transform: translate(-50%, -50%);
67 |     pointer-events: none;
68 |     opacity: 0;
69 |     transition: 0.25s;
70 |     font-size: 17vw;
71 |     z-index: -1;
72 |     color: transparent;
73 |     -webkit-text-stroke: 2px #fff;
74 | }
75 | 
76 | ul li a:hover::before{
77 |     opacity: 1;
78 | }
79 | 
80 | .cursor{
81 |     position: absolute;
82 |     top: var(--y);
83 |     left: var(--x);
84 |     transform: translate(-50%, -50%);
85 |     width: 30px;
86 |     height: 30px;
87 |     border-radius: 50%;
88 |     background: transparent;
89 |     border: 4px solid #2efc72;
90 |     pointer-events: none;
91 |     transition: width 0.25s height 0.25s;
92 | }
93 | 
94 | ul li:hover ~ .cursor{
95 |     width: 80vw;
96 |     height: 80vw;
97 |     border: 2px solid #2efc72;
98 | }
99 | 


--------------------------------------------------------------------------------
/Modern-Login-Page/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 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 |     <title>Modern Login Page</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container" id="container">
15 |         <div class="form-container sign-up">
16 |             <form>
17 |                 <h1>Create Account</h1>
18 |                 <div class="social-icons">
19 |                     <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
20 |                     <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
21 |                     <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
22 |                     <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
23 |                 </div>
24 |                 <span>or use your email for registeration</span>
25 |                 <input type="text" placeholder="Name">
26 |                 <input type="email" placeholder="Email">
27 |                 <input type="password" placeholder="Password">
28 |                 <button>Sign Up</button>
29 |             </form>
30 |         </div>
31 |         <div class="form-container sign-in">
32 |             <form>
33 |                 <h1>Sign In</h1>
34 |                 <div class="social-icons">
35 |                     <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
36 |                     <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
37 |                     <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
38 |                     <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
39 |                 </div>
40 |                 <span>or use your email password</span>
41 |                 <input type="email" placeholder="Email">
42 |                 <input type="password" placeholder="Password">
43 |                 <a href="#">Forget Your Password?</a>
44 |                 <button>Sign In</button>
45 |             </form>
46 |         </div>
47 |         <div class="toggle-container">
48 |             <div class="toggle">
49 |                 <div class="toggle-panel toggle-left">
50 |                     <h1>Welcome Back !</h1>
51 |                     <p>Enter your personal details to use all of site features</p>
52 |                     <button class="hidden" id="login">Sign In</button>
53 |                 </div>
54 |                 <div class="toggle-panel toggle-right">
55 |                     <h1>Welcome, Friend!</h1>
56 |                     <p>Enter your personal details to use all of site features</p>
57 |                     <button class="hidden" id="register">Sign Up</button>
58 |                 </div>
59 |             </div>
60 |         </div>
61 |     </div>
62 | 
63 |     <script src="script.js"></script>
64 | </body>
65 | 
66 | </html>
67 | 


--------------------------------------------------------------------------------
/Modern-Login-Page/script.js:
--------------------------------------------------------------------------------
 1 | const container = document.getElementById('container');
 2 | const registerBtn = document.getElementById('register');
 3 | const loginBtn = document.getElementById('login');
 4 | 
 5 | registerBtn.addEventListener('click', () => {
 6 |     container.classList.add("active");
 7 | });
 8 | 
 9 | loginBtn.addEventListener('click', () => {
10 |     container.classList.remove("active");
11 | });
12 | 


--------------------------------------------------------------------------------
/Modern-Login-Page/style.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 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 |     <title>Modern Login Page</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container" id="container">
15 |         <div class="form-container sign-up">
16 |             <form>
17 |                 <h1>Create Account</h1>
18 |                 <div class="social-icons">
19 |                     <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
20 |                     <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
21 |                     <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
22 |                     <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
23 |                 </div>
24 |                 <span>or use your email for registeration</span>
25 |                 <input type="text" placeholder="Name">
26 |                 <input type="email" placeholder="Email">
27 |                 <input type="password" placeholder="Password">
28 |                 <button>Sign Up</button>
29 |             </form>
30 |         </div>
31 |         <div class="form-container sign-in">
32 |             <form>
33 |                 <h1>Sign In</h1>
34 |                 <div class="social-icons">
35 |                     <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
36 |                     <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
37 |                     <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
38 |                     <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
39 |                 </div>
40 |                 <span>or use your email password</span>
41 |                 <input type="email" placeholder="Email">
42 |                 <input type="password" placeholder="Password">
43 |                 <a href="#">Forget Your Password?</a>
44 |                 <button>Sign In</button>
45 |             </form>
46 |         </div>
47 |         <div class="toggle-container">
48 |             <div class="toggle">
49 |                 <div class="toggle-panel toggle-left">
50 |                     <h1>Welcome Back !</h1>
51 |                     <p>Enter your personal details to use all of site features</p>
52 |                     <button class="hidden" id="login">Sign In</button>
53 |                 </div>
54 |                 <div class="toggle-panel toggle-right">
55 |                     <h1>Welcome, Friend!</h1>
56 |                     <p>Enter your personal details to use all of site features</p>
57 |                     <button class="hidden" id="register">Sign Up</button>
58 |                 </div>
59 |             </div>
60 |         </div>
61 |     </div>
62 | 
63 |     <script src="script.js"></script>
64 | </body>
65 | 
66 | </html>
67 | 


--------------------------------------------------------------------------------
/Mouse-Movement-Animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - Mouse movement button with border-radius</title>
 6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 7 | <link rel="stylesheet" href="style.css">
 8 | 
 9 | </head>
10 | <body>
11 | <!-- partial:index.partial.html -->
12 | <button class="button">
13 | 	<span>Hover me I'm Codewithrutu</span>
14 | </button>
15 | <!-- partial -->
16 |   <script  src="script.js"></script>
17 | 
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Mouse-Movement-Animation/script.js:
--------------------------------------------------------------------------------
 1 | document.querySelector('.button').onmousemove = e => {
 2 | 
 3 |     const x = e.pageX - e.target.offsetLeft;
 4 |     const y = e.pageY - e.target.offsetTop;
 5 |   
 6 |     e.target.style.setProperty('--x', `${x}px`);
 7 |     e.target.style.setProperty('--y', `${y}px`);
 8 |   
 9 |   };
10 | 


--------------------------------------------------------------------------------
/Mouse-Movement-Animation/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body {
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     min-height: 100vh;
 7 |     background: white;
 8 |   }
 9 |   
10 |   .button {
11 |     position: relative;
12 |     -webkit-appearance: none;
13 |     -moz-appearance: none;
14 |     appearance: none;
15 |     background: #f72359;
16 |     padding: 1em 2em;
17 |     border: none;
18 |     color: white;
19 |     font-size: 1.2em;
20 |     cursor: pointer;
21 |     outline: none;
22 |     overflow: hidden;
23 |   }
24 |   .button span {
25 |     position: relative;
26 |     pointer-events: none;
27 |   }
28 |   .button::before {
29 |     --size: 0;
30 |     content: "";
31 |     position: absolute;
32 |     left: var(--x);
33 |     top: var(--y);
34 |     width: var(--size);
35 |     height: var(--size);
36 |     background: radial-gradient(circle closest-side, #4405f7, transparent);
37 |     transform: translate(-50%, -50%);
38 |     transition: width 0.2s ease, height 0.2s ease;
39 |   }
40 |   .button:hover::before {
41 |     --size: 400px;
42 |   }
43 |   
44 | 


--------------------------------------------------------------------------------
/Music Player Card design/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 |     <link rel="stylesheet" href="style.css">
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 8 |     <title>Music player</title>
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <div class="card">
13 |             <div class="top">
14 |                 <i class="fa-solid fa-chevron-down"></i>
15 |                 <p>Now Playing</p>
16 |                 <i class="fa-solid fa-ellipsis"></i>
17 |             </div>
18 |             <div class="middle">
19 |                 <img src="https://i1.sndcdn.com/artworks-gSC8WJ7WYgBjOMY1-ZCYiGw-t500x500.jpg" alt="">
20 |                 <h1>Lovely</h1>
21 |                 <h2>Billie Eilish & Khalid</h2>
22 |             </div>
23 |             <div class="bottom">
24 |                 <div class="bars">
25 |                     <div class="bar"></div>
26 |                     <div class="bar"></div>
27 |                     <div class="bar"></div>
28 |                     <div class="bar"></div>
29 |                     <div class="bar"></div>
30 |                     <div class="bar"></div>
31 |                     <div class="bar"></div>
32 |                     <div class="bar"></div>
33 |                     <div class="bar"></div>
34 |                     <div class="bar"></div>
35 |                     <div class="bar"></div>
36 |                     <div class="bar"></div>
37 |                     <div class="bar"></div>
38 |                     <div class="bar"></div>
39 |                     <div class="bar"></div>
40 |                     <div class="bar"></div>
41 |                     <div class="bar"></div>
42 |                     <div class="bar"></div>
43 |                     <div class="bar"></div>
44 |                     <div class="bar"></div>
45 |                     <div class="bar"></div>
46 |                     <div class="bar"></div>
47 |                     <div class="bar"></div>
48 |                     <div class="bar"></div>
49 |                     <div class="bar"></div>
50 |                     <div class="bar"></div>
51 |                     <div class="bar"></div>
52 |                     <div class="bar"></div>
53 |                     <div class="bar"></div>
54 |                     <div class="bar"></div>
55 |                     <div class="bar"></div>
56 |                     <div class="bar"></div>
57 |                     <div class="bar"></div>
58 |                     <div class="bar"></div>
59 |                     <div class="bar"></div>
60 |                     <div class="bar"></div>
61 |                     <div class="bar"></div>
62 |                     <div class="bar"></div>
63 |                     <div class="bar"></div>
64 |                     <div class="bar"></div>
65 |                 </div>
66 |                 <div class="line">
67 |                     <div class="scale"></div>
68 |                 </div>
69 |                 <div class="time">
70 |                     <span>0:35</span>
71 |                     <span>3:58</span>
72 |                 </div>
73 |                 <div class="manage">
74 |                     <i class="fa-solid fa-shuffle"></i>
75 |                     <div class="play">
76 |                         <i class="fa-regular fa-square-caret-left fa"></i>
77 |                         <i class="fa-solid fa-circle-pause fa"></i>
78 |                         <i class="fa-regular fa-square-caret-right fa"></i>
79 |                     </div>
80 |                     <i class="fa-solid fa-headphones"></i>
81 |                 </div>
82 |             </div>
83 |         </div>
84 |     </div>
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/OLA landing page/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 |     <link rel="stylesheet" href="style.css">
 7 |     <title>ola</title>
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <div class="main">
12 |             <div class="navbar">
13 |                 <a href="#" class="logo"><img src="images/logo.svg"></a>
14 |                 <ul>
15 |                     <li><a href="#">home</a></li>
16 |                     <li><a href="#">product</a></li>
17 |                     <li><a href="#">gallery</a></li>
18 |                     <li><a href="#">contact</a></li>
19 |                 </ul>
20 |                 <a href="#" class="btn">Register</a>
21 |             </div>
22 |             <div class="content">
23 | 
24 | 
25 |                 <div class="text">
26 |                     <h2>Let's Ride The</h2>
27 |                     <h1>Future</h1>
28 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, ex.</p>
29 |                     <a href="#" class="btn btn-primary">Pre-order</a>
30 |                 </div>
31 |                 <div class="image">
32 |                     <img src="images/ola.png">
33 |                     <div class="specification">
34 |                         <span>80 km/hr <br>Speed</span>
35 |                         <span>100 km<br>battery range</span>
36 |                         <span>3.5hr<br>charging time</span>
37 |                     </div>
38 |                 </div>
39 | 
40 |                 
41 |             </div>
42 |         </div>
43 |         <div class="sidebar">
44 |             <div class="top">
45 |                 <span>T</span>
46 |                 <span>H</span>
47 |                 <span>E</span>
48 |                 <span>&nbsp;</span>
49 |                 <span>C</span>
50 |                 <span>O</span>
51 |                 <span>N</span>
52 |                 <span>C</span>
53 |                 <span>E</span>
54 |                 <span>P</span>
55 |                 <span>T</span>
56 |             </div>
57 |             <div class="bottom">
58 |                 <span>E</span>
59 |                 <span>L</span>
60 |                 <span>E</span>
61 |                 <span>C</span>
62 |                 <span>T</span>
63 |                 <span>R</span>
64 |                 <span>I</span>
65 |                 <span>C</span>
66 |                 <span>&nbsp;</span>
67 |                 <span>O</span>
68 |                 <span>L</span>
69 |                 <span>A</span>
70 |             </div>
71 | 
72 |         </div>
73 | 
74 |     </div>
75 | </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/OLA landing page/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="61" height="23" viewBox="0 0 61 23" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M49.5776 11.2511L55.2772 21.9237H60.8828L49.5776 0.782837L38.2725 21.9237H43.8781L49.5776 11.2511Z" fill="white"/>
3 | <path d="M31.0248 16.9717L31.0404 0.750602H26.0924V21.9229H35.6283L38.2745 16.9717H31.0248Z" fill="white"/>
4 | <path d="M12.2037 1.08901e-05C9.96703 -0.00309879 7.77976 0.659834 5.91857 1.90493C4.05739 3.15003 2.60594 4.92133 1.74787 6.99472C0.88981 9.06811 0.663695 11.3504 1.09814 13.5528C1.53258 15.7553 2.60806 17.7788 4.18849 19.3675C5.76892 20.9562 7.78328 22.0386 9.9767 22.4778C12.1701 22.9169 14.444 22.6931 16.5107 21.8346C18.5773 20.9762 20.3439 19.5216 21.5868 17.655C22.8297 15.7884 23.4932 13.5937 23.4932 11.3485C23.4932 8.34142 22.3042 5.45726 20.1875 3.32946C18.0707 1.20166 15.1993 0.00417583 12.2037 1.08901e-05ZM12.2037 17.4629C10.9983 17.466 9.81913 17.11 8.81541 16.44C7.81169 15.7701 7.02855 14.8162 6.56514 13.6993C6.10172 12.5823 5.97886 11.3524 6.21211 10.1653C6.44536 8.97821 7.02424 7.88727 7.87545 7.03059C8.72667 6.17391 9.81196 5.59001 10.9939 5.35281C12.1759 5.11561 13.4014 5.23577 14.5153 5.69809C15.6292 6.1604 16.5814 6.94408 17.2514 7.94992C17.9214 8.95576 18.279 10.1385 18.279 11.3485C18.2749 12.9716 17.6297 14.5267 16.4849 15.673C15.3401 16.8192 13.7892 17.4629 12.1723 17.4629H12.2037Z" fill="white"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/OLA landing page/ola.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutuja927/HTML-CSS-JAVASCRIPT-PROJECTS/386dfa59397a4d79fb89ac3929a76c366a68defb/OLA landing page/ola.png


--------------------------------------------------------------------------------
/PrintMotion/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>PrintMotion</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div id="printer-animation" class="printer-animation">
11 |         <div class="printer">
12 |         <input id="button" type="checkbox"> 
13 |           <label class="button" for="button"></label>
14 |           <div class="top"></div>
15 |           <div class="middle"></div>
16 |           <div class="trace"></div>
17 |           <div class="paper">
18 |           </div>
19 |         </div>
20 |     </div>      
21 |     <script src="script.js"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/PrintMotion/script.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 |     $('#printer-animation').mouseleave(function(){
3 |       $(this).removeClass('clicked');
4 |     }).dblclick(function(){
5 |       $(this).addClass('clicked').html($(this).html());
6 |     });
7 |   });
8 | 


--------------------------------------------------------------------------------
/QR Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>QR Code Generator in JavaScript</title>
 6 |     <link rel="stylesheet" href="style.css" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |   </head>
 9 |   <body>
10 |     <div class="wrapper">
11 |       <header>
12 |         <h1>QR Code Generator</h1>
13 |       </header>
14 |       <div class="form">
15 |         <input type="text" spellcheck="false" placeholder="Enter text or url" />
16 |         <button>Generate QR Code</button>
17 |       </div>
18 |       <div class="qr-code">
19 |         <img src="" alt="qr-code" />
20 |       </div>
21 |     </div>
22 |     <script src="script.js"></script>
23 |   </body>
24 | </html>
25 | 
26 | 


--------------------------------------------------------------------------------
/QR Generator/script.js:
--------------------------------------------------------------------------------
 1 | const wrapper = document.querySelector(".wrapper"),
 2 |   qrInput = wrapper.querySelector(".form input"),
 3 |   generateBtn = wrapper.querySelector(".form button"),
 4 |   qrImg = wrapper.querySelector(".qr-code img");
 5 | let preValue;
 6 | generateBtn.addEventListener("click", () => {
 7 |   let qrValue = qrInput.value.trim();
 8 |   if (!qrValue || preValue === qrValue) return;
 9 |   preValue = qrValue;
10 |   generateBtn.innerText = "Generating QR Code...";
11 |   qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
12 |   qrImg.addEventListener("load", () => {
13 |     wrapper.classList.add("active");
14 |     generateBtn.innerText = "Generate QR Code";
15 |   });
16 | });
17 | qrInput.addEventListener("keyup", () => {
18 |   if (!qrInput.value.trim()) {
19 |     wrapper.classList.remove("active");
20 |     preValue = "";
21 |   }
22 | });
23 | 
24 | 


--------------------------------------------------------------------------------
/QR Generator/style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: "Poppins", sans-serif;
  8 | }
  9 | body {
 10 |   display: flex;
 11 |   padding: 0 10px;
 12 |   min-height: 100vh;
 13 |   align-items: center;
 14 |   background: #000000;
 15 |   justify-content: center;
 16 | }
 17 | .wrapper {
 18 |   height: 265px;
 19 |   max-width: 410px;
 20 |   background: linear-gradient(#ffffff, #48b0dc);
 21 |   border-radius: 7px;
 22 |   padding: 20px 25px 0;
 23 |   transition: height 0.2s ease;
 24 |   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 25 |   border: 3px solid white;
 26 | }
 27 | .wrapper.active {
 28 |   height: 530px;
 29 | }
 30 | header h1 {
 31 |   font-size: 21px;
 32 |   font-weight: 900;
 33 |   color: rgb(0, 81, 255);
 34 | }
 35 | 
 36 | .wrapper .form {
 37 |   margin: 20px 0 25px;
 38 | }
 39 | .form :where(input, button) {
 40 |   width: 100%;
 41 |   height: 55px;
 42 |   border: none;
 43 |   outline: none;
 44 |   border-radius: 5px;
 45 |   transition: 0.1s ease;
 46 | }
 47 | .form input {
 48 |   font-size: 12px;
 49 |   padding: 0 17px;
 50 |   border: 1px solid #999;
 51 | }
 52 | .form input:focus {
 53 |   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13);
 54 | }
 55 | .form input::placeholder {
 56 |   color: #999;
 57 | }
 58 | .form button {
 59 |   color: #fff;
 60 |   cursor: pointer;
 61 |   margin-top: 20px;
 62 |   font-size: 17px;
 63 |   background: #3498db;
 64 | }
 65 | .form button:hover {
 66 |   color: #3498db;
 67 | 
 68 |   background: #fff;
 69 | }
 70 | .qr-code {
 71 |   opacity: 0;
 72 |   display: flex;
 73 |   padding: 33px 0;
 74 |   border-radius: 5px;
 75 |   align-items: center;
 76 |   pointer-events: none;
 77 |   justify-content: center;
 78 |   border: 1px solid #ccc;
 79 | }
 80 | .wrapper.active .qr-code {
 81 |   opacity: 1;
 82 |   pointer-events: auto;
 83 |   transition: opacity 0.5s 0.05s ease;
 84 | }
 85 | .qr-code img {
 86 |   width: 170px;
 87 | }
 88 | 
 89 | @media (max-width: 430px) {
 90 |   .wrapper {
 91 |     height: 255px;
 92 |     padding: 16px 20px;
 93 |   }
 94 |   .wrapper.active {
 95 |     height: 510px;
 96 |   }
 97 |   .form :where(input, button) {
 98 |     height: 52px;
 99 |   }
100 |   .qr-code img {
101 |     width: 160px;
102 |   }
103 | }
104 | 


--------------------------------------------------------------------------------
/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 | }
55 | 


--------------------------------------------------------------------------------
/Responsive Footer Design/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <title>Responsive Footer Design</title>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <link rel="stylesheet" href="style.css">
 8 |   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
 9 | </head>
10 | <body>
11 | 
12 |   <footer class="footer">
13 |   	 <div class="container">
14 |   	 	<div class="row">
15 | 
16 |   	 		<div class="footer-col">
17 |   	 			<h4>codewithrutu_09</h4>
18 |   	 			<ul>
19 |   	 				<li><a href="#">About us</a></li>
20 |   	 				<li><a href="#">Contact us</a></li>
21 |   	 				<li><a href="#">privacy policy</a></li>
22 |   	 			</ul>
23 |   	 		</div>
24 |             
25 |   	 		<div class="footer-col">
26 |   	 			<h4>get help</h4>
27 |   	 			<ul>
28 |   	 				<li><a href="#">FAQ</a></li>
29 |   	 				<li><a href="#">Courses</a></li>
30 |   	 				<li><a href="#">branches</a></li>
31 |   	 				<li><a href="#">Placements</a></li>
32 |   	 				<li><a href="#">Activities</a></li>
33 |   	 			</ul>
34 |   	 		</div>
35 |   	 		<div class="footer-col">
36 |   	 			<h4>Student Section</h4>
37 |   	 			<ul>
38 |   	 				<li><a href="#">Student Grievances</a></li>
39 |   	 				<li><a href="#">Study Material Status</a></li>
40 |   	 				<li><a href="#">Placement Assistance</a></li>
41 |   	 				<li><a href="#">Alumni</a></li>
42 |   	 			</ul>
43 |   	 		</div>
44 |   	 		<div class="footer-col">
45 |   	 			<h4>follow us</h4>
46 |   	 			<div class="social-links">
47 |   	 				<a href="#"><i class="fab fa-facebook-f"></i></a>
48 |   	 				<a href="#"><i class="fab fa-twitter"></i></a>
49 |   	 				<a href="#"><i class="fab fa-instagram"></i></a>
50 |   	 				<a href="#"><i class="fab fa-linkedin-in"></i></a>
51 |   	 			</div>
52 |   	 		</div>
53 |   	 	</div>
54 |   	 </div>
55 |   </footer>
56 | 
57 | </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/Responsive Footer Design/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
  2 | 
  3 | body{
  4 | 	line-height: 1.5;
  5 | 	font-family: 'Poppins', sans-serif;
  6 | }
  7 | 
  8 | *{
  9 | 	margin:0;
 10 | 	padding:0;
 11 | 	box-sizing: border-box;
 12 | }
 13 | 
 14 | .container{
 15 | 	max-width: 1170px;
 16 | 	margin:auto;
 17 | }
 18 | 
 19 | .row{
 20 | 	display: flex;
 21 | 	flex-wrap: wrap;
 22 | }
 23 | 
 24 | ul{
 25 | 	list-style: none;
 26 | }
 27 | 
 28 | .footer{
 29 | 	background-color: #24262b;
 30 |     padding: 70px 0;
 31 | }
 32 | 
 33 | .footer-col{
 34 |    width: 25%;
 35 |    padding: 0 15px;
 36 | }
 37 | 
 38 | .footer-col h4{
 39 | 	font-size: 18px;
 40 | 	color: #ffffff;
 41 | 	text-transform: capitalize;
 42 | 	margin-bottom: 35px;
 43 | 	font-weight: 500;
 44 | 	position: relative;
 45 | }
 46 | 
 47 | .footer-col h4::before{
 48 | 	content: '';
 49 | 	position: absolute;
 50 | 	left:0;
 51 | 	bottom: -10px;
 52 | 	background-color: #e91e63;
 53 | 	height: 2px;
 54 | 	box-sizing: border-box;
 55 | 	width: 50px;
 56 | }
 57 | 
 58 | .footer-col ul li:not(:last-child){
 59 | 	margin-bottom: 10px;
 60 | }
 61 | 
 62 | .footer-col ul li a{
 63 | 	font-size: 16px;
 64 | 	text-transform: capitalize;
 65 | 	color: #ffffff;
 66 | 	text-decoration: none;
 67 | 	font-weight: 300;
 68 | 	color: #bbbbbb;
 69 | 	display: block;
 70 | 	transition: all 0.3s ease;
 71 | }
 72 | 
 73 | .footer-col ul li a:hover{
 74 | 	color: #ffffff;
 75 | 	padding-left: 8px;
 76 | }
 77 | 
 78 | .footer-col .social-links a{
 79 | 	display: inline-block;
 80 | 	height: 40px;
 81 | 	width: 40px;
 82 | 	background-color: rgba(255,255,255,0.2);
 83 | 	margin:0 10px 10px 0;
 84 | 	text-align: center;
 85 | 	line-height: 40px;
 86 | 	border-radius: 50%;
 87 | 	color: #ffffff;
 88 | 	transition: all 0.5s ease;
 89 | }
 90 | 
 91 | .footer-col .social-links a:hover{
 92 | 	color: #24262b;
 93 | 	background-color: #ffffff;
 94 | }
 95 | 
 96 | /*responsive*/
 97 | @media(max-width: 767px){
 98 |   .footer-col{
 99 |     width: 50%;
100 |     margin-bottom: 30px;
101 | }
102 | }
103 | @media(max-width: 574px){
104 |   .footer-col{
105 |     width: 100%;
106 | }
107 | }
108 | 
109 | 
110 | 
111 | 
112 | 


--------------------------------------------------------------------------------
/Scribble Image Reveal with SVG Blend Mode/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - &quot;Scribble&quot; Image Reveal with SVG &amp; Blend Modes</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- partial:index.partial.html -->
11 | 
12 | 
13 |         <div id="stripped">
14 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1062">
15 |         <polyline points="0,154 131,0 0,348 269,0 0,562 437,0 
16 |         0,766 565,14 0,1062 719,0 289,1062 843,0 543,1062 995,0 729,
17 |         1062 1161,0 947,1062 1307,0 1143,1062 1500,162 1299,1062 1500,830"/>
18 |         </svg>
19 |         </div>
20 | 
21 | 
22 | <!-- partial -->
23 |   
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Scribble Image Reveal with SVG Blend Mode/style.css:
--------------------------------------------------------------------------------
 1 | @-webkit-keyframes scribble {
 2 |     to {
 3 |       stroke-dashoffset: 0;
 4 |     }
 5 |   }
 6 |   @keyframes scribble {
 7 |     to {
 8 |       stroke-dashoffset: 0;
 9 |     }
10 |   }
11 |   body { 
12 |     background: #000;
13 |   }
14 |   
15 |   div#stripped {
16 |     position: relative;
17 |     top: 50px;
18 |     max-width: 850px;
19 |     margin: 0 auto;
20 |     background: #000;
21 |     background-image: url(https://images.unsplash.com/photo-1574784618880-a1036d310e7c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80);
22 |     background-size: cover;
23 |     font-size: 0;
24 |   }
25 | 
26 |   
27 |   div#stripped svg {
28 |     background: #000;
29 |     mix-blend-mode: darken;
30 |   }
31 |   
32 |   div#stripped svg polyline {
33 |     fill: none;
34 |     stroke: #f00;
35 |     stroke-width: 200;
36 |     stroke-dasharray: 20000;
37 |     stroke-dashoffset: 20000;
38 |     -webkit-animation: scribble 4s linear forwards;
39 |             animation: scribble 4s linear forwards;
40 |   }
41 |   @media 
42 |   (-webkit-min-device-pixel-ratio: 2), 
43 |   (min-resolution: 192dpi) { 
44 |     div#stripped {
45 |     background-image: url(https://images.unsplash.com/photo-1574784618880-a1036d310e7c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80);
46 |     }
47 |   }
48 | 


--------------------------------------------------------------------------------
/Seasons 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 | 


--------------------------------------------------------------------------------
/Selling car landing page/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Selling cars Landing Page</title>
 6 |   <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&amp;display=swap'><link rel="stylesheet" href="./style.css">
 7 |   <link rel="stylesheet" href="style.css">
 8 | 
 9 | </head> 
10 |     <body>
11 |         <div class="header" id="header">
12 |             <nav>
13 |                 <div class="logo">
14 |                     <h1>Thunder Cars</h1>
15 |                 </div>
16 |                 <ul>
17 |                     <li><a href="#" id="PORSCHE">PORSCHE</a></li>
18 |                     <li><a href="#" id="AUDI">AUDI</a></li>
19 |                     <li><a href="#" id="BMW">BMW</a></li>
20 |                     <li><a href="#" id="MERCEDES">MERCEDES</a></li>
21 |                 </ul>
22 |                 <a href="#" class="btn">Reserve Now</a>
23 | 
24 |             </nav>
25 |             <div class="info">
26 |                 <div>
27 |                     <h2 id="mph">1.9 s</h2>
28 |                     <p>60 mph</p>
29 |                 </div>
30 |                 <div>
31 |                     <h2 id="speed">200 mph</h2>
32 |                     <p>Top Speed</p>
33 |                 </div>
34 |                 <div>
35 |                     <h2 id="range">396 mi</h2>
36 |                     <p>Max Range</p>
37 |                 </div>
38 |                 <div class="line">
39 |                 </div>
40 |                 <div>
41 |                     <h2 id="model">G-WAGON</h2>
42 |                 </div>
43 |             </div>
44 |         </div>
45 | <!-- partial -->
46 |   <script  src="script.js"></script>
47 | 
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/Selling car landing page/script.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var header= document.getElementById("header");
 3 |             var ms= document.getElementById("PORSCHE");
 4 |             var m3= document.getElementById("AUDI");
 5 |             var mx= document.getElementById("BMW");
 6 |             var my= document.getElementById("MERCEDES");
 7 |             var model= document.getElementById("model");
 8 |             var mph= document.getElementById("mph");
 9 |             var speed= document.getElementById("speed");
10 |             var range= document.getElementById("range");
11 | 
12 |             ms.onclick=function(){
13 |                 header.style.backgroundImage="url(https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)";
14 |                 model.innerHTML="PORSCHE";
15 |                 mph.innerHTML="1.5s";
16 |                 speed.innerHTML="300 mph";
17 |                 range.innerHTML="400 mi";
18 |             }
19 |             m3.onclick=function(){
20 |                 header.style.backgroundImage="url(https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)";
21 |                 model.innerHTML="AUDI";
22 |                 mph.innerHTML="1.7s";
23 |                 speed.innerHTML="350 mph";
24 |                 range.innerHTML="500 mi";
25 |             }
26 |             mx.onclick=function(){
27 |                 header.style.backgroundImage="url(https://images.unsplash.com/photo-1555215695-3004980ad54e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)";
28 |                 model.innerHTML="BMW";
29 |                 mph.innerHTML="2.5s";
30 |                 speed.innerHTML="420 mph";
31 |                 range.innerHTML="450 mi";
32 |             }
33 |             my.onclick=function(){
34 |                 header.style.backgroundImage="url(https://images.unsplash.com/photo-1501066927591-314112b5888e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)";
35 |                 model.innerHTML="MERCEDES";
36 |                 mph.innerHTML="3.5s";
37 |                 speed.innerHTML="450 mph";
38 |                 range.innerHTML="350 mi";
39 |             }
40 | 


--------------------------------------------------------------------------------
/Selling car landing page/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |     font-family: 'poppins', sans-serif;
 6 | }
 7 | .header{
 8 |     width: 100%;
 9 |     height: 100vh;
10 |     background-image: url("https://images.unsplash.com/photo-1648413653877-ade5eefd2f1b?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
11 |     background-color: rgba(0,0,0,0.5);
12 |     background-blend-mode: multiply;
13 |     background-position: center;
14 |     background-size: cover;
15 |     padding: 0 7%;
16 |     transition: background-image 1s;
17 | 
18 | }
19 | nav{
20 |     position: fixed;
21 |     top: 0;
22 |     left: 0;
23 |     width: 100%;
24 |     height: 100px;
25 |     display: flex;
26 |     align-items: center;
27 | 
28 | }
29 | .logo{
30 |     margin-left: 6%;
31 |     cursor: pointer;
32 |     color: #fff;
33 |     font-size: 20px;
34 |     text-transform: uppercase;
35 |     font-weight: 300;
36 | }
37 | nav ul{
38 |     flex: 1;
39 |     text-align: center;
40 | 
41 | }
42 | nav ul li{
43 |     display: inline-block;
44 |     margin:  10px 20px;
45 | 
46 | }
47 | nav ul li a{
48 |     text-decoration: none;
49 |     color: #fff;
50 | 
51 | }
52 | nav .btn{
53 |     color: #fff;
54 |     text-decoration: none;
55 |     border: 1px solid #fff;
56 |     padding: 10px 30px;
57 |     border-radius: 30px;
58 |     margin-right: 7%;
59 |     transition: 0.4s;
60 | }
61 | 
62 | nav .btn:hover{
63 |     background: #fff;
64 |     color: #000;
65 | }
66 | .info{
67 |     width: 100%;
68 |     padding: 0 7%;
69 |     display: flex;
70 |     align-items: center;
71 |     color: #fff;
72 |     position: fixed;
73 |     bottom: 50px;
74 |     left: 0;
75 | 
76 | }
77 | .info div{
78 |     margin: 0 20px;
79 | 
80 | }
81 | .info div h2{
82 |     font-size: 44px;
83 |     font-weight: 400;
84 | 
85 | }
86 | .info .line{
87 |     flex: 1;
88 |     background: #fff;
89 |     height: 4px;
90 | 
91 | }
92 | 


--------------------------------------------------------------------------------
/Shoes box image sliders/script.js:
--------------------------------------------------------------------------------
 1 | console.clear();
 2 | 
 3 | const elShoes = document.querySelectorAll(".shoe");
 4 | 
 5 | [...elShoes].forEach((shoe) => {
 6 |   shoe.addEventListener("click", () => {
 7 |     [...document.querySelectorAll(".shoe[data-active]")].forEach(
 8 |       (el) => delete el.dataset.active
 9 |     );
10 | 
11 |     shoe.dataset.active = true;
12 |   });
13 | });
14 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Smoke effect on name/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 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Smoke effect on Name</title>
 9 | </head>
10 | <body>
11 |     <section>
12 |         <video src="smoke.mp4" autoplay muted ></video>
13 |         <h1>
14 |             <span>R</span>
15 |             <span>U</span>
16 |             <span>T</span>
17 |             <span>U</span>
18 |             <span>J</span>
19 |             <span>A</span>
20 |         </h1>
21 |     </section>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Smoke effect on name/smoke.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutuja927/HTML-CSS-JAVASCRIPT-PROJECTS/386dfa59397a4d79fb89ac3929a76c366a68defb/Smoke effect on name/smoke.mp4


--------------------------------------------------------------------------------
/Smoke effect on name/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | video{
 8 |     object-fit: cover;
 9 | }
10 | 
11 | section{
12 |     background:#000 ;
13 | }
14 | 
15 | h1{
16 |     position: absolute;
17 |     top: 50%;
18 |     transform: translateY(-50%);
19 |     width: 100%;
20 |     text-align: center;
21 |     letter-spacing: 1rem;
22 |     text-transform: uppercase;
23 |     color: #f5f5f5;
24 |     font-size: 5em;
25 |     font-family: sans-serif;
26 | }
27 | 
28 | h1 span{
29 |     display: inline-block;
30 |     animation: animate 1s  ease-in-out;
31 | 
32 | }
33 | 
34 | @keyframes animate{
35 |     0%{
36 |         opacity: 0%;
37 |         transform: rotateY(90deg);
38 |         filter: blur(10px);
39 |     }
40 |     100%{
41 |         opacity: 1;
42 |         transform: rotateY(0deg);
43 |         filter: blur(0px);
44 | }
45 | }
46 | h1 span:nth-child(1)
47 | {
48 |     animation-delay: 0.6s;
49 | }
50 | h1 span:nth-child(2)
51 | {
52 |     animation-delay: 1s;
53 | }
54 | h1 span:nth-child(3)
55 | {
56 |     animation-delay: 1.7s;
57 | }
58 | h1 span:nth-child(4)
59 | {
60 |     animation-delay: 2.3s;
61 | }
62 | h1 span:nth-child(5)
63 | {
64 |     animation-delay: 2.7s;
65 | }
66 | h1 span:nth-child(6)
67 | {
68 |     animation-delay: 3.2s;
69 | }
70 | h1 span:nth-child(7)
71 | {
72 |     animation-delay: 3.7s;
73 | }
74 | h1 span:nth-child(8)
75 | {
76 |     animation-delay: 4s;
77 | }
78 | 


--------------------------------------------------------------------------------
/Social Media Icons with Hover Effect/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 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Hover effect on icons</title>
 9 | </head>
10 | <body>
11 | 
12 | 
13 |     <div class="container">
14 |         <h1>Social Media icons</h1>
15 |         <div class="social">
16 |             <a href="#"><i class="fa-brands fa-facebook"></i></a>
17 |             <a href="#"><i class="fa-brands fa-linkedin"></i></a>
18 |             <a href="#"><i class="fa-brands fa-instagram"></i></a>
19 |             <a href="#"><i class="fa-brands fa-github"></i></a>
20 |             <a href="#"><i class="fa-brands fa-youtube"></i></a>
21 |         </div>
22 |     </div>
23 | 
24 |     
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Social Media Icons with Hover Effect/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 2 | 
 3 | *{
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | 
11 |         .container{
12 |             display: flex;
13 |             justify-content: center;
14 |             align-items: center;
15 |             width: 100%;
16 |             height: 100vh;
17 |             background-color: #f1f9ff;
18 |             flex-wrap: wrap;
19 |             flex-direction: column;
20 |         }
21 | 
22 |         .container h1{
23 |             font-size: 40px;
24 |             line-height: 5;
25 |             text-transform: uppercase;
26 |             letter-spacing: 0.1em;
27 |             font-weight: 300;
28 |         }
29 | 
30 |         .social{
31 |             display: flex;
32 |             gap: 30px;
33 |         }
34 | 
35 |         .social a{
36 |             position: relative;
37 |             width: 80px;
38 |             height: 80px;
39 |             text-align: center;
40 |             text-decoration: none;
41 |             color: #000;
42 |             background: linear-gradient(145deg, #ffffff, #d9e0e6);
43 |             box-shadow: inset 6px 6px 14px #8e9396,
44 |                     inset -6px -6px 14px #ffffff;
45 |             border-radius: 25px;
46 |             overflow: hidden;
47 |         }
48 | 
49 |         .social a .fa-brands{
50 |             position: relative;
51 |             font-size: 30px;
52 |             line-height: 80px;
53 |             z-index: 2;
54 |             transition: color 0.5s;
55 |             
56 |         }
57 | 
58 |         .social a::after{
59 |             content: '';
60 |             width: 100%;
61 |             height: 100%;
62 |             top: -90px;
63 |             left: 0;
64 |             background: linear-gradient(-45deg, #12c2e9, #c471ed, #f64f59);
65 |             position: absolute;
66 |             border-radius: 25px;
67 |             transition: 0.5s ease;
68 |         }
69 | 
70 |         .social a:hover::after{
71 |             top: 0;
72 |         }
73 | 
74 |         .social a:hover .fa-brands{
75 |             color: #fff;
76 |             text-shadow:  1px 2px 14px #8e93969c,
77 |                     -1px -2px 14px #ffffffb7;
78 |         }
79 | 


--------------------------------------------------------------------------------
/Spring 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>Spring Tabs</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="tabs">
11 |         <div class="switcher"></div>
12 |         <div class="tab" data-active-color="#ffd609">Pending</div>
13 |         <div class="tab" data-active-color="#46dc00">Approved</div>
14 |         <div class="tab" data-active-color="#ff6d6d">Rejected</div>
15 |       </div>
16 |     <script src="script.js"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Spring Tabs/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |   }
 4 |   
 5 |   body {
 6 |     padding: 0;
 7 |     margin: 0;
 8 |     background: hsl(269, 95%, 22%);
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: center;
12 |     min-height: 100vh;
13 |     -webkit-font-smoothing: antialiased;
14 |     -moz-osx-font-smoothing: grayscale;
15 |   }
16 |   
17 |   .tabs {
18 |     --tab-width: 100px;
19 |     --tab-height: 30px;
20 |     --tab-border-radius: 5px;
21 |     background: hsl(270.2, 100%, 3.5%);
22 |     border-radius: 5px;
23 |     padding: 8px 8px;
24 |     display: flex;
25 |     gap: 0 20px;
26 |     position: relative;
27 |     overflow: hidden;
28 |     outline: 1px solid hsl(270.2, 50%, 10%);
29 |   }
30 |   
31 |   .tab,
32 |   .active-tab {
33 |     --tab-text-color: hsl(247.2, 10%, 40%);
34 |     color: var(--tab-text-color);
35 |     font-size: 14px;
36 |     font-weight: 700;
37 |     -webkit-user-select: none;
38 |     user-select: none;
39 |     line-height: 0;
40 |     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
41 |       Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
42 |       sans-serif;
43 |     width: var(--tab-width);
44 |     height: var(--tab-height);
45 |     display: flex;
46 |     align-items: center;
47 |     justify-content: center;
48 |     text-align: center;
49 |     position: relative;
50 |     z-index: 1;
51 |     cursor: pointer;
52 |   }
53 |   
54 |   .active-tab {
55 |     position: absolute;
56 |     z-index: 3;
57 |     pointer-events: none;
58 |   }
59 |   
60 |   .switcher {
61 |     opacity: 0.5;
62 |     position: absolute;
63 |     z-index: 2;
64 |     width: var(--tab-width);
65 |     height: var(--tab-height);
66 |     background: hsl(270.2, 100%, 80%);
67 |     border-radius: var(--tab-border-radius);
68 |     touch-action: none;
69 |     cursor: pointer;
70 |   }
71 | 


--------------------------------------------------------------------------------
/Stars in Sky Animation/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>Star in Sky Animation</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="night">
11 |       <div class="codewithrutu_09"></div>
12 |       <div class="codewithrutu_09"></div>
13 |       <div class="codewithrutu_09"></div>
14 |       <div class="codewithrutu_09"></div>
15 |       <div class="codewithrutu_09"></div>
16 |       <div class="codewithrutu_09"></div>
17 |       <div class="codewithrutu_09"></div>
18 |       <div class="codewithrutu_09"></div>
19 |       <div class="codewithrutu_09"></div>
20 |       <div class="codewithrutu_09"></div>
21 |       <div class="codewithrutu_09"></div>
22 |       <div class="codewithrutu_09"></div>
23 |       <div class="codewithrutu_09"></div>
24 |       <div class="codewithrutu_09"></div>
25 |       <div class="codewithrutu_09"></div>
26 |       <div class="codewithrutu_09"></div>
27 |       <div class="codewithrutu_09"></div>
28 |       <div class="codewithrutu_09"></div>
29 |       <div class="codewithrutu_09"></div>
30 |       <div class="codewithrutu_09"></div>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Submit Button Animation/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>Button ANimation</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <button id="js-btn" class="btn btn-green btn-lg">
11 |       <span class="text">Submit</span>
12 |       <div class="timer">
13 |         <svg
14 |           id="js-timer"
15 |           viewBox="0 0 120 120"
16 |           xmlns="http://www.w3.org/2000/svg"
17 |         >
18 |           <circle cx="60" cy="60" r="55" />
19 |         </svg>
20 |       </div>
21 |       <div class="icon-success">
22 |         <svg viewBox="0 0 50 45" xmlns="http://www.w3.org/2000/svg">
23 |           <path d="M20,42 L3, 25" />
24 |           <path d="M20,42 L47,3" />
25 |         </svg>
26 |       </div>
27 |     </button>
28 | 
29 |     <button id="js-reset" class="btn btn-sm btn-black top-left">Reset</button>
30 | 
31 |     <script src="script.js"></script>
32 |   </body>
33 | </html>
34 | 
35 | 


--------------------------------------------------------------------------------
/Submit Button Animation/script.js:
--------------------------------------------------------------------------------
 1 | 
 2 |       var button = document.getElementById("js-btn"),
 3 |         timer = document.getElementById("js-timer"),
 4 |         reset = document.getElementById("js-reset");
 5 | 
 6 |       button.addEventListener("click", doSubmit);
 7 |       reset.addEventListener("click", resetButton);
 8 | 
 9 |       function doSubmit() {
10 |         if (button.classList.contains("do-submit")) {
11 |           return;
12 |         }
13 | 
14 |         button.classList.add("do-submit");
15 | 
16 |         setTimeout(function () {
17 |           doTimer(0);
18 |         }, 1200);
19 | 
20 |         setTimeout(function () {
21 |           doTimer(15);
22 |         }, 1200);
23 | 
24 |         setTimeout(function () {
25 |           doTimer(75);
26 |         }, 2000);
27 | 
28 |         setTimeout(function () {
29 |           doTimer(100);
30 |         }, 2800);
31 |       }
32 | 
33 |       function doTimer(amountLoaded) {
34 |         timer.style.strokeDashoffset = 3.83 * (100 - amountLoaded) + "px";
35 | 
36 |         if (amountLoaded === 100) {
37 |           setTimeout(function () {
38 |             button.classList.add("success");
39 |           }, 500);
40 |         }
41 |       }
42 | 
43 |       function resetButton() {
44 |         button.classList.add("reset");
45 |         setTimeout(function () {
46 |           button.classList.remove("success");
47 |           button.classList.remove("do-submit");
48 |           button.classList.remove("reset");
49 |         }, 500);
50 | 
51 |         timer.style.strokeDashoffset = "383px";
52 | 
53 |         time = 90;
54 |       }
55 |     
56 | 


--------------------------------------------------------------------------------
/Text to Speech Converter/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<meta charset="utf-8">
 4 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 5 | 	<link rel="stylesheet" href="style.css">
 6 | 	<title>Text to Speech JS</title>
 7 | </head>
 8 | <body>
 9 | 
10 |         
11 |         <div class="container-box">
12 |                         
13 |             <header class="head">
14 |                 <h2>Text To Speech</h2> 
15 |             </header>
16 | 
17 |             <div class="input-field">
18 |                 <h3>Enter Text / Paste</h3>
19 |                 <textarea id="txt" oninvalid="Text"></textarea>
20 |             </div>
21 | 
22 |             <div class="btn">
23 |             <button onclick="speak()">Speak</button>
24 |             </div>
25 | 
26 |         </div>
27 |         
28 | 
29 | <script src="script.js"></script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Text to Speech Converter/script.js:
--------------------------------------------------------------------------------
 1 |        function speak() {
 2 |             const utter = new SpeechSynthesisUtterance();
 3 |             utter.rate = 1.0; // speed: 0.1-10
 4 |             utter.volume = 1.0; // 0-1
 5 |             utter.pitch = 0.5; // 0 (low) - 2 (high)
 6 |             utter.voice = speechSynthesis.getVoices()[0];
 7 |             utter.text = document.querySelector('#txt').value;
 8 |             speechSynthesis.speak(utter);
 9 |         }
10 | 


--------------------------------------------------------------------------------
/Text to Speech Converter/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@500&display=swap');
 2 | @import url('https://fonts.googleapis.com/css2?family=AR+One+Sans:wght@500&display=swap');
 3 | *
 4 | {
 5 | 	margin: 0;
 6 | 	padding: 0;
 7 | 	box-sizing: border-box;
 8 | }
 9 | body
10 | {
11 | 	display: flex;
12 | 	flex-direction: column;
13 | 	align-items: center;
14 | 	justify-content: center;
15 | 	height: 100vh;
16 | 	background-color: #0000FF;
17 | }
18 | 
19 | 
20 |         .container-box{
21 |             width: 25%;
22 |             background-color: white;
23 |             padding: 60px;
24 |             border-radius: 5px;
25 |             border: none;
26 |             display: flex;
27 |             flex-direction: column;
28 |             align-items: center;
29 |             justify-content: center;
30 |             box-shadow: 5px 5px 5px black;
31 |         }
32 | 
33 |         h2{
34 |             font-family: 'Gabarito', sans-serif;
35 |         }
36 | 
37 |         h3{
38 |             font-family: 'AR One Sans', sans-serif;
39 |             font-size: 1rem;
40 |             color: darkgrey;
41 |         }
42 | 
43 |         .input-field{
44 |             padding-top: 30px;
45 |             margin: 5px;
46 |         }
47 | 
48 | 
49 |                 
50 |         textarea{
51 |             width: 300px;
52 |             height: 150px;
53 |             padding: 10px;
54 |             background-color: white;
55 |             border: 2px solid gray;
56 |             font-family: 'Gabarito', sans-serif;
57 |             outline: none;
58 |             resize: none;
59 |             border-radius: 5px;
60 |             cursor: pointer;
61 |             margin-top: 10px;
62 |         }
63 | 
64 |         
65 | 
66 |         .btn{ 
67 |             padding-top: 25px;
68 |         }
69 | 
70 |         button{
71 |             width: 200px;
72 |             background-color: black;
73 |             border-radius: 5px;
74 |             border: none;
75 |             outline: none;
76 |             cursor: pointer;
77 |             color: white;
78 |             padding: 10px;
79 |             font-family: 'AR One Sans', sans-serif; 
80 |             transition: 0.5s ease;
81 |         }
82 | 
83 |         button:hover{
84 |             background-color: #0000FF;
85 |             color: white;
86 |         }
87 | 


--------------------------------------------------------------------------------
/Tic Toe Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 4 |     <title>Tic Tac mini game | untoldcoding </title>
 5 |     
 6 |     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap" rel="stylesheet">
 7 | 
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 |    <div class="codewithrutu_09">
12 |        <div class="btn">
13 |            <button class="button-option"></button>
14 |            <button class="button-option"></button>
15 |            <button class="button-option"></button>
16 |            <button class="button-option"></button>
17 |            <button class="button-option"></button>
18 |            <button class="button-option"></button>
19 |            <button class="button-option"></button>
20 |            <button class="button-option"></button>
21 |            <button class="button-option"></button>
22 |        </div>
23 |        <button id="restart">Restart</button>
24 |    </div>
25 |    <div class="popup hide">
26 |        <p id="message">Sample Message</p>
27 |        <button id="new-game">New Game</button>
28 |    </div>
29 |    
30 |  
31 |     <script src="script.js"></script>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Tic Toe Game/script.js:
--------------------------------------------------------------------------------
  1 | let btnRef = document.querySelectorAll(".button-option");
  2 | let popupRef = document.querySelector(".popup");
  3 | let newgameBtn = document.getElementById("new-game");
  4 | let restartBtn = document.getElementById("restart");
  5 | let msgRef = document.getElementById("message");
  6 | 
  7 | let winningPattern = [
  8 |   [0, 1, 2],
  9 |   [0, 3, 6],
 10 |   [2, 5, 8],
 11 |   [6, 7, 8],
 12 |   [3, 4, 5],
 13 |   [1, 4, 7],
 14 |   [0, 4, 8],
 15 |   [2, 4, 6],
 16 | ];
 17 | 
 18 | let xTurn = true;
 19 | let count = 0;
 20 | 
 21 | const disableButtons = () => {
 22 |   btnRef.forEach((element) => (element.disabled = true));
 23 | 
 24 |   popupRef.classList.remove("hide");
 25 | };
 26 | 
 27 | const enableButtons = () => {
 28 |   btnRef.forEach((element) => {
 29 |     element.innerText = "";
 30 |     element.disabled = false;
 31 |   });
 32 | 
 33 |   popupRef.classList.add("hide");
 34 | };
 35 | 
 36 | const winFunction = (letter) => {
 37 |   disableButtons();
 38 |   if (letter == "X") {
 39 |     msgRef.innerHTML = "  <br> '1st player X ' Wins";
 40 |   } else {
 41 |     msgRef.innerHTML = "  <br> '2st player O' Wins";
 42 |   }
 43 | };
 44 | 
 45 | const drawFunction = () => {
 46 |   disableButtons();
 47 |   msgRef.innerHTML = " <br> It's a Draw";
 48 | };
 49 | 
 50 | newgameBtn.addEventListener("click", () => {
 51 |   count = 0;
 52 |   enableButtons();
 53 | });
 54 | restartBtn.addEventListener("click", () => {
 55 |   count = 0;
 56 |   enableButtons();
 57 | });
 58 | 
 59 | const winChecker = () => {
 60 |   for (let i of winningPattern) {
 61 |     let [element1, element2, element3] = [
 62 |       btnRef[i[0]].innerText,
 63 |       btnRef[i[1]].innerText,
 64 |       btnRef[i[2]].innerText,
 65 |     ];
 66 |     //Check if elements are filled
 67 |     //If 3 empty elements are same and would give win as would
 68 |     if (element1 != "" && (element2 != "") & (element3 != "")) {
 69 |       if (element1 == element2 && element2 == element3) {
 70 |         //If all 3 buttons have same values then pass the value to winFunction
 71 |         winFunction(element1);
 72 |       }
 73 |     }
 74 |   }
 75 | };
 76 | 
 77 | btnRef.forEach((element) => {
 78 |   element.addEventListener("click", () => {
 79 |     if (xTurn) {
 80 |       xTurn = false;
 81 | 
 82 |       element.innerText = "X";
 83 |       element.disabled = true;
 84 |     } else {
 85 |       xTurn = true;
 86 | 
 87 |       element.innerText = "O";
 88 |       element.disabled = true;
 89 |     }
 90 | 
 91 |     count += 1;
 92 |     if (count == 9) {
 93 |       drawFunction();
 94 |     }
 95 | 
 96 |     winChecker();
 97 |   });
 98 | });
 99 | 
100 | window.onload = enableButtons;
101 | 
102 | 


--------------------------------------------------------------------------------
/Tic Toe Game/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 |     font-family: "Raleway", sans-serif;
 6 |   }
 7 |   body {
 8 |     height: 100vh;
 9 |     background: linear-gradient(105deg, #00f2ff, rgb(0, 16, 197));
10 |   }
11 |   html {
12 |     font-size: 16px;
13 |   }
14 |   .codewithrutu_09 {
15 |     position: absolute;
16 |     transform: translate(-50%, -50%);
17 |     top: 50%;
18 |     left: 50%;
19 |   }
20 |   .btn {
21 |     width: 70vmin;
22 |     height: 70vmin;
23 |     display: flex;
24 |     flex-wrap: wrap;
25 |     gap: 2vmin;
26 |   }
27 |   .button-option {
28 |     background: #ffffff;
29 |     height: 22vmin;
30 |     width: 22vmin;
31 |     border: none;
32 |     border-radius: 8px;
33 |     font-size: 12vmin;
34 |     color: rgb(11, 13, 118);
35 |     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
36 |   }
37 |   #restart {
38 |     font-size: 1.3em;
39 |     padding: 1em;
40 |     border-radius: 8px;
41 |     background-color: #0a0027;
42 |     color: #ffffff;
43 |     border: none;
44 |     position: relative;
45 |     margin: 1.5em auto 0 auto;
46 |     display: block;
47 |   }
48 |   .popup {
49 |     background: linear-gradient(105deg, #00f2ff, rgb(0, 16, 197));
50 |     height: 100%;
51 |     width: 100%;
52 |     position: absolute;
53 |     display: flex;
54 |     z-index: 2;
55 |     align-items: center;
56 |     justify-content: center;
57 |     flex-direction: column;
58 |     gap: 1em;
59 |     font-size: 12vmin;
60 |   }
61 |   #new-game {
62 |     font-size: 0.6em;
63 |     padding: 0.5em 1em;
64 |     background-color: #0a0027;
65 |     color: #ffffff;
66 |     border-radius: 0.2em;
67 |     border: none;
68 |   }
69 |   #message {
70 |     color: #ffffff;
71 |     text-align: center;
72 |     font-size: 1em;
73 |   }
74 |   .popup.hide {
75 |     display: none;
76 |   }
77 |   
78 | 


--------------------------------------------------------------------------------
/Toggle 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>Toggle</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <label class="toggle">
11 |         <input type="checkbox" />
12 |         <div class="off-knob"></div>
13 |         <div class="on-knob"></div>
14 |       
15 |         <svg viewBox="0 0 44 22" xmlns="http://www.w3.org/2000/svg">
16 |           <rect
17 |             class="outline"
18 |             fill="none"
19 |             rx="11"
20 |             stroke-linejoin="round"
21 |             stroke-linecap="round"
22 |             stroke-width="1"
23 |           />
24 |           <rect
25 |             class="outline outline--blur"
26 |             fill="none"
27 |             rx="11"
28 |             stroke-linejoin="round"
29 |             stroke-linecap="round"
30 |             stroke-width="1"
31 |           />
32 |         </svg>
33 |       </label>      
34 |     <script src="script.js"></script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Toggle Button/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |   }
 4 |   
 5 |   :root {
 6 |     background-color: hsl(209, 76%, 6%);
 7 |     --on-color: hsl(208.7, 100%, 50%);
 8 |     --off-color: hsl(208.7, 100%, 90%);
 9 |     --toggle-bg: hsl(208.7, 40%, 20%);
10 |     --toggle-gap: 10px;
11 |     --toggle-width: 160px;
12 |     --transition-color: var(--off-color);
13 |   }
14 |   
15 |   body {
16 |     margin: 0;
17 |     display: flex;
18 |     place-items: center;
19 |     min-width: 320px;
20 |     min-height: 100vh;
21 |     display: flex;
22 |     align-items: center;
23 |     justify-content: center;
24 |   }
25 |   
26 |   .toggle {
27 |     position: relative;
28 |     cursor: pointer;
29 |     background: var(--toggle-bg);
30 |     width: var(--toggle-width);
31 |     height: calc(var(--toggle-width) / 2);
32 |     border-radius: 160px;
33 |     overflow: hidden;
34 |     display: flex;
35 |     align-items: center;
36 |     box-shadow: inset 0 0 2px #7c7e8855;
37 |     -webkit-tap-highlight-color: transparent;
38 |   }
39 |   
40 |   .toggle input {
41 |     appearance: none;
42 |     margin: 0;
43 |     padding: 0;
44 |   }
45 |   
46 |   .toggle input:checked ~ svg .outline {
47 |     --transition-color: var(--on-color);
48 |   }
49 |   
50 |   .off-knob,
51 |   .on-knob {
52 |     position: absolute;
53 |     height: calc(100% - var(--toggle-gap) * 2);
54 |     aspect-ratio: 1;
55 |     border-radius: 50%;
56 |     box-shadow: 0px 1px 1px rgba(10, 19, 39, 0.1),
57 |       0px 4px 12px rgba(10, 19, 39, 0.03), 0px 4px 20px rgba(10, 19, 39, 0.04);
58 |     transform-origin: center center;
59 |     will-change: transform;
60 |   }
61 |   
62 |   .off-knob {
63 |     left: var(--toggle-gap);
64 |     background: var(--off-color);
65 |   }
66 |   
67 |   .on-knob {
68 |     right: var(--toggle-gap);
69 |     background: var(--on-color);
70 |     transform: scale(0.1) translateX(430px);
71 |   }
72 |   
73 |   .toggle input:checked ~ .on-knob {
74 |     animation-delay: 1.1s;
75 |   }
76 |   
77 |   svg {
78 |     position: absolute;
79 |     left: 0;
80 |     top: 0;
81 |     width: 100%;
82 |     height: 100%;
83 |   }
84 |   
85 |   .outline {
86 |     width: 100%;
87 |     height: 100%;
88 |     stroke: var(--transition-color);
89 |     stroke-dasharray: 2 125;
90 |     stroke-dashoffset: 32.5;
91 |     stroke-opacity: 0;
92 |   }
93 |   
94 |   .outline--blur {
95 |     filter: blur(0.8px);
96 |   }
97 |   
98 | 


--------------------------------------------------------------------------------
/Water Effect On Name/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 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Document</title>
 9 | </head>
10 | <body>
11 |     <div class="content">
12 |         <h1>Rutuja</h1>
13 |         <h1>Rutuja</h1>
14 |     </div>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Water Effect On Name/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');
 2 | 
 3 | *{
 4 |     margin: 0%;
 5 |     padding: 0%;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | body{
11 |     display: flex;
12 |     justify-content: space-between;
13 |     background: #000;
14 |     text-transform: uppercase;
15 |     letter-spacing: 1rem;
16 | }
17 | 
18 | .content{
19 |     position: relative;
20 |     height: 100vh;
21 |     width: 100vw;
22 | }
23 | 
24 | .content h1{
25 |     position: absolute;
26 |     top: 50%;
27 |     left: 50%;
28 |     transform: translate(-50%, -50%);
29 |     font-size: 12em;
30 | }
31 | 
32 | .content h1:nth-child(1){
33 |     color:transparent;
34 |     -webkit-text-stroke: 1px #f628c9;
35 | }
36 | 
37 | .content h1:nth-child(2){
38 |     color: #f628c9;
39 |     animation: animate 4s ease-in-out infinite;
40 | }
41 | 
42 | @keyframes animate
43 | {
44 |     0%, 100%{
45 |         clip-path: polygon(0% 45%, 15% 44%, 32% 50%,
46 |          54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
47 |     }
48 |     50%{
49 |         clip-path: polygon(0% 60%, 16% 65%, 34% 66%,
50 |          51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
51 |     }
52 | }
53 | 


--------------------------------------------------------------------------------
/Water Effect/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>Water Glass</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div role="img" aria-label="glass of water"></div>
11 |   </body>
12 | </html>
13 | 
14 | 


--------------------------------------------------------------------------------
/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">
13 |             </div>
14 |             <div class="inner">
15 |                 <div class="wine">
16 |                     <div class="wine-back"></div>
17 |                     <div class="wine-front"></div>
18 |                 </div>
19 |             <div class="shine">
20 |         </div>
21 |     </div>
22 |     </div>
23 |     </div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/X-ray Animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - X-ray me (SVG Experiment)</title>
 6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 7 | <link rel="stylesheet" href="./style.css">
 8 | 
 9 | </head>
10 | <body>
11 | <!-- partial:index.partial.html -->
12 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
13 |   <rect width="100%" height="100%" fill="#E7E7E8"/>
14 |   <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/a.svg" width="100%" height="100%" />
15 | </svg>
16 | 
17 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
18 |   <defs>
19 |     <clipPath id="mask">
20 |       <circle id="mask-circle" cx="50%" cy="50%" r="8%" style="fill: #ffffff"/>
21 |     </clipPath>
22 |   </defs>
23 |   <g clip-path="url(#mask)">
24 |     <rect width="100%" height="100%" fill="#272730"/>
25 |     <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/b.svg" width="100%" height="100%" />
26 |   </g>
27 |   <circle id="circle-shadow" cx="50%" cy="50%" r="8%" style="stroke: #fff; fill: transparent; stroke-width: 5;" />
28 | </svg>
29 | 
30 | <div>
31 |   SVG <del>Masking</del> <ins>clip-path</ins> Experiment.<br/>
32 |   <span>Move your mouse/finger over the image.</span>
33 | </div>
34 | 
35 | <a href="https://twitter.com/pixelia_me" target="_blank">@pixelia_me</a>
36 | <!-- partial -->
37 |   <script  src="./script.js"></script>
38 | 
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/X-ray Animation/script.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Noel Delgado | @pixelia_me
 3 |  *
 4 | */
 5 | 
 6 | var svgElement = document.querySelector('svg');
 7 | var maskedElement = document.querySelector('#mask-circle');
 8 | var circleFeedback = document.querySelector('#circle-shadow');
 9 | var svgPoint = svgElement.createSVGPoint();
10 | 
11 | function cursorPoint(e, svg) {
12 |     svgPoint.x = e.clientX;
13 |     svgPoint.y = e.clientY;
14 |     return svgPoint.matrixTransform(svg.getScreenCTM().inverse());
15 | }
16 | 
17 | function update(svgCoords) {
18 |     maskedElement.setAttribute('cx', svgCoords.x);
19 |     maskedElement.setAttribute('cy', svgCoords.y);
20 |     circleFeedback.setAttribute('cx', svgCoords.x);
21 |     circleFeedback.setAttribute('cy', svgCoords.y);
22 | }
23 | 
24 | window.addEventListener('mousemove', function(e) {
25 |   update(cursorPoint(e, svgElement));
26 | }, false);
27 | 
28 | document.addEventListener('touchmove', function(e) {
29 |     e.preventDefault();
30 |     var touch = e.targetTouches[0];
31 |     if (touch) {
32 |         update(cursorPoint(touch, svgElement));
33 |     }
34 | }, false);
35 | 


--------------------------------------------------------------------------------
/X-ray Animation/style.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   height: 100%;
 4 |   margin: 0;
 5 | }
 6 | 
 7 | body {
 8 |   font-family: Monaco;
 9 |   font-size: 12px;
10 |   color: rgba(0,0,0,.7);
11 | }
12 | 
13 | svg {
14 |   position: absolute;
15 |   top: 0;
16 |   left: 0;
17 |   right: 0;
18 |   bottom: 0;
19 |   display: block;
20 |   width: 100%;
21 |   height: 100%;
22 | }
23 | 
24 | div,
25 | a {
26 |   position: relative;
27 |   padding: 1em;
28 | }
29 | 
30 | div {
31 |   text-shadow: 0 1px 0 rgba(255,255,255,.5);
32 | }
33 | 
34 | span {
35 |   color: rgba(0,0,0,.4);
36 | }
37 | 
38 | a {
39 |   color: rgba(255,0,0,.5);
40 | }
41 | 


--------------------------------------------------------------------------------
/Xmas Animation/script.js:
--------------------------------------------------------------------------------
 1 | $(function() {
 2 |     var canvas = $("#canvas")[0];
 3 |     var ctx = canvas.getContext("2d");
 4 |     var WIDTH = 320;
 5 |     var HEIGHT = 320;
 6 |     canvas.width = WIDTH;
 7 |     canvas.height = HEIGHT;
 8 |     clearCanvas();
 9 | 
10 |     var particles = [];
11 |     for (var i = 0; i < WIDTH; i++) {
12 |         particles.push({
13 |             x: Math.random() * WIDTH,
14 |             y: Math.random() * HEIGHT,
15 |             r: Math.random() * 2 + 1
16 |         })
17 |     }
18 |     
19 |     function draw() {
20 |         clearCanvas();
21 |         ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
22 |         ctx.beginPath();
23 | 
24 |         for (let i = 0; i < WIDTH; i++) {
25 |             let p = particles[i];
26 |             ctx.moveTo(p.x, p.y);
27 |             ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
28 |         }
29 |         ctx.fill();
30 |         update();
31 |     }
32 |     
33 |     function update() {
34 |         for (let i = 0; i < WIDTH; i++) {
35 |             let p = particles[i];
36 |             p.y += p.r;
37 |             if (p.y > canvas.height) {
38 |                 particles[i] = {
39 |                     x: Math.random() * canvas.width,
40 |                     y: -10,
41 |                     r: p.r
42 |                 };
43 |             }
44 |         }
45 |     }
46 |     var timer = setInterval(draw, 50);
47 | 
48 |     function clearCanvas() {
49 |         ctx.clearRect(0, 0, canvas.width, canvas.height);
50 |     }
51 | 
52 | })
53 | 


--------------------------------------------------------------------------------
/Xmas Animation/style.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     margin:0;
 3 |     width: 100%;
 4 |     height: 100%;
 5 |     position: absolute;
 6 |     overflow: hidden;
 7 |     background: linear-gradient(135deg, rgba(180,186,214,1) 0%, rgba(232,203,192,1) 100%);
 8 | }
 9 |   
10 | .header {text-align: center; margin: 30px 0;}
11 | .social a img { height: 1.5em; }
12 | 
13 | .content {
14 |     text-align: center;
15 |     width: 100%;
16 | }
17 | 
18 | svg {
19 |     max-width: 575px;
20 | }
21 | 
22 | #canvas {
23 |     border-radius: 50%;
24 |     position: relative;
25 |     width: 310px;
26 |     height: 290px;
27 |     top: 10px;
28 |     left: 0px;
29 | }
30 | 
31 | .canvas_container {
32 |     position: absolute;
33 |     width: 100%;
34 | }
35 | 
36 | .draw_container {
37 |     position: absolute;
38 |     top: 50px;
39 |     width: 100%;
40 | }
41 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | }
64 | 


--------------------------------------------------------------------------------
/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 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Document</title>
 9 | </head>
10 | <body>
11 |     <ul>
12 |         <li style="--clr:#2483ff;">a
13 |             <a href="">
14 |                 <i class="fa-solid fa-house"></i>
15 |                 <span>Home</span>
16 |             </a></li>
17 |         <li style="--clr:#fff200;">
18 |             <a href="">
19 |                 <i class="fa-solid fa-user"></i>
20 |                 <span>Profile</span>
21 |             </a></li>
22 |         <li style="--clr:#ff253f;">
23 |             <a href="">
24 |                 <i class="fa-solid fa-heart"></i>
25 |                 <span>Likes</span>
26 |             </a></li>
27 |         <li style="--clr:#25d366;">
28 |             <a href="">
29 |                 <i class="fa-solid fa-gear"></i>
30 |                 <span>Settings</span>
31 |             </a></li>
32 |         <li style="--clr:#f32ec8;">
33 |             <a href="">
34 |                 <i class="fa-solid fa-magnifying-glass"></i>
35 |                 <span>Search</span>
36 |             </a></li>
37 |     </ul>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/portion bottle/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>Potion Bottle</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |         <svg viewBox="0 0 420 543" fill="none" xmlns="http://www.w3.org/2000/svg">
12 |             <path d="M130.88 17.7173C128.425 8.8035 135.131 0 144.377 0H276.202C285.268 0 291.943 8.48626 289.808 17.2976L267.026 111.298C265.504 117.578 259.882 122 253.42 
13 |             122H170.266C163.965 122 158.441 117.792 156.768 111.717L130.88 17.7173Z" fill="#EFBE75"></path>
14 |             <path d="M114 56.5C114 51.2533 118.253 47 123.5 47H296.5C301.747 47 306 51.2533 306 56.5C306 61.7467 301.747 66 296.5 
15 |             66H123.5C118.253 66 114 61.7467 114 56.5Z" fill="#EEF8FF" fill-opacity="0.8"></path>
16 |             <path d="M294 47H126V140.474C151.723 129.235 180.134 123 210 123C239.866 123 268.277 129.235 294 140.474V47Z" 
17 |             fill="#EEF8FF" fill-opacity="0.8"></path>
18 |             <path d="M420 333C420 448.98 325.98 543 210 543C94.0202 543 0 448.98 0 333C0 217.02 94.0202 123 210 123C325.98 123 420 217.02 420 333Z" 
19 |             fill="#EEF8FF" fill-opacity="0.8"></path>
20 |         </svg>
21 |         <div class="liquid">
22 |             <div class="bubble"></div>
23 |         </div>
24 |     </div>    
25 |     <script src="script.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/portion bottle/script.js:
--------------------------------------------------------------------------------
 1 | let bubbles = document.querySelectorAll(".bubble");
 2 | 
 3 | gsap.fromTo(
 4 | 	bubbles,
 5 | 	{
 6 | 		opacity: 1,
 7 | 		x: "random(100,550)",
 8 | 		y: "-=0",
 9 | 		scale: "random(1, 3)",
10 | 		repeatRefresh: true,
11 | 		transformOrigin: "center"
12 | 	},
13 | 	{
14 | 		duration: 2,
15 | 		opacity: "random(0, 0.5)",
16 | 		scale: 0,
17 | 		y: "-=500",
18 | 		x: "random(100,550)",
19 | 		stagger: {
20 | 			amount: 10,
21 | 			each: 1,
22 | 			repeat: -1
23 | 		}
24 | 	}
25 | );
26 | 


--------------------------------------------------------------------------------
/portion bottle/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | :root {
  6 |     --size: 100;
  7 |     --unit: calc((var(--size) / 300) * 1vmin);
  8 | }
  9 | 
 10 | body {
 11 |     min-height: 100vh;
 12 |     display: flex;
 13 |     align-items: center;
 14 |     justify-content: center;
 15 |     background: #c1f2ee;
 16 | }
 17 | 
 18 | .container {
 19 |     height: calc(250 * var(--unit));
 20 |     width: calc(250 * var(--unit));
 21 |     position: relative;
 22 |     display: flex;
 23 |     align-items: center;
 24 |     justify-content: center;
 25 |     overflow: hidden;
 26 | }
 27 | 
 28 | .container svg {
 29 |     height: 100%;
 30 | }
 31 | 
 32 | .container .liquid {
 33 |     position: absolute;
 34 |     bottom: 4.7%;
 35 |     width: calc(171 * var(--unit));
 36 |     height: calc(171 * var(--unit));
 37 |     border-radius: 50%;
 38 |     overflow: hidden;
 39 |     animation: wave 6s ease-in-out infinite;
 40 |     background: linear-gradient(
 41 |         180deg,
 42 |         rgba(233, 73, 210, 1) 0%,
 43 |         rgba(162, 60, 209, 1) 23%,
 44 |         rgba(118, 4, 190, 1) 58%,
 45 |         rgba(72, 26, 120, 1) 84%,
 46 |         rgba(29, 8, 62, 1) 100%
 47 |     );
 48 |     opacity: 0.8;
 49 | }
 50 | 
 51 | .container .liquid .bubble {
 52 |     width: calc(5 * var(--unit));
 53 |     height: calc(5 * var(--unit));
 54 |     background: transparent;
 55 |     border-radius: 50%;
 56 |     position: absolute;
 57 |     bottom: -5%;
 58 |     border: 1px solid white;
 59 | }
 60 | 
 61 | @keyframes wave {
 62 |     0%,
 63 |     100% {
 64 |         clip-path: polygon(
 65 |             0 13%,
 66 |             6% 9%,
 67 |             12% 8%,
 68 |             19% 8%,
 69 |             26% 10%,
 70 |             33% 15%,
 71 |             42% 22%,
 72 |             52% 30%,
 73 |             59% 33%,
 74 |             66% 35%,
 75 |             77% 35%,
 76 |             85% 33%,
 77 |             90% 32%,
 78 |             100% 28%,
 79 |             100% 100%,
 80 |             0% 100%
 81 |         );
 82 |     }
 83 |     50% {
 84 |         clip-path: polygon(
 85 |             0 33%,
 86 |             9% 34%,
 87 |             18% 34%,
 88 |             28% 32%,
 89 |             36% 28%,
 90 |             43% 23%,
 91 |             51% 18%,
 92 |             59% 13%,
 93 |             66% 10%,
 94 |             75% 7%,
 95 |             84% 6%,
 96 |             91% 7%,
 97 |             96% 10%,
 98 |             100% 14%,
 99 |             100% 100%,
100 |             0% 100%
101 |         );
102 |     }
103 | }
104 | 


--------------------------------------------------------------------------------
/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 | }
155 | 


--------------------------------------------------------------------------------
/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 | 


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