How To Make Smooth Scroll Website with Sliders Using HTML CSS
Smooth Scroll Website
Learn How To Make a Smooth Scroll Website with Sliders Using HTML And JavaScript. Easy Way To Create Smooth Scroll Website In HTML And Javascript.
In This Tutorial, You Will Learn How To Create a Fully Responsive Smooth Scroll Website with Responsive Sliders Using HTML CSS, And JavaScript. This Website Is Full Responsive And Easy To Understand For Users. If You Want To Create This Website Just Follow These Steps Which I Given Below.
How To Make Smooth Scroll Website with Sliders Using HTML CSS
- 0.0 - 1.30min: Intro
- 1.30 - 40.0min: How To Make Smooth Scroll Website with Sliders Using HTML CSS
About This Tutorial
In This Video Tutorial, I Will Teach You How To Make a Smooth Scroll Website with Sliders Using HTML CSS And JavaScript. It Is Very Easy To Make This Fully ResponsiveHow To Make Smooth Scroll Website with Sliders Using HTML CSS And JavaScript. In the First 120s, I Will Show You Website Design, Which I Will Create In This Tutorial. After I Will Create HTML, CSS, And Javascript Files And Put This Files In The Project Folder. After I Linked The CSS And Js File With HTML Using "Link" And "Script" Tags. After Linking The Files, I will Make Structure Of The Smooth Scroll Website Using HTML And Design This Structure Using CSS Style Sheet. I Hope You Like This Tutorial.
1) Open Your Text Editor Notepad++, Sublime, etc.
2) Create HTML, CSS, And Javascript Files And Put This Files In Your Project Folder Which You Create. I Recommended You To Create Separate Folders For CSS And JavaScript Files.
3) Link The CSS File With HTML File Using "Link" Tag.
4) Link The Js File With HTML Using "Script" Tag.
5) Copy The Website HTML Code Which I Given Below And Past In Your HTML File.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> W E B S I T E</title> <link rel="shortcut icon" href="images/brand.png"> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script type="text/javascript" src="js/JQuery3.3.1.js"></script> <script type="text/javascript" src="js/jquery.fullpage.js"></script> <link type="text/css" rel="stylesheet" href="css/lightslider.css" /> <script src="js/lightslider.js" type="text/javascript"></script> <!--using FontAwesome--> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> </head> <body> <div id="fullpage"> <!--section-1--------> <section> <!--navigation---------------------> <nav> <!--logo------------> <div class="logo">GT-Internet</div> <!--right-naviagtion-------------> <div class="r-nav"> <!--website design--------> <a href="#">Website Design</a> <!--sign-in--------> <button>Sign In</button> </div> </nav> <!--center-text----------------> <div class="text"> <!--earth-heading-----------> <div class="earth"> <span>E</span> <span>A</span> <span>R</span> <span>T</span> <span>H</span> </div> <!--planet-heading--> <h1>PLANET</h1> <!--button-------> <button>READ MORE</button> </div> <!--social-----------------> <div class="social"> <!--paragraph-----------> <p>Follow Me And Get Connect With Us.</p> <!--icons----------------> <div class="social-icon"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> </section> <!--section-2--------> <section> <!--heading-------------------------> <div class="explore-h"> <!--Explore-heading--> <h1>Explore The World</h1> <!--paragraph-----> <p>In This Video I am Gonna Show You How To Craete Website In This Video I am Gonna Show You How To Craete Website In This.</p> </div> <!--boxes-------> <div class="box-container"> <!--box-1---------------> <ul id="autoWidth" class="cs-hidden"> <li class="item-a"> <div class="box-1"> <p>LANDSPACE</p> </div> </li> <!--box-2---------------> <li class="item-b"> <div class="box-2"> <p>FANTASY</p> </div> </li> <!--box-3---------------> <li class="item-c"> <div class="box-3"> <p>MOUNTAINS</p> </div> </li> <!--box-4---------------> <li class="item-c"> <div class="box-4"> <p>MOUNTAINS</p> </div> </li> </ul> </div> <footer> <!--logo-------------> <div class="copyright">Copyright By Going To Internet 2020</div> <!--menu--------------> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">CONACT US</a></li> </ul> </footer> </section> <!--section-3 --------> </div> </body> </html>
6) Copy The Website CSS Code Which I Given Below And Past In Your CSS File.
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
}
a{
text-decoration:none;
}
ul{
list-style:none;
}
#fullpage{
height:100vh;
overflow: hidden;
}
#fullpage section{
height:100vh;
}
#fullpage section:nth-child(1){
background-image:url("../images/main5.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#fullpage section:nth-child(2){
background-color:#101113;
display: flex;
flex-direction:column;
align-items: center;
justify-content:space-between;
position: relative;
}
nav{
display: flex;
justify-content: space-between;
padding: 25px 50px;
}
.logo{
font-family: RoadTest;
font-size: 22px;
color: #FFFFFF;
}
.r-nav a{
font-family: calibri;
color: #FFFFFF;
font-size: 14px;
margin: 0px 20px;
text-decoration: none;
letter-spacing: 1px;
}
.r-nav button{
border: none;
outline: none;
width: 90px;
height: 35px;
border-radius: 10px;
color: #000000;
font-family: calibri;
font-weight: 700;
}
button:active{
transform: scale(1.1);
}
.text{
text-align: center;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%,-52%);
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.earth span{
font-family:calibri;
font-weight:600;
font-size: 25px;
padding: 3px 8px;
margin: 2px;
background-color:#FFFFFF;
color:#476e9a;
}
.earth{
display:flex;
}
.text h1{
font-family: calibri;
font-size: 70px;
color: #FFFFFF;
letter-spacing: 30px;
margin: 0px;
padding: 0px;
font-weight:200;
}
.text button{
width: 120px;
height: 40px;
outline: none;
background-color: transparent;
border: 1px solid #FFFFFF;
color: #FFFFFF;
font-size: 12px;
font-family: calibri;
margin-top: 25px;
}
.text button:hover{
background-color: #FFFFFF;
color:#000000;
font-weight: bold;
border: none;
transition: all ease 0.5s;
box-shadow: 2px 2px 12px rgba(0,0,0,0.1);
}
.social{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 25px;
text-align: center;
}
.social p{
font-family: calibri;
color:#e3e8eb;
font-size: 14px;
letter-spacing: 1px;
}
.social-icon {
display: flex;
justify-content: center;
}
.social-icon a{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #D3D7E1;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
margin: 0px 5px;
display: flex;
justify-content:center;
align-items: center;
}
.social-icon i{
color: #131313;
font-size: 12px;
}
.social-icon a:hover i{
color: #EBE9E9;
}
.social-icon a:hover{
background-color: #171717;
}
.explore-h{
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.explore-h h1{
font-family: bebas kai;
font-size: 28px;
letter-spacing:7px;
color: #FFFFFF;
text-align: center;
margin: 10% 0px 0px 0px;
}
.explore-h p{
color: #C7C7C7;
font-family: calibri;
letter-spacing: 1px;
width: 70%;
font-size: 12px;
text-align: center;
}
.box-1,.box-2,.box-3,.box-4{
width: 250px;
height: 320px;
background-color: #1A1A1A;
margin:10px;
}
.box-container{
display: flex;
justify-content: center;
}
.box-1,.box-2,.box-3,.box-4{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px;
position: relative;
}
.box-1 p,.box-2 p,.box-3 p,.box-4 p{
position:absolute;
bottom: 0px;
font-size: 14px;
color: #B4B4B4;
font-family: calibri;
letter-spacing: 5px;
width: 100%;
text-align: center;
}
.box-1{
background-image: url("../images/2.png");
}
.box-2{
background-image: url("../images/3.png");
}
.box-3{
background-image: url("../images/4.png");
}
.box-4{
background-image: url("../images/5.jpg");
}
footer{
width: 100%;
height:auto;
display: flex;
width: 100%;
justify-content: center;
background-color:#000000;
display: flex;
justify-content: center;
align-items: center;
padding:20px;
}
.copyright{
font-family:calibri;
font-size: 12px;
color:#C7C4C4;
border-right: 1px solid #FFFFFF;
padding-right: 20px;
letter-spacing: 1px;
}
footer ul{
display: flex;
list-style: none;
margin: 0px 0px 0px 10px;
padding: 0px;
}
footer ul li a{
padding:10px 20px;
color: #FFFFFF;
text-decoration: none;
font-family:calibri;
font-size: 12px;
letter-spacing: 2px;
}
footer ul li a:hover{
background-color: rgba(255,255,255,1);
box-shadow: 2px 2px 12px rgba(0,0,0,0.5);
color:#171717;
transition: all ease 0.5s;
}
@media(max-width:1250px){
.box-container{
width:100%;
padding: 10px;
}
}
@media(max-width:1110px){
.lSAction > a {
display:block !important;
}
}
@media(max-width:780px){
nav{
padding:15px 20px;
}
.r-nav a{
display: none;
}
.text h1{
font-size: 50px;
letter-spacing: 20px;
}
footer{
flex-direction: column;
width:100%;
padding:20px 0px;
}
.copyright{
border: none;
border-bottom: 1px solid #FFFFFF;
padding: 5px 2px;
margin: 5px 5px 20px 5px;
}
footer ul{
flex-wrap: wrap;
justify-content: center;
}
}
7) Copy The Website Js Code Which I Given Below And Past In Your JS File.
JavaScript
//for scroll
$('#fullpage').fullpage();
//for Slider
$(document).ready(function() {
$('#autoWidth').lightSlider({
autoWidth:true,
loop:true,
onSliderLoad: function() {
$('#autoWidth').removeClass('cS-hidden');
}
});
});
8) Download The Website Source Code, Link Given Below.
9) After Doing All Steps, Open HTML File(Index.html) And Enjoy This Awesome Smooth Scroll Website.
The Download Links Will Be Shown in 30 Seconds
Comments