Team3CX-Demo1

Demo of Team3CX simple page

by Reusablecode

HTML

<link rel="stylesheet" href="http://convergeclientsolutions.com/TeamC3X/test-pages/giveaway/designer-demo1.css">
<html> 
<head> 
    <title>Free 10 day Supply of Team C3X&#8217;s Metabolic Activator</title> 

    <link rel="shortcut icon" href="http://nutri-concepts.com/favicon.ico" type="image/x-icon" />
 <!--
    <link rel="stylesheet" type="text/css" media="screen, projection" href="http://convergeclientsolutions.com/TeamC3X/test-pages/giveaway/designer-demo1.css" /> 
 -->   
   
 
</head> 
<body id="index"> 
 
<div id="main-outer"> 
    <div id="main"> 
        <div id="header" role="banner"> 
            <h1><a href="/">Team C3X</a></h1> 
 
            <ul id="nav" role="navigation"> 
                <li class="nav-home"><a title="Team C3X" href="/">Home</a></li> 
                <li class="nav-store"><a title="Shop for Waist Loss" href="http://www.nutri-concepts.com/store/">Store</a></li> 
                <li class="nav-contact"><a title="Research" href="http://www.nutri-concepts.com/research/">Research</a></li> 
                <li class="nav-contact"><a title="Contact us" href="http://www.nutri-concepts.com/contact/">Contact</a></li> 

            </ul> 
        </div><!-- end #header --> 
 
    <hr /> 
    
    <div class="section"> 
 
        <div class="col two left verso"> 
            <div class="book-desc"> 
                <h2><span class="book-author">Free 10 Day Supply of Metabolic Activator</span> <span class="book-title">Metabolic Activator</span></h2> 
                <h3 class="book-foreword"><em>Developed by Cardiologist</em> <span>Dr. Azam Anwar</span></h3> 
 
                <p class="lede">The revolutionary <a href="http://www.nutri-concepts.com/store/2350/C3X-Metabolic-Activator.aspx">Team C3X Metabolic Activator</a> is the only product of its kind, <em>developed by a cardiologist and clinical nutritionist</em> with their patient&#8217;s health and well-being in mind to not only effectively burn body fat but also support overall health...

CSS

body {
    background-color: transparent;
    padding: 10px;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    font-size: .8em;
    background: url(http://dribbble.com/images/tile.gif);
}
----------------------------------------------------------------
    B A S E
---------------------------------------------------------------- */

body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
    font-size: 12px;
    color: #333;
    background: #fff;
    border-top: 5px solid #e84324;

}

#contactFrame {
    border-top: none;
    }

/* L I N K S */

a:link, a:visited {
    color: #1e90de;
    }
    
a:hover, a:active {
    color: #e84324;
    }

/* S T R U C T U R E */

#main-outer {
    background: transparent;
    width: 100%;
    }

#main {
    width: 860px;
    padding: 0;
    margin: 0 auto;
    background: transparent;
    }

#content {
    width: 860px;
    float: left;
    background: transparent;
    }

.section {
    /*clear: both;*/
    float: left;
    border-bottom: 5px solid #f2f1e2;
    margin-bottom: 20px;
    padding: 10px 0;
    }

#product .section, #cart .section, #page .section {
    border: none;
    margin-bottom: 10px;
    }

#footer {
    float: left;
    color: #888;
    font-size: 11px;
    padding-bottom: 50px;
    }
#product #footer, #cart #footer, #page #footer {
    border-top: 5px solid #f2f1e2;
    padding-top: 20px;
    }

.one { width: 200px; }
.oneplus { width: 310px;}
.two { width: 420px; }
.three { width: 640px; }
.threeplus { width: 420px; }
.four { width: 860px; }

.left { float: left; }
.verso { padding-right: 20px; }
.recto { padding-left: 20px; }
.stack { margin-top: 25px; }
.photo { margin: 0 10px 10px 0; }
.outset-caption { margin-left: -220px; width: 200px; }
.caption {
    font-size: 11px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
   ...