How to Create a Simple Website Layout using HTML CSS

Hello Friends, in this blog, we will learn how to create a simple responsive website layout using HTML and CSS flexbox. now, what is CSS flexbox? CSS flexbox is a CSS property that helps to organize and align all the elements inside a wrapper. It is a css3 web layout model and is most frequently used by developers nowadays. I have shared many CSS animation examples, bootstrap, JavaScript, and HTML CSS-related snippets before in this blog. please make sure to check those as well apart from this one. For better understanding, I will suggest you follow the tutorial below and then come back to get the source code of this project.

I hope you have watched the video and understand the basic coding behind the project. In the tutorial, I haven't included the responsive part. I have tried to make the layout responsive later and included the code here for your convenience.

In this project, I have created a div named 'menu area and placed the logo and nav items there. In the logo part, I used simple text as the logo. You can use a png logo icon here. For the navbar, I have taken an unordered list with the name of 'nav' and created five nav items. I also linked the ids of the following section with the anchor tags so that when we click on a particular nav item, it will scroll to that section.

You may also like:

I have created five different sections [home, about, portfolio, services, contact] with a similar pattern. Each section contains a content box with a header tag and a p tag with some random text inside in it. For styling the whole project, I have used flex properties and values to style all the elements used in the HTML markup. You will see how CSS flexbox helps us reduced the code and, we make a simple webpage with a little bit of code. In the responsive media query part, I have made some changes in values so that the layout looks okay for the smaller devices. You can experiment more with the code you get and make it even prettier than it looks. I am providing the source code below so that you can play around with the code by yourself.

Create a Simple Website Layout using HTML CSS [ Source Code ]:

For making the website layout, you need to create two files. One is the HTML file with .html extension and, the other is the CSS file with .css extension. After that, add the external CSS in the HTML file. Please copy the code below from the code box and paste them into your files and save them. Now open the file in the browser and see how it looks. If it doesn't work then, double-check the code.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>How to Create a Simple Website Layout using HTML CSS</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="menu-area">
		<a class="logo" href="#">company name</a>
		<ul class="nav">
			<li>
				<a href="#home">Home</a>
			</li>
			<li>
				<a href="#about">About</a>
			</li>
			<li>
				<a href="#portfolio">Portfolio</a>
			</li>
			<li>
				<a href="#services">Service</a>
			</li>
			<li>
				<a href="#contact">Contact</a>
			</li>
		</ul>
	</div>
	<section id="home">
		<div class="content">
			<h1>Creative Design</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, aperiam, amet. Fugiat voluptates, cupiditate recusandae.</p>
		</div>
	</section>
	<section id="about">
		<div class="content">
			<h1>About Section</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid atque commodi dolor est nobis veniam! Eius rerum, unde. Accusamus corporis esse eveniet exercitationem fugiat harum pariatur sequi similique tenetur vitae. Aliquam amet est excepturi, exercitationem facere fugit ipsa laborum molestiae nemo officiis placeat quos repellat saepe temporibus voluptatum.</p>
		</div>
	</section>
	<section id="portfolio">
		<div class="content">
			<h1>Portfolio Section</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid atque commodi dolor est nobis veniam! Eius rerum, unde. Accusamus corporis esse eveniet exercitationem fugiat harum pariatur sequi similique tenetur vitae. Aliquam amet est excepturi, exercitationem facere fugit ipsa laborum molestiae nemo officiis placeat quos repellat saepe temporibus voluptatum.</p>
		</div>
	</section>
	<section id="services">
		<div class="content">
			<h1>Services Section</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid atque commodi dolor est nobis veniam! Eius rerum, unde. Accusamus corporis esse eveniet exercitationem fugiat harum pariatur sequi similique tenetur vitae. Aliquam amet est excepturi, exercitationem facere fugit ipsa laborum molestiae nemo officiis placeat quos repellat saepe temporibus voluptatum.</p>
		</div>
	</section>
	<section id="contact">
		<div class="content">
			<h1>Contact Section</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid atque commodi dolor est nobis veniam! Eius rerum, unde. Accusamus corporis esse eveniet exercitationem fugiat harum pariatur sequi similique tenetur vitae. Aliquam amet est excepturi, exercitationem facere fugit ipsa laborum molestiae nemo officiis placeat quos repellat saepe temporibus voluptatum.</p>
		</div>
	</section>
</body>
</html>

ADD CSS:

html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	padding: 0;
	font-family: montserrat;
}
.menu-area {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	background-color: rgba(224, 228, 231, 0.2);
	width: 100%;
	height: 70px;
	z-index: 1;
}
.nav {
	display: flex;
	justify-content: right;
	list-style: none;
	margin-right: 15%;
}
.logo {
	flex: 1 1 auto;
	margin-left: 10%;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 25px;
}
a {
	margin: 15px;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
}
a:hover {
	color: #000;
}
#home {
	position: relative;
	background-image: url(https://i.postimg.cc/DzFp9dCD/1.jpg);
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	text-align: center;
}
#home .content {
	width: 100%;
}
#home .content h1 {
	font-size: 60px;
	margin: 10px 0;
	color: #fff;
}
#home .content p {
	width: 50%;
	margin: auto;
	line-height: 1.6;
	color: #fff;
}
#about, #portfolio, #services, #contact {
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
	height: 100vh;
}
.content {
	width: 80%;
	height: 100%;
	padding: 15% 0;
}
.content h1 {
	font-size: 30px;
	text-transform: uppercase;
}
.content p {
	font-size: 24px;
	line-height: 50px;
}
@media (max-width: 800px) {
	.logo {
		text-align: center;
	}
	.nav {
		margin: 0;
		padding: 0;
	}
	.nav a {
		font-size: 10px;
		margin: 10px;
	}
	#home .content h1 {
		font-size: 30px;
	}
	#home .content p {
		width: 90%;
		font-size: 16px;
	}
	.content {
		padding: 50% 0;
	}
	#about, #portfolio, #services, #contact {
		flex-direction: column;
		padding: 180px 0;
	}
	#portfolio .content {
		padding: 96px 0;
	}
}

I hope you have created your version of the snippet. Now try to make it even better with your knowledge. Please subscribe our YouTube channel and press the bell notification icon to get the notification for each video we publish. Please follow us on our social media profiles to stay connected with this blog. Thank you for stopping by this blog.

1 Comments

Post a Comment

About Us

Contact Form

How to Create a Simple Website Layout using HTML CSS

You might like

1 Comments

Post a Comment

Contact Form