html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<br />
website<br />
About Me
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
My Services
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
My Tools
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
css
/* CSS Reset */
* { margin: 0 auto; padding: 0;
outline: 0;
border:none;
list-style-type: none;
}
body {
background:url(images/bg.jpg) repeat-x;
font-family: Arial, Helvetica, sans-serif;
}
#container {
width: 960px;
margin: 0 auto;
}
#header {
position:relative;
width: 100%;
bottom: 6px;
}
#header h1 {
float:left;
width:365px;
height:115px;
margin-top: 35px;
}
#header h1 a {
height: 100%;
width: 100%;
}
#header ul li h6 {
font-size: 11px;
}
#nav {
clear: both;
height: 30px;
width: 100%;
}
#nav ul {
position: absolute;
right: 180px;
top: 20px;
}
#nav ul li {
display: inline;
float: left;
}
#nav ul li a {
color: white;
display: inline;
text-decoration: none;
font-size: 16px;
font-weight: normal;
font-family: calibri, georgia, garamond, arial;
text-transform: uppercase;
text-align: right;
float: left;
padding: 10px;
}
#nav li a span {
line-height: 28px;
height: 100%;
}
#nav li a:hover, #nav li {
color: #ffc000;
cursor: pointer;
text-decoration: none;
}
#featured {
padding: 10px;
height: 340px;
width: 940px;
border:1px dashed;
color: #ffe5c4;
background-color: #562e00;
}
#featured ul {
}
#featured ul li {
float: left;
display:block;
width: 630px;
}
#featured ul li a {
display: block;
height: 350px;
}
#featured ul li.ss1 img a {
background: url(/images/featured.jpg)
}
form#quote {
background: #ce9426;
padding: 20px;
float: right;
width: 260px;
height: 300px;
}
form#quote h2 {
font-family: Trebuchet, Arial, Helvetica, sans-serif;
color: black;
font-size: 12px;
}
form#quote input, form#quote textarea {
background: url(images/noise.jpg);
color: white;
font: 12px Arial, Helvetica, sans-serif;
margin: 1px 10px 8px 2px;
padding: 10px;
width: 240px;
line-height:3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 4px 0 -6px #c4c4c4;
-moz-box-shadow:inset 0 0 6px #7a7a7a;
-webkit-box-shadow:inset 0 0 6px #7a7a7a;
box-shadow:inset 0 0 6px #7a7a7a;
resize: none;
}
form#quote textarea {
}
form#quote input.btn {
width: auto;
border: none;
padding: 1px;
margin-top: 0px;
}
#content {
font-size: 12px;
list-style: none;
}
#content .col {
float: right;
width: 258px;
background: url(./images/col-bg.jpg) repeat-x;
height: 193px;
border: 1px solid #CCC;
padding: 10px;
margin-right: 830px;
margin-top: -225px;
}
#content .col h2 {
font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #b47825;
text-decoration: none;
}
#content .col h2 span {
color: #2f2f2f;
}
#content .col img {
border: none;
padding: 2px;
float: right;
}
#content .col p {
line-height: 17px;
}
#content .col.noMargin {
margin-right: 510px;
}
#content .col.fr {
margin-right: 190px;
margin-top: -225px;
}
#twitter {
float:right;
position: absolute;
}
#facebook {
float:right;
position: relative;
margin-right: 184px;
margin-top: -597px;
}
textarea {
width: 200px;
max-width: 240px;
min-width: 240px;
height: 200px;
min-height: 45px;
max-height: 45px;
}
#footer {
clear: both;
background: url(images/footer.jpg);
height: 100px;
width: 100%;
margin-top: 40px;
}
#footerContainer {
margin: 0px auto 0;
width: 960px;
font-size: 12px;
color: #ddd;
padding-top: 20px;
position: relative;
}
#footerContainer p {
margin: 8px 0 8px;
}
#footerContainer a {
color: #ddd;
text-decoration: none;
}
#footerContainer a:hover {
text-decoration: underline;
}
form#newsletter {
position: absolute;
right: 0;
top: 20px;
width: 300px;
}
form#newsletter label {
font-weight: bold;
color: #fff;
}
form#newsletter input {
background-color: #ffebd5;
border:1px solid #ddd;
color: black;
float: left;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 0 0;
padding: 8px;
width: 190px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
form#newsletter input.btn {
width: auto;
border: none;
padding: 0;
margin-left: 3px;
}
