<div class="is-matrix bg-dark color-white">
    <div class="hs-left-50 col-12">
        <div class="image_wrapper resp-img add-10" style="border-radius img: 30px;">
            <img src="https://u.jimcdn.com/cms/o/s7f57b782ca2dfcb3/userlayout/img/customer.jpg?t=1524662588" alt="" style="border-radius:20px 0 20px 0;" />
        </div>
    </div>

    <div class="hs-right-50 col-12 pull-top-50">
        <div class="gutter-20 clearover">
            <!-- ************** Quote teaser ************** -->

            <div class="center-align">
                <center>
                    <div class="fa fa-quote-left fa-4x rel" style="color:#888;">
                    </div>
                </center>
                <span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference</span>
                <p class="add-top-10">
                    (Quote 2)
                </p>
            </div>
            <!-- ************** End Quote teaser ************** -->
        </div>
    </div>
</div>

<div class="is-matrix bg-transparent">
    <center>
        <div class="col-6">
            <div class="image_wrapper resp-img add-10">
                <img src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="" style="border-radius:500px;" />
            </div>
        </div>

        <div class="hs-right-50 col-12 pull-top-50">
            <div class="gutter-20 clearover">
                <!-- ************** Quote teaser ************** -->

                <center>
                    <div class="fa fa-quote-left fa-4x rel center-align" style="color:#888;">
                    </div>
                </center>
                <span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference</span>
                <p class="add-top-10">
                    (Quote 5)
                </p>
            </div>
            <!-- ************** End Quote teaser ************** -->
        </div>
    </center>
</div>

<!-- *** Matrix Widget quote teaser *** -->

<div class="is-matrix cc-clearover">
    <div class="col-6 right-align text-right">
        <div class="fa fa-quote-left fa-4x absolute-top-right" style="top:-10px;opacity:0.2;font-size:50px;">
        </div>
        <span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
        <p class="weight-500 size-11 add-top-5">
            ( Quote style 3 )
        </p>
    </div>
</div>

<div class="is-matrix rel">
    <div class="col-8 right-align">
        <div class="item resp-img">
            <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        </div>
    </div>

    <div class="absolute-top-left col-6 rel-mobile-only" style="margin-top:30px;">
        <div class="hs-description bg-dark add-20 color-white">
            <h3 class="big add-top-10">
                Make it loud
            </h3>

            <p class="size-15">
                Premium Jimdo theme with a modern design and bundled with powerful plugins for creating versatile online stores
            </p>
            <br />
            <a class="hs-button ghost-white is-outlined" href="http://www.matrix-themes.com/purchase" target="">Purchase now</a>
        </div>
    </div>
</div>

<!-- toggle style 2 -->

<ul class="accordeon">
    <li class="accordeon_item">
        <h3 class="accordeon_title bg-dark color-white mid-round size-14">
            Title
        </h3>

        <div class="accordeon_content">
            <p class="text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>

            <p class="text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, quibusdam?
            </p>
        </div>
    </li>
</ul>

<!-- *** Matrix Widget tile widget *** -->

<div class="is-matrix bg-grey cc-clearover">
    <div class="hs-left-50">
        <div class="image_wrapper resp-img">
            <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        </div>
    </div>

    <div class="hs-right-50">
        <div class="gutter-20 clearover">
            <h1>
                Your title
            </h1>

            <p>
                Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
                Pellentesque in ipsum id orci porta dapibus.
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
        </div>
    </div>
</div>

<div class="c">
</div>

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6  center-align color-white">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>
            <!-- ************* mid-rounded button ************* -->
            <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6 color-white center-align">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>

            <center>
                <!-- ************* mid-rounded button ************* -->
                <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a> <a class="hs-button bg-white small-btn" href="https://www.zodiac-framerwork.com"
                target="">Read more</a>
            </center>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>