How to Create responsive Homepage using html css

The homepage is an essential part of any webpage, and it is the gateway to the website. It welcomes visitors and requests them to explore more web pages. This particular section tells the visitor what to do next and what to study on the webpage. For this reason, a website homepage needs to be neat and attractive. Designers have to focus on factors like typography, functionality, simplicity, etc. while designing a website. In this program, I will create a simple-looking homepage using only HTML and CSS. This snippet is for beginners trying to make a homepage independently and with no idea how to start. I have shared some HTML CSS-related snippets before. Check out those snippets if you want. We regularly publish similar types of videos on Our YouTube Channel. If you find the videos helpful, you can subscribe to our channel.

In this project, I will create an ordinary-looking responsive homepage with the help of HTML and CSS. In the end, I used CSS media queries to make the project looks responsive. If you have learned a bit of HTML and CSS, this snippet will be easier for you to understand. I used Poppins, and you can easily integrate other google fonts in your project and use that for this project.

Let's start with the HTML section of this project. First, I have taken a header tag. Inside that header tag, I have taken a div named 'wrapper.' this 'wrapper' div element will be a container of the project's navbar. After that, I have taken another div called 'logo.' inside that div element, I placed the logo's png image. Now it is not necessary to use an image as a logo. You can use any text instead of the png logo image. Later I took an unordered list with the name of 'nav-area.' inside the 'nav-area' div element, I took five nav elements. After the navbar markup, I took another div named 'welcome-text' where I placed a random text as a banner text and a call-to-action button. That's all for the HTML markup. For this snippet, I will suggest you follow the tutorial below.

I hope you have watched the entire video and have some idea about the coding used here.

You may also like:

Bubble effect using only HTML and CSS

Responsive Pricing Table Design

Animated Background with Pure CSS and Html

I am moving on to the CSS part of this project. Let us eliminate the unwanted margin and padding by providing the margin padding to zero to the universal selector. I took a width of 1170px for the 'wrapper class' and a margin of 'auto.' this will align the navbar perfectly at the center. After that, I gave a background image to the header with a black color overlay. Later I gave a height of 100vh and relative position to the header. after that, I applied some simple techniques to take the logo to the left and properly position the navbar to the project's top right side. for positioning the banner text, i gave the 'welcome-text' div a height of 600px and a width of 300px. I gave this div an absolute position value, and using the margin value; I took the banner text to the middle of the webpage. The rest of the styling is self-explanatory, and without explaining further, I am providing you the code to do some experiment for yourself.

For making the snippet responsive, I have changed some values in the CSS media queries so that we can have a nice responsive look for small devices.

Responsive homepage using Html and CSS (Source Code)

For this snippet, you need to create two files. One of them is HTML, and the other one is CSS. after linking the CSS file to your HTML file, copy and paste the code below to the respective file.

HTML

<!DOCTYPE html>
<!--Code by Divinector (www.divinectorweb.com)-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How to Create responsive Homepage</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">    
</head>
<body>
    <header>
    <div class="wrapper">
        <div class="logo">
            <img src="https://i.postimg.cc/mg4rWBmv/logo.png" alt="">
        </div>
<ul class="nav-area">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="welcome-text">
        <h1>
We are <span>Creative</span></h1>
<a href="#">Contact US</a>
    </div>
</header>

</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Poppins', sans-serif;
}
.wrapper {
	width: 1170px;
	margin: auto;
}
header {
	background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://i.postimg.cc/YjcJg24M/aa.jpg);
	height: 100vh;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	position: relative;
}
.nav-area {
	float: right;
	list-style: none;
	margin-top: 30px;
}
.nav-area li {
	display: inline-block;
}
.nav-area li a {
	color: #fff;
	text-decoration: none;
	padding: 5px 20px;
	font-family: poppins;
	font-size: 16px;
	text-transform: uppercase;
}
.nav-area li a:hover {
	background: #fff;
	color: #333;
}
.logo {
	float: left;
}
.logo img {
	width: 100%;
	padding: 15px 0;
}
.welcome-text {
	position: absolute;
	width: 600px;
	height: 300px;
	margin: 20% 30%;
	text-align: center;
}
.welcome-text h1 {
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	font-size: 60px;
}
.welcome-text h1 span {
	color: #00fecb;
}
.welcome-text a {
	border: 1px solid #fff;
	padding: 10px 25px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	margin-top: 20px;
	display: inline-block;
	color: #fff;
}
.welcome-text a:hover {
	background: #fff;
	color: #333;
}
/*resposive*/

@media (max-width:600px) {
	.wrapper {
		width: 100%;
	}
	.logo {
		float: none;
		width: 50%;
		text-align: center;
		margin: auto;
	}
	img {
		width: ;
	}
	.nav-area {
		float: none;
		margin-top: 0;
	}
	.nav-area li a {
		padding: 5px;
		font-size: 11px;
	}
	.nav-area {
		text-align: center;
	}
	.welcome-text {
		width: 100%;
		height: auto;
		margin: 30% 0;
	}
	.welcome-text h1 {
		font-size: 30px;
	}
}

I hope this simple snippet helped you. Please follow my social media profiles and subscribe to the divinector youtube channel so that you can stay connected with this blog. Thank you for stopping by, and keep coming.

5 Comments

Post a Comment

About Us

Contact Form

How to Create responsive Homepage using html css

You might like

5 Comments

Post a Comment

Contact Form