├── 3D Background
    ├── back.css
    ├── back.gif
    ├── back.html
    └── back.js
├── Age Calculator
    ├── age.css
    ├── age.html
    └── age.js
├── Amazon Nav Bar
    ├── Amazon.html
    ├── amazon.css
    └── amazon.png
├── Analog Clock
    ├── clock.css
    ├── clock.html
    └── clock.js
├── Aniamated Search Bar
    ├── search.css
    ├── search.html
    └── search.js
├── Animated Button
    ├── button.css
    ├── button.html
    └── button.js
├── Animated Clock
    ├── clock.css
    ├── clock.html
    └── clock.js
├── Animated Loading Bar
    ├── loadingbar.css
    └── loadingbar.html
├── Animated Loading
    ├── loading.css
    └── loading.html
├── Animated Menu Bar
    ├── menu.css
    ├── menu.html
    └── menu.js
├── Animated Navigation
    ├── nav.css
    ├── nav.html
    └── nav.js
├── Animated Switch
    ├── switch.css
    ├── switch.html
    └── switch.js
├── Button Hover Effect
    ├── button.css
    └── button.html
├── Cricket Over Calculator
    ├── cricket.css
    ├── cricket.html
    └── cricket.js
├── Debit Card
    ├── card.css
    └── card.html
├── Digital Calculator
    ├── calculator.html
    ├── calculator.js
    └── calulator.css
├── Digital Stopclock
    ├── clock.css
    ├── clock.html
    └── clock.js
├── Facebook Login Page
    ├── facebook.css
    ├── facebook.html
    └── facebook.js
├── Football Goal Calculator
    ├── football.css
    ├── football.html
    └── football.js
├── Form Validation
    ├── form.css
    ├── form.html
    └── form.js
├── Github Profile Finder
    ├── github.css
    ├── github.html
    └── github.js
├── Gmail Login Page
    ├── gmail.css
    └── gmail.html
├── Growing Cube
    ├── cube.css
    └── cube.html
├── Icon Hover Effect
    ├── icon.css
    └── icon.html
├── Instagram Login Page
    ├── instagram.css
    ├── instagram.html
    └── instagram.js
├── JavaScript Quiz
    ├── quiz.css
    ├── quiz.html
    └── quiz.js
├── Like Counter
    ├── like.css
    ├── like.html
    ├── like.jpg
    └── like.js
├── Login Form
    ├── login.css
    ├── login.html
    └── login.js
├── Login Page
    ├── login.css
    └── login.html
├── Love Calculator
    ├── love.css
    ├── love.html
    └── love.js
├── Navigation Bar
    ├── bar.css
    ├── bar.html
    └── bar.js
├── Netflix Login Page
    ├── netflix.css
    ├── netflix.html
    ├── netflix_bg.jpg
    └── netflix_logo.svg
├── Otp Verification
    ├── opt.css
    ├── opt.js
    └── otp.html
├── Password Generator
    ├── password.css
    ├── password.html
    └── password.js
├── Php Quiz
    ├── php.css
    ├── php.html
    └── php.js
├── Product Card
    ├── ReadMe.txt
    ├── card.css
    ├── card.html
    ├── card.jfif
    └── card.js
├── Profile Card
    ├── ReadMe.txt
    ├── profile.css
    ├── profile.html
    ├── profile.js
    └── profile.png
├── ReadMe.txt
├── Sound Effect
    ├── sound.css
    ├── sound.html
    ├── sound.js
    ├── sound1.wav
    ├── sound2.wav
    ├── sound3.wav
    ├── sound4.wav
    ├── sound5.wav
    └── sound6.wav
├── Spotify Login Page
    ├── spotify.css
    ├── spotify.html
    └── spotify.js
├── Step Counter
    ├── step.css
    ├── step.html
    └── step.js
├── Toast Notification
    ├── message.css
    ├── message.html
    └── message.js
└── Weather App
    ├── weather.css
    ├── weather.html
    ├── weather.jpg
    └── weather.js


/3D Background/back.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 3 | 
 4 | * {
 5 |   box-sizing: border-box;
 6 | }
 7 | 
 8 | body {
 9 |   background-color: #000;
10 |   font-family: 'Roboto', sans-serif;
11 |   display: flex;
12 |   flex-direction: column;
13 |   align-items: center;
14 |   justify-content: center;
15 |   height: 100vh;
16 |   overflow: hidden;
17 | }
18 | 
19 | .magic {
20 |   background-color: #ff4757; 
21 |   color: #fff;
22 |   font-family: 'Poppins', sans-serif;
23 |   border: 0;
24 |   border-radius: 5px; 
25 |   font-size: 18px; 
26 |   padding: 14px 24px; 
27 |   cursor: pointer;
28 |   position: fixed;
29 |   top: 20px;
30 |   letter-spacing: 1.5px; 
31 |   box-shadow: 0 4px rgba(255, 71, 87, 0.6); 
32 |   z-index: 100;
33 |   transition: background-color 0.3s ease; 
34 | }
35 | 
36 | .magic:hover {
37 |   background-color: #e84118; 
38 | }
39 | 
40 | .magic:focus {
41 |   outline: none;
42 | }
43 | 
44 | .magic:active {
45 |   box-shadow: none;
46 |   transform: translateY(2px);
47 | }
48 | 
49 | .boxes {
50 |   display: flex;
51 |   flex-wrap: wrap;
52 |   justify-content: space-around;
53 |   height: 500px;
54 |   width: 500px;
55 |   position: relative;
56 |   transition: 0.4s ease;
57 | }
58 | 
59 | .boxes.big {
60 |   width: 600px;
61 |   height: 600px;
62 | }
63 | 
64 | .boxes.big .box {
65 |   transform: rotateZ(360deg);
66 | }
67 | 
68 | .box {
69 |   background-image: url('back.gif');
70 |   background-repeat: no-repeat;
71 |   background-size: 500px 500px;
72 |   position: relative;
73 |   height: 125px;
74 |   width: 125px;
75 |   transition: 0.4s ease;
76 | }
77 | 
78 | .box::after {
79 |   content: '';
80 |   background-color: #f6e58d;
81 |   position: absolute;
82 |   top: 8px;
83 |   right: -15px;
84 |   height: 100%;
85 |   width: 15px;
86 |   transform: skewY(45deg);
87 | }
88 | 
89 | .box::before {
90 |   content: '';
91 |   background-color: #f9ca24;
92 |   position: absolute;
93 |   bottom: -15px;
94 |   left: 8px;
95 |   height: 15px;
96 |   width: 100%;
97 |   transform: skewX(45deg);
98 | }
99 | 


--------------------------------------------------------------------------------
/3D Background/back.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/3D Background/back.gif


--------------------------------------------------------------------------------
/3D Background/back.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
 7 |       rel="stylesheet"
 8 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
 9 |       integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
10 |       crossorigin="anonymous"/>
11 |     <link rel="stylesheet" href="back.css" />
12 |     <title>3D Background</title>
13 |   </head>
14 |   <body>
15 |     <button id="btn" class="magic">Change 🎩</button>
16 |     <div id="boxes" class="boxes big"></div>
17 |     <script src="back.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/3D Background/back.js:
--------------------------------------------------------------------------------
 1 | const boxesContainer = document.getElementById('boxes')
 2 | const btn = document.getElementById('btn')
 3 | 
 4 | btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))
 5 | 
 6 | function createBoxes() {
 7 |   for (let i = 0; i < 4; i++) {
 8 |     for (let j = 0; j < 4; j++) {
 9 |       const box = document.createElement('div')
10 |       box.classList.add('box')
11 |       box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
12 |       boxesContainer.appendChild(box)
13 |     }
14 |   }
15 | }
16 | 
17 | createBoxes()
18 | 


--------------------------------------------------------------------------------
/Age Calculator/age.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     background-color: #000000;
 4 |     color: #333;
 5 |     display: flex;
 6 |     justify-content: center;
 7 |     align-items: center;
 8 |     height: 100vh;
 9 |     margin: 0;
10 | }
11 | 
12 | .container {
13 |     background-color: #fff;
14 |     padding: 20px;
15 |     border-radius: 8px;
16 |     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
17 |     text-align: center;
18 | }
19 | 
20 | #currDate {
21 |     font-size: 18px;
22 |     margin-bottom: 10px;
23 | }
24 | 
25 | input[type="text"] {
26 |     padding: 10px;
27 |     width: 200px;
28 |     border: 1px solid #ccc;
29 |     border-radius: 4px;
30 |     margin-bottom: 10px;
31 |     font-size: 16px;
32 | }
33 | 
34 | button {
35 |     padding: 10px 20px;
36 |     background-color: #007bff;
37 |     color: #fff;
38 |     border: none;
39 |     border-radius: 4px;
40 |     font-size: 16px;
41 |     cursor: pointer;
42 |     transition: background-color 0.3s;
43 | }
44 | 
45 | button:hover {
46 |     background-color: #0056b3;
47 | }
48 | 
49 | #displayAge {
50 |     margin-top: 20px;
51 |     font-size: 24px;
52 |     font-weight: bold;
53 | }
54 | 


--------------------------------------------------------------------------------
/Age Calculator/age.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="age.css">
 8 |     <title>Age Calculator</title>
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <p id="currDate"> </p>
13 |         <p>Enter the DOB in format : (MM/DD/YYYY)</p>
14 |         <input type="text" placeholder="Enter your D.O.B" id="DOB">
15 |         <button id="CalcAge">Age</button>
16 |     </div>
17 |   <div id="displayAge">
18 |       <p id="age"></p>
19 |   </div>
20 |     <script src="age.js">
21 |     </script>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Age Calculator/age.js:
--------------------------------------------------------------------------------
 1 | let currDate= document.getElementById("currDate");
 2 | let dateOfBirth = document.querySelector("#DOB");
 3 | const CalcAge= document.getElementById("CalcAge");
 4 | const displayAge= document.getElementById("displayAge");
 5 | const Age= document.getElementById("age");
 6 | var today = new Date();
 7 | currDate.innerText=`Today's Date is : ${today.toLocaleDateString('en-US')}`;
 8 | 
 9 | CalcAge.addEventListener("click",()=>{
10 |     var birthDate = new Date(dateOfBirth.value);
11 |     var age = today.getFullYear() - birthDate.getFullYear();
12 |     var m = today.getMonth() - birthDate.getMonth();
13 |     if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
14 |         age = age - 1;
15 |     }
16 | displayAge.style.visibility="visible";
17 | Age.innerText=`You are ${age} years old.`
18 | });
19 | 


--------------------------------------------------------------------------------
/Amazon Nav Bar/Amazon.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content=
 7 | "width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="amazon.css">
 9 |     <link rel="stylesheet" href=
10 | "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity=
11 | "sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
12 |         crossorigin="anonymous" referrerpolicy="no-referrer" />
13 |     <title>Amazon Clone</title>
14 | </head>
15 | 
16 | <body>
17 |     <header>
18 |         <nav>
19 |             <div class="nav-left">
20 |                 <div class="nav-logo">
21 |                     <image src="amazon.png"></image>                
22 |                 </div>
23 |                 <div class="location">
24 |                     <p class="top-text">Deliver to</p>
25 |                     <div class="location-icon">
26 |                         <i class="fa-solid fa-location-dot"></i>
27 |                         <p class="bottom-text">India</p>
28 |                     </div>
29 |                 </div>
30 |             </div>
31 | 
32 |             <div class="nav-center">
33 |                 <select class="search-dropdown">
34 |                     <option>All</option>
35 |                     <option>All Departments</option>
36 |                     <option>Arts & Crafts</option>
37 |                 </select>
38 |                 <input type="text" placeholder="Search Amazon" 
39 |                     class="search-box">
40 |                 <div class="search-icon">
41 |                     <i class="fa-solid fa-magnifying-glass" 
42 |                         style="color: #28416c;">
43 |                     </i>
44 |                 </div>
45 |             </div>
46 | 
47 |             <div class="nav-right">
48 |                 <div class="language-option">
49 |                     <div class="flag">
50 |                         <i class="fa-regular fa-flag"></i>
51 |                     </div>
52 |                     <select class="select-language">
53 |                         <option value="lan">EN</option>
54 |                         <option value="lan">ES</option>
55 |                         <option value="lan">AR</option>
56 |                     </select>
57 |                 </div>
58 | 
59 |                 <div class="account-option">
60 |                     <p class="top-text">
61 |                         Hello, sign in
62 |                     </p>
63 |                     <select class="select-account">
64 |                         <option value="Account">
65 |                             Account & Lists
66 |                         </option>
67 |                         <option value="Account">
68 |                             Account & Lists
69 |                         </option>
70 |                         <option value="Account">
71 |                             Account & Lists
72 |                         </option>
73 |                     </select>
74 |                 </div>
75 | 
76 |                 <div class="order-option">
77 |                     <p class="top-text">
78 |                         Returns
79 |                     </p>
80 |                     <p class="bottom-text">
81 |                         & Orders
82 |                     </p>
83 |                 </div>
84 | 
85 |                 <div class="cart-option">
86 |                     <div class="cart-logo">
87 |                         <i class="fa-solid fa-cart-shopping"></i>
88 |                     </div>
89 |                     Cart
90 |                 </div>
91 |             </div>
92 |         </nav>
93 |     </header>
94 | 


--------------------------------------------------------------------------------
/Amazon Nav Bar/amazon.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | html, body {
  8 |     height: 100%;
  9 | }
 10 | 
 11 | body {
 12 |     display: flex;
 13 |     justify-content: center;
 14 |     align-items: center;
 15 |     font-family: Arial;
 16 |     background-color: #f0f0f0;
 17 | }
 18 | nav {
 19 |     width: 100%; 
 20 |     max-width: 1200px; 
 21 |     height: 60px;
 22 |     display: flex;
 23 |     align-items: center;
 24 |     background-color: #0f1111;
 25 |     color: white;
 26 | }
 27 | 
 28 | .nav-left {
 29 |     display: flex;
 30 |     align-items: center;
 31 |     justify-content: center;
 32 |     margin-left: .5rem;
 33 | }
 34 | 
 35 | .nav-logo img {
 36 |     width: 100px;
 37 |     padding: .5rem;
 38 | }
 39 | 
 40 | .nav-logo:hover {
 41 |     outline: 1px solid white;
 42 | }
 43 | 
 44 | .location {
 45 |     height: 100%;
 46 |     font-size: .7rem;
 47 |     padding: .5rem 1rem;
 48 | }
 49 | 
 50 | .location:hover {
 51 |     outline: 1px solid white;
 52 | }
 53 | 
 54 | .location-icon {
 55 |     display: flex;
 56 |     align-items: center;
 57 | }
 58 | 
 59 | .nav-center {
 60 |     height: 40px;
 61 |     display: flex;
 62 |     flex-grow: 1;
 63 |     border-radius: 5px;
 64 |     margin-left: 1rem;
 65 | }
 66 | 
 67 | .nav-center:hover {
 68 |     outline: 2px solid rgb(232, 176, 73);
 69 | }
 70 | 
 71 | .search-dropdown {
 72 |     width: 5rem;
 73 |     font-size: 1rem;
 74 |     background-color: rgb(210, 208, 208);
 75 |     padding: .5rem;
 76 |     border-radius: 5px 0 0 5px;
 77 |     outline: none;
 78 | }
 79 | 
 80 | .search-dropdown:focus {
 81 |     outline: none;
 82 | }
 83 | 
 84 | .search-box {
 85 |     font-size: 1rem;
 86 |     flex-grow: 1;
 87 |     padding: .5rem;
 88 | }
 89 | 
 90 | .search-box:focus {
 91 |     outline: none;
 92 | }
 93 | 
 94 | .search-icon i {
 95 |     height: 100%;
 96 |     background-color: rgba(255, 203, 105, 0.849);
 97 |     border-radius: 0 5px 5px 0;
 98 |     padding: .7rem .5rem;
 99 |     outline: none;
100 | }
101 | 
102 | .nav-right {
103 |     display: flex;
104 |     align-items: center;
105 |     margin: 0 1rem;
106 | }
107 | 
108 | .language-option {
109 |     display: flex;
110 |     padding: .5rem .5rem;
111 | }
112 | 
113 | .language-option:hover {
114 |     outline: 1px solid white;
115 | }
116 | 
117 | .flag {
118 |     width: 20px;
119 | }
120 | 
121 | .select-language {
122 |     font-size: .7rem;
123 |     font-weight: bold;
124 |     color: white;
125 |     background: transparent;
126 |     border: none;
127 | }
128 | 
129 | .select-language option {
130 |     color: black;
131 | }
132 | 
133 | .account-option {
134 |     padding: .5rem .5rem;
135 | }
136 | 
137 | .account-option:hover {
138 |     outline: 1px solid white;
139 | }
140 | 
141 | .account-option .top-text {
142 |     font-size: .5rem;
143 |     margin-left: 5px;
144 | }
145 | 
146 | .select-account {
147 |     font-size: .7rem;
148 |     font-weight: bold;
149 |     background: transparent;
150 |     color: white;
151 |     border: none;
152 | }
153 | 
154 | .order-option {
155 |     padding: .5rem .5rem;
156 | }
157 | 
158 | .order-option:hover {
159 |     outline: 1px solid white;
160 | }
161 | 
162 | .order-option .top-text {
163 |     font-size: .5rem;
164 | }
165 | 
166 | .order-option .bottom-text {
167 |     font-size: .7rem;
168 |     font-weight: bold;
169 | }
170 | 
171 | .cart-option {
172 |     display: flex;
173 |     align-items: center;
174 |     font-size: 0.8rem;
175 |     font-weight: 700;
176 |     padding: .5rem .5rem;
177 | }
178 | 
179 | .cart-option:hover {
180 |     outline: 1px solid white;
181 | }
182 | 
183 | .cart-logo i {
184 |     width: 20px;
185 | }
186 | 
187 | .nav-options {
188 |     height: 42px;
189 |     display: flex;
190 |     align-items: center;
191 |     background-color: #222f3d;
192 |     color: white;
193 |     justify-content: start;
194 | }
195 | 
196 | .nav-options * {
197 |     cursor: pointer;
198 | }
199 | 
200 | .all-logo {
201 |     display: flex;
202 |     align-items: center;
203 |     gap: .3rem;
204 |     padding: .5rem;
205 |     margin-left: 2rem;
206 | }
207 | 
208 | .all-logo:hover {
209 |     outline: 1px solid white;
210 | }
211 | 
212 | .nav-options .options {
213 |     display: flex;
214 | }
215 | 
216 | .nav-options .options p {
217 |     padding: 0.5rem;
218 | }
219 | 
220 | .nav-options .options p:hover {
221 |     outline: 1px solid white;
222 | }
223 | 


--------------------------------------------------------------------------------
/Amazon Nav Bar/amazon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Amazon Nav Bar/amazon.png


--------------------------------------------------------------------------------
/Analog Clock/clock.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |     font-family: sans-serif;
 6 |     color: #ffffff;
 7 |   }
 8 |   
 9 |   body {
10 |     display: flex;
11 |     justify-content: center;
12 |     align-items: center;
13 |     min-height: 100vh;
14 |     background-color: #000000;
15 |   }
16 |   
17 |   .container {
18 |     position: absolute;
19 |     top: 50%;
20 |     left: 50%;
21 |     transform: translate(-50%, -50%);
22 |   }
23 |   
24 |   .clock {
25 |     width: 300px;
26 |     height: 300px;
27 |     border-radius: 50%;
28 |     background-color: rgba(48, 197, 202, 0.1);
29 |     border: 2px solid rgba(67, 231, 182, 0.25);
30 |     display: flex;
31 |     justify-content: center;
32 |     align-items: center;
33 |     color: white;
34 |     box-shadow: 5px 5px 50px 50px rgba(252, 5, 5, 0.699);
35 |     animation: animateBg 5s linear infinite;
36 |   }
37 |   
38 |   .clock span {
39 |     position: absolute;
40 |     transform: rotate(calc(30deg * var(--i)));
41 |     inset: 12px;
42 |     text-align: center;
43 |   }
44 |   
45 |   .clock span b {
46 |     transform: rotate(calc(-30deg * var(--i)));
47 |     display: inline-block;
48 |     font-size: 20px;
49 |   }
50 |   
51 |   .clock::before {
52 |     content: '';
53 |     position: absolute;
54 |     width: 8px;
55 |     height: 8px;
56 |     border-radius: 50%;
57 |     background-color: #00ffaa;
58 |     z-index: 2;
59 |   }
60 |   
61 |   .hand {
62 |     position: absolute;
63 |     display: flex;
64 |     justify-content: center;
65 |     align-items: flex-end;
66 |   }
67 |   
68 |   .hand i {
69 |     position: absolute;
70 |     background-color: var(--clr);
71 |     width: 4px;
72 |     height: var(--h);
73 |     border-radius: 8px;
74 |   }
75 |   


--------------------------------------------------------------------------------
/Analog Clock/clock.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="clock.css" />
 8 |     <title>Clock</title>
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div class="clock">
13 |         <div style="--clr: rgb(255, 7, 40); --h: 74px" id="hour" class="hand"> <i></i>
14 |         </div>
15 |         <div style="--clr: #15ff00; --h: 84px" id="min" class="hand"> <i></i>
16 |         </div>
17 |         <div style="--clr: #ffffff; --h: 94px" id="sec" class="hand">  <i></i>
18 |         </div>
19 |         <span style="--i: 1"><b>1</b></span>
20 |         <span style="--i: 2"><b>2</b></span>
21 |         <span style="--i: 3"><b>3</b></span>
22 |         <span style="--i: 4"><b>4</b></span>
23 |         <span style="--i: 5"><b>5</b></span>
24 |         <span style="--i: 6"><b>6</b></span>
25 |         <span style="--i: 7"><b>7</b></span>
26 |         <span style="--i: 8"><b>8</b></span>
27 |         <span style="--i: 9"><b>9</b></span>
28 |         <span style="--i: 10"><b>10</b></span>
29 |         <span style="--i: 11"><b>11</b></span>
30 |         <span style="--i: 12"><b>12</b></span>
31 |       </div>
32 |     </div>
33 |     <script src="clock.js"></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Analog Clock/clock.js:
--------------------------------------------------------------------------------
 1 | let hr = document.getElementById('hour');
 2 | let min = document.getElementById('min');
 3 | let sec = document.getElementById('sec');
 4 | 
 5 | function displayTime(){
 6 |     let date = new Date();
 7 | 
 8 |     let hh = date.getHours();
 9 |     let mm = date.getMinutes();
10 |     let ss = date.getSeconds();
11 | 
12 |     let hRotation = 30*hh + mm/2;
13 |     let mRotation = 6*mm;
14 |     let sRotation = 6*ss;
15 | 
16 |     hr.style.transform = `rotate(${hRotation}deg)`;
17 |     min.style.transform = `rotate(${mRotation}deg)`;
18 |     sec.style.transform = `rotate(${sRotation}deg)`;
19 | 
20 | }
21 | setInterval(displayTime, 1000);


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


--------------------------------------------------------------------------------
/Aniamated Search Bar/search.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>Search Bar</title>
 7 |   <link rel="stylesheet" href="search.css">
 8 | </head>
 9 | <body>
10 |   <div class="container-input">
11 |     <input type="text" placeholder="Search" name="text" class="input">
12 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" 
13 |       height="22" color="#000000" fill="none">
14 |       <path d="M17.5 17.5L22 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" 
15 |       stroke-linejoin="round" />
16 |       <path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 
17 |       g6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" 
18 |       stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
19 |   </svg>
20 |   </div>
21 |   <script src="search.js"></script>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Aniamated Search Bar/search.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function() {
 2 |     const input = document.querySelector('.input');
 3 |     const svg = document.querySelector('svg');
 4 |   
 5 |     function handleSearch() {
 6 |       const searchText = input.value.trim();
 7 |       console.log("Search Text:", searchText);
 8 |     }
 9 |   
10 |     input.addEventListener('input', handleSearch);
11 |   
12 |     svg.addEventListener('click', handleSearch);
13 |   });
14 |   
15 | 


