Responsive them
Mobile
File setup
index.html
<html>
<head>
<title>Zia Personal Web site</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="body">
<header class="mainHeader">
<img src="images/logo.jpg" />
<div class="add">
this will be th add
</div>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topContent">
<header>
<h2><a href="#" title="First Post">First Post</a></h2>
</header>
<footer>
<p class="post-info">This is posted by Zia</p>
</footer>
<content>
<p> This is my content here.This is my content here.
This is my content here.This is my content here.
This is my content here.This is my content here.</p>
<p>This is my content here.This is my content here.
This is my content here.This is my content here.
This is my content here.This is my content here.</p>
</content>
</article>
<article class="bottomContent">
<header>
<h2><a href="#" title="Second Post">Second Post</a></h2>
</header>
<footer>
<p class="post-info">This is posted by Zia</p>
</footer>
<content>
<p> This is my content here.This is my content here.
This is my content here.This is my content here.
This is my content here.This is my content here.</p>
<p>This is my content here.This is my content here.
This is my content here.This is my content here.
This is my content here.This is my content here.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>Top sidebar</h2>
<p>his is my content here.This is my content here.
This is my content here.This is my content here.</p>
</article>
</aside>
<aside class="midde-sidebar">
<article>
<h2>Middle sidebar</h2>
<p>his is my content here.This is my content here.
This is my content here.This is my content here.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom sidebar</h2>
<p>his is my content here.This is my content here.
This is my content here.This is my content here.</p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyright © <a href="http://zia-ullah-khan.blogspot.se/" title="Zia Personal Site">Zia Khan</a></p>
</footer>
</body>
</html>
styl.css
body
{
background-image: url('../Images/bg.jpg');
color: #000305;
font-size: 87.5%;
font-family: Arial, 'Lucida sans Unicode';
line-height:1.5;
text-align: left;
}
a {
text-decoration: none;
}
a:link, a:visited{
color: #cf4c3f;
}
a:hover, a:active{
color: #fff;
background-color: #cf4c3f;
}
.body {
margin: 0 auto;
width: 75%;
clear: both;
}
.mainHeader img {
width: 30%;
height: auto;
margin: 2% 0;
}
.add {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
width: 50%;
float: right;
height: auto;
}
.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
height: 40px;
line-height: 2.7em;
float: left;
width: 6em;
display: inline-block;
text-decoration: none;
text-align: center;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active :visited
{
background-color:#cf5c3f;
text-shadow: none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainContent {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content{
width: 70%;
float: left;
}
.topContent {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomContent {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.post-info {
font-style: italic;
color: #999;
font-size: 90%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
padding: 2% 3%;
margin-bottom: 2%;
margin-top: 2%;
}
.midde-sidebar {
width: 21%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
padding: 2% 3%;
margin-bottom: 2%;
}
.bottom-sidebar{
width: 21%;;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
padding: 2% 3%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
height: 40px;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #666;
margin: 2% 0;
}
.mainFooter p {
width: 92%;
margin: 10px auto;
color: #fff;
}
@media only screen and (min-width: 150px) and (max-width: 600px) {
.body{
width: 90%;
font-size: 95%;
}
.mainHeader img {
width: 100%;
}
.add {
display: none;
}
.mainHeader nav {
height: 160px;
}
.mainHeader nav ul {
padding-left: 0;
}
.mainHeader nav ul li {
width: 100%;
text-align: center;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
float: left;
width: 100%;
display: inline-block;
text-decoration: none;
text-align: center;
}
.content{
width: 100%;
float: left;
margin-top: 2%;
}
.post-info {
display: none;
}
.topContent {
margin-top: 3%;
}
.bottomContent {
margin-bottom: 4%;
}
.top-sidebar,.midde-sidebar , .bottom-sidebar {
width: 94%;
margin: 2% 0 2% 0;
padding: 2% 3%;
}
}
