Website Designing Tutorial Layout With CSS

Website Layout

A website is often divided into headers, menus, content and a footer:

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Layout Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="style.css">
      
   </head>
   <body>
      <div class="wrapper">
         <header>
            <h3> Header </h3>
         </header>
         <div class="menu">
            <h3> Menu </h3>
         </div>
         <div class="content">
            <div class="ab-left"></div>
            <div class="ab-right"></div>
         </div>
         <div class="footer">
            <p>© 2019</p>
         </div>
      </div>

CSS

@charset "utf-8";
/* CSS Document */

.wrapper {
    width: 1000px;
    height: 510px;
    background: aliceblue;
    margin: 0 auto;
}
header {
    width: 1000px;
    height: 90px;
    background: black;
}
header h3 {
    color: #fff;
    text-align: center;
    padding: 25px;
}
.menu {
    height: 60px;
    background: blue;
}
.menu h3 {
    color: #fff;
    text-align: center;
    padding: 25px;
}   
.content {
    width: 1000px;
    height: 320px;
    background: antiquewhite;
}
.ab-left {
    float: left;
    width: 50%;
    height: 320px;
    background: aqua;
}
.ab-right {
    float: right;
    width: 50%;
    height: 320px;
    background:#2196F3;
}
.footer {
    width: 1000px;
    height: 40px;
    background: #000;
}
.footer p {
    color: #fff;
    text-align: center;
    padding: 20px;
}

Output

Leave a Reply

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

×