Responsive Animated Web Layout CSS

Responsive Animated Web Layout CSS

If you want your website to look beautiful and flawless across all devices, responsive web design is a must. Keeping this in mind, developers always try to make their websites responsive using all the techniques of CSS. Also, if they can add some animation to the homepage, it can add an extra layer to the web design process. With this in mind, we created an animated responsive website layout for this project. Below you can watch the full video tutorial of this project where we have shown the entire process of making this snippet.

Video tutorial:

A significant portion of web traffic to websites these days comes from smartphones. Visiting a non-responsive website causes a lot of inconvenience to a visitor. Such websites are of clunky type due to which the navigation system is very poor. So the contribution of responsive web design to get SEO benefits and improved user experience is undeniable. Besides, adding some animations to the homepage of the website makes the web layout more attractive. A website's homepage is the entry point to that website. A visit to this segment of the website gives an idea of what the site has to offer. It is important to present the elements of this section nicely. An animated homepage is eye-catching and can grab the attention of visitors.

Our snippet today is a homepage design. It includes a navigation bar, banner text, a call-to-action button, and an animated image. A gradient color is used as the homepage background. Each nav item has a hover effect. CSS media queries were used to make the web layout responsive which you can understand by watching the video tutorial above.

You May Also Like:

Responsive Animated Web Layout CSS [ Source Code ]:

Create an HTML and a CSS file to create today's responsive web design layout Then copy and paste the following code. If you get any error after checking the code then download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>Responsive Web Layout using HTML CSS</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="header"> 
        <nav>
            <div class="logo"><img src="logo.png" alt=""></div>
            <div class="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">contact</a></li>
			    </ul>
            </div>
        </nav>
        <div class="banner"> 
            <div class="banner-text">
                <h1>Corporate Business <span>We Are Here to Help</span></h1>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, repellat.</p>
		<!-- lorem10 -->
		<button type="button">Learn More</button>
            </div>
            <div class="banner-img">
                <img src="img1.png" alt="">
            </div>
        </div>        
    </div>
</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    list-style: none;
    text-decoration: none;
	font-family: "Montserrat", sans-serif;
}
.header {
	background: linear-gradient(135deg,#7761cd 15%,#32297d 55%);
	min-height: 100vh;
	min-height: 100dvh;
}
:root{
	--white: #fff;
	--blue: #02a9de;
}
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 100px;
}
.logo {	
	padding: 0 15px;
}
.menu ul li {
	display: inline-block;
	margin: 0 10px;
}
.menu ul li a {
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--white);
	padding: 5px 15px;
	transition: all 0.6s;
}
.menu ul li a:hover{
    background: var(--blue);
	border-radius: 50px;
	color: var(--white);
}
.banner {
	padding: 0 10%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: var(--white);

}
.banner h1 {
	font-size: 50px;
	margin: 0;
}
.banner h1 span {
	display: block;
	color: var(--white);
	font-size: 40px;
	font-weight: 500;
	margin: 10px 0;
}
.banner p {
	margin: 15px 0 40px;
}
.banner button {
	background: var(--blue);
	border: none;
	outline: none;
	color: var(--white);
	padding: 10px 30px;
	font-size: 20px;
	display: inline-block;
	border: 1px solid transparent;
	transition: all .6s;
	border-radius: 50px;
}
.banner button:hover{
    transform: translateY(-6px);
    border: 1px solid var(--white);
    background: transparent;
	color: var(--white);
	font-weight: 700;
	cursor: pointer;
}
.banner-img img{
	animation: animate 2s infinite;
}

@keyframes animate{
	0%, 100%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-6px);
	}
}
@media (max-width: 1000px) {
	nav {
		flex-direction: column;
		align-items: flex;
	}
	.menu ul {
		padding: 0;
	}
	.menu ul li {
		margin: 0 15px 0 0;
	}
	.banner {
		display: flex;
		flex-direction: column;
		text-align: center;
		height: auto;
	}
    .banner h1 {
        font-size: 40px;
    }
	.banner-text {
		margin-top: 15%;
	}
}

@media (max-width: 600px) {
	.logo {
		margin-top: 0;
	}
	nav {
		padding: 15px;
	}
	.menu ul li a {
		font-size: 10px;
        padding: 5px;
	}
	.banner {
		text-align: center;
		height: auto;
	}
	.banner img {
		width: 100%;	
	}
    .banner h1 {
        font-size: 18px;
    }
    .banner h1 span {
        font-size: 18px;
    }
	.banner p {
		margin: 15px 0;
		font-size: 11px;
	}
    .banner button {
        font-size: 12px;
    }
	.banner-text {
		margin-top: 15%;
	}
}

Responsive web design is a high priority in today's web landscape. If you can't provide a smooth experience for visitors, it becomes difficult to retain them. Also, tech giant Google puts responsive websites at the top of its priority list. We Hope you have collected the snippet. Click the load button on our homepage to get more such snippets. Thanks for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box