science : Technology « Templates « HTML / CSS

HTML / CSS » Templates » Technology 
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:-2200 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.pngtop center no-repeat;
  height:680px;
  position:absolute;
  width:100%;
  z-index:1;
}
.body2 {
  background:url(science-images/top.jpgtop center no-repeat #2d213c;
}
.body3 {
  background:url(science-images/line_hor1.jpgbottom repeat-x #f5f5f5;
  border-top:1px solid #fff;
}
.body4 {
  background:url(science-images/line_hor2.jpgtop repeat-x #f5f5f5;
}
.main {
  margin:auto;
  width:900px;
  position:relative;
  z-index:2;
}
{
  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.jpgno-repeat;
  font-size:24px;
  padding:0 20px;
  margin:17px 0 20px 0;
  color:#fff;
  line-height:51px;
  font-weight:300;
}
{
  padding-bottom:20px;
}
header {
  width:100%;
  overflow:hidden;
  padding-bottom:22px;
}
#logo {
  display:block;
  background:url(science-images/logo.pngno-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.pngright 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.giftop 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.gifright 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.gif56px repeat-y;
}
.list1 .box1 {
  background:url(science-images/box1.jpg0 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.jpg0 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.gif0 5px no-repeat;
}
.arrow {
  display:inline-block;
  background:url(science-images/marker_1.gif0 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.gifright 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.jpgtop center no-repeat #38294a;
}
footer .footerlink {
  position:relative;
  margin: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;
}
{
  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 &copy; 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
1.brain_tech
2.metamorph_tech
3.freecss_electronics
4.smartphone
5.spacetravel
6.spacetravelisboring
7.RobotCC
8.software
9.Sphere
10.spiderdarker
11.techjunkie1-0
12.technicalsupport
13.techno
14.technological
15.web-tech
16.webtechnologies
17.worldofwarcraft
18.iPhoneSite
19.iphone
20.linuxblog
21.infotech_growth
22.innovation
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.