science
<!DOCTYPE html>
<html lang="en">
<head>
<title>Science | Contacts</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;
}
.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;
}
body {
background:#fff;
border:0;
font:13px Arial, Helvetica, sans-serif;
color:#4e4e4e;
line-height:20px;
}
.body1 {
background:url(science-images/bg_img2.png) top center no-repeat;
height:680px;
position:absolute;
width:100%;
z-index:1;
}
.body2 {
background:url(science-images/top.jpg) top center no-repeat #2d213c;
}
.body3 {
background:url(science-images/line_hor1.jpg) bottom repeat-x #f5f5f5;
border-top:1px solid #fff;
}
.body4 {
background:url(science-images/line_hor2.jpg) top repeat-x #f5f5f5;
}
.main {
margin:0 auto;
width:900px;
position:relative;
z-index:2;
}
a {
color:#a369c4;
text-decoration:underline;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
padding:21px 0 0 20px;
}
h2 {
font-size:28px;
font-weight:bold;
font-weight:300;
color:#4e4e4e;
padding:29px 0 27px 0;
line-height:38px;
}
h2 span {
display:block;
margin-top:-10px;
}
h3 {
background:url(science-images/box2.jpg) no-repeat;
font-size:24px;
padding:0 20px;
margin:17px 0 20px 0;
color:#fff;
line-height:51px;
font-weight:300;
}
p {
padding-bottom:20px;
}
header {
width:100%;
overflow:hidden;
padding-bottom:22px;
}
#logo {
display:block;
background:url(science-images/logo.png) no-repeat;
width:192px;
height:58px;
text-indent:-5000px;
}
#menu {
float:right;
padding-top:30px;
padding-bottom:5px;
}
#menu li {
float:left;
padding-right:9px;
background:url(science-images/menu_line.png) right 6px no-repeat;
margin-right:8px;
}
#menu .bg_none {
background:none;
padding:0;
margin:0;
}
#menu li a {
display:block;
font-size:16px;
font-weight:400;
color:#fff;
line-height:31px;
padding:0 9px;
text-decoration:none;
position:relative;
behavior:url(js/PIE.htc);
}
#menu li a:hover, #menu #menu_active a {
background:url(science-images/menu_bg.gif) top repeat-x #b3b3b3;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:3px 3px 5px #402f55;
-moz-box-shadow:3px 3px 5px #402f55;
-webkit-box-shadow:3px 3px 5px #402f55;
color:#673f85;
}
.text1 {
font-size:30px;
font-weight:300;
color:#fff;
line-height:39px;
padding:24px 0 15px 0;
}
.text1 span {
display:block;
margin-top:-10px;
}
header p {
color:#9688a7;
padding-bottom:17px;
}
header .link1 {
text-decoration:none;
}
header .link1:hover {
text-decoration:underline;
}
#content_top {
width:100%;
overflow:hidden;
padding-bottom:20px;
}
#content {
width:100%;
overflow:hidden;
padding-bottom:52px;
}
.pad_left1 {
padding-left:37px;
}
.pad_left2 {
padding-left:20px;
}
.pad_bot1 {
padding-bottom:20px;
}
.pad_bot2 {
padding-bottom:10px;
}
.pad {
padding:0 20px;
}
.marg_right1 {
margin-right:25px;
}
.marg_top {
margin-top:-15px;
}
.link1 {
padding-right:15px;
display:inline-block;
background:url(science-images/marker_1.gif) right 7px no-repeat;
}
.list1 {
padding:38px 0 6px 0;
}
.list1 li {
line-height:19px;
width:100%;
overflow:hidden;
margin-bottom:14px;
background:url(science-images/line_ver1.gif) 56px 0 repeat-y;
}
.list1 .box1 {
background:url(science-images/box1.jpg) 0 0 no-repeat;
float:left;
font:20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#f2f2f2;
font-weight:bold;
line-height:41px;
width:41px;
text-align:center;
margin-right:35px;
}
.list2 {
margin:-5px 0;
}
.list2 li {
line-height:30px;
padding-left:28px;
background:url(science-images/marker_2.jpg) 0 5px no-repeat;
}
.list2 li a {
color:#4e4e4e;
}
.list3 li {
line-height:30px;
}
.list3 li a {
padding-left:10px;
background:url(science-images/marker_3.gif) 0 5px no-repeat;
}
.arrow {
display:inline-block;
background:url(science-images/marker_1.gif) 0 7px no-repeat;
height:19px;
width:6px;
margin-left:6px;
}
.color1 {
color:#8e8e8e;
}
#ContactForm {
margin-top:-15px;
width:860px;
}
#ContactForm p {
line-height:24px;
padding-bottom:6px;
width:104px;
float:left;
}
#ContactForm a {
margin-left:24px;
margin-top:8px;
}
#ContactForm .input {
float:left;
width:307px;
height:16px;
border:1px solid #d5d5d5;
background:#fff;
padding:3px 6px;
margin-bottom:6px;
color:#4e4e4e;
font:13px Arial, Helvetica, sans-serif;
}
#ContactForm textarea {
overflow:auto;
float:left;
width:742px;
height:350px;
border:1px solid #d5d5d5;
background:#fff;
padding:3px 6px;
margin-bottom:0;
color:#4e4e4e;
font:13px Arial, Helvetica, sans-serif;
}
#footer_menu ul {
width:100%;
overflow:hidden;
text-align:center;
}
#footer_menu li {
display:inline;
padding-right:21px;
background:url(science-images/footer_line.gif) right center no-repeat;
margin-right:20px;
overflow:hidden;
line-height:42px;
}
#footer_menu .bg_none {
background:none;
padding:0;
margin:0;
}
#footer_menu li a {
display:inline-block;
color:#4e4e4e;
padding:0 39px;
line-height:42px;
}
footer {
margin:0;
padding:0;
color:#dfd2e7;
text-align:center;
padding:35px 0;
background:url(science-images/bot.jpg) top center no-repeat #38294a;
}
footer .footerlink {
position:relative;
margin:0 auto;
width:850px;
z-index:2;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#dfd2e7;
}
.footerlink a {
color:#dfd2e7;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#dfd2e7;
background-color: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>
<script type="text/javascript" src="js/Myriad_Pro_400.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="body1"></div>
<div class="body2">
<div class="main">
<header>
<div class="wrapper">
<nav>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="researches.html">Researches</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="events.html">Events</a></li>
<li id="menu_active" class="bg_none"><a href="contacts.html">Contacts</a></li>
</ul>
</nav>
<h1><a href="#" id="logo">science</a></h1>
</div>
<div class="wrapper">
<article class="col1 pad_left2">
<div class="text1">Discovering New Ways <span>of Scientific Thinking</span></div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis prae sentium voluptatum deleniti atque corrupti quos dolores et quas molestias excep turi sint occaecati cupiditate non provident. <a href="#" class="link1">Read More</a> </p>
</article>
</div>
</header>
</div>
</div>
<div class="body3">
<div class="main">
<section id="content_top">
<article class="pad_left2 col3">
<h2>Our Contacts</h2>
<p class="marg_top"> <strong>Country:</strong>USA<br>
<strong>State:</strong>California<br>
<strong>City:</strong>San Diego<br>
<strong>Telephone:</strong>+354 5635600<br>
<strong>Email:</strong><a href="#">smartnet@mail.com</a> </p>
</article>
<article class="pad_left1 col2">
<h2>Miscellaneous Info:</h2>
<p class="marg_top">Namlibero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudi andae sint et molestiae non recusandae itaque earum rerum hic. Namlibero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo.</p>
</article>
</section>
</div>
</div>
<div class="main">
<section id="content">
<article class="pad_left2">
<h2>Contact Form</h2>
<form id="ContactForm" action="#">
<div class="wrapper">
<div class="wrapper">
<p>Your Name:</p>
<input type="text" class="input" />
</div>
<div class="wrapper">
<p>Your E-mail:</p>
<input type="text" class="input" />
</div>
<div class="wrapper">
<p>Your Message:</p>
<textarea cols="1" rows="1"></textarea>
</div>
<div class="wrapper"> <a href="#" class="link1 right">Send</a> <a href="#" class="link1 right">Clear</a> </div>
</div>
</form>
</article>
</section>
</div>
<div class="body4">
<div class="main">
<div id="footer_menu">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Researches</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Events</a></li>
<li class="bg_none"><a href="#">Contacts</a></li>
</ul>
</nav>
</div>
</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