shalom-typo : Design 7 « Templates « HTML / CSS

shalom-typo
  

<!DOCTYPE html>
<html>
<head>
<title>Shalom Typo | About</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*
 * Theme Name: SHALOM*TYPO
 * Theme URI: http://www.davidhellmann.com
 * Description: Theme
 * Version: 0.1
 * Author: David Hellmann
 * Author URI: http://www.davidhellmann.com
 */


/* __ Reset */

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
}


/* __Overall */

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

.noborder {
  border: none;
}

.clearboth {
  clear: both;
}


/* Clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* Clearfix Patches fr den IE */
.clearfix { display: inline-block; }

/* Vor IE5/Mac verstecken mit dem Commented Backslash Hack \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* Ende des Versteckspiels fr den IE5/Mac */


/** HIDING FOCUSRING */
a:active, a { 
  outline: none; 
}
 
:focus { 
  -moz-outline-style: none; 
}
 
:-moz-any-link:focus {
  outline: none;
}

a {
  color:#d40000;
  border-bottom: 1px dotted #000;
  cursor: pointer;
}

a:hover {
  color:#000;
  border-bottom: 2px solid #d40000;
}

a:active {
  color: #aaa;
}

h1 a, h1 a:hover {
  font-weight: normal;
  border:none;
}

/* __ Body */
html, body {
  overflow: hidden;
  color: #555;
  font:normal 13px/20px Georgia, "Times New Roman", Times, serif;
  height: 100%;
} 

/* __ Background */

#background {
  width: 100%;
  height: 100%;
  font: normal 30px/30px arial, verdana, sans-serif;
  position: absolute;
  text-align: justify;
  left: 0;
  top: 0;
  z-index: 1;
  color: #ccc;
  letter-spacing: -1px;
  overflow: hidden;
}

.georgia { font-family:Georgia, "Times New Roman", Times, serif; }
.courier-new { font-family:"Courier New", Courier, monospace; }
.arial { font-family:Arial, Helvetica, sans-serif; }
.arial-black { font-family:"Arial Black", Gadget, sans-serif; }
.tahoma { font-family:Tahoma, Geneva, sans-serif; }
.trebuchet-ms { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; }
.times-new-roman { font-family:"Times New Roman", Times, serif; }
.gray-ccc {  color: #ccc; }
.gray-aaa {  color: #aaa; }
.gray-888 {  color: #888; }
.gray-666 {  color: #666; }
.gray-444 {  color: #444; }
.gray-222 {  color: #222; }
.red {  color: #d40000; }
.small { font-size: 15px; }
.normal { font-size: 30px; }
.big {  font-size: 50px; }
.mega {
  font-size: 70px;
  letter-spacing: -2px;
  line-height: 25px;
}
.bold {  font-weight: bold; }


/* __ Page */

#page-wrapper {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 2;
  background: url(shalom-typo-images/raster.png) repeat;
}


/* __ Center Content */

#page-wrapper #content-wrapper {
  width: 940px;
  background: #fff;
  padding: 0 10px 50px 30px;
  margin: 0 auto;
}


/* __ Header */

#content-wrapper #header {
  float: left;
  width: 900px;
  margin: 0 0 80px 20px;
  padding: 100px 0 0 0;
  position: relative;
}

#header #navigation {
  position: absolute;
  right: 0px;
  top:120px;
}

#header #navigation li {
  float: left;
  margin: 0 0 0 5px;
}

#header #navigation li.trenner {
  color:#eee;
}

#header #navigation li a {
  color:#aaa;
  border: none;
  font-size: 18px;
  font-family:Georgia, "Times New Roman", Times, serif;
}

#header #navigation li a.aktiv {
  color:#000;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 25px;
}

#header #navigation li a:hover {
  color:#000;
}



/* __ Left Box */

#content-wrapper #left {
  float: left;
  clear: both;
  width: 520px;
  padding: 0 50px 0 0;
  border-right:2px dotted #eee;
  margin: 0 0 0 20px;
}

