Custom widgets

<div class="is-matrix left-align hs-fullwidth bg-gray cc-clearover">
    <div class="max-inner cc-clearover" style="padding:150px 0;">
        <div class="col-6">
            <h1>
                Your Title
            </h1>

            <p>
                Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
                tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
            </p>
            <br />
            <!-- ************* default button ************* -->
             <a class="hs-button" href="http://www.matrix-themes.com/" target="">Custom button</a>
        </div>
    </div>
</div>

<div class="is-matrix hs-fullwidth bg-primary color-white cc-clearover">
    <div class="max-inner cc-clearover" style="padding:150px 0;">
        <div class="col-6 center-align">
            <h1>
                Your Title
            </h1>

            <p>
                Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
                tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
            </p>
            <br />
            <!-- ************* default button ************* -->
             <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
        </div>
    </div>
</div>

<!-- *** Matrix Widget callout *** -->

<div class="is-matrix content-teaser left-align bg-dark color-white cc-clearover">
    <div class="hs-left">
        <h2>
            Awesome Jimdo templates for your website
        </h2>

        <p>
            Premium Jimdo Theme coupled with advanced functionality and awesome support
        </p>
    </div>

    <div class="hs-right">
        <a class="hs-button ghost-white" href="https://www.matrix-themes.com/" target="">learn more</a>
    </div>
</div>

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

<div class="is-matrix cc-clearover">
    <div class="col-6">
        <div class="fa fa-quote-left fa-4x absolute-top-left" 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 1 )
        </p>
    </div>
</div>

<!-- snippet 1581 -->

<figure class="snip1581 left-align color-white">
    <img src="https://u.jimcdn.com/e/o/se1eac71488c65a31/userlayout/img/slide04.jpg" alt="matrix-themes" />
    <figcaption>
        <h3>
            Summer
        </h3>

        <p >
            Collection
        </p>
    </figcaption>
    <a href="https://www.matrix-themes.com/"></a>
</figure>

<!-- *** Custom Matrix widget fa description *** -->

<div class="is-matrix bg-dark left-align color-white mid-round add-20">
    
        <div class="fa fa-paper-plane fa-3x">
        </div>

        <h3 class="add-top-10 add-btm-10">
            Service 01
        </h3>

        <p>
            Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
        </p>
    
</div>

<!-- ************* mid rounded button ************* -->
<a class="hs-button mid-round" href="http://www.matrix-themes.com/" target="">Midrounded</a>

<!-- ************* rounded flat button ************* -->
<a class="hs-button bg-round flat" href="http://www.matrix-themes.com/" target="">Rounded flat</a>

<!-- ************* rounded button ************* -->
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Ghost white</a>

<div class="hs-social left-align new-social small-social size-11 is-circle-border link-dark is-rounded">
    <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
    "fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>

<!-- *** Matrix Widget service icons *** -->

<div class="fa fa-check-circle size-20" style="color:#39be01;">
</div>
Phasellus a est. Praesent egestas neque eu enim. Maecenas malesuada.