├── Animated Login Page Using HTML CSS & JAVA SCRIPT ├── index.html ├── script.js └── style.css ├── Animated Login page Part 2 ├── Animated log-in $ Ragistration.zip ├── index.html ├── script.js └── style.css ├── COFFEE SHOP LANDING PAGE ├── Social media icons │ ├── appstore.png │ └── palystore.png ├── footer.html ├── footercss.css ├── images │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── ilovepdf_pages-to-jpg (6).zip │ ├── logo.png │ └── main.png ├── index.html ├── outlets │ ├── 1.jpg │ ├── 2.jpg │ └── 3.jpg └── style.css ├── Diwali project 2024 ├── H-D.png ├── Happy diwali.html ├── rangoli.png └── style.css ├── Do you love me └── Webpage of Girlfriend │ ├── index.html │ ├── no1.html │ ├── no2.html │ ├── no3.html │ ├── script.js │ ├── style.css │ └── yes.html ├── Event management Form ├── Event Registration Form 2.html └── Event Registration Form.html ├── Eyes mouse move ├── index.html ├── script.js └── style.css ├── Floating Emoji Login page ├── emoji.css └── loginpage.html ├── Ganesh chaturthi 2024 ├── Background.mp4 ├── G.png ├── M.png ├── M2.png ├── New.html └── new.css ├── Happy Independence Day Project ├── index.html └── style.css ├── Happy janmashtami - RADHE RADHE ├── K.png ├── M.png ├── New.html ├── light.mp4 ├── matki.png └── new.css ├── Happy janmashtami Part -2 - RADHE RADHE └── happy-janmashtami-1.html ├── Legend Login page move button without fill details ├── funny login page.html └── login.css ├── Proposed Your Girl ├── Propose.html └── style.css ├── Shiva Using Python- Code With patel └── shiva.py ├── Vocie to Text ├── index.html ├── script.js └── style.css ├── Webpage of Girlfriend ├── index.html ├── no1.html ├── no2.html ├── no3.html ├── script.js ├── style.css └── yes.html └── frying pan ├── index (1).html └── style.css /Animated Login Page Using HTML CSS & JAVA SCRIPT/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Login & Register Page ->> Code With Patel 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Create Account

21 | 27 | Register with E-mail 28 | 29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 |

Sign In

39 | 45 | Login With Email & Password 46 | 47 | 48 | Forget Password? 49 | 50 |
51 |
52 | 53 | 54 |
55 |
56 |
57 |

Welcome To
Code with Patel

58 |

Sign in With ID & Passowrd

59 | 60 |
61 |
62 |

Hii Coder's

63 |

Join "Code With Patel" to Improve Your Coding Skills

64 | 65 |
66 |
67 |
68 |
69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /Animated Login Page Using HTML CSS & JAVA SCRIPT/script.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById('container'); 2 | const registerBtn = document.getElementById('register'); 3 | const loginBtn = document.getElementById('login'); 4 | 5 | registerBtn.addEventListener('click', () => { 6 | container.classList.add("active"); 7 | }); 8 | 9 | loginBtn.addEventListener('click', () => { 10 | container.classList.remove("active"); 11 | }); -------------------------------------------------------------------------------- /Animated Login Page Using HTML CSS & JAVA SCRIPT/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Montserrat', sans-serif; 8 | } 9 | 10 | body{ 11 | background-color: rgba(0, 0, 0, 0.795); 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | flex-direction: column; 16 | height: 100vh; 17 | } 18 | 19 | .container{ 20 | background-color: #fff; 21 | border-radius: 30px; 22 | box-shadow: 0 5px 15px rgba(255, 255, 255, 0.35); 23 | position: relative; 24 | overflow: hidden; 25 | width: 768px; 26 | max-width: 100%; 27 | min-height: 480px; 28 | } 29 | 30 | .container p{ 31 | font-size: 14px; 32 | line-height: 20px; 33 | letter-spacing: 0.3px; 34 | margin: 20px 0; 35 | } 36 | 37 | .container span{ 38 | font-size: 12px; 39 | } 40 | 41 | .container a{ 42 | color: #333; 43 | font-size: 13px; 44 | text-decoration: none; 45 | margin: 15px 0 10px; 46 | } 47 | 48 | .container button{ 49 | background-color: rgb(255, 13, 13); 50 | color: #fff; 51 | font-size: 12px; 52 | padding: 10px 45px; 53 | border: 1px solid transparent; 54 | border-radius: 8px; 55 | font-weight: 600; 56 | letter-spacing: 0.5px; 57 | text-transform: uppercase; 58 | margin-top: 10px; 59 | cursor: pointer; 60 | } 61 | 62 | .container button.hidden{ 63 | background-color: transparent; 64 | border-color: #fff; 65 | } 66 | 67 | .container form{ 68 | background-color: #fff; 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | flex-direction: column; 73 | padding: 0 40px; 74 | height: 100%; 75 | } 76 | 77 | .container input{ 78 | background-color: #eee; 79 | border:none; 80 | margin: 8px 0; 81 | padding: 10px 15px; 82 | font-size: 13px; 83 | border-radius: 8px; 84 | width: 100%; 85 | outline: none; 86 | } 87 | 88 | .form-container{ 89 | position: absolute; 90 | top: 0; 91 | height: 100%; 92 | transition: all 0.6s ease-in-out; 93 | } 94 | 95 | .sign-in{ 96 | left: 0; 97 | width: 50%; 98 | z-index: 2; 99 | } 100 | 101 | .container.active .sign-in{ 102 | transform: translateX(100%); 103 | } 104 | 105 | .sign-up{ 106 | left: 0; 107 | width: 50%; 108 | opacity: 0; 109 | z-index: 1; 110 | } 111 | 112 | .container.active .sign-up{ 113 | transform: translateX(100%); 114 | opacity: 1; 115 | z-index: 5; 116 | animation: move 0.6s; 117 | } 118 | 119 | @keyframes move{ 120 | 0%, 49.99%{ 121 | opacity: 0; 122 | z-index: 1; 123 | } 124 | 50%, 100%{ 125 | opacity: 1; 126 | z-index: 5; 127 | } 128 | } 129 | 130 | .social-icons{ 131 | margin: 20px 0; 132 | } 133 | 134 | .social-icons a{ 135 | border: 1px solid #ccc; 136 | border-radius: 20%; 137 | display: inline-flex; 138 | justify-content: center; 139 | align-items: center; 140 | margin: 0 3px; 141 | width: 40px; 142 | height: 40px; 143 | } 144 | 145 | .toggle-container{ 146 | position: absolute; 147 | top: 0; 148 | left: 50%; 149 | width: 50%; 150 | height: 100%; 151 | overflow: hidden; 152 | transition: all 0.6s ease-in-out; 153 | border-radius: 20px; 154 | z-index: 1000; 155 | } 156 | 157 | .container.active .toggle-container{ 158 | transform: translateX(-100%); 159 | border-radius: 20px; 160 | } 161 | 162 | .toggle{ 163 | background-color: rgba(255, 4, 4, 0.952); 164 | height: 100%; 165 | color: #fff; 166 | position: relative; 167 | left: -100%; 168 | height: 100%; 169 | width: 200%; 170 | transform: translateX(0); 171 | transition: all 0.6s ease-in-out; 172 | } 173 | 174 | .container.active .toggle{ 175 | transform: translateX(50%); 176 | } 177 | 178 | .toggle-panel{ 179 | position: absolute; 180 | width: 50%; 181 | height: 100%; 182 | display: flex; 183 | align-items: center; 184 | justify-content: center; 185 | flex-direction: column; 186 | padding: 0 30px; 187 | text-align: center; 188 | top: 0; 189 | transform: translateX(0); 190 | transition: all 0.6s ease-in-out; 191 | } 192 | 193 | .toggle-left{ 194 | transform: translateX(-200%); 195 | } 196 | 197 | .container.active .toggle-left{ 198 | transform: translateX(0); 199 | } 200 | 201 | .toggle-right{ 202 | right: 0; 203 | transform: translateX(0); 204 | } 205 | 206 | -------------------------------------------------------------------------------- /Animated Login page Part 2/Animated log-in $ Ragistration.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Animated Login page Part 2/Animated log-in $ Ragistration.zip -------------------------------------------------------------------------------- /Animated Login page Part 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Login Register form 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 |
27 |

Login

28 |
29 | 30 |
31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 |
41 | 42 | 43 | 44 |
45 |

Don't have an account? Sign Up

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

Welcome Back!

53 |

Code with patel Welcome you to Our lovely Family thanks For joining

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

Sign Up

65 | 66 |
67 | 68 |
69 | 70 | 71 | 72 |
73 | 74 |
75 | 76 | 77 | 78 |
79 | 80 |
81 | 82 | 83 | 84 |
85 | 86 | 87 | 88 |
89 |

Already have an account?

90 |
91 | 92 |
93 |
94 | 95 |
96 |

