1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107

<div class="tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#popularPosts" data-toggle="tab"><em class="icon icon-star">
                </em>Popular</a></li>
                <li><a href="#recentPosts" data-toggle="tab">Recent</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="popularPosts">
                    <ul class="simple-post-list">
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/40/img/blog/blog-thumb-1.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Nullam Vitae Nibh Un Odiosters</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#l">
                                        <img alt="" src="/Portals/40/img/blog/blog-thumb-2.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="blog-single.html">Vitae Nibh Un Odiosters</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/40/img/blog/blog-thumb-3.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Odiosters Nullam Vitae</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="tab-pane" id="recentPosts">
                    <ul class="simple-post-list">
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/40/img/blog/blog-thumb-2.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Vitae Nibh Un Odiosters</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/40/img/blog/blog-thumb-3.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Odiosters Nullam Vitae</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/40/img/blog/blog-thumb-1.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Nullam Vitae Nibh Un Odiosters</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<div class="toogle">
    <section class="toggle active">
    <label>
        Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque
            neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a>
            lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
        <img src="img/system.jpg" class="responsive pull-left">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque
            neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a>
            lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In
            eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia Curae;
        </p>
    </div>
    </section>
    <section class="toggle">
    <label>
        Curabitur eget leo at imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit
            imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam
            tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor,
            orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat
            lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit,
            pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis
            ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa.
            Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna,
            ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas
            at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio,
            ac pulvinar felis quam sit.</p>
    </div>
    </section>
    <section class="toggle">
    <label>
        Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit
            imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam
            tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor,
            orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat
            lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit,
            pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis
            ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa.
            Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna,
            ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas
            at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio,
            ac pulvinar felis quam sit.</p>
    </div>
    </section>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            <em class="icon icon-usd"></em>Pricing Tables </a>
                    </h4>
                </div>
                <div id="collapseOne" class="accordion-body collapse in">
                    <div class="panel-body">
                        Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent
                        id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique
                        sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate
                        eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis
                        quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor.
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                            <em class="icon icon-comment"></em>Contact Forms </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="accordion-body collapse">
                    <div class="panel-body">
                        Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                            <em class="icon icon-laptop"></em>Portfolio Pages </a>
                    </h4>
                </div>
                <div id="collapseThree" class="accordion-body collapse">
                    <div class="panel-body">
                        Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
                    </div>
                </div>
            </div>
        </div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<div class="toogle toogle-accordion">
    <section class="toggle active">
    <label>
        Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque
            neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a>
            lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In
            eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus
            lorem, ac viverra leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a
                href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh
            adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum
            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In
            eu libero ligula. Fusce eget metus lorem, ac viverra leo. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere
            porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing
            porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus
            ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
            posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo.
        </p>
    </div>
    </section>
    <section class="toggle">
    <label>
        Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit
            imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam
            tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor,
            orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat
            lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit,
            pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis
            ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa.
            Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna,
            ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas
            at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio,
            ac pulvinar felis quam sit.</p>
    </div>
    </section>
    <section class="toggle">
    <label>
        Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit
            imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam
            tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor,
            orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat
            lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit,
            pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis
            ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa.
            Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna,
            ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas
            at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio,
            ac pulvinar felis quam sit.</p>
    </div>
    </section>
</div>