Re-coded website for Uptop14
A completely re-coded version of Uptop14's website in an attempt to help his solve his sidebar problems. :)
by Matthew Dewhurst
HTML
<body><a name="top"></a>
<div id="nav-small">
<ul>
<li><a href="#">Navigation</a>
<div id="nav-small-dropdown">
<div class="nav-small-arrow"></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- Nav small end -->
<div id="nav">
<div id="nav-wrapper">
<ul>
<li><a href="#">Home</a></li><li>
<a href="#">Portfolio</a></li><li>
<a href="#">Blog</a></li><li>
<a href="#">Shop</a></li><li>
<a href="#">Support</a></li>
</ul>
</div><!-- Nav wrapper -->
</div><!-- Nav end -->
<div id="header"><div id="header-wrapper">
<div id="header-left">
<a href="#">Test</a>
</div>
<div id="header-right">
<p><a href="#">Sign in</a><a href="#">Create account</a></p>
</div>
</div></div><!-- Header & header wrapper end -->
<div id="wrapper"><div id="content-position">
<div id="page-nav">
<p><a href="#">Home</a> ></p>
</div>
<div id="content">
<div id="posts-width">
<div id="post-title"><a href="#">First Title Post</a></div>
<div id="post"><div id="post-container">
<p class="post-info">Posted by <a href="#">Dylan</a>, the 16 June 2014, at 01:14 AM.</p>
<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...
CSS
body {
background-color: #d8dde8;
color: #000;
font-family: "Trebuchet MS", sans-serif;
font-size: 13px;
padding: 0;
margin: 0;
}
h1 { font-size: 25px; font-weight: normal; }
h2 { font-size: 23px; font-weight: normal; }
h3 { font-size: 21px; font-weight: normal; }
h4 { font-size: 19px; font-weight: normal; }
h5 { font-size: 17px; font-weight: normal; }
h6 { font-size: 15px; font-weight: normal; }
a,visited{ color: #4D7799; text-decoration: none; }
a:hover{ text-decoration: underline; }
/* NAV SMALL STYLING */
#nav-small{ background-color: #262D35; text-align: center; display: none; }
#nav-small ul{ list-style-type: none; padding: 0; margin: 0; }
#nav-small ul li{ display: inline-block; }
#nav-small ul li:hover{ background-color: #343F49; }
#nav-small ul li a,visited{ color: #FFF; text-decoration: none; display: block; padding: 20px 25px 20px 25px; }
.nav-small-arrow{ width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #FFF; margin: 0 auto; text-align: center;}
#nav-small ul li:hover #nav-small-dropdown{ display: block; }
#nav-small-dropdown{ display: none; position: absolute; margin: -7px auto; }
#nav-small-dropdown ul{ background-color: #FFF; display: inline-block; padding: 5px; -webkit-box-shadow: 0 5px 9px rgba(0,0,0,0.1); -moz-box-shadow: 0 5px 9px rgba(0,0,0,0.1); box-shadow: 0 5px 9px rgba(0,0,0,0.1); text-align: center; }
#nav-small-dropdown ul li{ display: block; }
#nav-small-dropdown ul li:hover{ background: #ca3883;
background: -moz-linear-gradient(top, #ca3883 0%, #901e59 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ca3883), color-stop(100%,#901e59));
background: -webkit-linear-gradient(top, #ca3883 0%,#901e59 100%);
background: -o-linear-gradient(top, #ca3883 0%,#901e59 100%);
background: -ms-linear-gradient(top, #ca3883 0%,#901e59 100%);
background: linear-gradient(to bottom, #ca3883 0%,#901e59 100%); }
#nav-small-dropdown ul...