How To Create A Awesome Gradient Website Template In HTML
Awesome Gradient Website
Learn how to make an Awesome Gradient Website using HTML, CSS, And JavaScript(JS). Easy way to create a Gradient website in HTML, CSS, and JavaScript(JS). Easy Way To Learn HTML For Beginners. You will easily make this Gradient website by watching my video tutorial or by following these steps, which I have given below.
How To Create A Awesome Gradient Website Template In HTML, CSS, And JQuery.
- 0.0 - 1.30 min : Intro
- 1.30 - 35.0 min: Building An Awesome Gradient Website Using HTML CSS And JQuery
About This Tutorial
In this tutorial, I will teach you how to create an Awesome Gradient Website Template using HTML, CSS, and Jquery. You will easily Create this website by following my video tutorial or by following the steps which I have given above the post. In the video tutorial First 60s, I will show you the website design, which I build in this tutorial. After, I start to make a website using HTML, CSS. I use JQuery To make a click slider. I hope you like this tutorial. If you have any questions or face any problems in this tutorial, Contact me.
1) Open any text editor.
2) Create HTML, CSS, And Javascript files. 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.
<html> <head> <meta charset="utf-8"> <title>Gradient site</title> <link href="css/style.css" rel="stylesheet"> <!--font-awesome--> <script crossorigin="anonymous" src="https://kit.fontawesome.com/c8e4d183c2.js"></script> </head> <body> <section> <!--main---------------------------> <div class="main-page"> <div class="navigation-container"> <!--logo--> <a class="logo" href="#">G T <font color="#1ed7f4">INTERNET</font></a> <!--menu--> <div class="menu"> <ul> <li><a href="#">Product</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact US</a></li> <li><a href="#">Technology</a></li> </ul> </div> <!--cart--> <a class="cart" href="#"><img src="images/cart.png" /></a> </div> <!--text--> <div class="text-container"> <p>G T <font color="#1ed7f4">Internet</font></p> <p>Awesome Website Design Using HTML And CSS</p> <p>Half Blood Prince,Devolper</p> </div> <!--PRODUCT-IMAGE--> <!--1----------------------------> <div class="product-img img1 "> <img src="images/product-2.png" /> </div> <!--2----------------------------> <div class="product-img img2 active-product"> <img src="images/product-1.png" /> </div> <!--3----------------------------> <div class="product-img img3"> <img src="images/product-3.png" /> </div> <!--4----------------------------> <div class="product-img img4"> <img src="images/product-4.png" /> </div> <!--tools---> <div class="tools"> <!--order-now--> <div class="order-now"> <a href="#">Order Now</a> </div> <!--prescription--> <div class="prescription"> <a href="#">Prescription</a> </div> <!--more-details--> <div class="more-details"> <a href="#">More-details</a> </div> </div> </div> <!--product-container--> <div class="product-container"> <div class="product-list"> <!--1------------------------------> <div class="box-1"> <!--heading--> <p class="heading">Product-1</p> <!--product-icon--> <div class="p-icon"> <i class="fas fa-headphones-alt"></i> </div> <!--type--> <p class="type">Wireless<br />Headphone</p> </div> <!--2------------------------------> <div class="box-2 active"> <!--heading--> <p class="heading">Product-2</p> <!--product-icon--> <div class="p-icon"> <i class="fas fa-shoe-prints"></i> </div> <!--type--> <p class="type">Nike<br />Sport Shoes</p> </div> <!--3------------------------------> <div class="box-3"> <p class="heading">Product-3</p> <!--product-icon--> <div class="p-icon"> <i class="far fa-clock"></i> </div> <!--type--> <p class="type">Vision<br />Supplements</p> </div> <!--4------------------------------> <div class="box-4"> <p class="heading">Product-4</p> <!--product-icon--> <div class="p-icon"> <i class="fas fa-camera"></i> </div> <!--type--> <p class="type">Locomotion<br />Victuals</p> </div> </div> </div> </section> <!--JQuery.js---------------------> <script src="js/JQuery3.3.1.js" type="text/javascript"></script> </body> </html>
5) Copy the CSS code, which I gave below, and paste in the CSS which you create.
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
background-color:#3b24a1;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
.main-page{
width:100%;
height:67vh;
background-image:url("../images/first-bg.png");
background-size: cover;
background-repeat:no-repeat;
position:relative;
}
.product-container{
width:100%;
height:33vh;
background-image:url("../images/second bg.png");
background-size: cover;
background-repeat:no-repeat;
position:relative;
}
.navigation-container{
display: flex;
justify-content:space-between;
padding:15px 6%;
align-items: center;
}
.logo{
font-family:RoadTest;
color:#ffffff;
font-size:25px;
}
.cart img{
height:30px;
}
.menu ul{
display:flex;
}
.menu ul li a{
font-family: calibri;
margin:20px;
font-weight:400;
letter-spacing:0.5px;
color:#E9E9E9;
font-size:17px;
}
.text-container p:nth-child(1){
color:#FFFFFF;
font-family:RoadTest;
font-size:50px;
}
.text-container p:nth-child(2){
font-family: calibri;
color:#eceaef;
font-size:30px;
}
.text-container p:nth-child(3){
font-family: calibri;
color:#f1f1f2;
font-size:18px;
}
.text-container p{
line-height:0px;
}
.text-container{
width:350px;
position: absolute;
left:20%;
top:50%;
transform: translate(-20%,-50%);
}
.text-container p:nth-child(2){
line-height:30px;
}
.product-img img{
height:300px;
}
.product-img{
position: absolute;
border-radius:140px;
left:66%;
top:45%;
transform: translate(-66%,-45%);
box-shadow:2px 2px 16px rgba(0,0,0,0.3);
}
.tools{
position: absolute;
right:40px;
bottom:2%;
display: flex;
align-items: center;
}
.order-now,.prescription,.more-details{
margin:10px 35px;
}
.order-now{
border:3px solid #30ffcd;
border-radius:20px;
width:110px;
height:40px;
display: flex;
justify-content: center;
align-items: center;
}
.order-now a,.prescription a,.more-details a{
color:#f5f5f5;
font-family: calibri;
}
.order-now:hover{
border:3px solid #30ffcd;
background-color:#30ffcd;
box-shadow:0px 2px 12px rgba(29,213,237,0.5);
transition: all ease 0.5s ;
}
.order-now:hover a{
color:#2D1C77;
font-weight:bold;
transition: all ease 0.5s ;
}
.box-1,.box-2,.box-3,.box-4{
width:220px;
height:30vh;
border:1px solid #301d86;
}
.product-list{
display: flex;
border-radius:10px;
overflow: hidden;
box-shadow:2px 2px 12px rgba(0,0,0,0.3);
background-color:;
background:linear-gradient(0deg,#5734ca 20%,#3c24a1);
}
.product-container{
display: flex;
justify-content: center;
align-items: center;
}
.heading,.type{
font-family: calibri;
opacity:0.7;
}
.heading {
color:#c8bcfc;
font-weight:400;
font-size:22px;
}
.type {
color:#ac9afa;
font-size: 20px;
line-height:20px;
}
.box-1,.box-2,.box-3,.box-4{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.type{
text-align: center;
}
.p-icon{
border:3px solid #32fecd;
width:55px ;
height:40px;
display: flex;
justify-content: center;
align-items: center;
border-radius:20px;
}
.p-icon i{
color:#FFFFFF;
font-size:20px;
}
.active{
background:linear-gradient(-180deg,#3c4ce3 30%,#5239cf);
}
.active .p-icon{
background-color:#32fecd;
box-shadow:0px 2px 12px rgba(0,0,0,0.3);
transition: all ease 0.5s;
}
.product-img{
left:-100000000px;
}
.active-product{
left:66%;
animation:slide 0.5s ;
}
.active .heading,.active .type{
opacity:1;
}
.active .p-icon i{
color:#0E0E0E;
}
@keyframes slide{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
6) Copy the JS code, which I give you below of this, and paste this code in the CSS which you create.
JavaScript
$(document).on('click','.box-1,.box-2,.box-3,.box-4',function(){
$(this).addClass('active').siblings().removeClass('active')
});
/*product-Img active*/
$(document).on('click','.box-1',function(){
$('.img1').addClass('active-product').siblings('.img3,.img2,.img4').removeClass('active-product')
});
$(document).on('click','.box-2',function(){
$('.img2').addClass('active-product').siblings('.img3,.img1,.img4').removeClass('active-product')
});
$(document).on('click','.box-3',function(){
$('.img3').addClass('active-product').siblings('.img1,.img2,.img4').removeClass('active-product')
});
$(document).on('click','.box-4',function(){
$('.img4').addClass('active-product').siblings('.img3,.img2,.img1').removeClass('active-product')
});
7) All Files link, Which I use in the project given below.
The Download Links Will Be Shown in 30 Seconds
Comments