#left h4 {
  float: left;
  clear: both;
  font:italic normal 13px/18px Georgia, "Times New Roman", Times, serif;
  width: 100%;
  text-align: center;
  color: #aaa;
  margin: 0 0 10px 0;
}

#left p {
  float: left;
  clear: both;
  width: 520px;
  padding: 10px 0;
}

#left .initial {
  float: left;
  width: auto;
  clear: none;
  font-size: 100px;
  line-height: 39px;
  padding: 0;
  margin: 0 5px 10px 0;
  color: #333;
}

#left .meta, #left .autor {
  width: 100px;
  float: right;
  clear: none;
  text-align: left;
  border-left: 1px solid #555;
  font-size: 11px;
  line-height: 20px;
  padding: 0 0 0 10px;
  margin: 0 0 20px 20px;
  color: #333;
  font-family:Arial, Helvetica, sans-serif;
}

#left .autor {
  width: 50px;
  height: 50px;
}


#left blockquote {
  float: left;
  clear: both;
  width: 475px;
  padding: 0 0 0 10px;
  text-align:justify;
  color: #999;
  margin: 10px 0 10px 30px;
  border-left: 5px solid #333;
  font-family:Arial, Helvetica, sans-serif;
  font-style: italic;
}

#left .more-articles {
  float: left;
  clear: both;
  width: 520px;
  border-top:2px dotted #eee;
  margin: 40px 0 0 0;
  padding: 20px 0 0 0;
}

#left .more-articles li {
  float: left;
  width: 520px;
  margin: 10px 0 30px 0;
}

#left .more-articles li.right {
  float: right;
}

#left .more-articles li h2 {
  font-size: 25px;
  line-height: 40px;
  margin: 0 0 5px 0;
}

/* __Comments */

#left .comments {
  float: left;
  clear: both;
  width: 520px;
  border-top:2px dotted #eee;
  margin: 40px 0 0 0;
  padding: 20px 0 0 0;
}

#left .comments li {
  float: left;
  width: 520px;
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px dotted #aaa;
}

#left .comments li.admin {
  width: 480px;
  padding: 15px;
  border: 5px solid #d40000;
  background: #fefefe;
}

#left .comments li.admin p {
  width: 480px;
}

#left .comments li.form {
  width: 490px;
  padding: 15px;
  background: #000;
  color: #fff;
  float: left;
}

#left .comments li.form label, #left .comments li.form input, #left .comments li.form textarea {
  float: left;
  clear: both;
  margin: 0 0 5px 0;  
  font-family:Arial, Helvetica, sans-serif;
  font-size: 15px;
}

#left .comments li.form input, #left .comments li.form textarea {
  background: #eee;
  border: 5px solid #666;
  padding: 5px;
  width: 200px;
  float: left;
  clear: both;
}

#left .comments li.form textarea {
  width: 460px;
  float: left;
  clear: both;
}

#left .comments li.form input.button {
  background: #d40000;
  border: 5px solid #d40000;
  padding: 5px;
  float: left;
  clear: both;
  cursor: pointer;
  color: #fff;
  margin: 10px 0 0 0;
  font-weight: bold;
}

#left .comments li.form input.button:hover {
  background: #b40000;
}

#left .comments li.form input:focus, #left .comments li.form textarea:focus {
  background: #fff;
  border: 5px solid #eee;
}

#left .comments li.headline {
  border-bottom:none;
}

#left .comments li h2 {
  font-size: 25px;
  line-height: 40px;
  margin: 0 0 5px 0;
  float: left;
}

#left .comments li h3 {
  font-size: 18px;
  font-weight: normal;
  margin: 20px 0 5px 0;
  float: left;
}


/* __ Portfolio */

ul#portfolio, ul#portfolio-detail {
  float: left;
  clear: both;
  width: 940px;
}