--------------------------------------------------------------------------------
/Animated Button/button.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     justify-content: center;
 4 |     align-items: center;
 5 |     min-height: 90vh;
 6 |     background-color: #000000;
 7 |   background-image: url(image.png);
 8 |   }
 9 |   
10 |   button {
11 |     cursor: pointer;
12 |     background: transparent;
13 |     position: relative;
14 |     display: inline-block;
15 |     padding: 15px 30px;
16 |     outline: none;
17 |     border: 2px solid #ff0000;
18 |     margin: 40px;
19 |     width: 150px;
20 |     height: 60px;
21 |     text-transform: uppercase;
22 |     font-weight: 900;
23 |     text-decoration: none;
24 |     letter-spacing: 2px;
25 |     color: #fff;
26 |     -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
27 |     transition: 0.45s;
28 |     transition-delay: 0s;
29 |   }
30 |   
31 |   button:hover {
32 |     transition-delay: 1.5s;
33 |     color: #000;
34 |     box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 80px #ff0000,
35 |       0 0 100px #ff0000;
36 |   }
37 |   
38 |   button span {
39 |     position: relative;
40 |     z-index: 100;
41 |   }
42 |   
43 |   button::before {
44 |     content: "";
45 |     position: absolute;
46 |     left: -20px;
47 |     top: 50%;
48 |     transform: translateY(-50%);
49 |     width: 20px;
50 |     height: 2px;
51 |     background: #ff0000;
52 |     box-shadow: 5px -8px 0 #ff0000, 5px 8px 0 #ff0000;
53 |     transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
54 |     transition-delay: 1s, 0.5s, 0s, 0s;
55 |   }
56 |   
57 |   button:hover::before {
58 |     width: 60%;
59 |     height: 100%;
60 |     left: -2px;
61 |     box-shadow: 5px 0 0 #ff0000, 5px 0 0 #ff0000;
62 |     transition-delay: 0s, 0.5s, 1s, 1s;
63 |   }
64 |   
65 |   button::after {
66 |     content: "";
67 |     position: absolute;
68 |     right: -20px;
69 |     top: 50%;
70 |     transform: translateY(-50%);
71 |     width: 20px;
72 |     height: 2px;
73 |     background: #ff0000; 
74 |     box-shadow: -5px -8px 0 #ff0000, -5px 8px 0 #ff0000;
75 |     transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s;
76 |     transition-delay: 1s, 0.5s, 0s, 0s;
77 |   }
78 |   
79 |   button:hover::after {
80 |     width: 60%;
81 |     height: 102%;
82 |     right: -2px;
83 |     box-shadow: -5px 0 0 #ff0000, -5px 0 0 #ff0000;
84 |     transition-delay: 0s, 0.5s, 1s, 1s;
85 |   }
86 |   


--------------------------------------------------------------------------------
/Animated Button/button.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</title>
 7 |     <link rel="stylesheet" href="button.css" />
 8 |   </head>
 9 |   <body>
10 |     <button><span>Click</span></button>
11 |     <script src="button.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/Animated Button/button.js:
--------------------------------------------------------------------------------
 1 | const button = document.querySelector('button');
 2 | 
 3 | button.addEventListener('mouseover', function() {
 4 |   button.classList.add('hovered');
 5 | });
 6 | 
 7 | button.addEventListener('mouseout', function() {
 8 |   button.classList.remove('hovered');
 9 | });
10 | 


--------------------------------------------------------------------------------
/Animated Clock/clock.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   justify-content: center;
 5 |   align-items: center;
 6 |   height: 100vh;
 7 |   margin: 0;
 8 |   background-color: #000; 
 9 |   color: #fff;
10 |   font-family: 'Arial', sans-serif;
11 |   transition: background-color 0.5s, color 0.5s;
12 | }
13 | 
14 | .toggle {
15 |   position: absolute;
16 |   top: 20px;
17 |   right: 20px;
18 |   background-color: #444;
19 |   color: #fff;
20 |   border: 2px solid #fff;
21 |   padding: 8px 16px;
22 |   border-radius: 25px;
23 |   cursor: pointer;
24 |   transition: background-color 0.3s, color 0.3s, transform 0.2s;
25 | }
26 | 
27 | .toggle:hover {
28 |   background-color: #666;
29 |   transform: scale(1.1);
30 | }
31 | 
32 | .clock-container {
33 |   display: flex;
34 |   flex-direction: column;
35 |   align-items: center;
36 | }
37 | 
38 | .clock {
39 |   position: relative;
40 |   width: 220px;
41 |   height: 220px;
42 |   border: 8px solid #fff;
43 |   border-radius: 50%;
44 |   display: flex;
45 |   justify-content: center;
46 |   align-items: center;
47 |   background-color: #000; 
48 |   transition: border-color 0.5s, background-color 0.5s;
49 |   box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
50 | }
51 | 
52 | .needle {
53 |   position: absolute;
54 |   width: 50%;
55 |   height: 2px;
56 |   background-color: #fff;
57 |   transform-origin: 100%;
58 |   transition: background-color 0.5s;
59 | }
60 | 
61 | .hour {
62 |   height: 6px;
63 |   width: 35%;
64 | }
65 | 
66 | .minute {
67 |   height: 4px;
68 |   width: 55%;
69 | }
70 | 
71 | .second {
72 |   height: 2px;
73 |   width: 65%;
74 |   background-color: #e74c3c; 
75 | }
76 | 
77 | .center-point {
78 |   position: absolute;
79 |   width: 12px;
80 |   height: 12px;
81 |   background-color: #fff;
82 |   border-radius: 50%;
83 |   transition: background-color 0.5s;
84 | }
85 | 
86 | .time,
87 | .date {
88 |   margin-top: 20px;
89 |   font-size: 1.5rem;
90 |   color: #fff; 
91 |   transition: color 0.5s;
92 | }
93 | 


--------------------------------------------------------------------------------
/Animated Clock/clock.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="clock.css" />
 7 |     <title>Animated Clock</title>
 8 |   </head>
 9 |   <body>
10 | 
11 |     <button class="toggle">Dark mode</button>
12 | 
13 |     <div class="clock-container">
14 |       <div class="clock">
15 |         <div class="needle hour"></div>
16 |         <div class="needle minute"></div>
17 |         <div class="needle second"></div>
18 |         <div class="center-point"></div>
19 |       </div>
20 | 
21 |       <div class="time"></div>
22 |       <div class="date"></div>
23 |     </div>
24 | 
25 |     <script src="clock.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Animated Clock/clock.js:
--------------------------------------------------------------------------------
 1 | const hourEl = document.querySelector('.hour')
 2 | const minuteEl = document.querySelector('.minute')
 3 | const secondEl = document.querySelector('.second')
 4 | const timeEl = document.querySelector('.time')
 5 | const dateEl = document.querySelector('.date')
 6 | const toggle = document.querySelector('.toggle')
 7 | 
 8 | const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 9 | const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
10 | 
11 | toggle.addEventListener('click', (e) => {
12 |     const html = document.querySelector('html')
13 |     if (html.classList.contains('dark')) {
14 |         html.classList.remove('dark')
15 |         e.target.innerHTML = 'Dark mode'
16 |     } else {
17 |         html.classList.add('dark')
18 |         e.target.innerHTML = 'Light mode'
19 |     }
20 | })
21 | 
22 | function setTime() {
23 |     const time = new Date();
24 |     const month = time.getMonth()
25 |     const day = time.getDay()
26 |     const date = time.getDate()
27 |     const hours = time.getHours()
28 |     const hoursForClock = hours >= 13 ? hours % 12 : hours;
29 |     const minutes = time.getMinutes()
30 |     const seconds = time.getSeconds()
31 |     const ampm = hours >= 12 ? 'PM' : 'AM'
32 | 
33 |     hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`
34 |     minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`
35 |     secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`
36 | 
37 |     timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
38 |     dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`
39 | }
40 | 
41 | const scale = (num, in_min, in_max, out_min, out_max) => {
42 |     return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
43 | }
44 | 
45 | setTime()
46 | 
47 | setInterval(setTime, 1000)
48 | 


--------------------------------------------------------------------------------
/Animated Loading Bar/loadingbar.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     justify-content: center;
 4 |     align-items: center;
 5 |     height: 100vh;
 6 |     background-color: #000000;
 7 |   }
 8 |   
 9 |   .loading-wrapper {
10 |     text-align: center;
11 |   }
12 |   
13 |   .loading-text {
14 |     margin-bottom: 10px;
15 |     color: #ffffff;
16 |     font-size: 20px;
17 |     font-weight: bold;
18 |     justify-content: top;
19 |   }
20 |   
21 |   .loading-bar {
22 |     width: 300px;
23 |     height: 29px;
24 |     background: linear-gradient(to right, #f53d3d, #ffcf44, #46e29d);
25 |     position: relative;
26 |     border-radius: 5px;
27 |     border: #f53d3d;
28 |   }
29 |   
30 |   .loading-bar::before {
31 |     content: "";
32 |     position: absolute;
33 |     top: 0;
34 |     left: 0;
35 |     height: 100%;
36 |     width: 0%;
37 |     background-color: rgba(255, 255, 255, 0.3);
38 |     border-radius: 5px;
39 |     animation: loading 3s infinite alternate-reverse;
40 |   }
41 |   
42 |   @keyframes loading {
43 |     0% {
44 |       width: 0%;
45 |     }
46 |     50% {
47 |       width: 50%;
48 |     }
49 |     100% {
50 |       width: 100%;
51 |     }
52 |   }
53 |   


--------------------------------------------------------------------------------
/Animated Loading Bar/loadingbar.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 Bar</title>
 7 |   <link rel="stylesheet" href="loadingbar.css">
 8 | </head>
 9 | <body>
10 |   <div class="loading-wrapper">
11 |     <div class="loading-text">Loading...</div>
12 |     <div class="loading-bar"></div>
13 |   </div>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Animated Loading/loading.css:
--------------------------------------------------------------------------------
  1 | body { 
  2 |   display: flex; 
  3 |   justify-content: center; 
  4 |   align-items: center; 
  5 |   min-height: 90vh; 
  6 |   background-color: #000000; 
  7 | } 
  8 | 
  9 | .container { 
 10 |   position: relative; 
 11 |   width: 100%; 
 12 |   display: flex; 
 13 |   justify-content: center; 
 14 |   align-items: center; 
 15 | } 
 16 | 
 17 | .container .loading { 
 18 |   position: absolute; 
 19 |   width: 200px; 
 20 |   height: 200px; 
 21 | } 
 22 | 
 23 | .container .loading:nth-child(2) { 
 24 |   transform: translate(-25%, -25%) rotateX(180deg); 
 25 |   filter: hue-rotate(60deg); 
 26 | } 
 27 | 
 28 | .container .loading:nth-child(3) { 
 29 |   transform: translate(25%, 25%) rotate(180deg); 
 30 |   filter: hue-rotate(180deg); 
 31 | } 
 32 | 
 33 | .container .loading::before { 
 34 |   content: ''; 
 35 |   position: absolute; 
 36 |   width: 20px; 
 37 |   height: 20px; 
 38 |   background: #0f0; 
 39 |   box-shadow: 0 0 0 8px #0f03, 0 0 0 15px #0f01; 
 40 |   animation: animateloading 4s linear infinite; 
 41 | } 
 42 | 
 43 | .container .loading span { 
 44 |   position: absolute; 
 45 |   inset: 10px; 
 46 |   overflow: hidden; 
 47 |   transform: rotate(calc(90deg * var(--i))); 
 48 | } 
 49 | 
 50 | .container .loading span::before { 
 51 |   content: ''; 
 52 |   position: absolute; 
 53 |   width: 100%; 
 54 |   height: 4px; 
 55 |   background: #0f0; 
 56 |   transform: translateX(-100%); 
 57 |   animation: animate 4s linear infinite; 
 58 |   animation-delay: calc(1s * var(--i)); 
 59 | } 
 60 | 
 61 | .container .circle {
 62 |   .container .circle {
 63 |     position: absolute;
 64 |     width: 100px;
 65 |     height: 100px;
 66 |     border-radius: 50%;
 67 |     background-color: rgba(255, 255, 255, 0.5);
 68 |     animation: animateCircle 5s linear infinite alternate;
 69 |   }
 70 | }
 71 | 
 72 | @keyframes animateCircle {
 73 |   0% {
 74 |     transform: scale(1);
 75 |   }
 76 |   100% {
 77 |     transform: scale(1.2);
 78 |   }
 79 | }
 80 | 
 81 | @keyframes animateloading { 
 82 |   0% { 
 83 |     transform: translate(2px,2px); 
 84 |   } 
 85 | 
 86 |   25% { 
 87 |     transform: translate(178px,2px); 
 88 |   } 
 89 | 
 90 |   50% { 
 91 |     transform: translate(178px,178px); 
 92 |   } 
 93 | 
 94 |   75% { 
 95 |     transform: translate(2px,178px); 
 96 |   } 
 97 | 
 98 |   100% { 
 99 |     transform: translate(2px,2px); 
100 |   } 
101 | } 
102 | 
103 | @keyframes animate { 
104 |   0% { 
105 |     transform: translateX(-100%); 
106 |   } 
107 | 
108 |   50%,100% { 
109 |     transform: translateX(100%); 
110 |   } 
111 | }
112 | 


--------------------------------------------------------------------------------
/Animated Loading/loading.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</title> 
 7 |     <link rel="stylesheet" href="loading.css" /> 
 8 |   </head> 
 9 |   <body> 
10 |     <div class="container"> 
11 |       <span style="--i: 0"></span> 
12 |       <div class="loading"> 
13 |         <span style="--i: 2"></span> 
14 |         <span style="--i: 1"></span> 
15 |         <span style="--i: 3"></span> 
16 |       </div> 
17 |       <div class="loading"> 
18 |         <span style="--i: 0"></span> 
19 |         <span style="--i: 1"></span> 
20 |         <span style="--i: 2"></span> 
21 |         <span style="--i: 3"></span> 
22 |       </div> 
23 |       <div class="loading"> 
24 |         <span style="--i: 0"></span> 
25 |         <span style="--i: 1"></span> 
26 |         <span style="--i: 2"></span> 
27 |         <span style="--i: 3"></span> 
28 |       </div> 
29 |     </div> 
30 |   </body> 
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Animated Menu Bar/menu.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |   }
 5 |   body {
 6 |     display: flex;
 7 |     align-items: center;
 8 |     justify-content: center;
 9 |     height: 100vh;
10 |     background: #000000;
11 |   }
12 |   .menu {
13 |     position: relative;
14 |     width: 260px;
15 |     height: 260px;
16 |     display: flex;
17 |     align-items: center;
18 |     justify-content: center;
19 |   }
20 |   .menu li {
21 |     position: absolute;
22 |     left: 0;
23 |     list-style: none;
24 |     transform: rotate(0deg) translateX(100px);
25 |     transform-origin: 130px;
26 |     transition: 0.5s;
27 |     transition-delay: calc(0.1s * var(--i));
28 |   }
29 |   .menu.active li {
30 |     transform: rotate(calc(360deg / 8 * var(--i)));
31 |   }
32 |   .menu a {
33 |     display: flex;
34 |     align-items: center;
35 |     justify-content: center;
36 |     width: 60px;
37 |     height: 60px;
38 |     text-decoration: none;
39 |     font-size: 22px;
40 |     border-radius: 50%;
41 |     transform: rotate(calc(360deg / -8 * var(--i)));
42 |     transition: 1s;
43 |     color: transparent;
44 |     transition-delay: 0.5s;
45 |     filter: drop-shadow(0 0 2px var(--clr));
46 |   }
47 |   .menu.active a {
48 |     color: var(--clr);
49 |   }
50 |   .menu a::before {
51 |     content: "";
52 |     position: absolute;
53 |     width: 20px;
54 |     height: 2px;
55 |     border-radius: 2px;
56 |     background: var(--clr);
57 |     transform: rotate(calc(90deg * var(--i))) translate(0, 25px);
58 |     transition: width 0.5s, height 0.5s, transform 0.5s;
59 |     transition-delay: 0.5s, 1s, 1.5s;
60 |   }
61 |   .menu.active a::before {
62 |     width: 50px;
63 |     height: 50px;
64 |     background: #161616;
65 |     border: 2px solid var(--clr);
66 |     transform: rotate(calc(0 * var(--i)));
67 |     transition: transform 0.5s, height 0.5s, width 0.5s;
68 |     transition-delay: 0.5s, 1.5s, 1.5s;
69 |     border-radius: 10px;
70 |     filter: drop-shadow(0 0 5px var(--clr));
71 |     rotate: 135deg;
72 |   }
73 |   .menu.active li:hover a::before {
74 |     background: var(--clr);
75 |   }
76 |   .menu.active li:hover a ion-icon {
77 |     color: #161616;
78 |   }
79 |   
80 |   .menuToggle {
81 |     position: absolute;
82 |     width: 60px;
83 |     height: 60px;
84 |     color: #fff;
85 |     display: flex;
86 |     align-items: center;
87 |     justify-content: center;
88 |     z-index: 100;
89 |     border-radius: 50%;
90 |     cursor: pointer;
91 |     font-size: 32px;
92 |     transition: 1.5s;
93 |   }
94 |   .menu.active .menuToggle {
95 |     transform: rotate(315deg);
96 |   }
97 | 


--------------------------------------------------------------------------------
/Animated Menu Bar/menu.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</title>
 7 |     <link rel="stylesheet" href="menu.css">
 8 |   </head>
 9 |   <body> 
10 |     <ul class="menu">
11 |       <div class="menuToggle"><ion-icon name="add-outline"></ion-icon></div>
12 |       <li style="--i: 0; --clr: #ff2972">
13 |         <a href="#"><ion-icon name="game-controller-outline"></ion-icon></a>
14 |       </li>
15 |       <li style="--i: 1; --clr: #fee800">
16 |         <a href="#"><ion-icon name="person-outline"></ion-icon></a>
17 |       </li>
18 |       <li style="--i: 2; --clr: #04fc43">
19 |         <a href="#"><ion-icon name="mail-outline"></ion-icon></a>
20 |       </li>
21 |       <li style="--i: 3; --clr: #fe00f1">
22 |         <a href="#"><ion-icon name="camera-outline"></ion-icon></a>
23 |       </li>
24 |       <li style="--i: 4; --clr: #00b0fe">
25 |         <a href="#"><ion-icon name="key-outline"></ion-icon></a>
26 |       </li>
27 |       <li style="--i: 5; --clr: #fea600">
28 |         <a href="#"><ion-icon name="home-outline"></ion-icon></a>
29 |       </li>
30 |       <li style="--i: 6; --clr: #a529ff">
31 |         <a href="#"><ion-icon name="settings-outline"></ion-icon></a>
32 |       </li>
33 |       <li style="--i: 7; --clr: #01bdab">
34 |         <a href="#"><ion-icon name="videocam-outline"></ion-icon></a>
35 |       </li>
36 |     </ul>
37 |     <script src="menu.js"></script>
38 |     <script
39 |       type="module"
40 |       src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
41 |     ></script>
42 |     <script
43 |       nomodule
44 |       src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
45 |     ></script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/Animated Menu Bar/menu.js:
--------------------------------------------------------------------------------
1 | let menuToggle = document.querySelector(".menuToggle");
2 |       let menu = document.querySelector(".menu");
3 |       menuToggle.onclick = function () {
4 |         menu.classList.toggle("active");
5 |       };
6 | 


--------------------------------------------------------------------------------
/Animated Navigation/nav.css:
--------------------------------------------------------------------------------
  1 | 
  2 | body {
  3 |   margin: 0;
  4 |   font-family: Arial, sans-serif;
  5 |   background-color: #000000;
  6 | }
  7 | 
  8 | nav {
  9 |   position: fixed;
 10 |   width: 100%;
 11 |   background-color: #000000;
 12 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 13 |   display: flex;
 14 |   justify-content: center;
 15 |   align-items: center;
 16 |   padding: 10px 20px;
 17 |   transition: background-color 0.3s;
 18 | }
 19 | 
 20 | .toggle {
 21 |   color: red;
 22 | }
 23 | 
 24 | nav ul {
 25 |   list-style: none;
 26 |   display: flex;
 27 |   justify-content: center;
 28 |   align-items: center;
 29 |   margin: 0;
 30 |   padding: 0;
 31 | }
 32 | 
 33 | nav ul li {
 34 |   margin: 0 15px;
 35 | }
 36 | 
 37 | nav ul li a {
 38 |   color: #fff;
 39 |   text-decoration: none;
 40 |   font-weight: bold;
 41 |   position: relative;
 42 |   transition: color 0.3s;
 43 | }
 44 | 
 45 | nav ul li a:hover {
 46 |   color: #ff6347;
 47 | }
 48 | 
 49 | nav ul li a::after {
 50 |   content: '';
 51 |   display: block;
 52 |   width: 0;
 53 |   height: 2px;
 54 |   background: #ff6347;
 55 |   transition: width 0.3s;
 56 |   position: absolute;
 57 |   bottom: -5px;
 58 |   left: 0;
 59 | }
 60 | 
 61 | nav ul li a:hover::after {
 62 |   width: 100%;
 63 |   color: red;
 64 | }
 65 | 
 66 | .icon {
 67 |   display: flex;
 68 |   flex-direction: column;
 69 |   justify-content: center;
 70 |   align-items: center;
 71 |   cursor: pointer;
 72 |   width: 30px;
 73 |   height: 30px;
 74 |   margin-left: 00px; 
 75 |   transition: color 0.3s; /
 76 | }
 77 | 
 78 | .line {
 79 |   width: 100%;
 80 |   height: 4px;
 81 |   background-color: #fff; 
 82 |   margin: 4px 0;
 83 |   transition: all 0.3s;
 84 | }
 85 | 
 86 | .icon:hover .line {
 87 |   background-color: #ff6347; 
 88 | }
 89 | 
 90 | .active .line1,
 91 | .active .line2 {
 92 |   background-color: #ff6347;
 93 | }
 94 | 
 95 | .active .line1 {
 96 |   transform: rotate(45deg) translate(5px, 5px);
 97 | }
 98 | 
 99 | .active .line2 {
100 |   transform: rotate(-45deg) translate(5px, -5px);
101 | }
102 | 
103 | @media (max-width: 768px) {
104 |   nav ul {
105 |     position: absolute;
106 |     top: 60px;
107 |     left: 0;
108 |     width: 100%;
109 |     background-color: #000000;
110 |     flex-direction: column;
111 |     display: none;
112 |   }
113 | 
114 |   nav.active ul {
115 |     display: flex;
116 |   }
117 | 
118 |   nav ul li {
119 |     margin: 10px 0;
120 |   }
121 | }
122 | 


--------------------------------------------------------------------------------
/Animated Navigation/nav.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="nav.css" />
 7 |     <title>Animated Navigation</title>
 8 |   </head>
 9 |   <body>
10 |     <nav class="active" id="nav">
11 |       <ul>
12 |         <li><a href="#">Home</a></li>
13 |         <li><a href="#">Works</a></li>
14 |         <li><a href="#">About</a></li>
15 |         <li><a href="#">Contact</a></li>
16 |       </ul>
17 |       <button class="icon" id="toggle">
18 |         <div class="line line1"></div>
19 |         <div class="line line2"></div>
20 |       </button>
21 |     </nav>
22 |     <script src="nav.js"></script>
23 | 
24 |   </body>
25 | </html>


--------------------------------------------------------------------------------
/Animated Navigation/nav.js:
--------------------------------------------------------------------------------
1 | const toggle = document.getElementById('toggle')
2 | const nav = document.getElementById('nav')
3 | 
4 | toggle.addEventListener('click', () => nav.classList.toggle('active'))
5 | 


