HTML 5 and CSS 3 Responsive theme - Nano Blogs Online

Nano Blogs Online

Nano Blogs Online provides free help in Web Technologies, Affiliate Marketing, Social Media Marketing, Digital Marketing, and reviews different products from the online world.

HTML 5 and CSS 3 Responsive theme

HTML 5 and CSS 3 Responsive theme

Share This


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 &copy;  <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%;
 }
 }


No comments:

Post a Comment