Scribd
Upload
8 views3 pages

HTML Head Title Title Style: Basic Layout

The document outlines a basic HTML layout using div tags, featuring a header, menu, content area, sidebar, and footer. It includes CSS styles for visual presentation, such as background colors and text formatting. The content area contains placeholder text and links for navigation.

Uploaded by

herohitonaorem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views3 pages

HTML Head Title Title Style: Basic Layout

The document outlines a basic HTML layout using div tags, featuring a header, menu, content area, sidebar, and footer. It includes CSS styles for visual presentation, such as background colors and text formatting. The content area contains placeholder text and links for navigation.

Uploaded by

herohitonaorem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<html>

<head>
<title>Basic Layout</title>
<style>
body{
font-family: arial,helvetica;
background: slategrey;
margin: 0;
padding: 0;
}
#wrapper{
border: 0px solid black;
width: 1000px;
background: white;
margin: 0 auto;
}
#header{
background: crimson;
color: white;
height: 100px;
}
#header h1{
padding: 30px 0 0 20px;
}
#menu{
background: lightsalmon;
}
#menu ul{
padding: 0;
margin: 0;
}
#menu li{
display: inline-block;
}
#menu li a{
color: black;
display: block;
padding: 10px 13px;
text-decoration: none;
}
#menu li a:hover{
background: crimson;
color: white;
}
#content{
width: 800px;
min-height: 500px;
padding: 15px;
float: left;
box-sizing: border-box;
}
#sidebar{
background: lightblue;
width: 200px;
min-height: 500px;
float: right;
}

#sidebar a{
color: black;
text-decoration: none;
}
#footer{
background: lightsalmon;
clear: both;
text-align: right;
padding: 5px 10px;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<h1>Web layout using Div tag</h1>
</div>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
<div id="content">
<h2>Design Basic Layout</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.Nunc cursus vitae turpis.Curabitur aliquam tempus vel, cursus vitae
turpis.Curabitur aliquam commodo dolor vulputate porttitor.Vivamus ut sodales
lacus. Lorem ipsum dolor sit amet, consectetur adipisc ing elit.Nunc elit
dolor, ornare in tempus vel, cursus vitae turpis.Curabitur aliquam commodo
dolor vulputate porttitor.Vivamus ut sodales lacus, in semper libero.
Phasellus malesuada tincidunt elit vitae feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.Nunc elit dolor, ornare in tempus vel, cursus
vitae turpis.Curabitur aliquam commodo dolor vulputate porttitor.Vivamus ut
sodales lacus, in semper libero. Phasellus malesuada tincidunt elit vitae
feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nunc elit
dolor, ornare in tempus vel, cursus vitae turpis.Curabitur aliquam commodo
dolor vulputate porttitor.Vivamus ut sodales lacus, in semper libero.
Phasellus malesuada tincidunt elit vitae feugiat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.Nunc cursus vitae turpis.Curabitur aliquam ornare in tempus vel, cursus
vitae turpis.Curabitur aliquam commodo dolor vulputate porttitor.Vivamus ut
sodales lacus, in semper libero. Phasellus malesuada tincidunt elit vitae
feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nunc elit
dolor, ornare in tempus vel, cursus vitae turpis.Curabitur aliquam commodo
dolor vulputate porttitor.Vivamus ut sodales lacus, in semper libero.
Phasellus malesuada tincidunt elit vitae feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.Nunc elit dolor, ornare in tempus vel, cursus
vitae turpis.Curabitur aliquam commodo dolor vulputate porttitor.Vivamus ut
sodales lacus, in semper libero. Phasellus malesuada tincidunt elit vitae
feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nunc elit
dolor, ornare in tempus vel, cursus vitae turpis.Curabitur aliquam commodo
dolor vulputate porttitor.Vivamus ut sodales lacus, in semper libero.
Phasellus malesuada tincidunt elit vitae feugiat.</p>
</div>
<div id="sidebar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
<div id="footer">
divtag@copyright 2021.
</div>
</div>
</body>
</html>

You might also like