ul#portfolio li, ul#portfolio-detail li {
  float: left;
  width: 440px;
  margin: 0 0 20px 20px;
  padding: 0 0 10px 0;
  border: none;
  border-bottom: 1px dotted #aaa;
}

ul#portfolio-detail li {
  width: 900px;
}

ul#portfolio-detail li .textbox {
  width: 280px;
  margin: 10px;
  float: left;
}

ul#portfolio-detail li .textbox h3 {
  width: 280px;
  float: left;
  font:normal 18px/25px Georgia, "Times New Roman", Times, serif;
  color: #000;
  margin: 0 0 15px 0;
}

ul#portfolio-detail li .textbox p {
  width: 280px;
  float: left;
  padding:0 0 10px 0;
}

ul#portfolio-detail li .textbox p .green {
  color: #62be00;
}




ul#portfolio li a, ul#portfolio li a:hover {
  border:none;
  margin: 0;
  padding: 0;
}

ul#portfolio li a img, ul#portfolio-detail li img {
  border: 9px solid #ddd;
  padding: 1px;
  margin: 0 0  10px 0;
}


ul#portfolio li a:hover img {
  border: 9px solid #d40000;
}

ul#portfolio li h2, ul#portfolio-detail li h2  {
  float: left;
  clear: both;
  font:normal 30px/45px Georgia, "Times New Roman", Times, serif;
  width: 100%;
  text-align: center;
  border-bottom: 4px double #000;
  color: #333;
  margin: 0 0 10px 0;
}

ul#portfolio-detail li h2  {
  width: 900px;
}

/* __ About */


ul#about {
  float: left;
  clear: both;
  width: 940px;
}

ul#about li {
  float: left;
  width: 287px;
  margin: 0 0 20px 20px;
  padding: 0 0 10px 0;
  border: none;
}

ul#about li h2  {
  float: left;
  clear: both;
  font:normal 30px/45px Georgia, "Times New Roman", Times, serif;
  width: 100%;
  text-align: center;
  border-bottom: 4px double #000;
  color: #333;
  margin: 0 0 11px 0;
}




/* __ Sidebar */

#content-wrapper #sidebar {
  float: right;
  width: 280px;
  margin: 0 20px 0 0;
}

#sidebar #cats, #sidebar #tags, #sidebar #latest-work, #sidebar #articles {
  float: left;
  width: 130px;
  padding: 10px 0;
  border-bottom: 1px dotted #aaa;
}

#sidebar #latest-work, #sidebar #articles {
  width: 280px;
}

#sidebar #articles {
  border: none;
}


#sidebar #tags {
  float: right;
}

#sidebar #cats li, #sidebar #tags li, #sidebar #latest-work li, #sidebar #articles li {
  float: left;
  clear: both;
  width: 100%;
  margin: 0 0 2px 0;
}

#sidebar #cats li a, #sidebar #tags li a, #sidebar #latest-work li a, #sidebar #articles li a {
  font-size: 13px;
}

#sidebar #latest-work li a, #sidebar #latest-work li a img {
  border: none;
}

#sidebar #latest-work li a {
  position: relative;
  display: block;
}

#sidebar #latest-work li a span {
  position: absolute;
  display: none;
}

#sidebar #latest-work li a:hover span {
  background: #fff;
  color: #000;
  padding:2px 5px;
  font:normal 11px/11px Arial, Helvetica, sans-serif;
  right: 5px;
  top: 60px;
  position: absolute;
  display: block;
}


#sidebar h2, #left h2, #sidebar #cats li.h2, #sidebar #tags li.h2, #sidebar #latest-work li.h2 {
  float: left;
  clear: both;
  font:normal 30px/45px Georgia, "Times New Roman", Times, serif;
  width: 100%;
  text-align: center;
  border-bottom: 4px double #000;
  color: #333;
  margin: 0 0 10px 0;
}

#sidebar #cats li.h2, #sidebar #tags li.h2, #sidebar #latest-work li.h2  {
  font:normal 20px/35px Georgia, "Times New Roman", Times, serif;
}

