Как сверстать шаблон для Joomla

body {
    margin: 0;
    border-top: 5px solid #7e7e7e;
    background: #f8f8f8 url(../images/bg.png);
    color: #8f8f8f;
    font: 12px Tahoma, sans-serif;
}
a {
    color: #525252;
}

img {
    border: 0;
}

p {
    margin: 20px 0;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.inputbox {
    padding: 0 10px;
    height: 30px;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
    color: #b2b2b2;
    vertical-align: top;
}

.button {
    height: 32px;
    border: none;
    background-color: #29c5e6;
    color: #fff;
    font-family: 'Oswald', sans-serif;
}

.image {
    outline: 1px solid #c9c9c9;
    border: 1px solid #fff;
}

figure img {
    display: block;
}

.wrapper {
    margin: auto;
    max-width: 960px;
}

header {
    padding: 20px 0;
}

aside {
    float: left;
    width: 250px;
}

aside + .item-page {
    margin-left: 280px;
    padding-bottom: 50px;
}

footer {
    clear: both;
    background: #7e7e7e;
    color: #dbdbdb;
    font-size: 11px;
}

.search-block {
    float: right;
} 

.search-query {
    margin-right: -4px;
}

.main-navigation {
    border: 1px solid #e7e7e7;
    background: #f3f3f3;
}

.menu-top {
    margin: 0;
    padding: 0;
}

.menu-top li {
    display: inline-block;
    margin: 0;
    padding: 10px 30px;
    list-style-position: inside;
    text-transform: uppercase;
    font: 14px 'Oswald', sans-serif;
}

.menu-top li.current {
    background: #29c5e6;
}

.menu-top a {
    color: #b2b2b2;
    text-decoration: none;
}

.menu-top li.current a {
    color: #fff;
}

.main-heading {
    margin: 30px 0;
    padding-left: 20px;
    background: transparent url(../images/h1-bg.png);
}

.main-heading h1 {
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    background: url(../images/bg.png);
    color: #7e7e7e;
    text-transform: uppercase;
    font: 40px/40px 'Oswald', sans-serif;
}

.footer-content {
    margin: auto;
    padding: 10px 0;
    max-width: 960px;
    height: 90px;
}

.footer-heading {
    margin: 0 0 10px 0;
    border-bottom: 1px solid #919191;
    color: #fff;
    text-transform: uppercase;
    font: 14px 'Oswald', sans-serif;
}

footer a {
    color: #dbdbdb;
}

footer p {
    margin: 5px 0;
}

.twitter-time {
    color: #b4aeae;
}

.twitter {
    float: left;
    width: 300px;
}

.twitter p {
    padding-right: 15px;
}

.sitemap {
    float: left;
    margin-left: 20px;
    padding-right: 15px;
    width: 150px;
}

.sitemap .column {
    display: inline-block;
    margin-left: 40px;
}

.sitemap .column.first {
    margin-left: 0;
}

.menu-sitemap {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.sitemap a {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    font-size: 12px;
}

.sitemap a:hover {
    text-decoration: underline;
}

.social {
    float: left;
    margin-left: 20px;
    width: 130px;
}

.social-icon {
    display: inline-block;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    background: url(../images/social.png) no-repeat;
}

.social-icon-small {
    display: inline-block;
    margin: 5px 6px 0 0;
    width: 16px;
    height: 16px;
    background: url(../images/social-small.png) no-repeat;
}

.twitter-icon {
    background-position: 0 0;
}

.facebook-icon {
    background-position: -30px 0;
}

.google-plus-icon {
    background-position: -60px 0;
}

.vimeo-icon {
    background-position: 0 0;
}

.youtube-icon {
    background-position: -16px 0;
}

.flickr-icon {
    background-position: -32px 0;
}

.instagram-icon {
    background-position: -48px 0;
}

.rss-icon {
    background-position: -64px 0;
}

.footer-logo {
    float: right;
    margin-top: 20px;
    text-align: right;
    font-size: 10px;
}

<div class="slider">
    <div class="content">
        <div class="title">Fusce vitae nibn quis diam fermentum</div>
        <div class="subtitle">Etiam adipscing ultricies commodo.</div>
    </div>
    <ol class="links">
        <li class="active">Lorem ipsum dolop</li>
        <li>Ultricies pellentesque</li>
        <li>Aliquam ipsum</li>
        <li>Nullam sed mauris ut</li>
    </ol>
</div>
<article class="teaser" style="width: 50%;">
    <div class="heading">
        <h3 class="heading-text">About whitesquare</h3>
    </div>
    <figure class="image"><img src="images/home-1.png" alt="" width="135" height="135" /></figure>
    In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
    <p class="more"><a href="about-us/">Read more</a></p>
</article>
<article class="teaser" style="width: 50%;">
    <div class="heading">
        <h3 class="heading-text">A word from our ceo</h3>
    </div>
    <figure class="image"><img src="images/home-2.png" alt="" width="135" height="135" /></figure>
    <i>In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.</i>
    <p class="more">Yane Naumoski, CEO</p>
</article>
<article class="teaser" style="width: 33%;">
    <div class="heading">
        <h3 class="heading-text">Services</h3>
    </div>
    In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
    <p class="more"><a href="services/">Read more</a></p>
</article>
<article class="teaser" style="width: 33%;">
    <div class="heading">
        <h3 class="heading-text">Our teams</h3>
    </div>
    <div class="small-block">
        <figure class="image"><img src="images/home-3.png" alt="" width="35" height="35" /></figure>
        <h4 class="teaser-small-heading">Lorem ipsum</h4>
        <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p>
    </div>
    <div class="small-block">
        <figure class="image"><img src="images/home-4.png" alt="" width="35" height="35" /></figure>
        <h4 class="teaser-small-heading">Lorem ipsum</h4>
        <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p>
    </div>
    <div class="small-block">
        <figure class="image"><img src="images/home-5.png" alt="" width="35" height="35" /></figure>
        <h4 class="teaser-small-heading">Lorem ipsum</h4>
        <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p>
    </div>
</article>
<article class="teaser" style="width: 33%;">
    <div class="heading">
        <h3 class="heading-text">24/7/365 Support</h3>
    </div>
    <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.</p>
    <p class="teaser-small-paragraph more"><a href="contact/">Read more</a></p>
</article>
<article class="teaser clients" style="width: 100%;">
    <div class="heading">
        <h3 class="heading-text">Our clients</h3>
    </div>
    <img src="images/clients-1.png" alt="" width="61" height="83" /> <img src="images/clients-2.png" alt="" width="74" height="83" /> <img src="images/clients-3.png" alt="" width="163" height="83" /> <img src="images/clients-4.png" alt="" width="72" height="83" /> <img src="images/clients-5.png" alt="" width="104" height="83" /> <img src="images/clients-6.png" alt="" width="78" height="83" /> <img src="images/clients-7.png" alt="" width="87" height="83" /></article>

.slider {
    margin-top: 30px;
    text-transform: uppercase;
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
}

.slider .content {
    padding: 30px 40px;
    height: 220px;
    background: #e2e2e2;
}

.slider .title {
    color: #5a5a5a;
    font-size: 42px;
}

.slider .subtitle {
    color: #acacac;
    font-size: 20px;
}

.slider .links {
    display: block;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #e7e7e7;
    background: #f3f3f3;
    color: #8f8f8f;
    counter-reset: list 0;
}

.slider .links li {
    display: inline-block;
    margin-right: 55px;
    font-size: 18px;
    line-height: 23px;
    cursor: pointer;
}

.slider .links li.active {
    color: #29c5e6;
}

.slider .links li:before {
    display: inline-block;
    margin-right: 10px;
    width: 23px;
    background: #8f8f8f;
    color: #fff;
    content: counter(list) " ";
    counter-increment: list;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.slider .links li.active:before {
    background: #29c5e6;
}

.teaser {
    display: block;
    float: left;
    box-sizing: border-box;
    padding: 0 10px;
    vertical-align: top;
}

.teaser .heading {
    margin: 40px 0 20px;
    height: 16px;
    background: transparent url(../images/h1-bg.png);
}

.teaser .bullet {
    display: inline-block;
    margin-right: -4px;
    width: 16px;
    height: 16px;
    background: #29c5e6;
    vertical-align: top;
}

.teaser .heading-text {
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    background: url(../images/bg.png);
    text-transform: uppercase;
    font: normal 14px/16px 'Oswald', sans-serif;
}

.teaser .image {
    float: left;
    margin-right: 20px;
}

.teaser .small-block {
    margin-bottom: 10px;
}

.teaser .small-block .image {
    margin-right: 10px;
}

.teaser .more,
.teaser .more a {
    margin-bottom: 0;
    color: #525252;
}

.teaser-small-heading {
    display: block;
    margin: 0;
    color: #525252;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 11px;
}

.teaser-small-paragraph {
    margin: 4px 0;
    font-size: 11px;
}

.clients img {
    display: inline-block;
    margin-right: 30px;
}

.aside-navigation {
    border: 1px solid #e7e7e7;
    background: #f3f3f3;
}

.menu-aside {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.menu-aside li {
    padding: 10px;
    border-top: 1px solid #e7e7e7;
    list-style: square inside;
    font: 14px 'Oswald', sans-serif;
    font-weight: 300;
}

.menu-aside li:first-child {
    border: none;
}

.menu-aside li.current-menu-item,
.menu-aside li.current-menu-item a {
    color: #29c5e6;
}

.menu-aside a {
    color: #8f8f8f;
    text-decoration: none;
}

.sidebar-heading {
    margin: 30px 0 0 0;
    padding: 10px;
    background: #29c5e6;
    color: #fff;
    text-transform: uppercase;
    font: 14px 'Oswald', sans-serif;
}

.map {
    margin: 0 0 30px 0;
    padding: 10px;
    border: 1px solid #e7e7e7;
    background: #f3f3f3;
}

<blockquote class="main-blockquote">
<p>“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”</p>
<cite>John Doe, Lorem Ipsum</cite></blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat.</p>
<p>Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor.</p>
<p><img class="image" src="/images/about-1.png" alt="about-1" width="320" height="175" /><img class="image pull-right" src="/images/about-2.png" alt="about-2" width="320" height="175" /></p>
<h2 class="content-heading">Our team</h2>
<div class="team-row">
<figure><img class="image" src="/images/team-Doe.jpg" alt="" width="96" height="96" /><figcaption>John Doe<span class="occupation">ceo</span></figcaption></figure>
<figure><img class="image" src="/images/team-Pittsley.jpg" alt="" width="96" height="96" /><figcaption>Saundra Pittsley<span class="occupation">team leader</span></figcaption></figure>
<figure><img class="image" src="/images/team-Pittsley.jpg" alt="" width="96" height="96" /><figcaption>Julio Simser<span class="occupation">senior developer</span></figcaption></figure>
<figure><img class="image" src="/images/team-Simser.jpg" alt="" width="96" height="96" /><figcaption>Margery Venuti<span class="occupation">senior developer</span></figcaption></figure>
<figure><img class="image" src="/images/team-Venuti.jpg" alt="" width="96" height="96" /><figcaption>Fernando Tondrea<span class="occupation">developer</span></figcaption></figure>
</div>
<div class="team-row">
<figure><img class="image" src="/images/team-Tondrea.jpg" alt="" width="96" height="96" /><figcaption>Ericka Nobriga<span class="occupation">art director</span></figcaption></figure>
<figure><img class="image" src="/images/team-Nobriga.jpg" alt="" width="96" height="96" /><figcaption>Cody Rousselle<span class="occupation">senior ui designer</span></figcaption></figure>
<figure><img class="image" src="/images/team-Rousselle.jpg" alt="" width="96" height="96" /><figcaption>Erik Wollman<span class="occupation">senior ui designer</span></figcaption></figure>
<figure><img class="image" src="/images/team-Wollman.jpg" alt="" width="96" height="96" /><figcaption>Dona Shoff<span class="occupation">ux designer</span></figcaption></figure>
<figure><img class="image" src="/images/team-Shoff.jpg" alt="" width="96" height="96" /><figcaption>Darryl Brunton<span class="occupation">ui designer</span></figcaption></figure>
</div>

.main-blockquote {
    margin: 0;
    padding: 10px 20px;
    background: #29c5e6;
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
}

.main-blockquote p {
    margin: 0;
    color: #fff;
    font-style: italic;
    font-size: 33px;
}

.main-blockquote cite {
    display: block;
    margin: 0;
    color: #1d8ea6;
    text-align: right;
    font-style: normal;
    font-size: 20px;
}

.content-heading {
    clear: both;
    margin: 30px 0 0 0;
    padding: 0 10px;
    background: #29c5e6;
    color: #fff;
    text-transform: uppercase;
    font: 30px 'Oswald', sans-serif;
    font-weight: 300;
}

.footer-content {
    margin: auto;
    padding: 10px 0;
    max-width: 960px;
    height: 90px;
}

.footer-heading {
    margin: 0 0 10px 0;
    border-bottom: 1px solid #919191;
    color: #fff;
    text-transform: uppercase;
    font: 14px 'Oswald', sans-serif;
}

footer a {
    color: #dbdbdb;
}

footer p {
    margin: 5px 0;
}

.team-row figure {
    display: inline-block;
    margin: 20px 0 0;
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
}

.team-row figure + figure {
    margin-left: 43px;
}

.team-row figcaption {
    margin-top: 5px;
    font-weight: 300;
    font-size: 16px;
}

.team-row .occupation {
    display: block;
    color: #29c5e6;
    font-size: 14px;
}

.search {
    margin-left: 280px;
    padding-bottom: 50px;
}
.icon-search {
    display: inline-block;
    width: 21px;
    height: 21px;
    background: url(../images/search.png) center center no-repeat;
}

.search .btn-toolbar {
    height: 30px;
}