myportfolio
<!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" xml:lang="en" lang="en">
<head>
<title>myportfolio</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
/**
* Body, container
*/
body {
background: #1a1a1a url('myportfolio-images/background.png') repeat-x;
color: white;
font-family: "Myriad Pro", "Trebuchet MS";
font-size: 11pt;
margin: 0;
}
#background-glow {
background: url('myportfolio-images/bg-center.png') top center no-repeat;
}
#container-wrap {
background: url('myportfolio-images/header-background.png') repeat-x;
}
#container {
margin: 0 auto;
width: 960px;
}
/**
* Header
*/
#header {
background: url('myportfolio-images/header-background.png') repeat-x;
color: black;
height: 66px;
}
/* Logo */
h1 {
background: url('myportfolio-images/logo.png') no-repeat;
display: block;
float: left;
height: 95px;
margin: 0;
width: 254px;
}
h1 span {
visibility: hidden;
}
/* Navigation */
#navigation {
float: right;
margin: 20px 75px 0 0;
}
#navigation li {
display: inline;
list-style: none;
}
#navigation a {
color: black;
font-size: 11pt;
letter-spacing: -1px;
padding: 2px 35px;
text-decoration: none;
text-transform: uppercase;
}
#navigation a:hover, #active-page a {
background: #FF0060;
color: white;
}
.intro {
float: right;
margin-top: 20px;
}
/**
* Headings
*/
h2 {
margin: 5px 0 5px 50px;
}
h3 {
font-size: 13pt;
font-weight: normal;
margin: 0;
padding: 5px 10px;
text-transform: uppercase;
}
/**
* Links
*/
a {
color: #ff0060;
text-decoration: none;
}
/**
* Latest project
*/
#latest-project-title {
margin-top: 50px;
}
#latest-project {
margin: 0 auto 20px auto;
width: 892px;
}
#latest-project .preview {
height: 330px;
text-align: center;
}
#latest-project .descr {
background: #323232 url('myportfolio-images/latest-project-descr-background.png') repeat-x;
padding: 10px 0;
}
#latest-project .descr p {
margin: 5px 10px;
}
#latest-project .descr p.actions {
font-size: 10pt;
text-align: right;
text-transform: uppercase;
word-spacing: 15px
}
.changer {
height: 66px;
margin-top: 132px; /* (.preview(height) / 2) - (.changer(height) / 2) */
position: absolute;
width: 67px;
}
.prev {
margin-left: -33px; /* .changer(width) / 2 */
}
.next {
margin-left: 859px; /* .preview(width) - (.changer(width) / 2) */
}
/**
* Past work
*/
#past-work {
margin: 0 auto;
width: 892px;
}
#past-work .item {
background: url('myportfolio-images/work_preview_border.png') no-repeat;
height: 152px;
display: block;
float: left;
margin: 0 2px;
padding: 3px;
width: 286px;
}
/**
* Footer
*/
#footer {
background: #303030;
font-size: 11pt;
margin: 20px auto 0 auto;
padding: 10px;
width: 892px;
}
#footer h2 {
margin: 0;
padding: 0;
}
#footer p {
margin: 0;
text-transform: lowercase;
}
#footer strong {
font-weight: normal;
text-transform: uppercase;
}
.lead {
font-weight: bold;
}
#footer .contact, #footer .about {
float: left;
}
#footer .contact {
width: 50%;
}
#footer .about {
width: 50%;
}
/**
* Fixes/tweaks
*/
.clear {
clear: both;
height: 0;
}
a img {
border: 0;
}
</style>
<link rel="stylesheet" href="css/typography.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
</head>
<body>
<!-- Contains and centers the page -->
<div id="background-glow">
<div id="container-wrap">
<div id="container">
<!-- Header - logo and navigation -->
<div id="header">
<!-- 'Floating' logo -->
<h1><span>myportfolio</span></h1>
<!-- Navigation -->
<ol id="navigation">
<!-- Use this id to identify the active page -->
<li id="active-page"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ol>
<div class="clear"></div>
</div>
<!-- Intro lead text -->
<div class="intro"> <img src="myportfolio-images/intro.png" alt="" /> </div>
<!-- Latest project -->
<h2 id="latest-project-title"><img src="myportfolio-images/titles/latest-project.png" alt="" /></h2>
<div id="latest-project">
<div class="preview"> <a href="#" class="changer prev"><img src="myportfolio-images/change-prev.png" alt="" /></a> <a href="#" class="changer next"><img src="myportfolio-images/change-next.png" alt="" /></a> <img src="myportfolio-images/projects/panda.png" alt="" class="image" /> </div>
<div class="descr">
<h3 class="title">Panda Sofas</h3>
<p class="description">Panda Sofas approached me with a vision. They wanted a warm interior themed website with basic functions and they wanted it in time for their grand opening a week later. Total project completion time was 48 hours of grinding but it was well worth it.</p>
<p class="actions"><a href="#">Launch</a> <a href="#">Details</a></p>
</div>
</div>
<!-- Past work -->
<h2><img src="myportfolio-images/titles/past-work.png" alt="" /></h2>
<div id="past-work">
<p class="item"><a href="#"><img src="myportfolio-images/work/reinvigorate.png" alt="" /></a></p>
<p class="item"><a href="#"><img src="myportfolio-images/work/pulse.png" alt="" /></a></p>
<p class="item"><a href="#"><img src="myportfolio-images/work/mobify.png" alt="" /></a></p>
<div class="clear"></div>
</div>
<!-- Footer -->
<div id="footer">
<div class="contact">
<h2><img src="myportfolio-images/titles/contact.png" alt="" /></h2>
<p class="lead">Whew! You made it! If you have any questions or simply want to hire me, continue reading:</p>
<p><strong>PH</strong>: 978 844 5535</p>
<p>Copyright © 2009 <a href="#">Name Here</a>. All Rights Reserved</p>
<p>Design by <a href="tutsarena.com">tutsarena</a></p>
</div>
<div class="about">
<h2><img src="myportfolio-images/titles/about.png" alt="" /></h2>
<p>I've been in the design game for about 5 years now. I honestly can't remember what got me started with web design but I know I don't regret getting into it. It's such a dynamic industry so I'm always on my toes. I'm a college student and I'm trying to make a living however I can.</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category