CSS Website Layout

CSS Website Layout

However there can be any number of layouts to choose from, but in this tutorial, we have selected the most commonly used layout given down below -

Now we will look into the various sections one by one-

Header -

Output -

Navigation Bar

Output -

Now adding some content -

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0pxpx;
}
/* Styling the header */
.header {
background-color: #784eee;
margin-top: 30px;
padding: 30px;
text-align: center;
}
.nav {
overflow: hidden;
background-color: rgb(16, 219, 185);
}
/* Style the topnav links */
.nav a {
float: left;
display: block;
color: #ad06b3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 30.33%;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="nav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="column">
<h2>row 1 coulumn 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum delectus pariatur quisquam a dolore voluptatibus
exercitationem optio saepe totam quos? Optio consequatur dolorum illum tenetur ducimus! Atque laboriosam
mollitia at?</p>
</div>
<div class="column">
<h2>Row 1 Column 2</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus recusandae sint quisquam, repudiandae
fugiat nam consequuntur iste sapiente corporis vitae asperiores officiis qui quidem eaque totam facere,
voluptatibus autem! Sunt..</p>
</div>
<div class="column">
<h2> Row1 Column 3</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda quasi impedit placeat corrupti laudantium
consequatur alias magni, molestias perferendis numquam nisi exercitationem sapiente totam a sint deleniti quo
neque nobis..</p>
</div>
</div>
</body>
</html>

Output -

Footer -

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0pxpx;
}
/* Styling the header */
.header {
background-color: #784eee;
margin-top: 30px;
padding: 30px;
text-align: center;
}
.footer {
background-color: #f8a5b7;
margin-top: 15px;
padding: 15px;
text-align: center;
}
.nav {
overflow: hidden;
background-color: rgb(16, 219, 185);
}
/* Style the topnav links */
.nav a {
float: left;
display: block;
color: #ad06b3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 30.33%;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="nav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum doloremque fugit aperiam veniam ullam, ipsa
reiciendis aliquam distinctio, deserunt perferendis aspernatur. Veritatis unde commodi est, ducimus veniam numquam
dolore vel explicabo adipisci amet dolorem at qui, in, repellat vitae error voluptatibus ullam laboriosam. Odit
vitae ex quasi nisi? Molestiae, ipsum.
</p>
</div>

<div class="footer">
<p>Footer</p>
</div>
</body>
</html>

Output -