Simple Static Layout Page Using HTML and CSS

In this post, You are going to see the making of a very simple static layout web page using pure CSS and HTML.

This tutorial will help beginners to learn CSS Layout. You can modify the CSS elements to notice the working functionality of each element.

3D Photo/Image Gallery (on space) Using HTML5 CSS JS

In this layout, I am providing a header, nav bar and body section in one HTML file. Try to add a footer by your own to practice your skill.

You can also use the CSS style of <header> from this tutorial as your footer or you may change as per your choice

Just open any text editor and copy the whole code and paste it in your text editor then save it as “filename.html” and run the file with your browser.

How To Draw A Circle In CSS?  CSS Code To Draw A Circle

 

Below is given the complete HTML and CSS code in one HTML file for the basic web page design:

<!DOCTYPE html>
<html>
<style type="text/css">
  .wrapper {
  width: 960px;
  margin: 0 auto;
}

header {
    width: 960px;
}

nav, section {
  float: left;
}

nav {
  width: 200px;
  margin-right: 10px;
}

section {
  width: 750px;
}
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #2980b9;
  color: #FFF;
  font-family: Helvetica;
  text-align: center;
  margin: 0;
}

header,
nav,
section {
  border: 1px solid rgba(255,255,255,0.8);
  margin-bottom: 10px;
  border-radius: 3px;
}

header {
  padding: 20px 0;
}

nav, section {
  padding: 200px 0;
}

</style>
<head>
  <title>CSS and HTML Page Layout</title>

</head>
<body>
  <div class="wrapper">
  <h1>Static Layout Example</h1>
  <header>HEADER</header>
  <nav>NAV</nav>
  <section>SECTION</section>
</div>


</body>
</html>

Change text color on mouse hover &#8211; CSS code

 

The page will look like this

 

Pure CSS HTML webpage layout

 

Responsive Image Hover Effect With Pure CSS Code

 

Leave a Reply

Your email address will not be published. Required fields are marked *