How To Create Nike Website UI Design Tutorial Using HTML
Nike Website UI Design
Learn How to make Nike UI(User Interface) Website Using HTML, CSS, and JavaScript. Easy way to create Nike shoe Website Using HTML, CSS, and JS. You will easily make this Nike shoe website by following my video tutorial, which I have given below. The source Code also available below in the post.
How To Make Nike Website UI Design Tutorial Using HTML, CSS, and JavaScript.
- 0.0 - 1.00 min : Intro
- 1.00 - 29.0 min: Create Nike Website UI Design Using HTML, CSS, and JavaScript.
Nike Website
You can easily make this Nike Website UI Design by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML, CSS, and JavaScript code that I give below. Paste this HTML, CSS, and JavaScript code into your HTML, CSS, and JavaScript file. On the youtube video tutorial, I tell you all the important points which help you to make the Nike Website UI Design like that for your website. So I recommended you watch the Video Tutorial on how can I make this Nike Website UI Design. This Nike Website UI Design is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand the Nike Website UI Design video tutorial on how I make this. You can use this without any copyright.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <title>website</title> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/style.css"/> </head> <body> <!-- Swiper --> <div class="swiper-container"> <div class="fix"></div> <div class="swiper-wrapper"> <!--slider1------------------------------------------------> <div class="swiper-slide"> <div class="slider-container"> <div class="slide-box"> <div class="slider-text"> <h6> N E W C O L L E C T I O N</h6> <h2>NEW NIKE RACT FLYKNIT</h2> <P>The search for a softer,springier,lighter and more double foam led to a break through in cushioning</P> <div class="cetagories"> <select> <option value="">QNT</option> <option value="quantity1">1</option> <option value="quantity2">2</option> <option value="quantity3">3</option> </select> <select> <option value="">SIZE</option> <option value="size-30">30</option> <option value="size-32">32</option> <option value="size-34">34</option> </select> <a href="#">$299</a> </div> </div> <div class="slider-img"> <a href="#"> <img src="images/275155267037211.png"> </a> </div> </div> <div class="bottom-things"> <div class="cart"> <a href="#">Add To Cart</a> </div> <div class="shoes-logo"> <a href="#"><img src="images/shoe.png"/></a> </div> </div> </div> </div> <!--slider2------------------------------------------------> <div class="swiper-slide"> <div class="slide-box"> <div class="slider-text"> <h6> N E W C O L L E C T I O N</h6> <h2>NEW NIKE RACT FLYKNIT</h2> <P>The search for a softer,springier,lighter and more double foam led to a break through in cushioning</P> <div class="cetagories"> <select> <option value="">QNT</option> <option value="quantity1">1</option> <option value="quantity2">2</option> <option value="quantity3">3</option> </select> <select> <option value="">SIZE</option> <option value="size-30">30</option> <option value="size-32">32</option> <option value="size-34">34</option> </select> <a href="#">$299</a> </div> </div> <div class="slider-img"> <a href="#"> <img src="images/2.png"> </a> </div> </div> <div class="bottom-things"> <div class="cart"> <a href="#">Add To Cart</a> </div> <div class="shoes-logo"> <a href="#"><img src="images/logo.png"/></a> </div> </div> </div> <!--slider3------------------------------------------------> <div class="swiper-slide"> <div class="slide-box"> <div class="slider-text"> <h6> N E W C O L L E C T I O N</h6> <h2>NEW NIKE RACT FLYKNIT</h2> <P>The search for a softer,springier,lighter and more double foam led to a break through in cushioning</P> <div class="cetagories"> <select> <option value="">QNT</option> <option value="quantity1">1</option> <option value="quantity2">2</option> <option value="quantity3">3</option> </select> <select> <option value="">SIZE</option> <option value="size-30">30</option> <option value="size-32">32</option> <option value="size-34">34</option> </select> <a href="#">$299</a> </div> </div> <div class="slider-img"> <a href="#"> <img src="images/3.png"> </a> </div> </div> <div class="bottom-things"> <div class="cart"> <a href="#">Add To Cart</a> </div> <div class="shoes-logo"> <a href="#"><img src="images/logo.png"/></a> </div> </div> </div> </div> </div> <div class="naviagtion-conatiner"> <div class="menu menu-left"> <a href="#" class="logo"><img src="images/nike_PNG7.png" /></a> <ul> <li><a href="#">Men</a></li> <li><a href="#">Women</a></li> <li><a href="#">Kids</a></li> <li><a href="#">Asasroies</a></li> </ul> </div> <div class="menu-right search-box"> <input class="search-text" type="search" placeholder="Search Something Here"> <a href="#" class="btn"><i class="fas fa-search"></i></a> </div> <div class="fix"></div> </div> <!-- Swiper JS------------------------ --> <script type="text/javascript" src="js/swiper.min.js"></script> <script type="text/javascript" src="js/JQuery3.3.1.js"></script> <script type="text/javascript" src="js/script.js"></script> </body> </html>
YOUR EXISTING AD GOES HERE
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
background-color:#161821;
font-family:montserrat,sans-serif;
background-image:url(../images/shadow.png);
background-attachment:fixed;
background-size:cover;
background-repeat:no-repeat;
}
.naviagtion-conatiner{
position:absolute;
top:0px;
width:100%;
padding:10px;
box-sizing:border-box;
}
.logo img{
height:60px;
padding:0px 20px;
box-sizing:border-box;
float:left;
}
.menu-right{
float:right;
}
.menu-left{
float:left;
margin:10px 50px;}
.fix{
clear:both;}
.menu ul{
margin:0px;
display:flex;
}
.menu ul li{
list-style:none;}
.menu ul li a{
display:block;
margin:10px 0px;
padding:10px 25px;
text-decoration:none;
font-weight:200;
font-size:12px;
color:#FFFFFF;}
.search-box{
height:18px;
padding:10px;
border-bottom:1px solid #FCFCFC;
margin:10px 50px;
background-color:transparent;}
.fix{
clear:both;}
.menu i{
font-size:20px;
color:#FFFFFF;
font-family:myriad pro;
font-weight:200;}
.search-text{
width:170px;
background-color:transparent;
border:none;
text-align:center;
outline:none;
color:#FFFFFF;
transition:all ease 0.5s;
}
.btn {
float:right;
margin:0px !important;
padding:0px !important;
display:flex;
justify-content:center;
align-items:center;
font-size:15px !important;
}
.swiper-slide{
display:flex;
align-items:center;
box-sizing:border-box;}
.slide-box{
margin:80px;
display:flex;
flex-wrap:1;
justify-content:space-between;}
.slider-text{
flex-basis:400px;
color:#FFFFFF;
}
.slider-text p{
color:rgba(110,105,105,1.00);
line-height:20px;}
h6{
font-size:15px;
word-spacing:5px;
line-height:20px;
color:#DC721F;
flex-wrap:wrap;
}
h2{
font-size:50px;
word-spacing:-2px;}
.slider-img{
height:450px;
}
.slider-img img{
max-height:100%;
max-width:100%;}
.cetagories{
display:flex;
}
.cetagories select{
width:90px;
height:40px;
border:2px solid #828282;
box-sizing:border-box;
background-color:transparent;
color:#FFFFFF;
outline:none;
margin-right:20px;
margin-left:0px;}
.cetagories option{
color:#000000;
}
.cetagories a{
font-size:20px;
justify-content:center;
font-weight:550;
text-decoration:none;
width:90px;
box-sizing:border-box;
height:40px;
color:#DC721F;
border:2px solid #DC721F;
display:flex;
align-items:center;}
.cart{
position:absolute;
bottom:0;
right:0px;
display:flex;
justify-content:center;
align-items:center;
width:250px;
height:50px;
background-color:rgba(54,53,53,0.50);
border:1px solid rgba(54,53,53,0.70);
}
.cart a{
text-decoration:none;
color:#DC721F;
}
.cart:hover{
background-color:rgba(203,96,23,1.00);
box-shadow:3px 3px 12px rgba(183,180,180,0.20);
transition:all ease 0.3s;
}
.cart:hover a{
color:#FFFFFF;
}
.shoes-logo img{
position:absolute ;
left:70px;
bottom:5px ;
height:35px;}
// JavaScript Document
var swiper = new Swiper('.swiper-container');
The Download Links Will Be Shown in 30 Seconds
I can't find your files like image logo etc. can you please help me?
ReplyDelete