├── logo.png ├── shoe_img ├── air-max-270.png ├── air-max-90.png ├── nike-span-2.png ├── air-max-excee-.png ├── nike-air-force.png └── nike-air-force-1-high.png ├── js └── main.js ├── README.md ├── style.css └── index.html /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JEETAHIRWAR/Product_Landing_Page/HEAD/logo.png -------------------------------------------------------------------------------- /shoe_img/air-max-270.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JEETAHIRWAR/Product_Landing_Page/HEAD/shoe_img/air-max-270.png -------------------------------------------------------------------------------- /shoe_img/air-max-90.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JEETAHIRWAR/Product_Landing_Page/HEAD/shoe_img/air-max-90.png -------------------------------------------------------------------------------- /shoe_img/nike-span-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JEETAHIRWAR/Product_Landing_Page/HEAD/shoe_img/nike-span-2.png -------------------------------------------------------------------------------- /shoe_img/air-max-excee-.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JEETAHIRWAR/Product_Landing_Page/HEAD/shoe_img/air-max-excee-.png -------------------------------------------------------------------------------- /shoe_img/nike-air-force.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JEETAHIRWAR/Product_Landing_Page/HEAD/shoe_img/nike-air-force.png -------------------------------------------------------------------------------- /shoe_img/nike-air-force-1-high.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JEETAHIRWAR/Product_Landing_Page/HEAD/shoe_img/nike-air-force-1-high.png -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | gsap.from('nav', { opacity: 0, delay: 1.6, duration: 2.5, ease: "elastic.out(1,0.3)", y: -100 }); 2 | 3 | gsap.from('.search', { opacity: 0, delay: 1.8, duration: 2.8, ease: "elastic.out(1,0.3)", y: -100 }); 4 | 5 | gsap.from('.brand_type', { opacity: 0, delay: 2.2, duration: 3, ease: "elastic.out(1,0.3)", y: -100 }); 6 | 7 | gsap.from('.discount', { opacity: 0, delay: 1, scale: .1, duration: 2.4, rotation: 180, ease: "expo.inOut", x: 100 }); 8 | 9 | gsap.from('.bottom_shoes_card', { opacity: 0, delay: 2.6, duration: 3.5, ease: "elastic.out(1,0.3)", x: 100 }); 10 | 11 | gsap.from('.selected_product_img', { opacity: 0, delay: 3, duration: 4, ease: "elastic.out(1,0.3)", y: 100 }); 12 | 13 | gsap.from('.size_product', { opacity: 0, delay: 3.5, duration: 0.5, ease: "Expo.In", y: 100 }); 14 | 15 | gsap.from('.circle1', { opacity: 0, delay: 4.5, scale: .1, duration: .7, ease: "expo.In" }); 16 | 17 | gsap.from('.circle2', { opacity: 0, delay: 4.8, scale: .1, duration: .7, ease: "expo.In" }); 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Product Landing Page 2 | 3 | --- 4 | 5 | ## Screenshot 6 | 7 | ![Product Landing Page Screenshot](https://github.com/JEETAHIRWAR/Product_Landing_Page/assets/102626329/b7706566-ebad-4675-8d96-f2987358e97e) 8 | 9 | --- 10 | 11 | ## Project Description 12 | 13 | This project is a responsive product landing page for showcasing a range of Nike sneakers. It's designed to provide users with an engaging and visually appealing experience while exploring and learning about the featured products. 14 | 15 | --- 16 | 17 | ## Project Structure 18 | 19 | The project is organized as follows: 20 | 21 | - `index.html`: The main HTML file for the landing page. 22 | - `CSS/`: Contains the CSS files for styling. 23 | - `js/`: Contains JavaScript files for interactivity. 24 | - `shoe_img/`: Includes images of featured products. 25 | - `LICENSE`: The MIT License file. 26 | 27 | --- 28 | 29 | ## Table of Contents 30 | 31 | - [Features](#features) 32 | - [Getting Started](#getting-started) 33 | - [Prerequisites](#prerequisites) 34 | - [Tools Used](#tools-used) 35 | - [Starter Files](#starter-files) 36 | - [Installation](#installation) 37 | - [Usage](#usage) 38 | - [Like my work and want to support me?](#like-my-work-and-want-to-support-me) 39 | - [FAQ](#faq) 40 | - [Contributing](#contributing) 41 | - [Feedback and Stars ⭐](#feedback-and-stars-) 42 | - [License](#license) 43 | - [❤️ Thank You 😎](#-thank-you-) 44 | 45 | --- 46 | 47 | ## Features 48 | 49 | - Responsive design for various screen sizes. 50 | - Navigation menu with links. 51 | - Product showcase with images and descriptions. 52 | - Search functionality. 53 | - Discount information. 54 | - Interactive elements and animations. 55 | - Product details section. 56 | - Cart button for shopping. 57 | - Product reviews section. 58 | 59 | --- 60 | 61 | ## Getting Started 62 | 63 | ### Prerequisites 64 | 65 | Before you begin, ensure you have the following tools and dependencies installed: 66 | 67 | - Web browser (e.g., Google Chrome, Firefox) 68 | - Text editor or code editor (e.g., Visual Studio Code) 69 | 70 | --- 71 | 72 | ### Tools Used 73 | 74 | The project is built using the following technologies: 75 | 76 | - HTML 77 | - CSS 78 | - JavaScript 79 | - GSAP (GreenSock Animation Platform) 80 | - Remixicon icon library 81 | - Google Fonts (Inter and Poppins) 82 | 83 | --- 84 | 85 | ### Starter Files 86 | 87 | You can find the starter files in this repository's [source code](./). 88 | 89 | ## Installation 90 | 91 | 1. Clone the repository to your local machine: 92 | 93 | ```bash 94 | git clone https://github.com/JEETAHIRWAR/Product_Landing_Page.git 95 | 96 | 97 | 2. Open the project folder in your code editor. 98 | 99 | ## Usage 100 | - To view the product landing page, open the `index.html` file in a web browser. 101 | 102 | --- 103 | 104 |
105 | 106 | ## Author 107 | [JEET AHIRWAR](https://github.com/JEETAHIRWAR) 108 | 109 |
110 | 111 | --- 112 | 113 | ## Like my work and want to support me? 114 | 115 | Feel free to connect with me on LinkedIn: 116 | 117 | [![LinkedIn](https://img.shields.io/badge/LinkedIn-Jeetahirwar-blue)](https://www.linkedin.com/in/jeet-ahirwar-0b71371b2/) 118 | [![Portfolio](https://img.shields.io/badge/Portfolio-Jeetahirwar's%20Portfolio-green)](https://www.your-portfolio-website.com/) 119 | [![YouTube](https://img.shields.io/badge/YouTube-Jeetahirwar-red)](https://www.youtube.com/c/your-youtube-channel) 120 | [![Instagram](https://img.shields.io/badge/Instagram-_jeet__007_-purple)](https://www.instagram.com/_jeet__007_/) 121 | 122 | --- 123 | 124 | ## FAQ 125 | - Question 1: How can I customize the product landing page for my own products? 126 | - Answer: You can modify the HTML content, CSS styles, and images to feature your own products. The JavaScript code can be customized to add more interactivity or functionality. 127 | 128 | --- 129 | 130 | ## Contributing 131 | - Contributions are welcome! If you'd like to contribute to this project, please follow these steps: 132 | 133 | - Fork the project. 134 | 1. Create a new branch for your feature or bug fix. 135 | 2. Make your changes and commit them. 136 | 3. Push your changes to your fork. 137 | 4. Submit a pull request to the main repository. 138 | 139 | --- 140 | 141 | ## Feedback and Stars ⭐ 142 | 143 | If you find this project useful or have any feedback, please consider leaving a star (⭐) on the GitHub repository. Your feedback and support are greatly appreciated! 144 | 145 | [Give a Star](https://github.com/JEETAHIRWAR/Product_Landing_Page/stargazers) 146 | 147 | --- 148 | 149 | ## License 150 | This project is licensed under the MIT License - see the LICENSE file for details. 151 | 152 | --- 153 | 154 |
155 |