--------------------------------------------------------------------------------
/Animated Switch/switch.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     justify-content: center;
 4 |     align-items: center;
 5 |     min-height: 90vh;
 6 |     background-color: #000000; 
 7 | }
 8 |   
 9 | .checkbox {
10 |     width: 223px;
11 |     height: 60px;
12 |     background-color: #1ee9a5; 
13 |     border-radius: 30px;
14 |     position: relative;
15 |     color: rgb(0, 0, 0); 
16 |     overflow: hidden;
17 |     box-shadow: #ff0000;
18 |     border-color: aqua;
19 | }
20 |   
21 | #checkbox_toggle {
22 |     display:none;
23 | }
24 | .checkbox .toggle {
25 |     width: 100px;
26 |     height: 50px;
27 |     position: absolute;
28 |     border-radius: 30px;
29 |     left: 5px;
30 |     cursor: grab;
31 |     background: linear-gradient(40deg, #ff0000, #0011ff 70%); 
32 |     transition: 0.4s;
33 |     box-shadow: 0px 0px 3px rgb(20, 255, 184), 0px 0px 5px rgb(20, 255, 235); 
34 |     }
35 |   
36 | .checkbox .slide {
37 |     width: 230px;
38 |     height: 60px;
39 |     display: flex;
40 |     align-items: center;
41 |     justify-content: space-around;
42 |     color: #000000;
43 |     cursor: pointer;
44 | }
45 |   
46 | .checkbox .slide .text {
47 |     font-size: 16px;
48 |     font-weight: 700;
49 |     z-index: 100;
50 |     cursor: pointer;
51 | }
52 |   
53 | .check:checked + .checkbox .slide .toggle {
54 |     transform: translateX(113px);
55 |     background: linear-gradient(40deg, #e2f783, #fbeba3 70%); 
56 |     box-shadow: -0px -0px 10px #f783ed, -0px -0px 3px #f783e4;
57 | }
58 |   
59 | .check:checked + .checkbox .slide {
60 |     background-color: #35ff02;
61 |     color: #000000; 
62 | }
63 | 


--------------------------------------------------------------------------------
/Animated Switch/switch.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>switch</title>
 7 |     <link rel="stylesheet" href="switch.css" />
 8 |   </head>
 9 |   <body>
10 |     <input id="checkbox_toggle" type="checkbox" class="check" />
11 |     <div class="checkbox">
12 |       <label class="slide" for="checkbox_toggle">
13 |         <label class="toggle" for="checkbox_toggle"></label>
14 |         <label class="text" for="checkbox_toggle">ON</label>
15 |         <label class="text" for="checkbox_toggle">OFF</label>
16 |       </label>
17 |     </div>
18 |     <script src="switch.js"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Animated Switch/switch.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function() {
 2 |     const checkbox = document.getElementById("checkbox_toggle");
 3 |   
 4 |     function toggleTheme() {
 5 |       if (checkbox.checked) {
 6 |         document.body.classList.add("night-mode");
 7 |       } else {
 8 |         document.body.classList.remove("night-mode");
 9 |       }
10 |     }
11 |   
12 |     checkbox.addEventListener("change", toggleTheme);
13 |   
14 |     toggleTheme();
15 |   });
16 |   
17 | 


--------------------------------------------------------------------------------
/Button Hover Effect/button.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     justify-content: center;
 4 |     align-items: center;
 5 |     height: 100vh;
 6 |     margin: 0;
 7 |     background-color: #000000;
 8 |     font-family: Arial, sans-serif;
 9 | }
10 | 
11 | .container {
12 |     display: flex;
13 |     gap: 20px;
14 | }
15 | 
16 | .btn {
17 |     position: relative;
18 |     padding: 15px 30px;
19 |     background: rgba(255, 255, 255, 0.1);
20 |     border-radius: 10px;
21 |     backdrop-filter: blur(10px);
22 |     color: #ffffff;
23 |     font-size: 18px;
24 |     font-weight: bold;
25 |     cursor: grab;
26 |     transition: all 0.3s ease;
27 | }
28 | 
29 | .btn:after {
30 |     content: "";
31 |     position: absolute;
32 |     left: 50%;
33 |     transform: translateX(-50%);
34 |     top: -5px;
35 |     width: 30px;
36 |     height: 5px;
37 |     background: #ff0171;
38 |     border-radius: 10px;
39 |     transition: 0.5s;
40 |     opacity: dark;
41 | }
42 | 
43 | .btn:hover:after {
44 |     top: 0;
45 |     height: 100%;
46 |     width: 80%;
47 |     border-radius: 30px;
48 |     opacity: 1;
49 |     animation: show 0.5s ease forwards;
50 | }
51 | 
52 | .btn:nth-child(1):hover:after {
53 |     box-shadow: 0 0 15px #ff0171, 0 0 30px #ff0171;
54 |     background: #ff0171;
55 | }
56 | 
57 | .btn:nth-child(2):hover:after {
58 |     box-shadow: 0 0 15px #017bff, 0 0 30px #017bff;
59 |     background: #017bff;
60 | }
61 | 
62 | .btn:nth-child(3):hover:after {
63 |     box-shadow: 0 0 15px #00ff85, 0 0 30px #00ff85;
64 |     background: #00ff85;
65 | }
66 | 
67 | @keyframes show {
68 |     0% {
69 |         opacity: 0;
70 |         transform: translateX(-50%) scaleY(0);
71 |     }
72 |     100% {
73 |         opacity: 1;
74 |         transform: translateX(-50%) scaleY(1);
75 |     }
76 | }
77 | 


--------------------------------------------------------------------------------
/Button Hover Effect/button.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>Glassmorphism Button Hover Effects</title>
 7 | <link rel="stylesheet" href="button.css">
 8 | </head>
 9 | <body>
10 | <div class="container">
11 | <div class="btn" data-hover="#ff0171">
12 | YOUTUBE
13 | </div>
14 | <div class="btn" data-hover="#017bff">
15 | INSTAGRAM
16 | </div>
17 | <div class="btn" data-hover="#00ff85">
18 | TELEGRAM
19 | </div>
20 | </div>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Cricket Over Calculator/cricket.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |   }
 6 |   
 7 |   body {
 8 |     font-family: Arial, sans-serif;
 9 |     background-color: #000000;
10 |     display: flex;
11 |     justify-content: center;
12 |     align-items: center;
13 |     min-height: 100vh;
14 |     color: #fff;
15 |   }
16 |   
17 |   .over-container {
18 |     text-align: center;
19 |     padding: 20px;
20 |     border-radius: 10px;
21 |     background-color: #fff;
22 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23 |   }
24 |   
25 |   .balls-container {
26 |     margin-bottom: 20px;
27 |   }
28 |   
29 |   .ball {
30 |     width: 40px;
31 |     height: 40px;
32 |     border-radius: 50%;
33 |     border: 2px solid #000;
34 |     display: inline-flex;
35 |     justify-content: center;
36 |     align-items: center;
37 |     margin: 0 5px;
38 |     font-size: 18px;
39 |     background-color: #000000;
40 |   }
41 |   
42 |   .buttons-container {
43 |     margin-bottom: 20px;
44 |   }
45 |   
46 |   .buttons-container button {
47 |     margin: 5px;
48 |     padding: 10px 20px;
49 |     font-size: 16px;
50 |     cursor: pointer;
51 |     background-color: #007bff;
52 |     color: #fff;
53 |     border: none;
54 |     border-radius: 5px;
55 |     transition: background-color 0.3s;
56 |   }
57 |   
58 |   .buttons-container button:hover {
59 |     background-color: #0056b3;
60 |   }
61 |   
62 |   .score-display,
63 |   .cumulative-score {
64 |     margin-top: 20px;
65 |     font-size: 20px;
66 |     font-weight: bold;
67 |     color: #000;
68 |   }
69 |   
70 |   #current-score {
71 |     margin-top: 10px;
72 |     font-size: 18px;
73 |   }
74 |   
75 |   button:disabled {
76 |     background-color: rgb(0, 0, 0);
77 |     cursor: not-allowed;
78 |   }
79 |   
80 |   button:disabled:hover {
81 |     background-color: gray;
82 |   }
83 |   
84 | 


--------------------------------------------------------------------------------
/Cricket Over Calculator/cricket.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>Cricket Over Tracker</title>
 7 |   <link rel="stylesheet" href="cricket.css" />
 8 | </head>
 9 | <body>
10 |   <div class="over-container">
11 |     <!-- Ball Container -->
12 |     <div id="balls-container" class="balls-container"></div>
13 | 
14 |     <!-- Buttons for scoring -->
15 |     <div class="buttons-container">
16 |       <button id="button-1">1</button>
17 |       <button id="button-2">2</button>
18 |       <button id="button-3">3</button>
19 |       <button id="button-4">4</button>
20 |       <button id="button-5">5</button>
21 |       <button id="button-6">6</button>
22 |       <br />
23 |       <button id="button-dot">Dot Ball</button>
24 |       <button id="button-wicket">Wicket</button>
25 |       <button id="button-wide">Wide Ball</button>
26 |       <button id="button-no">No Ball</button>
27 |     </div>
28 | 
29 |     <!-- Score Display -->
30 |     <div id="score-display" class="score-display"></div>
31 |     <div id="cumulative-score" class="cumulative-score"></div>
32 |     <div id="current-score"></div>
33 |   </div>
34 | 
35 |   <script src="cricket.js"></script>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Cricket Over Calculator/cricket.js:
--------------------------------------------------------------------------------
  1 | // Initialize variables
  2 | let ballCount = 0;
  3 | let currentOverScore = 0;
  4 | let currentScore = 0;
  5 | let currentOver = 1;
  6 | let totalScore = 0;
  7 | let wickets = 0;
  8 | let overScores = [];
  9 | let currentTeam = 1;
 10 | let teamScores = [[], []];
 11 | 
 12 | // Functions
 13 | function addBall(type) {
 14 |   if (wickets < 10 && ballCount < 6) {
 15 |     const ballsContainer = document.getElementById("balls-container");
 16 |     const ball = document.createElement("div");
 17 |     ball.classList.add("ball");
 18 |     ball.innerText = type === "dot" ? "." : type;
 19 |     ballsContainer.appendChild(ball);
 20 |     ballCount++;
 21 | 
 22 |     if (type !== "dot") {
 23 |       if (type !== "wicket") {
 24 |         const runs = parseInt(type);
 25 |         currentOverScore += runs;
 26 |         currentScore += runs;
 27 |       } else {
 28 |         wickets++;
 29 |         if (wickets === 10) {
 30 |           endOver();
 31 |           return;
 32 |         }
 33 |       }
 34 |     }
 35 | 
 36 |     if (ballCount === 6) {
 37 |       endOver();
 38 |     }
 39 | 
 40 |     updateTeamScore();
 41 |     displayCurrentScore();
 42 |   }
 43 | }
 44 | 
 45 | function addExtraBall(type) {
 46 |   if (wickets < 10) {
 47 |     const ballsContainer = document.getElementById("balls-container");
 48 |     const ball = document.createElement("div");
 49 |     ball.classList.add("ball");
 50 |     ball.innerText = type === "wide" ? "WD1" : "NB1";
 51 |     currentOverScore += 1;
 52 |     currentScore += 1;
 53 |     ballsContainer.appendChild(ball);
 54 |     updateTeamScore();
 55 |     displayCurrentScore();
 56 |   }
 57 | }
 58 | 
 59 | function displayCurrentScore() {
 60 |   const currentScoreElement = document.getElementById("current-score");
 61 |   currentScoreElement.innerText = `Current Score: ${currentScore} Runs and ${wickets} Wickets`;
 62 | }
 63 | 
 64 | function updateTeamScore() {
 65 |   const team1Score = teamScores[0].reduce((total, score) => total + score, 0);
 66 |   const team2Score = teamScores[1].reduce((total, score) => total + score, 0);
 67 |   
 68 |   if (currentTeam === 2 && team2Score > team1Score) {
 69 |     declareWinner(2, 10 - wickets, "wickets");
 70 |   }
 71 | }
 72 | 
 73 | function endOver() {
 74 |   overScores.push(currentOverScore);
 75 |   teamScores[currentTeam - 1].push(currentOverScore);
 76 |   totalScore += currentOverScore;
 77 |   updateLocalStorage();
 78 | 
 79 |   const cumulativeScoreDisplay = document.getElementById("cumulative-score");
 80 |   const overScoreElement = document.createElement("div");
 81 |   overScoreElement.innerText = `Team ${currentTeam}, Over ${currentOver}: ${currentOverScore} runs`;
 82 |   cumulativeScoreDisplay.appendChild(overScoreElement);
 83 | 
 84 |   currentOver++;
 85 |   ballCount = 0;
 86 |   currentOverScore = 0;
 87 | 
 88 |   const scoreDisplay = document.getElementById("score-display");
 89 |   scoreDisplay.innerText = `Team ${currentTeam} Total Score: ${totalScore} runs, Wickets: ${wickets}`;
 90 | 
 91 |   if (currentOver > 20 || wickets === 10) {
 92 |     endInnings();
 93 |   } else {
 94 |     disableButtons();
 95 |     showNewOverButton();
 96 |   }
 97 | 
 98 |   displayCurrentScore();
 99 | }
100 | 
101 | function endInnings() {
102 |   if (currentTeam === 1) {
103 |     currentTeam = 2;
104 |     resetForNextTeam();
105 |   } else {
106 |     declareWinner();
107 |   }
108 | }
109 | 
110 | function resetForNextTeam() {
111 |   overScores = [];
112 |   totalScore = 0;
113 |   wickets = 0;
114 |   currentOver = 1;
115 |   ballCount = 0;
116 |   currentOverScore = 0;
117 |   currentScore = 0;
118 | 
119 |   const ballsContainer = document.getElementById("balls-container");
120 |   ballsContainer.innerHTML = "";
121 |   const cumulativeScoreDisplay = document.getElementById("cumulative-score");
122 |   cumulativeScoreDisplay.innerHTML = "";
123 |   const scoreDisplay = document.getElementById("score-display");
124 |   scoreDisplay.innerText = `Team ${currentTeam} starts their innings`;
125 | 
126 |   const buttons = document.querySelectorAll(".buttons-container button");
127 |   buttons.forEach((button) => {
128 |     button.disabled = false;
129 |   });
130 | }
131 | 
132 | function declareWinner(winningTeam, margin, unit) {
133 |   const scoreDisplay = document.getElementById("score-display");
134 |   const winnerText = winningTeam === 1
135 |     ? `Team 1 wins by ${margin} ${unit}!`
136 |     : `Team 2 wins by ${margin} ${unit}!`;
137 |   
138 |   scoreDisplay.innerText = `Match complete! ${winnerText}`;
139 |   disableButtons();
140 | 
141 |   setTimeout(() => {
142 |     localStorage.clear();
143 |     console.log("Local storage cleared after 5 seconds.");
144 |   }, 5000);
145 | }
146 | 
147 | function disableButtons() {
148 |   const buttons = document.querySelectorAll(".buttons-container button");
149 |   buttons.forEach((button) => {
150 |     button.disabled = true;
151 |   });
152 | }
153 | 
154 | function showNewOverButton() {
155 |   const newOverButton = document.createElement("button");
156 |   newOverButton.innerText = "New Over";
157 |   newOverButton.onclick = resetOver;
158 |   document.querySelector(".buttons-container").appendChild(newOverButton);
159 | }
160 | 
161 | function resetOver() {
162 |   const ballsContainer = document.getElementById("balls-container");
163 |   ballsContainer.innerHTML = "";
164 | 
165 |   const buttons = document.querySelectorAll(".buttons-container button");
166 |   buttons.forEach((button) => {
167 |     button.disabled = false;
168 |   });
169 | 
170 |   document.querySelector(".buttons-container").removeChild(
171 |     document.querySelector(".buttons-container button:last-child")
172 |   );
173 | 
174 |   const scoreDisplay = document.getElementById("score-display");
175 |   scoreDisplay.innerText = "";
176 | }
177 | 
178 | function updateLocalStorage() {
179 |   localStorage.setItem("teamScores", JSON.stringify(teamScores));
180 | }
181 | 
182 | // Event Listeners
183 | document.addEventListener("DOMContentLoaded", () => {
184 |   document.getElementById("button-1").onclick = () => addBallAndCheckWinner("1");
185 |   document.getElementById("button-2").onclick = () => addBallAndCheckWinner("2");
186 |   document.getElementById("button-3").onclick = () => addBallAndCheckWinner("3");
187 |   document.getElementById("button-4").onclick = () => addBallAndCheckWinner("4");
188 |   document.getElementById("button-5").onclick = () => addBallAndCheckWinner("5");
189 |   document.getElementById("button-6").onclick = () => addBallAndCheckWinner("6");
190 |   document.getElementById("button-dot").onclick = () => addBallAndCheckWinner("dot");
191 |   document.getElementById("button-wicket").onclick = () => addBallAndCheckWinner("wicket");
192 |   document.getElementById("button-wide").onclick = () => addExtraBallAndCheckWinner("wide");
193 |   document.getElementById("button-no").onclick = () => addExtraBallAndCheckWinner("no");
194 | });
195 | 
196 | function addBallAndCheckWinner(type) {
197 |   addBall(type);
198 |   checkWinner();
199 | }
200 | 
201 | function addExtraBallAndCheckWinner(type) {
202 |   addExtraBall(type);
203 |   checkWinner();
204 | }
205 | 
206 | function checkWinner() {
207 |   const team1Score = teamScores[0].reduce((total, score) => total + score, 0);
208 |   const team2Score = teamScores[1].reduce((total, score) => total + score, 0);
209 | 
210 |   if (currentTeam === 2 && currentScore > team1Score) {
211 |     const remainingWickets = 10 - wickets;
212 |     declareWinner(2, remainingWickets, "wickets");
213 |   } else if (wickets === 10) {
214 |     if (currentTeam === 1) {
215 |       endInnings();
216 |     } else {
217 |       declareWinner(1, team1Score - currentScore, "runs");
218 |     }
219 |   }
220 | }
221 | 


--------------------------------------------------------------------------------
/Debit Card/card.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     border: 0;
  3 |     box-sizing: border-box;
  4 |     margin: 0;
  5 |     padding: 0;
  6 | }
  7 | :root {
  8 |     --hue: 223;
  9 |     --bg: hsl(var(--hue), 10%, 30%);
 10 |     --fg: hsl(var(--hue), 10%, 90%);
 11 |     --primary: #000;
 12 |     font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
 13 | }
 14 | body {
 15 |     background-color: var(--bg);
 16 |     color: var(--fg);
 17 |     font: 1em/1.5 sans-serif;
 18 |     height: 100vh;
 19 |     display: grid;
 20 |     place-items: center;
 21 |     perspective: 600px;
 22 |     transition: background-color 0.3s;
 23 | }
 24 | .card,
 25 | .card__chip {
 26 |     overflow: hidden;
 27 |     position: relative;
 28 | }
 29 | .card,
 30 | .card__chip-texture,
 31 | .card__texture {
 32 |     animation-duration: 3s;
 33 |     animation-timing-function: ease-in-out;
 34 |     animation-iteration-count: infinite;
 35 | }
 36 | .card {
 37 |     animation-name: rotate;
 38 |     background-color: var(--primary);
 39 |     background-image: radial-gradient(circle at 100% 0%, hsla(0, 0%, 100%, 0.08) 29.5%, hsla(0, 0%, 100%, 0) 30%), radial-gradient(circle at 100% 0%, hsla(0, 0%, 100%, 0.08) 39.5%, hsla(0, 0%, 100%, 0) 40%), radial-gradient(circle at 100% 0%, hsla(0, 0%, 100%, 0.08) 49.5%, hsla(0, 0%, 100%, 0) 50%);
 40 |     border-radius: 0.5em;
 41 |     box-shadow: 0 0 0 hsl(0, 0%, 80%), 0 0 0 hsl(0, 0%, 100%), -0.2rem 0 0.75rem 0 hsla(0, 0%, 0%, 0.3);
 42 |     color: hsl(0, 0%, 100%);
 43 |     width: 10.3em;
 44 |     height: 6.8em;
 45 |     transform: translate3d(0, 0, 0);
 46 | }
 47 | .card__info,
 48 | .card__chip-texture,
 49 | .card__texture {
 50 |     position: absolute;
 51 | }
 52 | .card__chip-texture,
 53 | .card__texture {
 54 |     animation-name: texture;
 55 |     top: 0;
 56 |     left: 0;
 57 |     width: 200%;
 58 |     height: 100%;
 59 | }
 60 | .card__info {
 61 |     font: 0.75em/1 "DM Sans", sans-serif;
 62 |     display: flex;
 63 |     align-items: center;
 64 |     flex-wrap: wrap;
 65 |     padding: 0.75rem;
 66 |     inset: 0;
 67 | }
 68 | .card__logo,
 69 | .card__number {
 70 |     width: 100%;
 71 | }
 72 | .card__logo {
 73 |     font-weight: bold;
 74 |     font-style: italic;
 75 | }
 76 | .card__chip {
 77 |     background-image: linear-gradient(hsl(0, 0%, 70%), hsl(0, 0%, 80%));
 78 |     border-radius: 0.2rem;
 79 |     box-shadow: 0 0 0 0.05rem hsla(0, 0%, 0%, 0.5) inset;
 80 |     width: 1.25rem;
 81 |     height: 1.25rem;
 82 |     transform: translate3d(0, 0, 0);
 83 | }
 84 | .card__chip-lines {
 85 |     width: 100%;
 86 |     height: auto;
 87 | }
 88 | .card__chip-texture {
 89 |     background-image: linear-gradient(-80deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.6) 48% 52%, hsla(0, 0%, 100%, 0));
 90 | }
 91 | .card__type {
 92 |     align-self: flex-end;
 93 |     margin-left: auto;
 94 | }
 95 | .card__digit-group,
 96 | .card__exp-date,
 97 | .card__name {
 98 |     background: linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 85%) 15% 55%, hsl(0, 0%, 70%) 70%);
 99 |     -webkit-background-clip: text;
100 |     -webkit-text-fill-color: transparent;
101 |     font-family: "Courier Prime", monospace;
102 |     filter: drop-shadow(0 0.05rem hsla(0, 0%, 0%, 0.3));
103 | }
104 | .card__number {
105 |     font-size: 0.8rem;
106 |     display: flex;
107 |     justify-content: space-between;
108 | }
109 | .card__valid-thru,
110 | .card__name {
111 |     text-transform: uppercase;
112 | }
113 | .card__valid-thru {
114 |     font-size: 0.3rem;
115 | }
116 | .card__exp-date,
117 | .card__name {
118 |     font-size: 0.6rem;
119 | }
120 | .card__exp-date {
121 |     padding-left: 0.25rem;
122 | }
123 | .card__name {
124 |     overflow: hidden;
125 |     white-space: nowrap;
126 |     text-overflow: ellipsis;
127 |     width: 6.25rem;
128 | }
129 | .card__vendor,
130 | .card__vendor:before,
131 | .card__vendor:after {
132 |     position: absolute;
133 | }
134 | .card__vendor {
135 |     right: 0.375rem;
136 |     bottom: 0.375rem;
137 |     width: 2.55rem;
138 |     height: 1.5rem;
139 | }
140 | .card__vendor:before,
141 | .card__vendor:after {
142 |     border-radius: 50%;
143 |     content: "";
144 |     display: block;
145 |     top: 0;
146 |     width: 1.5rem;
147 |     height: 1.5rem;
148 | }
149 | .card__vendor:before {
150 |     background-color: #e71d1a;
151 |     left: 0;
152 | }
153 | .card__vendor:after {
154 |     background-color: #fa5e03;
155 |     box-shadow: -1.05rem 0 0 #f59d1a inset;
156 |     right: 0;
157 | }
158 | .card__vendor-sr {
159 |     clip: rect(1px, 1px, 1px, 1px);
160 |     overflow: hidden;
161 |     position: absolute;
162 |     width: 1px;
163 |     height: 1px;
164 | }
165 | .card__texture {
166 |     animation-name: texture;
167 |     background-image: linear-gradient(-80deg, hsla(0, 0%, 100%, 0.3) 25%, hsla(0, 0%, 100%, 0) 45%);
168 | }
169 | @media (prefers-color-scheme: dark) {
170 |     :root {
171 |         --bg: hsl(var(--hue), 10%, 10%);
172 |         --fg: hsl(var(--hue), 10%, 90%);
173 |     }
174 | }
175 | @keyframes rotate {
176 |     from,
177 |     to {
178 |         animation-timing-function: ease-in;
179 |         box-shadow: 0 0 0 hsl(0, 0%, 80%), 0.1rem 0 0 hsl(0, 0%, 100%), -0.2rem 0 0.75rem 0 hsla(0, 0%, 0%, 0.3);
180 |         transform: rotateY(-10deg);
181 |     }
182 |     25%,
183 |     75% {
184 |         animation-timing-function: ease-out;
185 |         box-shadow: 0 0 0 hsl(0, 0%, 80%), 0 0 0 hsl(0, 0%, 100%), -0.25rem -0.05rem 1rem 0.15rem hsla(0, 0%, 0%, 0.3);
186 |         transform: rotateY(0deg);
187 |     }
188 |     50% {
189 |         animation-timing-function: ease-in;
190 |         box-shadow: -0.1rem 0 0 hsl(0, 0%, 80%), 0 0 0 hsl(0, 0%, 100%), -0.3rem -0.1rem 1.5rem 0.3rem hsla(0, 0%, 0%, 0.3);
191 |         transform: rotateY(10deg);
192 |     }
193 | }
194 | @keyframes texture {
195 |     from,
196 |     to {
197 |         transform: translate3d(0, 0, 0);
198 |     }
199 |     50% {
200 |         transform: translate3d(-50%, 0, 0);
201 |     }
202 | }
203 | 


