Preview
Codes
<!doctype html>
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
font-family:helvetica;
}
p, a, h1, h2, h3{
margin:10px 0px;
}
.container{
box-shadow:2px 5px 20px #333;
width:80%;
margin:2% auto;
border-radius:10px;
overflow:auto;
background:white;
}
.header{
padding:4% 0%;
background: #32512d;
color:white;
}
.menu{
overflow:hidden;
background:#21381e;
}
.menu a{
display:inline-block ;
color:white;
text-decoration:none;
padding:2% 2% ;
margin:0px;
}
.menu a:hover{
background:#dfdfdf;
color:black;
}
.content{
overflow:auto;
}
.left-col{
width:28% ;
padding:1%;
}
.left-col a{
display:block ;
}
.left-col, .right-col{
overflow:auto;
float:left;
}
.right-col{
width:67% ;
padding:1%;
border-left:1px solid #dfdfdf;
}
.footer{
background: #32512d;
color:white;
padding:1%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 align="center">Computer Master</h1>
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">item 1</a>
<a href="#">contact us</a>
<a href="#">about us</a>
<a href="#" style="float:right">Log out</a>
</div>
<div class="content">
<div class="left-col">
<h2 align="center">More Posts</h2>
<a href="#"> This is post 1, click and you will see post 1 content</a>
<a href="#"> This is post 1, click and you will see post</a>
<a href="#"> This is post 1, click and you will see post</a>
<a href="#"> This is post 1, click and you will see post</a>
</div>
<div class="right-col">
<h2 align="center">Title of the post</h2>
<h3>Subtitle 1</h3>
<p> This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
</p>
<h3>Subtitle 2</h3>
<p> This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
</p>
<!-- end of right-col-->
</div>
<!-- end of content -->
</div>
<div class="footer">
<p align="center">Powered By Computer Master</p>
</div>
<!-- end of container -->
</div>
</body>
</html>
No comments:
Post a Comment