#sidebar #articles li.h3 {
  float: left;
  clear: both;
  font:bold 15px/22px Georgia, "Times New Roman", Times, serif;
  width: 100%;
  color: #333;
  margin: 0 0 5px 0;
}

#sidebar #articles li.h3 span {
  font:normal 15px/22px Georgia, "Times New Roman", Times, serif;
  color: #aaa;
}


#sidebar h3 {
  float: left;
  clear: both;
  font:bold 15px/22px Georgia, "Times New Roman", Times, serif;
  width: 100%;
  text-align: left;
  color: #333;
  margin: 10px 0 0 0;
}

#sidebar p {
  float: left;
  clear: both;
  font:italic normal  15px/22px italic Georgia, "Times New Roman", Times, serif;
  width: 100%;
  padding:0 0 10px 0;
  margin: 0 0 10px 0;
  border-bottom: 1px dotted #aaa;
  color: #777;
}


/* __ Footer */


#footer {
  float: left;
  clear: both;
  color: #fff;
  margin: 50px 0 0 20px;
}

#footer p {
  background: #000;
  padding: 2px 5px;
  width: auto;
  float: left;
  display: inline;
  clear: both;
  margin: 0 0 1px 0;
}

#footer p.big {
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif;
  padding: 4px 5px;
}

#footer p a {
  color: #fff;
  border-bottom: 2px solid #d40000;
  font-weight: bold;
}

#footer p a:hover {
  background: #d40000;
  border-bottom:2px solid #d40000;
}

































</style>