--------------------------------------------------------------------------------
/Debit Card/card.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>Debit Card Design</title>
 7 |   <link rel="stylesheet" href="card.css">
 8 | </head>
 9 | <body>
10 |   <div class="card">
11 |     <div class="card__info">
12 |       <!-- Card Logo -->
13 |       <div class="card__logo">Webcoder Bank</div>
14 | 
15 |       <div class="card__chip">
16 |         <svg class="card__chip-lines" role="img" width="20px" height="20px" viewBox="0 0 100 100" aria-label="Chip">
17 |           <g opacity="0.8">
18 |             <polyline points="0,50 35,50" fill="none" stroke="#000" stroke-width="2" />
19 |             <polyline points="0,20 20,20 35,35" fill="none" stroke="#000" stroke-width="2" />
20 |             <polyline points="50,0 50,35" fill="none" stroke="#000" stroke-width="2" />
21 |             <polyline points="65,35 80,20 100,20" fill="none" stroke="#000" stroke-width="2" />
22 |             <polyline points="100,50 65,50" fill="none" stroke="#000" stroke-width="2" />
23 |             <polyline points="35,35 65,35 65,65 35,65 35,35" fill="none" stroke="#000" stroke-width="2" />
24 |             <polyline points="0,80 20,80 35,65" fill="none" stroke="#000" stroke-width="2" />
25 |             <polyline points="50,100 50,65" fill="none" stroke="#000" stroke-width="2" />
26 |             <polyline points="65,65 80,80 100,80" fill="none" stroke="#000" stroke-width="2" />
27 |           </g>
28 |         </svg>
29 |         <div class="card__chip-texture"></div>
30 |       </div>
31 | 
32 |       <div class="card__type">Debit</div>
33 | 
34 |       <div class="card__number">
35 |         <span class="card__digit-group">1234</span>
36 |         <span class="card__digit-group">5678</span>
37 |         <span class="card__digit-group">8765</span>
38 |         <span class="card__digit-group">4321</span>
39 |       </div>
40 | 
41 |       <div class="card__valid-thru" aria-label="Valid thru">Valid<br>thru</div>
42 |       <div class="card__exp-date">
43 |         <time datetime="2038-01">01/30</time>
44 |       </div>
45 | 
46 |       <div class="card__name" aria-label="Dee Stroyer">Tech By Webcoder</div>
47 | 
48 |       <div class="card__vendor" role="img" aria-labelledby="card-vendor">
49 |         <span id="card-vendor" class="card__vendor-sr">Mastercard</span>
50 |       </div>
51 |     </div>
52 | 
53 |     <div class="card__texture"></div>
54 |   </div>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/Digital Calculator/calculator.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>Calculator in HTML CSS & JavaScript</title>
 8 |     <link rel="stylesheet" href="calulator.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <input type="text" class="display" />
13 | 
14 |       <div class="buttons">
15 |         <button class="operator" data-value="AC">AC</button>
16 |         <button class="operator" data-value="DEL">DEL</button>
17 |         <button class="operator" data-value="%">%</button>
18 |         <button class="operator" data-value="/">/</button>
19 | 
20 |         <button data-value="7">7</button>
21 |         <button data-value="8">8</button>
22 |         <button data-value="9">9</button>
23 |         <button class="operator" data-value="*">*</button>
24 | 
25 |         <button data-value="4">4</button>
26 |         <button data-value="5">5</button>
27 |         <button data-value="6">6</button>
28 |         <button class="operator" data-value="-">-</button>
29 | 
30 |         <button data-value="1">1</button>
31 |         <button data-value="2">2</button>
32 |         <button data-value="3">3</button>
33 |         <button class="operator" data-value="+">+</button>
34 | 
35 |         <button data-value="0">0</button>
36 |         <button data-value="00">00</button>
37 |         <button data-value=".">.</button>
38 |         <button class="operator" data-value="=">=</button>
39 |       </div>
40 |     </div>
41 | 
42 |     <script src="calculator.js"></script>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/Digital Calculator/calculator.js:
--------------------------------------------------------------------------------
 1 | const display = document.querySelector(".display");
 2 | const buttons = document.querySelectorAll("button");
 3 | const specialChars = ["%", "*", "/", "-", "+", "="];
 4 | let output = "";
 5 | 
 6 | const calculate = (btnValue) => {
 7 |   display.focus();
 8 |   if (btnValue === "=" && output !== "") {
 9 |     output = eval(output.replace("%", "/100"));
10 |   } else if (btnValue === "AC") {
11 |     output = "";
12 |   } else if (btnValue === "DEL") {
13 |     output = output.toString().slice(0, -1);
14 |   } else {
15 |     if (output === "" && specialChars.includes(btnValue)) return;
16 |     output += btnValue;
17 |   }
18 |   display.value = output;
19 | };
20 | 
21 | buttons.forEach((button) => {
22 |   button.addEventListener("click", (e) => calculate(e.target.dataset.value));
23 | });


--------------------------------------------------------------------------------
/Digital Calculator/calulator.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 |   font-family: "Poppins", sans-serif;
 6 | }
 7 | body {
 8 |   height: 100vh;
 9 |   display: flex;
10 |   align-items: center;
11 |   justify-content: center;
12 |   background: #000000;
13 | }
14 | .container {
15 |   position: relative;
16 |   max-width: 300px;
17 |   width: 100%;
18 |   border-radius: 12px;
19 |   padding: 10px 20px 20px;
20 |   background: #fff;
21 |   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
22 | }
23 | .display {
24 |   height: 80px;
25 |   width: 100%;
26 |   outline: none;
27 |   border: none;
28 |   text-align: right;
29 |   margin-bottom: 10px;
30 |   font-size: 25px;
31 |   color: #000e1a;
32 |   pointer-events: none;
33 | }
34 | .buttons {
35 |   display: grid;
36 |   grid-gap: 10px;
37 |   grid-template-columns: repeat(4, 1fr);
38 | }
39 | .buttons button {
40 |   padding: 10px;
41 |   border-radius: 6px;
42 |   border: none;
43 |   font-size: 20px;
44 |   cursor: pointer;
45 |   background-color: #eee;
46 | }
47 | .buttons button:active {
48 |   transform: scale(0.99);
49 | }
50 | .operator {
51 |   color: #f75e06;
52 | }


--------------------------------------------------------------------------------
/Digital Stopclock/clock.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: 'Montserrat', sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 |     background: linear-gradient(135deg, #71b7e6, #9b59b6);
 9 |   }
10 |   
11 |   #stopwatch {
12 |     text-align: center;
13 |     background: rgba(255, 255, 255, 0.1);
14 |     padding: 20px;
15 |     border-radius: 20px;
16 |     box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
17 |   }
18 |   
19 |   h1 {
20 |     font-weight: 900;
21 |     color: #fff;
22 |   }
23 |   
24 |   .circle {
25 |     width: 200px;
26 |     height: 200px;
27 |     border-radius: 50%;
28 |     border: 10px solid #000000;
29 |     display: flex;
30 |     justify-content: center;
31 |     align-items: center;
32 |     margin: 20px auto;
33 |     position: relative;
34 |     animation: spin 4s linear infinite;
35 |     background: rgba(255, 255, 255, 0.2);
36 |   }
37 |   
38 |   .time {
39 |     font-family: 'Roboto Mono', monospace;
40 |     font-size: 1.7em;
41 |     font-weight: 300;
42 |     color: #fff;
43 |   }
44 |   
45 |   .controls {
46 |     display: flex;
47 |     justify-content: center;
48 |     gap: 10px;
49 |   }
50 |   
51 |   input[type="button"] {
52 |     font-family: 'Roboto Mono', monospace;
53 |     font-size: 1em;
54 |     font-weight: 300;
55 |     padding: 10px 20px;
56 |     border: none;
57 |     border-radius: 5px;
58 |     cursor: pointer;
59 |     transition: background 0.3s, transform 0.3s;
60 |     background: rgba(255, 255, 255, 0.2);
61 |     color: #fff;
62 |   }
63 |   
64 |   input[type="button"]:disabled {
65 |     background: #ccc;
66 |     cursor: not-allowed;
67 |   }
68 |   
69 |   input[type="button"]:not(:disabled):hover {
70 |     background: #fff;
71 |     color: #333;
72 |     transform: scale(1.1);
73 |   }
74 | 


--------------------------------------------------------------------------------
/Digital Stopclock/clock.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>
 5 |       digital Stopwatch
 6 |     </title>
 7 |     <link href="clock.css" rel="stylesheet">
 8 |     <link
 9 |       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;900&display=swap"
10 |       rel="stylesheet"
11 |     />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;1,300&display=swap"
14 |       rel="stylesheet"
15 |     />
16 |    
17 |   </head>
18 |   <body>
19 |     <div id="stopwatch">
20 |       <h1> STOPWATCH</h1>
21 |       <div class="circle">
22 |         <span class="time" id="sw-time">00:00:00:00</span>
23 |       </div>
24 | 
25 |       <div class="controls">
26 |           <input type="button" value="Reset" id="sw-rst" disabled/>
27 |           <input type="button" value="Start" id="sw-go" disabled/>
28 |       </div>
29 |     </div>
30 |     <script src="clock.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Digital Stopclock/clock.js:
--------------------------------------------------------------------------------
 1 | var sw = {
 2 |     etime: null, 
 3 |     erst: null, 
 4 |     ego: null, 
 5 |     init: function () {
 6 |       sw.etime = document.getElementById("sw-time");
 7 |       sw.erst = document.getElementById("sw-rst");
 8 |       sw.ego = document.getElementById("sw-go");
 9 |   
10 |       sw.erst.addEventListener("click", sw.reset);
11 |       sw.erst.disabled = false;
12 |       sw.ego.addEventListener("click", sw.start);
13 |       sw.ego.disabled = false;
14 |     },
15 |   
16 |     timer: null, 
17 |     now: 0, 
18 |     tick: function () {
19 |       sw.now++;
20 |       var remain = sw.now;
21 |       var hours = Math.floor(remain / 360000);
22 |       remain -= hours * 360000;
23 |       var mins = Math.floor(remain / 6000);
24 |       remain -= mins * 6000;
25 |       var secs = Math.floor(remain / 100);
26 |       remain -= secs * 100;
27 |       var msecs = remain;
28 |   
29 |       if (hours < 10) { hours = "0" + hours; }
30 |       if (mins < 10) { mins = "0" + mins; }
31 |       if (secs < 10) { secs = "0" + secs; }
32 |       if (msecs < 10) { msecs = "0" + msecs; }
33 |       sw.etime.innerHTML = hours + ":" + mins + ":" + secs + ":" + msecs;
34 |     },
35 |   
36 |     start: function () {
37 |       sw.timer = setInterval(sw.tick, 10);
38 |       sw.ego.value = "Stop";
39 |       sw.ego.removeEventListener("click", sw.start);
40 |       sw.ego.addEventListener("click", sw.stop);
41 |     },
42 |   
43 |     stop: function () {
44 |       clearInterval(sw.timer);
45 |       sw.timer = null;
46 |       sw.ego.value = "Start";
47 |       sw.ego.removeEventListener("click", sw.stop);
48 |       sw.ego.addEventListener("click", sw.start);
49 |     },
50 |   
51 |     reset: function () {
52 |       if (sw.timer != null) { sw.stop(); }
53 |       sw.now = -1;
54 |       sw.tick();
55 |     }
56 |   };
57 |   window.addEventListener("load", sw.init);
58 | 


--------------------------------------------------------------------------------
/Facebook Login Page/facebook.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     background-color: #242526;
 4 |     color: #ffffff;
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     display: flex;
 8 |     justify-content: center;
 9 |     align-items: center;
10 |     height: 100vh;
11 |   }
12 |   
13 |   .container {
14 |     width: 350px;
15 |     background-color: #18191a;
16 |     padding: 20px;
17 |     border-radius: 8px;
18 |     box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
19 |   }
20 |   
21 |   h1 {
22 |     color: #ffffff;
23 |     margin-bottom: 20px;
24 |   }
25 |   
26 |   input[type="text"],
27 |   input[type="password"],
28 |   button {
29 |     width: 100%;
30 |     margin-bottom: 10px;
31 |     padding: 10px;
32 |     border: 1px solid #3a3b3c;
33 |     border-radius: 5px;
34 |     box-sizing: border-box;
35 |     background-color: #3a3b3c;
36 |     color: #ffffff;
37 |   }
38 |   
39 |   button {
40 |     background-color: #1e90ff;
41 |     cursor: pointer;
42 |   }
43 |   
44 |   button:hover {
45 |     background-color: #166fe5;
46 |   }
47 |   
48 |   p {
49 |     text-align: center;
50 |     margin-top: 15px;
51 |   }
52 |   
53 |   a {
54 |     color: #ffffff;
55 |     text-decoration: none;
56 |   }
57 |   
58 |   a:hover {
59 |     text-decoration: underline;
60 |   }
61 |   
62 |   body.dark-mode {
63 |     background-color: #f0f2f5;
64 |     color: #000000;
65 |   }
66 |   
67 |   .container.dark-mode {
68 |     background-color: #ffffff;
69 |     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
70 |   }
71 |   
72 |   h1.dark-mode {
73 |     color: #1877f2;
74 |   }
75 |   
76 |   input[type="text"].dark-mode,
77 |   input[type="password"].dark-mode,
78 |   button.dark-mode {
79 |     background-color: #dddfe2;
80 |     border: 1px solid #dddfe2;
81 |     color: #000000;
82 |   }
83 |   
84 |   button.dark-mode:hover {
85 |     background-color: #1877f2;
86 |   }
87 |   
88 |   p.dark-mode,
89 |   a.dark-mode {
90 |     color: #000000;
91 |   }
92 |   
93 |   a.dark-mode:hover {
94 |     text-decoration: underline;
95 |   }
96 |   
97 | 


--------------------------------------------------------------------------------
/Facebook Login Page/facebook.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>Facebook Login Page</title>
 7 |   <link rel="stylesheet" href="facebook.css">
 8 | </head>
 9 | <body>
10 |   <div class="container">
11 |     <h1>Welcome to Facebook</h1>
12 |     <form>
13 |       <input type="text" placeholder="Email or Phone" required>
14 |       <input type="password" placeholder="Password" required>
15 |       <button type="submit">Log In</button>
16 |       <p><a href="#">Forgot Password?</a></p>
17 |     </form>
18 |     <p><a href="#">Create New Account</a></p>
19 |   </div>
20 |   <script src="facebook.js"></script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Facebook Login Page/facebook.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function() {
 2 |     var form = document.getElementById("loginForm");
 3 |   
 4 |     form.addEventListener("submit", function(event) {
 5 |       event.preventDefault();
 6 |   
 7 |       var email = document.getElementById("email").value;
 8 |       var password = document.getElementById("password").value;
 9 |   
10 |       console.log("Email: " + email);
11 |       console.log("Password: " + password);
12 |   
13 |       alert("Login successful!");
14 |     });
15 |   });
16 |   
17 | 


--------------------------------------------------------------------------------
/Football Goal Calculator/football.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background-color: #000000;
 3 |     font-family: 'Arial', sans-serif;
 4 |     display: flex;
 5 |     justify-content: center;
 6 |     align-items: center;
 7 |     height: 100vh;
 8 |     margin: 0;
 9 |   }
10 |   
11 |   .goal-container {
12 |     background-color: #ffffff;
13 |     border-radius: 10px;
14 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
15 |     width: 300px;
16 |     padding: 20px;
17 |     text-align: center;
18 |   }
19 |   
20 |   h1 {
21 |     color: #333;
22 |     margin-bottom: 20px;
23 |   }
24 |   
25 |   .buttons-container {
26 |     margin-bottom: 20px;
27 |   }
28 |   
29 |   button {
30 |     background-color: #4caf50;
31 |     color: white;
32 |     border: none;
33 |     border-radius: 5px;
34 |     padding: 10px 15px;
35 |     margin: 5px;
36 |     cursor: pointer;
37 |     transition: background-color 0.3s ease;
38 |   }
39 |   
40 |   button:hover {
41 |     background-color: #45a049;
42 |   }
43 |   
44 |   .score-display h2 {
45 |     color: #333;
46 |   }
47 |   
48 |   .event-log {
49 |     margin-top: 20px;
50 |   }
51 |   
52 |   .event-log h3 {
53 |     color: #555;
54 |   }
55 |   
56 |   #log-list {
57 |     list-style-type: none;
58 |     padding: 0;
59 |   }
60 |   


--------------------------------------------------------------------------------
/Football Goal Calculator/football.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>Football Goal Calculator</title>
 7 | <link rel="stylesheet" href="football.css" />
 8 | </head>
 9 | <body>
10 | <div class="goal-container">
11 |   <h1>Football Goal Calculator</h1>
12 |   <div class="buttons-container">
13 |     <button id="goal-button">Goal</button>
14 |     <button id="foul-button">Foul</button>
15 |     <button id="penalty-button">Penalty Goal</button>
16 |     <button id="reset-button">Reset</button>
17 |   </div>
18 |   <div id="score-display" class="score-display">
19 |     <h2>Score: <span id="score">0</span></h2>
20 |   </div>
21 |   <div id="event-log" class="event-log">
22 |     <h3>Event Log</h3>
23 |     <ul id="log-list"></ul>
24 |   </div>
25 | </div>
26 | <script src="football.js"></script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Football Goal Calculator/football.js:
--------------------------------------------------------------------------------
 1 | let score = 0;
 2 | const scoreDisplay = document.getElementById('score');
 3 | const logList = document.getElementById('log-list');
 4 | 
 5 | document.getElementById('goal-button').addEventListener('click', () => {
 6 |   score += 1;
 7 |   updateScore('Goal');
 8 | });
 9 | 
10 | document.getElementById('foul-button').addEventListener('click', () => {
11 |   updateLog('Foul');
12 | });
13 | 
14 | document.getElementById('penalty-button').addEventListener('click', () => {
15 |   score += 1;
16 |   updateScore('Penalty Goal');
17 | });
18 | 
19 | document.getElementById('reset-button').addEventListener('click', () => {
20 |   score = 0;
21 |   scoreDisplay.textContent = score;
22 |   logList.innerHTML = '';
23 | });
24 | 
25 | function updateScore(event) {
26 |   scoreDisplay.textContent = score;
27 |   updateLog(event);
28 | }
29 | 
30 | function updateLog(event) {
31 |   const listItem = document.createElement('li');
32 |   listItem.textContent = event;
33 |   logList.appendChild(listItem);
34 | }
35 | 


--------------------------------------------------------------------------------
/Form Validation/form.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |     font-family: sans-serif;
 6 |     color: #fff;
 7 | }
 8 | 
 9 | .container{
10 |     width: 100%;
11 |     height: 100vh;
12 |     background-size: cover;
13 |     background-color: #000;
14 | }
15 | 
16 | .box{
17 |     width: 400px;
18 |     position: relative;
19 |     top: 50%;
20 |     left: 50%;
21 |     transform: translate(-50%, -50%);
22 |     box-shadow: 2px 2px 5px #89c9f3, -2px -2px 5px #89c9f3;
23 |     border-radius: 8px;
24 |     backdrop-filter: blur(8px);
25 |     padding: 20px 40px;
26 | }
27 | 
28 | .signup-header h1{
29 |     font-size: 2.2rem;
30 |     text-align: center;
31 |     padding: 5px 8px;
32 | }
33 | 
34 | .signup-body p{
35 |     margin-top: 20px;
36 |     position: relative;
37 | }
38 | .signup-body p i{
39 |     position: absolute;
40 |     top: 34px;
41 |     right: 16px;
42 |     color: #008000;
43 |     font-size: 22px;
44 | }
45 | .signup-body p span{
46 |     font-size: 18px;
47 |     font-weight: 600;
48 |     color: #90ee90;
49 | }
50 | .signup-body p label{
51 |     font-size: 18px;
52 |     font-weight: 600; 
53 |     cursor: pointer;
54 | }
55 | 
56 | .signup-body p input{
57 |     width: 100%;
58 |     padding: 10px;
59 |     border-radius: 4px;
60 |     font-size: 18px;
61 |     margin-block: 4px;
62 |     border: none;
63 |     outline: none;
64 |     color: #000;
65 | }
66 | 
67 | .signup-body p input[type="submit"]{
68 |     border: none;
69 |     background-color: #3498db;
70 |     color: #fff;
71 |     font-size: 20px;
72 |     font-weight: 700;
73 |     cursor: pointer;
74 | }
75 | 
76 | .signup-body p input[type="submit"]:hover{
77 |     background-color: #2773a5;
78 | }
79 | 
80 | .signup-footer p{
81 |     text-align: center;
82 |     font-weight: 600;
83 |     margin-top: 20px;
84 | }
85 | 
86 | .signup-footer p a{
87 |     text-decoration: none;
88 | }
89 | .signup-footer p a:hover{
90 |     text-decoration: underline;
91 | }
92 | 


