In this post we will teach you. (How to Design a Website Using Html and CSS With Example) .Copy the code below. Then check out our blog through the online HTML editor. Then use the code in your website. If there is a problem with the code, ask your question in the comment box below.
<!--DOCTYPE html-->
<html>
<head>
<meta charset="UTF-8">
<title>website name</title>
<meta name="description" content="A description of your website">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style>
/* General Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:none;
}
ol, ul {
list-style-type:none;
}
h1, h2, h3, h4, h5, h6, li {
line-height:100%;
}
blockquote, q {
quotes:none;
}
q:before, q:after {
content:"";
}
input, textarea, select {
font:12px Arial, Helvetica, sans-serif;
vertical-align:middle;
padding:0;
margin:0;
}
textarea {
overflow:auto;
resize:none;
}
body {
margin:0px;
padding:0px;
font-size:13px;
line-height:21px;
color:#113e5d;
background-color:#9ba0a3;
font-family:Georgia, "Times New Roman", Times, serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight:normal;
}
h1 {
font-size:33px;
margin-bottom:10px;
}
h2 {
font-size:25px;
margin-bottom:10px;
}
h3 {
font-size:18px;
margin-bottom:10px;
}
h4 {
font-size:16px;
margin-bottom:10px;
}
h5 {
font-size:14px;
margin-bottom:10px;
}
h6 {
font-size:12px;
margin-bottom:10px;
}
/* links
******************************/
a {color: #1B5219;text-decoration: underline;}
a:hover {color: #1B5219;text-decoration: none;}
/* superscript and subscript
******************************/
sup, sub {vertical-align: baseline;position: relative;top: -0.4em;}
sub { top: 0.4em; }
/* lists
******************************/
ul, ol {padding:0;margin:0;}
ul li {list-style-type:disc;}
ol li {list-style-type:decimal;}
ul li,
ol li {font-size: 12px; line-height: 16px;margin: 0 0 10px 15px;}
/* tables
******************************/
table,th,td {border:1px solid #AAAAAA;}
th {padding:3px; font-weight:bold;color:#344b3b;}
tr {margin:0 0 5px 0;padding:3px;}
td {padding:5px;margin:0 1px;}
/* horizontal lines
******************************/
hr {border-bottom: 1px solid #C1C1CB;margin:5px 0;padding:0;height:2px;width:100%; margin-bottom:15px;}
.clear {
clear:both;
}
.left {
float:left;
}
.right {
float:right;
}
.copyright {
border: 0px;
height: 1px;
width: 1px;
}
#wrapper {
width:1000px;
margin:0 auto;
padding:20px 0 10px 0;
}
/*----start header----*/
#header {
padding:0px 0px 5px;
}
#header .top_banner{
background:url(../images/header.jpg) no-repeat left top;
height:175px;
padding:75px 95px 0 295px;
border:#496066 solid 1px;
}
#header h1{
font-size:32px;
color:#000000;
margin:0px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
padding:0px 0px 10px;
}
#header h1 a {
color:#000000;
text-decoration: none;
}
#header h1 a:hover {
text-decoration: none;
}
#header p{
font-size:16px;
margin-left:1px;
color:#000000;
font-family:Georgia, "Times New Roman", Times, serif;
}
.navigation{
margin:0px 0px 25px;
border-bottom:#adb1b2 solid 1px;
padding:15px 5px;
background: #e4e6e5;
}
.navigation ul{
margin:0px;
padding:0px;
}
.navigation ul li{
margin:0px;
padding:0px 32px;
display:inline;
font-size:15px;
list-style-type:none;
border-right:#868B8F dotted 2px;
}
.navigation ul li a{
color:#03314b;
text-decoration:none;
}
.navigation ul li a:hover{
text-decoration:underline;
}
.navigation ul li:last-child {
border-right:none;
}
/*----end header----*/
/*----start page content----*/
#page_content{
background:#AAF5B5;
padding:10px;
}
#page_content .right_section{
width:735px;
float:right;
}
#page_content .right_section .top_content{
padding:15px 0 0px 0;
}
#page_content .right_section .top_content .column_one{
width:300px;
float:left;
margin-bottom:20px;
}
#page_content .right_section .top_content .column_two{
width:300px;
float:right;
margin-bottom:20px;
}
.common_content{
padding:0 0 20px 0;
}
.border_left{
border-left:#6e7678 dotted 1px;
padding-left:20px;
}
.border_none{
border:none!important;
margin:0px!important;
}
.left_side_bar{
width:210px;
margin-bottom:10px;
float:left;
}
.left_side_bar h1{
font-size:18px;
padding:0 0 0 35px;
margin-bottom:15px;
color:#1b0400;
background:url(../images/pencil.png) no-repeat 10px center;
}
.left_side_bar .col_1{
padding:0px 0 20px 0;
}
.left_side_bar .col_1 .box{
padding:10px 15px 5px;
border:#A1A9AB solid 2px;
}
.left_side_bar .col_1 .box ul{
margin:0px;
padding:0px;
}
.left_side_bar .col_1 .box ul li{
margin:0px 0px 8px;
padding:0px 0px 0px 20px;
font-size:13px;
list-style-type:none;
background:url(../images/li.png) no-repeat left center;
}
.left_side_bar .col_1 .box ul li a{
color:#364b38;
text-decoration:underline;
}
.left_side_bar .col_1 .box ul li a:hover{
color:#364b38;
text-decoration:none;
}
/*----end page content----*/
/*----start footer content----*/
#footer{
clear:both;
margin-top:18px;
padding:15px 0 12px 0;
height:25px;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
line-height:19px;
border-top:#b9bdbe solid 1px;
}
#footer a{
color: #1B5219;
text-decoration:none;
}
#footer a:hover{
color: #1B5219;
text-decoration:underline;
}
/*----end footer content----*/
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="top_banner">
<h1>Your Site Title</h1>
<p>Enter Site details</p>
</div>
</div>
<div id="page_content">
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Extra</a></li>
</ul>
</div>
<div class="left_side_bar">
<div class="col_1">
<h1>Main Menu</h1>
<div class="box">
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
<li><a href="#">Menu Item 7</a></li>
<li><a href="#">Menu Item 8</a></li>
<li><a href="#">Menu Item 9</a></li>
<li><a href="#">Menu Item 10</a></li>
<li><a href="#">Menu Item 11</a></li>
<li><a href="#">Menu Item 12</a></li>
</ul>
</div>
</div>
<div class="col_1">
<h1>Block</h1>
<div class="box">
<p>your content here..</p>
<br>
<p>your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here </p>
</div>
</div>
</div>
<div class="right_section">
<div class="common_content">
<h2>Gallery</h2>
<hr>
<p>your content here </p>
<br>
<p><a href="#">Read more</a></p>
<hr>
<p>Lyour content here your content hereyour content hereyour content hereyour content hereyour content hereyour content hereyour content hereyour content hereyour content hereyour content hereyour content hereyour content hereyour content hereyour content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here </p><br>
<ul>
<li>your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here </li>
<li>your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here </li>
<li>adipiscing elit. Aenean commodo ligula</li>
<li>your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here </li>
<li>your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here .</li>
<li>your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here your content here .</li>
</ul>
</div>
</div>
<div class="clear"></div>
<!--start footer from here-->
</div>
</div>
</body></html>
Post a Comment
Post a Comment