Code with patel

97 |

Get more tutorial video on our channel and also Subscribe to our channel

98 |
99 | 100 |
101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /Animated Login page Part 2/script.js: -------------------------------------------------------------------------------- 1 | const wrapper = document.querySelector('.wrapper') 2 | const registerLink = document.querySelector('.register-link') 3 | const loginLink = document.querySelector('.login-link') 4 | 5 | registerLink.onclick = () => { 6 | wrapper.classList.add('active') 7 | } 8 | 9 | loginLink.onclick = () => { 10 | wrapper.classList.remove('active') 11 | } -------------------------------------------------------------------------------- /Animated Login page Part 2/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); 2 | 3 | :root{ 4 | --white: #ffffff; 5 | --black: #000; 6 | --lightBulue: #17a; 7 | } 8 | 9 | *{ 10 | margin: 0; 11 | padding: 0; 12 | box-sizing: border-box; 13 | font-family: 'Poppins', sans-serif; 14 | } 15 | 16 | body{ 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | min-height: 100vh; 21 | } 22 | 23 | .wrapper{ 24 | position: relative; 25 | width: 750px; 26 | height: 450px; 27 | background: var(--white); 28 | border: 2px solid var(--black); 29 | border-radius: 10px; 30 | box-shadow: 0 0 20px var(--black); 31 | overflow: hidden; 32 | } 33 | 34 | 35 | .wrapper .form-box{ 36 | position: absolute; 37 | top: 0; 38 | width: 50%; 39 | height: 100%; 40 | display: flex; 41 | justify-content: center; 42 | flex-direction: column; 43 | } 44 | 45 | .wrapper .form-box.login{ 46 | left: 0; 47 | padding: 0 60px 0 40px; 48 | } 49 | 50 | .form-box h2{ 51 | margin-bottom: 10px; 52 | position: relative; 53 | font-size: 32px; 54 | color: var(--black); 55 | text-align: center; 56 | } 57 | 58 | .form-box h2::after{ 59 | content: ""; 60 | position: absolute; 61 | bottom: -10px; 62 | left: 50%; 63 | transform: translateX(-50%); 64 | width: 40px; 65 | height: 4px; 66 | background: var(--black); 67 | } 68 | 69 | .form-box .input-box{ 70 | position: relative; 71 | width: 100%; 72 | height: 50px; 73 | margin: 25px 0; 74 | } 75 | 76 | .input-box input{ 77 | width: 100%; 78 | height: 100%; 79 | background: transparent; 80 | color: var(--black); 81 | font-size: 16px; 82 | font-weight: 500; 83 | border: none; 84 | outline: none; 85 | border-bottom: 2px solid var(--black); 86 | transition: .5s; 87 | padding-right: 23px; 88 | } 89 | 90 | .input-box input:focus, 91 | .input-box input:valid{ 92 | border-bottom-color: var(--lightBulue); 93 | } 94 | 95 | .input-box label{ 96 | position: absolute; 97 | top: 50%; 98 | left: 0; 99 | transform: translateY(-50%); 100 | font-size: 16px; 101 | color: var(--black); 102 | pointer-events: none; 103 | transition: 0.5s; 104 | } 105 | 106 | 107 | .input-box input:focus~label, 108 | .input-box input:valid~label{ 109 | top: -5px; 110 | color: var(--lightBulue); 111 | } 112 | 113 | 114 | .input-box i{ 115 | position: absolute; 116 | top: 50%; 117 | right: 0; 118 | transform: translateY(-50%); 119 | font-size: 18px; 120 | transition: 0.5s; 121 | } 122 | 123 | .input-box input:focus~i, 124 | .input-box input:valid~i{ 125 | color: var(--lightBulue); 126 | } 127 | 128 | form button{ 129 | width: 100%; 130 | height: 45px; 131 | background-color: var(--black); 132 | color: var(--white); 133 | border: none; 134 | outline: none; 135 | border-radius: 40px; 136 | cursor: pointer; 137 | font-size: 16px; 138 | font-weight: 600; 139 | transition: .3s; 140 | } 141 | 142 | form button:hover{ 143 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); 144 | } 145 | 146 | form .linkTxt{ 147 | font-size: 14px; 148 | color: var(--black); 149 | text-align: center; 150 | margin: 20px 0 10px; 151 | } 152 | 153 | .linkTxt p a{ 154 | color: blue; 155 | text-decoration: none; 156 | font-weight: 600; 157 | } 158 | 159 | .wrapper .form-box.login .animation{ 160 | transform: translateX(0); 161 | transition: 0.7s ease; 162 | opacity: 1; 163 | filter: blur(0); 164 | transition-delay: calc(.1s * var(--j)); 165 | } 166 | 167 | 168 | .wrapper.active .form-box.login .animation{ 169 | transform: translateX(-120%); 170 | opacity: 0; 171 | filter: blur(10px); 172 | transition-delay: calc(.1s * var(--i)); 173 | } 174 | 175 | 176 | 177 | 178 | 179 | 180 | .wrapper .info-text{ 181 | position: absolute; 182 | top: 0; 183 | width: 50%; 184 | height: 100%; 185 | display: flex; 186 | flex-direction: column; 187 | justify-content: center; 188 | } 189 | 190 | .wrapper .info-text.login{ 191 | right: 0; 192 | text-align: right; 193 | padding: 0 40px 60px 150px; 194 | 195 | } 196 | 197 | .wrapper .info-text h2{ 198 | font-size: 36px; 199 | color: var(--white); 200 | line-height: 1.3; 201 | text-transform: uppercase; 202 | } 203 | 204 | .wrapper .info-text p{ 205 | font-size: 16px; 206 | color: var(--white); 207 | } 208 | 209 | 210 | .wrapper .info-text.login .animation{ 211 | transform: translateX(0); 212 | opacity: 1; 213 | filter: blur(0); 214 | transition: 0.7s ease; 215 | transition-delay: calc(.1s * var(--j)); 216 | } 217 | .wrapper.active .info-text.login .animation{ 218 | transform: translateX(120px); 219 | opacity: 0; 220 | filter: blur(10px); 221 | transition: 0.7s ease; 222 | transition-delay: calc(.1s * var(--i)); 223 | } 224 | 225 | 226 | 227 | 228 | 229 | .wrapper .rotate-bg{ 230 | position: absolute; 231 | top: -4px; 232 | right: 0; 233 | width: 850px; 234 | height: 600px; 235 | background: #000; 236 | transform: rotate(10deg) skewY(40deg); 237 | transform-origin: bottom right; 238 | transition: 1.5s ease; 239 | transition-delay: 1.6s; 240 | } 241 | 242 | .wrapper.active .rotate-bg{ 243 | transform: rotate(0) skewY(0); 244 | transition-delay: 0.5s; 245 | } 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | .wrapper .form-box.register{ 258 | padding: 0 40px 0 60px; 259 | right: 0; 260 | } 261 | 262 | .wrapper.active .form-box.register{ 263 | pointer-events: auto; 264 | } 265 | 266 | 267 | .wrapper .form-box.register .animation{ 268 | transform: translateX(120%); 269 | opacity: 0; 270 | filter: blur(10px); 271 | transition: .7s ease; 272 | transition-delay: calc(.1s * var(--j)); 273 | } 274 | 275 | .wrapper.active .form-box.register .animation{ 276 | transform: translateX(0); 277 | opacity: 1; 278 | filter: blur(0); 279 | transition-delay: calc(.1s * var(--i)); 280 | } 281 | 282 | 283 | 284 | .wrapper .info-text.register{ 285 | left: 0; 286 | text-align: left; 287 | padding: 0 150px 60px 40px; 288 | pointer-events: none; 289 | } 290 | 291 | .wrapper.active .info-text.register{ 292 | pointer-events: auto; 293 | } 294 | 295 | 296 | .wrapper .info-text.register .animation{ 297 | transform: translateX(-120%); 298 | opacity: 0; 299 | filter: blur(10px); 300 | transition: .7s ease; 301 | transition-delay: calc(.1s * var(--j)); 302 | } 303 | 304 | .wrapper.active .info-text.register .animation{ 305 | transform: translateX(0); 306 | opacity: 1; 307 | filter: blur(0); 308 | transition-delay: calc(.1s * var(--i)); 309 | } 310 | 311 | 312 | 313 | 314 | .wrapper .rotate-bg2{ 315 | position: absolute; 316 | top: 100%; 317 | left: 250px; 318 | width: 850px; 319 | height: 700px; 320 | background: var(--white); 321 | transform: rotate(0) skewY(0); 322 | transform-origin: bottom left; 323 | transition: 1.5s ease; 324 | transition-delay: 0.5s; 325 | } 326 | 327 | .wrapper.active .rotate-bg2{ 328 | transform: rotate(-11deg) skewY(-40deg); 329 | transition-delay: 1.2s; 330 | } -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/Social media icons/appstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/Social media icons/appstore.png -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/Social media icons/palystore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/Social media icons/palystore.png -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Footer 8 | 9 | 10 | 11 | 12 | 13 |

OUR OUTLETS

14 |
15 |
16 | 1 17 |

Outlet 1

18 |

Address: Mumbai

19 |
20 |
21 | 1 22 |

Outlet 2

23 |

Address: Ahmedabad

24 |
25 |
26 | 1 27 |

Outlet 3

28 |

Address: Surat

29 |
30 |
31 | 32 | 33 |

FIND US ON MAP

34 |
35 | 36 |
37 | 38 | 39 |
40 |
41 | 44 | 45 |
46 |

About us

47 |

Our Heritage

48 |

Coffeehouse

49 |

Our Company

50 |
51 | 52 |
53 |

Responsibility

54 |

Diversity

55 |

Community

56 |

Entical Sourcing

57 |
58 | 59 |
60 |

Quick Links

61 |

Privacy policy

62 |

FAQs

63 |

Customer Service

64 |

Delivery

65 |
66 | 67 |
68 |

Dowload Our App

69 | 70 |
71 | app store 72 | Playstore 73 |
74 |
75 |
76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/footercss.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial,sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | background-color: #f8f8f8; 7 | } 8 | 9 | /* outlets section */ 10 | 11 | h2{ 12 | text-align: center; 13 | margin-top: 30px; 14 | font-size: xx-large; 15 | } 16 | 17 | .outlets-container{ 18 | display: grid; 19 | grid-template-columns: repeat(auto-fit,minmax(300px, 1fr)); 20 | gap: 20px; 21 | padding: 40px; 22 | max-width: 1200px; 23 | margin: auto; 24 | } 25 | 26 | .outlet{ 27 | background: white; 28 | border-radius: 10px; 29 | padding: 20px; 30 | text-align: center; 31 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 32 | transition: 0.3s; 33 | } 34 | 35 | .outlet:hover{ 36 | transform: scale(1.05); 37 | } 38 | 39 | .outlet img{ 40 | width: 100%; 41 | height: 300px; 42 | object-fit: cover; 43 | border-radius: 5px; 44 | } 45 | 46 | /* google map */ 47 | 48 | .map-container{ 49 | text-align: center; 50 | margin: 40px 0; 51 | } 52 | 53 | iframe{ 54 | width: 80%; 55 | height: 400px; 56 | border: none; 57 | border-radius: 10px; 58 | } 59 | 60 | /* Footer */ 61 | 62 | .footer{ 63 | background-color: #013220; 64 | color:white; 65 | padding: 40px; 66 | } 67 | 68 | .footer-container{ 69 | display: grid; 70 | grid-template-columns: repeat(4,1fr); 71 | gap:20px; 72 | max-width: 1200px; 73 | margin:auto; 74 | text-align: left; 75 | } 76 | 77 | .footer-logo img{ 78 | width: 100px; 79 | } 80 | 81 | .footer-section h3, .footer-social h3{ 82 | font-size: 18px; 83 | margin-bottom: 15px; 84 | } 85 | 86 | .footer-section p a{ 87 | text-decoration: none; 88 | color:white; 89 | display: block; 90 | margin-bottom: 8px; 91 | transition: color 0.3s; 92 | } 93 | 94 | .footer-section p a:hover{ 95 | color: #ddd; 96 | } 97 | 98 | .app-buttons a img{ 99 | width: 120px; 100 | height: 40px; 101 | margin-top: 10px; 102 | } -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/images/1.png -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/images/2.png -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/images/3.png -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/images/4.png -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/images/ilovepdf_pages-to-jpg (6).zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/images/ilovepdf_pages-to-jpg (6).zip -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/images/logo.png -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/images/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/images/main.png -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coffee Landing Page - CODE WITH PATEL 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | 21 |
22 | 23 |
24 |
25 |

Its not just a Coffee
Its Moment.

26 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis corrupti voluptatibus eligendi eveniet minima labore odit voluptates iusto officia amet.

27 | Learn more 28 |
29 | 30 |
31 | 32 |
33 |
34 | 35 | 40 | 41 | 46 |
47 | 48 |
49 |

Our Popular Coffees

50 |
51 |
52 | coffee1 53 |

Carmel Macchiato

54 |

Rich Espresso with caramel and milk.

55 |
56 |
57 | coffee1 58 |

Carmel Macchiato

59 |

Rich Espresso with caramel and milk.

60 |
61 |
62 | coffee1 63 |

Carmel Macchiato

64 |

Rich Espresso with caramel and milk.

65 |
66 |
67 | coffee1 68 |

Carmel Macchiato

69 |

Rich Espresso with caramel and milk.

70 |
71 |
72 | coffee1 73 |

Carmel Macchiato

74 |

Rich Espresso with caramel and milk.

75 |
76 |
77 | coffee1 78 |

Carmel Macchiato

79 |

Rich Espresso with caramel and milk.

80 |
81 |
82 | coffee1 83 |

Carmel Macchiato

84 |

Rich Espresso with caramel and milk.

85 |
86 |
87 | coffee1 88 |

Carmel Macchiato

89 |

Rich Espresso with caramel and milk.

90 |
91 |
92 | 93 | 94 |
95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/outlets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/outlets/1.jpg -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/outlets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/outlets/2.jpg -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/outlets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/COFFEE SHOP LANDING PAGE/outlets/3.jpg -------------------------------------------------------------------------------- /COFFEE SHOP LANDING PAGE/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,300;1,700&family=Poppins:wght@400;500;600;700;800;900&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'poppines',sans-serif; 7 | } 8 | 9 | section{ 10 | position: relative; 11 | width: 100%; 12 | min-width: 100vh; 13 | padding: 100px; 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | background: #fff; 18 | } 19 | 20 | header{ 21 | position: absolute; 22 | top: 0; 23 | left: 0; 24 | width: 100%; 25 | padding: 20px 10px; 26 | display: flex; 27 | justify-content: space-between; 28 | align-items: center; 29 | } 30 | 31 | header .logo{ 32 | position: relative; 33 | max-width: 80px; 34 | } 35 | 36 | header ul{ 37 | position: relative; 38 | display: flex; 39 | } 40 | 41 | header ul li{ 42 | list-style: none; 43 | } 44 | 45 | header ul li a{ 46 | display: inline-block; 47 | color: #333; 48 | font-weight: 800; 49 | margin-left: 40px; 50 | text-decoration: none; 51 | } 52 | 53 | .container{ 54 | position: relative; 55 | width: 100%; 56 | display: flex; 57 | justify-content: space-between; 58 | align-items: center; 59 | } 60 | 61 | .container .text-box{ 62 | position: relative; 63 | max-width: 600px; 64 | } 65 | 66 | .container .text-box h2{ 67 | color: #333; 68 | font-size: 4em; 69 | font-weight: 500px; 70 | } 71 | 72 | .container .text-box h2 span{ 73 | color: #107143; 74 | font-size: 1.2em; 75 | font-weight: 900; 76 | } 77 | 78 | .container.text-box p{ 79 | color: #333; 80 | } 81 | 82 | .container .text-box a{ 83 | display: inline-block; 84 | margin-top: 20px; 85 | padding: 8px 20px; 86 | background: #107143 ; 87 | color: #fff; 88 | border-radius: 40px; 89 | font-weight: 500; 90 | letter-spacing: 1px; 91 | text-decoration: none; 92 | } 93 | 94 | .container .img-box{ 95 | width: 600px; 96 | display: flex; 97 | justify-content: flex-end; 98 | padding-right: 50px; 99 | margin-top: 50px; 100 | } 101 | 102 | .container .img-box img{ 103 | max-width: 380px; 104 | } 105 | 106 | .thumb{ 107 | position: absolute; 108 | left: 50%; 109 | bottom: 20px; 110 | transform: translateX(-50%); 111 | display: flex; 112 | } 113 | 114 | .thumb li{ 115 | list-style: none; 116 | display: inline-block; 117 | margin: 0 20px; 118 | padding: 20px; 119 | cursor: pointer; 120 | transition: 0.5s; 121 | } 122 | 123 | .thumb li:hover{ 124 | transform: translateY(-15px); 125 | } 126 | 127 | .thumb li img{ 128 | max-width: 150px; /*Adjust the size as needed*/ 129 | height: auto; /*Maintain aspect ration*/ 130 | } 131 | 132 | .social{ 133 | position:absolute; 134 | top: 50%; 135 | right:30px; 136 | transform: translateY(-50%); 137 | display: flex; 138 | justify-content: center; 139 | align-items: center; 140 | flex-direction: column; 141 | } 142 | 143 | .social li{ 144 | list-style: none; 145 | } 146 | 147 | 148 | .social li a{ 149 | display: inline-block; 150 | margin: 5px 0; 151 | transform: scale(0.6); 152 | filter: invert(1); 153 | } 154 | 155 | .circle{ 156 | position: absolute; 157 | top: 0; 158 | left: 0; 159 | width: 100%; 160 | height: 100%; 161 | background: #107143; 162 | clip-path: circle(600px at right 800px); 163 | } 164 | 165 | .coffee-list{ 166 | text-align: center; 167 | padding: 50px 20px; 168 | background: #f8f8f8; 169 | } 170 | 171 | .coffee-list h2{ 172 | font-size: 2.5em; 173 | margin-bottom: 20px; 174 | color: #333; 175 | } 176 | 177 | .coffee-container{ 178 | display: flex; 179 | justify-content: center; 180 | gap:20px; 181 | flex-wrap: wrap; 182 | } 183 | 184 | .coffee-card{ 185 | background: white; 186 | padding: 15px; 187 | border-radius: 10px; 188 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 189 | text-align: center; 190 | width: 200px; 191 | transition: 0.3s ease-in-out; 192 | } 193 | 194 | .coffee-card img{ 195 | max-width: 100%; 196 | height: auto; 197 | border-radius: 10px; 198 | } 199 | 200 | .coffee-card h3{ 201 | font-size: 1.2rem; 202 | margin: 10px 0; 203 | color: #107143; 204 | } 205 | 206 | .coffee-card p{ 207 | font-size: 0.9rem; 208 | color: #555; 209 | } 210 | 211 | .coffee-card:hover{ 212 | transform: scale(1.05); 213 | } -------------------------------------------------------------------------------- /Diwali project 2024/H-D.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Diwali project 2024/H-D.png -------------------------------------------------------------------------------- /Diwali project 2024/Happy diwali.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Diwali card 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | Avatar 16 | 17 |
18 | 19 |

शुभ दीपावली! इस दीवाली आपके जीवन में सुख, समृद्धि और खुशियों का प्रकाश छाए।

20 | 21 |

Wishing you

22 | 23 |

24 | Happy 25 | Diwali 26 |

27 | 28 |

2024

29 | 30 |
31 |
32 |
33 | 34 |
35 |
36 | 37 | 38 | 39 | 40 |
41 |
42 | 43 | 44 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /Diwali project 2024/rangoli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Diwali project 2024/rangoli.png -------------------------------------------------------------------------------- /Diwali project 2024/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fdc830; 3 | background: -webkit-linear-gradient(to right, #f37335, #fdc830); 4 | background: linear-gradient(to right, #f37335, #fdc830); 5 | font-family: "Dancing Script", cursive; 6 | } 7 | .cont { 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | align-content: center; 13 | margin: 100px auto 10px auto; 14 | width: 100%; 15 | } 16 | .card { 17 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 18 | transition: 0.3s; 19 | width: 60%; 20 | justify-content: center; 21 | align-content: center; 22 | border-radius: 30px; 23 | background-color: #fff; 24 | } 25 | .card > img { 26 | width: 90%; 27 | height: 350px; 28 | border-radius: 15px 15px 30px 30px; 29 | box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 30 | margin: 0 5%; 31 | top: -80px; 32 | position: relative; 33 | } 34 | 35 | .container { 36 | padding: 2px 16px; 37 | text-align: center; 38 | color: #000; 39 | } 40 | @media screen and (max-width: 900px) { 41 | .card { 42 | width: 100%; 43 | } 44 | } 45 | 46 | 47 | @keyframes flicker { 48 | 0% { 49 | transform: skewX(5deg); 50 | box-shadow: 0 0 10px rgba(255, 165, 0, 0.2), 0 0 20px rgba(255, 165, 0, 0.2), 51 | 0 0 60px rgba(255, 165, 0, 0.2), 0 0 80px rgba(255, 165, 0, 0.2); 52 | } 53 | 25% { 54 | transform: skewX(-5deg); 55 | box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 56 | 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5); 57 | } 58 | 50% { 59 | transform: skewX(10deg); 60 | box-shadow: 0 0 10px rgba(255, 165, 0, 0.3), 0 0 20px rgba(255, 165, 0, 0.3), 61 | 0 0 60px rgba(255, 165, 0, 0.3), 0 0 80px rgba(255, 165, 0, 0.3); 62 | } 63 | 75% { 64 | transform: skewX(-10deg); 65 | box-shadow: 0 0 10px rgba(255, 165, 0, 0.4), 0 0 20px rgba(255, 165, 0, 0.4), 66 | 0 0 60px rgba(255, 165, 0, 0.4), 0 0 80px rgba(255, 165, 0, 0.4); 67 | } 68 | 100% { 69 | transform: skewX(5deg); 70 | box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 71 | 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5); 72 | } 73 | } 74 | .ml15 { 75 | font-weight: 800; 76 | font-size: 2.8em; 77 | text-transform: uppercase; 78 | letter-spacing: 0.5em; 79 | text-shadow: 2px 0px 5px rgba(15, 6, 4, 0.87); 80 | font-family: monospace; 81 | } 82 | 83 | .ml15 .word { 84 | display: inline-block; 85 | line-height: 1em; 86 | } 87 | img:hover { 88 | animation: shake 0.5s infinite; 89 | } 90 | 91 | @keyframes shake { 92 | 0% { 93 | transform: translate(1px, 1px) rotate(0deg); 94 | } 95 | 10% { 96 | transform: translate(-1px, -2px) rotate(-1deg); 97 | } 98 | 20% { 99 | transform: translate(-3px, 0px) rotate(1deg); 100 | } 101 | 30% { 102 | transform: translate(3px, 2px) rotate(0deg); 103 | } 104 | 40% { 105 | transform: translate(1px, -1px) rotate(1deg); 106 | } 107 | 50% { 108 | transform: translate(-1px, 2px) rotate(-1deg); 109 | } 110 | 60% { 111 | transform: translate(-3px, 1px) rotate(0deg); 112 | } 113 | 70% { 114 | transform: translate(3px, 1px) rotate(-1deg); 115 | } 116 | 80% { 117 | transform: translate(-1px, -1px) rotate(1deg); 118 | } 119 | 90% { 120 | transform: translate(1px, 2px) rotate(0deg); 121 | } 122 | 100% { 123 | transform: translate(1px, -2px) rotate(0deg); 124 | } 125 | } 126 | 127 | .credit a { 128 | text-decoration: none; 129 | color: #000; 130 | font-weight: 900; 131 | } 132 | 133 | .credit { 134 | font-family: Verdana, Geneva, Tahoma, sans-serif; 135 | font-size: 10px; 136 | } 137 | 138 | 139 | /* Rangoli design Code */ 140 | 141 | .container2{ 142 | width: 100%; 143 | max-width: 1200px; 144 | margin: 0 auto; 145 | } 146 | .inner-box{ 147 | position: relative; 148 | height: 100vh; 149 | width: 100%; 150 | } 151 | .r1{ 152 | width: 400px; 153 | position: absolute; 154 | top: -1000px; 155 | Left: -10%; 156 | } 157 | .r2{ 158 | width: 400px; 159 | position: absolute; 160 | top: -1000px; 161 | Left: 77%; 162 | } -------------------------------------------------------------------------------- /Do you love me/Webpage of Girlfriend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Proposed Her 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Manja Stickerfrom 17 | Manja Stickers 18 |
19 | 20 | 21 |

Do you love me? 🤗

22 |

Chiku is all yours

23 | 24 |
25 | Yes 26 | No 27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Do you love me/Webpage of Girlfriend/no1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ask Her Out 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Mochi Stickerfrom 17 | Mochi Stickers 18 |
19 | 20 |

Please think again! 🙄

21 |

itni jaldi na matt bolo😥

22 | 23 |
24 | Yes 25 | No 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Do you love me/Webpage of Girlfriend/no2.html: -------------------------------------------------------------------------------- 1 | " 2 | 3 | 4 | 5 | 6 | 7 | Ask Her Out 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Couple 17 | Forgive Me Stickerfrom 18 | Couple Stickers 19 |
20 | 21 | 22 |

Ek aur baar Soch lo! 😣

23 |

kyu aisa kar rahi ho Plzzz Man jao😣

24 | 25 |
26 | Yes 27 | No 28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /Do you love me/Webpage of Girlfriend/no3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ask Her Out 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Peach Goma Phone Stickerfrom 17 | Peach Goma Stickers 18 |
19 | 20 | 21 |

Baby Man jao na! Kitna bhav khaogi 😭

22 |

bhut glt baat hai yrr😭

23 | 24 |
25 | Yes 26 | No 27 |
28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Do you love me/Webpage of Girlfriend/script.js: -------------------------------------------------------------------------------- 1 | function moveRandomEl(elm) { 2 | elm.style.position = "absolute"; 3 | elm.style.top = Math.floor(Math.random() * 90 + 5) + "%"; 4 | elm.style.left = Math.floor(Math.random() * 90 + 5) + "%"; 5 | } 6 | 7 | const moveRandom = document.querySelector("#move-random"); 8 | 9 | moveRandom.addEventListener("mouseenter", function (e) { 10 | moveRandomEl(e.target); 11 | }); -------------------------------------------------------------------------------- /Do you love me/Webpage of Girlfriend/style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | width: 100%; 11 | min-height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background-color: #d9a6a6; 16 | } 17 | 18 | .container { 19 | display: flex; 20 | flex-direction: column; 21 | text-align: center; 22 | align-items: center; 23 | gap: 20px; 24 | max-width: 500px; 25 | margin: 20px; 26 | } 27 | 28 | .container .tenor-gif-embed { 29 | max-width: 200px; 30 | } 31 | 32 | .container .btn { 33 | display: flex; 34 | gap: 25px; 35 | } 36 | 37 | .btn a { 38 | text-decoration: none; 39 | color: #111; 40 | background: #fff; 41 | padding: 10px 25px; 42 | border-radius: 66px; 43 | box-shadow: 0.5rem 1rem 3rem hsl(0, 0%, 0%, 0.3); 44 | } -------------------------------------------------------------------------------- /Do you love me/Webpage of Girlfriend/yes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ask Her Out 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Mochi 18 | Cat GIFfrom Mochi GIFs 19 |
20 | 21 |

I knew it! You Love me a lot 😘

22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /Event management Form/Event Registration Form 2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Registration Form Code-With-patel 8 | 81 | 82 | 83 | 84 |
85 |

Register for the Event

86 |
87 |
88 | 89 | 90 |
91 |
92 | 93 | 94 |
95 |
96 | 97 | 98 |
99 |
100 | 101 | 107 |
108 |
109 | 110 | 111 |
112 |
113 | 114 |
115 |
116 |
117 | 118 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /Event management Form/Event Registration Form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Event Registration Form 7 | 73 | 74 | 75 |
76 |

Event Registration

77 |
78 |
79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 95 | 96 | 97 | 98 | 99 | 100 |
101 |
102 | 103 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /Eyes mouse move/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Eyes Mousemove 👀 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Eyes mouse move/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('mousemove', (e) => { 2 | const eyesContainer = document.querySelector('.eyes'); 3 | const eyes = document.querySelectorAll('.eyes > div'); 4 | 5 | if(!eyesContainer || eyes.length !== 2) return; 6 | 7 | const containerRect = eyesContainer.getBoundingClientRect(); 8 | const containerCenterX = containerRect.left + containerRect.width / 2; 9 | const containerCenterY = containerRect.top + containerRect.height / 2; 10 | 11 | const angle = Math.atan2(e.clientY - containerCenterY, 12 | e.clientX - containerCenterX); 13 | const distance = Math.min( 14 | eyes[0].offsetWidth / 4, 15 | Math.sqrt(Math.pow(e.clientX - containerCenterX, 2) + 16 | Math.pow(e.clientY - containerCenterY, 2)) 17 | ); 18 | 19 | const moveX = Math.cos(angle) * distance; 20 | const moveY = Math.sin(angle) * distance; 21 | 22 | eyes.forEach(eye => { 23 | const eyeBall = eye.querySelector('i'); 24 | eyeBall.style.transform = `translate(${moveX}px, ${moveY}px)`; 25 | }); 26 | }); -------------------------------------------------------------------------------- /Eyes mouse move/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | boz-sizing: border-box; 5 | } 6 | body { 7 | min-height: 100vh; 8 | display: grid; 9 | place-items: center; 10 | background: black; 11 | } 12 | @property --eyelid { 13 | syntax: ""; 14 | inherits: false; 15 | initial-value: 0%; 16 | } 17 | @property --eyelid2 { 18 | syntax: ""; 19 | inherits: false; 20 | initial-value: 0%; 21 | } 22 | .eyes { 23 | width: 250px; 24 | padding-block: 20px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | gap: 20px; 29 | 30 | div { 31 | position: relative; 32 | width: 90px; 33 | aspect-ratio: 1; 34 | background: white; 35 | border-radius: 50%; 36 | overflow: hidden; 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | &:before, 41 | &:after { 42 | content: ''; 43 | position: absolute; 44 | width: 116%; 45 | height: 165%; 46 | left: 50%; 47 | animation: eyelid 5s ease-in-out infinite; 48 | z-index: 1; 49 | } 50 | &:before { 51 | top: 0; 52 | border-radius: 0% 0% 40% 40%; 53 | transform: translateY(var(--eyelid)) translateX(-50%); 54 | border-bottom: 40px solid black; 55 | } 56 | &:after { 57 | bottom: 0; 58 | border-radius: 40% 40% 0% 0%; 59 | transform: translateY(var(--eyelid2)) translateX(-50%); 60 | border-top: 40px solid black; 61 | } 62 | i { 63 | position: absolute; 64 | width: 60px; 65 | aspect-ratio: inherit; 66 | background: black; 67 | border-radius: inherit; 68 | } 69 | } 70 | } 71 | 72 | @keyframes eyelid { 73 | 0% { 74 | --eyelid: -50%; 75 | --eyelid2: 50%; 76 | } 77 | 3% { 78 | --eyelid: 0%; 79 | --eyelid2: 0%; 80 | } 81 | 6% { 82 | --eyelid: -50%; 83 | --eyelid2: 50%; 84 | } 85 | 9%,100% { 86 | --eyelid: 0%; 87 | --eyelid2: 0%; 88 | } 89 | } -------------------------------------------------------------------------------- /Floating Emoji Login page/emoji.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | overflow: hidden; 4 | } 5 | 6 | .container { 7 | background-image: url('imgs/11.png'); 8 | height: 94vh; 9 | background-position: center; 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | 16 | } 17 | 18 | .login-box { 19 | width: 300px; 20 | padding: 40px; 21 | position: absolute; 22 | background: rgba(255, 255, 255, 0.1); 23 | box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); 24 | border-radius: 10px; 25 | backdrop-filter: blur(10px); 26 | text-align: center; 27 | z-index: 2; 28 | } 29 | 30 | .login-box h2 { 31 | margin: 0 0 30px; 32 | padding: 0; 33 | color: #fff; 34 | text-transform: uppercase; 35 | } 36 | 37 | .textbox { 38 | position: relative; 39 | margin-bottom: 30px; 40 | } 41 | 42 | .textbox input { 43 | width: 100%; 44 | padding: 10px; 45 | background: none; 46 | border: none; 47 | border-bottom: 2px solid #fff; 48 | outline: none; 49 | color: #fff; 50 | font-size: 18px; 51 | } 52 | 53 | .btn { 54 | width: 100%; 55 | background: none; 56 | border: 2px solid #fff; 57 | color: #fff; 58 | padding: 10px; 59 | cursor: pointer; 60 | font-size: 18px; 61 | transition: 0.3s; 62 | } 63 | 64 | .btn:hover { 65 | background: #fff; 66 | color: #000; 67 | } 68 | 69 | 70 | 71 | 72 | @keyframes floating { 73 | from { 74 | transform: translateY(100vh); 75 | } 76 | 77 | to { 78 | transform: translateY(-200vh); 79 | } 80 | } 81 | 82 | .emoji { 83 | position: absolute; 84 | font-size: 30px; 85 | animation: floating 10s linear infinite; 86 | z-index: 0; 87 | } 88 | 89 | .emoji:nth-child(odd) { 90 | animation-duration: 12s; 91 | } 92 | 93 | .emoji:nth-child(even) { 94 | animation-duration: 8s; 95 | } -------------------------------------------------------------------------------- /Floating Emoji Login page/loginpage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | remake login 9 | 10 | 11 | 12 | 13 | 14 |
15 | 31 |
32 | 33 | 34 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /Ganesh chaturthi 2024/Background.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Ganesh chaturthi 2024/Background.mp4 -------------------------------------------------------------------------------- /Ganesh chaturthi 2024/G.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Ganesh chaturthi 2024/G.png -------------------------------------------------------------------------------- /Ganesh chaturthi 2024/M.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Ganesh chaturthi 2024/M.png -------------------------------------------------------------------------------- /Ganesh chaturthi 2024/M2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Ganesh chaturthi 2024/M2.png -------------------------------------------------------------------------------- /Ganesh chaturthi 2024/New.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 17 |

Happy Ganesh Chaturthi

18 | 19 |
20 | 21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |

May Lord Ganesha bless you with joy, prosperity, and success this Ganesh Chaturthi.

32 | 33 | 34 | 35 | 44 | 45 | -------------------------------------------------------------------------------- /Ganesh chaturthi 2024/new.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | 6 | } 7 | 8 | .con{ 9 | width:100%; 10 | height: 100vh; 11 | background-color:rgba(0,0,0,0.4); 12 | } 13 | 14 | .background{ 15 | position: absolute; 16 | right: 0; 17 | bottom: 0; 18 | z-index: -1; 19 | } 20 | 21 | @media(min-aspect-ratio:16/9){ 22 | .background{ 23 | width: 100%; 24 | height: auto; 25 | } 26 | } 27 | 28 | @media(max-aspect-ratio:16/9){ 29 | .background{ 30 | width: auto; 31 | height: 100%; 32 | } 33 | } 34 | 35 | 36 | .container{ 37 | width: 100%; 38 | max-width: 1200px; 39 | margin: 0 auto; 40 | } 41 | .inner-box{ 42 | position: relative; 43 | height: 100vh; 44 | width: 100%; 45 | } 46 | .ganesha{ 47 | width: 500px; 48 | position: absolute; 49 | top: -1000px; 50 | Left: 31%; 51 | } 52 | .mushak{ 53 | width: 160px; 54 | position: absolute; 55 | bottom: -100px; 56 | Left: 63%; 57 | } 58 | .mushak2{ 59 | width: 170px; 60 | position: absolute; 61 | bottom: -100px; 62 | right: 62%; 63 | } 64 | .con h1{ 65 | font-size: 80px; 66 | position: absolute; 67 | bottom: 150px; 68 | left: -100%; 69 | color: #ffffff; 70 | 71 | } 72 | h4{ 73 | font-size: 30px; 74 | position: absolute; 75 | bottom: 90px; 76 | left: -100%; 77 | color: #ffffff; 78 | 79 | } 80 | -------------------------------------------------------------------------------- /Happy Independence Day Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Happy Independence Day! 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 |
18 | 19 | 20 |
21 | 22 | 23 |
24 | 25 | Ashoka Chakra 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |

HAPPY INDEPENDENCE DAY

35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Happy Independence Day Project/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | margin-top: 2rem; 11 | padding: 0; 12 | font-family: 'Poppins', sans-serif; 13 | background: #f7f7f7; 14 | } 15 | 16 | .flag-container { 17 | max-width: 600px; 18 | display: flex; 19 | flex-direction: column; 20 | margin: 0 auto; 21 | position: relative; 22 | } 23 | 24 | .frame { 25 | width: 100%; 26 | height: 100px; 27 | } 28 | 29 | .saffron { 30 | background-color: #FF9933; /* Saffron color */ 31 | } 32 | 33 | .white { 34 | background-color: #FFFFFF; /* White color */ 35 | } 36 | 37 | .green { 38 | background-color: #138808; /* Green color */ 39 | } 40 | 41 | .chakra-container { 42 | position: absolute; /* To Make Chakra Float over Frames */ 43 | top: 50%; 44 | left: 50%; 45 | transform: translate(-50%, -50%); /* To Make Chakra Center */ 46 | } 47 | 48 | .chakra-img { 49 | max-width: 100%; 50 | width: 100px; 51 | animation: rotate 4s linear infinite; 52 | } 53 | 54 | /* Rotating Animation CSS */ 55 | @keyframes rotate { 56 | 0% { 57 | transform: rotate(0deg); 58 | } 59 | 100% { 60 | transform: rotate(360deg); 61 | } 62 | } 63 | 64 | h1{ 65 | display: flex; 66 | justify-content: center; 67 | align-items: center; 68 | margin: 100px; 69 | font-weight:100px; 70 | } 71 | -------------------------------------------------------------------------------- /Happy janmashtami - RADHE RADHE/K.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Happy janmashtami - RADHE RADHE/K.png -------------------------------------------------------------------------------- /Happy janmashtami - RADHE RADHE/M.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Happy janmashtami - RADHE RADHE/M.png -------------------------------------------------------------------------------- /Happy janmashtami - RADHE RADHE/New.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 17 |

Happy Janmashtami

18 | 19 |
20 | 21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |

Radhe Radhe

32 | 33 | 34 | 35 | 45 | 46 | -------------------------------------------------------------------------------- /Happy janmashtami - RADHE RADHE/light.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Happy janmashtami - RADHE RADHE/light.mp4 -------------------------------------------------------------------------------- /Happy janmashtami - RADHE RADHE/matki.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-patel-main/Youtube-project-_Code_with_patel_/72db1fa511339fc65aadc574a4b3fd866dd817be/Happy janmashtami - RADHE RADHE/matki.png -------------------------------------------------------------------------------- /Happy janmashtami - RADHE RADHE/new.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | 6 | } 7 | 8 | .con{ 9 | width:100%; 10 | height: 100vh; 11 | background-color:rgba(0,0,0,0.4); 12 | } 13 | 14 | .background{ 15 | position: absolute; 16 | right: 0; 17 | bottom: 0; 18 | z-index: -1; 19 | } 20 | 21 | @media(min-aspect-ratio:16/9){ 22 | .background{ 23 | width: 100%; 24 | height: auto; 25 | } 26 | } 27 | 28 | @media(max-aspect-ratio:16/9){ 29 | .background{ 30 | width: auto; 31 | height: 100%; 32 | } 33 | } 34 | 35 | 36 | .container{ 37 | width: 100%; 38 | max-width: 1200px; 39 | margin: 0 auto; 40 | } 41 | .inner-box{ 42 | position: relative; 43 | height: 100vh; 44 | width: 100%; 45 | } 46 | .krishna{ 47 | width: 400px; 48 | position: absolute; 49 | top: -1000px; 50 | Left: 35%; 51 | } 52 | .krishnaimg{ 53 | width: 400px; 54 | position: absolute; 55 | bottom: -100px; 56 | Left: 35%; 57 | } 58 | .con h1{ 59 | font-size: 80px; 60 | position: absolute; 61 | bottom: 150px; 62 | left: -100%; 63 | color: #ffffff; 64 | 65 | } 66 | h3{ 67 | font-size: 50px; 68 | position: absolute; 69 | bottom: 90px; 70 | left: -100%; 71 | color: #ffffff; 72 | 73 | } 74 | .matki{ 75 | width: 200px; 76 | position: absolute; 77 | bottom: -100px; 78 | Left: 25%; 79 | } 80 | .matki2{ 81 | width: 200px; 82 | position: absolute; 83 | bottom: -100px; 84 | Left: 65%; 85 | } -------------------------------------------------------------------------------- /Happy janmashtami Part -2 - RADHE RADHE/happy-janmashtami-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Janmashtami Dahi Handi Animation 7 | 8 | 9 | 298 | 299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 | 311 | Handi 312 | 313 |
314 | 315 | Broken Handi 316 | 317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 | Happy Janmashtami! 325 |
326 |
327 | 328 | 329 | 351 | -------------------------------------------------------------------------------- /Legend Login page move button without fill details/funny login page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login Form 7 | 8 | 9 | 10 | 22 | 23 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Legend Login page move button without fill details/login.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background-color: rgba(0, 0, 0, 0.579); 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | margin: 0; 9 | } 10 | .login-container { 11 | background-color: #fff; 12 | padding: 20px; 13 | border-radius: 8px; 14 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 15 | } 16 | .login-container h2 { 17 | margin-bottom: 20px; 18 | } 19 | .form-group { 20 | margin-bottom: 15px; 21 | } 22 | .form-group label { 23 | display: block; 24 | margin-bottom: 5px; 25 | } 26 | .form-group input { 27 | width: 100%; 28 | padding: 8px; 29 | box-sizing: border-box; 30 | } 31 | .login-button { 32 | padding: 10px 20px; 33 | background-color: #007BFF; 34 | color: white; 35 | border: none; 36 | border-radius: 4px; 37 | cursor: pointer; 38 | transition: transform 0.2s ease; 39 | } 40 | .login-button:disabled { 41 | background-color: #aaa; 42 | cursor: not-allowed; 43 | } 44 | -------------------------------------------------------------------------------- /Proposed Your Girl/Propose.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Propose 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 |
23 | 24 |
25 |

Will you be my GF🥰?

26 |
27 |
28 | 29 |
30 |
31 |
32 | 33 |

34 | 35 | I Love you! 36 | 37 |

38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 88 | 89 | -------------------------------------------------------------------------------- /Proposed Your Girl/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | body { 5 | background: linear-gradient(117deg, #ff41f7 0%, rgba(255, 73, 73, 0.81) 100%); 6 | } 7 | h1 { 8 | text-align: center; 9 | color: white; 10 | font-size: 72px; 11 | font-weight: 700; 12 | text-transform: uppercase; 13 | } 14 | .btn { 15 | color: gray; 16 | background-color: white; 17 | border: none; 18 | border-radius: 50px; 19 | width: 200px; 20 | height: 50px; 21 | margin: 25px 10px; 22 | font-weight: bold; 23 | } 24 | .btn:hover { 25 | background-color: #ff4690; 26 | border: 2px solid white; 27 | } 28 | @media (max-width: 1148px) { 29 | h1 { 30 | font-size: 50px; 31 | } 32 | .btn { 33 | width: 150px; 34 | height: 40px; 35 | } 36 | } 37 | @media (max-width: 795px) { 38 | h1 { 39 | font-size: 40px; 40 | } 41 | } 42 | #showMessage { 43 | display: none; 44 | } 45 | #showMessage h1 { 46 | font-size: 50px; 47 | } 48 | /* Animate Text */ 49 | .ml6 { 50 | position: relative; 51 | } 52 | 53 | .ml6 .text-wrapper { 54 | position: relative; 55 | display: inline-block; 56 | padding-top: 0.2em; 57 | padding-right: 0.05em; 58 | padding-bottom: 0.1em; 59 | overflow: hidden; 60 | } 61 | 62 | .ml6 .letter { 63 | display: inline-block; 64 | line-height: 1em; 65 | } 66 | 67 | /* Footer */ 68 | footer { 69 | color: #fff; 70 | } 71 | footer a { 72 | color: white; 73 | text-decoration: none; 74 | } 75 | -------------------------------------------------------------------------------- /Shiva Using Python- Code With patel/shiva.py: -------------------------------------------------------------------------------- 1 | import cv2 2 | import turtle 3 | import numpy as np 4 | from matplotlib import pyplot as plt 5 | import time 6 | 7 | def find_closest(p): 8 | if len(positions) > 0: 9 | nodes = np.array(positions) 10 | distances = np.sum((nodes - p) ** 2, axis=1) 11 | i_min = np.argmin(distances) 12 | return positions[i_min] 13 | else: 14 | return None 15 | 16 | 17 | def outline(): 18 | src_image = cv2.imread(image, 0) 19 | blurred = cv2.GaussianBlur(src_image, (7, 7), 0) 20 | th3 = cv2.adaptiveThreshold(blurred, maxValue=255, adaptiveMethod=cv2.ADAPTIVE_THRESH_GAUSSIAN_C, 21 | thresholdType=cv2.THRESH_BINARY, blockSize=9, C=2) 22 | return th3 23 | 24 | image = 'shiva1.png' 25 | im = cv2.imread(image, 0) 26 | th3 = outline() 27 | 28 | plt.imshow(th3) 29 | plt.axis('off') 30 | plt.tight_layout() 31 | # plt.show() 32 | 33 | WIDTH = im.shape[1] 34 | HEIGHT = im.shape[0] 35 | print(WIDTH, HEIGHT) 36 | 37 | CUTOFF_LEN = ((WIDTH + HEIGHT) / 2) / 60 # 60 threshold value 38 | iH, iW = np.where(th3 == [0]) 39 | iW = iW - WIDTH / 2 40 | iH = -1 * (iH - HEIGHT / 2) 41 | positions = [list(iwh) for iwh in zip(iW, iH)] 42 | 43 | # win = turtle.Screen() 44 | # win.bgcolor('black') 45 | 46 | t = turtle.Turtle() 47 | t.color("brown") 48 | t.shapesize(1) 49 | t.pencolor("gray30") 50 | 51 | t.speed(0) 52 | turtle.tracer(0, 0) 53 | t.penup() 54 | t.goto(positions[0]) 55 | t.pendown() 56 | 57 | time.sleep(3) 58 | 59 | p = positions[0] 60 | while (p): 61 | p = find_closest(p) 62 | if p: 63 | current_pos = np.asarray(t.pos()) 64 | new_pos = np.asarray(p) 65 | length = np.linalg.norm(new_pos - current_pos) 66 | if length < CUTOFF_LEN: 67 | t.goto(p) 68 | turtle.update() 69 | else: 70 | t.penup() 71 | t.goto(p) 72 | t.pendown() 73 | positions.remove(p) 74 | else: 75 | p = None 76 | 77 | turtle.done() 78 | # close the screen after complete -------------------------------------------------------------------------------- /Vocie to Text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

Code With Patel

13 | 14 | 17 | 18 |
19 |

Text is show here

20 |
21 | 22 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Vocie to Text/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.getElementById("btn"); 2 | const results = document.getElementById("result"); 3 | const speechRecognition = window.speechRecognition || window.webkitSpeechRecognition; 4 | const recognition = new speechRecognition(); 5 | 6 | recognition.onstart = function () { 7 | console.log("you can speek now"); 8 | } 9 | 10 | recognition.onresult = function (event) { 11 | var text = event.results[0][0].transcript; 12 | console.log(text); 13 | document.getElementById("result").innerHTML = text; 14 | } 15 | 16 | function copyDivToClipboard() { 17 | var range = document.createRange(); 18 | range.selectNode(document.getElementById("result")); 19 | window.getSelection().removeAllRanges(); // clear current selection 20 | window.getSelection().addRange(range); // to select text 21 | document.execCommand("copy"); 22 | window.getSelection().removeAllRanges();// to deselect 23 | alert("Copied the text:") 24 | } -------------------------------------------------------------------------------- /Vocie to Text/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | flex-direction: column; 8 | } 9 | 10 | 11 | h1 { 12 | text-align: center; 13 | margin-top: 3rem; 14 | } 15 | 16 | 17 | .container { 18 | display: flex; 19 | justify-content: center; 20 | height: 300px; 21 | width: 500px; 22 | background-color: honeydew; 23 | font-size: 2rem; 24 | padding: 1rem; 25 | margin: 2rem; 26 | } 27 | 28 | 29 | .button-three { 30 | text-align: center; 31 | cursor: pointer; 32 | font-size: 24px; 33 | position: relative; 34 | background-color: #f39c12; 35 | border: none; 36 | padding: 20px; 37 | width: 200px; 38 | text-align: center; 39 | -webkit-transition-duration: 0.4s; 40 | transition-duration: 0.4s; 41 | text-decoration: none; 42 | overflow: hidden; 43 | } 44 | 45 | 46 | .button-three:hover { 47 | background: #fff; 48 | box-shadow: 0px 2px 10px 5px #97b1bf; 49 | color: #000; 50 | } 51 | 52 | 53 | .button-three:after { 54 | content: ""; 55 | background: #f1c40f; 56 | display: block; 57 | position: absolute; 58 | padding-top: 300%; 59 | padding-left: 350%; 60 | margin-left: -20px !important; 61 | margin-top: -120%; 62 | opacity: 0; 63 | transition: all 0.8s; 64 | } 65 | 66 | 67 | .button-three:active:after { 68 | padding: 0; 69 | margin: 0; 70 | opacity: 1; 71 | transition: 0s; 72 | } 73 | -------------------------------------------------------------------------------- /Webpage of Girlfriend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Proposed Her 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Manja Stickerfrom 17 | Manja Stickers 18 |
19 | 20 | 21 |

Do you love me? 🤗

22 |

Chiku is all yours

23 | 24 |
25 | Yes 26 | No 27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Webpage of Girlfriend/no1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ask Her Out 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Mochi Stickerfrom 17 | Mochi Stickers 18 |
19 | 20 |

Please think again! 🙄

21 |

itni jaldi na matt bolo😥

22 | 23 |
24 | Yes 25 | No 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Webpage of Girlfriend/no2.html: -------------------------------------------------------------------------------- 1 | " 2 | 3 | 4 | 5 | 6 | 7 | Ask Her Out 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Couple 17 | Forgive Me Stickerfrom 18 | Couple Stickers 19 |
20 | 21 | 22 |

Ek aur baar Soch lo! 😣

23 |

kyu aisa kar rahi ho Plzzz Man jao😣

24 | 25 |
26 | Yes 27 | No 28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /Webpage of Girlfriend/no3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ask Her Out 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Peach Goma Phone Stickerfrom 17 | Peach Goma Stickers 18 |
19 | 20 | 21 |

Baby Man jao na! Kitna bhav khaogi 😭

22 |

bhut glt baat hai yrr😭

23 | 24 |
25 | Yes 26 | No 27 |
28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Webpage of Girlfriend/script.js: -------------------------------------------------------------------------------- 1 | function moveRandomEl(elm) { 2 | elm.style.position = "absolute"; 3 | elm.style.top = Math.floor(Math.random() * 90 + 5) + "%"; 4 | elm.style.left = Math.floor(Math.random() * 90 + 5) + "%"; 5 | } 6 | 7 | const moveRandom = document.querySelector("#move-random"); 8 | 9 | moveRandom.addEventListener("mouseenter", function (e) { 10 | moveRandomEl(e.target); 11 | }); -------------------------------------------------------------------------------- /Webpage of Girlfriend/style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | width: 100%; 11 | min-height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background-color: #d9a6a6; 16 | } 17 | 18 | .container { 19 | display: flex; 20 | flex-direction: column; 21 | text-align: center; 22 | align-items: center; 23 | gap: 20px; 24 | max-width: 500px; 25 | margin: 20px; 26 | } 27 | 28 | .container .tenor-gif-embed { 29 | max-width: 200px; 30 | } 31 | 32 | .container .btn { 33 | display: flex; 34 | gap: 25px; 35 | } 36 | 37 | .btn a { 38 | text-decoration: none; 39 | color: #111; 40 | background: #fff; 41 | padding: 10px 25px; 42 | border-radius: 66px; 43 | box-shadow: 0.5rem 1rem 3rem hsl(0, 0%, 0%, 0.3); 44 | } -------------------------------------------------------------------------------- /Webpage of Girlfriend/yes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ask Her Out 8 | 9 | 10 | 11 | 12 | 13 |
14 |
16 | Mochi 18 | Cat GIFfrom Mochi GIFs 19 |
20 | 21 |

I knew it! You Love me a lot 😘

22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /frying pan/index (1).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Frying Pan Preloader 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /frying pan/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | border: 0; 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | :root { 9 | --hue: 223; 10 | --bg: hsl(var(--hue),10%,90%); 11 | --fg: hsl(var(--hue),10%,10%); 12 | --trans-dur: 0.3s; 13 | font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280)); 14 | } 15 | 16 | body { 17 | background-color: var(--bg); 18 | color: var(--fg); 19 | display: flex; 20 | font: 1em/1.5 sans-serif; 21 | height: 100vh; 22 | transition: background-color var(--trans-dur), color var(--trans-dur); 23 | } 24 | 25 | .pl { 26 | margin: auto; 27 | width: 12em; 28 | height: 12em; 29 | } 30 | .pl__drop, .pl__drop-inner, .pl__pan, .pl__ring, .pl__shadow { 31 | animation: pan 2s cubic-bezier(0.65, 0, 0.35, 1) infinite; 32 | } 33 | .pl__drop { 34 | transform-origin: 13px 60px; 35 | } 36 | .pl__drop-inner { 37 | animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84); 38 | } 39 | .pl__drop--1 { 40 | animation-name: drop-1; 41 | } 42 | .pl__drop--1 .pl__drop-inner { 43 | animation-name: drop-1-inner; 44 | } 45 | .pl__drop--2 { 46 | animation-name: drop-2; 47 | } 48 | .pl__drop--2 .pl__drop-inner { 49 | animation-name: drop-2-inner; 50 | } 51 | .pl__drop--3 { 52 | animation-name: drop-3; 53 | transform-origin: 67px 72px; 54 | } 55 | .pl__drop--3 .pl__drop-inner { 56 | animation-name: drop-3-inner; 57 | } 58 | .pl__drop--4 { 59 | animation-name: drop-4; 60 | transform-origin: 67px 72px; 61 | } 62 | .pl__drop--4 .pl__drop-inner { 63 | animation-name: drop-4-inner; 64 | } 65 | .pl__drop--5 { 66 | animation-name: drop-5; 67 | transform-origin: 67px 72px; 68 | } 69 | .pl__drop--5 .pl__drop-inner { 70 | animation-name: drop-5-inner; 71 | } 72 | .pl__pan { 73 | transform-origin: 36px 74px; 74 | } 75 | .pl__ring { 76 | animation-name: flip-ring; 77 | } 78 | .pl__shadow { 79 | animation-name: pan-shadow; 80 | transform-origin: 36px 124.5px; 81 | } 82 | 83 | /* Dark theme */ 84 | @media (prefers-color-scheme: dark) { 85 | :root { 86 | --bg: hsl(var(--hue),10%,10%); 87 | --fg: hsl(var(--hue),10%,90%); 88 | } 89 | } 90 | /* Animation */ 91 | @keyframes drop-1 { 92 | from { 93 | animation-timing-function: steps(1, end); 94 | transform: translate(0, 0); 95 | visibility: hidden; 96 | } 97 | 30% { 98 | animation-timing-function: linear; 99 | transform: translate(0, 0); 100 | visibility: visible; 101 | } 102 | 50%, to { 103 | transform: translate(-6px, 0); 104 | } 105 | } 106 | @keyframes drop-1-inner { 107 | from, 30% { 108 | fill: #abafba; 109 | transform: translate(0, 0); 110 | } 111 | 50%, to { 112 | fill: rgba(171, 175, 186, 0); 113 | transform: translate(0, -27px); 114 | } 115 | } 116 | @keyframes drop-2 { 117 | from { 118 | animation-timing-function: steps(1, end); 119 | transform: translate(0, 0); 120 | visibility: hidden; 121 | } 122 | 30% { 123 | animation-timing-function: linear; 124 | transform: translate(0, 0); 125 | visibility: visible; 126 | } 127 | 50%, to { 128 | transform: translate(-8px, 0); 129 | } 130 | } 131 | @keyframes drop-2-inner { 132 | from, 30% { 133 | fill: #abafba; 134 | transform: translate(0, 0); 135 | } 136 | 50%, to { 137 | fill: rgba(171, 175, 186, 0); 138 | transform: translate(0, -9px); 139 | } 140 | } 141 | @keyframes drop-3 { 142 | from { 143 | animation-timing-function: steps(1, end); 144 | transform: translate(0, 0); 145 | visibility: hidden; 146 | } 147 | 78% { 148 | animation-timing-function: linear; 149 | transform: translate(0, 0); 150 | visibility: visible; 151 | } 152 | 98%, to { 153 | transform: translate(-24px, 0); 154 | } 155 | } 156 | @keyframes drop-3-inner { 157 | from, 78% { 158 | fill: #abafba; 159 | transform: translate(0, 0); 160 | } 161 | 98%, to { 162 | fill: rgba(171, 175, 186, 0); 163 | transform: translate(0, -28px); 164 | } 165 | } 166 | @keyframes drop-4 { 167 | from { 168 | animation-timing-function: steps(1, end); 169 | transform: translate(0, 0); 170 | visibility: hidden; 171 | } 172 | 78% { 173 | animation-timing-function: linear; 174 | transform: translate(0, 0); 175 | visibility: visible; 176 | } 177 | 98%, to { 178 | transform: translate(-8px, 0); 179 | } 180 | } 181 | @keyframes drop-4-inner { 182 | from, 78% { 183 | fill: #abafba; 184 | transform: translate(0, 0); 185 | } 186 | 98%, to { 187 | fill: rgba(171, 175, 186, 0); 188 | transform: translate(0, -36px); 189 | } 190 | } 191 | @keyframes drop-5 { 192 | from { 193 | animation-timing-function: steps(1, end); 194 | transform: translate(0, 0); 195 | visibility: hidden; 196 | } 197 | 78% { 198 | animation-timing-function: linear; 199 | transform: translate(0, 0); 200 | visibility: visible; 201 | } 202 | 98%, to { 203 | transform: translate(8px, 0); 204 | } 205 | } 206 | @keyframes drop-5-inner { 207 | from, 78% { 208 | fill: #abafba; 209 | transform: translate(0, 0); 210 | } 211 | 98%, to { 212 | fill: rgba(171, 175, 186, 0); 213 | transform: translate(0, -32px); 214 | } 215 | } 216 | @keyframes flip-ring { 217 | from, 27% { 218 | animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84); 219 | stroke-dashoffset: 20; 220 | stroke-width: 4px; 221 | } 222 | 53.5% { 223 | animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16); 224 | stroke-dashoffset: -100; 225 | stroke-width: 10px; 226 | } 227 | 80%, to { 228 | stroke-dashoffset: -220; 229 | stroke-width: 4px; 230 | } 231 | } 232 | @keyframes pan { 233 | from, 88%, to { 234 | transform: translate(0, 0) rotate(0); 235 | } 236 | 20% { 237 | animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16); 238 | transform: translate(-5px, 0) rotate(-30deg); 239 | } 240 | 30% { 241 | animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84); 242 | transform: translate(0, 0) rotate(20deg); 243 | } 244 | 60%, 78% { 245 | animation-timing-function: linear; 246 | transform: translate(0, 0) rotate(0); 247 | } 248 | 81.33% { 249 | animation-timing-function: linear; 250 | transform: translate(0, 4px) rotate(0); 251 | } 252 | 84.67% { 253 | animation-timing-function: linear; 254 | transform: translate(0, -2px) rotate(0); 255 | } 256 | } 257 | @keyframes pan-shadow { 258 | from, 88%, to { 259 | fill: rgba(115, 122, 140, 0.2); 260 | transform: scaleX(1); 261 | } 262 | 20% { 263 | animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16); 264 | fill: rgba(115, 122, 140, 0.2); 265 | transform: scaleX(0.77); 266 | } 267 | 30% { 268 | animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84); 269 | fill: rgba(115, 122, 140, 0.2); 270 | transform: scaleX(1); 271 | } 272 | 60%, 78% { 273 | animation-timing-function: linear; 274 | fill: rgba(115, 122, 140, 0.2); 275 | transform: scaleX(1); 276 | } 277 | 81.33% { 278 | animation-timing-function: linear; 279 | fill: rgba(115, 122, 140, 0.25); 280 | transform: scaleX(0.87); 281 | } 282 | 84.67% { 283 | animation-timing-function: linear; 284 | fill: rgba(115, 122, 140, 0.225); 285 | transform: scaleX(1.065); 286 | } 287 | } --------------------------------------------------------------------------------