--------------------------------------------------------------------------------
/Form Validation/form.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="form.css" />
 8 |     <title>Form Validation</title>
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div class="box">
13 |         <header class="signup-header">
14 |           <h1>Form Validation</h1>
15 |         </header>
16 |         <main class="signup-body">
17 |           <form action="#">
18 |             <p>
19 |               <label for="name">Full Name</label>
20 |               <input type="text" placeholder="Type Name Here" id="name" />
21 |               <i class="fa-solid"></i>
22 |               <span id="nameError"></span>
23 |             </p>
24 |             <p>
25 |               <label for="email">Email</label>
26 |               <input type="email" placeholder="xyz@gmail.com" id="email" />
27 |               <i class="fa-solid"></i>
28 |               <span id="emailError"></span>
29 |             </p>
30 |             <p>
31 |               <label for="password">Password</label>
32 |               <input
33 |                 type="password"
34 |                 placeholder="at least 8 characters"
35 |                 id="password"
36 |               />
37 |               <i class="fa-solid"></i>
38 |               <span id="passError"></span>
39 |             </p>
40 |             <p>
41 |               <input type="submit" value="Create Account" id="submitBtn"/>
42 |             </p>
43 |           </form>
44 |         </main>
45 |         <footer class="signup-footer">
46 |           <p>Already have an account? <a href="">Login</a></p>
47 |         </footer>
48 |       </div>
49 |     </div>
50 |   </body>
51 | 
52 |   <script src="form.js"></script>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/Form Validation/form.js:
--------------------------------------------------------------------------------
 1 | const submitBtn = document.getElementById('submitBtn');
 2 | const nameError = document.getElementById('nameError');
 3 | const emailError = document.getElementById('emailError');
 4 | const passError = document.getElementById('passError');
 5 | 
 6 | submitBtn.addEventListener('click', (e)=>{
 7 |     e.preventDefault();
 8 | 
 9 |     if(validateName() && validateEmail() && validatePassword()){
10 |         alert("Form Submitted Successfully");
11 |     }
12 | });
13 | 
14 | 
15 | function validateName(){
16 |     let name = document.getElementById('name').value;
17 | 
18 |     if(name.length == 0){
19 |         nameError.innerHTML = "Name is required";
20 |         nameError.previousElementSibling.classList.add('fa-xmark');
21 |         return false;
22 |     }
23 | 
24 |     if(!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)){
25 |         nameError.innerHTML = "Write full Name";
26 |         nameError.previousElementSibling.classList.add('fa-xmark');
27 |         return false;
28 |     }
29 |     nameError.innerHTML = "";
30 |     nameError.previousElementSibling.classList.add('fa-check');
31 |     return true;
32 | }
33 | 
34 | function validateEmail(){
35 |     let email = document.getElementById('email').value;
36 | 
37 |     if(email.length == 0){
38 |         emailError.innerHTML = "Email is required";
39 |         emailError.previousElementSibling.classList.add('fa-xmark');
40 |         return false;
41 |     }
42 | 
43 |     if(!email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)){
44 |         emailError.innerHTML = "Enter Valid Email";
45 |         emailError.previousElementSibling.classList.add('fa-xmark');
46 |         return false;
47 |     }
48 |     emailError.innerHTML = "";
49 |     emailError.previousElementSibling.classList.add('fa-check');
50 |     return true;
51 | }
52 | function validatePassword(){
53 |     let password = document.getElementById('password').value;
54 | 
55 |     if(password.length == 0){
56 |         passError.innerHTML = "Password is required";
57 |         passError.previousElementSibling.classList.add('fa-xmark');
58 |         return false;
59 |     }
60 | 
61 |     if(!password.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,30}$/)){
62 |         passError.innerHTML = "Password should contain 1 Uppercase, 1 Lowecase, 1 Digit & 1 Alphabet";
63 |         passError.previousElementSibling.classList.add('fa-xmark');
64 |         return false;
65 |     }
66 |     passError.innerHTML = "";
67 |     passError.previousElementSibling.classList.add('fa-check');
68 |     return true;
69 | }
70 | 
71 | // Make a validateConfirmPassword function to validate it
72 | 


--------------------------------------------------------------------------------
/Github Profile Finder/github.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   background-color: #000000;
  9 |   color: #ffffff;
 10 |   font-family: 'Poppins', sans-serif;
 11 |   display: flex;
 12 |   flex-direction: column;
 13 |   align-items: center;
 14 |   justify-content: center;
 15 |   height: 100vh;
 16 |   overflow: hidden;
 17 |   margin: 0;
 18 | }
 19 | 
 20 | .user-form {
 21 |   width: 100%;
 22 |   max-width: 700px;
 23 | }
 24 | 
 25 | .user-form input {
 26 |   width: 100%;
 27 |   display: block;
 28 |   background-color: #ffffff;
 29 |   border: none;
 30 |   border-radius: 10px;
 31 |   color: #000000;
 32 |   padding: 1rem;
 33 |   margin-bottom: 2rem;
 34 |   font-family: inherit;
 35 |   font-size: 1rem;
 36 |   box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
 37 |     0 15px 40px rgba(0, 0, 0, 0.1);
 38 |   justify-content: center;
 39 | }
 40 | 
 41 | .user-form input::placeholder {
 42 |   color: #666666;
 43 | }
 44 | 
 45 | .user-form input:focus {
 46 |   outline: none;
 47 | }
 48 | 
 49 | .card {
 50 |   max-width: 800px;
 51 |   background-color: #333333;
 52 |   border-radius: 20px;
 53 |   box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
 54 |     0 15px 40px rgba(0, 0, 0, 0.1);
 55 |   display: flex;
 56 |   padding: 3rem;
 57 |   margin: 0 1.5rem;
 58 | }
 59 | 
 60 | .avatar {
 61 |   border-radius: 50%;
 62 |   border: 10px solid #333333;
 63 |   height: 150px;
 64 |   width: 150px;
 65 | }
 66 | 
 67 | .user-info {
 68 |   color: #ffffff;
 69 |   margin-left: 2rem;
 70 | }
 71 | 
 72 | .user-info h2 {
 73 |   margin-top: 0;
 74 | }
 75 | 
 76 | .user-info ul {
 77 |   list-style-type: none;
 78 |   display: flex;
 79 |   justify-content: space-between;
 80 |   padding: 0;
 81 |   max-width: 400px;
 82 | }
 83 | 
 84 | .user-info ul li {
 85 |   display: flex;
 86 |   align-items: center;
 87 | }
 88 | 
 89 | .user-info ul li strong {
 90 |   font-size: 0.9rem;
 91 |   margin-left: 0.5rem;
 92 | }
 93 | 
 94 | .repo {
 95 |   text-decoration: none;
 96 |   color: #ffffff;
 97 |   background-color: #666666;
 98 |   font-size: 0.7rem;
 99 |   padding: 0.25rem 0.5rem;
100 |   margin-right: 0.5rem;
101 |   margin-bottom: 0.5rem;
102 |   display: inline-block;
103 | }
104 | 
105 | @media (max-width: 500px) {
106 |   .card {
107 |     flex-direction: column;
108 |     align-items: center;
109 |   }
110 | 
111 |   .user-form {
112 |     max-width: 400px;
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/Github Profile Finder/github.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="github.css" />
 7 |     <title>Github Profiles Finder</title>
 8 |   </head>
 9 |   <body>
10 |     <form class="user-form" id="form">
11 |       <input type="text" id="search" placeholder="Search a Github User">
12 |     </form>
13 | 
14 |     <main id="main"></main>
15 | 
16 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>
17 |     <script src="github.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Github Profile Finder/github.js:
--------------------------------------------------------------------------------
 1 | const APIURL = 'https://api.github.com/users/'
 2 | 
 3 | const main = document.getElementById('main')
 4 | const form = document.getElementById('form')
 5 | const search = document.getElementById('search')
 6 | 
 7 | async function getUser(username) {
 8 |     try {
 9 |         const { data } = await axios(APIURL + username)
10 | 
11 |         createUserCard(data)
12 |         getRepos(username)
13 |     } catch(err) {
14 |         if(err.response.status == 404) {
15 |             createErrorCard('No profile with this username')
16 |         }
17 |     }
18 | }
19 | 
20 | async function getRepos(username) {
21 |     try {
22 |         const { data } = await axios(APIURL + username + '/repos?sort=created')
23 | 
24 |         addReposToCard(data)
25 |     } catch(err) {
26 |         createErrorCard('Problem fetching repos')
27 |     }
28 | }
29 | 
30 | function createUserCard(user) {
31 |     const userID = user.name || user.login
32 |     const userBio = user.bio ? `<p>${user.bio}</p>` : ''
33 |     const cardHTML = `
34 |     <div class="card">
35 |     <div>
36 |       <img src="${user.avatar_url}" alt="${user.name}" class="avatar">
37 |     </div>
38 |     <div class="user-info">
39 |       <h2>${userID}</h2>
40 |       ${userBio}
41 |       <ul>
42 |         <li>${user.followers} <strong>Followers</strong></li>
43 |         <li>${user.following} <strong>Following</strong></li>
44 |         <li>${user.public_repos} <strong>Repositories</strong></li>
45 |       </ul>
46 | 
47 |       <div id="repos"></div>
48 |     </div>
49 |   </div>
50 |     `
51 |     main.innerHTML = cardHTML
52 |     
53 | }
54 | 
55 | function createErrorCard(msg) {
56 |     const cardHTML = `
57 |         <div class="card">
58 |             <h1>${msg}</h1>
59 |         </div>
60 |     `
61 | 
62 |     main.innerHTML = cardHTML
63 | }
64 | 
65 | function addReposToCard(repos) {
66 |     const reposEl = document.getElementById('repos')
67 | 
68 |     repos
69 |         .slice(0, 5)
70 |         .forEach(repo => {
71 |             const repoEl = document.createElement('a')
72 |             repoEl.classList.add('repo')
73 |             repoEl.href = repo.html_url
74 |             repoEl.target = '_blank'
75 |             repoEl.innerText = repo.name
76 | 
77 |             reposEl.appendChild(repoEl)
78 |         })
79 | }
80 | 
81 | form.addEventListener('submit', (e) => {
82 |     e.preventDefault()
83 | 
84 |     const user = search.value
85 | 
86 |     if(user) {
87 |         getUser(user)
88 | 
89 |         search.value = ''
90 |     }
91 | })
92 | 


--------------------------------------------------------------------------------
/Gmail Login Page/gmail.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     background-color: #000000;
 4 |     display: flex;
 5 |     justify-content: center;
 6 |     align-items: center;
 7 |     height: 100vh;
 8 |     margin: 0;
 9 | }
10 | 
11 | .login-container {
12 |     background-color: white;
13 |     padding: 40px;
14 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
15 |     border-radius: 8px;
16 |     width: 300px;
17 |     text-align: center;
18 | }
19 | 
20 | h1 {
21 |     font-size: 24px;
22 |     margin-bottom: 20px;
23 | }
24 | 
25 | .input-group {
26 |     position: relative;
27 |     margin-bottom: 20px;
28 | }
29 | 
30 | input {
31 |     width: 100%;
32 |     padding: 10px;
33 |     box-sizing: border-box;
34 |     border: 1px solid #ccc;
35 |     border-radius: 4px;
36 |     font-size: 16px;
37 | }
38 | 
39 | label {
40 |     position: absolute;
41 |     left: 10px;
42 |     top: 12px;
43 |     font-size: 16px;
44 |     color: #999;
45 |     pointer-events: none;
46 |     transition: all 0.2s ease-out;
47 | }
48 | 
49 | input:focus + label,
50 | input:not(:placeholder-shown) + label {
51 |     top: -10px;
52 |     left: 8px;
53 |     font-size: 12px;
54 |     color: #333;
55 | }
56 | 
57 | button {
58 |     background-color: #4285f4;
59 |     color: white;
60 |     border: none;
61 |     border-radius: 4px;
62 |     padding: 10px 0;
63 |     font-size: 16px;
64 |     cursor: pointer;
65 |     width: 100%;
66 | }
67 | 
68 | button:hover {
69 |     background-color: #357ae8;
70 | }
71 | 
72 | .footer {
73 |     margin-top: 20px;
74 | }
75 | 
76 | .footer p {
77 |     font-size: 12px;
78 |     color: #666;
79 | }
80 | 
81 | .footer a {
82 |     color: #4285f4;
83 |     text-decoration: none;
84 |     font-size: 12px;
85 | }
86 | 
87 | .footer a:hover {
88 |     text-decoration: underline;
89 | }
90 | 


--------------------------------------------------------------------------------
/Gmail Login Page/gmail.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>Gmail Login Page</title>
 7 |     <link rel="stylesheet" href="gmail.css">
 8 | </head>
 9 | <body>
10 |     <div class="login-container">
11 |         <h1>Sign in</h1>
12 |         <form action="#" method="post">
13 |             <div class="input-group">
14 |                 <input type="email" id="email" name="email" required>
15 |                 <label for="email">Email or phone</label>
16 |                 <br>
17 |             </div>
18 |             <div class="input-group">
19 |                 <input type="password" id="password" name="password" required>
20 |                 <label for="password">Enter your password</label>
21 |             </div>
22 |             <button type="submit">Next</button>
23 |         </form>
24 |         <div class="footer">
25 |             <p>Not your computer? Use Guest mode to sign in privately.</p>
26 |             <a href="#">Learn more</a>
27 |         </div>
28 |     </div>
29 |     <script src="gmail.js"></script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Growing Cube/cube.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |   }
 6 |   
 7 |   body {
 8 |     display: flex;
 9 |     justify-content: center;
10 |     align-items: center;
11 |     min-height: 100vh;
12 |     background: #050505;
13 |   }
14 |   
15 |   .cube {
16 |     position: relative;
17 |     width: 300px;
18 |     height: 300px;
19 |     transform-style: preserve-3d;
20 |     transform: rotateX(-30deg);
21 |     animation: animate 4s linear infinite;
22 |   }
23 |   
24 |   @keyframes animate {
25 |     0% {
26 |       transform: rotateX(-30deg) rotateY(0deg);
27 |     }
28 |     100% {
29 |       transform: rotateX(-30deg) rotateY(360deg);
30 |     }
31 |   }
32 |   
33 |   .cube div {
34 |     top: 0;
35 |     left: 0;
36 |     width: 100%;
37 |     height: 100%;
38 |     transform-style: preserve-3d;
39 |   }
40 |   
41 |   .cube div span {
42 |     position: absolute;
43 |     top: 0;
44 |     left: 0;
45 |     width: 100%;
46 |     height: 100%;
47 |     background: linear-gradient(#151515, #ff0000); 
48 |     background-size: 200% 200%; 
49 |     animation: colorChange 4s linear infinite; 
50 |     transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
51 |   }
52 |   
53 |   @keyframes colorChange {
54 |     0% {
55 |       background-position: 0 0;
56 |     }
57 |     50% {
58 |       background-position: 100% 0;
59 |     }
60 |     100% {
61 |       background-position: 0 0;
62 |     }
63 |   }
64 |   
65 |   .top {
66 |     position: absolute;
67 |     top: 0;
68 |     left: 0;
69 |     width: 300px;
70 |     height: 300px;
71 |     background: #222;
72 |     transform: rotateX(90deg) translateZ(150px);
73 |   }
74 |   
75 |   .top::before {
76 |     content: '';
77 |     position: absolute;
78 |     top: 0;
79 |     left: 0;
80 |     width: 300px;
81 |     height: 300px;
82 |     background: #f00; 
83 |     transform: translateZ(-380px);
84 |     filter: blur(20px);
85 |     box-shadow: 0 0 120px rgba(255, 0, 0, 0.2),
86 |                 0 0 200px rgba(255, 0, 0, 0.4),
87 |                 0 0 300px rgba(255, 0, 0, 0.6),
88 |                 0 0 400px rgba(255, 0, 0, 0.8),
89 |                 0 0 500px rgba(255, 0, 0, 1);
90 |   }
91 |   
92 | 


--------------------------------------------------------------------------------
/Growing Cube/cube.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>3dCube</title>
 7 |     <link rel="stylesheet" href="cube.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="cube">
11 |       <div class="top"></div>
12 |       <div>
13 |         <span style="--i: 0"></span>
14 |         <span style="--i: 1"></span>
15 |         <span style="--i: 2"></span>
16 |         <span style="--i: 3"></span>
17 |       </div>
18 |     </div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Icon Hover Effect/icon.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     justify-content: center;
 4 |     align-items: center;
 5 |     height: 100vh;
 6 |     margin: 0;
 7 |     background: black;
 8 |     font-family: Arial, sans-serif;
 9 | }
10 | 
11 | .icon-container {
12 |     display: flex;
13 |     gap: 20px;
14 | }
15 | 
16 | .icon {
17 |     position: relative;
18 |     width: 60px;
19 |     height: 60px;
20 |     background: rgba(255, 255, 255, 0.1);
21 |     border-radius: 50%;
22 |     display: flex;
23 |     justify-content: center;
24 |     align-items: center;
25 |     color: #ffffff; 
26 |     font-size: 30px;
27 |     transition: all 0.3s ease;
28 |     cursor: pointer;
29 | }
30 | 
31 | .icon i {
32 |     position: relative;
33 |     z-index: 1;
34 | }
35 | 
36 | .icon:after {
37 |     content: "";
38 |     position: absolute;
39 |     left: 50%;
40 |     transform: translateX(-50%);
41 |     top: -5px;
42 |     width: 30px;
43 |     height: 5px;
44 |     background: #ff0171;
45 |     border-radius: 10px;
46 |     transition: 0.5s;
47 |     opacity: 0;
48 | }
49 | 
50 | .icon:hover:after {
51 |     top: 0;
52 |     height: 100%;
53 |     width: 80%;
54 |     border-radius: 30px;
55 |     opacity: 1;
56 |     animation: show 0.5s ease forwards;
57 | }
58 | 
59 | .icon.instagram:hover:after {
60 |     box-shadow: 0 0 15px #ff0171, 0 0 30px #ff0171;
61 |     background: #ff0171;
62 | }
63 | 
64 | .icon.twitter:hover:after {
65 |     box-shadow: 0 0 15px #017bff, 0 0 30px #017bff;
66 |     background: #017bff;
67 | }
68 | 
69 | .icon.youtube:hover:after {
70 |     box-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000;
71 |     background: #ff0000;
72 | }
73 | 
74 | .icon.facebook:hover:after {
75 |     box-shadow: 0 0 15px #3b5998, 0 0 30px #3b5998;
76 |     background: #3b5998;
77 | }
78 | 
79 | @keyframes show {
80 |     0% {
81 |         opacity: 0;
82 |         transform: translateX(-50%) scaleY(0);
83 |     }
84 |     100% {
85 |         opacity: 1;
86 |         transform: translateX(-50%) scaleY(1);
87 |     }
88 | }
89 | 


--------------------------------------------------------------------------------
/Icon Hover Effect/icon.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>Icon Hover Effect</title>
 7 |     <link rel="stylesheet" href="icon.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 |     <div class="icon-container">
12 |         <a href="#" class="icon instagram"><i class="fab fa-instagram"></i></a>
13 |         <a href="#" class="icon twitter"><i class="fab fa-twitter"></i></a>
14 |         <a href="#" class="icon youtube"><i class="fab fa-youtube"></i></a>
15 |         <a href="#" class="icon facebook"><i class="fab fa-facebook-f"></i></a>
16 |     </div>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Instagram Login Page/instagram.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-family: Arial, sans-serif;
 5 |     background-color: #121212;
 6 |     background-image: url(back.jpeg);
 7 |     color: #fff;
 8 |   }
 9 |   
10 |   .login-container {
11 |     max-width: 350px;
12 |     margin: 100px auto;
13 |     padding: 20px;
14 |     background-color: #333;
15 |     border-radius: 5px;
16 |     box-shadow: 0 0 10px rgb(255, 255, 255);
17 |   }
18 |   
19 |   h2 {
20 |     text-align: center;
21 |   }
22 |   
23 |   form {
24 |     display: flex;
25 |     flex-direction: column;
26 |   }
27 |   
28 |   input[type="text"],
29 |   input[type="password"] {
30 |     margin-bottom: 10px;
31 |     padding: 10px;
32 |     border: 1px solid #555;
33 |     border-radius: 3px;
34 |     background-color: #444;
35 |     color: #fff;
36 |   }
37 |   
38 |   button {
39 |     padding: 10px;
40 |     background-color: #3897f0;
41 |     color: #fff;
42 |     border: none;
43 |     border-radius: 3px;
44 |     cursor: pointer;
45 |   }
46 |   
47 |   button:hover {
48 |     background-color: #38a0f0;
49 |   }
50 |   
51 |   #error-message {
52 |     color: red;
53 |     text-align: center;
54 |   }
55 |   
56 |   .signup-link {
57 |     text-align: center;
58 |   }
59 |   
60 |   .signup-link a {
61 |     color: #38a0f0;
62 |     text-decoration: none;
63 |   }
64 |   
65 |   .signup-link a:hover {
66 |     text-decoration: underline;
67 |   }
68 |   


--------------------------------------------------------------------------------
/Instagram Login Page/instagram.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>Instagram</title>
 7 |   <link rel="stylesheet" href="instagram.css">
 8 | </head>
 9 | <body>
10 |   <div class="login-container">
11 |     <h2>Instagram</h2>
12 |     <form id="login-form">
13 |       <input type="text" id="username" placeholder="Username" required>
14 |       <input type="password" id="password" placeholder="Password" required>
15 |       <button type="submit">Log In</button>
16 |       <p id="error-message"></p>
17 |     </form>
18 |     <p class="signup-link">Don't have an account? <a href="#">Sign up</a></p>
19 |   </div>
20 | 
21 |   <script src="instagram.js"></script>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Instagram Login Page/instagram.js:
--------------------------------------------------------------------------------
 1 | document.getElementById('login-form').addEventListener('submit', function(event) {
 2 |     event.preventDefault();
 3 |     var username = document.getElementById('username').value;
 4 |     var password = document.getElementById('password').value;
 5 |   
 6 |     if (username === 'techbywebcoder' && password === 'password') {
 7 |       alert('Login successful');
 8 |     } else {
 9 |       document.getElementById('error-message').innerText = 'Invalid username or password';
10 |     }
11 |   });
12 |   


--------------------------------------------------------------------------------
/JavaScript Quiz/quiz.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
 2 | 
 3 | 
 4 | body {
 5 |   margin: 0;
 6 |   font-family: 'Arial', sans-serif;
 7 |   background-color: #000000;
 8 |   display: flex;
 9 |   justify-content: center;
10 |   align-items: center;
11 |   height: 100vh;
12 | }
13 | 
14 | .quiz-container {
15 |   background-color: #ffffff;
16 |   border-radius: 8px;
17 |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
18 |   width: 400px;
19 |   padding: 20px;
20 |   animation: fadeIn 1s ease-in-out;
21 | }
22 | 
23 | @keyframes fadeIn {
24 |   from {
25 |     opacity: 0;
26 |     transform: translateY(-20px);
27 |   }
28 |   to {
29 |     opacity: 1;
30 |     transform: translateY(0);
31 |   }
32 | }
33 | 
34 | .quiz-header h2 {
35 |   font-size: 1.5em;
36 |   margin-bottom: 20px;
37 |   color: #333;
38 | }
39 | 
40 | ul {
41 |   list-style: none;
42 |   padding: 0;
43 | }
44 | 
45 | li {
46 |   margin-bottom: 10px;
47 | }
48 | 
49 | .answer {
50 |   display: none;
51 | }
52 | 
53 | label {
54 |   background-color: #e0e0e0;
55 |   border-radius: 5px;
56 |   padding: 10px;
57 |   display: block;
58 |   cursor: pointer;
59 |   transition: background-color 0.3s;
60 | }
61 | 
62 | label:hover {
63 |   background-color: #ffcccb;
64 | }
65 | 
66 | input[type="radio"]:checked + label {
67 |   background-color: #ff6347;
68 |   color: white;
69 | }
70 | 
71 | button {
72 |   background-color: #4CAF50;
73 |   color: white;
74 |   padding: 10px 20px;
75 |   border: none;
76 |   border-radius: 5px;
77 |   cursor: pointer;
78 |   font-size: 1em;
79 |   transition: background-color 0.3s;
80 |   width: 100%;
81 |   margin-top: 20px;
82 | }
83 | 
84 | button:hover {
85 |   background-color: #45a049;
86 | }
87 | 


--------------------------------------------------------------------------------
/JavaScript Quiz/quiz.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="quiz.css" />
 7 |     <title>Quiz App</title>
 8 |   </head>
 9 |   <body>
