simple-personal
<!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>
<!-- This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. -->
<meta name="Description" content="..." />
<meta name="Keywords" content="..." />
<meta name="robots" content="all,follow" />
<meta name="author" content="..." />
<meta name="copyright" content="Mantis-a [http://www.mantisa.cz/]" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- CSS -->
<style type='text/css'>
/* This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */
/* CSS Document */
/* General */
* { margin: 0; padding: 0; }
html { height: 100%; font-size: 62.5% }
body {
height: 100%;
background-color: #10578D;
text-align: center;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
}
a:link, a:visited {
color: #004F8B;
text-decoration: underline;
font-weight: bolder;
}
a:hover {
text-decoration: none;
}
.noscreen {
display: none;
}
/* Cleaner */
.cleaner {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}
/* Skip menu */
.hidden {
position: absolute;
top: -10000px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Images */
/* Wrapper */
#wrapper {
width: 850px;
margin: 60px auto 0 auto;
padding-bottom: 90px;
text-align: left;
}
/* Headings, paragraphs */
.title {
background-color: #282828;
letter-spacing: 1px;
width: 39em;
}
.title-top { background: url('simple-personal-img/title-top.gif') repeat-x 0 0; }
.title-left { background: url('simple-personal-img/title-left.gif') repeat-y 0 0 }
.title-right { background: url('simple-personal-img/title-right.gif') repeat-y 100% 0 }
.title-bottom { background: url('simple-personal-img/title-bottom.gif') repeat-x 0 100% }
.title-top-left { background: url('simple-personal-img/title-top-left.gif') no-repeat 0 0; }
.title-top-right { background: url('simple-personal-img/title-top-right.gif') no-repeat 100% 0; }
.title-bottom-left { background: url('simple-personal-img/title-bottom-left.gif') no-repeat 0 100%; }
.title-bottom-right { background: url('simple-personal-img/title-bottom-right.gif') no-repeat 100% 100%; }
.title p {
color: #FFFFFF;
margin: 4px 0 0 21px;
padding-bottom: 12px;
}
h1 {
font: normal 2.4em Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
padding-top: 25px;
margin-left: 20px;
}
h1 a:link, h1 a:visited {
color: #FFFFFF;
text-decoration: none;
font-weight: normal;
}
h1 span {
color: #FFB849;
}
h2 {
font: normal 1.5em Georgia, "Times New Roman", Times, serif;
color: #004F8B;
letter-spacing: 1px;
background: url('simple-personal-img/h2-bg.gif') no-repeat 0 53%;
padding-left: 25px;
margin-bottom: 7px;
}
/* Menu */
ul.menu {
list-style-type: none;
}
ul.menu li {
background: url('simple-personal-img/menu-li-divider.gif') no-repeat 50% 100%;
padding: 18px 0;
}
ul.menu li a, ul.menu li a:visited {
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
padding: 4px 7px;
}
ul.menu li a:hover, ul.menu li a.active {
background-color: #002F53;
}
ul.menu li.last {
background: none;
}
/* Content box */
.content {
width: 850px;
margin: 19px auto 0 auto;
}
.column-left {
float: left;
width: 165px;
text-align: center;
color: #FFFFFF;
}
.column-left h3 {
font: normal 1.5em Georgia, "Times New Roman", Times, serif;
margin: 10px 0 7px 0;
letter-spacing: 1px;
}
.column-right {
margin: 0 0 0 191px;
width: 650px;
}
.box-top {
background: url('simple-personal-img/box-top.gif') no-repeat 0 0;
height: 12px;
}
.box {
background: url('simple-personal-img/box-bg.gif') repeat-y 0 0;
}
.box-in {
background-color: #FFFFFF;
padding: 0.8em 0 5em 0;
margin: 0 6em 0 2em;
}
.box-in p {
line-height: 1.6;
margin: 0 0 10px 25px;
color: #242424;
}
.box-bottom {
background: url('simple-personal-img/box-bottom.gif') no-repeat 0 100%;
height: 48px;
}
ul.main-list {
list-style-type: none;
margin: 14px 0 20px 25px;
}
ul.main-list li {
line-height: 1.3;
margin-bottom: 12px;
color: #004F8B;
background: url('simple-personal-img/bullet.gif') no-repeat 0 0;
padding-left: 27px;
}
/* Footer */
.footer-info-left, .footer-info-right {
font-size: 0.8em;
color: #626262;
position: relative;
top: -7px;
display: inline;
}
.footer-info-left {
float: left;
margin-left: 17px;
}
.footer-info-right {
float: right;
margin-right: 40px;
}
.footer-info-left a, .footer-info-left a:visited, .footer-info-right a, .footer-info-right a:visited {
font-weight: normal;
color: #626262;
}
</style>
<link rel="stylesheet" href="css/style-print.css" type="text/css" media="print" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>My personal website | Homepage</title>
</head>
<body>
<div id="wrapper">
<!-- Title -->
<div class="title">
<div class="title-top">
<div class="title-left">
<div class="title-right">
<div class="title-bottom">
<div class="title-top-left">
<div class="title-bottom-left">
<div class="title-top-right">
<div class="title-bottom-right">
<h1><a href="/" title="Go to homepage">MY <span>PERSONAL</span> WEBSITE</a></h1>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Title end -->
<hr class="noscreen" />
<div class="content">
<div class="column-left">
<h3>MENU</h3>
<a href="#skip-menu" class="hidden">Skip menu</a>
<ul class="menu">
<li><a href="/" class="active">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Portfolio</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>
<div id="skip-menu"></div>
<div class="column-right">
<div class="box">
<div class="box-top"></div>
<div class="box-in">
<h2>Welcome to my website</h2>
<p>Integer metus enim, laoreet vitae, blandit sit amet, gravida eu, eros. Morbi quis enim. Sed velit.
Proin a sapien a lacus semper auctor. Maecenas faucibus aliquam diam. Duis aliquet. Donec feugiat tincidunt orci.
Aliquam suscipit. Cras vehicula sodales erat. Duis non felis.</p>
<p>Sed pharetra felis quis quam. Morbi aliquet consectetuer ligula. Curabitur velit elit, pellentesque tincidunt,
ultrices ut, ullamcorper eget, ante. Curabitur ipsum orci, cursus eget, ultricies et, fringilla in, felis.
Aliquam porta augue ac arcu. Aliquam mi. Fusce cursus lorem sed mi.</p>
<br />
<h2>Lorem ipsum dolor</h2>
<ul class="main-list">
<li>Mauris viverra, <strong>tellus sed euismod</strong> auctor</li>
<li>Cras <strong>condimentum</strong>, sapien et ultrices</li>
<li>Pellentesque habitant <strong>morbi tristique</strong> senectus</li>
<li>Nam rutrum, <strong>turpis sed ornare</strong></li>
<li>Praesent <strong>feugiat</strong>, libero eget tincidunt</li>
</ul>
</div>
</div>
<div class="box-bottom">
<hr class="noscreen" />
<div class="footer-info-left"><a href="/">My personal website</a>, 2008. All rights reserved.</div>
<div class="footer-info-right"><a href="http://www.mantisatemplates.com/">Mantis-a templates</a></div>
</div>
</div>
<div class="cleaner"> </div>
</div>
</div>
</body>
</html>
Related examples in the same category