JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Amy Yatsuk - Portfolio</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.0/build/cssreset/cssreset-min.css"/>
<link rel="stylesheet" type="text/css" href="CSS/header.css"/>
<link rel="stylesheet" type="text/css" href="CSS/contact.css"/>
</head>
<body>
<div id="nav">
<div id="outterBox">
<div id="linksLeft">
<ul class="menu">
<li><a href="">about</a></li>
<li id="active"><a href="">portfolio</a>
<ul class="subMenu" id="subNav"> <div id="subnavborder">
<li><a href="">editorial</a></li>
<li><a href="">advertising</a></li>
<li><a href="">packaging</a></li>
<li><a href="">photography</a></li> </div>
</ul>
</li>
</ul>
</div>
<div id="logo"></div>
<div id="linksRight">
<ul class="menu">
<li><a href="resume.html">resume</a></li>
<li id="current"><a href="">contact</a></li>
</ul>
</div>
<div id="amy">AMY YATSUK</div>
<div id="talent">DESIGN + PHOTOGRAPHY</div>
</div>
</div>
<div id="main">
<div id="container">
<div id="content">
<div id="blueBox"></div>
<div id="blueTriangle"></div>
<div id="blueTriangle2"></div>
<div id="bottomBox"></div>
<div id="amyPhoto">
<img src="Images/contactphoto.png" alt="Amy Yatsuk" />
</div>
<div id="form" class="shadow">
<p id="contactMe">CONTACT ME</p>
<p...
CSS
/*
YUI 3.8.0 (build 5744)
Copyright 2012 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
html{
background:url(../Images/textureslice.png) repeat;
}
body {
font-family:Georgia;
color:#93b9bb;
}
/* Links */
li a{
color:#93b9bb;
text-decoration:none;
}
li a:hover {
text-decoration:underline;
color:#6b8f91;
}
/* Navigation Structure */
#nav {
width:920px;
margin:auto;
text-align:center;
padding-top:120px;
list-style-type:none;
}
#outterBox li{
display:inline-block;
padding:0 50px;
position:relative;
}
#linksLeft{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin:60px 0 0 25px;
padding:5px 0;
}
#linksLeft li ul {
background-color:#93b9bb;
margin-top:10px;
border-radius:6px;
}
#amy {
clear:both;
font-weight:bold;
letter-spacing:6px;
font-size:120%;
}
#talent{
font-size:70%;
}
#logo {
float:left;
background:url(../Images/logocropped.png) no-repeat;
height:134px;
width:160px;
}
#linksRight{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin-top:60px;
padding:5px 0;
}
/* Subnavigation menu...