Responsive Website Landing Page | With Full-Screen Draggable Image Slider - Html, Css & Js | Coding Snow | Creative Web Design Tutorials

Description

In this video, you will learn how to design a website landing page with a modern draggable image slider with thumbs view using HTML, CSS, and Javascript.

Clear Coding
Easy to Follow
Responsive
Draggable Image Slider With Thumbs View
Reveal Element On Sliding
Sticky Navigation Menu (Glassmorphism)
Popup Navigation Menu (Mobile View)
Customized Scrollbar

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Website Landing Page With Full Screen Draggable Image Slider - Html, Css & Javascript</title>
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>

<header>
    <div class="nav-bar">
      <a href="" class="logo">Logo</a>
      <div class="navigation">
        <div class="nav-items">
          <i class="uil uil-times nav-close-btn"></i>
          <a href="#"><i class="uil uil-home"></i> Home</a>
          <a href="#"><i class="uil uil-compass"></i> Explore</a>
          <a href="#"><i class="uil uil-info-circle"></i> About</a>
          <a href="#"><i class="uil uil-document-layout-left"></i> Blog</a>
          <a href="#"><i class="uil uil-envelope"></i> Contact</a>
        </div>
      </div>
      <i class="uil uil-apps nav-menu-btn"></i>
    </div>
  </header>

<div class="swiper bg-slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="images/bg1.jpg" alt="">
          <div class="text-content">
            <h2 class="title">Autumn <span>Season</span></h2>
            <p>Autumn, also known as fall in North American English, is one of the four temperate
            seasons. Outside the tropics, autumn marks the transition from summer to winter,
            in September or March. Autumn is the season when the duration of daylight becomes
            noticeably shorter and the temperature cools considerably.</p>
            <button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
          </div>
        </div>
        <div class="swiper-slide dark-layer">
          <img src="images/bg2.jpg" alt="">
          <div class="text-content">
            <h2 class="title">Winter <span>Season</span></h2>
            <p>Winter is the coldest season of the year in polar and temperate zones. It occurs
            between autumn and spring.The tilt of Earth's axis causes seasons; winter occurs
            when a hemisphere is oriented away from the Sun. Different cultures define different
            dates as the start of winter, and some use a definition based on weather.</p>
            <button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
          </div>
        </div>
        <div class="swiper-slide dark-layer">
          <img src="images/bg3.jpg" alt="">
          <div class="text-content">
            <h2 class="title">Summer <span>Season</span></h2>
            <p>Summer is the hottest of the four temperate seasons, occurring after spring and
            before autumn. At or aroundthe summer solstice, the earliest sunrise and latest
            sunset occurs, daylight hours are longest and dark hours are shortest, with day
            length decreasing as the season progresses after the solstice.</p>
            <button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="images/bg4.jpg" alt="">
          <div class="text-content">
            <h2 class="title">Spring <span>Season</span></h2>
            <p>Spring, also known as springtime, is one of the four temperate seasons, succeeding
            winter and preceding summer. There are various technical definitions of spring, but
            local usage of the term varies according to local climate, cultures and customs. When
            it is spring in the Northern Hemisphere, it is autumn in the Southern Hemisphere and
            vice versa.</p>
            <button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="bg-slider-thumbs">
      <div class="swiper-wrapper thumbs-container">
        <img src="images/bg1.jpg" class="swiper-slide" alt="">
        <img src="images/bg2.jpg" class="swiper-slide" alt="">
        <img src="images/bg3.jpg" class="swiper-slide" alt="">
        <img src="images/bg4.jpg" class="swiper-slide" alt="">
      </div>
    </div>
  </section>

<section class="about section">
    <h2>Seasons of the year</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

</body>
</html>

style.css

/*============ Google fonts ============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*======= CSS variables =======*/
:root{
  --white-color: #fff;
  --dark-color: #222;
  --body-bg-color: #fff;
  --section-bg-color: #202834;
  --navigation-item-hover-color: #3b5378;

--text-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  --box-shadow: 0 5px 25px rgb(0 0 0 / 20%);

--scroll-bar-color: #fff;
  --scroll-thumb-color: #282f4e;
  --scroll-thumb-hover-color: #454f6b;
}