10 |     <div class="quiz-container" id="quiz">
11 |       <div class="quiz-header">
12 |         <h2 id="question">Question text</h2>
13 |         <ul>
14 |           <li>
15 |             <input type="radio" name="answer" id="a" class="answer">
16 |             <label for="a" id="a_text">Question</label>
17 |           </li>
18 | 
19 |           <li>
20 |             <input type="radio" name="answer" id="b" class="answer">
21 |             <label for="b" id="b_text">Question</label>
22 |           </li>
23 | 
24 |           <li>
25 |             <input type="radio" name="answer" id="c" class="answer">
26 |             <label for="c" id="c_text">Question</label>
27 |           </li>
28 | 
29 |           <li>
30 |             <input type="radio" name="answer" id="d" class="answer">
31 |             <label for="d" id="d_text">Question</label>
32 |           </li>
33 |         </ul>
34 |       </div>
35 |       <button id="submit">Submit</button>
36 |     </div>
37 |     <script src="quiz.js"></script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/JavaScript Quiz/quiz.js:
--------------------------------------------------------------------------------
  1 | const quizData = [
  2 |     {
  3 |         question: "What is the correct syntax for referring to an external script called 'xxx.js'?",
  4 |         a: "<script name='xxx.js'>",
  5 |         b: "<script href='xxx.js'>",
  6 |         c: "<script src='xxx.js'>",
  7 |         d: "<script file='xxx.js'>",
  8 |         correct: "c",
  9 |     },
 10 |     {
 11 |         question: "How do you write 'Hello World' in an alert box?",
 12 |         a: "alertBox('Hello World');",
 13 |         b: "msgBox('Hello World');",
 14 |         c: "alert('Hello World');",
 15 |         d: "msg('Hello World');",
 16 |         correct: "c",
 17 |     },
 18 |     {
 19 |         question: "Which operator is used to assign a value to a variable?",
 20 |         a: "=",
 21 |         b: "-",
 22 |         c: "*",
 23 |         d: "x",
 24 |         correct: "a",
 25 |     },
 26 |     {
 27 |         question: "What is the correct way to write a JavaScript array?",
 28 |         a: "var colors = (1:'red', 2:'green', 3:'blue')",
 29 |         b: "var colors = ['red', 'green', 'blue']",
 30 |         c: "var colors = 'red', 'green', 'blue'",
 31 |         d: "var colors = 1 = ('red'), 2 = ('green'), 3 = ('blue')",
 32 |         correct: "b",
 33 |     },
 34 |     {
 35 |         question: "How do you round the number 7.25 to the nearest integer?",
 36 |         a: "Math.rnd(7.25)",
 37 |         b: "rnd(7.25)",
 38 |         c: "Math.round(7.25)",
 39 |         d: "round(7.25)",
 40 |         correct: "c",
 41 |     }
 42 | ];
 43 | 
 44 | const quiz = document.getElementById('quiz')
 45 | const answerEls = document.querySelectorAll('.answer')
 46 | const questionEl = document.getElementById('question')
 47 | const a_text = document.getElementById('a_text')
 48 | const b_text = document.getElementById('b_text')
 49 | const c_text = document.getElementById('c_text')
 50 | const d_text = document.getElementById('d_text')
 51 | const submitBtn = document.getElementById('submit')
 52 | 
 53 | let currentQuiz = 0
 54 | let score = 0
 55 | 
 56 | loadQuiz()
 57 | 
 58 | function loadQuiz() {
 59 |     deselectAnswers()
 60 | 
 61 |     const currentQuizData = quizData[currentQuiz]
 62 | 
 63 |     questionEl.innerText = currentQuizData.question
 64 |     a_text.innerText = currentQuizData.a
 65 |     b_text.innerText = currentQuizData.b
 66 |     c_text.innerText = currentQuizData.c
 67 |     d_text.innerText = currentQuizData.d
 68 | }
 69 | 
 70 | function deselectAnswers() {
 71 |     answerEls.forEach(answerEl => answerEl.checked = false)
 72 | }
 73 | 
 74 | function getSelected() {
 75 |     let answer
 76 | 
 77 |     answerEls.forEach(answerEl => {
 78 |         if(answerEl.checked) {
 79 |             answer = answerEl.id
 80 |         }
 81 |     })
 82 | 
 83 |     return answer
 84 | }
 85 | 
 86 | submitBtn.addEventListener('click', () => {
 87 |     const answer = getSelected()
 88 |     
 89 |     if(answer) {
 90 |         if(answer === quizData[currentQuiz].correct) {
 91 |             score++
 92 |         }
 93 | 
 94 |         currentQuiz++
 95 | 
 96 |         if(currentQuiz < quizData.length) {
 97 |             loadQuiz()
 98 |         } else {
 99 |             quiz.innerHTML = `
100 |                 <h2>You answered ${score}/${quizData.length} questions correctly</h2>
101 | 
102 |                 <button onclick="location.reload()">Reload</button>
103 |             `
104 |         }
105 |     }
106 | })
107 | 


--------------------------------------------------------------------------------
/Like Counter/like.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap');
 2 | 
 3 | * {
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   font-family:sans-serif;
 9 |   text-align: center;
10 |   overflow: hidden;
11 |   margin: 0;
12 |   color: white;
13 |   background-color: #000000; 
14 | }
15 | 
16 | h3 {
17 |   margin-bottom: 0;
18 |   text-align: center;
19 |   font-weight: 600; 
20 |   color: white;
21 | }
22 | 
23 | small {
24 |   size: 30px;
25 |   display: block;
26 |   margin-bottom: 20px;
27 |   text-align: center;
28 |   font-weight: 400; 
29 | }
30 | 
31 | .fa-heart {
32 |   color: red;
33 | }
34 | 
35 | .loveMe {
36 |   height: 300px;
37 |   width: 300px;
38 |   background: url('like.jpg') no-repeat center center/cover;
39 |   margin: auto;
40 |   cursor: pointer;
41 |   max-width: 100%;
42 |   position: relative;
43 |   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
44 |   overflow: hidden;
45 |   border-radius: 10px; 
46 | }
47 | 
48 | .loveMe .fa-heart {
49 |   position: absolute;
50 |   top: 50%;
51 |   left: 50%;
52 |   transform: translate(-50%, -50%) scale(0);
53 |   opacity: 0.7;
54 |   animation: grow 0.6s ease-in-out forwards;
55 | }
56 | 
57 | @keyframes grow {
58 |   0% {
59 |     transform: translate(-50%, -50%) scale(0);
60 |     opacity: 1;
61 |   }
62 |   70% {
63 |     transform: translate(-50%, -50%) scale(1);
64 |     opacity: 0.7;
65 |   }
66 |   100% {
67 |     transform: translate(-50%, -50%) scale(10);
68 |     opacity: 0;
69 |   }
70 | }
71 | 
72 | 


--------------------------------------------------------------------------------
/Like Counter/like.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/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
 7 |     <link rel="stylesheet" href="like.css" />
 8 |     <title>Like Counter</title>
 9 |   </head>
10 |   <body>
11 |     <h3>Click The Image<i class="fas fa-heart"></i></h3>
12 |    <br>
13 |     <div class="loveMe"></div>
14 |     <br>
15 |      <small>Likes: <span id="times">0</span></small>
16 | 
17 |     <script src="like.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Like Counter/like.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Like Counter/like.jpg


--------------------------------------------------------------------------------
/Like Counter/like.js:
--------------------------------------------------------------------------------
 1 | const loveMe = document.querySelector('.loveMe')
 2 | const times = document.querySelector('#times')
 3 | 
 4 | let clickTime = 0
 5 | let timesClicked = 0
 6 | 
 7 | loveMe.addEventListener('click', (e) => {
 8 |     if(clickTime === 0) {
 9 |         clickTime = new Date().getTime()
10 |     } else {
11 |         if((new Date().getTime() - clickTime) < 800) {
12 |             createHeart(e)
13 |             clickTime = 0
14 |         } else {
15 |             clickTime = new Date().getTime()
16 |         }
17 |     }
18 | })
19 | 
20 | const createHeart = (e) => {
21 |     const heart = document.createElement('i')
22 |     heart.classList.add('fas')
23 |     heart.classList.add('fa-heart')
24 | 
25 |     const x = e.clientX
26 |     const y = e.clientY
27 | 
28 |     const leftOffset = e.target.offsetLeft
29 |     const topOffset = e.target.offsetTop
30 | 
31 |     const xInside = x - leftOffset
32 |     const yInside = y - topOffset
33 | 
34 |     heart.style.top = `${yInside}px`
35 |     heart.style.left = `${xInside}px`
36 | 
37 |     loveMe.appendChild(heart)
38 | 
39 |     times.innerHTML = ++timesClicked
40 | 
41 |     setTimeout(() => heart.remove(), 1000)
42 | }


--------------------------------------------------------------------------------
/Login Form/login.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   background-color: #000000; 
  9 |   color: #ecf0f1;
 10 |   font-family: 'Muli', sans-serif;
 11 |   display: flex;
 12 |   flex-direction: column;
 13 |   align-items: center;
 14 |   justify-content: center;
 15 |   height: 100vh;
 16 |   overflow: hidden;
 17 |   margin: 0;
 18 | }
 19 | 
 20 | .container {
 21 |   background-color: rgb(255, 0, 0); 
 22 |   padding: 20px 40px;
 23 |   border-radius: 5px;
 24 | }
 25 | 
 26 | .container h1 {
 27 |   text-align: center;
 28 |   margin-bottom: 30px;
 29 | }
 30 | 
 31 | .container a {
 32 |   text-decoration: none;
 33 |   color: #db3434; 
 34 | }
 35 | 
 36 | .btn {
 37 |   cursor: pointer;
 38 |   display: inline-block;
 39 |   width: 100%;
 40 |   background: #db3434; 
 41 |   padding: 15px;
 42 |   font-family: inherit;
 43 |   font-size: 16px;
 44 |   border: 0;
 45 |   border-radius: 5px;
 46 | }
 47 | 
 48 | .btn:focus {
 49 |   outline: 0;
 50 | }
 51 | 
 52 | .btn:active {
 53 |   transform: scale(0.98);
 54 | }
 55 | 
 56 | .text {
 57 |   margin-top: 30px;
 58 |   color: #000000;
 59 | }
 60 | 
 61 | .form-control {
 62 |   position: relative;
 63 |   margin: 20px 0 40px;
 64 |   width: 300px;
 65 | }
 66 | 
 67 | .form-control input {
 68 |   background-color: transparent;
 69 |   border: 0;
 70 |   border-bottom: 2px #ecf0f1 solid; 
 71 |   display: block;
 72 |   width: 100%;
 73 |   padding: 15px 0;
 74 |   font-size: 18px;
 75 |   color: #ecf0f1; 
 76 |   position: relative;
 77 |   z-index: 100;
 78 | }
 79 | 
 80 | .form-control input:focus,
 81 | .form-control input:valid {
 82 |   outline: 0;
 83 |   border-bottom-color: #000000; 
 84 | }
 85 | 
 86 | .form-control label {
 87 |   position: absolute;
 88 |   top: 15px;
 89 |   left: 0;
 90 |   pointer-events: none;
 91 | }
 92 | 
 93 | .form-control label span {
 94 |   display: inline-block;
 95 |   font-size: 18px;
 96 |   min-width: 5px;
 97 |   transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 98 | }
 99 | 
100 | .form-control input:focus + label span,
101 | .form-control input:valid + label span {
102 |   color: #000000;
103 |   transform: translateY(-30px);
104 | }
105 | 


--------------------------------------------------------------------------------
/Login Form/login.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="login.css" />
 7 |     <title>Login Form</title>
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <h1>Login Form</h1>
12 |       <form>
13 |         <div class="form-control">
14 |           <input type="text" required>
15 |           <label>Email</label>
16 |         </div>
17 | 
18 |         <div class="form-control">
19 |           <input type="password" required>
20 |           <label>Password</label>
21 |         </div>
22 | 
23 |         <button class="btn">Login</button>
24 | 
25 |         <p class="text">Don't have an account?</p>
26 |       </form>
27 |     </div>
28 |     <script src="login.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Login Form/login.js:
--------------------------------------------------------------------------------
1 | const labels = document.querySelectorAll('.form-control label')
2 | 
3 | labels.forEach(label => {
4 |     label.innerHTML = label.innerText
5 |         .split('')
6 |         .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
7 |         .join('')
8 | })
9 | 


--------------------------------------------------------------------------------
/Login Page/login.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-family: sans-serif;
 5 |     background: #000000;
 6 | }
 7 | 
 8 | .box{
 9 |     width: 300px;
10 |     padding: 20px;
11 |     position: absolute;
12 |     top: 50%;
13 |     left: 50%;
14 |     color: white;
15 |     transform: translate(-50%,-50%);
16 |     background: #191919;
17 |     text-align: center;
18 |     border-radius: 14em;
19 |     box-shadow: 5px 5px 50px 50px rgba(252, 5, 5, 0.699);
20 |     animation: animateBg 5s linear infinite;
21 | }
22 | 
23 | @keyframes animateBg{
24 |     100% {
25 |         filter: hue-rotate(360deg);
26 |     }
27 | }
28 | 
29 | .box input{
30 |     border: 0;
31 |     background: none;
32 |     display: block;
33 |     margin: 20px auto;
34 |     text-align: center;
35 |     border: 3px solid #0399fd;
36 |     padding: 14px 10px;
37 |     width: 200px;
38 |     outline: none;
39 |     color: white;
40 |     border-radius: 24px;
41 |     transition: 0.25s;
42 | }
43 | 
44 | .box input[type = "text"]:focus,.box input[type = "password"]:focus{
45 |     width: 280px;
46 |     border-color: #04fb6b;
47 | }
48 | 
49 | .box input[type = "submit"]{
50 |     border: 0;
51 |     background: none;
52 |     display: block;
53 |     margin: 20px auto;
54 |     text-align: center;
55 |     font-size: 25px;
56 |     border: 3px solid #04fb6b;
57 |     padding: 14px 40px;
58 |     outline: none;
59 |     color: white;
60 |     border-radius: 24px;
61 |     transition: 0.25s;
62 |     cursor: pointer;
63 | }
64 | 
65 | .box input[type="submit"]:hover {
66 |     background: #04fb6b;
67 | }
68 | 


--------------------------------------------------------------------------------
/Login Page/login.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="login.css">
 7 |     <title>login pages</title>
 8 |  </head>
 9 |  <body>
10 |     <form class="box" action="login.html" method="post">
11 |         <h1>login</h1>
12 |         <input type="text" name="" placeholder="Usernane">
13 |         <input type="password" name="" placeholder="password">
14 |         <input type="submit" name="" value="login">
15 |     </form>
16 |  </body>
17 |  </html>
18 | 


--------------------------------------------------------------------------------
/Love Calculator/love.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     background-color: #000000;
 6 | }
 7 | 
 8 | .main-div {
 9 |     max-width: 600px;
10 |     margin: 50px auto;
11 |     background-color: #fff;
12 |     padding: 20px;
13 |     border-radius: 10px;
14 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
15 |     text-align: center;
16 | }
17 | 
18 | h2 {
19 |     color: #333;
20 | }
21 | 
22 | .your-div,
23 | .partner-div {
24 |     margin-bottom: 20px;
25 | }
26 | 
27 | label {
28 |     font-weight: bold;
29 | }
30 | 
31 | input[type="text"] {
32 |     width: 100%;
33 |     padding: 10px;
34 |     margin-top: 5px;
35 |     border: 1px solid #ccc;
36 |     border-radius: 5px;
37 |     box-sizing: border-box;
38 | }
39 | 
40 | #mid-text {
41 |     font-size: 30px;
42 |     margin: 30px 0;
43 |     color: #ff0066;
44 | }
45 | 
46 | button {
47 |     padding: 10px 20px;
48 |     background-color: #ff0066;
49 |     color: #fff;
50 |     border: none;
51 |     border-radius: 5px;
52 |     cursor: pointer;
53 | }
54 | 
55 | button:hover {
56 |     background-color: #cc0052;
57 | }
58 | 
59 | #result {
60 |     display: block;
61 |     margin-top: 20px;
62 |     font-weight: bold;
63 |     font-size: 20px;
64 |     color: #333;
65 | }
66 | 


--------------------------------------------------------------------------------
/Love Calculator/love.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>love Calculator</title>
 7 |     <link rel="stylesheet" href="love.css">
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="main-div">
12 |         <h2>Love Calculator 👩‍❤️‍👨</h2>
13 |         <div class="your-div">
14 |             <label for="name">Your Name :</label>
15 |             <input type="text" id="your-name" placeholder="">
16 |         </div>
17 |         
18 |         <h1 id="mid-text"> ❤️ Love ❤️</h1>
19 |         <div class="partner-div">
20 |             <label for="partner-name">Partner's Name :</label>
21 |             <input type="text" id="patner-name" placeholder="">
22 |         </div>
23 |         
24 |         <button id="btn">Calculate Love</button>
25 |         <span id="result"> Result</span>
26 |     </div>
27 |     <script src="love.js"></script>
28 | </body>
29 | 
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Love Calculator/love.js:
--------------------------------------------------------------------------------
 1 | let result = document.querySelector("#result");
 2 | 
 3 | let btn = document.querySelector("#btn");
 4 | 
 5 | btn.addEventListener("click", () => {
 6 |     let randomNumber = parseInt(Math.random() * 100);
 7 |     console.log(randomNumber);
 8 | 
 9 |     let yourName = document.querySelector("#your-name").value;
10 |     let partnerName = document.querySelector("#patner-name").value;
11 | 
12 |     if (yourName === '') {
13 |         alert("Please enter Your Name !");
14 |     } else if (partnerName === '') {
15 |         alert("Please enter partner's Name !");
16 |     } else {
17 |         result.innerHTML = yourName + " and " + partnerName +
18 |             " love Percentage is: " + randomNumber + "%";
19 |     }
20 | });
21 | 


--------------------------------------------------------------------------------
/Navigation Bar/bar.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --activeclr: #000000;
 3 |     }
 4 |     body {
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     display: flex;
 8 |     justify-content: center;
 9 |     align-items: center;
10 |     height: 100vh;
11 |     background: var(--activeclr);
12 |     transition: background 300ms ease;
13 |     }
14 |     .nav-container {
15 |     background: #fff;
16 |     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
17 |     padding: 10px;
18 |     border-radius: 10px;
19 |     }
20 |     .nav {
21 |     display: flex;
22 |     justify-content: space-between;
23 |     position: relative;
24 |     }
25 |     .navitem {
26 |     width: 50px;
27 |     height: 50px;
28 |     display: flex;
29 |     justify-content: center;
30 |     align-items: center;
31 |     font-size: 1.5rem;
32 |     color: #ff0000;
33 |     position: relative;
34 |     transition: color 300ms ease;
35 |     cursor: pointer;
36 |     }
37 |     
38 | 
39 |     
40 |     .navitem:hover {
41 |     color: #000;
42 |     }
43 |     
44 |     .navitem.active {
45 |     color: #000;
46 |     }
47 | 


--------------------------------------------------------------------------------
/Navigation Bar/bar.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>Navigation Bar</title>
 7 | <link rel="stylesheet" href="bar.css">
 8 | <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons.js"></script>
 9 | </head>
10 | 
11 | <body>
12 | <div class="nav-container">
13 | <div class="nav">
14 | <a class="navitem" onclick="select(this)" data-clr="#e4ecfa">
15 | <ion-icon name="fa-home"></ion-icon>
16 | </a>
17 | <a class="navitem" onclick="select(this)" data-clr="#f6caca">
18 | <ion-icon name="fa-user"></ion-icon>
19 | </a>
20 | <a class="navitem" onclick="select(this)" data-clr="#fff6cc">
21 | <ion-icon name="search"></ion-icon>
22 | </a>
23 | <a class="navitem" onclick="select(this)" data-clr="#d4f4dd">
24 | <ion-icon name="settings"></ion-icon>
25 | </a>
26 | <div class="indicator"></div>
27 | </div>
28 | </div>
29 | <script src="bar.js"></script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Navigation Bar/bar.js:
--------------------------------------------------------------------------------
 1 | function select(element) {
 2 |     var nav = document.querySelector('.nav');
 3 |     var indicator = document.querySelector('.indicator');
 4 |     var activeclr = element.getAttribute('data-clr');
 5 | 
 6 |     nav.querySelectorAll('.navitem').forEach(item => item.classList.remove('active'));
 7 |     element.classList.add('active');
 8 | 
 9 |     document.documentElement.style.setProperty('--activeclr', activeclr);
10 |     indicator.style.left = '${element.offsetLeft}px';
11 |     indicator.style.background = activeclr;
12 | }
13 | 


--------------------------------------------------------------------------------
/Netflix Login Page/netflix.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 |     font-family: 'Roboto', sans-serif;
  6 | }
  7 | 
  8 | body {
  9 |     background: #000;
 10 | }
 11 | 
 12 | body::before {
 13 |     content: "";
 14 |     position: absolute;
 15 |     left: 0;
 16 |     top: 0;
 17 |     opacity: 0.5;
 18 |     width: 100%;
 19 |     height: 100%;
 20 |     background: url("netflix_bg.jpg");
 21 |     background-position: center;
 22 | }
 23 | 
 24 | nav {
 25 |     position: fixed;
 26 |     padding: 25px 60px;
 27 |     z-index: 1;
 28 | }
 29 | 
 30 | nav a img {
 31 |     width: 167px;
 32 | }
 33 | 
 34 | .form-wrapper {
 35 |     position: absolute;
 36 |     left: 50%;
 37 |     top: 50%;
 38 |     border-radius: 4px;
 39 |     padding: 70px;
 40 |     width: 450px;
 41 |     transform: translate(-50%, -50%);
 42 |     background: rgba(0, 0, 0, .75);
 43 | }
 44 | 
 45 | .form-wrapper h2 {
 46 |     color: #fff;
 47 |     font-size: 2rem;
 48 | }
 49 | 
 50 | .form-wrapper form {
 51 |     margin: 25px 0 65px;
 52 | }
 53 | 
 54 | form .form-control {
 55 |     height: 50px;
 56 |     position: relative;
 57 |     margin-bottom: 16px;
 58 | }
 59 | 
 60 | .form-control input {
 61 |     height: 100%;
 62 |     width: 100%;
 63 |     background: #333;
 64 |     border: none;
 65 |     outline: none;
 66 |     border-radius: 4px;
 67 |     color: #fff;
 68 |     font-size: 1rem;
 69 |     padding: 0 20px;
 70 | }
 71 | 
 72 | .form-control input:is(:focus, :valid) {
 73 |     background: #444;
 74 |     padding: 16px 20px 0;
 75 | }
 76 | 
 77 | .form-control label {
 78 |     position: absolute;
 79 |     left: 20px;
 80 |     top: 50%;
 81 |     transform: translateY(-50%);
 82 |     font-size: 1rem;
 83 |     pointer-events: none;
 84 |     color: #8c8c8c;
 85 |     transition: all 0.1s ease;
 86 | }
 87 | 
 88 | .form-control input:is(:focus, :valid)~label {
 89 |     font-size: 0.75rem;
 90 |     transform: translateY(-130%);
 91 | }
 92 | 
 93 | form button {
 94 |     width: 100%;
 95 |     padding: 16px 0;
 96 |     font-size: 1rem;
 97 |     background: #e50914;
 98 |     color: #fff;
 99 |     font-weight: 500;
100 |     border-radius: 4px;
101 |     border: none;
102 |     outline: none;
103 |     margin: 25px 0 10px;
104 |     cursor: pointer;
105 |     transition: 0.1s ease;
106 | }
107 | 
108 | form button:hover {
109 |     background: #c40812;
110 | }
111 | 
112 | .form-wrapper a {
113 |     text-decoration: none;
114 | }
115 | 
116 | .form-wrapper a:hover {
117 |     text-decoration: underline;
118 | }
119 | 
120 | .form-wrapper :where(label, p, small, a) {
121 |     color: #b3b3b3;
122 | }
123 | 
124 | form .form-help {
125 |     display: flex;
126 |     justify-content: space-between;
127 | }
128 | 
129 | form .remember-me {
130 |     display: flex;
131 | }
132 | 
133 | form .remember-me input {
134 |     margin-right: 5px;
135 |     accent-color: #b3b3b3;
136 | }
137 | 
138 | form .form-help :where(label, a) {
139 |     font-size: 0.9rem;
140 | }
141 | 
142 | .form-wrapper p a {
143 |     color: #fff;
144 | }
145 | 
146 | .form-wrapper small {
147 |     display: block;
148 |     margin-top: 15px;
149 |     color: #b3b3b3;
150 | }
151 | 
152 | .form-wrapper small a {
153 |     color: #0071eb;
154 | }
155 | 
156 | @media (max-width: 740px) {
157 |     body::before {
158 |         display: none;
159 |     }
160 | 
161 |     nav, .form-wrapper {
162 |         padding: 20px;
163 |     }
164 | 
165 |     nav a img {
166 |         width: 140px;
167 |     }
168 | 
169 |     .form-wrapper {
170 |         width: 100%;
171 |         top: 43%;
172 |     }
173 | 
174 |     .form-wrapper form {
175 |         margin: 25px 0 40px;
176 |     }
177 | }