❤️Thank You 😎

156 | 157 |
158 |

😊Thank you for checking out my project!

159 | Happy Hacking 160 |

🥳Your support means a lot to me. If you have any questions or feedback, feel free to reach out.

161 |
162 | 163 |
164 | 165 | ---- 166 | ---- 167 | 168 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* ==== GOOGLE FONT : INTER ==== */ 2 | @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); 3 | 4 | /* ==== GOOGLE FONT : POPPINS ==== */ 5 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 6 | 7 | /* ==== ROOT ==== */ 8 | *{ 9 | margin: 0; 10 | padding: 0; 11 | box-sizing: border-box; 12 | font-family: 'Inter', sans-serif; 13 | } 14 | /* ==== RESET HTML ==== */ 15 | body{ 16 | height: 100vh; 17 | width: 100%; 18 | overflow: hidden; 19 | } 20 | ul li { 21 | list-style-type: none; 22 | } 23 | a { 24 | text-decoration: none; 25 | } 26 | button{ 27 | cursor: pointer; 28 | outline: none; 29 | border: none; 30 | } 31 | 32 | /* ==== WRAPPER ==== */ 33 | .wrapper{ 34 | width: 100%; 35 | height: 100%; 36 | display: grid; 37 | grid-template-columns: 65% 35%; 38 | } 39 | .left_container{ 40 | width: 100%; 41 | background-color: #EDF3F8; 42 | height: 100%; 43 | z-index: 1; 44 | } 45 | nav{ 46 | width: 100%; 47 | height: 70px; 48 | display: flex; 49 | align-items: center; 50 | justify-content: space-between; 51 | padding: 1.5rem 1rem; 52 | } 53 | .logo_content{ 54 | width: 100px; 55 | height: 100px; 56 | } 57 | .logo_content .nike_logo{ 58 | width: 100%; 59 | height: 100%; 60 | object-fit: cover; 61 | } 62 | .nav_content{ 63 | display: flex; 64 | } 65 | .nav_content .nav_links{ 66 | padding: 0 20px; 67 | color: rgb(99, 99, 99); 68 | text-transform: capitalize; 69 | font-size: 16px; 70 | letter-spacing: 0.5px; 71 | transition: 0.5s; 72 | } 73 | .nav_links:hover{ 74 | color: crimson; 75 | } 76 | .nav_links.active{ 77 | color: black; 78 | font-weight: 600; 79 | } 80 | .tools{ 81 | margin-top: 1rem; 82 | width: 100%; 83 | height: 90px; 84 | display: flex; 85 | align-items: center; 86 | justify-content: space-between; 87 | } 88 | .search{ 89 | display: flex; 90 | } 91 | .search_input{ 92 | width: 299px; 93 | height: 47px; 94 | border-radius: 7px; 95 | border: none; 96 | padding-left: 12px; 97 | font-size: 16px; 98 | margin-left: 2.5rem; 99 | margin-right: -1.1rem; 100 | outline: none; 101 | } 102 | .search_btn{ 103 | width: 45px; 104 | height: 45px; 105 | border-radius: 7px; 106 | border: none; 107 | padding-left: 12px; 108 | font-size: 16px; 109 | background-color: black; 110 | } 111 | .slider{ 112 | margin-left: -0.8rem; 113 | margin-top: .2rem; 114 | text-align: center; 115 | overflow: hidden; 116 | } 117 | .slider i{ 118 | color: white; 119 | font-size: 18px; 120 | } 121 | .discount{ 122 | display: flex; 123 | flex-direction: column; 124 | position: relative; 125 | } 126 | .discount_percentage{ 127 | font-size: 30px; 128 | font-weight: 600; 129 | text-transform: uppercase; 130 | letter-spacing: 0.5px; 131 | padding-bottom: 2px; 132 | width: 100px; 133 | } 134 | .seprator{ 135 | width: 100%; 136 | height: 2px; 137 | background-color: black; 138 | position: relative; 139 | } 140 | .seprator::before{ 141 | content: ""; 142 | position: absolute; 143 | top: -3px; 144 | left: -2px; 145 | background-color: black; 146 | width: 7px; 147 | height: 7px; 148 | border-radius: 50%; 149 | } 150 | .save_up{ 151 | font-size: 12px; 152 | color: black; 153 | text-transform: uppercase; 154 | letter-spacing: 0.5px; 155 | margin-top: 7px; 156 | } 157 | .brand_type{ 158 | display: flex; 159 | justify-content: space-between; 160 | width: 100%; 161 | align-items: center; 162 | padding: 2rem; 163 | } 164 | .sliders{ 165 | margin-top: 5rem; 166 | } 167 | .large_text{ 168 | font-size: 50px; 169 | text-transform: capitalize; 170 | letter-spacing: 0.5px; 171 | text-shadow: 4px 10px #d6eefc; 172 | line-height: 1; 173 | } 174 | .slider_btn{ 175 | width: 35px; 176 | height: 35px; 177 | border-radius: 50%; 178 | outline: none; 179 | border: 1px solid gray; 180 | background-color: transparent; 181 | cursor: pointer; 182 | } 183 | .slider_btn i { 184 | font-size: 22px; 185 | } 186 | .bottom_shoes_slider{ 187 | width: 940px; 188 | height: 200px; 189 | position: absolute; 190 | right: 30%; 191 | z-index: -1; 192 | margin-top: 1rem; 193 | } 194 | .bottom_shoes_card{ 195 | width: 100%; 196 | height: 100%; 197 | display: flex; 198 | justify-content: space-around; 199 | } 200 | .card_shoe{ 201 | width: 150px; 202 | height: 200px; 203 | max-height: 100%; 204 | border-radius: 20px; 205 | box-shadow: 1px 0px 19px 2px rgba(202, 202, 202, 1); 206 | } 207 | .shoe_content{ 208 | width: 150px; 209 | height: 100px; 210 | position: relative; 211 | background-color: #f5ddc9; 212 | border-top-left-radius: 20px; 213 | border-top-right-radius: 20px; 214 | } 215 | .shoe_content .shoe{ 216 | width: 100%; 217 | height: 111px; 218 | object-fit: cover; 219 | transform: rotate(-25deg); 220 | position: absolute; 221 | top: -2.5rem; 222 | right: 1rem; 223 | overflow: hidden; 224 | filter: drop-shadow(2px 2px 0.10rem rgb(82,82,82)); 225 | } 226 | .desc_product{ 227 | width: 98.5%; 228 | min-height: 50%; 229 | background-color: white; 230 | border-bottom-left-radius: 20px; 231 | border-bottom-right-radius: 20px; 232 | display: flex; 233 | justify-content: center; 234 | position: relative; 235 | } 236 | .transparent_bg{ 237 | content: ""; 238 | position: absolute; 239 | width: 30px; 240 | height: 30px; 241 | background-color: white; 242 | border-radius: 50%; 243 | display: flex; 244 | align-items: center; 245 | justify-content: center; 246 | top: -13.6px; 247 | } 248 | .add_to_cart{ 249 | width: 20px; 250 | height: 20px; 251 | background-color: #f5ddc9; 252 | border-radius: 50%; 253 | z-index: 1; 254 | display: flex; 255 | align-items: center; 256 | justify-content: center; 257 | } 258 | .add_to_cart i { 259 | color: white; 260 | font-size: 12px; 261 | margin-top: 2px; 262 | } 263 | .desc{ 264 | margin-top: 0.50rem; 265 | z-index: 100; 266 | position: absolute; 267 | top: 20%; 268 | text-align: center; 269 | } 270 | .card_product_name 271 | { 272 | font-size: 15px; 273 | text-transform: uppercase; 274 | font-family: 'Poppins'; 275 | letter-spacing: 0.5px; 276 | display: block; 277 | font-weight: 600; 278 | } 279 | .desc > span:nth-child(2){ 280 | font-size: 11px; 281 | text-transform: uppercase; 282 | letter-spacing: 0.5px; 283 | display: block; 284 | color: gray; 285 | } 286 | .price{ 287 | font-size: 16px; 288 | text-transform: uppercase; 289 | font-family: 'Poppins'; 290 | letter-spacing: 0.5px; 291 | display: flex; 292 | align-items: center; 293 | justify-content: center; 294 | margin-top: 3px; 295 | } 296 | .price i{ 297 | margin-right: 3px; 298 | color: gray; 299 | } 300 | .right_container{ 301 | width: 100%; 302 | height: 100%; 303 | background-color: #B6E2F8; 304 | z-index: 10; 305 | } 306 | .right_nav_content{ 307 | width: 100%; 308 | height: 70px; 309 | display: flex; 310 | align-items: center; 311 | justify-content: space-between; 312 | padding: 1.5rem 1rem; 313 | } 314 | .r_nav_links{ 315 | text-transform: uppercase; 316 | font-size: 15px; 317 | font-weight: 600; 318 | letter-spacing: 0.5px; 319 | } 320 | .cart_btn{ 321 | width: 40px; 322 | height: 40px; 323 | background-color: black; 324 | border-radius: 12px; 325 | display: flex; 326 | align-items: center; 327 | justify-content: center; 328 | cursor: pointer; 329 | } 330 | .cart_btn i { 331 | color:white; 332 | font-size: 20px; 333 | } 334 | .selected_product{ 335 | width: 100%; 336 | height: 380px; 337 | position: relative; 338 | } 339 | .selected_product_content{ 340 | width: 100%; 341 | height: 380px; 342 | padding: 1rem; 343 | position: relative; 344 | } 345 | .selected_product_img{ 346 | width: 100%; 347 | height: 100%; 348 | max-height: 100%; 349 | object-fit: cover; 350 | transform: rotate(-25deg); 351 | position: absolute; 352 | top: -3rem; 353 | right: 1.5rem; 354 | } 355 | .size_product{ 356 | width: 100%; 357 | min-height: 210px; 358 | background-color: black; 359 | } 360 | .content{ 361 | width: 100%; 362 | height: 100%; 363 | padding: 2rem; 364 | } 365 | .text{ 366 | width: 100%; 367 | height: 50px; 368 | display: flex; 369 | align-items: center; 370 | margin-top: 1rem; 371 | padding-bottom: 1rem; 372 | border-bottom: 1px solid rgb(92, 92, 92); 373 | } 374 | .selected_product_text{ 375 | color: white; 376 | text-transform: uppercase; 377 | letter-spacing: 1px; 378 | font-size: 28px; 379 | } 380 | .size_list{ 381 | color: rgb(155, 155, 155); 382 | list-style: none; 383 | display: flex; 384 | justify-content: space-between; 385 | } 386 | .size_item{ 387 | font-size: 17px; 388 | } 389 | .size_item:nth-child(3){ 390 | transform: translateY(-1rem); 391 | color: #eee; 392 | font-size: 20px; 393 | position: relative; 394 | } 395 | .size_item:nth-child(3)::after{ 396 | content: ""; 397 | position: absolute; 398 | top: 3rem; 399 | right: 0.1rem; 400 | font-size: 10px; 401 | width: 10px; 402 | height: 10px; 403 | background-color: #eee; 404 | border-radius: 50%; 405 | } 406 | .reviews{ 407 | margin-top: 0.5rem; 408 | width: 100%; 409 | padding: 10px; 410 | height: fit-content; 411 | display: flex; 412 | align-items: center; 413 | justify-content: space-between; 414 | } 415 | .reviews span{ 416 | text-transform: capitalize; 417 | color: rgb(209, 209, 209); 418 | letter-spacing: 1px; 419 | } 420 | .stars_list{ 421 | display: flex; 422 | } 423 | .stars_list li i{ 424 | color: rgba(223, 223, 2, 0.89); 425 | font-size: 15px; 426 | padding: 0 5px; 427 | } 428 | .circle1, .circle2{ 429 | position: absolute; 430 | width: 40px; 431 | height: 40px; 432 | background-color: #fffafa2c; 433 | border-radius: 50%; 434 | border: 2px; 435 | border-style: solid; 436 | border-color: #eee; 437 | display: flex; 438 | align-items: center; 439 | justify-content: center; 440 | z-index: 1; 441 | } 442 | .circle1{ 443 | left: 144px; 444 | top: 65%; 445 | } 446 | .circle2{ 447 | right: 100px; 448 | top: 25%; 449 | } 450 | .icon_{ 451 | width: 15px; 452 | height: 15px; 453 | background-color:white; 454 | border-radius: 50%; 455 | position: relative; 456 | } 457 | .icon_ i{ 458 | font-size: 15px; 459 | } 460 | .circle1 .product_tag, .circle2 .product_tag{ 461 | width: 100px; 462 | height: 60px; 463 | border-radius: 10px; 464 | background-color: rgba(0, 0, 0, 0.37); 465 | position: absolute; 466 | bottom: 35px; 467 | right: -2.5rem; 468 | display: flex; 469 | flex-direction: column; 470 | align-items: center; 471 | justify-content: center; 472 | overflow: hidden; 473 | } 474 | .product_tag p:nth-child(1){ 475 | color: white; 476 | } 477 | .product_tag p:nth-child(2){ 478 | font-size: 13.5px; 479 | color: #eee; 480 | text-transform: capitalize; 481 | } 482 | .offer2{ 483 | display: block; 484 | text-align: center; 485 | font-size: 13px; 486 | text-transform: capitalize; 487 | color: #eee; 488 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Product Landing Page 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 28 |
29 |
30 |
31 | 32 | 37 |
38 |
39 | 60% 40 |
41 | save up to 42 |
43 |
44 |
45 |
46 |
47 |

stylist
sneakers

48 |
49 |
50 | 53 | 56 |
57 |
58 |
59 |
60 |
61 |
    62 |
  • 63 |
    64 | nike-air-force 65 |
    66 |
    67 |
    68 |
    69 | 70 |
    71 |
    72 |
    73 | nike air force 74 | 3 colors 75 | 230.00 76 |
    77 |
    78 |
    • 79 |
  • 80 |
    81 | nike-air-force-1-high 82 |
    83 |
    84 |
    85 |
    86 | 87 |
    88 |
    89 |
    90 | air force 1 high 91 | 3 colors 92 | 230.00 93 |
    94 |
    95 |
    • 96 |
  • 97 |
    98 | air-max-270 99 |
    100 |
    101 |
    102 |
    103 | 104 |
    105 |
    106 |
    107 | air max 270 108 | 3 colors 109 | 230.00 110 |
    111 |
    112 |
    • 113 |
  • 114 |
    115 | air-max-excee- 116 |
    117 |
    118 |
    119 |
    120 | 121 |
    122 |
    123 |
    124 | air max excee 125 | 3 colors 126 | 230.00 127 |
    128 |
    129 |
    • 130 |
  • 131 |
    132 | nike-span-2 133 |
    134 |
    135 |
    136 |
    137 | 138 |
    139 |
    140 |
    141 | nike span 2 142 | 3 colors 143 | 230.00 144 |
    145 |
    146 |
    • 147 |
148 |
149 |
150 |
151 | 159 |
160 |
161 |
162 | 163 |
164 |

99%

165 |

comfortable

166 |
167 |
168 |
169 |
170 |
171 | 172 |
173 |

rare high percentage

174 |
175 |
176 |
177 | 178 |
179 | nike-air-max-90 180 |
181 |
182 |
183 |
    184 |
  • 185 | 39 186 |
    • 187 |
  • 188 | 40 189 |
    • 190 |
  • 191 | 41 192 |
    • 193 |
  • 194 | 42 195 |
    • 196 |
  • 197 | 43 198 |
    • 199 |


200 |
201 |

nike air max 90

202 |
203 |
204 | reviews 1k+ 205 |
    206 |
    • 207 |
    • 208 |
    • 209 |
    • 210 |
    • 211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 | 219 | 220 | 221 | 222 | 223 | 224 | --------------------------------------------------------------------------------