/*======= Scroll bar =======*/
::-webkit-scrollbar{
  width: 11px;
  background: var(--scroll-bar-color);
}

::-webkit-scrollbar-thumb{
  width: 100%;
  background: var(--scroll-thumb-color);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover{
  background: var(--scroll-thumb-hover-color);
}

/*======= Main CSS =======*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  background: var(--body-bg-color);
}

section{
  position: relative;
}

.section{
  color: var(--white-color);
  background: var(--section-bg-color);
  padding: 35px 200px;
  transition: 0.3s ease;
}

/*======= Header =======*/
header{
  z-index: 999;
  position: fixed;
  width: 100%;
  height: calc(5rem + 1rem);
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  transition: 0.5s ease;
  transition-property: height, background;
}

header.sticky{
  height: calc(2.5rem + 1rem);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header .nav-bar{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 200px;
  transition: 0.3s ease;
}

.nav-close-btn, .nav-menu-btn{
  display: none;
}

.nav-bar .logo{
  color: var(--white-color);
  font-size: 1.8em;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: var(--text-shadow);
}

.navigation .nav-items a{
  color: var(--white-color);
  font-size: 1em;
  text-decoration: none;
  text-shadow: var(--text-shadow);
}

.navigation .nav-items a i{
  display: none;
}

.navigation .nav-items a:not(:last-child){
  margin-right: 45px;
}

/*======= Home =======*/
.home{
  min-height: 100vh;
}

.home:before{
  z-index: 888;
  content: '';
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
  left: 0;
  background: linear-gradient(transparent, var(--section-bg-color));
}

/*======= Background slider =======*/
.bg-slider{
  z-index: 777;
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.bg-slider .swiper-slide{
  position: relative;
  width: 100%;
  height: 100vh;
}

.bg-slider .swiper-slide img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.swiper-slide .text-content{
  position: absolute;
  top: 25%;
  color: var(--white-color);
  margin: 0 200px;
  transition: 0.3s ease;
}

.swiper-slide .text-content .title{
  font-size: 4em;
  font-weight: 700;
  text-shadow: var(--text-shadow);
  margin-bottom: 20px;
  transform: translateY(-50px);
  opacity: 0;
}

.swiper-slide-active .text-content .title{
  transform: translateY(0);
  opacity: 1;
  transition: 1s ease;
  transition-delay: 0.3s;
  transition-property: transform, opacity;
}

.swiper-slide .text-content .title span{
  font-size: 0.3em;
  font-weight: 300;
}

.swiper-slide .text-content p{
  max-width: 700px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  text-shadow: var(--text-shadow);
  padding: 20px;
  border-radius: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--box-shadow);
  transform: translateX(-80px);
  opacity: 0;
}

.swiper-slide-active .text-content p{
  transform: translateX(0);
  opacity: 1;
  transition: 1s ease;
  transition-delay: 0.3s;
  transition-property: transform, opacity;
}

.swiper-slide .text-content .read-btn{
  border: none;
  outline: none;
  background: var(--white-color);
  color: var(--dark-color);
  font-size: 1em;
  font-weight: 500;
  padding: 8px 25px;
  display: flex;
  align-items: center;
  margin-top: 40px;
  border-radius: 10px;
  cursor: pointer;
  transform: translateX(50px);
  opacity: 0;
}

.swiper-slide-active .text-content .read-btn{
  transform: translateX(0);
  opacity: 1;
  transition: 1s ease;
  transition-delay: 0.3s;
  transition-property: transform, opacity;
}

.swiper-slide .text-content .read-btn i{
  font-size: 1.6em;
  transition: 0.3s ease;
}

.swiper-slide .text-content .read-btn:hover i{
  transform: translateX(5px);
}

.dark-layer:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
}

.bg-slider-thumbs{
  z-index: 777;
  position: absolute;
  bottom: 7em;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.3s ease;
}

.thumbs-container{
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 10px 3px;
  border-radius: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--box-shadow);
}

.thumbs-container img{
  width: 50px;
  height: 35px;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
}

