NIKE Products Landing Page
Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
📙Table Of Content
- Project Folder Structure
- NIKE Products Landing Page HTML CODE
- NIKE Products Landing PageCSS CODE
- NIKE Products Landing PageJavascript CODE
- Live Preview Of NIKE Products Landing Page
Project Folder Structure:
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
NIKE Products Landing Page HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>NIKE PRODUCTS PAGE</title>
<meta charset="utf-8">
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- TOP NAV -->
<div class="navbar">
<a href="#" class="logo">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEh-IrLF4fHhQVQpewDdYNkcOG4rq3RFopWlUO0bpQJSGIgYZfWoT0WMUPu-RLg6yblK9CebKhNWBSicUIQmYf8KQIi5HrEoohoRLMefvlDVj_zRBxmVYih9QRXpsLVAu8Z8pskXFUmEd8Emoyb2XYCjZtqq4op_yeLKsjL1Y__f7D33m8cMFPc01BufrgY=s890" alt="CWS" width="300px" >
</a>
<div class="navbar-right menu">
<a href="#" class="active">New releases</a>
<a href="#">Men</a>
<a href="#">Women</a>
<a href="#">Kids</a>
<a href="#">About</a>
<a href="#">Contacts</a>
</div>
<div class="navbar-right">
<a href="#" class="cart">
<i class="bx bx-cart-alt"></i>
<span class="badge">2</span>
</a>
</div>
</div>
<!-- END TOP NAV -->
<!-- MAIN -->
<div id="slider" class="slider">
<!-- SLIDE 1 -->
<div class="row fullheight slide">
<div class="col-6 fullheight">
<!-- PRODUCT INFO -->
<div class="product-info">
<div class="info-wrapper">
<div class="product-price left-to-right">
<span>$</span>230
</div>
<div class="product-name left-to-right">
<h2>
Nike ZoomX Vaporfly NEXT%
</h2>
</div>
<div class="product-size left-to-right">
<h3>SIZE</h3>
<div class="size-wrapper">
<div>35</div>
<div>36</div>
<div class="active">37</div>
<div>38</div>
<div>39</div>
<div>40</div>
</div>
</div>
<div class="product-color left-to-right">
<h3>COLORS</h3>
<div class="color-wrapper">
<div class="active">
<div class="bg-red"></div>
</div>
<div class="">
<div class="bg-blue"></div>
</div>
<div class="">
<div class="bg-white"></div>
</div>
</div>
</div>
<div class="product-description left-to-right">
<p>
The Nike ZoomX Vaporfly NEXT% clears your path to record-breaking speed with a lighter design and faster feel than before. With more cushioning underfoot and reduced weight up top, the result is unprecedented energy return and comfort
</p>
</div>
<div class="button left-to-right">
<button>
Add to cart
</button>
</div>
</div>
</div>
<!-- END PRODUCT INFO -->
</div>
<div class="col-6 fullheight img-col" style="background-image: linear-gradient(to top right, #e19e95, #fd835c)">
<!-- PRODUCT IMAGE -->
<div class="product-img">
<div class="img-wrapper right-to-left">
<div class="bounce">
<img src="assets/zoomx-vaporfly-next-running-shoe-4Q5jfG.png" alt="placeholder+image">
</div>
</div>
</div>
<!-- END PRODUCT IMAGE -->
<!-- PRODUCT MORE IMAGES -->
<div class="more-images">
<div class="more-images-item bottom-up">
<img src="assets/zoomx-vaporfly-next-running-shoe-4Q5jfG-1.jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/zoomx-vaporfly-next-running-shoe-4Q5jfG (1).jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/zoomx-vaporfly-next-running-shoe-4Q5jfG (3).jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/zoomx-vaporfly-next-running-shoe-4Q5jfG (4).jpg" alt="placeholder+image">
</div>
</div>
<!-- ENDPRODUCT MORE IMAGES -->
</div>
</div>
<!-- END SLIDE 1 -->
<!-- SLIDE 2 -->
<div class="row fullheight slide">
<div class="col-6 fullheight">
<!-- PRODUCT INFO -->
<div class="product-info">
<div class="info-wrapper">
<div class="product-price left-to-right">
<span>$</span>230
</div>
<div class="product-name left-to-right">
<h2>
Nike Zoom Fly 3
</h2>
</div>
<div class="product-size left-to-right">
<h3>SIZE</h3>
<div class="size-wrapper">
<div>35</div>
<div>36</div>
<div class="active">37</div>
<div>38</div>
<div>39</div>
<div>40</div>
</div>
</div>
<div class="product-color left-to-right">
<h3>COLORS</h3>
<div class="color-wrapper">
<div class="active">
<div class="bg-red"></div>
</div>
<div class="">
<div class="bg-blue"></div>
</div>
<div class="">
<div class="bg-white"></div>
</div>
</div>
</div>
<div class="product-description left-to-right">
<p>
The Nike ZoomX Vaporfly NEXT% clears your path to record-breaking speed with a lighter design and faster feel than before. With more cushioning underfoot and reduced weight up top, the result is unprecedented energy return and comfort
</p>
</div>
<div class="button left-to-right">
<button>
Add to cart
</button>
</div>
</div>
</div>
<!-- END PRODUCT INFO -->
</div>
<div class="col-6 fullheight img-col" style="background-image: linear-gradient(to top right, #6b6d68, #629f2a)">
<!-- PRODUCT IMAGE -->
<div class="product-img">
<div class="img-wrapper right-to-left">
<div class="bounce">
<img src="assets/zoom-fly-3-mens-running-shoe-XhzpPH.png" alt="placeholder+image">
</div>
</div>
</div>
<!-- END PRODUCT IMAGE -->
<!-- PRODUCT MORE IMAGES -->
<div class="more-images">
<div class="more-images-item bottom-up">
<img src="assets/zoom-fly-3-mens-running-shoe-XhzpPH.jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/zoom-fly-3-mens-running-shoe-XhzpPH (1).jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/zoom-fly-3-mens-running-shoe-XhzpPH (2).jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/zoom-fly-3-mens-running-shoe-XhzpPH (3).jpg" alt="placeholder+image">
</div>
</div>
<!-- ENDPRODUCT MORE IMAGES -->
</div>
</div>
<!-- END SLIDE 2 -->
<!-- SLIDE 3 -->
<div class="row fullheight slide">
<div class="col-6 fullheight">
<!-- PRODUCT INFO -->
<div class="product-info">
<div class="info-wrapper">
<div class="product-price left-to-right">
<span>$</span>230
</div>
<div class="product-name left-to-right">
<h2>
Nike Air Max Alpha TR 3
</h2>
</div>
<div class="product-size left-to-right">
<h3>SIZE</h3>
<div class="size-wrapper">
<div>35</div>
<div>36</div>
<div class="active">37</div>
<div>38</div>
<div>39</div>
<div>40</div>
</div>
</div>
<div class="product-color left-to-right">
<h3>COLORS</h3>
<div class="color-wrapper">
<div class="active">
<div class="bg-red"></div>
</div>
<div class="">
<div class="bg-blue"></div>
</div>
<div class="">
<div class="bg-white"></div>
</div>
</div>
</div>
<div class="product-description left-to-right">
<p>
The Nike ZoomX Vaporfly NEXT% clears your path to record-breaking speed with a lighter design and faster feel than before. With more cushioning underfoot and reduced weight up top, the result is unprecedented energy return and comfort
</p>
</div>
<div class="button left-to-right">
<button>
Add to cart
</button>
</div>
</div>
</div>
<!-- END PRODUCT INFO -->
</div>
<div class="col-6 fullheight img-col" style="background-image: linear-gradient(to top right, #cdcbd3, #171617)">
<!-- PRODUCT IMAGE -->
<div class="product-img">
<div class="img-wrapper right-to-left">
<div class="bounce">
<img src="assets/air-max-alpha-tr-3-mens-training-shoe-0C1CV7.png" alt="placeholder+image">
</div>
</div>
</div>
<!-- END PRODUCT IMAGE -->
<!-- PRODUCT MORE IMAGES -->
<div class="more-images">
<div class="more-images-item bottom-up">
<img src="assets/air-max-alpha-tr-3-mens-training-shoe-0C1CV7.jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/air-max-alpha-tr-3-mens-training-shoe-0C1CV7 (1).jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/air-max-alpha-tr-3-mens-training-shoe-0C1CV7 (2).jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/air-max-alpha-tr-3-mens-training-shoe-0C1CV7 (3).jpg" alt="placeholder+image">
</div>
</div>
<!-- ENDPRODUCT MORE IMAGES -->
</div>
</div>
<!-- END SLIDE 3 -->
<!-- SLIDE 4 -->
<div class="row fullheight slide">
<div class="col-6 fullheight">
<!-- PRODUCT INFO -->
<div class="product-info">
<div class="info-wrapper">
<div class="product-price left-to-right">
<span>$</span>230
</div>
<div class="product-name left-to-right">
<h2>
Nike Air Zoom SuperRep
</h2>
</div>
<div class="product-size left-to-right">
<h3>SIZE</h3>
<div class="size-wrapper">
<div>35</div>
<div>36</div>
<div class="active">37</div>
<div>38</div>
<div>39</div>
<div>40</div>
</div>
</div>
<div class="product-color left-to-right">
<h3>COLORS</h3>
<div class="color-wrapper">
<div class="active">
<div class="bg-red"></div>
</div>
<div class="">
<div class="bg-blue"></div>
</div>
<div class="">
<div class="bg-white"></div>
</div>
</div>
</div>
<div class="product-description left-to-right">
<p>
The Nike ZoomX Vaporfly NEXT% clears your path to record-breaking speed with a lighter design and faster feel than before. With more cushioning underfoot and reduced weight up top, the result is unprecedented energy return and comfort
</p>
</div>
<div class="button left-to-right">
<button>
Add to cart
</button>
</div>
</div>
</div>
<!-- END PRODUCT INFO -->
</div>
<div class="col-6 fullheight img-col" style="background-image: linear-gradient(to top right, #32519a, #4967af)">
<!-- PRODUCT IMAGE -->
<div class="product-img">
<div class="img-wrapper right-to-left">
<div class="bounce">
<img src="assets/air-zoom-superrep-mens-hiit-class-shoe-ZWLnJW (1).png" alt="placeholder+image">
</div>
</div>
</div>
<!-- END PRODUCT IMAGE -->
<!-- PRODUCT MORE IMAGES -->
<div class="more-images">
<div class="more-images-item bottom-up">
<img src="assets/air-zoom-superrep-mens-hiit-class-shoe-ZWLnJW.jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/air-zoom-superrep-mens-hiit-class-shoe-ZWLnJW (4).jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/air-zoom-superrep-mens-hiit-class-shoe-ZWLnJW (3).jpg" alt="placeholder+image">
</div>
<div class="more-images-item bottom-up">
<img src="assets/air-zoom-superrep-mens-hiit-class-shoe-ZWLnJW (2).jpg" alt="placeholder+image">
</div>
</div>
<!-- ENDPRODUCT MORE IMAGES -->
</div>
</div>
<!-- END SLIDE 4 -->
<!-- SLIDE CONTROL -->
<div id="slide-control" class="slide-control">
<div class="slide-control-item">
<img src="assets/zoomx-vaporfly-next-running-shoe-4Q5jfG.png" alt="placeholder+image">
</div>
<div class="slide-control-item">
<img src="assets/zoom-fly-3-mens-running-shoe-XhzpPH.png" alt="placeholder+image">
</div>
<div class="slide-control-item">
<img src="assets/air-max-alpha-tr-3-mens-training-shoe-0C1CV7.png" alt="placeholder+image">
</div>
<div class="slide-control-item">
<img src="assets/air-zoom-superrep-mens-hiit-class-shoe-ZWLnJW (1).png" alt="placeholder+image">
</div>
</div>
<!-- END SLIDE CONTROL -->
</div>
<!-- END MAIN -->
<!-- MODAL -->
<div id="modal" class="modal">
<span id="modal-close" class="close">×</span>
<img id="modal-content" class="modal-content">
<div class="more-images">
<div class="more-images-item">
<img class="img-preview">
</div>
<div class="more-images-item">
<img class="img-preview">
</div>
<div class="more-images-item">
<img class="img-preview">
</div>
<div class="more-images-item">
<img class="img-preview">
</div>
</div>
</div>
<!-- END MODAL -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>
NIKE Products Landing Page CSS CODE
:root {
--red: #ff3838;
--white: #ffffff;
--black: #000000;
--red-one: #CB356B;
--red-two: #BD3F32;
--green-one: #56ab2f;
--green-two: #94d049;
--black-one: #232526;
--black-two: #70767b;
--blue-one: #021B79;
--blue-two: #0575E6;
--silver: #bdc3c7;
}
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
.bg-red {
background-color: var(--red);
}
.bg-white {
background-color: var(--white);
}
.bg-black {
background-color: var(--black);
}
.bg-blue {
background-color: var(--blue-one);
}
.bg-green {
background-color: var(--green-one);
}
body, html {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
.row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.row:after, .row:before {
box-sizing: border-box;
}
.col-6 {
width: 50%;
position: relative;
}
.slider {
overflow: hidden;
height: 500%;
}
.fullheight {
height: 100vh;
}
.product-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.img-wrapper img {
height: auto;
width: 80%;
transform: rotate(-35deg);
}
.more-images {
position: absolute;
right: 90px;
top: 50%;
}
.more-images-item {
height: fit-content;
border-radius: 15px;
overflow: hidden;
margin: 5px 0;
}
.more-images-item img {
height: auto;
width: 80px;
border-radius: 15px;
transition: 1s;
}
.more-images-item:hover img {
transform: scale(1.5);
}
.more-images-item:hover {
cursor: pointer;
}
.product-info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 0 10%;
color: var(--silver);
}
.info-wrapper {
margin: auto;
position: relative;
text-align: right;
}
.product-name h2 {
font-weight: 900;
font-size: xxx-large;
color: var(--black);
}
.product-price {
font-weight: 900;
font-size: xx-large;
color: var(--black);
}
.product-price span {
font-size: large;
color: var(--black-two);
}
.product-size {
margin: 20px 0;
}
.size-wrapper {
display: flex;
flex-flow: row-reverse;
padding: 5px;
}
.size-wrapper div {
font-weight: 900;
margin: 5px;
width: 50px;
height: 50px;
border-radius: 50%;
padding: 13px;
border: 2px solid var(--silver);
color: var(--silver);
}
.size-wrapper div.active {
border: 2px solid var(--black);
color: var(--black);
}
.size-wrapper div:hover {
border: 2px solid var(--black);
color: var(--black);
cursor: pointer;
}
.color-wrapper {
display: flex;
flex-flow: row-reverse;
padding: 5px;
}
.color-wrapper > div {
margin: 5px;
width: 50px;
height: 50px;
border-radius: 50%;
padding: 3px;
border: 2px solid var(--silver);
background-color: var(--silver);
}
.color-wrapper > div.active {
border: 2px solid var(--black);
}
.color-wrapper > div:hover {
cursor: pointer;
border: 2px solid var(--black);
}
.color-wrapper > div >div {
width: 40px;
height: 40px;
border-radius: 50%;
}
.product-description {
margin: 60px 0;
text-align: justify;
font-weight: 600;
}
.button > button {
font-weight: 900;
font-size: x-large;
padding: 15px 60px;
border-radius: 30px;
border: 2px solid var(--black);
background-color: var(--white);
color: var(--black);
transition: .5s;
}
.button > button:hover {
cursor: pointer;
background-color: var(--black);
color: var(--white);
}
.img-col {
border-bottom-left-radius: 100%;
}
.slide-control {
display: flex;
padding: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.slide-control div {
height: 50px;
width: 50px;
margin: 10px;
transition: .5s;
}
.slide-control div:hover {
cursor: pointer;
transform: translateY(-30px);
border-bottom: 2px solid var(--black);
}
.slide-control div img {
height: auto;
width: 100%;
filter: grayscale(100%);
transform: rotate(-45deg);
}
.slide-control div:hover img {
filter: unset;
}
.slide-control div.active img {
filter: unset;
}
.slide-control div.active {
border-bottom: 2px solid var(--black);
}
.modal {
display: none;
position: fixed;
z-index: 100;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content {
animation-name: zoom;
animation-duration: .6s;
}
@keyframes zoom {
from {
transform: scale(0);
} to {
transform: scale(1);
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: var(--white);
font-size: 40px;
font-weight: 900;
transition: .3s;
}
.close:hover, .close:focus {
color: var(--silver);
text-decoration: none;
cursor: pointer;
}
.navbar {
background-color: transparent;
padding: 10px 90px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
display: flex;
}
.navbar a {
float: left;
color: var(--white);
text-decoration: none;
font-size: 14px;
font-weight: 900;
padding:12px;
text-transform: uppercase;
}
.navbar .logo {
font-size: 30px;
flex: 1;
color: var(--black);
}
.navbar-right a:hover {
color: var(--black);
border-bottom: 2px solid var(--black);
}
.navbar-right a.active {
color: var(--black);
border-bottom: 2px solid var(--black);
}
.navbar-right a {
transition: .5s;
}
.cart {
position: relative;
}
.cart i {
font-size: x-large;
}
.badge {
position: absolute;
top: 0;
right: 1px;
font-size: 12px;
background-color: var(--red);
width: 20px;
height: 20px;
padding: 2px;
text-align: center;
justify-content: center;
border-radius: 50%;
}
/* ANIMATION */
.right-to-left {
transition: 1s;
transform: translateX(100%);
}
.active .right-to-left {
transform: translateX(0);
}
.bottom-up {
transition: 1s;
transform: translateY(100vh);
}
.active .bottom-up {
transform: translateY(0);
}
.left-to-right {
transition: 1s;
transform: translateX(-150%);
}
.active .left-to-right {
transition: 1s;
transform: translateX(0);
}
.more-images-item:nth-child(1) {
transition-delay: .2s;
}
.more-images-item:nth-child(2) {
transition-delay: .4s;
}
.more-images-item:nth-child(3) {
transition-delay: .6s;
}
.more-images-item:nth-child(4) {
transition-delay: .8s;
}
.info-wrapper > div:nth-child(1) {
transition-delay: .2s;
}
.info-wrapper > div:nth-child(2) {
transition-delay: .4s;
}
.info-wrapper > div:nth-child(3) {
transition-delay: .6s;
}
.info-wrapper > div:nth-child(4) {
transition-delay: .8s;
}
.info-wrapper > div:nth-child(5) {
transition-delay: 1s;
}
.info-wrapper > div:nth-child(6) {
transition-delay: 1.2s;
}
.bounce {
animation-name: bounce;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-duration: 3s;
}
@keyframes bounce {
0% {
transform: translateY(0);
} 50% {
transform: translateY(-50px);
} 100% {
transform: translateY(0);
}
}
NIKE Products Landing Page Javascript CODE
let slideIndex = 0;
let slider = document.getElementById('slider')
let slides = slider.getElementsByClassName('slide')
let slideControl = document.getElementById('slide-control')
let slideControlItems = slideControl.getElementsByClassName('slide-control-item')
slider.style.marginTop = '-' + slideIndex + '00vh'
setTimeout(() => {
slideControlItems[slideIndex].classList.add('active')
slides[slideIndex].classList.add('active')
}, 500)
chooseProduct = (index) => {
if (index === slideIndex) return
slideIndex = index
let currSlideControl = slideControl.querySelector('.slide-control-item.active')
currSlideControl.classList.remove('active')
let currSlide = slider.querySelector('.slide.active')
currSlide.classList.remove('active')
setTimeout(() => {
slider.style.marginTop = '-' + slideIndex + '00vh'
slideControlItems[slideIndex].classList.add('active')
slides[slideIndex].classList.add('active')
}, 1500)
}
Array.from(slideControlItems).forEach((el, index) => {
el.onclick = function() {
chooseProduct(index)
}
})
let modal = document.getElementById('modal')
let closeBtn = document.getElementById('modal-close')
closeBtn.onclick = () => {
modal.style.display = 'none'
}
let moreImages = document.getElementsByClassName('more-images-item')
let previewImages = document.getElementsByClassName('img-preview')
Array.from(moreImages).forEach((el) => {
el.onclick = () => {
let imgItems = el.parentNode.getElementsByTagName('img')
Array.from(imgItems).forEach((item, index) => {
previewImages[index].src = item.src
})
let img = el.querySelector('img')
modal.style.display = 'block'
let modalContent = modal.querySelector('.modal-content')
modalContent.src = img.src
let temp = modalContent.cloneNode(true)
modalContent.parentNode.replaceChild(temp, modalContent)
}
})
Live Preview Of NIKE Products Landing Page
See the Pen Untitled by Codewithshobhit (@Codewithshobhit) on CodePen.
Star
Fork
Download
How to run this Html Css and Js Project in Our Browser?
first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.
Which Code Editor do you use to create those projects?
I am using VS Code Studio.
is this project responsive or not?
Yes! this project is a responsive project.
If you enjoyed reading this post and have found it useful for you, then please give share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram
if you have any confusion Comment below or you can contact us by filling out our Contact Us form from the home section. 🤞🎉
No comments:
Post a Comment