CodePen

HTML

            
              <!DOCTYPE html>

<html>

    <head>
        <title>Steph Samson</title>
        <link href='http://fonts.googleapis.com/css?family=Monda:400,700|Exo:700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" type="text/css" href="cv.css" />
        </head>

    <body>

        <div id="page-wrap">

            <div id="container">

                <h1>Page</h1>
                <dl>
                    <dd class="clear"></dd>

                    <dt>Data</dt>
                    <dd>
                        <h2>Header</h2>
                        <ul>
                            <li>List item 1.</li>
                            <li>List item 2.</li>
                            <li>List item 3.</li>
                        </ul>
                  
                    </dd>
                </dl>
            </div>

            <div id="me-nav">
                <ul>
                    <li><a href="#">about</a></li>
                    <li><a href="#">cv</a></li>
                    <li><a href="#">twittah</a></li>
                </ul>
                <img class="pic" src="images/crop.jpg" alt="me" />
            </div>


        </div>

    </body>

</html>
            
          
!

CSS

            
              body {
	background-color: #f8f8f8;
	font-family: 'Monda', sans-serif;
	margin: 0;
	padding: 0;
}

#page-wrap {
	width: 800px;
	margin: auto;
}

#container {
	float: right;
	width: 480px;
	border-left: 2px dashed #e8e8e8;
	margin: auto;
	padding-left: 18px;
	text-align: left;
}

#me-nav {
	float: left;
	position: fixed;
	margin: auto;
	width: 280px;
	padding-right: 10px;
	text-align: right;
}

#me-nav ul {
	list-style: none;
	display: inline;
}

#me-nav li a {
	font-family: 'Exo', sans-serif;
	font-weight: 700;
	color: #000;
	text-decoration: none;
}

#me-nav li a:hover {
	color: #225e79;
	border-bottom: 1px dashed #000;
}

#me-nav p { font-size: .6em; }

.pic { padding-top: 15px; 

h2 {
	font-size: .9em;
}

h2 span {
	font-style: italic;
}

.clear { clear: both; }

dd.clear {
	float: none; 
	margin: 0;
	height: 15px; }

dt {
	font-size: 1.2em;
	width: 110px;
	float: left;
}

dd {
	font-size: .8em;
	width: 300px;
	float: right;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................