<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabs - Cube Portfolio</title>

    <!-- load fonts from google -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700%7CRoboto:400,500,700%7CRoboto+Condensed%7CLato:400,700" rel="stylesheet" type="text/css">

    <!-- load css for cubeportfolio -->
    <link rel="stylesheet" type="text/css" href="../../cubeportfolio/css/cubeportfolio.min.css">
</head>
<body style="max-width: 980px; width: 97%; margin: 100px auto; min-height: 1000px;">
    <div id="js-filters-tabs" class="cbp-l-filters-big">
        <div data-filter=".about" class="cbp-filter-item-active cbp-filter-item">
            About
        </div>
        <div data-filter=".service" class="cbp-filter-item">
            Service
        </div>
        <div data-filter=".pages" class="cbp-filter-item">
            Pages
        </div>
    </div>

    <div id="js-grid-tabs" class="cbp cbp-l-grid-tabs">
        <div class="cbp-item about">
            Pellentesque ut nonummy elit et duis, ut aliquam morbi, lobortis dolor nec fusce consequat. Nec elit magna mauris orci mauris ac, sem duis, ante nibh mi, sed malesuada ultrices scelerisque augue convallis eget. Ac varius enim qui, quis pharetra ultricies velit ut auctor, suspendisse mattis viverra eget sed in, pellentesque enim felis turpis auctor amet. Dolor sit mauris dui augue, sed nullam urna commodo, arcu congue mi non suscipit.
        </div>
        <div class="cbp-item service">
            Pede iaculis mauris lorem, non mi gravida risus metus, proin tempus pede rhoncus scelerisque ligula. Dignissim diam sodales egestas senectus elit nec, aliquam ante convallis proin pulvinar molestias vestibulum, leo felis, luctus id sed accumsan, nunc metus proin neque nulla ipsa. Ut fusce in aliquam amet arcu magna, amet nec nec orci pharetra vehicula sodales, nibh purus consectetuer aenean porttitor justo vivamus. Laoreet diam eu potenti, malesuada lacus et fermentum eget egestas.
        </div>
        <div class="cbp-item pages">
            Orci eros pulvinar metus. Taciti montes placerat nulla nonummy lacus, turpis et urna, eleifend aute condimentum eu, congue pede dapibus. Elit dis eros vulputate ultricies, ullamcorper egestas, turpis senectus tellus mi euismod erat mus, asperiores feugiat vitae lectus mi. Rerum integer dictumst, ligula blandit vestibulum nam consequat sed. Nulla fusce, blandit nec, sit ut in aliquam proin, netus sed magna lectus dolor, ipsum ac.
        </div>
    </div>

    <!-- load jquery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- load cubeportfolio -->
    <script type="text/javascript" src="../../cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

    <!-- init cubeportfolio -->
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
