clearminimalist : Clear « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Clear

clearminimalist

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ClearMinimalist | About</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#f6f6f6;}
html { padding:0; margin:0;}
/* main */
.main { margin:0; padding:0;}
.main_resize { margin:0 auto; padding:0; width:945px;}
.main_resize h2 { font:normal 20px Arial, Helvetica, sans-serif; color:#3a3a3a; padding:10px 5px; margin:0;}
.main_resize h2 span { font: normal 11px Arial, Helvetica, sans-serif; color:#8f8f8f;}
.main_resize p { font:normal 12px Arial, Helvetica, sans-serif; color:#565656; line-height:1.8em; padding:5px; margin:0;}
.main_resize p span { color:#cd4c0f; font: normal 11px Arial, Helvetica, sans-serif; line-height:1.8em;}
.main_resize p.grey { font: normal 12px Arial, Helvetica, sans-serif; color:#898989; line-height:1.8em; padding:5px; margin:0;}
.main_resize a { color:#cd4c0f; text-decoration:none; font: bold 11px Arial, Helvetica, sans-serif; padding:0; margin:0;}
.main_resize img { margin:5px auto; padding:0;}
.main_resize ul { list-style:none; margin:10px 0 10px 5px; padding:0;}
.main_resize li { background:url(clearminimalist-images/ul_li.gif) left no-repeat; padding:5px 0 3px 20px; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#898989;}
.main_resize img.floated { float:left; margin:5px 5px; padding:0;}
.main_left { width:223px; float:left; padding:0; margin:0;}
.main_right { width:680px; float:right; padding:0; margin:0;}
.main_right_bg { background:#fff;  border:1px solid #efefef; padding:10px; margin:15px auto;}
.blog { width:280px; float:left; padding:0; margin:10px 30px 10px 10px;}
.blog2 { width:216px; float:left; padding:0; margin:10px 10px 30px 0; background:#f6f6f6;}
.blog2 img { padding:0 6px;}
/* logo */
.logo {padding:0; margin:0; width:223px; float:left;}
.logo img { margin:0; padding:0;}
/*menu*/
.menu { width:223px; padding:0; margin:0 auto; }
.menu ul { padding:0; margin:0; list-style:none; border:0;}
.menu ul li { display:block;  margin:0; padding:0; border:0; background:none;}
.menu ul li a { background:none; width:197px; display:block; margin:0; padding:11px 0 11px 26px; color:#111; font:normal 14px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { color:#fff;  background: url(clearminimalist-images/hover.gif) no-repeat top;}
.menu ul li a.active { color:#fff;  background:url(clearminimalist-images/hover.gif) no-repeat top;}
/* search */
.search { padding:0; margin:0; float:right; width:320px;}
.search p { font: bold 11px Arial, Helvetica, sans-serif; color:#959595; padding:7px; margin:0; float:left;}
.search form { display:block; padding:15px 0; margin:0;}
.search span { display:block; float:left; background: url(clearminimalist-images/search_bg.gif) left top no-repeat; width:180px; padding:0 5px; height:31px; margin:0;}
.search form .keywords { float:left; border:0; width:180px; padding:7px 0; height:17px; background:none; margin:0; font:normal 14px Arial, Helvetica, sans-serif; color:#9c9c9c; line-height:17px;}
.search form .button { float:left; margin:0; padding:0;}
/********** contact form **********/
#contactform { margin:0; padding:5px 5px; }
#contactform * { color:#F00; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform label { margin:0; width:150px; display:block; padding:10px 0; color:#222; font: normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.text { width:530px; border:1px solid #e9e9e9; margin:2px 0; padding:5px 2px; height:16px; background:#fff; float:left; }
#contactform textarea { width:530px; border:1px solid #e9e9e9; margin:2px 0; padding:2px; background:#fff; float:left; }
#contactform li.buttons input { padding:3px 0 3px 420px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }
/*************footer**********/
.footer_resize { width:945px; margin:0 auto; padding:10px 0;}
.footer p { text-align:center; font:normal 11px  Arial, Helvetica, sans-serif; color:#a1a1a1;}
.footer a { color:#c6c6c6; text-decoration:none;}
.footer {padding:0;  margin:0 auto;  background:#1d1d1d; border-top:1px solid #111; }

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { float:right; clear:both; border-top:1px solid #e1e1e1; width:100%; padding:0; margin:5px 0; background:none; line-height:0;}

/* Slider */
#slider {  width:678px; padding:10px 0; margin:0; background:#fff; border:1px solid #efefef;}
#slider2 {  width:678px; padding:10px 0 0 0; margin:0; background:#fff; border:1px solid #efefef;}
#slideshow { margin:0 auto; width:653px;  height: 346px; }
.slider-item { height: 346px; margin:0 auto; padding:0; }
.slider_content_inner img { border: none; margin:0 auto; }
.controls-center { width: 678px; margin:0 auto; padding:0; }
.controls-center h2 { width:350px; float:left; font: bold 14px Arial, Helvetica, sans-serif; color:#6d6d6d; padding:15px 0 0 20px; margin:0;}
.controls-center h3 { text-align:right; font: normal 36px Arial, Helvetica, sans-serif; color:#111; padding:10px 20px 15px 0; margin:0;}
.controls-center p {width:300px; float:left;  font: normal 12px Arial, Helvetica, sans-serif; color:#6d6d6d; padding:3px 0 0 20px; margin:0;}
#slider_controls { float: right; margin:0;  width:90px;}
#slider_controls ul { margin:0 auto; padding:0; width:74px;}
#slider_controls ul li { background:none; margin: 0; padding: 0; list-style: none; }
#slider_controls ul li { float: left; display: block; }
#slider_controls ul li a { width: 10px; height: 10px; background:url('clearminimalist-images/tabs_2.gif') no-repeat center center; display: block; float: left; padding:2px; margin:2px !important; margin:1px 1px; outline: none; }
#slider_controls ul li a:focus { outline: none; }
#slider_controls ul li a:hover,
#slider_controls ul li a.activeSlide { background:url('clearminimalist-images/tabs_1.gif') no-repeat center center; }

</style>


</head>
<body>
<div class="main">
  <div class="main_resize">
    <div class="main_left">
      <div class="logo"><a href="#"><img src="clearminimalist-images/logo.gif" width="223" height="72" border="0" alt="" /></a></div>
      <div class="clr"></div>
      <div class="menu">
        <ul>
          <li><a href="index.html"><span>Home</span></a></li>
          <li><a href="#"><span>Services</span></a></li>
          <li><a href="portfolio.html"><span>Portfolio</span></a></li>
          <li><a href="about.html" class="active"><span> About Us </span></a></li>
          <li><a href="contact.html"><span> Contact Us</span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
      <h2>&nbsp;</h2>
      <h2>Our News</h2>
      <p><span>12 Dec 2015 | 0 comments</span><br />
        <strong>Duis nec porttitor lorem</strong><br />
        Mauris et nisi urna nonfaucibus magna. Integer lacus ante then ullamcorper ut vulputate..</p>
      <p><span>12 Dec 2015 | 0 comments</span><br />
        <strong>Duis nec porttitor lorem</strong><br />
        Mauris et nisi urna nonfaucibus magna. Integer lacus ante then ullamcorper ut vulputate..</p>
      <h2>&nbsp;</h2>
      <h2>What They Say</h2>
      <p>&quot;Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse voluptas nulla pariatur?&quot;</p>
      <p><em><strong>by: John S., webdesigner</strong></em></p>
    </div>
    <div class="main_right">
      <div class="search">
        <form id="form1" name="form1" method="post" action="#">
          <p>Search Site:</p>
          <label><span>
          <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
          </span>
          <input name="b" type="image" src="clearminimalist-images/search.gif" class="button" />
          </label>
          <div class="clr"></div>
        </form>
      </div>
      <div class="clr"></div>
      <div id="slider2">
        <div class="controls-center">
          <h3>About Us</h3>
          <div class="clr"></div>
        </div>
        <div class="clr"></div>
      </div>
      <div class="clr"></div>
      <h2>About to company </h2>
      <p class="grey">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p class="grey">&nbsp;</p>
      <h2>Our mission</h2>
      <p class="grey">Mauris et tellus lobortis tellus fringilla faucibus. Vestibulum quis dictum ante. Proin dui est, tincidunt eget mollis in, dictum vitae elit. Nunc eu tortor purus, ac volutpat ligula. Pellentesque nisl neque, tempor eget euismod et, tempor eu urna. Curabitur vulputate condimentum ullamcorper. Vivamus interdum euismod nisi, at fringilla arcu dapibus quis.</p>
      <ul>
        <li>In auctor viverra leo, at aliquet dolor</li>
        <li> Donec ut urna arcu, ut ultricies purus</li>
        <li>Sed eu tortor eget risus auctor</li>
        <li>Morbi non nisi eget quam ultricies congue</li>
        <li>Phasellus nec nunc sed lectus varius dictum</li>
      </ul>
      <h2>Our attitude</h2>
      <p class="grey">Mauris et tellus lobortis tellus fringilla faucibus. Vestibulum quis dictum ante. Proin dui est, tincidunt eget mollis in, dictum vitae elit. Nunc eu tortor purus, ac volutpat ligula. Pellentesque nisl neque, tempor eget euismod et, tempor eu urna. Curabitur vulputate condimentum ullamcorper. Vivamus interdum euismod nisi, at fringilla arcu dapibus quis.</p>
      <p class="grey">In cursus, urna in tempus dapibus, elit sapien elementum turpis, ut semper lectus purus nec enim. Suspendisse non neque massa, eget molestie ipsum. Mauris ut elit sed nulla adipiscing hendrerit. Cras nisl turpis, consequat vel facilisis non, molestie quis nunc.Sed tristique sollicitudin odio laoreet aliquam. UtMauris et tellus</p>
      <ul>
        <li> In vitae lorem et dolor egestas feugiat.</li>
        <li> Fusce id sem lorem, sed placerat ligula.</li>
        <li>Nullam fringilla purus quis lorem euismod aliquam.</li>
      </ul>
      <p class="grey"><em> In cursus, urna in tempus dapibus, elit sapien elementum turpis, ut semper lectus purus nec enim. Suspendisse non neque massa, eget molestie ipsum. Mauris ut elit sed nulla adipiscing hendrerit. </em></p>
      <p class="grey"><em>? Cras nisl turpis, consequat vel facilisis non, molestie quis nunc.Sed tristique sollicitudin odio laoreet aliquam. UtMauris et tellus lobortis tellus fringilla faucibus. Vestibulum quis dictum ante. </em></p>
      <p class="grey"><em> Proin dui est, tincidunt eget mollis in, dictum vitae elit. Nunc eu tortor purus, ac volutpat ligula. Pellentesque nisl neque, tempor eget euismod et, tempor eu urna. Curabitur vulputate condimentum ullamcorper. ?</em></p>
      <p class="grey">&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div class="clr"></div>
  </div>
  <div class="footer">
    <div class="footer_resize">
      <p> Copyright websitename . All Rights Reserved. Home | Contact | RSS <br />
        (Blue) <a href="http://www.bluewebtemplates.com">Website Templates</a></p>
      <div class="clr"></div>
    </div>
  </div>
</div>
</body>
</html>








Related examples in the same category

1.clean&green
2.clean-and-professional
3.clean-web-2.0
4.cleandesign
5.cleangrad
6.cleaninterface
7.cleanlayout
8.cleantype
9.Clean_and_Brite
10.clearandcrisp
11.clearbreeze
12.clearfocus
13.clearfootball
14.clearpixels
15.clearsky
16.fresh-vege
17.fresh
18.FreshiFresh
19.freshmedia-01
20.freshness
21.freshscent
22.Elegant_Style
23.elegance
24.smooth
25.smoothandsleek
26.refresh