├── Amazon_Clone ├── amazon.css ├── amazon.html ├── image_banner1.jpeg ├── image_banner2.jpeg ├── image_banner3.jpeg ├── image_logo.png ├── image_product1.jpg ├── image_product10.jpg ├── image_product11.jpg ├── image_product12.jpg ├── image_product2.jpg ├── image_product3.jpg ├── image_product4.jpg ├── image_product5.jpg ├── image_product6.jpg ├── image_product7.jpg ├── image_product8.jpg └── image_product9.jpg ├── Flipkart_Clone ├── flipkart.css ├── flipkart.html ├── flipkart_banner1.webp ├── flipkart_banner4.webp ├── flipkart_banner5.jpg ├── flipkart_category1.webp ├── flipkart_category2.webp ├── flipkart_category3.webp ├── flipkart_category4.webp ├── flipkart_category5.webp ├── flipkart_category6.webp ├── flipkart_category7.webp ├── flipkart_category8.webp ├── flipkart_category9.webp ├── flipkart_footer1.webp ├── flipkart_footer2.webp ├── flipkart_footer3.webp ├── flipkart_logo.png ├── flipkart_logo1.png ├── flipkart_product1.webp ├── flipkart_product2.webp ├── flipkart_product3.webp ├── flipkart_product4.webp ├── flipkart_product5.webp ├── flipkart_product6.webp └── flipkart_product7.webp ├── Hotstar_Clone ├── hotstar.css ├── hotstar.html ├── hotstar.js ├── hotstar_add.png ├── hotstar_appstore.webp ├── hotstar_banner1.png ├── hotstar_banner2.png ├── hotstar_banner3.png ├── hotstar_banner4.png ├── hotstar_banner5.png ├── hotstar_card1.png ├── hotstar_card2.png ├── hotstar_card3.png ├── hotstar_card4.png ├── hotstar_card5.png ├── hotstar_logo.png ├── hotstar_next.png ├── hotstar_playstore.webp ├── hotstar_poster1.webp ├── hotstar_poster10.webp ├── hotstar_poster11.webp ├── hotstar_poster12.webp ├── hotstar_poster13.webp ├── hotstar_poster14.webp ├── hotstar_poster15.webp ├── hotstar_poster16.webp ├── hotstar_poster17.webp ├── hotstar_poster18.webp ├── hotstar_poster19.webp ├── hotstar_poster2.webp ├── hotstar_poster20.webp ├── hotstar_poster21.webp ├── hotstar_poster22.webp ├── hotstar_poster23.webp ├── hotstar_poster24.webp ├── hotstar_poster25.webp ├── hotstar_poster26.webp ├── hotstar_poster27.webp ├── hotstar_poster28.webp ├── hotstar_poster29.webp ├── hotstar_poster3.webp ├── hotstar_poster30.webp ├── hotstar_poster4.webp ├── hotstar_poster5.webp ├── hotstar_poster6.webp ├── hotstar_poster7.webp ├── hotstar_poster8.webp ├── hotstar_poster9.webp ├── hotstar_pre.png ├── hotstar_video1.mp4 ├── hotstar_video2.mp4 ├── hotstar_video3.mp4 ├── hotstar_video4.mp4 └── hotstar_video5.mp4 ├── Meesho_Clone ├── meesho.css ├── meesho.html ├── meesho.js ├── meesho_Categoreis1.webp ├── meesho_Categoreis2.webp ├── meesho_Categoreis3.webp ├── meesho_Categoreis4.png ├── meesho_Categoreis5.webp ├── meesho_Categoreis6.webp ├── meesho_appstore.webp ├── meesho_background.webp ├── meesho_banner1.webp ├── meesho_banner2.webp ├── meesho_banner3.webp ├── meesho_cart.png ├── meesho_delivery1.svg ├── meesho_delivery2.svg ├── meesho_delivery3.svg ├── meesho_label1.png ├── meesho_label2.png ├── meesho_label3.png ├── meesho_logo.png ├── meesho_mobile.png ├── meesho_playstore.webp ├── meesho_playstore2.webp ├── meesho_recent.png.png ├── meesho_search.png ├── meesho_user.png ├── meesho_view.png └── messho_icon.png ├── Netflix_Clone ├── netflix.css ├── netflix.html ├── netflix.js ├── netflix_background.png ├── netflix_cartoon.png ├── netflix_download.gif ├── netflix_logo.png ├── netflix_mac.png ├── netflix_mobile.jpg ├── netflix_movie.png └── netflix_tv.png ├── ReadMe.txt ├── Spotify_Clone ├── spotify.css ├── spotify.html ├── spotify_after_icon.png ├── spotify_arrow_icon.png ├── spotify_before_icon.png ├── spotify_device_icon.png ├── spotify_dot_icon.png ├── spotify_download_icon.png ├── spotify_fullscreen_icon.png ├── spotify_heart_icon.png ├── spotify_home_icon.png ├── spotify_library_icon.png ├── spotify_like_icon.png ├── spotify_logo.png ├── spotify_next_icon.png ├── spotify_pause_icon.png ├── spotify_play_icon.png ├── spotify_playlist.png ├── spotify_playlist_icon.png ├── spotify_playlist_logo.png ├── spotify_plus_icon.png ├── spotify_previous_icon.png ├── spotify_profile_icon.png ├── spotify_queue_icon.png ├── spotify_repeat_icon.png ├── spotify_serach_icon.png ├── spotify_shuffle_icon.png ├── spotify_song1.png ├── spotify_song2.png ├── spotify_song3.png ├── spotify_song4.png ├── spotify_song5.png ├── spotify_song6.png ├── spotify_song7.png ├── spotify_song8.png ├── spotify_time_icon.png └── spotify_volume_icon.png ├── Swiggy_clone ├── swiggy.css ├── swiggy.html ├── swiggy_appstore.png ├── swiggy_dish1.avif ├── swiggy_dish2.avif ├── swiggy_dish3.avif ├── swiggy_dish4.avif ├── swiggy_dish5.avif ├── swiggy_dish6.avif ├── swiggy_dish7.avif ├── swiggy_dish8.avif └── swiggy_playStore.png ├── Whatapp_Clone ├── whatapp.css ├── whatapp.html ├── whatapp_Profile.png ├── whatapp_chat1.jpg ├── whatapp_chat10.jpg ├── whatapp_chat11.jpg ├── whatapp_chat12.jpg ├── whatapp_chat13.jpg ├── whatapp_chat14.jpg ├── whatapp_chat15.jpg ├── whatapp_chat2.jpg ├── whatapp_chat3.jpg ├── whatapp_chat4.jpg ├── whatapp_chat5.jpg ├── whatapp_chat6.jpg ├── whatapp_chat7.jpg ├── whatapp_chat8.jpg └── whatapp_chat9.jpg ├── Youtube_Clone ├── youtube.css ├── youtube.html ├── youtube_channel1.jpg ├── youtube_channel2.jpg ├── youtube_channel3.jpg ├── youtube_channel4.jpg ├── youtube_channel5.jpg ├── youtube_channel6.jpg ├── youtube_channel7.jpg ├── youtube_dp1.jpg ├── youtube_dp10.jpg ├── youtube_dp11.jpg ├── youtube_dp12.jpg ├── youtube_dp2.jpg ├── youtube_dp3.jpg ├── youtube_dp4.jpg ├── youtube_dp5.jpg ├── youtube_dp6.jpg ├── youtube_dp7.jpg ├── youtube_dp8.jpg ├── youtube_dp9.jpg ├── youtube_logo.svg ├── youtube_thumbnail1.webp ├── youtube_thumbnail10.webp ├── youtube_thumbnail11.webp ├── youtube_thumbnail12.webp ├── youtube_thumbnail2.webp ├── youtube_thumbnail3.webp ├── youtube_thumbnail4.webp ├── youtube_thumbnail5.webp ├── youtube_thumbnail6.webp ├── youtube_thumbnail7.webp ├── youtube_thumbnail8.webp └── youtube_thumbnail9.webp └── Zomato_Clone ├── zomato.css ├── zomato.html ├── zomato_India_Flag.png ├── zomato_appstore.png ├── zomato_banner.png ├── zomato_collection1.jpg ├── zomato_collection2.jpg ├── zomato_collection3.jpg ├── zomato_collection4.jpg ├── zomato_item1.png ├── zomato_item2.png ├── zomato_item3.png ├── zomato_item4.png ├── zomato_logo1.png ├── zomato_logo2.png ├── zomato_mobile_view.png └── zomato_playStore.png /Amazon_Clone/amazon.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | font-family: Arial; 10 | } 11 | 12 | nav { 13 | height: 60px; 14 | display: flex; 15 | align-items: center; 16 | background-color: #0f1111; 17 | color: white; 18 | } 19 | 20 | .nav-left { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | margin-left: .5rem; 25 | } 26 | 27 | .nav-logo img { 28 | width: 100px; 29 | padding: .5rem; 30 | } 31 | 32 | .nav-logo:hover { 33 | outline: 1px solid white; 34 | } 35 | 36 | .location { 37 | height: 100%; 38 | font-size: .7rem; 39 | padding: .5rem 1rem; 40 | } 41 | 42 | .location:hover { 43 | outline: 1px solid white; 44 | } 45 | 46 | .location-icon { 47 | display: flex; 48 | align-items: center; 49 | } 50 | 51 | 52 | .nav-center { 53 | height: 40px; 54 | display: flex; 55 | flex-grow: 1; 56 | border-radius: 5px; 57 | margin-left: 1rem; 58 | } 59 | 60 | .nav-center:hover { 61 | outline: 2px solid rgb(232, 176, 73); 62 | } 63 | 64 | .search-dropdown { 65 | width: 5rem; 66 | font-size: 1rem; 67 | background-color: rgb(210, 208, 208); 68 | padding: .5rem; 69 | border-radius: 5px 0 0 5px; 70 | outline: none; 71 | } 72 | 73 | .search-dropdown:focus { 74 | outline: none; 75 | } 76 | 77 | .search-box { 78 | font-size: 1rem; 79 | flex-grow: 1; 80 | padding: .5rem; 81 | } 82 | 83 | .search-box:focus { 84 | outline: none; 85 | } 86 | 87 | .search-icon i { 88 | height: 100%; 89 | background-color: rgba(255, 203, 105, 0.849); 90 | border-radius: 0 5px 5px 0; 91 | padding: .7rem .5rem; 92 | outline: none; 93 | } 94 | 95 | .nav-right { 96 | display: flex; 97 | align-items: center; 98 | margin: 0 1rem; 99 | } 100 | 101 | .language-option { 102 | display: flex; 103 | padding: .5rem .5rem; 104 | } 105 | 106 | .language-option:hover { 107 | outline: 1px solid white; 108 | } 109 | 110 | .flag { 111 | width: 20px; 112 | } 113 | 114 | .select-language { 115 | font-size: .7rem; 116 | font-weight: bold; 117 | color: white; 118 | background: transparent; 119 | border: none; 120 | } 121 | 122 | .select-language option { 123 | color: black; 124 | } 125 | 126 | .account-option { 127 | padding: .5rem .5rem; 128 | } 129 | 130 | .account-option:hover { 131 | outline: 1px solid white; 132 | } 133 | 134 | .account-option .top-text { 135 | font-size: .5rem; 136 | margin-left: 5px; 137 | } 138 | 139 | .select-account { 140 | font-size: .7rem; 141 | font-weight: bold; 142 | background: transparent; 143 | color: white; 144 | border: none; 145 | } 146 | 147 | .order-option { 148 | padding: .5rem .5rem; 149 | } 150 | 151 | .order-option:hover { 152 | outline: 1px solid white; 153 | } 154 | 155 | .order-option .top-text { 156 | font-size: .5rem; 157 | } 158 | 159 | .order-option .bottom-text { 160 | font-size: .7rem; 161 | font-weight: bold; 162 | } 163 | 164 | .cart-option { 165 | display: flex; 166 | align-items: center; 167 | font-size: 0.8rem; 168 | font-weight: 700; 169 | padding: .5rem .5rem; 170 | } 171 | 172 | .cart-option:hover { 173 | outline: 1px solid white; 174 | } 175 | 176 | .cart-logo i { 177 | width: 20px; 178 | } 179 | 180 | .nav-options { 181 | height: 42px; 182 | display: flex; 183 | align-items: center; 184 | background-color: #222f3d; 185 | color: white; 186 | justify-content: start; 187 | 188 | } 189 | 190 | .nav-options * { 191 | cursor: pointer; 192 | } 193 | 194 | .all-logo { 195 | display: flex; 196 | align-items: center; 197 | gap: .3rem; 198 | padding: .5rem; 199 | margin-left: 2rem; 200 | } 201 | 202 | .all-logo:hover { 203 | outline: 1px solid white; 204 | } 205 | 206 | .nav-options .options { 207 | display: flex; 208 | } 209 | 210 | .nav-options .options p { 211 | padding: 0.5rem; 212 | } 213 | 214 | .nav-options .options p:hover { 215 | outline: 1px solid white; 216 | } 217 | 218 | main { 219 | width: min(1500px, 100%); 220 | position: relative; 221 | left: 50%; 222 | transform: translate(-50%); 223 | } 224 | 225 | .carousel { 226 | width: 100%; 227 | height: 500px; 228 | position: relative; 229 | display: flex; 230 | justify-content: center; 231 | align-items: flex-end; 232 | } 233 | 234 | .carousel .slides-container { 235 | position: absolute; 236 | top: 0; 237 | right: 0; 238 | bottom: 0; 239 | left: 0; 240 | display: flex; 241 | overflow-x: scroll; 242 | scroll-snap-type: x mandatory; 243 | } 244 | 245 | .carousel .slides-container::-webkit-scrollbar { 246 | display: none; 247 | } 248 | 249 | .slides-container .slide { 250 | position: relative; 251 | display: flex; 252 | align-items: center; 253 | justify-content: center; 254 | flex: 0 0 100%; 255 | overflow: hidden; 256 | } 257 | 258 | .slide .content { 259 | width: 100%; 260 | height: 100%; 261 | } 262 | 263 | .slide .content img { 264 | height: 100%; 265 | width: 100%; 266 | object-fit: cover; 267 | } 268 | 269 | .slide .arrow { 270 | position: absolute; 271 | top: 50%; 272 | transform: translateY(-50%); 273 | scale: 2; 274 | margin: 1rem; 275 | } 276 | 277 | .slide .prev { 278 | left: 1rem; 279 | } 280 | 281 | .slide .next { 282 | right: 1rem; 283 | } 284 | 285 | .carousel .text { 286 | width: 95%; 287 | position: absolute; 288 | text-align: center; 289 | font-size: .7rem; 290 | background-color: #f5f6f6; 291 | padding: 1rem; 292 | margin-bottom: 2rem; 293 | } 294 | 295 | .carousel .text a { 296 | text-decoration: none; 297 | font-weight: bold; 298 | color: #007185; 299 | } 300 | 301 | .items-container { 302 | display: flex; 303 | flex-wrap: wrap; 304 | gap: 1.5rem; 305 | background-color: #c9cbcf82; 306 | padding: 0 2rem 2rem 2rem; 307 | } 308 | 309 | .item-card { 310 | height: 400px; 311 | display: flex; 312 | flex-direction: column; 313 | flex: 1 0 300px; 314 | gap: 1rem; 315 | font-size: .7rem; 316 | background-color: white; 317 | padding: 1rem; 318 | cursor: pointer; 319 | overflow: hidden; 320 | } 321 | 322 | .item-card img { 323 | height: 300px; 324 | width: 100%; 325 | border: 2px solid black; 326 | object-fit: cover; 327 | } 328 | 329 | .item-card a { 330 | text-decoration: none; 331 | font-weight: bold; 332 | color: #007185; 333 | } 334 | 335 | /* Footer */ 336 | .back-option { 337 | text-decoration: none; 338 | height: 50px; 339 | display: flex; 340 | align-items: center; 341 | justify-content: center; 342 | font-size: .5rem; 343 | font-weight: bold; 344 | color: white; 345 | background-color: #37475A; 346 | } 347 | 348 | .footer-links { 349 | height: 400px; 350 | display: flex; 351 | justify-content: space-evenly; 352 | background-color: #232F3E; 353 | color: white; 354 | } 355 | 356 | .footer-links ul { 357 | margin-top: 3rem; 358 | } 359 | 360 | .footer-links ul p { 361 | font-weight: bold; 362 | } 363 | 364 | .footer-links ul a { 365 | display: block; 366 | font-size: .7rem; 367 | color: #dddddd; 368 | margin-top: 1rem; 369 | cursor: pointer; 370 | } 371 | 372 | .footer-links ul a:hover { 373 | text-decoration: underline; 374 | } 375 | 376 | .country-info { 377 | height: 70px; 378 | display: flex; 379 | align-items: center; 380 | justify-content: center; 381 | background-color: #232F3E; 382 | color: white; 383 | border-top: 0.5px solid #84868878; 384 | } 385 | 386 | .country-info .logo img { 387 | width: 50px; 388 | } 389 | 390 | .country-info .options { 391 | display: flex; 392 | gap: .5rem; 393 | margin-left: 3rem; 394 | } 395 | 396 | .country-info .options select { 397 | font-size: .5rem; 398 | text-decoration: none; 399 | color: #cccccc; 400 | background: transparent; 401 | border: 1px solid #848688; 402 | border-radius: 3px; 403 | padding: .5rem; 404 | } 405 | 406 | .policies { 407 | height: 80px; 408 | display: flex; 409 | flex-direction: column; 410 | align-items: center; 411 | justify-content: center; 412 | gap: .5rem; 413 | font-size: .5rem; 414 | color: white; 415 | background-color: #131A22; 416 | } 417 | 418 | .pages a { 419 | text-decoration: none; 420 | color: white; 421 | margin-left: 1rem; 422 | 423 | } 424 | 425 | @media screen and (max-width: 900px) { 426 | :root { 427 | font-size: 2vw; 428 | } 429 | 430 | 431 | nav { 432 | height: 5vw; 433 | } 434 | 435 | .nav-logo img { 436 | width: 7vw; 437 | } 438 | 439 | .nav-center { 440 | height: 4vw; 441 | } 442 | 443 | .search-dropdown { 444 | width: 7vw; 445 | } 446 | 447 | .search-box { 448 | width: 1vw; 449 | } 450 | 451 | .search-icon i { 452 | padding: .5rem .5rem; 453 | } 454 | 455 | .flag { 456 | width: 2vw; 457 | } 458 | 459 | .cart-logo { 460 | width: 3vw; 461 | } 462 | 463 | .nav-options { 464 | height: 5vw; 465 | } 466 | 467 | 468 | .carousel { 469 | height: 30vw; 470 | } 471 | 472 | .arrow i { 473 | height: 4vw; 474 | } 475 | 476 | 477 | .item-card { 478 | height: 25vw; 479 | flex: 1 0 20vw; 480 | font-size: .5rem; 481 | } 482 | 483 | .item-card img { 484 | height: 14vw; 485 | } 486 | 487 | /* Footer */ 488 | .back-option { 489 | height: 5vw; 490 | } 491 | 492 | .footer-links { 493 | height: 40vw; 494 | } 495 | 496 | .country-info .logo img { 497 | width: 7vw; 498 | } 499 | 500 | .policies { 501 | height: 8vw; 502 | } 503 | } 504 | -------------------------------------------------------------------------------- /Amazon_Clone/amazon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 13 | Amazon Clone 14 | 15 | 16 | 17 |
18 | 93 | 94 |
95 | 99 | 100 |
101 |

Today's Deals

102 |

Customer Service

103 |

Registry

104 |

Gift Cards

105 |

Sell

106 |
107 |
108 |
109 | 110 |
111 |
112 |
113 |
114 |
115 | 116 |
117 |
118 | 123 | 128 |
129 |
130 |
131 | 132 |
133 |
134 | 139 | 144 |
145 |
146 |
147 | 148 |
149 |
150 | 155 | 160 |
161 |
162 |
163 |

164 | You are on amazon.com. You can also shop 165 | on Amazon India for millions of products 166 | with fast local delivery. 167 | 168 | Click here to go to amazon.in 169 | 170 |

171 |
172 |
173 | 174 |
175 |
176 |

Digital Goggle

177 | 178 |

179 | See more 180 |

181 |
182 |
183 |

Keyboard

184 | 185 |

186 | See more 187 |

188 |

189 |
190 |

Smart Watch

191 | 192 |

193 | See more 194 |

195 |
196 |
197 |

Gaming accessories

198 | 199 |

200 | See more 201 |

202 |
203 |
204 |

Vision Pro

205 | 206 |

207 | See more 208 |

209 |
210 |
211 |

Top Deal

212 | 213 |

214 | See more 215 |

216 |
217 |
218 |

Galaxy Play mobile

219 | 220 |

221 | See more 222 |

223 |
224 |
225 |

Camera Lens

226 | 227 |

228 | See more 229 |

230 |
231 |
232 |

Camera

233 | 234 |

235 | See more 236 |

237 |
238 |
239 |

Gaming accessories

240 | 241 |

242 | See more 243 |

244 |
245 |
246 |

Eyebuds

247 | 248 |

249 | See more 250 |

251 |
252 |
253 |

Iphone

254 | 255 |

256 | See more 257 |

258 |
259 | 260 | 261 |
262 |
263 | 264 | 340 | 341 | 342 | 343 | -------------------------------------------------------------------------------- /Amazon_Clone/image_banner1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_banner1.jpeg -------------------------------------------------------------------------------- /Amazon_Clone/image_banner2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_banner2.jpeg -------------------------------------------------------------------------------- /Amazon_Clone/image_banner3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_banner3.jpeg -------------------------------------------------------------------------------- /Amazon_Clone/image_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_logo.png -------------------------------------------------------------------------------- /Amazon_Clone/image_product1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product1.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product10.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product11.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product12.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product2.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product3.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product4.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product5.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product6.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product7.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product8.jpg -------------------------------------------------------------------------------- /Amazon_Clone/image_product9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Amazon_Clone/image_product9.jpg -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | body { 8 | font-family: 'Roboto', sans-serif; 9 | background-color: #f1f3f6; 10 | } 11 | 12 | :root { 13 | --primary-color: #2874f0; 14 | } 15 | 16 | .container { 17 | padding: 0 8px; 18 | } 19 | 20 | header { 21 | background-color: var(--primary-color); 22 | height: 56px; 23 | } 24 | header .nav-container{ 25 | display: flex; 26 | align-items: center; 27 | height: 100%; 28 | max-width: 1248px; 29 | margin: 0 auto; 30 | } 31 | header .nav-container .logo { 32 | display: flex; 33 | min-width: 137px; 34 | justify-content: flex-end; 35 | } 36 | header .nav-container .logo img{ 37 | width: 75px; 38 | } 39 | 40 | header .search { 41 | height: 100%; 42 | display: flex; 43 | align-items: center; 44 | margin-left: 12px; 45 | } 46 | header .search .search-container{ 47 | width: 540px; 48 | height: 36px; 49 | background-color: white; 50 | border-radius: 2px; 51 | box-shadow: 0 2px 4px 0 rgb(0 0 0 / 23%); 52 | display: flex; 53 | } 54 | header .search .search-container input { 55 | width: calc(100% - 32px); 56 | padding: 16px; 57 | outline: none; 58 | border: none; 59 | } 60 | header .search .search-container button { 61 | width: 36px; 62 | height: 100%; 63 | padding: 0 8px; 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | border: none; 68 | background-color: white; 69 | border-radius: 0 2px 2px 0; 70 | cursor: pointer; 71 | } 72 | 73 | header .login { 74 | height: 100%; 75 | display: flex; 76 | align-items: center; 77 | margin: 0 20px; 78 | } 79 | header .login button { 80 | width: 122px; 81 | padding: 5px 40px; 82 | font-size: 16px; 83 | font-weight: 600; 84 | color: var(--primary-color); 85 | } 86 | header .become-seller { 87 | height: 100%; 88 | display: flex; 89 | align-items: center; 90 | margin: 0 20px; 91 | color: white; 92 | font-size: 16px; 93 | font-weight: 500; 94 | } 95 | 96 | header .more{ 97 | height: 100%; 98 | display: flex; 99 | align-items: center; 100 | margin: 0 20px; 101 | color: white; 102 | font-size: 16px; 103 | font-weight: 500; 104 | } 105 | header .more svg { 106 | margin-left: 8px; 107 | rotate: -90deg; 108 | } 109 | 110 | header .cart { 111 | height: 100%; 112 | display: flex; 113 | align-items: center; 114 | margin: 0 20px; 115 | color: white; 116 | } 117 | header .cart svg { 118 | margin-right: 8px; 119 | } 120 | 121 | .section-1 { 122 | width: 100%; 123 | height: 112px; 124 | background-color: white; 125 | box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%); 126 | } 127 | .section-1-container{ 128 | width: 1280px; 129 | margin: 0 auto; 130 | height: 100%; 131 | display: flex; 132 | align-items: center; 133 | justify-content: space-between; 134 | 135 | 136 | } 137 | .section-1-item{ 138 | height: 100%; 139 | display: flex; 140 | flex-direction: column; 141 | align-items: center; 142 | justify-content: center; 143 | gap: 4px; 144 | font-size: 14px; 145 | font-weight: 500; 146 | } 147 | .section-1-item img { 148 | width: 64px; 149 | height: 64px; 150 | } 151 | 152 | .section-2-container { 153 | margin-top: 16px; 154 | height: 280px; 155 | background-image: url('flipkart_banner1.webp'); 156 | background-size: cover; 157 | background-position: center; 158 | background-repeat: no-repeat; 159 | } 160 | 161 | .section-3-container { 162 | margin-top: 8px; 163 | height: 122px; 164 | background-image: url('flipkart_banner4.webp'); 165 | background-size: cover; 166 | background-position: center; 167 | background-repeat: no-repeat; 168 | } 169 | 170 | .section-4-container { 171 | height: 100%; 172 | margin-top: 8px; 173 | height: 362px; 174 | background-color: white; 175 | display: flex; 176 | justify-content: space-between; 177 | align-items: center; 178 | } 179 | .section-4-offers { 180 | width: 230px; 181 | height: 100%; 182 | background-image: url('flipkart_banner5.jpg'); 183 | background-position: bottom; 184 | background-repeat: no-repeat; 185 | } 186 | .section-4-offers-viewall{ 187 | margin-top: 132px; 188 | width: 100%; 189 | font-size: 30px; 190 | display: flex; 191 | flex-direction: column; 192 | align-items: center; 193 | } 194 | .section-4-offers-viewall button { 195 | margin-top: 24px; 196 | height: 40px; 197 | background-color: var(--primary-color); 198 | color: white; 199 | box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%); 200 | padding: 10px 20px; 201 | font-size: 14px; 202 | font-weight: 500; 203 | border: none; 204 | border-radius: 2px; 205 | cursor: pointer; 206 | } 207 | .section-4-list { 208 | height: 100%; 209 | width: calc(100% - 230px); 210 | display: flex; 211 | overflow-x: auto; 212 | } 213 | .section-4-item{ 214 | width: 232px; 215 | height: 100%; 216 | padding: 0px 15px; 217 | display: flex; 218 | flex-direction: column; 219 | align-items: center; 220 | justify-content: center; 221 | } 222 | .section-4-item img { 223 | max-width: 200px; 224 | max-height: 200px; 225 | } 226 | .section-4-item-head{ 227 | margin-top: 16px; 228 | font-size: 14px; 229 | font-weight: 500; 230 | } 231 | .section-4-item-price { 232 | margin-top: 12px; 233 | font-size: 16px; 234 | color: #388e3c; 235 | } 236 | .section-4-item-explore{ 237 | opacity: 0.6; 238 | margin-top: 12px; 239 | font-weight: 300; 240 | font-size: 12px; 241 | } 242 | 243 | .section-5 { 244 | margin-top: 8px ; 245 | display: flex; 246 | justify-content: space-between; 247 | cursor: pointer; 248 | } 249 | .section-5 img { 250 | width: 33%; 251 | } 252 | 253 | footer { 254 | margin-top: 26px; 255 | background-color: white; 256 | padding: 25px; 257 | text-align: center; 258 | font-size: 14px; 259 | color: #878787 ; 260 | } -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flipkart Clone 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |
20 | 21 | 24 |
25 |
26 | 29 |
30 | Become a Seller 31 |
32 |
33 | More 34 | 35 |
36 |
37 | 38 | Cart 39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 | 47 | Grocery 48 |
49 |
50 | 51 | Mobiles & Tablets 52 |
53 |
54 | 55 | Electronics 56 |
57 |
58 | 59 | Travel 60 |
61 |
62 | 63 | Laptop 64 |
65 |
66 | 67 | fashion 68 |
69 |
70 | 71 | Home & Furniture 72 |
73 |
74 | 75 | Two Wheeler 76 |
77 |
78 | 79 | Toys 80 |
81 |
82 |
83 | 84 |
85 |
86 |
87 |
88 | 89 |
90 |
91 |
92 |
93 | 94 |
95 |
96 |
97 |
98 | Top Offers 99 | 100 |
101 |
102 |
103 |
104 | 105 |
helmet
106 |
Under ₹989
107 |
Explore Now!
108 |
109 |
110 | 111 |
Poco F6 5G
112 |
Under ₹33999
113 |
Explore Now!
114 |
115 |
116 | 117 |
Soft Toys
118 |
Under ₹275
119 |
Explore Now!
120 |
121 |
122 | 123 |
Washing machine
124 |
Under ₹36990
125 |
Explore Now!
126 |
127 |
128 | 129 |
Light Wall lamp
130 |
From ₹799
131 |
Explore Now!
132 |
133 |
134 | 135 |
Toy Gun
136 |
Under ₹699
137 |
Explore Now!
138 |
139 |
140 | 141 |
Shoes
142 |
From ₹2329
143 |
Explore Now!
144 |
145 |
146 |
147 |
148 | 149 |
150 | 151 | 152 | 153 |
154 | 155 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_banner1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_banner1.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_banner4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_banner4.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_banner5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_banner5.jpg -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_category1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_category1.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_category2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_category2.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_category3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_category3.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_category4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_category4.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_category5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_category5.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_category6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_category6.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_category7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_category7.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_category8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_category8.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_category9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_category9.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_footer1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_footer1.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_footer2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_footer2.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_footer3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_footer3.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_logo.png -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_logo1.png -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_product1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_product1.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_product2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_product2.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_product3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_product3.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_product4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_product4.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_product5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_product5.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_product6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_product6.webp -------------------------------------------------------------------------------- /Flipkart_Clone/flipkart_product7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Flipkart_Clone/flipkart_product7.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar.js: -------------------------------------------------------------------------------- 1 | let movies = [ 2 | { 3 | name: "loki", 4 | des: "Loki is an American television series created by Michael Waldron for the streaming service Disney.", 5 | image: "hotstar_banner1.png", 6 | }, 7 | { 8 | name: "falcon and the winter soldier", 9 | des: "Falcon and the Winter Soldier is an American television series created for the streaming platform Disney+.", 10 | image: "hotstar_banner2.png", 11 | }, 12 | { 13 | name: "WandaVision", 14 | des: "WandaVision is an American television series created for the streaming service Disney+", 15 | image: "hotstar_banner3.png", 16 | }, 17 | 18 | { 19 | name: "Raya and the Last Dragon", 20 | des: "Raya and the Last Dragon is an animated Disney film released in 2021.", 21 | image: "hotstar_banner4.png", 22 | }, 23 | 24 | { 25 | name: "Luca", 26 | des: "Luca is a Disney-Pixar animated film released in 2021.", 27 | image: "hotstar_banner5.png", 28 | }, 29 | ]; 30 | 31 | const carousel = document.querySelector(".carousel"); 32 | let sliders = []; 33 | 34 | let slideIndex = 0; 35 | 36 | const createSlide = () => { 37 | if (slideIndex >= movies.length) { 38 | slideIndex = 0; 39 | } 40 | 41 | let slide = document.createElement("div"); 42 | let imgElement = document.createElement("img"); 43 | let content = document.createElement("div"); 44 | let h1 = document.createElement("h1"); 45 | let p = document.createElement("p"); 46 | 47 | imgElement.appendChild(document.createTextNode("")); 48 | h1.appendChild(document.createTextNode(movies[slideIndex].name)); 49 | p.appendChild(document.createTextNode(movies[slideIndex].des)); 50 | content.appendChild(h1); 51 | content.appendChild(p); 52 | slide.appendChild(content); 53 | slide.appendChild(imgElement); 54 | carousel.appendChild(slide); 55 | 56 | imgElement.src = movies[slideIndex].image; 57 | slideIndex++; 58 | 59 | slide.className = "slider"; 60 | content.className = "slide-content"; 61 | h1.className = "movie-title"; 62 | p.className = "movie-des"; 63 | 64 | sliders.push(slide); 65 | 66 | if (sliders.length) { 67 | sliders[0].style.marginLeft = `calc(-${100 * (sliders.length - 2)}% - ${ 68 | 30 * (sliders.length - 2) 69 | }px)`; 70 | } 71 | }; 72 | 73 | for (let i = 0; i < 3; i++) { 74 | createSlide(); 75 | } 76 | 77 | setInterval(() => { 78 | createSlide(); 79 | }, 3000); 80 | 81 | // video cards 82 | 83 | const videoCards = document.querySelectorAll(".video-card"); 84 | 85 | videoCards.forEach((item) => { 86 | item.addEventListener("mouseover", () => { 87 | let video = item.children[1]; 88 | video.play(); 89 | }); 90 | item.addEventListener("mouseleave", () => { 91 | let video = item.children[1]; 92 | video.pause(); 93 | }); 94 | }); 95 | 96 | 97 | let cardContainers = document.querySelectorAll(".card-container"); 98 | let preBtns = document.querySelectorAll(".pre-btn"); 99 | let nxtBtns = document.querySelectorAll(".nxt-btn"); 100 | 101 | function scrollLeft(container) { 102 | container.scrollLeft -= container.clientWidth; 103 | } 104 | 105 | function scrollRight(container) { 106 | container.scrollLeft += container.clientWidth; 107 | } 108 | 109 | preBtns.forEach((preBtn, index) => { 110 | preBtn.addEventListener("click", () => { 111 | scrollLeft(cardContainers[index]); 112 | }); 113 | }); 114 | 115 | nxtBtns.forEach((nxtBtn, index) => { 116 | nxtBtn.addEventListener("click", () => { 117 | scrollRight(cardContainers[index]); 118 | }); 119 | }); 120 | -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_add.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_appstore.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_appstore.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_banner1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_banner1.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_banner2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_banner2.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_banner3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_banner3.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_banner4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_banner4.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_banner5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_banner5.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_card1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_card1.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_card2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_card2.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_card3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_card3.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_card4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_card4.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_card5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_card5.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_logo.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_next.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_playstore.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_playstore.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster1.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster10.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster10.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster11.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster11.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster12.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster12.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster13.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster13.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster14.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster14.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster15.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster15.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster16.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster16.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster17.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster17.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster18.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster18.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster19.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster19.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster2.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster20.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster20.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster21.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster21.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster22.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster22.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster23.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster23.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster24.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster24.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster25.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster25.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster26.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster26.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster27.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster27.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster28.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster28.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster29.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster29.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster3.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster30.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster30.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster4.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster5.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster6.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster7.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster8.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_poster9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_poster9.webp -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_pre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_pre.png -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_video1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_video1.mp4 -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_video2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_video2.mp4 -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_video3.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_video3.mp4 -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_video4.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_video4.mp4 -------------------------------------------------------------------------------- /Hotstar_Clone/hotstar_video5.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Hotstar_Clone/hotstar_video5.mp4 -------------------------------------------------------------------------------- /Meesho_Clone/meesho.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | :root{ 5 | --hoverTextColor:rgb(244, 51, 151); 6 | --textColor : rgb(87, 85, 85); 7 | } 8 | 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | width: 100%; 14 | font-family: 'Roboto', sans-serif; 15 | color:var(--textColor); 16 | } 17 | img{ 18 | width: 100%; 19 | } 20 | .header{ 21 | height: 72px; 22 | outline: 1px solid #ccc; 23 | padding: 0px 10px; 24 | display: flex; 25 | align-items: center; 26 | justify-content: space-between; 27 | font-weight: 400; 28 | } 29 | .headerLeft, 30 | .headerRight{ 31 | display: flex; 32 | align-items: center; 33 | } 34 | .logoContainer{ 35 | width: 155px; 36 | } 37 | 38 | 39 | .searchInputContainer{ 40 | width: 400px; 41 | height: 45px; 42 | outline:1px solid rgb(126, 126, 126); 43 | display: flex; 44 | margin-left: 25px; 45 | border-radius: 3px; 46 | align-items: center; 47 | padding: 10px; 48 | position: relative; 49 | } 50 | .searchIcon{ 51 | width: 20px; 52 | margin: 6px; 53 | } 54 | form{ 55 | width: 100%; 56 | } 57 | .inputSearch{ 58 | width: 100%; 59 | border:none; 60 | outline: none; 61 | font-size: 16px; 62 | } 63 | #closeSearch{ 64 | display: none; 65 | } 66 | 67 | 68 | .searchRecentModal{ 69 | position: absolute; 70 | bottom: 0; 71 | left:0; 72 | top:45px; 73 | background-color: white; 74 | height: 400px; 75 | width: 100%; 76 | display: none; 77 | padding: 15px; 78 | box-shadow: 0px 0px 5px rgba(0,0,0,0.3); 79 | z-index: 3; 80 | } 81 | .searchInputContainer:focus-within .searchRecentModal{ 82 | display: block; 83 | background-color: white; 84 | } 85 | .recentIcon{ 86 | width: 20px; 87 | margin-right: 10px; 88 | } 89 | .recentItem{ 90 | display: flex; 91 | align-items: center; 92 | background-color: white; 93 | } 94 | 95 | 96 | /***right***/ 97 | .mobileIcon{ 98 | width: 15px; 99 | margin: 5px; 100 | } 101 | .downloadContainer{ 102 | display: flex; 103 | align-items: center; 104 | height: 100%; 105 | padding-right: 20px; 106 | position: relative; 107 | } 108 | .downloadContainer:hover{ 109 | color:var(--hoverTextColor); 110 | cursor: pointer; 111 | } 112 | .downloadBtn{ 113 | display: block; 114 | width: 180px; 115 | margin-top: 5px; 116 | } 117 | .downloadHoverBtnContainer{ 118 | position: absolute; 119 | bottom: 0; 120 | top:40px; 121 | /* box-shadow: 0px 0px 5px rgba(0,0,0,0.3); */ 122 | width: 200px; 123 | /* background-color: red; */ 124 | display: none; 125 | height: 200px; 126 | padding: 10px; 127 | margin-left: -30px; 128 | color:var(--textColor); 129 | background: white; 130 | z-index: 2; 131 | } 132 | .downloadContainer:hover .downloadHoverBtnContainer, 133 | .downloadContainer:focus .downloadHoverBtnContainer{ 134 | display: block; 135 | } 136 | 137 | .downloadContainer p{ 138 | margin:0; 139 | padding: 0; 140 | font-size: 17px; 141 | } 142 | 143 | .profileAndCart{ 144 | display: flex; 145 | align-items: center; 146 | 147 | } 148 | .profileAndCart:hover, 149 | .profileAndCart:focus{ 150 | color: var(--hoverTextColor); 151 | } 152 | 153 | .profileIcon, 154 | .CartIcon{ 155 | width: 20px; 156 | } 157 | .profileAndCart p{ 158 | margin:0; 159 | padding: 0; 160 | } 161 | .profileContainer, 162 | .CartContainer{ 163 | padding: 0px 20px; 164 | display: flex; 165 | justify-content: center; 166 | align-items: center; 167 | flex-direction: column; 168 | } 169 | 170 | .becomeSupplierContainer{ 171 | padding: 0px 30px; 172 | border-left: 1.5px solid #ccc; 173 | border-Right: 1.5px solid #ccc; 174 | font-size: 17px; 175 | } 176 | 177 | /**navigation css ***/ 178 | nav{ 179 | width: 100%; 180 | border-bottom: 1px solid #ccc; 181 | height: 54px; 182 | 183 | } 184 | nav ul{ 185 | padding: 0; 186 | list-style: none; 187 | display: flex; 188 | justify-content: space-between; 189 | align-items: center; 190 | padding: 0px 10px; 191 | height: 100%; 192 | margin: 0; 193 | position: relative; 194 | } 195 | nav ul li{ 196 | height: 100%; 197 | display: flex; 198 | align-items: center; 199 | margin: 0; 200 | /* background-color: red; */ 201 | border-bottom: 2px solid transparent; 202 | cursor: pointer; 203 | 204 | } 205 | nav ul li:hover{ 206 | color:var(--hoverTextColor); 207 | border-bottom: 4px solid var(--hoverTextColor); 208 | } 209 | 210 | 211 | /**module box submenu***/ 212 | .subMenu{ 213 | position: absolute; 214 | /* height: 400px; */ 215 | top:51px; 216 | left: 0; 217 | right: 0; 218 | background-color: white; 219 | border: 1px solid #ccc; 220 | box-sizing: border-box; 221 | display: none; 222 | margin: 0px 10px; 223 | box-shadow: 1px 1px 3px rgba(0,0,0,0.3); 224 | padding: 20px; 225 | } 226 | 227 | nav ul li:hover .subMenu{ 228 | display: block; 229 | } 230 | 231 | .subMenu p{ 232 | color:var(--textColor) 233 | 234 | } 235 | .submenuList{ 236 | display: flex; 237 | 238 | } 239 | .column{ 240 | margin-right: 40px; 241 | } 242 | 243 | 244 | 245 | .lowestpriceContainer{ 246 | display: flex; 247 | margin:50px auto; 248 | max-width: 1100px; 249 | /* background-color: red; */ 250 | } 251 | .lowestpriceContainer h1{ 252 | font-size: 40px; 253 | margin: 0; 254 | color:rgb(36, 31, 31); 255 | } 256 | .lowestPrice_text{ 257 | width: 50%; 258 | padding: 25px 0 0 25px; 259 | } 260 | .lowestPrice_image{ 261 | width: 50%; 262 | } 263 | .lowestPrice_icon{ 264 | width: 30px; 265 | border-radius: 40px; 266 | background-color: rgb(238, 133, 187); 267 | } 268 | .lowestPriceWhay{ 269 | display: flex; 270 | height: 50px; 271 | margin: 20px 0; 272 | } 273 | .lowestPriceItem{ 274 | padding: 0 20px; 275 | width: 100%; 276 | display: flex; 277 | align-items: center; 278 | border-right: 2px solid #ccc; 279 | } 280 | .lowestPriceItem p{ 281 | padding-left: 10px; 282 | } 283 | .downloadApp_contianer{ 284 | display: flex; 285 | align-items: center; 286 | font-size: 20px; 287 | height: 50px; 288 | background-color: var(--hoverTextColor); 289 | border:none; 290 | outline: none; 291 | padding: 0 10px; 292 | border-radius: 5px; 293 | color:white; 294 | } 295 | .downloadApp_contianer p{ 296 | padding: 0px 20px; 297 | } 298 | 299 | 300 | 301 | /*topCategoriesFrom*/ 302 | .topCategoriesFrom{ 303 | width: 1100px; 304 | margin: auto; 305 | } 306 | .topCategoriesHeading{ 307 | display: flex; 308 | align-items: center; 309 | 310 | } 311 | .horizontalLine{ 312 | padding: 1px; 313 | background-color: var(--hoverTextColor); 314 | width:50%; 315 | } 316 | .topCategoriesHeading h1{ 317 | width: max-content; 318 | width: 1050px; 319 | color:rgb(8, 8, 8); 320 | font-size: 38px; 321 | margin: 0; 322 | } 323 | .topCategoreisImage{ 324 | width: 100%; 325 | height: 500px; 326 | background-image: url("meesho_background.webp"); 327 | background-repeat: no-repeat; 328 | margin-top: 50px; 329 | display: flex; 330 | align-items: flex-end; 331 | } 332 | .topCategoreisImage img{ 333 | max-width: 300px; 334 | margin: 10px; 335 | bottom: 0; 336 | } 337 | .topCategoreisImage img:first-child{ 338 | max-width: 400px; 339 | } 340 | 341 | .essentialContaienr{ 342 | width: 100%; 343 | height: 500px; 344 | background-color: 400px; 345 | margin-top: 50px; 346 | background-image: url("meesho_background.webp"); 347 | background-repeat: no-repeat; 348 | display: flex; 349 | align-items: center; 350 | justify-content: space-between; 351 | } 352 | .essentialContaienr img{ 353 | max-width: 180px; 354 | } 355 | 356 | 357 | .essential_item{ 358 | max-width: 250px; 359 | display: flex; 360 | flex-direction: column; 361 | align-items: center; 362 | } 363 | .essen-btn{ 364 | margin-left: 100px; 365 | margin-top: 20px ; 366 | } 367 | 368 | .becomesellerBanner_Container{ 369 | margin: 50px 0px; 370 | position: relative; 371 | 372 | } 373 | .becomesellerBanner_Container img{ 374 | width: 100%; 375 | } 376 | .becomeSeller_Content{ 377 | position: absolute; 378 | top:0; 379 | right: 0; 380 | width: 100%; 381 | padding: 40px 0px; 382 | } 383 | .becomeSeller_content_content{ 384 | display: flex; 385 | flex-direction: column; 386 | align-items: flex-end; 387 | } 388 | .becomerSeller_appDownload{ 389 | position: relative; 390 | width: 150px; 391 | height: 50px; 392 | background-color: black; 393 | margin: 10px; 394 | padding: 5px; 395 | border-radius: 5px; 396 | } 397 | .becomerSeller_appDownload img{ 398 | width: 100%; 399 | height: 100%; 400 | background-color: black; 401 | } 402 | .becomeSeller_content_content h2{ 403 | color:rgb(85, 133, 248) ; 404 | font-size: 30px; 405 | margin-bottom: 0; 406 | } 407 | .becomeSeller_content_content h1{ 408 | color: var(--hoverTextColor); 409 | font-size: 50px; 410 | width: 60%; 411 | text-align: right; 412 | } 413 | .becomerSeller_appDownload_container{ 414 | display: flex; 415 | } 416 | 417 | 418 | .meeesho_benifit_image{ 419 | width: 20px; 420 | margin-right: 10px; 421 | } 422 | .meesho_supper_benifit{ 423 | display: flex; 424 | align-items: center; 425 | padding: 0px 40px; 426 | border-right: 2px solid white; 427 | height: 25px; 428 | } 429 | .meesho_supper_benifit:first-child{ 430 | padding: 0; 431 | padding-right: 40px; 432 | } 433 | .meesho-suppliear_benifit_container{ 434 | display: flex; 435 | align-items: center; 436 | margin: 40px 0px; 437 | } 438 | .meesho_supper_container{ 439 | position: relative; 440 | } 441 | .meesho_supper_container_content{ 442 | position: absolute; 443 | top: 0; 444 | padding: 20px 30px; 445 | color:white; 446 | } 447 | .signup_btn_now{ 448 | background-color: white; 449 | color:var(--hoverTextColor); 450 | font-size: 20px; 451 | font-weight: bold; 452 | padding: 15px 20px; 453 | box-sizing: border-box; 454 | text-decoration: none; 455 | border-radius: 5px; 456 | } 457 | 458 | .Product_container_You{ 459 | min-height: 500px; 460 | padding: 10px; 461 | } 462 | .product_container_you_content{ 463 | display: grid; 464 | grid-template-columns: 280px 1fr; 465 | height: 100%; 466 | gap:30px; 467 | } 468 | .product_category_you_aside{ 469 | height: 100%; 470 | } 471 | .product_category_display{ 472 | height: 100%; 473 | display: grid; 474 | grid-template-columns: repeat(4,minmax(250px,1fr)); 475 | } 476 | .search_category_input{ 477 | display: flex; 478 | padding: 15px; 479 | font-size: 18px; 480 | border:2px solid #ccc; 481 | border-radius: 5px; 482 | } 483 | .search_category_input input{ 484 | font-size: 18px; 485 | width: 100%; 486 | background-color: transparent; 487 | border:none; 488 | outline: none; 489 | padding: 0px 10px; 490 | } 491 | .search_category_input input::placeholder{ 492 | font-size: 15px; 493 | } 494 | .display_Category_list{ 495 | padding: 20px 10px; 496 | display: flex; 497 | flex-direction: column; 498 | } 499 | .display_Category_list label{ 500 | margin: 3px 0px; 501 | text-transform: capitalize; 502 | } 503 | 504 | 505 | .productCard{ 506 | max-width: 250px; 507 | padding: 10px; 508 | box-shadow: -1px -1px 5px rgba(0,0,0,0.1), 509 | 1px 1px 5px rgba(0,0,0,0.3); 510 | border-radius: 5px; 511 | cursor: pointer; 512 | } 513 | .product_image{ 514 | display: flex; 515 | 516 | justify-content: center; 517 | align-items: center; 518 | flex-direction: column; 519 | } 520 | .product_image img{ 521 | width: fit-content; 522 | height: 170px; 523 | } 524 | .product_price{ 525 | font-weight: 550; 526 | font-size: 22px; 527 | color:black; 528 | } 529 | .product_name{ 530 | text-transform: capitalize; 531 | } 532 | 533 | @media screen and (max-width: 600px) { 534 | .searchInputContainer { 535 | width: 100%; 536 | } 537 | .headerRight { 538 | display: none; 539 | } 540 | .downloadContainer { 541 | display: none; 542 | } 543 | .lowestpriceContainer { 544 | flex-direction: column; 545 | } 546 | .lowestPrice_text, 547 | .lowestPrice_image { 548 | width: 100%; 549 | } 550 | .lowestpriceContainer h1 { 551 | font-size: 30px; 552 | } 553 | .lowestPrice_item { 554 | padding: 0 10px; 555 | border-right: none; 556 | border-bottom: 2px solid #ccc; 557 | } 558 | .topCategoriesFrom { 559 | width: 100%; 560 | padding: 0 10px; 561 | } 562 | .topCategoriesHeading h1 { 563 | font-size: 30px; 564 | } 565 | .essentialContaienr { 566 | flex-direction: column; 567 | align-items: center; 568 | text-align: center; 569 | } 570 | .essential_item { 571 | width: 100%; 572 | } 573 | .footerContent_Container { 574 | flex-direction: column; 575 | align-items: center; 576 | } 577 | .footerContent, 578 | .footerContent_social, 579 | .footerContent_downloadApp { 580 | width: 100%; 581 | text-align: center; 582 | margin-bottom: 20px; 583 | } 584 | } 585 | -------------------------------------------------------------------------------- /Meesho_Clone/meesho.js: -------------------------------------------------------------------------------- 1 | import BagsFootwear from "./data/BagsFootwear.js" 2 | import BeautyHealth from "./data/BeautyHealth.js" 3 | import Electronics from "./data/Electronic.js" 4 | import HomeAndKitchen from "./data/HomeAndKitchen.js" 5 | import JewelleryAccessories from "./data/JewelleryAccessories.js" 6 | import Kids from "./data/Kids.js" 7 | import Men from "./data/Men.js" 8 | import WomenEthnic from "./data/WomenEthnic.js" 9 | import WomenWestern from "./data/WomenWestern.js" 10 | 11 | 12 | 13 | 14 | 15 | let inputSearchEl = document.querySelector(".inputSearch") 16 | let recentInput = [] 17 | let formInputEl = document.getElementById("inputForm") 18 | const listofRecentEl = document.querySelector(".listofRecent") 19 | 20 | 21 | 22 | inputSearchEl.addEventListener("keydown", () => { 23 | // console.log(inputSearchEl) 24 | if (inputSearchEl.value) { 25 | document.getElementById("closeSearch").style.display = "block" 26 | } 27 | else { 28 | document.getElementById("closeSearch").style.display = "none" 29 | } 30 | }) 31 | 32 | formInputEl.addEventListener("submit", (e) => { 33 | e.preventDefault() 34 | let listofRecentHTMLEl = "" 35 | 36 | recentInput.unshift(inputSearchEl.value) 37 | console.log(recentInput) 38 | 39 | if (recentInput.length > 0) { 40 | for (let i = 0; i < recentInput.length; i++) { 41 | listofRecentHTMLEl += ` 42 |
43 |
44 | 45 |
46 |

${recentInput[i]}

47 |
48 | ` 49 | } 50 | 51 | listofRecentEl.innerHTML = listofRecentHTMLEl 52 | } 53 | }) 54 | 55 | /*function reuble*****/ 56 | function renderSubMenu(id, data) { 57 | let temp = document.getElementById(id) 58 | function TempFunc() { 59 | return data.map(el => { 60 | let list = ""; 61 | list = el.data.map(element => `

${element}

`).join(" ") 62 | return ` 63 |
64 |

${el.heading}

65 | ${list} 66 |
67 | ` 68 | }).join("") 69 | } 70 | temp.innerHTML = TempFunc() 71 | } 72 | 73 | 74 | 75 | 76 | 77 | 78 | /****womenEthic */ 79 | renderSubMenu("womenEthic", WomenEthnic) 80 | 81 | /****WomenWestern */ 82 | renderSubMenu("womenWestern", WomenWestern) 83 | 84 | //Men 85 | renderSubMenu("men", Men) 86 | 87 | /***kids */ 88 | renderSubMenu("kids", Kids) 89 | 90 | /**home % kitchen */ 91 | renderSubMenu("HomeAndKitchen", HomeAndKitchen) 92 | 93 | /**beauty and health */ 94 | renderSubMenu("beautyAndHealth", BeautyHealth) 95 | 96 | // Jewellery & Accessories 97 | renderSubMenu("JewelleryAndAccessories", JewelleryAccessories) 98 | 99 | // Bags & Footwear 100 | renderSubMenu("BagsFootWarId", BagsFootwear) 101 | 102 | // Electronics 103 | renderSubMenu("ElectronicsId", Electronics) 104 | 105 | 106 | 107 | /**********product section***************/ 108 | import ProductData from "./meesho/data.js" 109 | 110 | const category = [...new Set(ProductData.map(el => el.category))] 111 | console.log(category) 112 | 113 | 114 | let filterData = [] 115 | 116 | document.addEventListener("click", (e) => { 117 | 118 | 119 | const bluetoothEl = document.getElementById("bluetooth").checked 120 | const ChainsEl = document.getElementById("chains").checked 121 | const KurtasEl = document.getElementById("kurtas").checked 122 | const AccessoriesEl = document.getElementById("accessories").checked 123 | const sareesEl = document.getElementById("sarees").checked 124 | const watchEl = document.getElementById("watch").checked 125 | 126 | console.log(bluetoothEl) 127 | filterData = ProductData.filter(el => ( 128 | bluetoothEl && el.category == "bluetooth Headset" || 129 | ChainsEl && el.category == "Men Chains" || 130 | KurtasEl && el.category == "Kurtas" || 131 | AccessoriesEl && el.category == "Mobile Accessories" || 132 | sareesEl && el.category == "sarees" || 133 | watchEl && el.category == "watch" 134 | )) 135 | 136 | renderProductData() 137 | 138 | 139 | }) 140 | 141 | function renderProductData(){ 142 | let filterDataHTML = ""; 143 | 144 | if(filterData[0]){ 145 | filterData.forEach(el => { 146 | filterDataHTML += ` 147 |
148 |
149 | 150 |
151 |

${el.name}

152 |

153 | ₹ 154 | ${el.price} 155 |

156 |
157 | ` 158 | }) 159 | } 160 | else{ 161 | ProductData.forEach(el => { 162 | filterDataHTML += ` 163 |
164 |
165 | 166 |
167 |

${el.name}

168 |

169 | ₹ 170 | ${el.price} 171 |

172 |
173 | ` 174 | }) 175 | } 176 | 177 | document.getElementById("product_category_displayId").innerHTML = filterDataHTML 178 | } 179 | renderProductData() 180 | 181 | 182 | 183 | function ClickProduct(id){ 184 | localStorage.setItem("productId",JSON.stringify(id)) 185 | // window.location("./page/product.html") 186 | 187 | alert("hii") 188 | } 189 | -------------------------------------------------------------------------------- /Meesho_Clone/meesho_Categoreis1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_Categoreis1.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_Categoreis2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_Categoreis2.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_Categoreis3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_Categoreis3.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_Categoreis4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_Categoreis4.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_Categoreis5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_Categoreis5.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_Categoreis6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_Categoreis6.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_appstore.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_appstore.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_background.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_background.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_banner1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_banner1.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_banner2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_banner2.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_banner3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_banner3.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_cart.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_delivery1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Meesho_Clone/meesho_delivery3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Meesho_Clone/meesho_label1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_label1.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_label2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_label2.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_label3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_label3.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_logo.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_mobile.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_playstore.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_playstore.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_playstore2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_playstore2.webp -------------------------------------------------------------------------------- /Meesho_Clone/meesho_recent.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_recent.png.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_search.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_user.png -------------------------------------------------------------------------------- /Meesho_Clone/meesho_view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/meesho_view.png -------------------------------------------------------------------------------- /Meesho_Clone/messho_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Meesho_Clone/messho_icon.png -------------------------------------------------------------------------------- /Netflix_Clone/netflix.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: black; 9 | color: white; 10 | font-family: "Poppins", sans-serif; 11 | } 12 | 13 | .navbar { 14 | position: absolute; 15 | top: 0; 16 | width: 100%; 17 | display: flex; 18 | justify-content: space-between; 19 | padding: 3% 5%; 20 | z-index: 10; 21 | } 22 | 23 | .navbar__brand { 24 | width: 100px; 25 | height: 100%; 26 | } 27 | 28 | .brand__logo { 29 | width: 100%; 30 | height: 100%; 31 | } 32 | 33 | .language__drop__down { 34 | background: transparent; 35 | border: none; 36 | color: white; 37 | } 38 | 39 | .language__drop__down:focus { 40 | outline: none; 41 | } 42 | 43 | .language__drop__down option { 44 | background-color: black; 45 | } 46 | 47 | .dropdown__container { 48 | border: 1px solid white; 49 | padding: 0.4rem; 50 | border-radius: 4px; 51 | background: rgba(0, 0, 0, 0.4); 52 | } 53 | 54 | .signin__button { 55 | background-color: #dc030f; 56 | border: 1px solid #dc030f; 57 | color: white; 58 | padding: 0.25rem 0.5rem; 59 | border-radius: 4px; 60 | } 61 | 62 | .navbar__nav__items { 63 | display: flex; 64 | gap: 10px; 65 | } 66 | 67 | .hero__bg__image__container { 68 | width: 100%; 69 | height: 80vh; 70 | } 71 | 72 | .hero__bg__image { 73 | width: 100%; 74 | height: 100%; 75 | object-fit: cover; 76 | } 77 | 78 | .hero__bg__overlay { 79 | position: absolute; 80 | inset: 0; 81 | width: 100%; 82 | height: 80vh; 83 | background: rgba(0, 0, 0, 0.4); 84 | background-image: linear-gradient( 85 | to top, 86 | rgba(0, 0, 0, 0.8) 0, 87 | rgba(0, 0, 0, 0) 60%, 88 | rgba(0, 0, 0, 0.8) 100% 89 | ); 90 | } 91 | 92 | .hero__card { 93 | position: absolute; 94 | top: 20%; 95 | text-align: center; 96 | display: flex; 97 | flex-direction: column; 98 | gap: 10px; 99 | } 100 | 101 | .hero__title { 102 | font-weight: 600; 103 | font-size: 2rem; 104 | } 105 | 106 | .hero__subtitle, 107 | .hero__description { 108 | font-weight: 400; 109 | font-size: 1rem; 110 | } 111 | 112 | .hero__description { 113 | margin: 0 50px; 114 | } 115 | 116 | .email__input { 117 | border: none; 118 | background: transparent; 119 | width: 100%; 120 | height: 100%; 121 | padding-left: 7px; 122 | } 123 | 124 | .email__label { 125 | color: black; 126 | position: absolute; 127 | top: 28%; 128 | left: 2%; 129 | color: rgb(153, 149, 149); 130 | transition: 0.5s; 131 | } 132 | 133 | .email__form__container { 134 | display: flex; 135 | flex-direction: column; 136 | justify-content: center; 137 | align-items: center; 138 | gap: 15px; 139 | } 140 | 141 | .form__container { 142 | background-color: white; 143 | width: 90%; 144 | height: 50px; 145 | position: relative; 146 | } 147 | 148 | .email__input:focus + .email__label { 149 | top: 0.2rem; 150 | font-size: 10px; 151 | } 152 | 153 | .email__input:not(:placeholder-shown):not(:focus) + .email__label { 154 | top: 0.2rem; 155 | font-size: 10px; 156 | } 157 | 158 | .email__input:focus-visible { 159 | outline: none; 160 | } 161 | 162 | .primary__button { 163 | background-color: #dc030f; 164 | border: 1px solid #dc030f; 165 | color: white; 166 | padding: 0.8rem 1.2rem; 167 | border-radius: 2px; 168 | font-size: 15px; 169 | letter-spacing: 1px; 170 | } 171 | 172 | .feature { 173 | border-top: 8px solid #222; 174 | padding: 2rem 1rem; 175 | } 176 | 177 | .feature__details { 178 | text-align: center; 179 | } 180 | 181 | .feature__title { 182 | font-size: 25px; 183 | font-weight: 600; 184 | margin: 10px 0; 185 | } 186 | 187 | .feature__sub__title { 188 | font-size: 15px; 189 | font-weight: 400; 190 | } 191 | 192 | .feature__image__container { 193 | width: 100%; 194 | position: relative; 195 | } 196 | 197 | .feature__image { 198 | width: 100%; 199 | } 200 | 201 | .feature__backgroud__video__container { 202 | position: absolute; 203 | width: 100%; 204 | top: 20%; 205 | left: 13%; 206 | height: 100%; 207 | max-width: 73%; 208 | max-height: 54%; 209 | z-index: -2; 210 | } 211 | 212 | .feature__backgroud__video { 213 | width: 100%; 214 | } 215 | 216 | .feature__2__poster__container { 217 | position: absolute; 218 | bottom: 8%; 219 | left: 50%; 220 | transform: translateX(-50%); 221 | width: 100%; 222 | max-width: 16em; 223 | display: flex; 224 | align-items: center; 225 | background-color: black; 226 | border: 2px solid rgba(255, 255, 255, 0.25); 227 | border-radius: 10px; 228 | height: 60px; 229 | padding: 0.25rem 0.6rem; 230 | gap: 15px; 231 | } 232 | 233 | .poster__container { 234 | width: 20%; 235 | } 236 | 237 | .poster { 238 | width: 100%; 239 | height: 100%; 240 | } 241 | 242 | .poster__details { 243 | width: 60%; 244 | } 245 | 246 | .poster__details > h4 { 247 | font-size: 13px; 248 | font-weight: 500; 249 | } 250 | 251 | .poster__details > h6 { 252 | font-size: 12px; 253 | font-weight: 400; 254 | color: rgb(63, 63, 246); 255 | } 256 | 257 | .download__gif__container { 258 | width: 20%; 259 | height: 100%; 260 | } 261 | 262 | .gif { 263 | width: 100%; 264 | height: 100%; 265 | } 266 | 267 | .feature__3__backgroud__video__container { 268 | max-width: 63%; 269 | max-height: 47%; 270 | z-index: -2; 271 | top: 9%; 272 | left: 19%; 273 | } 274 | 275 | .FAQ__accordian { 276 | width: 100%; 277 | } 278 | 279 | .FAQ__title { 280 | width: 100%; 281 | display: flex; 282 | justify-content: space-between; 283 | padding: 15px 20px; 284 | font-size: 18px; 285 | background-color: #303030; 286 | border: 1px solid #303030; 287 | color: white; 288 | } 289 | 290 | .FAQ__visible { 291 | background-color: #303030; 292 | border-top: 1px solid black; 293 | max-height: 0; 294 | overflow: hidden; 295 | transition: max-height 0.5s ease-in-out; 296 | } 297 | 298 | .FAQ__visible > p { 299 | margin: 1rem; 300 | } 301 | 302 | .FAQ__list__container { 303 | border-top: 8px solid #222; 304 | padding: 2rem 0; 305 | } 306 | 307 | .FAQ__heading { 308 | font-size: 20px; 309 | text-align: center; 310 | font-weight: 600; 311 | margin: 1rem 3rem; 312 | } 313 | 314 | .FAQ__list { 315 | display: flex; 316 | flex-direction: column; 317 | justify-content: center; 318 | align-items: center; 319 | gap: 10px; 320 | } 321 | 322 | .FAQ__get__started__email { 323 | text-align: center; 324 | } 325 | 326 | .FAQ__get__started__email > h3 { 327 | font-size: 18px; 328 | font-weight: 400; 329 | margin: 2rem 0; 330 | } 331 | 332 | footer { 333 | border-top: 8px solid #333; 334 | padding: 2rem 1rem; 335 | color: #757575; 336 | display: flex; 337 | flex-direction: column; 338 | gap: 20px; 339 | } 340 | 341 | .footer__row__2 { 342 | display: flex; 343 | flex-wrap: wrap; 344 | justify-content: space-around; 345 | gap: 20px; 346 | } 347 | 348 | .footer__row__1 > h4 { 349 | font-size: 15px; 350 | font-weight: 500; 351 | } 352 | 353 | .footer__row__3 > .dropdown__container { 354 | width: fit-content; 355 | border: 1px solid #757575; 356 | color: #757575; 357 | } 358 | 359 | .footer__row__3 > .dropdown__container > .language__drop__down { 360 | color: #757575; 361 | } 362 | 363 | @media (min-width: 768px) { 364 | .hero__bg__image__container { 365 | height: 100vh; 366 | } 367 | 368 | .hero__bg__overlay { 369 | height: 100vh; 370 | } 371 | 372 | .hero__card { 373 | top: 40%; 374 | left: 30%; 375 | transform: translate(-20%, -20%); 376 | } 377 | 378 | .hero__title { 379 | font-size: 3rem; 380 | } 381 | 382 | .hero__subtitle, 383 | .hero__description { 384 | font-size: 1.3rem; 385 | } 386 | 387 | .feature { 388 | padding: 4rem; 389 | } 390 | 391 | .feature__title { 392 | font-size: 35px; 393 | } 394 | 395 | .feature__sub__title { 396 | font-size: 20px; 397 | } 398 | 399 | .feature__2__poster__container { 400 | max-width: 26em; 401 | height: 85px; 402 | } 403 | 404 | .poster__container { 405 | width: 15%; 406 | } 407 | 408 | .download__gif__container { 409 | width: 3rem; 410 | height: 3rem; 411 | } 412 | 413 | .poster__details > h4 { 414 | font-size: 18px; 415 | } 416 | 417 | .poster__details > h6 { 418 | font-size: 14px; 419 | } 420 | 421 | .FAQ__title { 422 | font-size: 20px; 423 | } 424 | 425 | .FAQ__heading { 426 | font-size: 38px; 427 | font-weight: 500; 428 | letter-spacing: 1px; 429 | } 430 | 431 | .FAQ__list { 432 | padding: 1rem 5rem; 433 | } 434 | 435 | .FAQ__get__started__email { 436 | width: 75%; 437 | display: flex; 438 | flex-direction: column; 439 | justify-content: center; 440 | transform: translateX(15%); 441 | } 442 | } 443 | 444 | @media (min-width: 1024px) { 445 | .navbar { 446 | padding: 2% 5%; 447 | } 448 | 449 | .navbar__brand { 450 | width: 150px; 451 | } 452 | 453 | .signin__button { 454 | padding: 10px 20px; 455 | font-size: 18px; 456 | } 457 | 458 | .dropdown__container { 459 | padding: 10px 5px; 460 | } 461 | 462 | .navbar__nav__items { 463 | gap: 30px; 464 | } 465 | 466 | .hero__card { 467 | top: 50%; 468 | left: 50%; 469 | transform: translate(-50%, -50%); 470 | } 471 | 472 | .form__container { 473 | width: 50%; 474 | } 475 | 476 | .email__form__container { 477 | flex-direction: row; 478 | align-items: center; 479 | gap: 1px; 480 | } 481 | 482 | .primary__button { 483 | height: 50px; 484 | } 485 | 486 | .feature { 487 | display: flex; 488 | align-items: center; 489 | justify-content: space-between; 490 | gap: 20px; 491 | } 492 | 493 | .feature__details { 494 | text-align: left; 495 | padding: 0 6rem; 496 | } 497 | 498 | .feature__title { 499 | font-size: 50px; 500 | } 501 | 502 | .feature__sub__title { 503 | font-size: 25px; 504 | } 505 | 506 | .feature__image__container { 507 | max-width: 500px; 508 | } 509 | 510 | .feature:nth-child(even) { 511 | flex-direction: row-reverse; 512 | } 513 | 514 | .feature__2__poster__container { 515 | max-width: 20em; 516 | height: 100px; 517 | padding: 1rem; 518 | } 519 | 520 | .poster__container { 521 | width: 20%; 522 | } 523 | 524 | .FAQ__list { 525 | padding: 1rem 25rem; 526 | } 527 | 528 | .FAQ__get__started__email { 529 | transform: translateX(16%); 530 | } 531 | 532 | footer a { 533 | color: white; 534 | text-decoration: none; 535 | } 536 | 537 | footer a:hover { 538 | text-decoration: underline; 539 | } 540 | 541 | footer { 542 | padding: 2rem 20rem; 543 | justify-content: flex-start; 544 | text-align: left; 545 | align-items: flex-start; 546 | } 547 | 548 | .footer__row__2 { 549 | justify-content: space-between; 550 | align-items: flex-start; 551 | flex-wrap: nowrap; 552 | } 553 | 554 | .footer__row__1, 555 | .footer__row__3, 556 | .footer__row__4 { 557 | align-self: flex-start; 558 | } 559 | } 560 | -------------------------------------------------------------------------------- /Netflix_Clone/netflix.js: -------------------------------------------------------------------------------- 1 | let accordian = document.getElementsByClassName("FAQ__title"); 2 | 3 | for (let i = 0; i < accordian.length; i++) { 4 | accordian[i].addEventListener("click", function () { 5 | if (this.childNodes[1].classList.contains("fa-plus")) { 6 | this.childNodes[1].classList.remove("fa-plus"); 7 | this.childNodes[1].classList.add("fa-times"); 8 | } else { 9 | this.childNodes[1].classList.remove("fa-times"); 10 | this.childNodes[1].classList.add("fa-plus"); 11 | } 12 | 13 | let content = this.nextElementSibling; 14 | if (content.style.maxHeight) { 15 | content.style.maxHeight = null; 16 | } else { 17 | content.style.maxHeight = content.scrollHeight + "px"; 18 | } 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /Netflix_Clone/netflix_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Netflix_Clone/netflix_background.png -------------------------------------------------------------------------------- /Netflix_Clone/netflix_cartoon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Netflix_Clone/netflix_cartoon.png -------------------------------------------------------------------------------- /Netflix_Clone/netflix_download.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Netflix_Clone/netflix_download.gif -------------------------------------------------------------------------------- /Netflix_Clone/netflix_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Netflix_Clone/netflix_logo.png -------------------------------------------------------------------------------- /Netflix_Clone/netflix_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Netflix_Clone/netflix_mac.png -------------------------------------------------------------------------------- /Netflix_Clone/netflix_mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Netflix_Clone/netflix_mobile.jpg -------------------------------------------------------------------------------- /Netflix_Clone/netflix_movie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Netflix_Clone/netflix_movie.png -------------------------------------------------------------------------------- /Netflix_Clone/netflix_tv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Netflix_Clone/netflix_tv.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." -------------------------------------------------------------------------------- /Spotify_Clone/spotify.css: -------------------------------------------------------------------------------- 1 | body{ 2 | box-sizing: border-box; 3 | margin: 0px; 4 | padding: 0px; 5 | overflow-x: hidden; 6 | overflow-y: hidden; 7 | max-height: 100vh; 8 | height: 100vh; 9 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 10 | } 11 | 12 | .container{ 13 | height: 100vh; 14 | display: flex; 15 | flex-direction: row; 16 | } 17 | 18 | .left{ 19 | background-color: black; 20 | position: relative; 21 | width: 220px; 22 | left: 0; 23 | bottom: 0; 24 | top: 0; 25 | font-size: 16px; 26 | font-weight: 500; 27 | padding: 20px; 28 | display: flex; 29 | flex-direction: column; 30 | } 31 | 32 | .menu{ 33 | display: flex; 34 | flex-direction: row; 35 | position: relative; 36 | } 37 | 38 | .gray-filtered { 39 | filter: invert(0.5) sepia(70) saturate(0) hue-rotate(0); 40 | } 41 | 42 | .menu ul{ 43 | width: 100%; 44 | } 45 | 46 | .menu ul li img{ 47 | width: 24px; 48 | } 49 | 50 | .menu ul li{ 51 | padding: 5px; 52 | } 53 | 54 | .menu ul li a{ 55 | text-decoration: none; 56 | color: gray; 57 | } 58 | 59 | .menu ul *{ 60 | cursor: pointer; 61 | } 62 | 63 | .menu ul li a span{ 64 | position: relative; 65 | top: -5px; 66 | left: 8px; 67 | } 68 | 69 | .menu ul{ 70 | list-style: none; 71 | margin: 0; 72 | padding: 0; 73 | overflow: hidden; 74 | } 75 | 76 | .menu li{ 77 | padding-left: 0 !important; 78 | } 79 | 80 | .menu ul li a span:hover{ 81 | color: rgb(255, 255, 255); 82 | } 83 | 84 | .menu-playlist ul li a { 85 | text-decoration: none; 86 | color: gray; 87 | } 88 | 89 | .menu-playlist ul{ 90 | overflow: hidden; 91 | } 92 | 93 | ul { 94 | display: block; 95 | list-style-type: disc; 96 | margin-block-start: 1em; 97 | margin-block-end: 1em; 98 | margin-inline-start: 0px; 99 | margin-inline-end: 0px; 100 | padding-inline-start: 0px 101 | } 102 | 103 | .menu-playlist span{ 104 | text-align: left; 105 | font-size: 20px; 106 | line-height: 40px; 107 | } 108 | 109 | .menu-playlist ul li a span:hover{ 110 | color: rgb(255, 255, 255); 111 | } 112 | 113 | .grey-filtered{ 114 | filter: invert(0.9) sepia(100) saturate(0) hue-rotate(0); 115 | } 116 | 117 | .playlist-container{ 118 | background-color: #434343; 119 | border-radius: 50%; 120 | width: 40px; 121 | height: 40px; 122 | display: flex; 123 | justify-content: center; 124 | align-items: center; 125 | margin-right: 6px; 126 | } 127 | 128 | .playlist-arrow{ 129 | display: flex; 130 | justify-content: center; 131 | align-items: center; 132 | } 133 | 134 | .playlist-container img{ 135 | width: 25px; 136 | height: 25px; 137 | } 138 | 139 | .playlist-container img:hover{ 140 | cursor: pointer; 141 | } 142 | 143 | .playlist-top{ 144 | display: flex; 145 | justify-content: space-between; 146 | align-items: flex-start; 147 | flex-direction: row; 148 | flex-wrap: wrap; 149 | } 150 | 151 | .right{ 152 | width: 100%; 153 | } 154 | 155 | .playlist-top-email{ 156 | display: flex; 157 | justify-content: center; 158 | align-items: center; 159 | } 160 | 161 | .playlist-top-email button{ 162 | background-color: #ffff; 163 | outline: none; 164 | border: none; 165 | color: black; 166 | border-radius: 10px; 167 | padding: 5px 10px; 168 | } 169 | 170 | .playlist-header{ 171 | padding: 20px; 172 | background: rgb(230, 103, 208); 173 | background: linear-gradient(180deg, #ff0077 0%, rgb(197, 32, 161) 100%); 174 | } 175 | 176 | .playlist-content{ 177 | display: flex; 178 | flex-direction: row; 179 | align-items: flex-start; 180 | margin-top: 20px; 181 | } 182 | 183 | .playlist-cover img{ 184 | width: 230px; 185 | height: 230px; 186 | -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.42); 187 | -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.42); 188 | box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.42); 189 | } 190 | 191 | .playlist-info{ 192 | color: white; 193 | padding-left: 20px; 194 | } 195 | 196 | .playlist-public{ 197 | font-size: 12px; 198 | font-weight: 500; 199 | } 200 | 201 | .playlist-title{ 202 | font-size: 86px; 203 | font-weight: 1000; 204 | margin-top: 10px; 205 | margin-bottom: 60px; 206 | } 207 | 208 | .playlist-description{ 209 | font-size: 16px; 210 | font-weight: 400; 211 | margin-top: 28px; 212 | color: #A9A9A9; 213 | } 214 | 215 | .playlist-stats img{ 216 | position: relative; 217 | top: 5px; 218 | border-radius: 50%; 219 | } 220 | 221 | .playlist-stats span:first-of-type{ 222 | font-weight: 1000; 223 | } 224 | 225 | .playlist-button-left, .playlist-button-right{ 226 | display: flex; 227 | justify-content: center; 228 | align-items: center; 229 | } 230 | 231 | .playlist-button{ 232 | display: flex; 233 | justify-content: space-between; 234 | } 235 | 236 | .playlist-song-container{ 237 | height: 100vh; 238 | background: #ff0080; 239 | background: linear-gradient(180deg, #575251 2%, rgba(19,18,19,1) 63%, rgba(19,18,19,1) 100%); 240 | padding: 20px; 241 | } 242 | 243 | .playlist-button-resume-pause img{ 244 | width: 54px; 245 | height: 54px; 246 | } 247 | 248 | .playlist-button-like, .playlist-button-download, .playlist-button-three-dot{ 249 | margin-left: 20px; 250 | } 251 | 252 | .playlist-button-like img, .playlist-button-download img, .playlist-button-three-dot img{ 253 | width: 30px; 254 | } 255 | 256 | .playlist-button-order{ 257 | color: #A9A9A9; 258 | position: relative; 259 | top: -2px; 260 | margin-left: 20px; 261 | } 262 | 263 | .playlist-songs{ 264 | margin-top: 20px; 265 | } 266 | 267 | .playlist-songs table{ 268 | border-collapse: collapse; 269 | width: 100%; 270 | } 271 | 272 | .playlist table tr td, .playlist-songs tr th{ 273 | padding: 10px; 274 | color: #CACACA; 275 | } 276 | 277 | .playlist-songs table tr th{ 278 | font-weight: 200; 279 | font-size: 14px; 280 | letter-spacing: 2px; 281 | } 282 | 283 | .playlist-songs table tr:first-of-type{ 284 | border-bottom: 1px solid #CACACA; 285 | } 286 | 287 | .playlist-songs table th{ 288 | text-align: left; 289 | } 290 | 291 | .song-images img{ 292 | width: 36px; 293 | height: 36px; 294 | } 295 | 296 | .song-name, .footer-player-left-song-name{ 297 | font-weight: 400; 298 | font-size: 14px; 299 | color: white; 300 | } 301 | 302 | .song-name-artist{ 303 | padding-left: 15px; 304 | letter-spacing: 0.5px; 305 | } 306 | 307 | .song-artist, .song-album, .song-date-added, tr td:first-of-type, .song-duration, .footer-player-left-song-artist{ 308 | font-size: 14px; 309 | margin-top: 6px; 310 | color: #848485; 311 | } 312 | 313 | .song-artist{ 314 | margin-top: 3px; 315 | } 316 | 317 | .song-title{ 318 | display: flex; 319 | align-items: center; 320 | flex-direction: row; 321 | } 322 | 323 | .footer-player{ 324 | display: flex; 325 | justify-content: space-between; 326 | align-items: center; 327 | padding: 20px; 328 | background-color: #181918; 329 | position: absolute; 330 | bottom: 0; 331 | width: 100%; 332 | height: 40px; 333 | } 334 | 335 | .footer-player-left-like{ 336 | padding-left: 30px; 337 | } 338 | 339 | .footer-player-left{ 340 | display: flex; 341 | align-items: center; 342 | } 343 | 344 | .footer-player-left-like img{ 345 | display: flex; 346 | flex-direction: row; 347 | align-items: center; 348 | width: 20px; 349 | height: 20px; 350 | padding-top: 0px; 351 | } 352 | 353 | .footer-player-left-song-name, .footer-player-left-song-artist{ 354 | display: flex; 355 | justify-content: center; 356 | flex-direction: row; 357 | align-items: center; 358 | 359 | } 360 | 361 | .footer-player-middle{ 362 | width: 100%; 363 | display: flex; 364 | justify-content: center; 365 | flex-direction: column; 366 | } 367 | 368 | .footer-player-middle-button img{ 369 | width: 20px; 370 | padding: 20px; 371 | } 372 | 373 | .footer-player-middle-button{ 374 | display: flex; 375 | justify-content: center; 376 | } 377 | 378 | .play-button{ 379 | position: relative; 380 | display: inline-block; 381 | width: 36px !important; 382 | height: 36px !important; 383 | background-color: white !important; 384 | border-radius: 50%; 385 | margin: 0 8px; 386 | top: 4px; 387 | } 388 | 389 | .play-button img{ 390 | position: relative; 391 | max-width: 24px !important; 392 | max-height: 24px !important; 393 | filter: none !important; 394 | left: -10px; 395 | top: -10px; 396 | } 397 | 398 | .player-slider input{ 399 | width: 40vw; 400 | height: 5px; 401 | background-color: gray; 402 | border-radius: 5px; 403 | position: relative; 404 | border: none; 405 | } 406 | 407 | .footer-player-middle-slider{ 408 | display: flex; 409 | align-items: center; 410 | justify-content: center; 411 | } 412 | 413 | .player-time{ 414 | padding: 0 10px; 415 | color: #CACACA; 416 | } 417 | 418 | .footer-player-right input{ 419 | width: 80px; 420 | position: relative; 421 | margin-right: 10px; 422 | top: -3px; 423 | } 424 | 425 | .footer-player-right-button { 426 | display: flex; 427 | flex-direction: row; 428 | margin-right: 30px; 429 | } 430 | 431 | .footer-player-right-button img{ 432 | width: 16px; 433 | height: 16px; 434 | margin-right: 16px; 435 | } -------------------------------------------------------------------------------- /Spotify_Clone/spotify_after_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_after_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_arrow_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_arrow_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_before_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_before_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_device_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_device_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_dot_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_dot_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_download_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_download_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_fullscreen_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_fullscreen_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_heart_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_heart_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_home_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_home_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_library_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_library_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_like_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_like_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_logo.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_next_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_next_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_pause_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_pause_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_play_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_play_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_playlist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_playlist.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_playlist_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_playlist_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_playlist_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_playlist_logo.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_plus_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_plus_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_previous_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_previous_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_profile_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_profile_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_queue_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_queue_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_repeat_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_repeat_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_serach_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_serach_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_shuffle_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_shuffle_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_song1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_song1.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_song2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_song2.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_song3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_song3.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_song4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_song4.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_song5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_song5.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_song6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_song6.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_song7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_song7.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_song8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_song8.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_time_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_time_icon.png -------------------------------------------------------------------------------- /Spotify_Clone/spotify_volume_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Spotify_Clone/spotify_volume_icon.png -------------------------------------------------------------------------------- /Swiggy_clone/swiggy.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Mulish', sans-serif; 5 | } 6 | 7 | .navbar { 8 | box-shadow: 0 15px 40px -20px rgb(40 44 63 / 15%); 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | right: 0; 13 | height: 80px; 14 | background: #fff; 15 | z-index: 1000; 16 | padding: 0 20px; 17 | } 18 | .navbar .nav { 19 | max-width: 1200px; 20 | min-width: 1200px; 21 | position: relative; 22 | margin: 0 auto; 23 | height: 80px; 24 | background: #fff; 25 | display: flex; 26 | justify-content: space-between; 27 | } 28 | .navbar .left { 29 | display: flex; 30 | align-items: center; 31 | } 32 | .navbar .left .logo { 33 | display: block; 34 | height: 49px; 35 | transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); 36 | margin-right: 16px; 37 | } 38 | .navbar .left .logo:hover { 39 | transform: scale(1.1); 40 | } 41 | .navbar .location-div, 42 | .other { 43 | position: relative; 44 | } 45 | .navbar .location-div { 46 | display: flex; 47 | align-items: center; 48 | margin-left: 30px; 49 | max-width: 300px; 50 | height: 30px; 51 | cursor: pointer; 52 | margin-bottom: -1px; 53 | padding-right: 10px; 54 | font-size: 14px; 55 | } 56 | .navbar .right { 57 | position: relative; 58 | } 59 | .location-div .other { 60 | font-weight: 700; 61 | color: #3d4152; 62 | float: left; 63 | padding-bottom: 2px; 64 | border-bottom: 2px solid #3d4152; 65 | } 66 | .location-div .other:hover { 67 | color: #fc8019; 68 | border-bottom: 2px solid #fc8019; 69 | } 70 | .location-div .location { 71 | display: block; 72 | font-weight: 300; 73 | padding-left: 5px; 74 | margin-left: 5px; 75 | color: #686b78; 76 | } 77 | .location-div .arrow-down { 78 | position: absolute; 79 | right: -6%; 80 | top: 40%; 81 | transform: translateY(-40%); 82 | font-size: 1rem; 83 | color: #fc8019; 84 | font-weight: 700; 85 | } 86 | .right .items { 87 | display: flex; 88 | align-items: center; 89 | } 90 | .right .items li { 91 | margin-right: 36px; 92 | color: #3d4152; 93 | font-size: 16px; 94 | font-weight: 500; 95 | list-style-type: none; 96 | } 97 | .right .items .nav-item { 98 | display: flex; 99 | align-items: center; 100 | padding-left: 28px; 101 | position: relative; 102 | height: 80px; 103 | cursor: pointer; 104 | } 105 | .right .items .nav-item a { 106 | display: flex; 107 | align-items: center; 108 | text-decoration: none; 109 | color: #3d4152; 110 | font-size: 16px; 111 | } 112 | .nav-item a:hover { 113 | color: #fc8019; 114 | } 115 | 116 | .nav-item a span { 117 | padding-left: 11px; 118 | } 119 | .right .items li:last-child a svg { 120 | color: #60b246; 121 | } 122 | 123 | /* Content Section */ 124 | .restaurants .container { 125 | max-width: 1200px; 126 | min-width: 1200px; 127 | position: relative; 128 | margin: 0 auto; 129 | padding-top: 42px; 130 | top: 80px; 131 | background: #fff; 132 | left: 31px; 133 | } 134 | .container .item-bar { 135 | display: flex; 136 | align-items: center; 137 | justify-content: space-between; 138 | } 139 | .container .item-bar .number { 140 | font-weight: 600; 141 | font-size: 28px; 142 | color: #282c3f; 143 | margin-top: -3px; 144 | } 145 | .container .item-bar::after { 146 | color: #3d4152; 147 | position: absolute; 148 | content: ''; 149 | left: 0; 150 | right: 0; 151 | height: 1px; 152 | top: 81px; 153 | background: #e9e9eb; 154 | } 155 | 156 | .container .item-bar .filters { 157 | display: flex; 158 | align-items: center; 159 | } 160 | .container .item-bar .filters div { 161 | font-size: 16px; 162 | font-weight: 300; 163 | color: #686b78; 164 | margin-left: 35px; 165 | cursor: pointer; 166 | position: relative; 167 | } 168 | 169 | .filters div:hover::after { 170 | color: #3d4152; 171 | position: absolute; 172 | content: ''; 173 | left: 0; 174 | right: 0; 175 | height: 1px; 176 | top: 31px; 177 | background: #282c3f; 178 | } 179 | .restaurant-list { 180 | margin-bottom: 85px; 181 | display: grid; 182 | grid-template-columns: repeat(4, 25%); 183 | justify-content: space-between; 184 | padding-top: 39px; 185 | margin-top: 25px; 186 | } 187 | 188 | .restaurant-list .place-link { 189 | background: #fff; 190 | display: block; 191 | text-decoration: none; 192 | color: inherit; 193 | } 194 | .restaurant-list .list-item { 195 | padding: 25px 25px 57px; 196 | border: 1px solid #fff; 197 | contain: content; 198 | } 199 | .restaurant-list .list-item:hover { 200 | border-color: #d3d5df; 201 | box-shadow: 0 4px 7px 0 rgb(218 220 230 / 60%); 202 | } 203 | .restaurant-list .item-content { 204 | width: 254px; 205 | position: relative; 206 | } 207 | .top-img { 208 | background: #eef0f5; 209 | width: 254px; 210 | height: 160px; 211 | position: relative; 212 | } 213 | .top-img img { 214 | opacity: 1; 215 | } 216 | .status { 217 | position: absolute; 218 | left: -8px; 219 | top: 0; 220 | color: #fff; 221 | font-size: 13px; 222 | font-weight: 500; 223 | padding: 5px 9px 4px; 224 | max-width: 40%; 225 | text-transform: uppercase; 226 | } 227 | .status::before { 228 | position: absolute; 229 | bottom: -9px; 230 | content: ''; 231 | width: 0; 232 | height: 0; 233 | border-style: solid; 234 | border-color: inherit; 235 | left: 0; 236 | border-width: 9px 0 0 9px; 237 | } 238 | 239 | .place-name-div { 240 | margin-top: 14px; 241 | } 242 | .place-name-div .name { 243 | font-size: 17px; 244 | font-weight: 500; 245 | word-break: break-word; 246 | } 247 | .place-name-div .food-items { 248 | color: #686b78; 249 | font-size: 13px; 250 | margin-top: 4px; 251 | font-weight: 300; 252 | } 253 | .info-div { 254 | display: flex; 255 | align-items: center; 256 | margin-top: 18px; 257 | font-size: 12px; 258 | justify-content: space-between; 259 | color: #535665; 260 | font-weight: 300; 261 | } 262 | .info-div .rating { 263 | background-color: #db7c38; 264 | color: #fff; 265 | height: 20px; 266 | width: 36px; 267 | padding: 0 5px; 268 | font-weight: 400; 269 | display: flex; 270 | align-items: center; 271 | } 272 | .icon-star { 273 | font-size: 10px; 274 | margin-right: 4px; 275 | position: relative; 276 | top: -1px; 277 | } 278 | .offer-div { 279 | border-top: 1px solid #e9e9eb; 280 | padding-top: 14px; 281 | margin-top: 14px; 282 | color: #8a584b; 283 | display: flex; 284 | align-items: center; 285 | font-weight: 600; 286 | } 287 | .offer-div .icon-offer-filled { 288 | font-size: 16px; 289 | width: 20px; 290 | height: 16px; 291 | margin-right: 4px; 292 | } 293 | 294 | .offer-div .offer-text { 295 | font-weight: 400; 296 | font-size: 14px; 297 | line-height: 1.2; 298 | } 299 | .offer-text .fa-tags { 300 | margin-right: 2px; 301 | } 302 | 303 | .place:hover .quick-view { 304 | visibility: visible !important; 305 | } 306 | 307 | .quick-view { 308 | color: #686b78; 309 | font-size: 13px; 310 | visibility: hidden; 311 | border-top: 1px solid #e9e9eb; 312 | padding-top: 14px; 313 | margin-top: 14px; 314 | position: absolute; 315 | left: 20px; 316 | right: 20px; 317 | bottom: 14px; 318 | } 319 | 320 | .quick-view .view-btn { 321 | color: #5d8ed5; 322 | display: block; 323 | text-align: center; 324 | text-transform: uppercase; 325 | font-weight: 600; 326 | } 327 | 328 | .footer { 329 | padding: 0 20px; 330 | z-index: 10; 331 | background-color: #000; 332 | min-height: 298px; 333 | width: 100%; 334 | color: #fff; 335 | overflow: scroll; 336 | } 337 | 338 | .footer-content { 339 | width: 100%; 340 | display: flex; 341 | background-color: #000000; 342 | justify-content: space-around; 343 | max-width: 1200px; 344 | min-width: 1200px; 345 | margin: 0 auto; 346 | padding: 76px 0; 347 | height: 100%; 348 | } 349 | 350 | .points { 351 | color: #808080; 352 | font-size: 15px; 353 | font-weight: 600; 354 | /* border: 1px solid white;*/ 355 | width: 300px; 356 | margin: 26px 0px 10px 15px; 357 | } 358 | 359 | .footer-li { 360 | padding: 20px 10px 2px 0px; 361 | } 362 | 363 | .footer-ul { 364 | list-style: none; 365 | display: flex; 366 | flex-direction: column; 367 | } 368 | 369 | .footer-li a { 370 | color: #fff; 371 | font-size: 15px; 372 | font-weight: 300; 373 | text-decoration: none; 374 | } 375 | 376 | .footer-li a:hover { 377 | font-weight: 600; 378 | } 379 | 380 | .points img { 381 | border: 2px solid #808080; 382 | padding: 10px; 383 | margin: 30px 0px 10px 57px; 384 | border-radius: 10px; 385 | transition: transform 0.5s; 386 | } 387 | 388 | .points img:hover { 389 | transform: scale(1.06); 390 | cursor: pointer; 391 | } -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_appstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_appstore.png -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_dish1.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_dish1.avif -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_dish2.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_dish2.avif -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_dish3.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_dish3.avif -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_dish4.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_dish4.avif -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_dish5.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_dish5.avif -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_dish6.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_dish6.avif -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_dish7.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_dish7.avif -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_dish8.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_dish8.avif -------------------------------------------------------------------------------- /Swiggy_clone/swiggy_playStore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Swiggy_clone/swiggy_playStore.png -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | body { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | min-height: 100vh; 15 | background: #000000; 16 | } 17 | 18 | .background-green { 19 | position: absolute; 20 | top: 0; 21 | width: 100%; 22 | height: 20%; 23 | background-color: #009688; 24 | } 25 | 26 | .main-container { 27 | position: relative; 28 | width: 1000px; 29 | max-width: 100%; 30 | height: calc(100vh - 40px); 31 | background: #fff; 32 | display: flex; 33 | box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.5), 0px 2px 5px 0 rgba(0,0,0,0.6); 34 | } 35 | 36 | .main-container .left-container { 37 | position:relative; 38 | width: 30%; 39 | height:100%; 40 | flex: 30%; 41 | background: #fff; 42 | } 43 | 44 | .main-container .right-container { 45 | position: relative; 46 | width: 70%; 47 | height: 100%; 48 | flex: 70%; 49 | background: #e5ddd5; 50 | } 51 | 52 | .main-container .right-container::before { 53 | content: ''; 54 | position: absolute; 55 | top: 0; 56 | left: 0; 57 | width: 100%; 58 | height: 100%; 59 | opacity: 0.5; 60 | } 61 | 62 | .header { 63 | position: relative; 64 | display: flex; 65 | align-items: center; 66 | width: 100%; 67 | height: 60px; 68 | background: #ededed; 69 | padding: 0 15px; 70 | } 71 | 72 | .user-img { 73 | position:relative; 74 | width: 40px; 75 | height: 40px; 76 | overflow: hidden; 77 | border-radius: 50%; 78 | } 79 | 80 | .dp { 81 | position:absolute; 82 | top: 0; 83 | left: 0; 84 | width: 100%; 85 | height: 100%; 86 | object-fit: cover; 87 | cursor: pointer; 88 | } 89 | 90 | .nav-icons { 91 | display:flex; 92 | justify-content: flex-end; 93 | padding-left: 110px; 94 | } 95 | 96 | .nav-icons li { 97 | list-style: none; 98 | display: flex; 99 | cursor: pointer; 100 | color: #51585c; 101 | margin-left: 22px; 102 | font-size: 18px; 103 | } 104 | 105 | .notif-box { 106 | position: relative; 107 | display: flex; 108 | width: 100%; 109 | height: 70px; 110 | background: #76daff; 111 | align-items: center; 112 | font-size: 0.8em; 113 | text-decoration: none; 114 | } 115 | 116 | .notif-box i { 117 | position:relative; 118 | left: 13px; 119 | background:#fff; 120 | padding:10px; 121 | width: 42px; 122 | height: auto; 123 | font-size: 20px; 124 | border-radius: 55%; 125 | cursor: pointer; 126 | color:#76daff; 127 | } 128 | 129 | .notif-box .fa-xmark { 130 | position: absolute; 131 | left: 260px; 132 | text-align:center; 133 | background:#76daff; 134 | color: #fff; 135 | } 136 | 137 | .notif-text { 138 | margin: 25px; 139 | } 140 | 141 | .notif-text a { 142 | text-decoration: none; 143 | color: #333; 144 | font-size: 0.9em; 145 | } 146 | 147 | .search-container { 148 | position:relative; 149 | width: 100%; 150 | height: 40px; 151 | background: #f6f6f6; 152 | display: flex; 153 | /* justify-content: center; */ 154 | align-items: center; 155 | } 156 | 157 | .search-container .input input { 158 | width: 121%; 159 | outline: none; 160 | border: none; 161 | background: #fff; 162 | padding: 5px; 163 | height: 30x; 164 | border-radius: 10px; 165 | font-size: 12px; 166 | padding-left: 60px; 167 | margin: 10px 168 | } 169 | 170 | .search-container .input i { 171 | position: absolute; 172 | left: 26px; 173 | top: 14px; 174 | color:#bbb; 175 | font-size: 0.8em; 176 | } 177 | 178 | .chat-list { 179 | position: relative; 180 | height:calc(100% - 170px); 181 | overflow-y: auto; 182 | } 183 | 184 | .chat-list .chat-box { 185 | position: relative; 186 | width: 100%; 187 | display:flex; 188 | /* justify-content: center; */ 189 | align-items:center; 190 | cursor: pointer; 191 | padding: 15px; 192 | border-bottom: 1px solid #eee; 193 | } 194 | 195 | .chat-list .chat-box .img-box { 196 | position:relative; 197 | width: 55px; 198 | height:45px; 199 | overflow:hidden; 200 | border-radius: 50%; 201 | } 202 | 203 | .chat-list .chat-box .chat-details { 204 | width: 100%; 205 | margin-left: 10px; 206 | } 207 | 208 | .chat-list .chat-box .chat-details .text-head { 209 | display:flex; 210 | justify-content: space-between; 211 | align-items: center; 212 | margin-bottom:2px; 213 | } 214 | 215 | .chat-list .chat-box .chat-details .text-head h4 { 216 | font-size: 1.1em; 217 | font-weight: 600; 218 | color: #000; 219 | } 220 | 221 | .chat-list .chat-box .chat-details .text-head .time { 222 | font-size: 0.8em; 223 | color: #aaa; 224 | } 225 | 226 | .chat-list .chat-box .chat-details .text-message { 227 | display: flex; 228 | justify-content: space-between; 229 | align-items: center; 230 | } 231 | 232 | .chat-list .chat-box .chat-details .text-message p { 233 | color: #aaa; 234 | font-size: 0.9em; 235 | overlay: hidden; 236 | } 237 | 238 | img { 239 | width: 100%; 240 | object-fit: cover; 241 | } 242 | 243 | .chat-list .chat-box .chat-details .text-message b { 244 | background: #06e744; 245 | color: #fff; 246 | min-width: 20px; 247 | height: 20px; 248 | border-radius: 50%; 249 | /* text-align: center; */ 250 | font-size: 0.8em; 251 | font-weight: 400; 252 | display:flex; 253 | justify-content:center; 254 | align-items:center; 255 | } 256 | 257 | .chat-list .active { 258 | background: #ebebeb; 259 | } 260 | 261 | .chat-list .chat-box:hover { 262 | background: #f5f5f5; 263 | } 264 | 265 | .chat-list .chat-box .chat-details .text-head .unread { 266 | color: #06e744; 267 | } 268 | 269 | 270 | /* right-container */ 271 | 272 | 273 | .right-container .header { 274 | display: flex; 275 | justify-content: space-between; 276 | align-items: center; 277 | } 278 | 279 | .right-container .header .img-text .user-img .dp { 280 | position:relative; 281 | top: -2px; 282 | left: 0px; 283 | width: 40px; 284 | height:auto; 285 | overflow:hidden; 286 | object-fit: cover; 287 | } 288 | 289 | .right-container .header .img-text { 290 | position: relative; 291 | display: flex; 292 | justify-content: center; 293 | align-items: center; 294 | cursor: pointer; 295 | } 296 | 297 | .right-container .header .img-text h4 { 298 | font-weight: 500; 299 | line-height: 1.2em; 300 | margin-left: 15px; 301 | } 302 | 303 | .right-container .header .img-text h4 span { 304 | font-size: 0.8em; 305 | color: #555; 306 | } 307 | 308 | .right-container .header .nav-icons { 309 | position: relative; 310 | margin-right:0px; 311 | /* padding: 5px; */ 312 | } 313 | 314 | .right-container .header .nav-icons i { 315 | padding: 10px; 316 | } 317 | 318 | .chat-container { 319 | position:relative; 320 | width: 100%; 321 | height: calc(100% - 120px); /*60+60*/ 322 | padding: 50px; 323 | overflow-y: auto; 324 | } 325 | 326 | .message-box { 327 | position:relative; 328 | display: flex; 329 | width:100%; 330 | margin: 5px 0; 331 | } 332 | 333 | .message-box p { 334 | position:relative; 335 | right: 0; 336 | text-align: right; 337 | max-width: 65%; 338 | padding: 12px; 339 | background: #dcf8c6; 340 | border-radius: 10px; 341 | font-size: 0.9em; 342 | } 343 | 344 | .message-box.my-message p::before { 345 | content : ''; 346 | position: absolute; 347 | top: 0; 348 | right: -12px; 349 | width: 20px; 350 | height: 20px; 351 | background: linear-gradient(135deg, #dcf8c6 0%, #dcf8c6 50%, transparent 50%, transparent); 352 | } 353 | 354 | .message-box p span { 355 | display: block; 356 | margin-top: 5px; 357 | font-size: 0.8em; 358 | opacity: 0.5; 359 | } 360 | 361 | .my-message { 362 | justify-content: flex-end; 363 | } 364 | 365 | .friend-message p { 366 | background: #fff; 367 | } 368 | 369 | .friend-message { 370 | justify-content: flex-start; 371 | 372 | } 373 | 374 | .chat-container .my-message i { 375 | color: yellow; 376 | } 377 | 378 | .message-box.friend-message::before { 379 | content : ''; 380 | position: absolute; 381 | top: 0; 382 | left: -12px; 383 | width: 20px; 384 | height: 20px; 385 | background: linear-gradient(225deg, #fff 0%, #fff 50%, transparent 50%, transparent); 386 | } 387 | 388 | .chatbox-input { 389 | position:relative; 390 | width: 100%; 391 | height: 60px; 392 | background: #f0f0f0; 393 | display: flex; 394 | justify-content: space-between; 395 | align-items: center; 396 | } 397 | 398 | .chatbox-input i { 399 | cursor: pointer; 400 | font-size: 1.8em; 401 | color: #515855; 402 | } 403 | 404 | .chatbox-input i:nth-child(1) { 405 | margin: 15px; 406 | } 407 | 408 | .chatbox-input i:last-child { 409 | margin-right: 25px; 410 | } 411 | 412 | .chatbox-input input { 413 | position: relative; 414 | width: 90%; 415 | margin: 0 20px; 416 | padding: 10px 20px; 417 | border-radius:10px; 418 | font-size: 1em; 419 | border:none; 420 | outline:none; 421 | } 422 | -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_Profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_Profile.png -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat1.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat10.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat11.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat12.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat13.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat14.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat15.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat2.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat3.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat4.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat5.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat6.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat7.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat8.jpg -------------------------------------------------------------------------------- /Whatapp_Clone/whatapp_chat9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Whatapp_Clone/whatapp_chat9.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | font-family: "Roboto", sans-serif; 4 | font-size: 14px; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: border-box; 11 | } 12 | 13 | 14 | nav { 15 | display: flex; 16 | flex-direction: row; 17 | justify-content:space-around; 18 | align-items: center; 19 | border-bottom: 0.5px solid gray; 20 | position: fixed; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | background: white; 25 | height: 40px; 26 | z-index: 2; 27 | } 28 | 29 | #youtube-logo-container { 30 | margin: 10px; 31 | } 32 | 33 | #youtube-logo { 34 | size: 40px; 35 | } 36 | 37 | #search-bar { 38 | flex: 10; 39 | height: 25px; 40 | padding: 5px; 41 | border: 1px solid #ccc; 42 | border-radius: 3px; 43 | margin-left: 500px; 44 | } 45 | 46 | #icon-container { 47 | color: gray; 48 | cursor: pointer; 49 | margin-right: 5px; 50 | } 51 | 52 | .fas { 53 | font-size: 20px; 54 | } 55 | 56 | #app-icon { 57 | transform: translateY(5px); 58 | font-size: 20px; 59 | } 60 | 61 | #side-bar-section { 62 | margin-left: 0; 63 | position: fixed; 64 | left: 0%; 65 | width: 250px; 66 | float: left; 67 | height: 100%; 68 | overflow-y: auto; 69 | z-index: 1; 70 | margin-top: 10px; 71 | } 72 | 73 | #side-bar-section>div { 74 | margin-bottom: 30px; 75 | } 76 | 77 | .side-bar { 78 | display: flex; 79 | flex-direction: column; 80 | margin-left: 0; 81 | padding-left: 0; 82 | width: 250px; 83 | box-sizing: border-box; 84 | } 85 | 86 | .side-bar>li { 87 | list-style-type: none; 88 | margin-bottom: 20px; 89 | position: relative; 90 | box-sizing: border-box; 91 | width: calc(250px - 20px); 92 | padding-left: 20px; 93 | height: 25px; 94 | } 95 | 96 | #active-title { 97 | background: rgba(188, 195, 204, 0.5); 98 | height: 40px; 99 | display: flex; 100 | margin-bottom: 20px; 101 | left: 0%; 102 | align-items: center; 103 | } 104 | 105 | .material-icons { 106 | color: rgb(99, 95, 94); 107 | } 108 | 109 | #home-icon { 110 | color: red; 111 | } 112 | 113 | .side-bar-titles { 114 | text-decoration: none; 115 | color: rgb(53, 50, 49); 116 | font-size: 15px; 117 | position: absolute; 118 | top: 5%; 119 | left: 35%; 120 | } 121 | 122 | .active { 123 | position: absolute; 124 | top: auto; 125 | left: 35%; 126 | font-weight: bold; 127 | } 128 | 129 | .fa-clock, 130 | .fa-thumbs-up { 131 | color: rgb(99, 95, 94); 132 | } 133 | 134 | i { 135 | color: rgb(99, 95, 94); 136 | font-size: 18px; 137 | } 138 | 139 | .side-bar-heading { 140 | color: rgb(99, 95, 94); 141 | font-weight: bold; 142 | padding-left: 20px; 143 | margin-bottom: 20px; 144 | } 145 | 146 | .channel-dp-container-1 { 147 | height: 25px; 148 | width: 25px; 149 | border-radius: 50%; 150 | display: inline-block; 151 | justify-self: flex-start; 152 | } 153 | 154 | .channel-dp-1 { 155 | height: 100%; 156 | width: 100%; 157 | border-radius: 50%; 158 | object-fit: cover; 159 | position: relative; 160 | } 161 | 162 | #video-section { 163 | margin: 20px 5px 0 5px; 164 | display: flex; 165 | flex-direction: row; 166 | flex-wrap: wrap; 167 | justify-content: space-around; 168 | margin-left: 255px; 169 | margin-top: 10px; 170 | } 171 | 172 | .video-container { 173 | margin-top: 20px; 174 | margin-bottom: 40px; 175 | } 176 | 177 | .images { 178 | width: 295px; 179 | height: 175px; 180 | margin-bottom: 5px; 181 | } 182 | 183 | .video-description { 184 | display: flex; 185 | flex-direction: row; 186 | } 187 | 188 | .channel-dp-container-2 { 189 | height: 35px; 190 | width: 35px; 191 | border-radius: 50%; 192 | display: inline-block; 193 | justify-self: flex-start; 194 | } 195 | 196 | .channel-dp-2 { 197 | height: 100%; 198 | width: 100%; 199 | border-radius: 50%; 200 | object-fit: cover; 201 | } 202 | 203 | .video-details { 204 | width: 200px; 205 | margin-top: 3px; 206 | margin-left: 10px; 207 | justify-self: flex-end; 208 | } 209 | 210 | .video-title { 211 | font-weight: bold; 212 | text-decoration: none; 213 | color: black; 214 | margin-bottom: 5px; 215 | } 216 | 217 | .channel-name { 218 | color: rgb(99, 95, 94); 219 | text-decoration: none; 220 | display: block; 221 | margin-top: 5px; 222 | } 223 | 224 | .channel-name:hover { 225 | color: rgb(53, 50, 49); 226 | } 227 | 228 | .views { 229 | color: rgb(99, 95, 94); 230 | text-decoration: none; 231 | } 232 | 233 | .fa-circle { 234 | color: rgb(99, 95, 94); 235 | font-size: 2px; 236 | transform: translateY(-3px); 237 | } 238 | 239 | .time { 240 | text-decoration: none; 241 | color: rgb(99, 95, 94); 242 | } 243 | 244 | footer p { 245 | text-align: right; 246 | color: rgb(99, 95, 94); 247 | margin-right: 20px; 248 | } 249 | 250 | @media all and (max-width: 255px) { 251 | .video-description { 252 | padding-left: 5px; 253 | padding-right: 5px; 254 | } 255 | } 256 | 257 | @media all and (max-width: 300px) { 258 | nav { 259 | flex-wrap: wrap; 260 | } 261 | 262 | #search-bar { 263 | order: 1; 264 | flex: 1 1 100%; 265 | justify-self: center; 266 | } 267 | } 268 | 269 | @media all and (max-width: 315px) { 270 | .images { 271 | width: 100%; 272 | } 273 | } 274 | 275 | @media all and (max-width: 550px) { 276 | #side-bar-section { 277 | display: none; 278 | } 279 | 280 | #video-section { 281 | margin-left: 0; 282 | } 283 | 284 | #youtube-logo-container { 285 | margin-left: 0; 286 | } 287 | } 288 | -------------------------------------------------------------------------------- /Youtube_Clone/youtube_channel1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_channel1.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_channel2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_channel2.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_channel3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_channel3.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_channel4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_channel4.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_channel5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_channel5.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_channel6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_channel6.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_channel7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_channel7.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp1.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp10.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp11.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp12.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp2.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp3.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp4.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp5.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp6.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp7.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp8.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_dp9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_dp9.jpg -------------------------------------------------------------------------------- /Youtube_Clone/youtube_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail1.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail10.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail10.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail11.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail11.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail12.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail12.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail2.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail3.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail4.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail5.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail6.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail7.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail8.webp -------------------------------------------------------------------------------- /Youtube_Clone/youtube_thumbnail9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Youtube_Clone/youtube_thumbnail9.webp -------------------------------------------------------------------------------- /Zomato_Clone/zomato.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | body{ 9 | background: rgb(255,251,247); 10 | margin-bottom: -32px; 11 | } 12 | 13 | .hero__section{ 14 | background-image: url('zomato_banner.png'); 15 | height: 400px; 16 | background-size: cover; 17 | background-position: center; 18 | position: relative; 19 | } 20 | 21 | .navbar{ 22 | display: flex; 23 | height: 40px; 24 | align-items: center; 25 | justify-content: space-between; 26 | padding-left: 80px; 27 | padding-right: 60px; 28 | font-size: 17px; 29 | } 30 | 31 | .navbar a{ 32 | color: white; 33 | } 34 | 35 | .navbar a:hover{ 36 | transform: scale(1.02); 37 | } 38 | 39 | .navbar__menu_container{ 40 | display: flex; 41 | gap: 22px; 42 | } 43 | 44 | .navbar__menu_container .user_icon{ 45 | display: flex; 46 | height: 25px; 47 | width: 25px; 48 | border: 2px solid white; 49 | border-radius: 50%; 50 | align-items: center; 51 | justify-content: center; 52 | display: none; 53 | } 54 | 55 | 56 | .hero__section_container{ 57 | display: flex; 58 | flex-direction: column; 59 | align-items: center; 60 | justify-content: center; 61 | gap: 25px; 62 | height: calc(400px - 40px); 63 | } 64 | 65 | .hero__section_logo{ 66 | height: 116px; 67 | width: 388px; 68 | } 69 | 70 | 71 | .hero__section_heading{ 72 | color: white; 73 | word-spacing: 3px; 74 | font-size: 30px; 75 | font-weight: 380; 76 | } 77 | 78 | .hero__section_container_input{ 79 | background: white; 80 | border-radius: 10px; 81 | width: 45%; 82 | padding: 7px; 83 | display: flex; 84 | align-items: center; 85 | justify-content: space-between; 86 | gap: 10px; 87 | } 88 | 89 | #location_icon{ 90 | color: rgb(239,79,95); 91 | margin-top: -4px; 92 | } 93 | 94 | #search_icon{ 95 | color: rgb(239,79,95); 96 | margin-right: 3px; 97 | } 98 | 99 | .hero__section_input_location, .hero__section_input_search{ 100 | border: none; 101 | padding-top: 4px; 102 | padding-bottom: 4px; 103 | } 104 | 105 | 106 | .hero__section_input_location{ 107 | width: 35%; 108 | border-right: 2px solid #C0C0C0; 109 | color: gray; 110 | font-size: 12.9px; 111 | } 112 | 113 | .hero__section_input_search{ 114 | width: 65%; 115 | } 116 | 117 | @media only screen and (max-width: 685px){ 118 | .navbar__menu_container .user_icon{ 119 | display: flex; 120 | } 121 | .link{ 122 | display: none; 123 | } 124 | .hero__section{ 125 | height: 300px; 126 | } 127 | .hero__section_container{ 128 | flex-direction: column; 129 | background-color: transparent; 130 | width: 100%; 131 | height: calc(300px - 116px); 132 | } 133 | .hero__section_logo{ 134 | height: 60px; 135 | width: 200px; 136 | margin-top: 20px; 137 | } 138 | .input_container_location, .input_container_search{ 139 | padding: 18px; 140 | border-radius: 10px; 141 | width: 200px; 142 | } 143 | .hero__section_heading{ 144 | font-size: 18px; 145 | width: 400px; 146 | } 147 | } 148 | 149 | @media only screen and (max-width: 400px){ 150 | .hero__section{ 151 | width: 119% 152 | } 153 | .hero__section_heading{ 154 | font-size: 18px; 155 | word-spacing: 0px; 156 | margin-left: 47px; 157 | } 158 | .hero__section_container{ 159 | width: 102%; 160 | height: 69%; 161 | } 162 | } 163 | 164 | .container_cards{ 165 | margin: 3rem auto; 166 | width: 90%; 167 | display: flex; 168 | flex-wrap: wrap; 169 | gap: 15px; 170 | align-items: center; 171 | justify-content: center; 172 | } 173 | 174 | .we_offer__cards{ 175 | border-radius: 20px; 176 | overflow: hidden; 177 | } 178 | 179 | .we_offer__cards:hover{ 180 | transition: all 0.2s ease; 181 | transform: scale(1.01); 182 | border: 1px solid grey; 183 | cursor: pointer; 184 | box-shadow: 0 0 15px 5px #A0A0A0; 185 | } 186 | 187 | .we_offer__cards img{ 188 | width: 100%; 189 | height: 160px; 190 | object-fit: cover; 191 | object-position: center; 192 | } 193 | 194 | .we_offer__cards_content{ 195 | padding: 5px; 196 | } 197 | 198 | .we_offer__cards_content h2{ 199 | font-size: 20px; 200 | font-weight: 500; 201 | } 202 | 203 | .we_offer__cards_content p{ 204 | font-size: 12.5px; 205 | font-weight: 400; 206 | } 207 | 208 | .container_collections{ 209 | margin: 3rem auto; 210 | width: 90%; 211 | } 212 | 213 | .container_collections h1{ 214 | font-weight: 600; 215 | } 216 | 217 | .sub_heading__container{ 218 | font-size: 15px; 219 | display: flex; 220 | justify-content: space-between; 221 | align-items: center; 222 | gap: 30px; 223 | flex-wrap: wrap; 224 | } 225 | 226 | .sub_heading__container span:nth-child(2){ 227 | color: rgb(239,79,95); 228 | font-size: 13px; 229 | cursor: pointer; 230 | } 231 | 232 | .sub_heading__container span[id=span]:hover{ 233 | text-decoration: underline red; 234 | color: red; 235 | } 236 | 237 | .collections__cards_container{ 238 | display: flex; 239 | justify-content: center; 240 | align-items: center; 241 | flex-wrap: wrap; 242 | gap: 20px; 243 | margin-top: 2.5rem; 244 | } 245 | 246 | .cards{ 247 | height: 300px; 248 | min-width: 240px; 249 | background-size: cover; 250 | background-position: center; 251 | border-radius: 20px; 252 | position: relative; 253 | } 254 | 255 | .cards:hover{ 256 | transform: scale(1.01); 257 | box-shadow: 0 0 15px 5px #A0A0A0; 258 | cursor: pointer; 259 | } 260 | 261 | .card1{ 262 | background-image: url('zomato_collection1.jpg'); 263 | } 264 | 265 | .card2{ 266 | background-image: url('zomato_collection2.jpg'); 267 | } 268 | 269 | .card3{ 270 | background-image: url('zomato_collection3.jpg'); 271 | } 272 | 273 | .card4{ 274 | background-image: url('zomato_collection4.jpg'); 275 | } 276 | 277 | .overlay{ 278 | width: 100%; 279 | height: 100%; 280 | position: absolute; 281 | top: 0; 282 | left: 0; 283 | border-radius: 10px; 284 | background: linear-gradient(0deg, rgba(80,80,80,0.8)0%, rgba(0,0,0,0)50%, rgba(0,0,0,0)100%); 285 | z-index: 5; 286 | } 287 | 288 | .collections__content{ 289 | position: absolute; 290 | bottom: 0; 291 | left: 0; 292 | color: white; 293 | padding-left: 8px; 294 | padding-bottom: 12px; 295 | font-size: 0.9rem; 296 | z-index: 6; 297 | } 298 | 299 | .container__get_the_App{ 300 | display: flex; 301 | justify-content: center; 302 | align-items: center; 303 | background: rgb(255,251,247); 304 | width: 90%; 305 | margin: 3rem auto; 306 | } 307 | 308 | .semi_container{ 309 | width: 80%; 310 | display: flex; 311 | flex-wrap: wrap; 312 | gap: 1.5rem; 313 | justify-content: center; 314 | align-items: center; 315 | background: white; 316 | } 317 | 318 | .semi_container__left{ 319 | flex: 1.5; 320 | } 321 | 322 | .semi_container__left img{ 323 | width: 100%; 324 | object-fit: cover; 325 | object-position: center; 326 | } 327 | 328 | .semi_container__right{ 329 | flex: 3; 330 | height: 100%; 331 | display: flex; 332 | flex-direction: column; 333 | gap: 1rem; 334 | margin-left: 10px; 335 | } 336 | 337 | .semi_container__right h1{ 338 | font-size: 2rem; 339 | font-weight: 500; 340 | } 341 | 342 | .semi_container__right p{ 343 | font-size: 0.9rem; 344 | letter-spacing: 0.5px; 345 | font-weight: 500; 346 | } 347 | 348 | .semi_container__right .radio_button__container{ 349 | display: flex; 350 | align-items: center; 351 | gap: 1rem; 352 | } 353 | 354 | .semi_container__right .radio_button__container div{ 355 | display: flex; 356 | align-items: center; 357 | justify-content: center; 358 | gap: 10px; 359 | } 360 | 361 | .semi_container__right .radio_button__container div input{ 362 | height: 15px; 363 | width: 15px; 364 | accent-color: rgb(239,79,95); 365 | } 366 | 367 | .input__container{ 368 | display: flex; 369 | gap: 0.6rem; 370 | flex-wrap: wrap; 371 | } 372 | 373 | .input__container button, .input__container input{ 374 | padding: 10px 12px; 375 | } 376 | 377 | .input__container input{ 378 | flex: auto; 379 | border: 1.5px solid gray; 380 | border-radius: 10px; 381 | outline: none; 382 | } 383 | 384 | .input__container button{ 385 | border: none; 386 | border-radius: 5px; 387 | color: white; 388 | background: rgb(239,79,95); 389 | cursor: pointer; 390 | } 391 | 392 | .input__container button:hover{ 393 | background: red; 394 | } 395 | 396 | .download_app__container{ 397 | display: flex; 398 | flex-direction: column; 399 | gap: 0.7rem; 400 | } 401 | 402 | .download_app__container h5{ 403 | font-weight: 450; 404 | font-size: 0.8rem; 405 | color: gray; 406 | } 407 | 408 | .download_app__container div{ 409 | display: flex; 410 | gap: 1rem; 411 | } 412 | 413 | .download_app__container div img{ 414 | cursor: pointer; 415 | width: 30%; 416 | } 417 | 418 | @media only screen and (max-width: 1300px){ 419 | .container__get_the_App .semi_container .semi_container__left, 420 | .container__get_the_App .semi_container .semi_container__right{ 421 | flex: 1; 422 | } 423 | 424 | .container__get_the_App .semi_container{ 425 | width: 80%; 426 | } 427 | } 428 | 429 | @media only screen and (max-width: 900px){ 430 | .container__get_the_App{ 431 | padding: 2rem 0; 432 | } 433 | .container__get_the_App .semi_container{ 434 | width: 95%; 435 | flex-direction: column; 436 | } 437 | .container__get_the_App .semi_container .semi_container__left img{ 438 | height: 300px; 439 | } 440 | } 441 | 442 | .explore_places__container{ 443 | width: 90%; 444 | margin: 3rem auto; 445 | } 446 | 447 | .explore_places__container .sub_container{ 448 | width: 90%; 449 | } 450 | 451 | .explore_places__container .sub_container div h1{ 452 | font-weight: 600; 453 | } 454 | 455 | .explore_places__container .sub_container div span{ 456 | font-size: 14px; 457 | } 458 | 459 | .drop_down__container{ 460 | display: flex; 461 | flex-direction: column; 462 | gap: 20px; 463 | margin: 2rem auto; 464 | } 465 | 466 | .drop_down_menu{ 467 | height: 50px; 468 | width: 1100px; 469 | border-radius: 10px; 470 | padding: 15px; 471 | } 472 | 473 | /* Media Queries for explore section */ 474 | 475 | @media only screen and (max-width: 900px){ 476 | .drop_down_menu{ 477 | width: 600px; 478 | } 479 | } 480 | 481 | @media only screen and (max-width: 685px){ 482 | .drop_down_menu{ 483 | width: 400px; 484 | } 485 | } 486 | 487 | .footer__container{ 488 | width: 90%; 489 | margin: 4rem auto; 490 | } 491 | 492 | .footer_section1{ 493 | display: flex; 494 | flex-wrap: wrap; 495 | align-items: center; 496 | justify-content: space-between; 497 | margin: auto; 498 | width: 70; 499 | } 500 | 501 | .footer_section1 img{ 502 | width: 130px; 503 | } 504 | 505 | .section1__button_container button{ 506 | padding: 7px; 507 | border: 1px solid gray; 508 | border-radius: 8px; 509 | cursor: pointer; 510 | } 511 | 512 | .section1__button_container button:nth-child(2){ 513 | margin-left: 7px; 514 | } 515 | 516 | .navigation_container{ 517 | display: grid; 518 | grid-template-columns : repeat(5, 1fr); 519 | margin: auto; 520 | gap: 1rem; 521 | padding: 3rem 0; 522 | } 523 | 524 | .link_container{ 525 | display: flex; 526 | flex-direction: column; 527 | gap: 10px; 528 | } 529 | 530 | .link_container h5{ 531 | font-size: 16px; 532 | font-weight: 500; 533 | text-transform: uppercase; 534 | letter-spacing: 1px; 535 | } 536 | 537 | .link_container_anchors a{ 538 | display: flex; 539 | flex-direction: column; 540 | text-decoration: none; 541 | text-transform: none; 542 | color: gray; 543 | gap: 5px; 544 | font-weight: 400; 545 | margin-bottom: 4px; 546 | } 547 | 548 | .link_container_anchors a:hover{ 549 | color: black; 550 | } 551 | 552 | .link_container h5[id=zomato_banner]{ 553 | margin-top: 10px; 554 | letter-spacing: 1px; 555 | } 556 | 557 | .social_media_logos{ 558 | margin: 18px 30px; 559 | } 560 | 561 | .social_media_logos img{ 562 | width: 80%; 563 | margin-left: -28px; 564 | cursor: pointer; 565 | } 566 | 567 | .social_media_logos img[id=img2]{ 568 | margin-top: 5px; 569 | } 570 | 571 | .social_media_icon_buttons button{ 572 | background: black; 573 | border: none; 574 | border-radius: 50%; 575 | height: 22px; 576 | width: 22px; 577 | cursor: pointer; 578 | color: white; 579 | } 580 | 581 | .social_media_icon_buttons button i{ 582 | display: flex; 583 | font-size: 13px; 584 | justify-content: center; 585 | align-items: center; 586 | } 587 | 588 | .disclaimer{ 589 | font-size: 13px; 590 | color: gray; 591 | margin-top: auto; 592 | border-top: 1px solid #C0C0C0; 593 | padding-top: 20px; 594 | } 595 | 596 | @media only screen and (max-width: 900px){ 597 | .navigation_container{ 598 | grid-template-columns: repeat(3, 1fr); 599 | } 600 | } 601 | 602 | @media only screen and (max-width: 500px){ 603 | .navigation_container{ 604 | grid-template-columns: repeat(2, 1fr); 605 | } 606 | } 607 | 608 | @media only screen and (max-width: 320px){ 609 | .navigation_container{ 610 | grid-template-columns: repeat(1, 1fr); 611 | } 612 | } -------------------------------------------------------------------------------- /Zomato_Clone/zomato.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 | Zomato_Clone 16 | 17 | 18 |
19 |
20 | 30 |
31 |
32 | 33 |

Discover the best food & drinks in Mumbai

34 |
35 | 36 | 42 | 43 | 44 |
45 |
46 |
47 |
48 | 49 |
50 | card1 image 51 |
52 |

Order Online

53 |

Stay home and order to your doorstep

54 |
55 |
56 | 57 |
58 | card1 image 59 |
60 |

Dining

61 |

Visit amazing restaurants and cafes

62 |
63 |
64 | 65 |
66 | card1 image 67 |
68 |

Nightlife and clubs

69 |

Spend leisure time enjoying the nightlife of Pune

70 |
71 |
72 | 73 |
74 | card1 image 75 |
76 |

Takeaway services

77 |

We ensure timely delivery to our customers

78 |
79 |
80 | 81 |
82 |
83 |

Collections

84 |
85 | Explore curated lists of top restaurants, cafes, pubs in Pune based on trends 86 | All collections in Pune 87 |
88 |
89 | 90 |
91 |
92 |
93 |

Live Cricket Screening

94 | 56 places 95 |
96 |
97 | 98 |
99 |
100 |
101 |

Koregaon Park specials

102 | 12 places 103 |
104 |
105 | 106 |
107 |
108 |
109 |

Newly opened Restaurants

110 | 36 places 111 |
112 |
113 | 114 |
115 |
116 |
117 |

Trending Pubs Near me

118 | 16 places 119 |
120 |
121 | 122 |
123 |
124 |
125 |
126 |
127 | mobile image 128 |
129 |
130 |

Get the Zomato App

131 |

We will send you a link, open it and download the app now

132 |
133 |
134 | 135 | 136 |
137 |
138 | 139 | 140 |
141 |
142 |
143 | 144 | 145 |
146 |
147 |
Download App From
148 |
149 | Apple store 150 | Play store 151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |

Explore Options Near Me

160 | Explore the restaurants and cuisines across various cities under our service 161 |
162 |
163 |
164 | 171 |
172 |
173 | 180 |
181 |
182 | 189 |
190 |
191 |
192 |
193 | 288 | 289 | 290 | -------------------------------------------------------------------------------- /Zomato_Clone/zomato_India_Flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_India_Flag.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_appstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_appstore.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_banner.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_collection1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_collection1.jpg -------------------------------------------------------------------------------- /Zomato_Clone/zomato_collection2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_collection2.jpg -------------------------------------------------------------------------------- /Zomato_Clone/zomato_collection3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_collection3.jpg -------------------------------------------------------------------------------- /Zomato_Clone/zomato_collection4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_collection4.jpg -------------------------------------------------------------------------------- /Zomato_Clone/zomato_item1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_item1.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_item2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_item2.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_item3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_item3.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_item4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_item4.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_logo1.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_logo2.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_mobile_view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_mobile_view.png -------------------------------------------------------------------------------- /Zomato_Clone/zomato_playStore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechbyWebCoder/Clone_Website/86bdccbdd9cb2700c3b275eab657d4ae807625a7/Zomato_Clone/zomato_playStore.png --------------------------------------------------------------------------------