Simple Static Layout Page Using HTML and CSS

By Saruque Ahamed Mollick

In this post, You are going to get a very simple static layout web-page using pure CSS and HTML.

This will help the 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

Here I am providing a header, nav bar, body section. Try to add footer by your own to practice your skill.

You can also use the <header> CSS style as your footer or you may change as per your choice
Here are the full CSS and HTML code.



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

 

 

<!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 *