AustenVanderbleek
Main html and CSS
by A Lee
HTML
<script src="<link href='http://fonts.googleapis.com/css?family=Overlock+SC' rel='stylesheet' type='text/css'>"></script>
<script src="<link href='http://fonts.googleapis.com/css?family=Diplomata+SC' rel='stylesheet' type='text/css'>"></script>
<link href='http://fonts.googleapis.com/css?family=Overlock+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Diplomata+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'>
<body>
<div class="entire-content-wrapper">
<div class="top-nav-fixed">
<div class="nav-list-items">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#">Projects</a>
</li>
</ul>
</div>
</div>
<div class="name-title">
<p>Austen Vanderbleek</p>
</div>
<div class="music-adver-container">
<div class="music">
<div class="music-image">
<div class="inner">
<img src="http://brycekervin.files.wordpress.com/2012/02/artworks-000017664357-6r42kz-original.jpg" />
</div>
</div>
</div>
<div class="adver">
<div class="adver-image">
<div class="inner">
<img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-ash4/5054_1131373520386_773602_n.jpg" />
</div>
</div>
</div>
</div>
<div class="bottom-half-content">
<div class="font">
<div class="titles">
...
CSS
body {
margin: 0 auto;
background-color: #FFFEDF;
}
.entire-content-wrapper {
border: 5px #2A2C31 solid;
}
.top-nav.fixed {
border: 5px #2A2C31 solid;
position: fixed;
}
.top-nav-fixed .nav-list-items {
background-color: #2A2C31;
margin: 10px;
padding: 5px 10px;
text-align: center;
}
.top-nav-fixed .nav-list-items ul li {
list-style-type: none;
display: inline-block;
font-size: 20px;
font-family:'Overlock SC', san-serif;
text-shadow: 1px;
}
.top-nav-fixed .nav-list-items ul li:nth-child(2) {
margin-left: 100px;
margin-right: 100px;
}
.top-nav-fixed .nav-list-items ul li a {
text-decoration: none;
color: #DFBA69;
border: 2px #DFBA69 solid;
padding: 5px 25px;
border-radius: 25%;
}
.top-nav-fixed .nav-list-items ul li a:hover {
text-decoration: none;
color: black;
border: 2px #741C1A solid;
padding: 5px 10px;
background-color: #DFBA69;
padding: 5px 25px;
}
.name-title {
margin-bottom: 40px;
}
p {
font-family:'Doppio One', sans-serif;
text-align: center;
font-size: 50px;
margin-top: 30px;
margin-bottom: 40px;
color: #2A2C31;
text-shadow: 1px 1px black;
}
.music-adver-container {
width: 90%;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
padding-top: 40px;
}
.music-adver-container .music .music-image .inner {
float: left;
width: 35%;
margin-left: 10%;
}
.music-adver-container .adver .adver-image .inner {
float: right;
width: 35%;
margin-right: 10%;
height: 318px;
}
.music-adver-container .music .music-image .inner img{
width: 100%;
height: 100%;
background: #2A2C31;
padding: 4px;
}
.music-adver-container .adver .adver-image .inner img{
width: 100%;
height: 318px;
background: #2A2C31;
padding: 4px;
}
.bottom-half-content{
border: 1px #741C1A solid;
width: 100%;
}
.bottom-half-content .titles...