Create Watches Website Template Using HTML CSS And jQuery

byPosted at
Watches Website Template in HTML CSS

Watches Website Template

Learn how to make an eCommerce Watches Website Using HTML, CSS, and jQuery. Create your eCommerce website Using HTML, CSS, and jQuery. Easy way to learn HTML, CSS, and JavaScript For Beginners.You build this website by following my video tutorial or by following these steps, which I have given below.

HostGator Web Hosting

How To Make E-Commerce Website Template Using HTML CSS And jQuery

  1. 0.0 - 1.00 min : Intro
  2. 1.00 - 37.0 min: Create A E-commerce Watches Website Template Using HTML CSS And jQuery


About This Tutorial

In this Video Tutorial, I will teach you how to create a Watches website design using HTML, CSS, and jQuery. It is easy to make. First 120s Seconds, I will show the template, Which I will make in this tutorial. After, I will start to make this eCommerce template. You will create this site by following my steps in this video tutorial. I hope you like my tutorial. If you have any questions or problems in this tutorial, Contact me.

Follow These Steps:-

1) First You Create A Website Folder.
2) Make HTML, CSS, And Js File, And Put This File In The Website Folder.
3) Link The CSS File With HTML
4) Link The JS File With HTML
5) Copy HTML Code Which I Given Below And Past In Your HTML File.

HTML 

<!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<title>NEXON-SITE</title>
<link rel="stylesheet" href="css/style.css"/>
</head>

<body>
<div class="wrapper">
<!--slide-left-->
<div class="slide-left">
<!--menu-->
<div class="menu">
<a href="#" class="logo">INTERNET</a>
<ul>
<li><a href="#">MENS</a></li>
<li><a href="#">WOMENS</a></li>
<li><a href="#">CUSTOM</a></li>
</ul>
</div>
<!--content--------------------------->
<!--text-container-1------------>
<div class="text-container1 active-text-slide">
<div class="product-name">
<h1>ROLEX</h1>
</div>
<div class="footer">
<div class="footer-heading">
<h2>ROLEX___42mm</h2>
<span>S</span>
<span>M</span>
<span>L</span>
</div>
<p style="color:#949393; font-weight:bold;">SIMPLICITY</p>
<p>In thiis video tutorial i am gonna show you ow to create a nixon website dsign using html</p>
</div>
</div>
<!--text-container-2------------>
<div class="text-container2">
<div class="product-name">
<h1>ROLLO</h1>
</div>
<div class="footer">
<div class="footer-heading">
<h2>ROLLO___32mm</h2>
<span>S</span>
<span>M</span>
<span>L</span>
</div>
<p style="color:#949393; font-weight:bold;">SIMPLICITY</p>
<p>In thiis video tutorial i am gonna show you ow to create a nixon website dsign using html</p>
</div>
</div>
<!--social-Links-------------->
<div class="social">
<a href="#" class="fb">Fb</a>
<a href="#" class="in">In</a>
<a href="#" class="yu">Yu</a>
</div>
</div>
<!--slide-right-->
<div class="slide-right">
<!--right-side-menu-->
<div class="img-menu">
<a href="#" class="cart"><img height="30px;" src="images/basket-cart-icon-27.png"></a>
<a href="#" class="login">LOGIN</a>
</div>
<!--img-content------------------------------->
<!---(slide-1)-img-container-1-->
<div class="img-container1 active-img-slide">
<div class="product-img">
<img height="500px" src="images/w3.png">
<div class="cart-opt">
<p class="price">$225.00</p>
<a href="#" class="add-btn">ADD TO CART</a>
</div>
</div>
</div>
<!---(slide-2)-img-container-2-->
<div class="img-container2">
<div class="product-img">
<img height="500px" src="images/w4.png">
<div class="cart-opt">
<p class="price">$205.00</p>
<a href="#" class="add-btn">ADD TO CART</a>
</div>
</div>
</div>
<!--change-slide-btns-->
<div class="button">
<a href="#" class="first-btn active-btn">01</a>
<a href="#" class="second-btn">02</a>
</div>
</div>
</div>
<!--ADDING-Jquery-Link-->
<script type="text/javascript" src="js/JQuery3.3.1.js"></script>
</body>
</html>

6) Copy The CSS Code Which I Given Below And Past In Your CSS File.

CSS 

@charset "utf-8";
/* CSS Document */
body{
 margin:0px;
 padding:0px;}
ul{
 list-style:none;}
a{
 text-decoration:none;}
.slide-left{
 width:50%;
 height:100vh;
 background-image:url(../images/bg.png);
 background-attachment:fixed;
 background-size:100vh auto;
 background-repeat:no-repeat;
 overflow:hidden;
 position:relative;}
.slide-right{
 width:50%;
 height:100vh;
  background-image:url(../images/bg2.png);
 background-repeat:no-repeat;
 overflow:hidden;
 position:relative;}
.wrapper{
 display:flex;}
.menu,.img-menu{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin:30px 50px;
 font-family:calibri;
 }
.menu ul{
 display:flex;}
