Simple Website Design using HTML and CSS

byCodingFlicks -August 05, 2020

2

Welcome Friends, In this blog post, we will learn how to create a simple website design using HTML and CSS. Earlier, we shared a lot of blog posts on Bootstrap website design, CSS animation, form design, service page design, loader animation, and so on. In this website design tutorial, We will design a simple website layout with the help of plain HTML and CSS.

Those of us who are learning HTML and CSS want to build a website ourselves. But we don't know where to start and how to end. This web layout design tutorial will help you understand how to create a landing page website step by step. Here we have created a website where we have a homepage with a background image behind it. At the top, we have a navigation menu. This navigation menu has five navigation items. When we click on a particular nav item, we will go to that particular section with a smooth CSS transition. This website design example is basically a basic representation of how we can create a landing page with HTML CSS. In this blog, you will learn how to make a simple-looking website using html5 and css3. In addition to the blog, We will give you access to the source code. Together we will build this simple-looking website, and by doing that, you will learn some necessary skills in HTML5 and CSS3 like how to use fonts, images, navigations, some basic animations, etc.

Video Tutorial:

We hope you have watched the video tutorial above. The above video shows the finished version of the website layout design. The anchor element will change when we hover over the nav item, the background, and the color. When we click over the nav item, it will take us to the associated page with a slow transition effect. We have taken five divs for the five pages (home, about, portfolio, services, and contact) and named them with a unique ID. I also linked the respective pages in the navbar so that it can take us to that particular page when we click on it.

You may also like:

In the CSS part, we have discarded the document's document's default padding and margin. Thus, we have provided the padding and margin to 0. We used Lato as the default font for the projects. Then we gave the box div a width of 100% and a height of 100vh. Then we provided a relative position and 100% height value to all the div inside the box id. For the content class, We used absolute position value and transform property to bring all the items of the content class in the middle. We also provided a text-align property to get the content center of the viewport. After that, we did some necessary styling for all the elements in the content class. For the navbar, We want it to be fixed when we scroll down the page, so we have given it an absolute position value and provided a z-index value to remain on top of the content. After that, we decorated the navbar with some necessary styling. We have added a font-awesome icon to the left side of each nav item. We used the font-awesome 4.7.0 CDN version and added that to my HTML file. we have also added a deep pink background color for the nav-item hover effect. We have given a background image for the homepage, but we have provided a whitish background color for the rest of the section.

Simple Website Layout Design [ Source Code ]:

To create this snippet, you need to create two files. One of them is an HTML file, and the other is a CSS file. After that, you need to copy the HTML and CSS code and paste it to the appropriate files and save them. You can also download the source code from the download button button below.

HTML:

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Website Design using HTML and CSS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="box">
		<ul>
			<li>
				<a href="#home"><i class="fa fa-home"></i>  Home</a>
			</li>
			<li>
				<a href="#about"><i class="fa fa-book">  about</i></a>
			</li>
			<li>
				<a href="#portfolio"><i class="fa fa-cog">  portfolio</i></a>
			</li>
			<li>
				<a href="#services"><i class="fa fa-folder">  services</i></a>
			</li>
			<li>
				<a href="#contact"><i class="fa fa-envelope">  contact</i></a>
			</li>
		</ul>
		<div id="home">
			<section class="content">
				<h1>Digital Agency</h1>
			</section>
		</div>
		<div id="about">
			<section class="content">
				<h1>About</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem voluptatem?</p> <!-- lorem50 -->
                
			</section>
		</div>
		<div id="portfolio">
			<section class="content">
				<h1>Portfolio</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem voluptatem?</p>
			</section>
		</div>
		<div id="services">
			<section class="content">
				<h1>Services</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem voluptatem?</p>
			</section>
		</div>
		<div id="contact">
			<section class="content">
				<h1>Contact</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem voluptatem?</p>
			</section>
		</div>
	</div>
</body>
</html>

CSS:

  * {
	margin: 0;
	padding: 0;
}
body {
	font-family: lato;
}
#box {
	width: 100%;
	height: 100vh;
	scroll-behavior: smooth;
	overflow-y: scroll;
}
#box div {
	position: relative;
	height: 100%;
}
.content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	padding: 0 40px;
}
.content h1 {
	font-size: 70px;
	font-weight: bold;
	color: #262626;
	text-transform: uppercase;
	margin-bottom: 40px;
}
#about .content h1, #portfolio .content h1, #services .content h1, #contact .content h1 {
	color: #5b5b5b;
}
.content p {
	line-height: 1.5;
	margin: auto;
	color: #000;
}
ul {
	padding: 0;
	text-align: center;
	position: fixed;
	margin: 2% auto;
	z-index: 1;
	width: 1100px;
	left: 0;
	right: 0;
	font-family: lato;
}
ul li {
	list-style: none;
	display: inline-block;
}
ul li a {
	display: block;
	text-decoration: none;
	height: 45px;
	font-size: 20px;
	background: #fff;
	width: 200px;
	color: #262626;
	margin: 4px 0;
	text-transform: uppercase;
	line-height: 45px;
}
ul li a:hover {
	background: #262626;
	text-decoration: none;
	color: #fff;
}
#home {
	background-image: url(1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}
#portfolio, #contact {
	background: #f3f3f3;
}

We hope you like it. Please feel free to leave a comment. Thank you for visiting our website.

DOWNLOAD CODE

2 Comments

Please do not enter any spam link in the comment box.

Sophia5 August 2020 at 23:04
wow ... thanks for the code
ReplyDelete
Replies
WestNab6 April 2021 at 12:05
Good stuff. I spent a few hours creating a web site based on your code, with different image, colours, content. It works fine on Firefox on my Mac, fine on Chrome on my Android phone, but goes to pieces in Edge on Windows 10. The 'div' sections do not align with the browser window. Any idea why? I have had to take down the actual site, but there is a copy on my web server at https://westnab.com/riverside/
ReplyDelete
Replies

Add comment

Post a Comment