prod page

by alga noto

HTML

<div class="content-container">
    <ul class="side-menu">
        <li><a class="active" href="#aboutus">About</a>

        </li>
        <li><a href="#missao">Medical Kits</a>

        </li>
        <li><a href="#equipo">Hospital Equipment</a>

        </li>
    </ul>
    <div class="content"><a name="aboutus"><h1>About</h1></a>

        <p>With more than 38 years of experience, Missionpharma has become the leading supplier of generic medicine and medical devices to developing countries worldwide counting among his main partners and customers institutions like World Bank, NGO’s and Ministrys of Health in several countries such as Angola, Cambodja, Zambia, Mocambique among others). Its efficiency, quick delivery and professional human resources allow MP to bring integrated solutions: comprehensive medical kits or specialized ones -like delivery kits (in different types like conventional, cesarea and traitional), diarrhea, male circumcision,HIV exposure, etc
We hold the sole representation of Mission Pharma in Angola, and we provide medical kits for different needs.</p> 
  
        <a name="missao"><h1>Medical Kits</h1></a>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        
    </div>
</div>
<script>
    jQuery('a').click(function() {
        jQuery(this).addClass('active');
        jQuery('li > a').removeClass('active');
    });


    $(function() {
        $('a[href^=#]').click(function(e) {
            var name = $(this).attr('href').substr(1);
            var pos = $('a[name=' + name + ']').offset();
            $('body').animate({
                scrollTop: pos.top
            });
            e.preventDefault();
        });
    });
    
       $("a").click(function() { 
            $(this).toggleClass("active"); 
       
    });
</script>

CSS

body {
    font-family:'Open Sans', sans-serif;
    font-size: 87.5%;
    font-weight:200;
    margin:0;
    color:gray;
}
.content-container {
    width:77.25%;
   
    margin:0 auto;
    height:100%:
}
.side-menu {
    width:17.60%;
    list-style:none;
    padding:0;
    height:100%;
    position:fixed;
    margin:0;
}
.side-menu li {
    display:block;
    margin:0;
    padding:1em 0 1em 0;
}
.side-menu li a {
    padding-left:1em;
    margin-left:0px;
    text-decoration:none;
    color:gray;
    padding-top:1em;
    padding-bottom:1em;
}
.active {
}
.side-menu li a:hover, .side-menu li a.active, .active {
    border-left: 4px solid gray;
    margin-left:-4px;
}
.content {
    position:absolute;
    width:55%;
    left:32%;
    height:100%;
}
.content h1 {
    font-size:3em;
    font-weight:200;
    margin:0;
}
.content h2 {
    font-size:1.714em;
    font-weight:200;
}
.content p {
    font-size:1.285em;
    font-weight:200;
    line-height:1.714em;
    padding-bottom:6em;
}
.no-pad {
    padding-bottom:2em!important;
}
.equipo-leftcol > p, .equipo-rightcol > p {
    padding-bottom:1em!important;
}
.equipo-leftcol {
    float:left;
    margin-right:6em;
}
.equipo-rightcol {
    float:left;
}
.pad {
    height:100em;
}

.thumbnail {
 width:33.33%;
    height:17.14em;
    background:gray;
    float:left;
    margin-right:2.14em;
}

@media all and (max-width: 748px) {
   
    .side-menu {
        display:none;
    }
    .content {
        position:relative;
        margin:0;
        padding:0;
        left:0;
        width:80%;
    }
}