i have make sample personal page i put the source code here click here to download
for example this is the index.html source code.download the rar file to see the whole code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Yabina's Page!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="img/logoo.jpg">
<nav><ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">Second article</a></h2>
</header>
<footer>
<p class="post-info">This was posted on the 2nd of March 2013 by Christian Vasile</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
</content>
</article>
<article class="bottomcontent">
<header>
<h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">First post</a></h2>
</header>
<footer>
<p class="post-info">This was posted on the 5th of March 2013 by Christian Vasile</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</content>
</article>
</div>
<aside class="top-sidebar">
<article>
<h2>Top Sidebar</h2>
<p>Discover how to use new techniques to achieve an outstanding, cross-browser HTML5.</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Middle Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod expedita distinctio.</p>
</article>
</aside>
</div>
<footer class="mainFooter">
<p>Copyright © 2013 <a href="http://1stwebdesigner.com">1stwebdesigner</a></p>
</footer>
</body>
</html>
for example this is the index.html source code.download the rar file to see the whole code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Yabina's Page!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="img/logoo.jpg">
<nav><ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">Second article</a></h2>
</header>
<footer>
<p class="post-info">This was posted on the 2nd of March 2013 by Christian Vasile</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
</content>
</article>
<article class="bottomcontent">
<header>
<h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">First post</a></h2>
</header>
<footer>
<p class="post-info">This was posted on the 5th of March 2013 by Christian Vasile</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</content>
</article>
</div>
<aside class="top-sidebar">
<article>
<h2>Top Sidebar</h2>
<p>Discover how to use new techniques to achieve an outstanding, cross-browser HTML5.</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Middle Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod expedita distinctio.</p>
</article>
</aside>
</div>
<footer class="mainFooter">
<p>Copyright © 2013 <a href="http://1stwebdesigner.com">1stwebdesigner</a></p>
</footer>
</body>
</html>
