HTML CSS Responsive Website Design

In the digital landscape we live in today, any individual or organization needs a responsive website design. Because nowadays more than half of the people in the world visit different websites or apps from mobile. So a web developer should create responsive website. This dynamic website design will help any website to adjust beautifully on small and large screens. Today in this blog we will create a Responsive Homepage Layout using HTML CSS with a video tutorial given below. To get a full idea about the snippet we recommend watching our channel's video tutorial.

Video Tutorial:

Hope you have watched the tutorial. Responsive web design is a method of creating a website that can be viewed and used effectively on a wide range of devices. Responsive web design has many beneficial aspects. Some of these are Improved user experience, Faster loading times, Competitive advantage, Better SEO rankings, Increased reach, and so on.

Our main focal point is the header section in this snippet. In this responsive website design, the header section contains a flexible navigation bar (nav) with evenly spaced elements. Within this section, the logo and main navigation are aligned to the left, and the signup link to the right. The CSS media query feature will help us turn the layout into a mobile responsive website. We have added media queries to the CSS code so that the header section looks good on different screen sizes. This media query will change the layout below 600px width. The logo will move to the top of the header and the main navigation will be smaller. The signup link button will hide and the banner text will become wider.

You May Also Like:

HTML CSS Responsive Website Design [ Source Code ]:

To create this responsive website design snippet, first, create an HTML and then a CSS file. Don't forget to link the files after creating them. Copy the code from the code box below and paste it into your file. After checking the code in your browser, if you find any error, download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <title>HTML CSS Responsive Website Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">    
</head>
<body>
    <div class="header">
        <nav>
            <div class="logo">TripSuggest</div>
            <div class="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">contact</a></li>
			    </ul>
            </div>
            <div class="socials">
                <a href="#">Signup</a>
            </div>
        </nav>
        <div class="banner-text">
            <h1>Explore Beautiful<br>places with us</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, repellat.</p>
            <button type="button">Learn More</button>
        </div>        
    </div>
    
</body>
</html>

ADD CSS:

body {
	margin: 0; 
	padding: 0;
	font-family: montserrat;
}
nav {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 100px;
	color: #fff;
    background: rgba(0,0,0,0.5);
}
.logo {
	font-size: 25px;
	color: #fff;
	padding: 0 15px;
}
.menu ul li {
	display: inline-block;
	margin: 0 15px;
}
.menu ul li a {
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	font-family: montserrat;
	color: #fff;
	padding: 5px 15px;
}
.menu ul li a:hover{
    background: green;
}
.socials a {
	text-decoration: none;
	background: green;
	color: #fff;
	padding: 10px 35px;
}
.header {
	height: 100vh;
	background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(2.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.banner-text {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 26%;
	transform: translate(-50%, -50%);
	text-align: left;
}
.banner-text h1 {
	font-size: 60px;
	margin: 0;
}
.banner-text p {
	margin: 15px 0 40px;
}
.banner-text button {
	background: green;
	border: none;
	outline: none;
	color: #fff;
	padding: 10px 30px;
	font-size: 20px;
	font-family: montserrat;
	display: inline-block;
}
@media (max-width: 1000px) {
	nav {
		flex-direction: column;
		align-items: flex;
	}
	.menu ul {
		padding: 0;
	}
	.menu ul li {
		margin: 0 15px 0 0;
	}
	.socials {
		margin-top: 25px;
	}
	.banner-text {
		left: 50%;
		text-align: center;
		width: 70%;
	}
    .banner-text h1 {
        font-size: 40px;
    }
}
@media (max-width: 600px) {
	.logo {
		margin-top: 0;
		font-size: 17px;
	}
	nav {
		padding: 15px;
	}
	.menu ul li a {
		font-size: 10px;
        padding: 5px;
	}
	.socials {
		display: none;
	}
	.banner-text {
		left: 50%;
		text-align: center;
		width: 80%;
	}
    .banner-text h1 {
        font-size: 18px;
    }
	.banner-text p {
		margin: 15px 0;
		font-size: 11px;
	}
    .banner-text button {
        font-size: 12px;
    }
}

In conclusion, HTML CSS Website Layout with responsive features in it is a worthwhile project, especially for those new to web development. You can also create a CSS responsive website by following the steps indicated in this blog post. We urge that you look around at the other incredible snippets on this website. If you love the content on this site, please share it with others. Thank you for visiting.

DOWNLOAD CODE

Video Tutorial:

HTML CSS Responsive Website Design [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

HTML CSS Responsive Website Design

Video Tutorial:

HTML CSS Responsive Website Design [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form