rogue : Design 7 « Templates « HTML / CSS

HTML / CSS » Templates » Design 7 
rogue
  

<!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>Rogue | About</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@import url('reset.css');
/* General styles of the background and general style of formatting the default text */

body#home {
  background:#fff url(rogue-images/main-background-repx.jpgrepeat-x;
  background-position:left top;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#000;
  text-align:center;
}
body {
  background:#fff url(rogue-images/sec-background-repx.jpgrepeat-x;
  background-position:left top;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#000;
}
/* Style for links */

.clear {
  clear:both;
}
.max-width {
  width:100%;
}
/* Style for links at mouse over action */

{
  color:#F26522;
  font-size:12px;
  text-align:center;
}
a:hover {
  text-decoration:underline;
}
/* Style for the h1, used for titles of most of the sections */

h1 {
  display:block;
  font-size:36px;
  color:#000000;
}
h2 {
  font-size:30px;
}
h2.white {
  color:#ffffff;
}
h3 {
  font-size:24px;
}
h4, h5, h6 {
  font-size:18px;
}
{
  color:#FFF;
  line-height:20px;
  margin:10px 0px 20px 0px;
}
ul, ol {
  margin-left: 30px;
  margin-bottom:15px;
}
ul li {
  list-style-type:square;
  padding: 5px;
}
ul li ul li {
  list-style-type:disc;
}
ul li ul li ul li {
  list-style-type: circle;
}
ol li {
  list-style-type:decimal;
  padding: 5px;
}
ol li ol li {
  list-style-type: decimal-leading-zero;
}
ol li ol li ol li {
  list-style-type: lower-roman;
}
.quote {
  background:url(rogue-images/quote-left.gifno-repeat left top;
  padding-top: 10px;
  padding-left: 40px;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  font-size:11px;
  margin-bottom:15px;
}
.quote div {
  background: transparent url(rogue-images/quote-right.gifright bottom no-repeat;
  padding-right: 40px;
  padding-bottom: 10px;
  padding-left:10px;
}
pre code {
  margin: 0 0 0 40px;  /*--Left Margin--*/
  padding: 18px 0;
  display: block;
}
pre.back {
  background: url(rogue-images/code-back.gifrepeat-y left top;
  border: none;
  color: #fff;
}
/* The wrapper of the content */
.wrapper {
  width:960px;
  background: url(rogue-images/vertical-bars-background.pngno-repeat;
  background-position:left top;
  margin:auto;
  text-align:left;
}
.wrapper-sec {
  width:960px;
  background: url(rogue-images/vertical-bars-background-sec.pngno-repeat;
  background-position:left top;
  margin:auto;
  text-align:left;
}
/* Header Section */
.header {
  height:123px;
}
.logo {
  width:175px;
  height:45px;
  text-indent:-9999em;
  overflow:hidden;
  display:block;
  background:url(rogue-images/logo.pngno-repeat;
  cursor:pointer;
  float:left;
  margin-top:45px;
}
/*--Menu Begin--*/

ul.menu {
  float:right;
}
ul.menu li {
  display:inline;
}
ul.menu a {
  display:block;
  padding:0px 10px 0px 10px;
  float:left;
  margin-top:70px;
  color: #565656;
  font-weight:bold;
}
ul.menu li {
  float: left;
  margin: 0;
  padding: 0 15px 0 0;
  position: relative; /*--Declare X and Y axis base--*/
}
ul.menu li span /*--Drop down trigger styles--*/
  width: 13px;
  height: 35px;
  float: left;
  background: url(rogue-images/subnav_btn.gifno-repeat center top;
  margin-top:62px;
}
ul.menu li span.subhover {
  background-position: center bottom;
  cursor: pointer;
/*--Hover effect for trigger--*/
ul.menu li ul.subnav {
  list-style: none;
  position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
  left: 0;
  top: 90px;
  background: #333;
  margin: 0;
  padding: 0;
  display: none;
  float: left;
  width: 170px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border: 1px solid #111;
  z-index:999999;
}
ul.menu li ul.subnav li {
  margin: 0;
  padding: 0;
  border-top: 1px solid #252525/*--Create bevel effect--*/
  border-bottom: 1px solid #444/*--Create bevel effect--*/
  clear: both;
  width: 170px;
}
html ul.menu li ul.subnav li a {
  float: left;
  width: 150px;
  background: #333 url(rogue-images/dropdown_linkbg.gifno-repeat 10px center;
  padding: 10px;
  margin:0px;
}
html ul.menu li ul.subnav li a:hover /*--Hover effect for subnav links--*/
  background: #222 url(rogue-images/dropdown_linkbg.gifno-repeat 10px center;
}
ul.menu a:hover, ul.menu a.selected {
  color: #f26522;
  text-decoration:none;
}
.slider-list-links {
  float:left;
  display:block;
  list-style:none;
  margin:0;
  padding:0;
}
.slider-list-links li {
  float:left;
  margin:0;
  list-style:none;
  padding:0;
}
/*--Menu End--*/

/* Left Section */
/*--Left Menu Begin--*/

.left-menu-top ul.menu-left a {
  display:block;
  float:left;
  font-size:12px;
  margin: 0px 25px 0px 25px;
  padding-left:15px;
  color:#000;
  background:url(rogue-images/bullet.pngno-repeat left;
}
*html .left-menu-top ul.menu-left a {
  margin:0 0 0 13px;
}
.left-menu-top ul.menu-left li {
  border-bottom:1px dashed #ccc;
  width:100%;
  list-style-type:none;
  padding:0px;
  position:relative;
  float:left;
  width:100%;/*--Declare X and Y axis base--*/
}
ul.contact li span {
  line-height:normal !important;
  height:auto !important;
}
ul.contact li a.email {
  background-image:none;
  margin:0px;
  color:#F26522;
}
.left-menu-top ul.contact li {
  width:auto;
  line-height:1.5em;
  padding-bottom:15px;
  padding-left:25px;
}
ul.contact li a {
  padding:!important;
}
ul.menu-left a:hover, ul.menu-left a.selected {
  color: #f26522;
  text-decoration:none;
}
.left-menu-border {
  border:1px solid #ccc;
  padding:5px;
 *padding:5px 5px 0 5px;
  float:left;
  width:251px;
}
*html .left-menu-border {
}
.left-menu-top {
  background: url(rogue-images/menu-background-top.pngno-repeat top center;
  padding:15px 0px 0px 0px;
  float:left;
  width:253px;
}
*html .left-menu-top {
}
.left-menu-bottom {
  background: url(rogue-images/menu-background-bottom.pngno-repeat bottom center;
  float:left;
  width:253px;
  padding-bottom:10px;
 *padding-bottom:0;
}
*html .left-menu-bottom {
  margin-bottom:-15px;
  position:relative;
}
.left-menu-top ul {
  margin:0px 5px;
  float:left;
  width:243px
}
*html .left-menu-top ul {
  margin-left:0
}
.left-menu-top li {
  border-bottom:1px solid #ccc;
  width:100%;
  line-height:35px;
  list-style-type:none;
  padding:0px;
}
.left-menu-top li a {
  font-size:12px;
  padding: 0px 20px 0px 20px;
}
.left-menu-top li a:hover, .left-menu-top li a.selected {
  color:#f26522;
  text-decoration:none;
}
.search-module {
  background:url(rogue-images/search-bg.pngno-repeat top left;
  height:34px;
  width:229px;
  float:left;
  padding:20px 17px 14px 17px;
  display:block;
}
.search-module input.search-text {
  width:169px;
  border:1px solid #D1D1D1;
  color:#D1D1D1;
  padding:5px;
  float:left;
}
.project-picture {
  margin:35px 0 20px 0;
  clear:both;
}
.search-module input.submit-btn {
  background:url(rogue-images/search-btn.pngno-repeat left 2px;
  width:39px;
  height:28px;
  border:none;
  color:#fff;
  text-align:center;
  float:right;
  cursor:pointer;
}
.quick-contact {
  padding: 0px 25px 0px 25px;
  float:left;
  font-size:11px;
  margin-top:10px;
}
.quick-contact input {
  width:183px;
  background-color:#F3F3F3;
  margin-bottom:15px;
  color:#000;
  padding: 8px;
  border:1px solid #CCCCCC;
}
.quick-contact textarea {
  width:183px;
  height:102px;
  background-color:#F3F3F3;
  color:#000;
  border:1px solid #CCCCCC;
  padding: 8px;
  font-size:11px;
}
/*--Left Menu End--*/


/* Slider Section */
.slider .content {
  width:450px;
  float:left;
  padding:20px;
}
.slider .content p {
  margin:10px 0px 30px 0px;
}
a.holder-large {
  background:url(rogue-images/links-back-115px.pngno-repeat;
  background-position:left top;
  width:115px;
  height: 26px;
  display:block;
  line-height:26px;
  float:left;
  color:#F26522;
  margin-right:10px;
}
a.holder-small {
  background:url(rogue-images/round-btn-left.pngno-repeat;
  background-position:left top;
  height: 26px;
  display:block;
  line-height:26px;
  float:left;
  color:#F26522;
  float:left;
  margin-right:10px;
  padding-left:11px;
}
a.holder-small span.holder-small-repeat {
  background:url(rogue-images/round-btn-center.pngrepeat-x;
  background-position:left top;
  height: 26px;
  display:block;
  float:left;
  font-size:11px;
}
a.holder-small span.holder-small-right {
  background:url(rogue-images/round-btn-right.pngno-repeat;
  background-position:left top;
  height: 26px;
  width:11px;
  display:block;
  float:left;
}
.slider {
  width:960px;
  height:346px;
  margin-top:40px;
  overflow:hidden;
  display:block;
  float:left;
  clear:both;
  position:relative;
}
.slider .scroller {
  display:block;
  float:left;
  clear:both;
  position:relative;
  width:960px;
}
.slider .slide {
  width:960px;
  float:left;
  display:block;
  margin:auto;
}
.slider-bar {
  width:960px;
  background:url(rogue-images/slider-bar-background.pngno-repeat;
  background-position:left top;
  height:47px;
  clear:both;
}
.slider-bar-inner {
  width:851px;
  margin-left:57px;
}
.slider-bar-inner .slider-tick {
  border-left:1px solid #AEAEAE;
  height:10px;
  width:1px;
  margin-top:-10px;
  z-index:100;
}
*html .slider-bar-inner .slider-tick {
  margin-top:-13px;
}
.slider-bar-inner a {
  display:block;
  position:relative;
  top:7px;
  width:55px;
  height:24px;
  background:url(rogue-images/slider.pngno-repeat;
  background-position:center top;
  z-index:9999;
}
/* Content Section */
.content-boxes {
  background:url(rogue-images/content-background-fade.pngno-repeat;
  background-position:center top;
  width:960px;
  height:170px;
  float:left;
  padding-top:65px;
}
.content-secondary {
  background:url(rogue-images/content-background-fade.pngno-repeat;
  background-position:center top;
  width:960px;
  float:left;
  padding-top:45px;
}
.dashed-title {
  border-bottom:1px dashed #ccc;
  padding-bottom:15px;
  margin-bottom:15px;
}
.services {
  padding-bottom:20px;
}
.services p {
  color:#000;
}
.services-holder, .our-work-holder {
  width:960px;
  float:left;
  margin-top:15px;
  padding-bottom:35px;
}
.padding-top-20px {
  padding-top:20px;
}
.service-holder {
  width:445px;
}
.service-holder img {
  padding-right:20px;
}
p.error {
  color:#F26522 !important;
}
.work-holder {
  width:280px;
}
.work-holder img {
  padding:5px;
  border:1px solid #ccc;
}
.service-description {
  width:325px;
}
.top-separator {
  margin-top:35px;
}
.bottom-separator {
  margin-bottom:35px;
}
.right {
  float:right !important;
}
.left {
  float:left;
}
.border-bottom-dashed {
  border-bottom:1px dashed #B6B7B7;
}
.services-holder .border-right-dashed {
  border-right:1px dashed #B6B7B7;
  padding-right:45px;
}
.our-work-holder .border-right-dashed {
  border-right:1px dashed #B6B7B7;
  padding-right:29px;
  margin-right:29px;
}
*html .our-work-holder .border-right-dashed {
  padding-right:26px;
}
.box-holder {
  width:260px;
  float:left;
}
.margin-left {
  margin-left:90px;
}
.no-border-bottom {
  border-bottom:none !important;
}
.margin-15px {
  margin:15px 0;
}
.margin-bottom-15px {
  margin-bottom:15px;
}
.dashed-border-bottom {
  border-bottom:1px dashed #BBBBBC;
  padding-bottom:15px;
  padding-top:15px;
  float:left;
}
div.dashed-border-bottom-services {
  border-bottom:1px dashed #BBBBBC;
  padding-bottom:10px;
  padding-top:0px;
}
/* Footer Section */
.footer-content-index {
  margin:30px 0px 30px 0px;
  float:left;
  width:960px;
}
.footer-content-index div.box-holder p, .footer-content div.box-holder p {
  margin:0;
}
.footer-content-index div.box-holder p strong, .footer-content div.box-holder p strong {
  display:block;
  clear:both;
}
.footer-content-index div.box-holder p em, .footer-content div.box-holder p em {
  color:#838383;
  display:block;
  clear:both;
}
.footer-content-index div.box-holder a, .footer-content div.box-holder a {
  margin:10px 0 0 0
}
.footer-content {
  margin:30px 0px 30px 0px;
  float:left;
  width:100%;
  background:url(rogue-images/footer-content-separator.pngrepeat-x top;
}
.footer-content-secondary {
  width:960px;
  margin:auto;
  padding-top:30px;
}
.footer-content p, .footer-content-index p {
  color:#000;
}
.footer-content a, .footer-content-index a {
  color:#fff;
}
.box-holder.blog {
  background:url(rogue-images/blog-icn.pngno-repeat;
  background-position:right top;
}
.box-holder.twitter {
  background:url(rogue-images/twitter-icn.pngno-repeat;
  background-position:right top;
}
.box-holder.contact {
  background:url(rogue-images/contact-icn.pngno-repeat;
  background-position:right top;
}
.footer-holder {
  background:url(rogue-images/footer-line.gifrepeat-x;
  background-position:right top;
  width:100%;
  float:left;
}
.footer {
  margin: auto;
  width:960px;
  height:80px;
  position:relative;
  padding-top:20px;
}
.footer p {
  color:#000;
  margin:0px;
}
.footer a.rss {
  display: block;
  float:right;
  background:url(rogue-images/rss.pngno-repeat;
  background-position:right top;
  padding-right:35px;
  height:30px;
  line-height:30px;
  font-size:11px;
}
.footer a.back-top {
  display: block;
  background:url(rogue-images/back-top.pngno-repeat;
  background-position:left top;
  height:24px;
  width: 24px;
  text-indent:-9999em;
  overflow:hidden;
  position:absolute;
  left:444px;
  top:12px;
}
.left-column {
  width:263px;
  float:left;
}
/* Right Section */
.right-column {
  float:right;
  width:602px;
}
.right-column p {
  color:#000;
}
.right-column img {
  margin:20px;
}
div.project-gallery {
  float:right;
  width:516px;
}
div.project-gallery img {
  padding:5px;
  border:1px solid #D0D0D0;
  margin:15px 0 10px;
}
div.project-gallery-thumbs {
  float:left;
}
div.project-gallery-thumbs a {
  float:left;
}
div.project-description {
  float:left;
  width:400px;
}
.padding-right-5px {
  padding-right:4px;
}
img.project-picture-thumb {
  display:block;
  float:left;
  padding:4px !important;
  margin:!important;
}
.quick-contact input.send {
  background:url(rogue-images/links-back-90px.pngno-repeat left 2px;
  width:90px;
  height: 28px;
  line-height:26px;
  text-align:center;
  display:block;
  padding:0;
  color:#F26522;
  cursor:pointer;
  border:none;
  margin-top:15px;
}
.padding-top-15px {
  padding-top:15px;
}
.contact-form-top-bg {
}
form.contact-form {
  float:left;
  width:270px;
  padding-left:25px;
}
form.contact-form input, form.contact-form textarea {
  display:block;
  color:#fff;
  background:#5C5F62;
  width:260px;
  margin:10px 0;
  padding:5px;
}
form.contact-form textarea {
  height:95px;
  border:none;
}
form.contact-form input.send {
  background:url(rogue-images/contact-btn.pngno-repeat bottom center;
  color:#F16521;
  width:90px;
  height:30px;
  cursor:pointer;
}
.contact-details {
  float:right;
  width:216px;
  margin-right:30px;
}
.contact-form-top-bg {
  background:#fff url(rogue-images/contact-form-top-bg.pngno-repeat center 5px;
  width:592px;
  padding:5px;
  border:1px solid #CCCCCC;
  float:left;
  display:block;
}
.contact-form-bottom-bg {
  background:url(rogue-images/contact-form-bottom-bg.pngno-repeat bottom center;
  width:590px;
  float:left;
  display:block;
}
*html .contact-form-bottom-bg {
  position:relative;
  margin-bottom:-5px;
}
.title-border-dashed {
  padding-bottom:15px;
  border-bottom:1px solid #CCCCCC;
  margin-bottom:15px;
}
.title-border-dashed h3 {
  font-size:18px !important;
  margin-left:25px;
}
.post-data {
}
.post-data a {
  color:#F16521;
  font-size:12px;
}
.post-content {
  margin-bottom:70px;
}
.post-content img {
  border:1px solid #D0D0D0;
  margin:15px 0;
}
.post-content a.continue-reading-link, .post-content a.post-comments-link {
  font-weight:bold;
  color:#F16521;
}
*html .project-gallery #main_image {
  margin:auto 30px;
}
/* sIFR styles */

.sIFR-flash {
  visibility: visible !important;
  margin: 0;
}
.sIFR-replaced {
  visibility: visible !important;
}
span.sIFR-alternate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}
/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}
/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
  visibility: hidden;
}
.sIFR-hasFlash h2 {
  visibility: hidden;
  font-size: 30px;
}
.sIFR-hasFlash h3 {
  visibility: hidden;
  font-size: 24px;
}
.sIFR-hasFlash h4 {
  visibility: hidden;
  font-size: 18px;
}
.sIFR-hasFlash h5#pullquote {
  letter-spacing: -4px;
  visibility: hidden;
  font-size: 24px;
}


</style>


<script src="sifr/sifr.js" type="text/javascript"></script>
<script src="sifr/sifr-addons.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<link rel="stylesheet" type="text/css" href="css/styleIE6.css">
<script>DD_belatedPNG.fix('*')</script>
<![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="wrapper-sec">
  <div class="header"><a class="logo" href="#">Rogue</a>
    <ul class="menu">
      <li><a href="index.html">home</a></li>
      <li><a class="selected" href="about.html">company</a>
        <ul class="subnav">
          <li><a href="#">Sub Nav Link</a></li>
          <li><a href="#">Sub Nav Link</a></li>
          <li><a href="#">Sub Nav Link</a></li>
          <li><a href="#">Sub Nav Link</a></li>
          <li><a href="#">Sub Nav Link</a></li>
        </ul>
      </li>
      <li><a href="services.html">services</a></li>
      <li><a href="our-work.html">our work</a></li>
      <li><a href="blog.html">blog</a></li>
      <li><a href="contact.html">contact</a></li>
    </ul>
  </div>
  <div class="content-secondary">
    <div class="left-column">
      <div class="left-menu-border">
        <div class="left-menu-top">
          <div class="left-menu-bottom">
            <div class="title-border-dashed">
              <h3>Company</h3>
            </div>
            <ul class="menu-left">
              <li><a href="#" class="selected">Subcategory 1</a></li>
              <li><a href="#">Subcategory 2</a></li>
              <li><a href="#">Subcategory 3</a></li>
              <li class="no-border-bottom"><a href="#">Subcategory 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="left-menu-border margin-15px">
        <div class="left-menu-top">
          <div class="left-menu-bottom">
            <div class="title-border-dashed">
              <h3>Quick Contact Form</h3>
            </div>
            <form action="#" method="post" class="quick-contact">
              <label for="name">Name:</label>
              <input type="text" name="name" value="" />
              <input type="text" name="middle-name" style="display:none;" />
              <label for="name">Email:</label>
              <input type="text" name="email" value="" />
              <label for="name">Message:</label>
              <textarea rows="10" cols="20" name="message"></textarea>
              <center>
                <input type="submit" value="Send" class="send" />
              </center>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="right-column">
      <div class="dashed-title">
        <h1>Heading 1</h1>
      </div>
      <div class="dashed-title">
        <h2>Heading 2</h2>
      </div>
      <div class="dashed-title">
        <h3>Heading 3</h3>
      </div>
      <div class="dashed-title">
        <h4>Heading 4</h4>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula lectus, convallis a lacinia sed, sodales id urna. Mauris suscipit, lorem a vehicula sodales, mauris enim vulputate leo, ut interdum dolor justo ut massa. Ut nibh justo, ultricies at mattis ut, iaculis ut risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis metus id metus pretium egestas.</p>
      <p><em>Mauris suscipit, lorem a vehicula sodales, mauris enim vulputate leo, ut interdum dolor justo ut massa. Ut nibh justo, ultricies at mattis ut, iaculis ut risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis metus id metus pretium egestas</em></p>
      <img class="right" src="rogue-images/demo-image-company.jpg" alt="" />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula lectus, convallis a lacinia sed, sodales id urna. Mauris suscipit, lorem a vehicula sodales, mauris enim vulputate leo, ut interdum dolor justo ut massa. Ut nibh justo, ultricies at mattis ut, iaculis ut risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis metus id metus pretium egestas.</p>
      <div class="dashed-title">
        <h2>All the elements</h2>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula lectus, convallis a lacinia sed, sodales id urna.</p>
      <div class="dashed-title">
        <h3>UL Styling</h3>
      </div>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li><strong>Aliquam posuere arcu in ipsum tincidunt viverra.</strong> </li>
        <li>Vestibulum malesuada ultricies metus, eu hendrerit libero semper a.</li>
        <li>Mauris in magna sit amet felis vulputate mollis.</li>
      </ul>
      <div class="dashed-title">
        <h3>OL Styling</h3>
      </div>
      <ol>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li><strong>Aliquam posuere arcu in ipsum tincidunt viverra.</strong> </li>
        <li>Vestibulum malesuada ultricies metus, eu hendrerit libero semper a.</li>
        <li>Sed nec felis vel felis malesuada tincidunt ut vitae lacus.</li>
      </ol>
      <div class="dashed-title">
        <h3>Quote Styling</h3>
      </div>
      <div class="quote">
        <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget felis nisl. Sed eu pharetra nunc. Ut mollis, justo at bibendum tristique, mauris tellus vulputate arcu, ac elementum lacus arcu ac enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula lectus, convallis a lacinia sed, sodales id urna. <br />
          <strong>Name &amp; Surname</strong><br />
          <em>Company position</em> </div>
      </div>
      <div class="quote">
        <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget felis nisl. Sed eu pharetra nunc. Ut mollis, justo at bibendum tristique, mauris tellus vulputate arcu, ac elementum lacus arcu ac enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula lectus, convallis a lacinia sed, sodales id urna. <br />
          <strong>Name &amp; Surname</strong><br />
          <em>Company position</em> </div>
      </div>
      <div class="dashed-title">
        <h3>Pre Styling</h3>
      </div>
      <pre class="back">
            <code>pre code {
  margin: 0 0 0 40px;  /*--Left Margin--*/
  padding: 18px 0;
  display: block;


pre.back {
  background: url(../rogue-images/code-back.gifrepeat-y left top;
  border: none;
  color: #fff;
}
            </code></pre>
    </div>
  </div>
</div>
<div class="clear"></div>
<div class="footer-content">
  <div class="footer-content-secondary">
    <div class="box-holder blog">
      <h3>From the blog</h3>
      <div class="dashed-border-bottom">
        <p><strong>Lorem ipsum dolor sit amet, consectetur</strong> Praesent sed lectus eget urna malesuada</p>
        <a class="holder-small" href="#"><span class="holder-small-repeat">Read more ...</span><span class="holder-small-right"></span></a> </div>
      <div class="no-border-bottom dashed-border-bottom">
        <p><strong>Lorem ipsum dolor sit amet, consectetur</strong> Praesent sed lectus eget urna malesuada</p>
        <a class="holder-small" href="#"><span class="holder-small-repeat">Read more ...</span><span class="holder-small-right"></span></a> </div>
    </div>
    <div class="box-holder twitter margin-left">
      <h3>From Twitter</h3>
      <div class="dashed-border-bottom">
        <p><strong>Lorem ipsum dolor sit amet, consectetur</strong> <em>about hours</em></p>
      </div>
      <div class="no-border-bottom dashed-border-bottom">
        <p><strong>Lorem ipsum dolor sit amet, consectetur</strong> <em>about hours</em></p>
        <a class="holder-small" href="#"><span class="holder-small-repeat">Follow us on Twitter</span><span class="holder-small-right"></span></a> </div>
    </div>
    <div class="box-holder right contact">
      <h3>Contact us</h3>
      <div class="dashed-border-bottom margin-bottom-15px">
        <p><strong>Address goes here</strong> <em>Lorem ipsum dolor sit amet, consectetur adipi</em></p>
      </div>
      <p> <em>T: 500.555.555</em> <em>E: office@rogue.com</em> </p>
      <a class="holder-small" href="#"><span class="holder-small-repeat">Contact details ...</span><span class="holder-small-right"></span></a> </div>
  </div>
</div>
<div class="clear"></div>
<div class="footer-holder">
  <div class="footer">
    <p class="left">Copyright &copy; 2010 <a href="#">Domain Name</a> - All Rights Reserved</p>
    <p class="right"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.gogothemes.com/">GogoThemes</a></p>
    <div class="clear"></div>
  </div>
</div>
<script type="text/javascript">
if (typeof sIFR == "function") {
    sIFR.replaceElement(named({ sSelector: "body h1", sFlashSrc: "sifr/h1.swf", sColor: "#000000", sLinkColor: "#000000", sBgColor: "#FFFFFF", sHoverColor: "#000000", sWmode: "transparent" }));
    sIFR.replaceElement(named({ sSelector: "body .box-holder h2.white", sFlashSrc: "sifr/h2.swf", sColor: "#ffffff", sLinkColor: "#ffffff", sBgColor: "#FFFFFF", sHoverColor: "#6F6F6F", sWmode: "transparent" }));
    sIFR.replaceElement(named({ sSelector: "body h2", sFlashSrc: "sifr/h2.swf", sColor: "#000000", sLinkColor: "#C90000", sBgColor: "#FFFFFF", sHoverColor: "#6F6F6F", sWmode: "transparent" }));
    sIFR.replaceElement(named({ sSelector: "body .title-border-dashed h3", sFlashSrc: "sifr/h3-sidebox.swf", sColor: "#000000", sLinkColor: "#000000", sBgColor: "#FFFFFF", sHoverColor: "#32A700", sWmode: "transparent" }));
    sIFR.replaceElement(named({ sSelector: "body h3", sFlashSrc: "sifr/h3.swf", sColor: "#000000", sLinkColor: "#0D112F", sBgColor: "#FFFFFF", sHoverColor: "#0D112F", sWmode: "transparent" }));
    sIFR.replaceElement(named({ sSelector: "body h4", sFlashSrc: "sifr/h4.swf", sColor: "#000000", sLinkColor: "#000000", sBgColor: "#FFFFFF", sHoverColor: "#000000", sWmode: "transparent" }));
    sIFR.replaceElement(named({ sSelector: "body h4.subhead", sFlashSrc: "sifr/h4-subhead.swf", sColor: "#0D112F", sLinkColor: "#0D112F", sBgColor: "#FFFFFF", sHoverColor: "#0D112F", sWmode: "transparent" }));
};
</script>
<!-- END PAGE SOURCE -->
</body>
</html>

   
    
  
Related examples in the same category
1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
62.reinvent
63.replenish
64.republic
65.resizeme
66.resplendissant
67.revolt-01
68.ridinghood
69.rockband
70.Rothko
71.route66
72.rust
73.safe-as-houses
74.sahara
75.sampling
76.Sapphire
77.schemermag
78.scotchmark
79.scribbled
80.secretlab
81.seduction
82.selcouth
83.sensa
84.settings
85.shallowgrunge
86.shalom-typo
87.shape
88.she
89.showcase
90.sifiso
91.silenceandharmony
92.SILK
93.Simpatico
94.sindromk
95.singapore
96.sinorcaish
97.six-oh-six
98.sixpence
99.sixties_style
100.skipopia
101.skitemplate
102.sky
103.sliced
104.slight_amnesia
105.socialnet
106.softenedcells
107.solemnity
108.solitude
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous
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.