wedding 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wedding | Contact Us</title>
<meta charset="utf-8">
<style type='text/css'>
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
.left {
float:left;
}
.right {
float:right;
}
.wrapper {
width:100%;
overflow:hidden;
}
body {
background:url(wedding-images/bg_img.jpg) top center no-repeat #fff;
border:0;
font:13px Arial, Helvetica, sans-serif;
color:#383838;
line-height:20px;
}
.inner_copy, .inner_copy a {
border:0;
float:right;
background:#fff;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0 0;
overflow:hidden;
padding:0;
}
.css3 {
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow:0 0 4px rgba(0, 0, 0, .4);
-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);
-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);
behavior:url(js/PIE.htc);
position:relative;
}
.main {
margin:0 auto;
width:880px;
}
.block {
height:104px;
}
.extra {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -104px;
}
body, html {
height:100%;
}
a {
color:#ad1912;
text-decoration:underline;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
padding:57px 0 0 96px;
}
h2 {
font-size:26px;
color:#383838;
line-height:34px;
padding:18px 0 9px 0;
letter-spacing:-1px;
}
h2 span {
color:#ad1912;
}
p {
padding-bottom:20px;
}
header {
height:276px;
width:100%;
overflow:hidden;
}
#logo {
display:block;
background:url(wedding-images/logo.jpg) no-repeat;
width:303px;
height:116px;
text-indent:-5000px;
}
#menu {
width:100%;
overflow:hidden;
padding-top:33px;
}
#menu li {
float:left;
padding-right:23px;
margin-right:22px;
background:url(wedding-images/menu_line.gif) right top no-repeat;
}
#menu .bg_none {
background:none;
}
#menu li a {
font-size:20px;
font-weight:300;
color:#383838;
line-height:28px;
display:block;
text-decoration:none;
}
#menu li a:hover, #menu #menu_active a {
color:#ad1912;
}
#content {
width:100%;
overflow:hidden;
padding-bottom:9px;
}
.pad_left1 {
padding-left:50px;
}
.marg_right1 {
margin-right:18px;
}
.marg_bot1 {
margin-bottom:20px;
}
.pad_bot1 {
padding-bottom:6px;
}
.pad_top1 {
padding-top:6px;
}
.button {
border:1px solid #d9d9d9;
display:inline-block;
line-height:32px;
text-decoration:none;
background:url(wedding-images/button1.gif) top repeat-x #fff;
padding:0 15px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
position:relative;
}
.button:hover {
background:#ad1912;
color:#fff;
border:1px solid #ad1912;
}
.line1 {
background:url(wedding-images/line_ver1.gif) 266px 0 repeat-y;
}
.list1 li {
line-height:22px;
}
.list1 li a {
padding-left:11px;
background:url(wedding-images/marker_1.gif) 0 6px no-repeat;
}
.color1 {
color:#ad1912;
}
.gallery {
margin-left:-1px;
width:881px;
}
.gallery li {
float:left;
padding-right:15px;
width:113px;
}
.gallery li a {
margin-bottom:16px;
display:block;
}
.gallery .no_pad {
padding:0;
}
#ContactForm {
padding-top:6px;
}
#ContactForm a {
margin-right:5px;
margin-left:5px;
float:right;
padding:0 22px;
}
#ContactForm .input {
float:right;
margin-right:5px;
width:460px;
height:16px;
border:1px solid #d9d9d9;
background:#fefeff;
padding:2px 5px;
margin-bottom:8px;
color:#383838;
font:13px Arial, Helvetica, sans-serif;
}
#ContactForm textarea {
overflow:auto;
float:right;
margin-right:5px;
width:460px;
height:325px;
border:1px solid #d9d9d9;
background:#fefeff;
padding:2px 5px;
margin-bottom:11px;
color:#383838;
font:13px Arial, Helvetica, sans-serif;
}
footer {
margin:0 auto;
width:880px;
padding:30px 0;
background:url(wedding-images/bg_bot.jpg) bottom center no-repeat;
font-size:smaller;
}
.footerlink {
padding:0 30px;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#666666;
}
.footerlink a {
color:#666666;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background:transparent;
}
.footerlink a:hover {
color:#666666;
background:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
</style>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/ie6_script_other.js"></script>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page5">
<!-- START PAGE SOURCE -->
<div class="extra">
<div class="main">
<header>
<nav>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="details.html">Details</a></li>
<li><a href="links.html">Links</a></li>
<li id="menu_active" class="bg_none"><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<h1><a href="index.html" id="logo">Wedding personal page</a></h1>
</header>
<section id="content">
<article class="col1">
<h2><span>Contact</span> Form</h2>
<form id="ContactForm" action="#">
<div>
<div class="wrapper">
<input type="text" class="input" />
Name:<br />
</div>
<div class="wrapper">
<input type="text" class="input" />
Email:<br />
</div>
<div class="wrapper">
<textarea name="textarea" cols="1" rows="1"></textarea>
Message:<br />
</div>
<a href="#" class="button">Send</a> <a href="#" class="button">Clear</a> </div>
</form>
</article>
<article class="col2 pad_left1">
<h2><span>Contact</span> Us</h2>
<div class="wrapper pad_top1">
<p class="cols"> Country:<br>
City:<br>
Telephone:<br>
Email: </p>
<p> USA<br>
San Diego<br>
+354 5635600<br>
<a href="#">wedding@mail.com</a> </p>
<h2><span>Miscellaneous</span> Info</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.</p>
</div>
</article>
</section>
</div>
<div class="block"></div>
</div>
<footer>
<div class="footerlink">
<p class="lf">Copyright © 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.templatemonster.com/">TemplateMonster</a></p>
<div style="clear:both;"></div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category