In this tutorial, we dive into the dynamic world of web development and design by demonstrating how to create a stunning user interface (UI) inspired by Nike’s website.
Using HTML, CSS, and JavaScript, we’ll guide you through the step-by-step process of creating an interactive design, complete with smooth animations, responsive elements, and other cool features.
Discover the secrets behind crafting an engaging and user-friendly web interface, all while paying homage to one of the world’s most iconic sportswear brands.
Get ready to lace up your coding skills and embark on this exciting journey to create a Nike-inspired UI that will leave your visitors in awe.
By the end of this tutorial you will be able to create this stunning website as well as the improvement of your skills especially in CSS.
You might also like
- Build a Seamless PHP & AJAX Login and Registration System with No Page Reloads!
- How to Build a Modern, Responsive Login & Registration Form with HTML, CSS, and JavaScript (Step-by-Step Guide)
- Top 20 Essential Shortcuts for Visual Studio Code You Should Know
- How to Create a To-Do List App Using HTML, CSS, and JavaScript
- Login and Register App using React and OneEntry Headless CMS
To make this website form we are going to start by. Creating a HTML File and add the following codes.
HTML & JavaScript codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nike Shoes Website | Ludiflex</title>
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="body_items">
<div class="item_1">
<img src="images/6.png" alt="">
</div>
<div class="item_2">
<img src="images/logo.png" alt="">
</div>
<div class="just_do_it">
<p>Just
Do
It
</p>
</div>
</div>
<div class="container">
<nav>
<div class="left_nav">
<div class="nav_logo">
<img src="images/logo.png" alt="">
</div>
<div class="nav_menu">
<ul>
<li>
<a href="#" class="link">HOME</a>
<div class="link_border"></div>
</li>
<li>
<a href="#" class="link">KIDS</a>
<div class="link_border"></div>
</li>
<li>
<a href="#" class="link">MEN</a>
<div class="link_border"></div>
</li>
<li>
<a href="#" class="link">WOMEN</a>
<div class="link_border"></div>
</li>
</ul>
</div>
</div>
<div class="right_nav">
<div class="nav_cart_box">
<i class="bx bx-cart"></i>
</div>
<div class="dropdown">
<div class="menu_bars" onclick="myMenuFunction()">
<div class="menu_bars_btn">
<img src="images/bar.png" class="bar_1">
<img src="images/bar.png" class="bar_2">
</div>
<div class="nav_dropdown_menu" id="navDropdownMenu">
<ul>
<li>
<a href="#" class="link">HOME</a>
<div class="link_border"></div>
</li>
<li>
<a href="#" class="link">KIDS</a>
<div class="link_border"></div>
</li>
<li>
<a href="#" class="link">MEN</a>
<div class="link_border"></div>
</li>
<li>
<a href="#" class="link">WOMEN</a>
<div class="link_border"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="main">
<div class="left_col">
<div class="shoe_title">
<p>Nike Air Jordan</p>
</div>
<div class="line">
<hr>
</div>
<div class="shoe_description">
<p>Nike Shoes E-commerce Web Template Shop - UpLabs, Nike introduces
new consumer website - oregonlive.com</p>
</div>
<div class="cart">
<button class="cart_btn">Add To Cart</button>
<p class="price">$197.99</p>
</div>
<div class="shop_box">
<div class="shop_item_container">
<div class="shoe_img_box">
<img src="images/2.png" class="shoe_img">
</div>
<div class="shoe_name_price">
<h3>Nike Air Max</h3>
<p>$169.99</p>
</div>
<div class="add_to_shop">
<i class="bx bx-cart"></i>
</div>
</div>
<div class="shop_item_container">
<div class="shoe_img_box">
<img src="images/3.png" class="shoe_img">
</div>
<div class="shoe_name_price">
<h3>Nike Air Force</h3>
<p>$172.99</p>
</div>
<div class="add_to_shop">
<i class="bx bx-cart"></i>
</div>
</div>
</div>
</div>
<div class="right_col">
<img src="images/1.png" class="featured_img" alt="">
<div class="shopping_cart_btn">
<i class="bx bx-cart"></i>
</div>
</div>
</div>
</div>
<script>
function myMenuFunction() {
var i = document.getElementById("navDropdownMenu");
if(i.className === "nav_dropdown_menu") {
i.className += " responsive";
} else {
i.className = "nav_dropdown_menu";
}
}
</script>
</body>
</html>
CSS Codes
/* Poppins Font*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #efe4e4;
}
nav{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 6vw;
height: 120px;
line-height: 120px;
z-index: 100;
}
.left_nav{
display: flex;
gap: 50px;
}
.nav_logo{
display: flex;
align-items: center;
}
.nav_logo img{
width: 100px;
}
.nav_menu ul{
display: flex;
flex-direction: row;
}
ul li{
position: relative;
list-style: none;
margin: 0 30px;
}
.link{
text-decoration: none;
padding: 10px 0;
color: #000;
font-size: 15px;
font-weight: 500;
}
.nav_menu .link_border{
height: 1px;
width: 0;
position: absolute;
bottom: 43px;
left: 0;
background: #000;
transition: .4s ease-in-out;
}
.nav_menu ul li a:hover ~ .link_border{
width: 30px;
}
.nav_dropdown_menu{
display: none;
}
.right_nav{
display: flex;
gap: 50px;
}
.nav_cart_box{
display: none;
}
.menu_bars{
display: flex;
align-items: center;
}
.menu_bars_btn{
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 0;
cursor: pointer;
}
.menu_bars_btn img{
width: 30px;
}
.bar_1, .bar_2{
transition: .3s ease-in-out;
}
.menu_bars_btn:hover .bar_1{
margin-left: 5px;
}
.menu_bars_btn:hover .bar_2{
margin-right: 10px;
}
/* BODY ITEMS */
.item_1 img{
position: fixed;
top: 0;
height: 100vh;
z-index: 10;
}
.item_2 img{
position: fixed;
left: 50%;
top: 50%;
opacity: 0.1;
transform: translate(-50%, -50%) rotate(-5deg);
max-width: 1000px;
width: 100%;
z-index: 20;
}
.just_do_it p{
position: absolute;
top: 50%;
right: 100px;
transform: translate(-50% -50%);
width: 200px;
line-height: 100px;
font-size: 100px;
font-weight: 600;
opacity: 0.1;
z-index: 100;
}
.main{
position: relative;
display: flex;
z-index: 100;
}
.left_col{
width: 50%;
padding-left: 70px;
padding-top: 40px;
}
.left_col .shoe_title p{
font-size: 4.2vw;
font-weight: 600;
letter-spacing: 7px;
}
.line hr{
border: 1px solid #222;
width: 200px;
margin: 25px 0 35px 0;
}
.left_col .shoe_description p{
font-family: 'Cascadia Code',sans-serif;
font-weight: 300;
line-height: 30px;
}
.cart{
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 80px 0 0;
}
.cart_btn{
font-weight: 600;
width: 130px;
height: 45px;
border-radius: 30px;
border: none;
box-shadow: -5px 5px 10px rgba(0,0,0,0.2);
cursor: pointer;
}
.price{
font-family: 'Cascadia Code',sans-serif;
font-weight: 500;
}
.shop_box{
display: flex;
align-items: flex-end;
gap: 50px;
height: 100%;
max-height: 35vh;
}
.shop_item_container{
position: relative;
background: #cfcfcf;
width: 200px;
height: 150px;
border-radius: 40px;
padding: 80px 20px 0 20px;
box-shadow: -5px 5px 10px rgba(0,0,0,0.2);
cursor: pointer;
}
.shoe_img_box .shoe_img{
position: absolute;
left: 50%;
top: 10%;
width: 130px;
transform: translate(-50%, -50%) rotate(-40deg);
transition: .3s ease-in-out;
}
.shoe_name_price{
display: flex;
justify-content: space-between;
}
.shoe_name_price h3{
font-family: Impact;
font-weight: 400;
width: 60px;
}
.add_to_shop{
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #222;
position: absolute;
right:-10px;
border-radius: 10px;
}
.add_to_shop i{
font-size: 20px;
color: #fff;
}
.shop_item_container:hover .shoe_img{
top: 5%;
transform: translate(-50%, -50%) rotate(-43deg);
}
.right_col{
width: 50%;
position: relative;
height: 85vh;
}
.featured_img{
position: absolute;
top: 50%;
left: 50%;
width: 47vw;
transform: translate(-70%, -70%) rotate(-35deg);
animation: featuredImg 2s;
}
/* @keyframes featuredImg {
0%{
top: 0;
}
100%{
top: 50%;
}
} */
.shopping_cart_btn{
position: absolute;
right: 90px;
bottom: 50px;
}
.shopping_cart_btn i{
font-size: 30px;
cursor: pointer;
}
@media only screen and (max-width: 755px) {
nav{
z-index: 200;
}
.nav_menu{
display: none;
}
.nav_dropdown_menu.responsive{
display: flex;
}
.dropdown{
position: relative;
}
.nav_dropdown_menu{
position: absolute;
top: 50px;
right: 0;
display: none;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.1);
width: 300px;
height: 380px;
backdrop-filter: blur(25px);
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
border-radius: 20px;
transition: all .3s ease-in-out;
}
.nav_dropdown_menu ul li{
line-height: 90px;
margin: 0;
text-align: center;
}
.dropdown:hover .bar_1{
margin-left: 5px;
}
.dropdown:hover .bar_2{
margin-right: 10px;
}
.main{
flex-direction: column;
}
.left_col{
width: 100%;
padding: 0 8vw;
order: 2;
}
.right_col{
width: 100%;
position: relative;
height: 300px;
order: 1;
}
.shop_box{
margin: 60px 0;
}
.nav_cart_box{
display: flex;
align-items: center;
}
.nav_cart_box i{
font-size: 30px;
cursor: pointer;
}
.shopping_cart_btn{
display: none;
}
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
2 Comments
Thank you, this tutorial is amazing!
Thank You Too