.swiper-slide-thumb-active{
  border: 1px solid var(--white-color);
}

/*======= Media icons =======*/
.media-icons{
  z-index: 999;
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 90px;
}

.media-icons a{
  color: var(--white-color);
  font-size: 1.7em;
  margin: 10px 0;
}

/*======= About section =======*/
.about h2{
  font-size: 3em;
  font-weight: 600;
}

.about p{
  margin: 25px 0;
}

/*======= Media queries (max-width: 1100px) =======*/
@media screen and (max-width: 1100px){
  header .nav-bar{
    padding: 0 50px;
  }

.section{
    padding: 25px 50px;
  }

.media-icons{
    right: 0;
    margin-right: 50px;
  }

.swiper-slide .text-content{
    margin: 0 120px 0 50px;
  }

.bg-slider-thumbs{
    bottom: 3em;
  }
}

/*======= Media queries (max-width: 785px) =======*/
@media screen and (max-width: 785px){
  header .nav-bar{
    padding: 25px 20px;
  }

.section{
    padding: 25px 20px;
  }

.media-icons{
    margin-right: 20px;
  }

.media-icons a{
    font-size: 1.5em;
  }

.swiper-slide .text-content{
    margin: 0 70px 0 20px;
  }

.swiper-slide .text-content .title{
    font-size: 3em;
  }

.swiper-slide .text-content .title span{
    font-size: 0.35em;
  }

.swiper-slide .text-content p{
    font-size: 0.9em;
  }

/*======= Navigation menu =======*/
  .nav-menu-btn{
    display: block;
    color: var(--white-color);
    font-size: 1.5em;
    cursor: pointer;
  }

.nav-close-btn{
    display: block;
    color: var(--dark-color);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.3em;
    margin: 10px;
    cursor: pointer;
    transition: 0.3s ease;
  }

.navigation{
    z-index: 99999;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease;
  }

.navigation.active{
    visibility: visible;
    opacity: 1;
  }

.navigation .nav-items{
    position: relative;
    background: var(--white-color);
    width: 400px;
    max-width: 400px;
    display: grid;
    place-content: center;
    margin: 20px;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--box-shadow);
    transform: translateY(-200px);
    transition: 0.3s ease;
  }

.navigation.active .nav-items{
    transform: translateY(0);
  }

.navigation .nav-items a{
    color: var(--dark-color);
    font-size: 1em;
    margin: 15px 50px;
    transition: 0.3s ease;
  }

.navigation .nav-items a:hover{
    color: var(--navigation-item-hover-color);
  }

.navigation .nav-items > a > i{
    display: inline-block;
    font-size: 1.3em;
    margin-right: 5px;
  }

.swiper-slide .text-content .read-btn{
    font-size: 0.9em;
    padding: 5px 15px;
  }

/*======= About section =======*/
  .about h2{
    font-size: 2.5em;
  }

.about p{
    font-size: 0.9em;
  }
}

Download Files Setup With Images

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

MiloMarch 5, 2022 at 9:30 AM
What software are you using to create this website?
AnonymousMay 3, 2022 at 4:53 AM
what a fantasitic design!!!
AnonymousJune 6, 2022 at 2:10 PM
Looking nice.,., wish we have coding challenge every week Coding Snow ...
in order we sharpen our skills in programming …
can i share my email if you don't mind coding snow?
evansmogeni254@mail.com
AnonymousAugust 4, 2022 at 6:47 AM
How do you make the slider automatic
AnonymousAugust 4, 2022 at 6:48 AM
How do you make the slider automatic
AnonymousJanuary 14, 2023 at 2:10 PM
swiper-bundle Not working
AnonymousApril 29, 2023 at 1:37 AM
Is java script used in this?
anonymous hackerMarch 21, 2024 at 6:04 AM
fantastic yo!

Tuesday, February 8, 2022

Responsive Website Landing Page | With Full-Screen Draggable Image Slider - Html, Css & Js

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Tuesday, February 8, 2022

Responsive Website Landing Page | With Full-Screen Draggable Image Slider - Html, Css & Js

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form