--------------------------------------------------------------------------------
/Netflix Login Page/netflix.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>Netflix Login Page</title>
 7 |     <link rel="stylesheet" href="netflix.css">
 8 | </head>
 9 | <body>
10 |     <nav>
11 |         <a href="#"><img src="netflix_logo.svg" alt="logo"></a>
12 |     </nav>
13 |     <div class="form-wrapper">
14 |         <h2>Sign In</h2>
15 |         <form action="#">
16 |             <div class="form-control">
17 |                 <input type="text" required>
18 |                 <label>Email or phone number</label>
19 |             </div>
20 |             <div class="form-control">
21 |                 <input type="password" required>
22 |                 <label>Password</label>
23 |             </div>
24 |             <button type="submit">Sign In</button>
25 |             <div class="form-help"> 
26 |                 <div class="remember-me">
27 |                     <input type="checkbox" id="remember-me">
28 |                     <label for="remember-me">Remember me</label>
29 |                 </div>
30 |                 <a href="#">Need help?</a>
31 |             </div>
32 |         </form>
33 |         <p>New to Netflix? <a href="#">Sign up now</a></p>
34 |         <small>
35 |             This page is protected by Google reCAPTCHA to ensure you're not a bot. 
36 |             <a href="#">Learn more.</a>
37 |         </small>
38 |     </div>
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/Netflix Login Page/netflix_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Netflix Login Page/netflix_bg.jpg


--------------------------------------------------------------------------------
/Netflix Login Page/netflix_logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Group_635" data-name="Group 635" xmlns="http://www.w3.org/2000/svg" width="110.999" height="30" viewBox="0 0 110.999 30">
2 |   <path id="Path_1485" data-name="Path 1485" d="M105.062,14.281,111,30c-1.75-.25-3.5-.563-5.281-.844l-3.344-8.687-3.437,7.969c-1.687-.281-3.344-.376-5.031-.594l6.032-13.75L94.468,0h5.063l3.062,7.874L105.875,0H111ZM90.469,0H85.875V27.25c1.5.094,3.062.156,4.594.343ZM81.906,26.937c-4.187-.281-8.375-.53-12.655-.625V0h4.686V21.875c2.688.063,5.375.281,7.969.406ZM64.25,10.656v4.687H57.844V26H53.219V0H66.344V4.687h-8.5v5.969ZM45.343,4.687V26.25c-1.562,0-3.156,0-4.687.062V4.687H35.812V0H50.218V4.687ZM30.75,15.593c-2.062,0-4.5,0-6.25.095v6.969c2.75-.188,5.5-.407,8.281-.5v4.5L19.813,27.688V0H32.781V4.687H24.5V11c1.813,0,4.594-.094,6.25-.094ZM4.781,12.968V29.343C3.094,29.531,1.593,29.75,0,30V0H4.469l6.093,17.032V0H15.25V28.062c-1.656.282-3.343.376-5.125.625Z" fill="#e50914"/>
3 | </svg>
4 | 


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


--------------------------------------------------------------------------------
/Otp Verification/opt.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |     const inputs = document.querySelectorAll('.input');
 3 |   
 4 |     inputs.forEach(function(input, index) {
 5 |       input.addEventListener('input', function() {
 6 |         if (input.value.length === 1 && index < inputs.length - 1) {
 7 |           inputs[index + 1].focus();
 8 |         }
 9 |   
10 |         if (index === inputs.length - 1 && input.value.length === 1) {
11 |           document.querySelector('.form').submit();
12 |         }
13 |       });
14 |   
15 |       input.addEventListener('keydown', function(event) {
16 |         if (event.key === 'Backspace' && index > 0 && input.value.length === 0) {
17 |           inputs[index - 1].focus();
18 |         }
19 |       });
20 |     });
21 |   });
22 |   
23 | 


--------------------------------------------------------------------------------
/Otp Verification/otp.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>OTP Verification</title>
 7 |   <link rel="stylesheet" href="opt.css">
 8 | </head>
 9 | <body>
10 |   <form action="" class="form">
11 |     <div class="content">
12 |       <p align="center">OTP Verification</p>
13 |       <div class="inp">
14 |         <input type="text" class="input" class="input" maxlength="1">
15 |         <input type="text" class="input" class="input" maxlength="1">
16 |         <input type="text" class="input" class="input" maxlength="1">
17 |         <input type="text" class="input" class="input" maxlength="1">
18 |       </div>
19 |       <button>Verify</button>
20 |     </div>
21 |   </form>
22 |   <script src="opt.js"></script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Password Generator/password.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | 
  9 | body {
 10 |   background-color: #121212;
 11 |   color: #ffffff;
 12 |   font-family: 'Muli', sans-serif;
 13 |   display: flex;
 14 |   flex-direction: column;
 15 |   align-items: center;
 16 |   justify-content: center;
 17 |   height: 100vh;
 18 |   overflow: hidden;
 19 |   padding: 10px;
 20 |   margin: 0;
 21 | }
 22 | 
 23 | h2 {
 24 |   margin: 10px 0 20px;
 25 |   text-align: center;
 26 |   color: red;
 27 | }
 28 | 
 29 | .container {
 30 |   background-color: #1f1f1f;
 31 |   box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
 32 |   padding: 20px;
 33 |   width: 350px;
 34 |   max-width: 100%;
 35 |   border-radius: 8px;
 36 | }
 37 | 
 38 | .result-container {
 39 |   background-color: rgba(255, 255, 255, 0.1);
 40 |   display: flex;
 41 |   justify-content: flex-start;
 42 |   align-items: center;
 43 |   position: relative;
 44 |   font-size: 18px;
 45 |   letter-spacing: 1px;
 46 |   padding: 12px 10px;
 47 |   height: 50px;
 48 |   width: 100%;
 49 |   border-radius: 5px;
 50 | }
 51 | 
 52 | .result-container #result {
 53 |   word-wrap: break-word;
 54 |   max-width: calc(100% - 40px);
 55 |   overflow-y: auto;
 56 |   height: 100%;
 57 | }
 58 | 
 59 | #result::-webkit-scrollbar {
 60 |   width: 0.5rem;
 61 | }
 62 | 
 63 | .result-container .btn {
 64 |   position: absolute;
 65 |   top: 5px;
 66 |   right: 5px;
 67 |   width: 40px;
 68 |   height: 40px;
 69 |   font-size: 20px;
 70 |   border-radius: 5px;
 71 | }
 72 | 
 73 | .btn {
 74 |   border: none;
 75 |   background-color: #333333;
 76 |   color: #ffffff;
 77 |   font-size: 16px;
 78 |   padding: 8px 12px;
 79 |   cursor: pointer;
 80 |   border-radius: 5px;
 81 |   transition: background-color 0.3s ease;
 82 | }
 83 | 
 84 | .btn:hover {
 85 |   background-color: #555555;
 86 | }
 87 | 
 88 | .btn-large {
 89 |   display: block;
 90 |   width: 100%;
 91 |   padding: 10px 0;
 92 | }
 93 | 
 94 | .setting {
 95 |   display: flex;
 96 |   justify-content: space-between;
 97 |   align-items: center;
 98 |   margin: 15px 0;
 99 |   width: 100%;
100 | }
101 | 


--------------------------------------------------------------------------------
/Password Generator/password.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/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
 7 |     <link rel="stylesheet" href="password.css" />
 8 |     <title>Password Generator</title>
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <h2 color="red">Password Generator</h2>
13 |       <div class="result-container">
14 |         <span id="result"></span>
15 |         <button class="btn" id="clipboard">
16 |           <i class="far fa-clipboard"></i>
17 |         </button>
18 |       </div>
19 |       <div class="settings">
20 |         <div class="setting">
21 |           <label>Password Length</label>
22 |           <input type="number" id="length" min="4" max="20" value="20">
23 |         </div>
24 |         <div class="setting">
25 |           <label>Include Lowercase Letters</label>
26 |           <input type="checkbox" id="uppercase" checked>
27 |         </div>
28 |         <div class="setting">
29 |           <label>Include Uppercase Letters</label>
30 |           <input type="checkbox" id="lowercase" checked>
31 |         </div>
32 |         <div class="setting">
33 |           <label>Include Symbols</label>
34 |           <input type="checkbox" id="numbers" checked>
35 |         </div>
36 |         <div class="setting">
37 |           <label>Include Number</label>
38 |           <input type="checkbox" id="symbols" checked>
39 |         </div>
40 |       </div>
41 | 
42 |       <button class="btn btn-large" id="generate">
43 |         Generate Password
44 |       </button>
45 |     </div>
46 |     <script src="password.js"></script>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/Password Generator/password.js:
--------------------------------------------------------------------------------
 1 | const resultEl = document.getElementById('result')
 2 | const lengthEl = document.getElementById('length')
 3 | const uppercaseEl = document.getElementById('uppercase')
 4 | const lowercaseEl = document.getElementById('lowercase')
 5 | const numbersEl = document.getElementById('numbers')
 6 | const symbolsEl = document.getElementById('symbols')
 7 | const generateEl = document.getElementById('generate')
 8 | const clipboardEl = document.getElementById('clipboard')
 9 | 
10 | const randomFunc = {
11 |     lower: getRandomLower,
12 |     upper: getRandomUpper,
13 |     number: getRandomNumber,
14 |     symbol: getRandomSymbol
15 | }
16 | 
17 | clipboardEl.addEventListener('click', () => {
18 |     const password = resultEl.innerText;
19 |   if (!password) {
20 |     return;
21 |   }
22 |   navigator.clipboard.writeText(password);
23 |     alert('Password copied to clipboard!')
24 | })
25 | 
26 | generateEl.addEventListener('click', () => {
27 |     const length = +lengthEl.value
28 |     const hasLower = lowercaseEl.checked
29 |     const hasUpper = uppercaseEl.checked
30 |     const hasNumber = numbersEl.checked
31 |     const hasSymbol = symbolsEl.checked
32 | 
33 |     resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length)
34 | })
35 | 
36 | function generatePassword(lower, upper, number, symbol, length) {
37 |     let generatedPassword = ''
38 |     const typesCount = lower + upper + number + symbol
39 |     const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0])
40 |     
41 |     if(typesCount === 0) {
42 |         return ''
43 |     }
44 | 
45 |     for(let i = 0; i < length; i += typesCount) {
46 |         typesArr.forEach(type => {
47 |             const funcName = Object.keys(type)[0]
48 |             generatedPassword += randomFunc[funcName]()
49 |         })
50 |     }
51 | 
52 |     const finalPassword = generatedPassword.slice(0, length)
53 | 
54 |     return finalPassword
55 | }
56 | 
57 | function getRandomLower() {
58 |     return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
59 | }
60 | 
61 | function getRandomUpper() {
62 |     return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
63 | }
64 | 
65 | function getRandomNumber() {
66 |     return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
67 | }
68 | 
69 | function getRandomSymbol() {
70 |     const symbols = '!@#$%^&*(){}[]=<>/,.'
71 |     return symbols[Math.floor(Math.random() * symbols.length)]
72 | }
73 | 


--------------------------------------------------------------------------------
/Php Quiz/php.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
 2 | 
 3 | 
 4 | body {
 5 |   margin: 0;
 6 |   font-family: 'Arial', sans-serif;
 7 |   background-color: #000000;
 8 |   display: flex;
 9 |   justify-content: center;
10 |   align-items: center;
11 |   height: 100vh;
12 | }
13 | 
14 | .quiz-container {
15 |   background-color: #ffffff;
16 |   border-radius: 8px;
17 |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
18 |   width: 400px;
19 |   padding: 20px;
20 |   animation: fadeIn 1s ease-in-out;
21 | }
22 | 
23 | @keyframes fadeIn {
24 |   from {
25 |     opacity: 0;
26 |     transform: translateY(-20px);
27 |   }
28 |   to {
29 |     opacity: 1;
30 |     transform: translateY(0);
31 |   }
32 | }
33 | 
34 | .quiz-header h2 {
35 |   font-size: 1.5em;
36 |   margin-bottom: 20px;
37 |   color: #333;
38 | }
39 | 
40 | ul {
41 |   list-style: none;
42 |   padding: 0;
43 | }
44 | 
45 | li {
46 |   margin-bottom: 10px;
47 | }
48 | 
49 | .answer {
50 |   display: none;
51 | }
52 | 
53 | label {
54 |   background-color: #e0e0e0;
55 |   border-radius: 5px;
56 |   padding: 10px;
57 |   display: block;
58 |   cursor: pointer;
59 |   transition: background-color 0.3s;
60 | }
61 | 
62 | label:hover {
63 |   background-color: #ffcccb;
64 | }
65 | 
66 | input[type="radio"]:checked + label {
67 |   background-color: #ff6347;
68 |   color: white;
69 | }
70 | 
71 | button {
72 |   background-color: #4CAF50;
73 |   color: white;
74 |   padding: 10px 20px;
75 |   border: none;
76 |   border-radius: 5px;
77 |   cursor: pointer;
78 |   font-size: 1em;
79 |   transition: background-color 0.3s;
80 |   width: 100%;
81 |   margin-top: 20px;
82 | }
83 | 
84 | button:hover {
85 |   background-color: #45a049;
86 | }
87 | 


--------------------------------------------------------------------------------
/Php Quiz/php.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="php.css" />
 7 |     <title>Php Quiz</title>
 8 |   </head>
 9 |   <body>
10 |     <div class="quiz-container" id="quiz">
11 |       <div class="quiz-header">
12 |         <h2 id="question">Question text</h2>
13 |         <ul>
14 |           <li>
15 |             <input type="radio" name="answer" id="a" class="answer">
16 |             <label for="a" id="a_text">Question</label>
17 |           </li>
18 | 
19 |           <li>
20 |             <input type="radio" name="answer" id="b" class="answer">
21 |             <label for="b" id="b_text">Question</label>
22 |           </li>
23 | 
24 |           <li>
25 |             <input type="radio" name="answer" id="c" class="answer">
26 |             <label for="c" id="c_text">Question</label>
27 |           </li>
28 | 
29 |           <li>
30 |             <input type="radio" name="answer" id="d" class="answer">
31 |             <label for="d" id="d_text">Question</label>
32 |           </li>
33 |         </ul>
34 |       </div>
35 |       <button id="submit">Submit</button>
36 |     </div>
37 |     <script src="php.js"></script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/Php Quiz/php.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener('DOMContentLoaded', () => {
  2 |     const quizData = [
  3 |         {
  4 |             question: "Which symbol is used to declare a variable in PHP?",
  5 |             a: "$",
  6 |             b: "&",
  7 |             c: "#",
  8 |             d: "@",
  9 |             correct: "a",
 10 |         },
 11 |         {
 12 |             question: "How do you start a PHP block of code?",
 13 |             a: "<?php",
 14 |             b: "<php>",
 15 |             c: "<script>",
 16 |             d: "<?code>",
 17 |             correct: "a",
 18 |         },
 19 |         {
 20 |             question: "Which function is used to output text in PHP?",
 21 |             a: "echo",
 22 |             b: "print",
 23 |             c: "printf",
 24 |             d: "All of the above",
 25 |             correct: "d",
 26 |         },
 27 |         {
 28 |             question: "How do you comment a single line in PHP?",
 29 |             a: "// This is a comment",
 30 |             b: "# This is a comment",
 31 |             c: "/* This is a comment */",
 32 |             d: "Both a and b",
 33 |             correct: "d",
 34 |         },
 35 |         {
 36 |             question: "What is the correct way to create a PHP function?",
 37 |             a: "function myFunction() { }",
 38 |             b: "create function myFunction() { }",
 39 |             c: "function: myFunction() { }",
 40 |             d: "func myFunction() { }",
 41 |             correct: "a",
 42 |         }
 43 |     ];
 44 | 
 45 |     const quiz = document.getElementById('quiz');
 46 |     const answerEls = document.querySelectorAll('.answer');
 47 |     const questionEl = document.getElementById('question');
 48 |     const a_text = document.getElementById('a_text');
 49 |     const b_text = document.getElementById('b_text');
 50 |     const c_text = document.getElementById('c_text');
 51 |     const d_text = document.getElementById('d_text');
 52 |     const submitBtn = document.getElementById('submit');
 53 | 
 54 |     let currentQuiz = 0;
 55 |     let score = 0;
 56 | 
 57 |     function loadQuiz() {
 58 |         deselectAnswers();
 59 | 
 60 |         const currentQuizData = quizData[currentQuiz];
 61 | 
 62 |         questionEl.innerText = currentQuizData.question;
 63 |         a_text.innerText = currentQuizData.a;
 64 |         b_text.innerText = currentQuizData.b;
 65 |         c_text.innerText = currentQuizData.c;
 66 |         d_text.innerText = currentQuizData.d;
 67 |     }
 68 | 
 69 |     function deselectAnswers() {
 70 |         answerEls.forEach(answerEl => answerEl.checked = false);
 71 |     }
 72 | 
 73 |     function getSelected() {
 74 |         let answer;
 75 | 
 76 |         answerEls.forEach(answerEl => {
 77 |             if(answerEl.checked) {
 78 |                 answer = answerEl.id;
 79 |             }
 80 |         });
 81 | 
 82 |         return answer;
 83 |     }
 84 | 
 85 |     submitBtn.addEventListener('click', () => {
 86 |         const answer = getSelected();
 87 |         
 88 |         if(answer) {
 89 |             if(answer === quizData[currentQuiz].correct) {
 90 |                 score++;
 91 |             }
 92 | 
 93 |             currentQuiz++;
 94 | 
 95 |             if(currentQuiz < quizData.length) {
 96 |                 loadQuiz();
 97 |             } else {
 98 |                 quiz.innerHTML = `
 99 |                     <h2>You answered ${score}/${quizData.length} questions correctly</h2>
100 |                     <button onclick="location.reload()">Reload</button>
101 |                 `;
102 |             }
103 |         }
104 |     });
105 | 
106 |     loadQuiz(); 
107 | });
108 | 


--------------------------------------------------------------------------------
/Product Card/ReadMe.txt:
--------------------------------------------------------------------------------
1 | "© [2024] [Tech By WebCoder]. All rights reserved. This Project is protected by copyright. Any unauthorized , distribution, or exhibition of this project, in whole or in part, is strictly prohibited."


--------------------------------------------------------------------------------
/Product Card/card.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 |     background-color: #000000;
 9 | }
