How To Create Fashion Website Using HTML CSS And JavaScript
Fashion Slider Website
Learn how to make a Fashion website with Awesome CSS Slider. Easy way to create a Fashion Website in HTML, CSS, and JS. This fashion site has an awesome CSS Slider, which I make by just using HTML and CSS. You will build like this website by watching my video tutorial or by following these steps, which I have given below.
How To Create Fashion Website Using HTML CSS And JavaScript.
- 0.0 - 1.00 min : Intro
- 1.00 - 28.0 min: How to build Fashion Website Using HTML.
About This Tutorial
In this tutorial, I will teach you how to create a Fashion Website with Awesome CSS Slider. It is easy to make. You will build like this website by watching the tutorial or following the steps which i have given above in the post. You will use this template in your upcoming projects. The source code link available above in the post, Download the rar file, extract the file, and enjoy the design. If you have any questions about this tutorial or you face any problem, contact me.
1) Open any code editor like Notepad++.
2) Create HTML, CSS, And Javascript files and put in your project folder which you create. I recommended you to create separate folders for CSS File And JS File.
3) Link the CSS and JS File With HTML File.
4) Copy the HTML code, which I gave below, and paste in the HTML which you create.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <title>Slider Website</title> <link rel="stylesheet" href="css/style.css"/> <!--using FontAwesome--> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> </head> <body> <section> <!--top--------------------------> <div class="top"> <!--text-logo-------------------> <a href="#" class="text-logo">Going To internet</a> </div> <!--left-------------------------> <div class="left"> <!--img-logo---------------> <img class="logo" src="images/logo.png"> </div> <!--center-------------------------> <div class="center"> <!--menu----------> <div class="menu "> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Conatct Us</a></li> <li><a href="#">Team</a></li> <li><a href="#">Blogs</a></li> </ul> </div> <!--slider-container---------------> <div class="slider-conatiner"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2" > <input type="radio" name="r" id="r3" > <input type="radio" name="r" id="r4" > <!--1-------------> <div class="slide slide1 slide-im1"></div> <!--2-------------> <div class="slide slide-im2"></div> <!--3-------------> <div class="slide slide-im3"></div> <!--4-------------> <div class="slide slide-im4"></div> </div> <!--slides-button--> <div class="buttons"> <!--1--------------------------------> <label for="r1"> <div class="btn btn-01 "> <!--slider-number--> <p>01</p> <div class="btn-img btn-img01 active-btn"></div> <h1>Summer Campaign</h1> <p>12 Picture</p> <p>15 colors</p> </div> </label> <!--2--------------------------------> <label for="r2"> <div class="btn btn-02"> <!--slider-number--> <p>02</p> <div class="btn-img btn-img02"></div> <h1>Summer Campaign</h1> <p>12 Picture</p> <p>15 colors</p> </div> </label> <!--3--------------------------------> <label for="r3"> <div class="btn btn-03"> <!--slider-number--> <p>03</p> <div class="btn-img btn-img03"></div> <h1>Summer Campaign</h1> <p>12 Picture</p> <p>15 colors</p> </div> </label> <!--4--------------------------------> <label for="r4"> <div class="btn btn-04"> <!--slider-number--> <p>04</p> <div class="btn-img btn-img04"></div> <h1>Summer Campaign</h1> <p>12 Picture</p> <p>15 colors</p> </div> </label> </div> </div> <!--right-------------------------> <div class="right"> <!--menu-bar-icon-------------------> <div class="toggle"></div> </div> <!--bottom-------------------------> <div class="bottom"> <!--copyright---------> <p class="copyright">Copyright 2020</p> <!--bottom-menu--------> <ul class="b-menu"> <li><a href="#">BLOG</a></li> <li><a href="#">MODEL</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> <!--language-----------> <p class="language">EN</p> </div> </section> <!--ADDING-Jquery-Link--> <script type="text/javascript" src="js/Jquery.js"></script> </body> </html>
5) Copy the CSS code, which I gave below, and paste in the CSS which you create.
@charset "utf-8";
/* CSS Document */
body{
margin: 0px;
padding: 0px;
}
a{
text-decoration:none;
}
ul{
list-style:none;
}
*{
box-sizing:border-box;
}
section{
width: 100%;
height: 100vh;
display:grid;
grid-template-rows:45px 1fr 45px;
grid-template-columns:45px 1fr 45px;
}
.top,.left,.right,.bottom{
background-color:#f1f2f4;
}
.center{
box-shadow:inset 2px 2px 12px rgba(0,0,0,0.03);
position: relative;
overflow: hidden;
}
.top,.bottom{
grid-column: span 3;
}
.top,.left,.right{
display: flex;
justify-content: center;
align-items: center;
}
.text-logo{
font-family:bebas kai;
font-size: 12px;
letter-spacing: 2px;
font-weight: 400;
color:#2b2b2b;
}
.logo{
height:25px;
}
.b-menu {
display:flex;
}
.bottom{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 48px;
overflow: hidden;
}
.copyright{
font-family: Ebrima;
font-weight: bold;
font-size: 10px;
color:#949393;
}
.b-menu li a{
margin:0px 20px;
font-family: Ebrima;
font-weight: bold;
font-size: 8px;
color:#464646;
}
.language{
margin:0px 20px;
font-family: Ebrima;
font-weight: bold;
font-size: 10px;
color:#464646;
}
.fa-bars{
color:#2b2b2b;
font-size: 16px;
}
.buttons{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display:flex;
justify-content: center;
align-items: center;
}
.btn{
margin:0px 20px;
}
.btn p{
color: #878586;
font-family: calibri;
font-weight: bold;
font-size: 12px;
letter-spacing: 2px;
line-height:3px;
}
.btn p:nth-child(1){
font-size:14px;
}
.btn-img{
width:160px;
height: 30px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
}
.btn h1{
font-family:bebas kai;
color:#3a3939;
font-size: 12px;
letter-spacing: 5px;
}
.btn-img01{
background-image: url("../images/slide-1.png");
}
.btn-img02{
background-image: url("../images/slide-2.png");
}
.btn-img03{
background-image: url("../images/slide-3.png");
}
.btn-img04{
background-image: url("../images/slide-4.png");
}
.slide-im1{
background-image:url("../images/1.png");
}
.slide-im2{
background-image:url("../images/2.png");
}
.slide-im3{
background-image:url("../images/3.png");
}
.slide-im4{
background-image:url("../images/4.png");
}
.slide{
width:20%;
transition: 0.5s;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slider-conatiner{
width:500%;
height: 100%;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slider-conatiner{
display: flex;
}
#r1:checked ~ .slide1{
margin-left: 0;
}
#r2:checked ~ .slide1{
margin-left: -20%;
}
#r3:checked ~ .slide1{
margin-left: -40%;
}
#r4:checked ~ .slide1{
margin-left: -60%;
}
.menu{
margin: 0px;
padding: 0px;
background-color:#EBEEF4;
flex-grow: 1;
position:absolute;
left: -100%;
width:100%;
height: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.menu ul{
text-align: center;
margin: 0px;
padding: 0px;
}
.menu ul li a{
padding: 10px;
display: inline-block;
font-family: calibri;
font-size: 1.3em;
text-transform: uppercase;
color:#5C5C5C;
}
.menu ul li a:hover{
color:#2b2b2b;
}
.toggle {
color:#1F1F1F;
font-size: 18px;
}
.toggle:before{
content:'\f0c9';
font-family: fontAwesome;
line-height: 30px;
}
.toggle.active:before{
content:'\f00d';
}
.active{
left:auto;
}
6) Copy the JS code, which I give you below of this, and paste this code in the CSS which you create.
$(document).ready(function(){
$('.toggle ').click(function(){
$('.toggle').toggleClass('active')
$('.menu').toggleClass('active')
})
});
7) All Files link, Which I use in the project given below.
The Download Links Will Be Shown in 30 Seconds
This comment has been removed by the author.
ReplyDelete