Responsive Web Layout with CSS Slider

RWD or Responsive Web Design is a method of modern web design by which a static website can be rendered well on different screens or windows or devices. This is a technique that ensures a smooth and optimal viewing experience of a website. A responsive website is as easy to read and navigate on small devices as it is to access on larger devices. In today's blog post, we will create a responsive homepage layout and use an animated CSS slider as background. The video tutorial below shows the process of creating this snippet from start to finish. Hope you will watch the whole video and help us to increase the engagement rate of the video. Subscribe if you find our channel content useful.

Video Tutorial:

We hope you watched the video tutorial about Responsive Layout with CSS Slider. Some key principles of responsive web design are fluid grids, flexible images, and media queries. For higher engagement and satisfaction of a website, the website must be responsive. Also, the SEO benefit is an important factor as Google only promotes sites that are responsive. Responsive websites are affordable. Suppose you have to create two separate versions of your website for mobile and desktop versions. It will cost more and it will be difficult for you to maintain two versions simultaneously. Also, your responsive website will be future-proof because no matter how many different screen size devices come in the future, your website will easily adapt to them.

Today's snippet is a responsive homepage design. We know that the homepage is an introduction page or the main page of a website. Because this page is the page that visitors see when they navigate to a website's domain. An impressive homepage can not only attract visitors but also entice them to explore further. Also, a good homepage establishes credibility and trust among users. Our homepage design includes a logo, a navbar, header text, and a call-to-action button. An animated CSS slider is used in the background which enhances the beauty of the snippet. This slider animates the slider images individually using CSS scale and opacity. Explaining the entire code would make this blog post too long. So we recommend you to watch the full video tutorial above. This will clear your confusion.

You May Also Like:

Responsive web Layout with CSS Slider [ Source Code ]:

To create today's responsive web design layouts with CSS sliders, first create an HTML and CSS file. Then copy the code from the code box below and paste it into your file. If you have any problems after testing it in your browser, download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
     <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Website Design with css slider</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="navbar">
        <div class="logo">AdVex</div> 
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Faq</a>
            <a href="#">Contact</a>
        </nav>
    </div>

    <div class="header-text">
        <div class="text-content">
            <h3>Discover the World</h3>
            <h1>New adventure</span></h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse modi deleniti doloremque tempora delectus aperiam?</p>
        <a href="#">Learn More</a>
        </div>
    </div>

    <ul class="slides">
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ul>
</body>
</html>

ADD CSS:

* {
	font-family: montserrat;
	margin: 0;
	padding: 0;
	color: #fff;
}
.navbar {
	background-color: transparent;
	overflow: hidden;
	position: fixed;
	top: 0;
	padding: 0 100px;
	width: 88%;
	z-index: 9999;
	display: flex;
	justify-content: space-between;
}
.navbar a {
	float: left;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
.navbar .logo {
	float: left;
	margin-right: 20px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.8;
}
.navbar a:hover {
	background-color: #fff;
	color: #202020;
}
.header-text {
	background: rgba(0, 0, 0, 0.3);
	text-align: center;
	display: grid;
	place-items: center;
	height: 100vh;
	position: relative;
	z-index: 9998;
}
.text-content h1 {
	font-size: 80px;
	text-transform: uppercase;
}
.text-content p {
	width: 75%;
	margin: auto;
	line-height: 1.9;
}
.text-content a {
	background: #fff;
	display: inline-block;
	text-decoration: none;
	padding: 10px 30px;
	color: #202020;
	margin-top: 30px;
	border-radius: 50px;
	transition: all 0.5s ease;
}
.text-content a:hover {
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
}
.slides {
	list-style: none;
	margin-top: 0;
}
.slides, .slides:after {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
}
.slides li span {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: 0;
	animation: animate 25s linear infinite 0s;
}
.slides li:nth-child(1) span {
	background-image: url(img/a1.jpg);
}
.slides li:nth-child(2) span {
	background-image: url(img/a2.jpg);
	animation-delay: 5s;
}
.slides li:nth-child(3) span {
	background-image: url(img/a3.jpg);
	animation-delay: 10s;
}
.slides li:nth-child(4) span {
	background-image: url(img/a4.jpg);
	animation-delay: 15s;
}
.slides li:nth-child(5) span {
	background-image: url(img/a5.jpg);
	animation-delay: 20s;
}
.slides li:nth-child(6) span {
	background-image: url(img/a6.jpg);
	animation-delay: 25s;
}
@keyframes animate {
	0% {
		opacity: 0;
	}
	8% {
		opacity: 1;
		transform: scale(1.05);
	}
	17% {
		opacity: 1;
		transform: scale(1.1);
	}
	25% {
		opacity: 0;
		transform: scale(1.1);
	}
	100% {
		opacity: 0;
	}
}
@media (max-width: 800px) {
	.navbar .logo {
		float: none;
		margin-right: 0;
		font-size: 35px;
	}
	.navbar {
		flex-direction: column;
		width: 100%;
		padding: 0;
		align-items: center;
	}
	.navbar a {
		font-size: 18px;
		padding: 5px 25px;
	}
	nav {
		margin-top: 20px;
	}
	.text-content h1 {
		font-size: 45px;
	}
}
@media (max-width: 500px) {
	.navbar a {
		font-size: 15px;
		padding: 8px 12px;
	}
	.text-content h3 {
		margin-bottom: 10px;
	}
	.text-content h1 {
		font-size: 28px;
	}
	.text-content p {
		width: 100%;
		margin: 15px auto;
		line-height: 1.5;
		font-size: 12px;
	}
	.text-content a {
		padding: 5px 15px;
		margin-top: 0px;
		font-size: 14px;
	}
}

We hope this snippet works for you. Keeping today's modern users in mind, it is a developer's responsibility to make a website responsive, user-friendly, and visually appealing. Our snippet today is a small example of that. Click the Load More button on our homepage to get more code snippets like this. Please share this blog post with like-minded people. Thank you very much for visiting the website.

DOWNLOAD CODE

Video Tutorial:

Responsive web Layout with CSS Slider [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Web Layout with CSS Slider

Video Tutorial:

Responsive web Layout with CSS Slider [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form