10 | 
11 | .flex-container {
12 |     display: flex;
13 |     justify-content: center;
14 |     align-items: center;
15 | }
16 | 
17 | .flex-item {
18 |     width: 200px;
19 |     height: 300px;
20 |     background-color: transparent; 
21 |     border-radius: 10px;
22 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
23 |     transition: transform 0.2s;
24 |     overflow: hidden;
25 | 
26 |     
27 | 
28 | .flex-item img {
29 |     width: 100%;
30 |     height: 100%;
31 |     display: block;
32 | }
33 | 
34 | .text {
35 |     padding: 10px;
36 |     text-align: center;
37 |     font-size: 1.2em;
38 |     color: #333;
39 |     background-color: #fff; 
40 |     border-top: 1px solid #ddd;
41 | }
42 | 


--------------------------------------------------------------------------------
/Product Card/card.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>3D Product Card | Nothing4us</title>
 6 |     <link rel="stylesheet" href="card.css">
 7 | </head>
 8 | <body>
 9 | 
10 | <div class="flex-container">
11 |     <div class="flex-item bg-one tilt">
12 |         <a href="#nothing">
13 |             <span><img src="card.jfif"></span>
14 |             <div class="text">Shoes</div>
15 |             <div class="text" color:white;>Price: 80000rs</div>
16 |         </a>
17 |     </div>
18 | </div>
19 | 
20 | <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
21 | <script src="card.js"></script>
22 | 
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Product Card/card.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Product Card/card.jfif


--------------------------------------------------------------------------------
/Product Card/card.js:
--------------------------------------------------------------------------------
 1 |     const tilt = document.querySelectorAll(".tilt");
 2 | 
 3 |     VanillaTilt.init(tilt, {
 4 |         reverse: true,
 5 |         max: 15,
 6 |         speed: 400,
 7 |         scale: 1.12,
 8 |         glare: true,
 9 |         reset: true,
10 |         perspective: 500,
11 |         transition: true,
12 |         "max-glare": 0.75,
13 |         "glare-prerender": false,
14 |         gyroscope: true,
15 |         gyroscopeMinAngleX: -45,
16 |         gyroscopeMaxAngleX: 45,
17 |         gyroscopeMinAngleY: -45,
18 |         gyroscopeMaxAngleY: 45
19 |     });
20 | 


--------------------------------------------------------------------------------
/Profile Card/ReadMe.txt:
--------------------------------------------------------------------------------
1 | "© [2024] [Tech By WebCoder]. All rights reserved. This Project is protected by copyright. Any unauthorized , distribution, or exhibition of this project, in whole or in part, is strictly prohibited."


--------------------------------------------------------------------------------
/Profile Card/profile.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 |     font-family: 'Poppins', sans-serif;
 11 |     width: 100%;
 12 |     height: 100vh;
 13 |     display: flex;
 14 |     justify-content: center;
 15 |     padding: 1rem;
 16 |     align-items: center;
 17 |     background-color: rgb(54, 54, 54);
 18 | }
 19 | 
 20 | .card-container {
 21 |     background-color: rgb(0, 0, 0);
 22 |     color: white;
 23 |     padding: 2rem;
 24 |     width: 20rem;
 25 |     margin: .5rem;
 26 |     border-radius: .4rem;
 27 | }
 28 | 
 29 | .cart-top-navigation {
 30 |     display: flex;
 31 |     justify-content: space-between;
 32 | }
 33 | 
 34 | .cart-top-navigation li,
 35 | .cart-top-navigation ul {
 36 |     list-style: none;
 37 |     font-size: 1.2rem;
 38 | }
 39 | 
 40 | .cart-top-navigation ul i {
 41 |     margin-left: 10px;
 42 | }
 43 | 
 44 | .user-image {
 45 |     position: relative;
 46 |     width: 100px;
 47 |     height: 100px;
 48 |     margin: 0 auto;
 49 | }
 50 | 
 51 | .user-image img {
 52 |     position: absolute;
 53 |     top: 0;
 54 |     left: 0;
 55 |     width: 100%;
 56 | }
 57 | 
 58 | .user-name,
 59 | .about-user {
 60 |     text-align: center;
 61 |     margin-top: 1.5rem;
 62 | }
 63 | 
 64 | .user-name {
 65 |     font-size: 1.4rem;
 66 | }
 67 | 
 68 | .hire-me {
 69 |     /* width: 8rem; */
 70 |     margin: 1.5rem auto;
 71 |     display: block;
 72 |     border: none;
 73 |     padding: .8rem 1.6rem;
 74 |     border-radius: 2rem;
 75 |     font-size: 1rem;
 76 |     cursor: pointer;
 77 | }
 78 | 
 79 | .hire-me:hover {
 80 |     background: radial-gradient(circle at 100% 107%, #fdf497 0%, #fdf497 5%#fd5949 45%, #d6249f 60%, #285aeb 90%);
 81 | 
 82 | }
 83 | 
 84 | .social-container {
 85 |     display: flex;
 86 |     justify-content: space-between;
 87 |     align-items: center;
 88 |     flex-wrap: wrap;
 89 | }
 90 | 
 91 | .social-item {
 92 |     display: flex;
 93 |     justify-content: center;
 94 |     align-items: center;
 95 |     flex-direction: column;
 96 |     margin-top: 1rem;
 97 | }
 98 | 
 99 | .social-item li {
100 |     list-style: none;
101 |     padding: 0.8rem;
102 |     border-radius: 15%;
103 | }
104 | 
105 | .instagram {
106 |     background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
107 | }
108 | 
109 | .youtube {
110 |     background-color: #ff0000;
111 | }
112 | 
113 | .twitter {
114 |     background-color: #1D9BF0;
115 | }
116 | 
117 | .social-item i {
118 |     font-size: 1.5rem;
119 | }
120 | 
121 | .social-item span {
122 |     margin-top: .5rem;
123 | }


--------------------------------------------------------------------------------
/Profile Card/profile.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>Profile Card </title>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
 9 |         integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
10 |         crossorigin="anonymous" referrerpolicy="no-referrer" />
11 |     <link rel="stylesheet" href="profile.css">
12 | </head>
13 | 
14 | <body>
15 |     <div class="card-container">
16 |         <div class="cart-top-navigation">
17 |             <li>
18 |                 <i class="fa-solid fa-arrow-left"></i>
19 |             </li>
20 |             <ul>
21 |                 <i id="heart" class="fa-regular fa-heart"></i>
22 |                 <i class="fa-solid fa-bars"></i>
23 |             </ul>
24 |         </div>
25 |         <div class="user-image">
26 |             <!-- Replace "/user.png" with the image of your which you want to show on your profile card-->
27 |             <img src="profile.jpeg" alt="">
28 |         </div>
29 |         <h2 class="user-name">Tech By Web Coder</h2>
30 |         <p class="about-user">Frondend,Backend And Database Web Developer </p>
31 |         <button class="hire-me">Follow Me
32 |         </button>
33 | 
34 |         <div class="social-container">
35 |             <div class="social-item">
36 |                 <li class="instagram">
37 |                     <i class="fa-brands fa-instagram"></i>
38 |                 </li>
39 |                 <span class="followers">100k</span>
40 |                 <span class="followers">Followers</span>
41 |             </div>
42 |             <div class="social-item">
43 |                 <li class="youtube">
44 |                     <i class="fa-brands fa-youtube"></i>
45 |                 </li>
46 |                 <span class="subscribers">100k</span>
47 |                 <span class="subscribers">Subscribers</span>
48 |             </div>
49 |             <div class="social-item">
50 |                 <li class="twitter">
51 |                     <i class="fa-brands fa-twitter"></i>
52 |                 </li>
53 |                 <span class="followers">100k</span>
54 |                 <span class="followers">Followers</span>
55 |             </div>
56 |         </div>
57 |     </div>
58 | </body>
59 | <script src="profile.js"></script>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/Profile Card/profile.js:
--------------------------------------------------------------------------------
 1 | const toggleHeart = document.getElementById('heart');
 2 |     toggleHeart.addEventListener('click', () => {
 3 |         toggleHeart.classList.toggle('fa-solid')
 4 |         if (toggleHeart.classList == 'fa-regular fa-heart fa-solid') {
 5 |             toggleHeart.style.color = 'red'
 6 |         }
 7 |         else {
 8 |             toggleHeart.style.color = 'white'
 9 |         }
10 |     })


--------------------------------------------------------------------------------
/Profile Card/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Profile Card/profile.png


--------------------------------------------------------------------------------
/ReadMe.txt:
--------------------------------------------------------------------------------
1 | "© [2024] [Tech By WebCoder]. All rights reserved. This Project is protected by copyright. Any unauthorized , distribution, or exhibition of this project, in whole or in part, is strictly prohibited."


--------------------------------------------------------------------------------
/Sound Effect/sound.css:
--------------------------------------------------------------------------------
 1 | /* style.css */
 2 | body {
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 |   height: 100vh;
 8 |   margin: 0;
 9 |   background-color: #000000;
10 |   font-family: Arial, sans-serif;
11 | }
12 | 
13 | .heading {
14 |   font-size: 24px;
15 |   font-weight: bold;
16 |   color: #ff0202;
17 |   margin-bottom: 20px;
18 | }
19 | 
20 | #buttons {
21 |   display: flex;
22 |   flex-wrap: wrap;
23 |   gap: 10px;
24 |   padding: 20px;
25 |   border: 2px solid #000000;
26 |   border-radius: 10px;
27 |   background-color: #f9f9f9;
28 |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
29 | }
30 | 
31 | button {
32 |   padding: 10px 20px;
33 |   font-size: 16px;
34 |   border: 2px solid #000000;
35 |   border-radius: 5px;
36 |   background-color: #ffffff;
37 |   color: #000000;
38 |   cursor: pointer;
39 |   transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
40 | }
41 | 
42 | button:hover {
43 |   background-color: #000000;
44 |   color: #ffffff;
45 |   transform: scale(1.05);
46 | }
47 | 
48 | button:active {
49 |   background-color: #333333;
50 |   color: #ffffff;
51 |   transform: scale(0.95);
52 | }
53 | 


--------------------------------------------------------------------------------
/Sound Effect/sound.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="sound.css" />
 7 |     <title>Sound Effect</title>
 8 |   </head>
 9 | 
10 |     <h3 class="heading">Sound Effect</h3>
11 |   <body>
12 |     <audio id="classic" src="sound1.wav"></audio>
13 |     <audio id="dog" src="sound2.wav"></audio>
14 |     <audio id="rocket" src="sound3.wav"></audio>
15 |     <audio id="flock" src="sound4.wav"></audio>
16 |     <audio id="intro" src="sound5.wav"></audio>
17 |     <audio id="retro" src="sound6.wav"></audio>
18 |     <div id="buttons"></div>
19 | 
20 |     <script src="sound.js"></script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Sound Effect/sound.js:
--------------------------------------------------------------------------------
 1 | const sounds = ['classic', 'dog', 'rocket', 'flock', 'intro', 'retro']
 2 | 
 3 | sounds.forEach(sound => {
 4 |     const btn = document.createElement('button')
 5 |     btn.classList.add('btn')
 6 | 
 7 |     btn.innerText = sound
 8 | 
 9 |     btn.addEventListener('click', () => {
10 |         stopSongs()
11 | 
12 |         document.getElementById(sound).play()
13 |     })
14 | 
15 |     document.getElementById('buttons').appendChild(btn)
16 | })
17 | 
18 | function stopSongs() {
19 |     sounds.forEach(sound => {
20 |         const song = document.getElementById(sound)
21 | 
22 |         song.pause()
23 |         song.currentTime = 0;
24 |     })
25 | }


--------------------------------------------------------------------------------
/Sound Effect/sound1.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Sound Effect/sound1.wav


--------------------------------------------------------------------------------
/Sound Effect/sound2.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Sound Effect/sound2.wav


--------------------------------------------------------------------------------
/Sound Effect/sound3.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Sound Effect/sound3.wav


--------------------------------------------------------------------------------
/Sound Effect/sound4.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Sound Effect/sound4.wav


--------------------------------------------------------------------------------
/Sound Effect/sound5.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Sound Effect/sound5.wav


--------------------------------------------------------------------------------
/Sound Effect/sound6.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Sound Effect/sound6.wav


--------------------------------------------------------------------------------
/Spotify Login Page/spotify.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     display: flex;
 6 |     justify-content: center;
 7 |     align-items: center;
 8 |     height: 100vh;
 9 |     background-color: #000000;
10 | }
11 | 
12 | .login-container {
13 |     background-color: #fff;
14 |     padding: 20px;
15 |     border-radius: 5px;
16 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17 | }
18 | 
19 | h1 {
20 |     text-align: center;
21 |     color: #1db954;
22 | }
23 | 
24 | form {
25 |     display: flex;
26 |     flex-direction: column;
27 | }
28 | 
29 | input[type="text"],
30 | input[type="password"] {
31 |     padding: 10px;
32 |     margin-bottom: 10px;
33 |     border: 1px solid #ccc;
34 |     border-radius: 5px;
35 |     font-size: 16px;
36 | }
37 | 
38 | button {
39 |     padding: 10px;
40 |     background-color: #1db954;
41 |     color: #fff;
42 |     border: none;
43 |     border-radius: 5px;
44 |     font-size: 16px;
45 |     cursor: pointer;
46 |     transition: background-color 0.3s ease;
47 | }
48 | 
49 | button:hover {
50 |     background-color: #15a541;
51 | }
52 | 


--------------------------------------------------------------------------------
/Spotify Login Page/spotify.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>Spotify Login</title>
 7 |     <link rel="stylesheet" href="cs.css">
 8 | </head>
 9 | <body>
10 |     <div class="login-container">
11 |         <h1>Spotify Login</h1>
12 |         <form action="login.php" method="POST">
13 |             <input type="text" name="username" placeholder="Username" required>
14 |             <input type="password" name="password" placeholder="Password" required>
15 |             <button type="submit">Login</button>
16 |         </form>
17 |     </div>
18 |     <script src="spotify.js"></script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Spotify Login Page/spotify.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function() {
 2 |     const loginForm = document.getElementById("loginForm");
 3 | 
 4 |     loginForm.addEventListener("submit", function(event) {
 5 |         event.preventDefault(); 
 6 |         
 7 |         const username = document.getElementById("username").value;
 8 |         const password = document.getElementById("password").value;
 9 | 
10 |         if (!username.trim() || !password.trim()) {
11 |             alert("Please enter both username and password.");
12 |             return;
13 |         }
14 | 
15 | 
16 |         console.log("Username:", username);
17 |         console.log("Password:", password);
18 | 
19 |     });
20 | });
21 | 


--------------------------------------------------------------------------------
/Step Counter/step.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
  2 | 
  3 | :root {
  4 |   --line-border-fill: #03ffc8;
  5 |   --line-border-empty: #383838;
  6 | 
  7 | }
  8 | 
  9 | * {
 10 |   box-sizing: border-box;
 11 | }
 12 | 
 13 | body {
 14 |   background-color: #000000;
 15 |   font-family: 'Muli', sans-serif;
 16 |   display: flex;
 17 |   align-items: center;
 18 |   justify-content: center;
 19 |   height: 100vh;
 20 |   overflow: hidden;
 21 |   margin: 0;
 22 | }
 23 | 
 24 | .container {
 25 |   text-align: center;
 26 | }
 27 | 
 28 | .progress-container {
 29 |   display: flex;
 30 |   justify-content: space-between;
 31 |   position: relative;
 32 |   margin-bottom: 30px;
 33 |   max-width: 100%;
 34 |   width: 350px;
 35 | }
 36 | 
 37 | .progress-container::before {
 38 |   content: '';
 39 |   background-color: var(--line-border-empty);
 40 |   position: absolute;
 41 |   top: 50%;
 42 |   left: 0;
 43 |   transform: translateY(-50%);
 44 |   height: 4px;
 45 |   width: 100%;
 46 |   z-index: -1;
 47 | }
 48 | 
 49 | .progress {
 50 |   background-color: var(--line-border-fill);
 51 |   position: absolute;
 52 |   top: 50%;
 53 |   left: 0;
 54 |   transform: translateY(-50%);
 55 |   height: 4px;
 56 |   width: 0%;
 57 |   z-index: -1;
 58 |   transition: 0.4s ease;
 59 | }
 60 | 
 61 | .circle {
 62 |   background-color: #f1f1f1;
 63 |   color:#030303;
 64 |   border-radius: 50%;
 65 |   height: 30px;
 66 |   width: 30px;
 67 |   display: flex;
 68 |   align-items: center;
 69 |   justify-content: center;
 70 |   border: 3px solid var(--line-border-empty);
 71 |   transition: 0.4s ease;
 72 | }
 73 | 
 74 | .circle.active {
 75 |   border-color: var(--line-border-fill);
 76 | }
 77 | 
 78 | .btn {
 79 |   background-color: var(--line-border-fill);
 80 |   color: #000000;
 81 |   border: 0;
 82 |   border-radius: 6px;
 83 |   cursor: pointer;
 84 |   font-family: inherit;
 85 |   padding: 8px 30px;
 86 |   margin: 5px;
 87 |   font-size: 14px;
 88 | }
 89 | 
 90 | .btn:active {
 91 |   transform: scale(0.98);
 92 | }
 93 | 
 94 | .btn:focus {
 95 |   outline: 0;
 96 | }
 97 | 
 98 | .btn:disabled {
 99 |   background-color: var(--line-border-empty);
100 |   cursor: not-allowed;
101 | }
102 | 


--------------------------------------------------------------------------------
/Step Counter/step.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="step.css" />
 7 |     <title>Step Counter</title>
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <div class="progress-container">
12 |         <div class="progress" id="progress"></div>
13 |         <div class="circle active">1</div>
14 |         <div class="circle">2</div>
15 |         <div class="circle">3</div>
16 |         <div class="circle">4</div>
17 |       </div>
18 | 
19 |       <button class="btn" id="prev" disabled>Prev</button>
20 |       <button class="btn" id="next">Next</button>
21 |     </div>
22 |     <script src="step.js"></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Step Counter/step.js:
--------------------------------------------------------------------------------
 1 | const progress = document.getElementById('progress')
 2 | const prev = document.getElementById('prev')
 3 | const next = document.getElementById('next')
 4 | const circles = document.querySelectorAll('.circle')
 5 | 
 6 | let currentActive = 1
 7 | 
 8 | next.addEventListener('click', () => {
 9 |     currentActive++
10 | 
11 |     if(currentActive > circles.length) {
12 |         currentActive = circles.length
13 |     }
14 | 
15 |     update()
16 | })
17 | 
18 | prev.addEventListener('click', () => {
19 |     currentActive--
20 | 
21 |     if(currentActive < 1) {
22 |         currentActive = 1
23 |     }
24 | 
25 |     update()
26 | })
27 | 
28 | function update() {
29 |     circles.forEach((circle, idx) => {
30 |         if(idx < currentActive) {
31 |             circle.classList.add('active')
32 |         } else {
33 |             circle.classList.remove('active')
34 |         }
35 |     })
36 | 
37 |     const actives = document.querySelectorAll('.active')
38 | 
39 |     progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'
40 | 
41 |     if(currentActive === 1) {
42 |         prev.disabled = true
43 |     } else if(currentActive === circles.length) {
44 |         next.disabled = true
45 |     } else {
46 |         prev.disabled = false
47 |         next.disabled = false
48 |     }
49 | }
50 | 


--------------------------------------------------------------------------------
/Toast Notification/message.css:
--------------------------------------------------------------------------------
 1 | /* style.css */
 2 | 
 3 | body {
 4 |   font-family: Arial, sans-serif;
 5 |   margin: 0;
 6 |   padding: 0;
 7 |   background-color: #000000;
 8 |   display: flex;
 9 |   justify-content: center;
10 |   align-items: center;
11 |   height: 100vh;
12 | }
13 | 
14 | #container {
15 |   position: relative;
16 |   text-align: center;
17 | }
18 | 
19 | #toasts {
20 |   position: absolute;
21 |   bottom: 100%;
22 |   left: 50%;
23 |   transform: translateX(-50%);
24 |   z-index: 1000;
25 |   margin-bottom: 10px;
26 | }
27 | 
28 | .toast {
29 |   background-color: #333;
30 |   color: #fff;
31 |   padding: 10px 20px;
32 |   margin-bottom: 10px;
33 |   border-radius: 5px;
34 |   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
35 |   opacity: 0;
36 |   transition: opacity 0.5s ease-in-out;
37 | }
38 | 
39 | .toast.show {
40 |   opacity: 1;
41 | }
42 | 
43 | .btn {
44 |   padding: 10px 20px;
45 |   background-color: #007bff;
46 |   color: #fff;
47 |   border: none;
48 |   border-radius: 5px;
49 |   cursor: pointer;
50 |   font-size: 16px;
51 | }
52 | 
53 | .btn:hover {
54 |   background-color: #0056b3;
55 | }
56 | 


--------------------------------------------------------------------------------
/Toast Notification/message.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="message.css" />
 7 |   <title>Toast Notification</title>
 8 | </head>
 9 | <body>
10 |   <div id="container">
11 |     <div id="toasts"></div>
12 |     <button class="btn" id="button">Show Notification</button>
13 |   </div>
14 | 
15 |   <script src="message.js"></script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Toast Notification/message.js:
--------------------------------------------------------------------------------
 1 | // script.js
 2 | 
 3 | document.addEventListener('DOMContentLoaded', () => {
 4 |     const button = document.getElementById('button');
 5 |     const toastsContainer = document.getElementById('toasts');
 6 |   
 7 |     button.addEventListener('click', () => {
 8 |       showToast('This is a toast notification!');
 9 |     });
10 |   
11 |     function showToast(message) {
12 |       const toast = document.createElement('div');
13 |       toast.classList.add('toast');
14 |       toast.textContent = message;
15 |   
16 |       toastsContainer.appendChild(toast);
17 |   
18 |       setTimeout(() => {
19 |         toast.classList.add('show');
20 |       }, 10);
21 |   
22 |       setTimeout(() => {
23 |         toast.classList.remove('show');
24 |         setTimeout(() => {
25 |           toastsContainer.removeChild(toast);
26 |         }, 500);
27 |       }, 3000);
28 |     }
29 |   });
30 |   
31 | 


--------------------------------------------------------------------------------
/Weather App/weather.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     display: flex;
  3 |     justify-content: center;
  4 |     align-items: center;
  5 |     height: 100vh;
  6 |     margin: 0;
  7 |     font-family: 'Open Sans', sans-serif;
  8 |     background: black;
  9 |     background-image: url('weather.jpg');
 10 |     background-size: cover;
 11 |     font-size: 120%;
 12 | }
 13 | 
 14 | .card {
 15 |     background-image: url('weather.jpg');
 16 |     background: #222;
 17 |     color: white;
 18 |     padding: 2em;
 19 |     border-radius: 30px;
 20 |     width: 100%;
 21 |     max-width: 420px;
 22 |     margin: 1em;
 23 |     position: relative;
 24 |     overflow: hidden;
 25 |     box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
 26 | }
 27 | 
 28 | .card::before {
 29 |     content: '';
 30 |     position: absolute;
 31 |     top: -10px;
 32 |     left: -10px;
 33 |     right: -10px;
 34 |     bottom: -10px;
 35 |     background: linear-gradient(45deg, #ff0081, #ff8c00, #fffc00, #00fffc);
 36 |     border-radius: 40px;
 37 |     z-index: -1;
 38 |     filter: blur(10px);
 39 | }
 40 | 
 41 | .search {
 42 |     display: flex;
 43 |     align-items: center;
 44 |     justify-content: center;
 45 | }
 46 | 
 47 | button {
 48 |     margin: 0.5em;
 49 |     border-radius: 50%;
 50 |     border: none;
 51 |     height: 44px;
 52 |     width: 44px;
 53 |     outline: none;
 54 |     background: #7c7c7c2b;
 55 |     color: white;
 56 |     cursor: pointer;
 57 |     transition: 0.2s ease-in-out;
 58 | }
 59 | 
 60 | input.search-bar {
 61 |     border: none;
 62 |     outline: none;
 63 |     padding: 0.4em 1em;
 64 |     border-radius: 24px;
 65 |     background: #7c7c7c2b;
 66 |     color: white;
 67 |     font-family: inherit;
 68 |     font-size: 105%;
 69 |     width: calc(100% - 100px);
 70 | }
 71 | 
 72 | button:hover {
 73 |     background: #7c7c7c6b;
 74 | }
 75 | 
 76 | h1.temp {
 77 |     margin: 0;
 78 |     margin-bottom: 0.4em;
 79 | }
 80 | 
 81 | .flex {
 82 |     display: flex;
 83 |     align-items: center;
 84 | }
 85 | 
 86 | .description {
 87 |     text-transform: capitalize;
 88 |     margin-left: 8px;
 89 | }
 90 | 
 91 | .weather.loading {
 92 |     visibility: hidden;
 93 |     max-height: 20px;
 94 |     position: relative;
 95 | }
 96 | 
 97 | .weather.loading:after {
 98 |     visibility: visible;
 99 |     content: "Loading...";
100 |     color: white;
101 |     position: absolute;
102 |     top: 0;
103 |     left: 20px;
104 | }
105 | 


--------------------------------------------------------------------------------
/Weather App/weather.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 |   <title>Weather App</title>
 8 |   <link rel="preconnect" href="https://fonts.gstatic.com">
 9 |   <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
10 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
11 |   <link rel="stylesheet" href="weather.css">
12 | 
13 | </head>
14 | 
15 | <body>
16 |   <div>
17 |   <div class="card">
18 |     <div class="search">
19 |       <input type="text" class="search-bar" placeholder="Search">
20 |       <button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
21 |           width="1.5em" xmlns="http://www.w3.org/2000/svg">
22 |           <path
23 |             d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
24 |           </path>
25 |         </svg></button>
26 |     </div>
27 |     <div class="weather loading">
28 |       <h2 class="city">Weather in Denver</h2>
29 |       <h1 class="temp">51°C</h1>
30 |       <div class="flex">
31 |         <img src="weather.jpg" alt="" class="icon" />
32 |         <div class="description">Cloudy</div>
33 |       </div>
34 |       <div class="humidity">Humidity: 60%</div>
35 |       <div class="wind">Wind speed: 6.2 km/h</div>
36 |     </div>
37 |   </div>
38 |   <br>
39 |   <br>
40 | <script src="weather.js" defer></script>
41 | </body>
42 | 
43 | </html>
44 | 


--------------------------------------------------------------------------------
/Weather App/weather.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TechbyWebCoder/Html-Css-Project/33bd086df2a678d3ecd356c17d423ef75ae32865/Weather App/weather.jpg


--------------------------------------------------------------------------------
/Weather App/weather.js:
--------------------------------------------------------------------------------
 1 | let weather = {
 2 |     apiKey: "67b92f0af5416edbfe58458f502b0a31",
 3 |     fetchWeather: function (city) {
 4 |       fetch(
 5 |         "https://api.openweathermap.org/data/2.5/weather?q=" +
 6 |           city +
 7 |           "&units=metric&appid=" +
 8 |           this.apiKey
 9 |       )
10 |         .then((response) => {
11 |           if (!response.ok) {
12 |             alert("No weather found.");
13 |             throw new Error("No weather found.");
14 |           }
15 |           return response.json();
16 |         })
17 |         .then((data) => this.displayWeather(data));
18 |     },
19 |     displayWeather: function (data) {
20 |       const { name } = data;
21 |       const { icon, description } = data.weather[0];
22 |       const { temp, humidity } = data.main;
23 |       const { speed } = data.wind;
24 |       document.querySelector(".city").innerText = "Weather in " + name;
25 |       document.querySelector(".icon").src =
26 |         "https://openweathermap.org/img/wn/" + icon + ".png";
27 |       document.querySelector(".description").innerText = description;
28 |       document.querySelector(".temp").innerText = temp + "°C";
29 |       document.querySelector(".humidity").innerText =
30 |         "Humidity: " + humidity + "%";
31 |       document.querySelector(".wind").innerText =
32 |         "Wind speed: " + speed + " km/h";
33 |       document.querySelector(".weather").classList.remove("loading");
34 |       document.body.style.backgroundImage =
35 |         "url('https://source.unsplash.com/1600x900/?" + name + "')";
36 |     },
37 |     search: function () {
38 |       this.fetchWeather(document.querySelector(".search-bar").value);
39 |     },
40 |   };
41 |   
42 |   document.querySelector(".search button").addEventListener("click", function () {
43 |     weather.search();
44 |   });
45 |   
46 |   document
47 |     .querySelector(".search-bar")
48 |     .addEventListener("keyup", function (event) {
49 |       if (event.key == "Enter") {
50 |         weather.search();
51 |       }
52 |     });
53 |   
54 |   weather.fetchWeather("Patna");
55 |   


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