Team3CX-Demo 0.5

Demo of Team3CX simple page

by Reusablecode

HTML

<link rel="stylesheet" href="http://convergeclientsolutions.com/TeamC3X/test-pages/giveaway/designer-demo1.css">

<head> 
    <title>Free 10 day Supply of Team C3X&#8217;s Metabolic Activator</title> 
    
    
    
    
</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 and well-being with your fast-paced lifestyle.</p>
                       ...

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;
    color:...