</head>
<body>
<div id="background"> Lorem ipsum dolor sit amet, <span class="georgia gray-444">David Hellmann</span> elitr, sed diam nonumy eirmod tempor invidunt ut <span class="tahoma gray-222">labore et dolore magna aliquyam</span> erat, sed <span class="arial gray-222 big bold">SHALOM</span><span class="arial red big">*</span><span class="arial gray-444 big">TYPO</span> diam voluptua. At vero eos et <span class="trebuchet-ms gray-aaa big">accusam et justo duo dolores</span> et ea rebum. <span class="courier-new gray-444">Stet clita kasd gubergren</span>, no sea <span class="arial-black gray-222 small">eum iriure dolor</span> takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor <span class="arial grad-444">sit amet</span>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span class="georgia gray-aaa big">invidunt ut labore et dolore magna</span> aliquyam erat, sed diam voluptua. At vero eos et <span class="trebuchet-ms gray-aaa big">accusam et justo duo dolores</span> et ea rebum. <span class="courier-new gray-444">Stet clita kasd gubergren</span>, no sea takimata sanctus est <span class="georgia red big">Graphicdesign</span> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <span class="trebuchet-ms red big">Webdesign</span> consetetur sadipscing elitr, sed <span class="gray-222">diam nonumy eirmod</span> tempor <span class="georgia gray-aaa big">invidunt ut labore et dolore magna</span> aliquyam erat, <span class="georgia grad-444">sed diam voluptua</span>. At vero eos et <span class="times-new-roman gray-ccc small">accusam et justo duo dolores</span> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum <span class="tahoma gray-444">dolor sit amet</span>, consetetur sadipscing elitr, sed diam nonumy <span class="courier-new grad-aaa big">eirmod tempor invidunt ut</span> labore et dolore magna <span class="arial gray-222 bold">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span> aliquyam erat, sed diam voluptua. <span class="trebuchet-ms gray-ccc big">At vero eos et accusam et justo</span> duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et <span class="trebuchet-ms gray-aaa big">accusam et justo duo dolores</span> et ea rebum. <span class="courier-new gray-444">Stet clita kasd gubergren</span>, no sea <span class="georgia red big">Graphicdesign</span> <span class="courier-new grad-aaa big">eirmod tempor invidunt ut</span> sanctus est Lorem ipsum dolor sit amet. At vero eos et <span class="trebuchet-ms gray-aaa big">accusam et</span> <span class="times-new-roman gray-444 small">Stet clita kasd gubergren</span> justo duo <span class="georgia red big">Webdesign</span> et ea rebum. <span class="courier-new gray-444">Stet clita kasd gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span class="georgia gray-aaa big">invidunt</span> ut <span class="courier-new red big">Development</span> labore <span class="tahoma gray-222 big">et dolore magna</span> aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span class="georgia gray-ccc big">invidunt ut labore et dolore magna</span> aliquyam erat, sed diam voluptua. Duis autem vel <span class="arial-black gray-222 small">eum iriure dolor</span> in hendrerit in <span class="times-new-roman gray-ccc">vulputate velit esse</span> molestie <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span> consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto <span class="times-new-roman gray-ccc">vulputate velit esse</span> <span class="times-new-roman gray-ccc">vulputate velit esse</span> qui <span class="tahoma gray-888 ">blandit praesent luptatum zzril delenit</span> augue duis dolore te feugait nulla <span class="georgia red big">Typography</span> . Lorem ipsum <span class="courier-new gray-444">Stet clita kasd gubergren</span>, sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi <span class="times-new-roman gray-aaa">consetetur sadipscing</span>enim ad minim veniam, quis <span class="arial gray-222 big bold">SHALOM</span><span class="arial red big">*</span><span class="arial gray-444 big">TYPO</span> nostrud exerci tation ullamcorper. <span class="trebuchet-ms gray-aaa small">accusam et justo duo dolores</span> et ea rebum. <span class="courier-new gray-222 big">Stet clita kasd gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet. At <span class="arial-black gray-222 small">eum iriure dolor</span> vero eos et <span class="trebuchet-ms gray-aaa big">accusam et justo duo dolores</span> et ea rebum. <span class="courier-new gray-222">Stet clita kasd gubergren</span>, no sea <span class="georgia grad-444">takimata sanctus</span> est Lorem <span class="times-new-roman gray-ccc big">ipsum dolor sit amet</span>. Lorem ipsum dolor sit amet, consetetur <span class="arial-black gray-222 small">sadipscing elitr</span>, <span class="trebuchet-ms red small">Webdesign</span> sed diam nonumy eirmod tempor <span class="georgia gray-aaa big">invidunt ut labore et dolore magna</span> aliquyam erat, <span class="courier-new grad-aaa big">eirmod tempor invidunt ut</span> sed diam voluptua. Lorem ipsum dolor sit amet, <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span> consetetur <span class="times-new-roman gray-ccc">vulputate velit esse</span> elitr, sed diam nonumy eirmod tempor <span class="arial gray-aaa small">invidunt ut labore et dolore magna</span> aliquyam erat, <span class="courier-new gray-444">Stet clita kasd gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur <span class="courier-new gray-aaa">Stet clita kasd gubergren</span>, elitr, sed diam nonumy eirmod tempor <span class="georgia gray-aaa big">invidunt</span> ut <span class="courier-new red big">Development</span> labore <span class="tahoma gray-222 big">et dolore magna</span> aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span class="georgia gray-ccc big">invidunt ut labore et dolore magna</span> aliquyam erat, sed diam voluptua. Duis autem vel <span class="arial-black gray-666 small">eum iriure dolor</span> in hendrerit in <span class="times-new-roman gray-ccc">vulputate velit esse</span> molestie <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span>. sed diam voluptua. Duis autem vel <span class="arial-black gray-222 small">eum iriure dolor</span> suscipit <span class="tahoma gray-222 small">lobortis nisl ut aliquip ex ea commodo consequat</span>. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum <span class="georgia red big">Graphicdesign</span> at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril <span class="courier-new gray-444">Stet clita kasd gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing <span class="georgia gray-aaa big">invidunt</span>, sed diam nonumy eirmod tempor <span class="georgia gray-aaa big">invidunt</span> ut <span class="courier-new red big">Development</span> labore <span class="tahoma gray-222 big">et dolore magna</span> aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span class="georgia gray-ccc big">invidunt ut labore et dolore magna</span> aliquyam erat, sed diam voluptua. Duis autem vel <span class="arial-black gray-222 small">eum iriure dolor</span> in hendrerit in <span class="times-new-roman gray-ccc">vulputate velit esse</span> molestie <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span>. delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum <span class="courier-new gray-444">Stet clita kasd gubergren</span> soluta nobis eleifend option congue <span class="trebuchet-ms gray-ccc big">nihil imperdiet doming id quod</span> mazim placerat <span class="tahoma gray-444">consetetur sadipscing</span> facer possim assum. <span class="tahoma gray-222 big">Lorem ipsum dolor sit amet</span>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in <span class="tahoma gray-888">hendrerit in vulputate</span> velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. <span class="times-new-roman gray-444 small">Stet clita kasd gubergren</span>, no sea takimata <span class="courier-new gray-444">Stet clita kasd gubergren</span> sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur <span class="times-new-roman gray-222 small">sadipscing elitr</span>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <span class="tahoma gray-aaa">sed diam voluptua</span>. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span> ipsum dolor sit amet. <span class="courier-new gray-444">Stet clita kasd gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span class="georgia gray-aaa big">invidunt</span> ut <span class="courier-new red big">Development</span> labore <span class="tahoma gray-222 big">et dolore magna</span> aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span class="georgia gray-ccc big">invidunt ut labore et dolore magna</span> aliquyam erat, sed diam voluptua. Duis autem vel <span class="arial-black gray-222 small">eum iriure dolor</span> in hendrerit in <span class="times-new-roman gray-ccc">vulputate velit esse</span> molestie <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span>. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam <span class="georgia gray-aaa big">invidunt</span> diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <span class="georgia gray-aaa big">invidunt</span> invidunt ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr <span class="courier-new gray-222">Stet clita kasd gubergren</span>, <span class="georgia gray-ccc big">sed diam <span class="tahoma gray-aaa small">accusam et justo duo dolores</span>nonumy eirmod tempor invidunt</span> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <span class="arial gray-222 big bold">SHALOM</span><span class="arial red big">*</span><span class="arial gray-444 big">TYPO</span>tempor invidunt ut <span class="trebuchet-ms red big">Webdesign</span> labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <span class="courier-new gray-444">Stet clita kasd gubergren</span> sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <span class="arial gray-222 big bold">SHALOM</span><span class="arial red big">*</span><span class="arial gray-444 big">TYPO</span>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem <span class="trebuchet-ms gray-aaa big">accusam et justo duo dolores</span> vel eum iriure dolor <span class="arial gray-222 big bold">SHALOM</span><span class="arial red big">*</span><span class="arial gray-444 big">TYPO</span>in hendrerit in vulputate <span class="courier-new gray-444">Stet clita kasd gubergren</span>, esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem <span class="times-new-roman gray-ccc">vulputate velit esse</span> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <span class="times-new-roman gray-ccc">vulputate velit esse</span> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in <span class="arial gray-222 big bold">SHALOM</span><span class="arial red big">*</span><span class="arial gray-444 big">TYPO</span>vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span> wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi <span class="times-new-roman gray-aaa">consetetur sadipscing</span>enim ad minim veniam, quis <span class="arial gray-222 big bold">SHALOM</span><span class="arial red big">*</span><span class="arial gray-444 big">TYPO</span> nostrud exerci tation ullamcorper. <span class="trebuchet-ms gray-aaa small">accusam et justo duo dolores</span> et ea rebum. <span class="courier-new gray-222 big">Stet clita kasd gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet. At <span class="arial-black gray-222 small">eum iriure dolor</span> vero eos et <span class="trebuchet-ms gray-aaa big">accusam et justo duo dolores</span> et ea rebum. <span class="courier-new gray-222">Stet clita kasd gubergren</span>, no sea <span class="georgia grad-444">takimata sanctus</span> est Lorem <span class="times-new-roman gray-ccc big">ipsum dolor sit amet</span>. Lorem ipsum dolor sit amet, consetetur <span class="arial-black gray-222 small">sadipscing elitr</span>, <span class="trebuchet-ms red small">Webdesign</span> sed diam nonumy eirmod tempor <span class="georgia gray-aaa big">invidunt ut labore et dolore magna</span> aliquyam erat, <span class="courier-new grad-aaa big">eirmod tempor invidunt ut</span> sed diam voluptua. Lorem ipsum dolor sit amet, <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span> consetetur <span class="times-new-roman gray-ccc">vulputate velit esse</span> elitr, sed diam nonumy eirmod tempor <span class="arial gray-aaa small">invidunt ut labore et dolore magna</span> aliquyam erat, <span class="courier-new gray-444">Stet clita kasd gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur <span class="courier-new gray-aaa">Stet clita kasd gubergren</span>, elitr, sed diam nonumy eirmod tempor <span class="georgia gray-aaa big">invidunt</span> ut <span class="courier-new red big">Development</span> labore <span class="tahoma gray-222 big">et dolore magna</span> aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span class="georgia gray-ccc big">invidunt ut labore et dolore magna</span> aliquyam erat, sed diam voluptua. Duis autem vel <span class="arial-black gray-666 small">eum iriure dolor</span> in hendrerit in <span class="times-new-roman gray-ccc">vulputate velit esse</span> molestie <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span>. sed diam voluptua. Duis autem vel <span class="arial-black gray-222 small">eum iriure dolor</span> suscipit <span class="tahoma gray-222 small">lobortis nisl ut aliquip ex ea commodo consequat</span>. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum <span class="georgia red big">Graphicdesign</span> at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril <span class="courier-new gray-444">Stet clita kasd gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing <span class="georgia gray-aaa big">invidunt</span>, sed diam nonumy eirmod tempor <span class="georgia gray-aaa big">invidunt</span> ut <span class="courier-new red big">Development</span> labore <span class="tahoma gray-222 big">et dolore magna</span> aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span class="georgia gray-ccc big">invidunt ut labore et dolore magna</span> aliquyam erat, sed diam voluptua. Duis autem vel <span class="arial-black gray-222 small">eum iriure dolor</span> in hendrerit in <span class="times-new-roman gray-ccc">vulputate velit esse</span> molestie <span class="arial gray-222 big">SHALOM</span><span class="arial red">*</span><span class="arial gray-444">TYPO</span>. delenit augue duis dolore te feugait nulla facilisi. </div>
<!-- Page-Wrapper -->
<div id="page-wrapper">
  <!-- Content-Wrapper -->
  <div id="content-wrapper" class="clearfix">
    <div id="header">
      <ul id="navigation">
        <li><a href="index.html">home</a></li>
        <li class="trenner">/</li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li class="trenner">/</li>
        <li><a href="blog.html">blog</a></li>
        <li class="trenner">/</li>
        <li><a class="aktiv" href="about.html">about</a></li>
        <li class="trenner">/</li>
        <li><a href="contact.html">contact</a></li>
      </ul>
      <h1><a href="#"><span class="arial gray-222 mega bold">SHALOM</span> <br />
        <span class="georgia gray-444 small">Thats the <span class="georgia red small">About</span> </span><span class="georgia gray-444 small">part, the must have infos about the author!</span></a> </h1>
    </div>
    <ul id="about">
      <li>
        <h2>About the Author</h2>
        <p> Lorem ipsum dolor sit amet, <strong>consetetur sadipscing</strong> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <strong>sanctus</strong> est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet <a href="#">clita kasd gubergren</a>, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
      </li>
      <li>
        <p> Lorem ipsum dolor sit amet, consetetur elitr, sed diam nonumy tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et <strong>accusam et justo duo dolores</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Est Lorem ipsum <strong>dolor</strong> sit amet. Lorem ipsum dolor sit amet, <strong>consetetur sadipscing</strong> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
      </li>
      <li>
        <p> Lorem <strong>ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <strong>consetetur sadipscing</strong> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore et dolore magna aliquyam erat</a>, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
      </li>
      <li class="clearboth"> <img src="about/001.jpg" alt="" /> </li>
      <li> <img src="about/002.jpg" alt="" /> </li>
      <li> <img src="about/003.jpg" alt="" /> </li>
      <li>
        <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et <strong>dolore</strong> magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
      </li>
      <li>
        <p> <em>&quot;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna <strong>aliquyam</strong> erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea <strong>takimata</strong> sanctus est Lorem ipsum dolor sit amet.&quot;</em> </p>
      </li>
      <li>
        <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <strong>invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea <strong>rebum</strong>. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
      </li>
    </ul>
    <div id="footer">
      <p class="big"> <strong>SHALOM</strong><span class="red">*</span>TYPO</p>
      <p>&copy; Copyright 2009 <strong>Site Name</strong>. All Rights Reserved</p>
      <p><a href="#">Homepage</a> | <a href="#">RSS Feed</a> | <a href="#">Twitter</a> | <a href="#">Facebook</a> | <a href="#">Extra Link</a> | <a href="#">Extra Link</a></p>
      <p> Design &amp; Development by: <strong><a href="http://www.davidhellmann.com">David Hellmann</a></strong></p>
    </div>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	SimpleSimple
