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 class="thumbnail-img">
                <img src="https://www.dropbox.com/s/jvdxi0c42eo610a/Caesarian%20kit%201.jpg" />
            </div>
            <div class="captions">caesarian kit</div>
            <div class="pdf-bt">
                <p>download pdf</p>
            </div>
        </div>
        <div class="thumbnail"></div>
        <div class="thumbnail last"></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
            });
           ...

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%;
    background:red;
}
.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:30.64%;
    height:17.14em;
    background:gray;
    float:left;
    margin-right:2.14em;
}
.thumbnail-img {
    width:100%;
    height:17.14em;
    background:gray;
}
.captions {
    background:blue;
    color:white;
}
.pdf-bt {
    width: 210px;
    height:30px;
    border: 1px solid gray;
    display: table;
    margin-top:72px;
    margin-bottom:3em;
}
.pdf-bt > p {
    color:blue;
    display: table-cell;
    text-align: center;
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    text-transform: uppercase;
}
.last {
    margin:0!important;
}
@media all and (max-width: 748px) {
    .side-menu {
        display:none;
    }
    .content {
        position:relative;
        margin:0;
      ...