.menu ul li{
 
 
 margin:0px 20px;
 font-weight:700;
 letter-spacing:2px;
 font-size:13px;}
 .menu a{
  color:#e9e9e9;}
 .logo{
  font-weight:bold;
  letter-spacing:3px;
  border:2px solid #686868;
  padding:5px 20px;}
 .login{
  width:110px;
  height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:#313237;
  color:#FFFFFF;
  border-radius:10px;}
 .login:hover{
  background-color:#5a5b53;
  transition:all ease 0.5s;}
 .product-name{
  position:absolute;
  left:50%;
  top:20%;
  transform:translate(-50%,-20%);
  }
 .product-name h1{
  letter-spacing:0px;
  margin:0px;
  padding:0px;
  font-family:BAD GRUNGE;
  font-size:250px;
  color:#f3f3f3;}
 .footer-heading{
  font-family:calibri;
  color:#e9e9e9;
  display:flex;
  align-items:center;
  height:40px;
  }
 .footer{
  position:absolute;
  width:100%;
  padding:50px;
  box-sizing:border-box;
  left:0px;
  bottom:0px;}
  .footer-heading h2{
   margin-right:20px;}
  .footer-heading span{
   border:2px solid #555555;
   width:30px;
   box-sizing:border-box;
   margin:0px 5px;
   display:flex;
   justify-content:center;
   align-items:center;
   height:30px;}
  .footer p{
   color:#b7b5b5;
   font-family:calibri;
   line-height:15px;
   font-weight:400;
   width:300px;
   font-size:16px;}
  .social{
   position:absolute;
   bottom:40px;
   right:40px;}
  .social a{
   color:#dddddd;
   border-left:2px solid #6e6e6e;
   font-family:myriad pro;
   padding:0px 10px;
   letter-spacing:2px;
   transition:all ease 0.5s;
   }
  .fb:hover{
   border-left:2px solid #088adc;
   color:#088adc;
   }
  .in:hover{
   border-left:2px solid #d5ba00;
   color:#d5ba00;
   }
  .yu:hover{
   border-left:2px solid #c91a1d;
   color:#c91a1d;
   }
  .product-img{
   display:flex;
   align-items:center;
   justify-content:center;
   box-sizing:border-box;
   height:70%;}
   .cart-opt{
    display:flex;
    flex-direction:column;
    position:absolute;
    bottom:50px;
    right:60px;}
  .cart-opt a,p{
   font-family:calibri;
   font-weight:bold;
   letter-spacing:1px;
   line-height:10px;}
  .price{
   font-size:25px;
   color:#161616;}
        .add-btn{
   background-color:#313237;
   font-size:18px;
   border-radius:5px;
   width:150px;
   height:45px;
   color:#FFFFFF;
   display:flex;
   justify-content:center;
   align-items:center;
   box-shadow:2px 2px 5px rgba(0,0,0,0.5);}
  .add-btn:hover{
   background-color:#5a5b63;
   transition:all ease 0.5s;}
  .button{
   position:absolute;
   bottom:50px;
   left:40px;
   display:flex;}
  .button a{
   color:#fbfbfb;
   background-color:#848484;
   width:40px;
   height:40px;
   font-size:14px;
   border-radius:50%;
   display:flex;
   justify-content:center;
   align-items:center;
   font-family:calibri;
   margin:0px 5px;
   }
  .active-btn{
   width:80px !important;
   height:80px !important;
   background-color:#313237 !important;
   font-size:25px !important;}
  .text-container1,.text-container2{
   position:absolute;
   width:100%;
   height:88%;
   left:-10000px;}
  .active-text-slide{
   left:auto;}
  .active-text-slide h1{
   animation:text-animation ease 0.5s;}
  .img-container1,.img-container2{
   position:absolute;
   width:100%;
   height:87%;
   right:-1000000px;
   }
  .active-img-slide{
   right:auto;
   animation:fade ease 1s;}
  .active-text-slide > .footer{
   animation:fade ease 1s;}
  @keyframes text-animation{
   0%{letter-spacing:100px;}
   100%{
    letter-spacing:0px;}}
  @keyframes fade{
   0%{
    opacity:0;}
   100%{
    opacity:1;}}

7) Copy The Javascript Code Which I Given Below And Past In Your JavaScript File.

JavaScript 
 
//slide-btns
$(document).on('click','.first-btn,.second-btn',function(){
 $(this).addClass('active-btn').siblings().removeClass('active-btn')
});
//text-slide
$(document).on('click','.first-btn',function(){
 $('.text-container1').addClass('active-text-slide').siblings('.text-container2').removeClass('active-text-slide')
});
$(document).on('click','.second-btn',function(){
 $('.text-container2').addClass('active-text-slide').siblings('.text-container1').removeClass('active-text-slide')
});

//for img slide
$(document).on('click','.first-btn',function(){
 $('.img-container1').addClass('active-img-slide').siblings('.img-container2').removeClass('active-img-slide')
});
$(document).on('click','.second-btn',function(){
 $('.img-container2').addClass('active-img-slide').siblings('.img-container1').removeClass('active-img-slide')
});

8) All Files link, Which I use in the project given below.


The Download Links Will Be Shown in 30 Seconds


How To Dowload Files


Share
3 comments Labels, ,

Comments

  1. Koin YatimSeptember 2, 2020 at 3:52 AM

    thank you, so helpful for me to learn

    ReplyDelete
  2. HolaSHOPFebruary 2, 2021 at 6:26 PM

    i like this thanks bro

    ReplyDelete
  3. UnknownJune 22, 2021 at 6:31 AM

    thanks you , this is helped me in my homework

    ReplyDelete

Archive

Contact Form

Send