2.	simplestyle_1
3.	simplestyle_2
4.	simplestyle_3
5.	simplestyle_4
6.	simplestyle_5
7.	simplestyle_6
8.	pomodoro
9.	portcentral
10.	portfolio-extended
11.	portfolio
12.	postscriptum
13.	powderpuff
14.	power
15.	precision
16.	predilection
17.	premiumseries
18.	prepaid
19.	presented
20.	pressurized
21.	prideandprejudice
22.	primitiveelement
23.	printing
24.	pristine
25.	private-lawyer-co
26.	product-landing-page
27.	production
28.	ProductPackage
29.	programme
30.	progress
31.	projection
32.	proofing
33.	Prosperity
34.	province
35.	purensimple
36.	purgatory_shuffle
37.	puzzled
38.	quadrangle
39.	quartz-istorage
40.	quatrain
41.	racetrackplaya
42.	radiance
43.	rainonleaves
44.	ramblingsoul-2
45.	ramblingsoul-9
46.	ramblingsoul3
47.	ramblingsoul4
48.	ramblingsoul5
49.	ramblingsoul7
50.	ramblingsoul_2
51.	ramblingsoul_3
52.	random
53.	rational
54.	realize
55.	realone
56.	rebel-magazine
57.	reckoning
58.	recreations
59.	reference
60.	regeneracy
61.	rehabilitation
62.	reinvent
63.	replenish
64.	republic
65.	resizeme
66.	resplendissant
67.	revolt-01
68.	ridinghood
69.	rockband
70.	rogue
71.	Rothko
72.	route66
73.	rust
74.	safe-as-houses
75.	sahara
76.	sampling
77.	Sapphire
78.	schemermag
79.	scotchmark
80.	scribbled
81.	secretlab
82.	seduction
83.	selcouth
84.	sensa
85.	settings
86.	shallowgrunge
87.	shape
88.	she
89.	showcase
90.	sifiso
91.	silenceandharmony
92.	SILK
93.	Simpatico
94.	sindromk
95.	singapore
96.	sinorcaish
97.	six-oh-six
98.	sixpence
99.	sixties_style
100.	skipopia
101.	skitemplate
102.	sky
103.	sliced
104.	slight_amnesia
105.	socialnet
106.	softenedcells
107.	solemnity
108.	solitude
109.	soloss
110.	solutions
111.	somewhere-peaceful
112.	soniatemplate
113.	space
114.	spaced
115.	spasaloon
116.	spatter
117.	speedracing
118.	spheroids
119.	spidercity
120.	splash
121.	splatt
122.	spontaneous