Components
Select a component, click the copy button, and then paste the code into the Widget/HTML module of your website. The component element can be used as a standalone widget or inside columns.
Text Card 01
<div class="is-matrix is-card content-teaser bg-primary-light is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box has-mobile-fullwidth-btn">
<a class="hs-button mid-round right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Text Card 02
<div class="is-matrix is-card content-teaser bg-dark color-white is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box has-mobile-fullwidth-btn">
<a class="hs-button ghost-white right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Text Card 03
<div class="is-matrix is-card content-teaser br5 is--flex is-flex-block cc-clearover" style="border:1px solid;">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box has-mobile-fullwidth-btn">
<a class="hs-button bg-round bg-dark right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Text Card 04
<div class="is-matrix is-card content-teaser bg-white has-border-shadow is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box has-mobile-fullwidth-btn">
<a class="hs-button right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Text Card 05
<div class="is-matrix is-card rel is-parallax is--flex rel no-padding br15" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-abstract-01.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay opacity-08 bg-primary br15">
</div>
<div class="max-inner color-white m-padding cc-clearover is-anim-block" style="padding:20px 0;">
<div class="is-matrix content-teaser bg-transparent is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it stand out
</h3>
<p>
Create a beautiful Jimdo website for your business
</p>
</div>
<div class="right-align col-4 add-20 cc-box has-mobile-fullwidth-btn">
<a class="hs-button right-align weight-500 bg-white br15" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Learn more<svg viewbox="0 0 24 24"
focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
</div>
Text Card 06
<div class="is-matrix is-card rel is-parallax is--flex rel no-padding br15" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-pattern-01.png ') repeat center;background-attachment:scroll!important;background-size: 500px 500px!important;">
<div class="hs-overlay opacity-09 bg-gradient br15">
</div>
<div class="max-inner color-white m-padding cc-clearover is-anim-block" style="padding:20px 0;">
<div class="is-matrix content-teaser bg-transparent is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it stand out
</h3>
<p>
Create a beautiful Jimdo website for your business
</p>
</div>
<div class="right-align col-4 add-20 cc-box has-mobile-fullwidth-btn">
<a class="hs-button right-align weight-500 bg-white br15" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Learn more<svg viewbox="0 0 24 24"
focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
</div>
Icon Card 01
<div class="is-matrix is-card is-anim-block bg-primary-light br10 is-flex is-flex-block no-padding">
<div class="col-1">
<div class="fa fa-check fa-2x bg-primary add-10 color-white br10" style="margin:20px 20px 0 20px;">
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
IT Consulting
</h3>
<p>
Expert guidance to help you navigate technology challenges and implement the best solutions for your business.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
Icon Card 02
<div class="is-matrix is-card is-anim-block br10 is-flex is-flex-block no-padding" style="border:2px solid #ddd;">
<div class="col-1">
<div class="fa fa-check fa-2x primary-color add-10 br10" style="margin:20px 20px 0 20px;border:2px solid #ddd;">
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
IT Consulting
</h3>
<p>
Expert guidance to help you navigate technology challenges and implement the best solutions for your business.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
Icon Card 03
<div class="is-matrix is-card is-anim-block content-teaser br5 is-flex is-flex-block no-padding" style="border:1px solid;">
<div class="col-1">
<div class="fa fa-check fa-2x bg-white add-10 br5" style="margin:20px 20px 0 20px;border:1px solid;">
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
IT Consulting
</h3>
<p>
Expert guidance to help you navigate technology challenges and implement the best solutions for your business.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
Icon Card 04
<div class="is-matrix is-card is-anim-block bg-primary-dark color-white br10 is-flex is-flex-block no-padding">
<div class="col-1">
<div class="fa fa-check fa-2x bg-white add-10 primary-color br10" style="margin:20px 20px 0 20px;">
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
IT Consulting
</h3>
<p>
Expert guidance to help you navigate technology challenges and implement the best solutions for your business.
</p>
<br />
<a class="arrow-link is-white" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
Icon Card 05
<div class="is-matrix is-card rel is-parallax is--flex rel no-padding br15" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-abstract-02.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay opacity-06 bg-primary br15">
</div>
<div class="max-inner color-white m-padding cc-clearover is-anim-block" style="padding:20px 0;">
<div class="is-matrix content-teaser bg-transparent is--flex is-flex-block cc-clearover">
<div class="left-align col-12 is-flex is-flex-block cc-box">
<div class="col-1">
<div class="fa fa-check fa-2x bg-white add-10 primary-color br10" style="margin:20px 20px 0 20px;">
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
IT Consulting
</h3>
<p>
Expert guidance to help you navigate technology challenges and implement the best solutions for your business.
</p>
<br />
<a class="arrow-link is-white" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
</div>
</div>
</div>
Image Slider
<style>
/* <![CDATA[ */
.is-matrix-slider .item {
height:450px!important;
}
@media only screen and (max-width: 459px) {
.is-matrix-slider .item {
height:300px!important;
}
}
/*]]>*/
</style><div class="is-matrix-slider is-content-slider owl-carousel owl-theme">
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-02.jpg" alt="Matrix Themes" />
<div class="hs-overlay gradient-opacity">
</div>
<div class="is-new-caption" style="align-items:end;">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-03.jpg" alt="Matrix Themes" />
<div class="hs-overlay gradient-opacity">
</div>
<div class="is-new-caption" style="align-items:end;">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Make dreams come true
</h3>
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-06.jpg" alt="Matrix Themes" />
<div class="hs-overlay gradient-opacity">
</div>
<div class="is-new-caption" style="align-items:end;">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Work with the professionals
</h3>
<!-- ************* mid-rounded button ************* -->
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-content-slider').owlCarousel({
autoPlay: 5000,
autoplay: true,
smartSpeed:250, // Speed Calculate
items : 1,
nav: true,
loop:true,
navText: ["<i class='fa fa-angle-left size-15 add-5'><\/i>", "<i class='fa fa-angle-right size-15 add-5'><\/i>"],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
});
})(jQuery);
//]]>
</script>
Image Slider 2
<style>
/* <![CDATA[ */
.is-matrix-slider .item {
height:450px!important;
}
@media only screen and (max-width: 459px) {
.is-matrix-slider .item {
height:300px!important;
}
}
/*]]>*/
</style><div class="is-matrix-slider is-fadeIn-slider owl-carousel owl-theme">
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-02.jpg" alt="Matrix Themes" />
<div class="hs-overlay gradient-opacity">
</div>
<div class="is-new-caption" style="align-items:end;">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-03.jpg" alt="Matrix Themes" />
<div class="hs-overlay gradient-opacity">
</div>
<div class="is-new-caption" style="align-items:end;">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Make dreams come true
</h3>
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-06.jpg" alt="Matrix Themes" />
<div class="hs-overlay gradient-opacity">
</div>
<div class="is-new-caption" style="align-items:end;">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Work with the professionals
</h3>
<!-- ************* mid-rounded button ************* -->
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-fadeIn-slider').owlCarousel({
loop: true,
slideSpeed: 300,
paginationSpeed: 400,
smartSpeed:250, // Speed Calculate
autoplay: true,
navText: ["<i class='fa fa-angle-left size-15 add-5'><\/i>", "<i class='fa fa-angle-right size-15 add-5'><\/i>"],
// autoplayHoverPause:true,
items: 1,
animateIn: 'fadeIn', // add this
animateOut: 'fadeOut', // and this
responsiveClass: true,
nav: true,
responsive: {
0: {
items: 1
// nav:true
},
600: {
items: 1,
// nav: false
},
1000: {
items: 1,
// nav: true
// loop:false
}
}
});
});
})(jQuery);
//]]>
</script>
Image Card 01
<div class="is-matrix is-anim-block is-card bg-primary-light is-flex is-flex-block no-padding">
<div class="col-3">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-07.jpg" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
Innovate with Matrix
</h3>
<span class="is-tag">image card</span>
<div class="c">
</div>
<br />
<p>
Stay ahead with cutting-edge technology solutions designed for efficiency and growth. Explore the future of AI, automation, and cloud innovation.
</p>
<br />
<a class="primary-color" href="http://www.matrix-themes.com/templates/" target="">Learn more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Card 02
<div class="is-matrix is-anim-block is-card bg-primary color-white is-flex is-flex-block no-padding">
<div class="col-3">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-07.jpg" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
Innovate with Matrix
</h3>
<span class="is-tag opacity-8">image card</span>
<div class="c">
</div>
<br />
<p>
Stay ahead with cutting-edge technology solutions designed for efficiency and growth. Explore the future of AI, automation, and cloud innovation.
</p>
<br />
<a class="color-white" href="http://www.matrix-themes.com/templates/" target="">Learn more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Card 03
<div class="is-matrix is-anim-block is-card bg-primary-light br10 is-flex is-flex-block no-padding">
<div class="col-3 add-10 br5 cc-box">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-07.jpg" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
Innovate with Matrix
</h3>
<span class="is-tag">image card</span>
<div class="c">
</div>
<br />
<p>
Stay ahead with cutting-edge technology solutions designed for efficiency and growth. Explore the future of AI, automation, and cloud innovation.
</p>
<br />
<a class="primary-color" href="http://www.matrix-themes.com/templates/" target="">Learn more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Card 04
<div class="is-matrix is-anim-block is-card bg-lightgray br5 is-flex is-flex-block no-padding" style="border:1px solid;">
<div class="col-3 add-10 br5 cc-box">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-07.jpg" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
Innovate with Matrix
</h3>
<span class="is-tag bg-dark">image card</span>
<div class="c">
</div>
<br />
<p>
Stay ahead with cutting-edge technology solutions designed for efficiency and growth. Explore the future of AI, automation, and cloud innovation.
</p>
<br />
<a class="primary-color" href="http://www.matrix-themes.com/templates/" target="">Learn more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Card 05
<div class="is-matrix is-anim-block is-card is--flex is-flex-block no-padding" style="margin:30px 0;">
<div class="col-6">
<div class="rotated-box bg-primary">
</div>
<img class="is-img is-rel wow is-folded-left" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-07.jpg" alt="Matrix Themes" />
</div>
<div class="col-6">
<div class="add-30">
<h3>
Innovate with Matrix
</h3>
<span class="is-tag">image card</span>
<div class="c">
</div>
<br />
<p>
Stay ahead with cutting-edge technology solutions designed for efficiency and growth. Explore the future of AI, automation, and cloud innovation.
</p>
<br />
<a class="primary-color" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Card 06
<div class="is-matrix is-anim-block is-card is--flex is-flex-block no-padding" style="margin:30px 0;">
<div class="col-6">
<div class="rotated-box bg-primary br15">
</div>
<img class="is-img is-rel br15 wow is-folded-left" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-07.jpg" alt="Matrix Themes" />
</div>
<div class="col-6">
<div class="add-30">
<h3>
Innovate with Matrix
</h3>
<span class="is-tag">image card</span>
<div class="c">
</div>
<br />
<p>
Stay ahead with cutting-edge technology solutions designed for efficiency and growth. Explore the future of AI, automation, and cloud innovation.
</p>
<br />
<a class="primary-color" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Teaser 01
<div class="is-shined-effect br15 is-parallax is--flex rel no-padding" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-01.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity br15">
</div>
<div class="max-inner color-white cc-clearover" style="padding:250px 15px 15px;">
<div class="col-8 left-align is-anim-block">
<h3>
The choice is yours
</h3>
<p>
The answer awaits in the depths of your own resolve.
</p>
<a class="link-outlined" href="http://www.matrix-themes.com/templates/" target="">Read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Teaser 02
<div class="is-matrix br15 is-parallax is--flex rel no-padding" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-01.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity br15">
</div>
<div class="max-inner cc-clearover" style="padding:250px 15px 15px;">
<div class="col-6 m-col-6 left-align bg-white has-shadow br15 rel add-15 is-anim-block" style="">
<div class="col-1">
<div class="fa fa-rocket fa-3x primary-color" style="padding:20px 20px 0 20px;">
</div>
</div>
<div class="col-12 add-10 cc-box">
<h3>
The Icon Card title
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
</div>
</div>
Image Teaser 03
<div class="is-matrix br15 is-parallax is--flex rel no-padding" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-01.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity br15">
</div>
<div class="max-inner cc-clearover" style="padding:250px 15px 15px;">
<div class="col-6 m-col-6 left-align color-white link-white bg-primary has-shadow rel add-15 is-anim-block" style="margin-left:-25px; border-radius: 0 45px;">
<div class="col-1">
<div class="fa fa-rocket fa-3x" style="padding:20px 20px 0 20px;">
</div>
</div>
<div class="col-12 add-10 cc-box">
<h3>
The Icon Card title
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore.
</p>
<br />
<a class="color-white link-outlined" href="http://www.matrix-themes.com/templates/" target="">Read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
</div>
Quote Card 01
<div class="is-matrix is-anim-block is-card bg-primary-light br8 cc-box is--flex is-flex-block cc-clearover">
<div class="max-inner left-align add-20 cc-box">
<div class="wow is-folded-left">
<div class="fa fa-quote-left fa-5x">
</div>
<p class="m-size-20" style="font-size:40px;">
Simplicity is the ultimate sophistication.
</p>
<p class="add-top-10 size-13">
– Leonardo da Vinci
</p>
</div>
</div>
</div>
Quote Card 02
<div class="is-matrix is-anim-block is-card has-border-shadow cc-box is--flex is-flex-block cc-clearover">
<div class="max-inner left-align add-20 cc-box">
<div class="wow is-folded-left">
<div class="fa fa-quote-left fa-5x">
</div>
<p class="m-size-20" style="font-size:40px;">
Simplicity is the ultimate sophistication.
</p>
<p class="add-top-10 size-13">
– Leonardo da Vinci
</p>
</div>
</div>
</div>
Quote Card 03
<div class="is-matrix is-anim-block bg-primary color-white is-flex is-flex-row-mobile no-padding">
<div class="col-2 m-col-4">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-07.jpg" alt="Matrix Themes" />
<div class="hs-overlay bg-primary opacity-6">
</div>
</div>
<div class="col-10 m-col-8">
<div class="add-20 left-align cc-box">
<div class="wow is-folded-left">
<div class="fa fa-quote-left fa-5x">
</div>
<p class="m-size-20" style="font-size:40px;">
Simplicity is the ultimate sophistication.
</p>
<p class="add-top-10 size-13">
– Leonardo da Vinci
</p>
</div>
</div>
</div>
</div>
Quote Card 04
<div class="is-matrix is-card is-parallax is--flex rel no-padding br15 has-mobile-fullwidth-btn" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-shape-02.png ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay bg-primary br15 opacity-06">
</div>
<div class="max-inner color-white m-padding cc-clearover is-anim-block" style="padding:50px 0;">
<div class="is-matrix content-teaser bg-transparent is--flex is-flex-block cc-clearover">
<div class="is-matrix is-card br15 is-flex is-flex-block no-padding">
<div class="add-20 left-align cc-box">
<div class="wow is-folded-left">
<div class="fa fa-quote-left fa-5x">
</div>
<p class="m-size-20" style="font-size:40px;">
Simplicity is the ultimate sophistication.
</p>
<p class="add-top-10 size-13">
– Leonardo da Vinci
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Pricing Card 01
<div class="is-matrix is-card content-teaser bg-primary-light is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Package 1
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-primary">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list green-color">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box mobile-fullwidth-btn">
<a class="hs-button mid-round right-align" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 02
<div class="is-matrix is-card content-teaser bg-primary color-white is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Package 2
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-primary-light">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box mobile-fullwidth-btn">
<a class="hs-button ghost-white mid-round right-align" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 03
<div class="is-matrix is-card content-teaser bg-transparent add-20 is--flex is-flex-block no-padding cc-clearover" style="border:2px solid #000;">
<div class="left-align col-8 add-30 cc-box no-border-mobile no-border-column" style="border-right:2px solid #000;">
<h3>
Package 3
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-dark">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button right-align bg-dark fullwidth-btn" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 04
<div class="is-matrix is-card content-teaser bg-dark color-white add-20 is--flex is-flex-block no-padding cc-clearover">
<div class="left-align col-8 add-30 cc-box no-border-mobile no-border-column" style="border-right:2px solid #fff;">
<h3>
Package 4
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-white">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button right-align ghost-white fullwidth-btn" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 05
<div class="is-matrix is-card content-teaser bg-white has-shadow br15 is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Package 5
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-round bg-gradient no-padding" style="height:5px;">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box mobile-fullwidth-btn">
<a class="hs-button bg-round right-align" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 06
<div class="is-matrix is-card is-rel content-teaser bg-primary color-white has-shadow br15 is--flex is-flex-block cc-clearover" style="border:3px solid #f7b267;">
<span class="size-12 bg-round text-center absolute-top-left" style="background:#f7b267;top: -12px; left: 15px; color: #000; padding: 2px 18px;">Most Popular</span>
<div class="left-align col-8 add-20 cc-box">
<h3>
Package 6
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-round bg-gradient no-padding" style="height:5px;">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box mobile-fullwidth-btn">
<a class="hs-button bg-round bg-white right-align" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Feature list 02
<div class="has-check-list bg-primary-light add-20 br10 green-color">
<h3>
Feature List 2
</h3>
<br />
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Professional 24/7 Support
</li>
</ul>
</div>
Feature list 03
<div class="has-check-list-2 green-color">
<h3>
Feature List 3
</h3>
<br />
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
Feature list 04
<div class="has-check-list-2 bg-primary color-white add-20 br10">
<h3>
Feature List 4
</h3>
<br />
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
Feature list 05
<div class="has-check-list-2 green-color bg-lightgray add-20 br5" style="border:1px solid;">
<h3>
Feature List 5
</h3>
<br />
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
Feature list 06
<div class="has-check-list-3 add-20 has-border-shadow">
<h3>
Feature List 6
</h3>
<br />
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
Feature Image 01
<div class="is-matrix is-card has-mobile-fullwidth-btn">
<div class="is-flex is-flex-block cc-clearover">
<div class="col-5 wow is-folded-middle-left-right">
<div class="is-matrix is-shined-effect is-parallax is--flex rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-06.jpg') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity">
</div>
<div class="max-inner color-white cc-clearover cc-box" style="padding:350px 15px 15px;">
<div class="col-12 right-align text-right is-anim-block">
<h3>
Let’s talk
</h3>
<p>
The answer awaits in the depths of your own resolve.
</p>
</div>
</div>
</div>
</div>
<div class="col-12 add-20 cc-box">
<div class="has-check-list-2 green-color">
<h3>
Seamless Integration
</h3>
<span class="is-tag bg-primary">Features</span>
<div class="c">
</div>
<br />
<p>
Effortlessly connect and optimize your systems with our innovative, future-ready technology solutions.
</p>
<br />
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
Feature Image 02
<div class="is-matrix is-card has-mobile-fullwidth-btn">
<div class="is-flex is-flex-column cc-clearover gap-10">
<div class="col-5 wow is-folded-middle-left-right">
<div class="is-matrix is-shined-effect is-parallax is--flex rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-06.jpg') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity">
</div>
<div class="max-inner color-white cc-clearover cc-box" style="padding:350px 15px 15px;">
<div class="col-12 right-align text-right is-anim-block">
<h3>
Let’s talk
</h3>
<p>
The answer awaits in the depths of your own resolve.
</p>
</div>
</div>
</div>
</div>
<div class="col-12 add-20 bg-primary color-white cc-box" style="margin-right:-10px;">
<div class="has-check-list-2">
<h3>
Seamless Integration
</h3>
<span class="is-tag opacity-8">Features</span>
<div class="c">
</div>
<br />
<p>
Effortlessly connect and optimize your systems with our innovative, future-ready technology solutions.
</p>
<br />
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
Feature Image 03
<div class="is-matrix is-card bg-primary-light add-20 br25 has-mobile-fullwidth-btn">
<div class="is-flex is-flex-column cc-clearover gap-10">
<div class="col-5 wow is-folded-middle-corner">
<div class="is-matrix is-shined-effect br15 is-parallax is--flex rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-01.jpg') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="max-inner cc-box cc-clearover" style="padding:15px 15px 335px;">
<div class="col-8 right-align color-white text-right is-anim-block">
<span class="is-tag">Features</span>
</div>
</div>
</div>
</div>
<div class="col-12 add-20 cc-box br25 has-mobile-fullwidth-btn">
<div class="has-check-list green-color">
<h3>
Seamless Integration
</h3>
<br />
<p>
Effortlessly connect and optimize your systems with our innovative, future-ready technology solutions.
</p>
<br />
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
Feature Image 04
<div class="is-matrix is-card bg-lightgray add-20 br5 has-mobile-fullwidth-btn" style="border:1px solid;">
<div class="is-flex is-flex-column cc-clearover gap-10">
<div class="col-5 wow is-folded-middle-corner">
<div class="is-matrix is-shined-effect is-parallax is--flex rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-01.jpg') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="max-inner cc-box cc-clearover" style="padding:15px 15px 335px;">
<div class="col-8 right-align color-white text-right is-anim-block">
<span class="is-tag">Features</span>
</div>
</div>
</div>
</div>
<div class="col-12 add-20 cc-box br25 has-mobile-fullwidth-btn">
<div class="has-check-list-2">
<h3>
Seamless Integration
</h3>
<br />
<p>
Effortlessly connect and optimize your systems with our innovative, future-ready technology solutions.
</p>
<br />
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
Feature Image 05
<div class="is-matrix is-card bg-primary-light add-20 br25 rel color-white has-mobile-fullwidth-btn" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-shape-01.png ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay opacity-8 bg-primary opacity-06 br25">
</div>
<div class="is-flex is-flex-column cc-clearover gap-10">
<div class="col-5 wow is-folded-middle-corner">
<div class="is-matrix is-shined-effect br15 is-parallax is--flex rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-01.jpg') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="max-inner cc-box cc-clearover" style="padding:15px 15px 335px;">
<div class="col-8 right-align color-white text-right is-anim-block">
<span class="is-tag">Features</span>
</div>
</div>
</div>
</div>
<div class="col-12 add-20 cc-box br25 has-mobile-fullwidth-btn">
<div class="has-check-list-2">
<h3>
Seamless Integration
</h3>
<br />
<p>
Effortlessly connect and optimize your systems with our innovative, future-ready technology solutions.
</p>
<br />
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
Feature links 01
<div class="links">
<h3>
Feature links
</h3>
<br />
<ul>
<li>
<a href="https://www.matrix-themes.com/templates">Matrix themes</a>
</li>
<li>
<a href="https://www.matrix-themes.com/page-builder">Matrix Page Builder</a>
</li>
<li>
<a href="https://www.matrix-themes.com/docs">Professional 24/7 support</a>
</li>
<li>
<a href="https://www.matrix-themes.com/templates/showcase">Inspiration websites</a>
</li>
</ul>
<br />
</div>
Feature links 02
<div class="bg-primary add-20 br10 links link-white color-white">
<h3>
Feature links
</h3>
<br />
<ul>
<li>
<a href="https://www.matrix-themes.com/templates">Matrix themes</a>
</li>
<li>
<a href="https://www.matrix-themes.com/page-builder">Matrix Page Builder</a>
</li>
<li>
<a href="https://www.matrix-themes.com/docs">Professional 24/7 support</a>
</li>
<li>
<a href="https://www.matrix-themes.com/templates/showcase">Inspiration websites</a>
</li>
</ul>
<br />
</div>
Counter card
<div class="is-matrix bg-primary is-card is-flex is-flex-block center-align cc-clearover">
<div class="col-4 color-white">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x">
</div>
<p class="hs-center add-top-20">
Official Jimdo Experts
</p>
</div>
</div>
<div class="col-4 color-white opacity-2">
<div class="gutter-20 center-align">
<div class="fa fa-cogs fa-4x">
</div>
<p class="hs-center add-top-20">
Freelancers and Web Agencies
</p>
</div>
</div>
<div class="col-4 color-white opacity-4">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Countries around the world
</p>
</div>
</div>
</div>
Counter card 2
<div class="is-matrix bg-primary is-card is-flex is-flex-block center-align cc-clearover">
<div class="col-3 color-white">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x">
</div>
<p class="hs-center add-top-20">
Jimdo Experts
</p>
</div>
</div>
<div class="col-3 color-white opacity-2">
<div class="gutter-20 center-align">
<div class="fa fa-paper-plane fa-4x">
</div>
<p class="hs-center add-top-20">
12 Web Agencies
</p>
</div>
</div>
<div class="col-3 color-white opacity-4">
<div class="gutter-20 center-align">
<div class="fa fa-globe fa-4x">
</div>
<p class="hs-center add-top-20">
18 Countries
</p>
</div>
</div>
<div class="col-3 color-white opacity-6">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Professional support
</p>
</div>
</div>
</div>
Counter card 3
<div class="is-matrix gap-15 is-card is-flex is-flex-column center-align cc-clearover">
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x">
</div>
<p class="hs-center add-top-20">
Official Jimdo Experts
</p>
</div>
</div>
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-cogs fa-4x">
</div>
<p class="hs-center add-top-20">
Freelancers and Web Agencies
</p>
</div>
</div>
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Countries around the world
</p>
</div>
</div>
</div>
Counter card 4
<div class="is-matrix gap-15 is-card is-flex is-flex-column center-align cc-clearover">
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x">
</div>
<p class="hs-center add-top-20">
Official Jimdo Experts
</p>
</div>
</div>
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-paper-plane fa-4x">
</div>
<p class="hs-center add-top-20">
12 Web Agencies
</p>
</div>
</div>
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-globe fa-4x">
</div>
<p class="hs-center add-top-20">
18 Countries
</p>
</div>
</div>
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Countries around the world
</p>
</div>
</div>
</div>
Counter card 5
<div class="is-matrix br15 is-parallax is--flex rel no-padding" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-04.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity br15">
</div>
<div class="max-inner cc-clearover" style="padding:250px 20px 20px;">
<div class="col-0 m-col-5 right-align bg-primary color-white br10 rel add-15 is-anim-block" style="width:160px;">
<div class="col-1">
</div>
<div class="col-12 add-10 center-align cc-box wow">
<!-- use classes 'counter', 'counter-slow' or 'counter-slower' for the counter's speed -->
<p class="counter" style="font-size:80px;font-weight:800;line-height:100%;">
25
</p>
<p>
Years working experience
</p>
</div>
</div>
</div>
</div>
Counter card 6
<div class="is-matrix gap-15 is-card is-flex is-flex-column center-align cc-clearover">
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align wow">
<div class="fa fa-trophy fa-2x add-15">
</div>
<!-- use classes 'counter', 'counter-slow' or 'counter-slower' for the counter's speed -->
<p class="counter" style="font-size:80px;font-weight:600;line-height:100%;">
5000
</p>
<p class="hs-center">
Websites Built by Matrix themes
</p>
</div>
</div>
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align wow">
<div class="fa fa-thumbs-up fa-2x add-15">
</div>
<!-- use classes 'counter', 'counter-slow' or 'counter-slower' for the counter's speed -->
<p class="counter" style="font-size:80px;font-weight:600;line-height:100%;">
150
</p>
<p class="hs-center">
Freelancers and Web Agencies
</p>
</div>
</div>
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align wow">
<div class="fa fa-star fa-2x add-15">
</div>
<!-- use classes 'counter', 'counter-slow' or 'counter-slower' for the counter's speed -->
<p class="counter" style="font-size:80px;font-weight:600;line-height:100%;">
300
</p>
<p class="hs-center">
Custom widgtes and plugins
</p>
</div>
</div>
</div>
Step Process 1
<div class="is-matrix is-card is-step-widget gap-15 is-flex is-flex-column center-align is-anim-block cc-clearover">
<div class="col-4 bg-primary color-white">
<div class="gutter-20 center-align">
<div class="fa fa-1 pull-top-50 text-center" style=
"text-align: center;margin-bottom:20px;border:3px solid #fff;padding:20px;background:var(--bg-primary);color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<h3>
Choose Your Package
</h3>
<p>
Select a web design or development package that fits your business needs and goals.
</p>
</div>
</div>
<div class="col-4 bg-primary color-white">
<div class="gutter-20 center-align">
<div class="fa fa-2 pull-top-50 text-center" style=
"text-align: center;margin-bottom:20px;padding:20px;background:var(--bg-primary);border:3px solid #fff;color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<h3>
Share Your Vision
</h3>
<p>
Provide us with your brand details, preferred design style, and content to bring your vision to life.
</p>
</div>
</div>
<div class="col-4 bg-primary color-white">
<div class="gutter-20 center-align">
<div class="fa fa-3 pull-top-50 text-center" style=
"text-align: center;margin-bottom:20px;padding:20px;background:var(--bg-primary);border:3px solid #fff;color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<h3>
Launch Your Website
</h3>
<p>
Review the final design, request tweaks, and get your stunning website live in no time!
</p>
</div>
</div>
</div>
Step Process 2
<div class="is-matrix is-card is-step-widget gap-15 is-flex is-flex-column is-anim-block cc-clearover">
<div class="col-4 bg-primary br15 color-white">
<div class="gutter-20">
<div class="fa fa-hand-pointer pull-top-50" style=
"text-align: center;margin-bottom:20px;border:3px solid #fff;padding:20px;background:var(--bg-primary);color:#fff;font-size: 40px;border-radius:15px;">
</div>
<h3>
Choose Your Package
</h3>
<p>
Select a web design or development package that fits your business needs and goals.
</p>
</div>
</div>
<div class="col-4 bg-primary br15 color-white">
<div class="gutter-20">
<div class="fa fa-share-nodes pull-top-50" style=
"text-align: center;margin-bottom:20px;padding:20px;background:var(--bg-primary);border:3px solid #fff;color:#fff;font-size: 40px;border-radius:15px;">
</div>
<h3>
Share Your Vision
</h3>
<p>
Provide us with your brand details, preferred design style, and content to bring your vision to life.
</p>
</div>
</div>
<div class="col-4 bg-primary br15 color-white">
<div class="gutter-20">
<div class="fa fa-rocket pull-top-50" style=
"text-align: center;margin-bottom:20px;padding:20px;background:var(--bg-primary);border:3px solid #fff;color:#fff;font-size: 40px;border-radius:15px;">
</div>
<h3>
Launch Your Website
</h3>
<p>
Review the final design, request tweaks, and get your stunning website live in no time!
</p>
</div>
</div>
</div>
Step Process 3
<div class="is-matrix is-card is-step-widget is-flex is-flex-column center-align is-anim-block cc-clearover" style="border:2px solid;">
<div class="col-4 has-btm-border-mobile" style="border-right:2px solid;">
<div class="gutter-10">
<div class="fa fa-1 pull-top-40 no-pull-mobile text-center" style=
"text-align: center;margin-bottom:0px;padding:20px;background:#000;color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<div style="padding:20px;">
<h3>
Choose Your Package
</h3>
<p>
Select a web design or development package that fits your business needs and goals.
</p>
</div>
</div>
</div>
<div class="col-4 has-btm-border-mobile" style="border-right:2px solid;">
<div class="gutter-10">
<div class="fa fa-2 pull-top-40 no-pull-mobile text-center" style=
"text-align: center;margin-bottom:0px;padding:20px;background:#000;color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<div style="padding:20px;">
<h3>
Share Your Vision
</h3>
<p>
Provide us with your brand details, preferred design style, and content to bring your vision to life.
</p>
</div>
</div>
</div>
<div class="col-4">
<div class="gutter-10">
<div class="fa fa-3 pull-top-40 no-pull-mobile text-center" style=
"text-align: center;margin-bottom:0px;padding:20px;background:#000;color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<div style="padding:20px;">
<h3>
Launch Your Website
</h3>
<p>
Review the final design, request tweaks, and get your stunning website live in no time!
</p>
</div>
</div>
</div>
</div>
Step Process 3
<div class="is-matrix is-card is-step-widget is-flex is-flex-column center-align is-anim-block cc-clearover" style="border:2px solid;">
<div class="col-4 has-btm-border-mobile" style="border-right:2px solid;">
<div class="gutter-10">
<div class="fa fa-1 pull-top-40 no-pull-mobile text-center" style=
"text-align: center;margin-bottom:0px;padding:20px;background:#000;color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<div style="padding:20px;">
<h3>
Choose Your Package
</h3>
<p>
Select a web design or development package that fits your business needs and goals.
</p>
</div>
</div>
</div>
<div class="col-4 has-btm-border-mobile" style="border-right:2px solid;">
<div class="gutter-10">
<div class="fa fa-2 pull-top-40 no-pull-mobile text-center" style=
"text-align: center;margin-bottom:0px;padding:20px;background:#000;color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<div style="padding:20px;">
<h3>
Share Your Vision
</h3>
<p>
Provide us with your brand details, preferred design style, and content to bring your vision to life.
</p>
</div>
</div>
</div>
<div class="col-4">
<div class="gutter-10">
<div class="fa fa-3 pull-top-40 no-pull-mobile text-center" style=
"text-align: center;margin-bottom:0px;padding:20px;background:#000;color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<div style="padding:20px;">
<h3>
Launch Your Website
</h3>
<p>
Review the final design, request tweaks, and get your stunning website live in no time!
</p>
</div>
</div>
</div>
</div>
Step Process 4
<div class="is-matrix is-card is-step-widget is-flex is-flex-column center-align is-anim-block cc-clearover">
<div class="col-4 no-border-mobile" style="border-right:2px solid var(--bg-primary);">
<div class="gutter-10">
<div class="fa fa-1 pull-top-40 no-pull-mobile text-center" style=
"text-align: center;margin-bottom:0px;padding:20px;background:var(--bg-primary);color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<div style="padding:20px;">
<h3>
Choose Your Package
</h3>
<p>
Select a web design or development package that fits your business needs and goals.
</p>
</div>
</div>
</div>
<div class="col-4 no-border-mobile" style="border-right:2px solid var(--bg-primary);">
<div class="gutter-10">
<div class="fa fa-2 pull-top-40 no-pull-mobile text-center" style=
"text-align: center;margin-bottom:0px;padding:20px;background:var(--bg-primary);color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<div style="padding:20px;">
<h3>
Share Your Vision
</h3>
<p>
Provide us with your brand details, preferred design style, and content to bring your vision to life.
</p>
</div>
</div>
</div>
<div class="col-4">
<div class="gutter-10">
<div class="fa fa-3 pull-top-40 no-pull-mobile text-center" style=
"text-align: center;margin-bottom:0px;padding:20px;background:var(--bg-primary);color:#fff;font-size: 40px;width: 40px;height: 40px;border-radius:500px;">
</div>
<div style="padding:20px;">
<h3>
Launch Your Website
</h3>
<p>
Review the final design, request tweaks, and get your stunning website live in no time!
</p>
</div>
</div>
</div>
</div>
Testimonial Card
<div class="is-matrix bg-primary-light br15 is-flex is-flex-block no-padding">
<div class="col-12 add-20 cc-box">
<h3>
Simply the best!
</h3>
<!-- star rating widget -->
<div class="star-rating" title="">
<div class="back-stars size-20">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="front-stars" style="width: 90%">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
</div>
</div>
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="is-matrix br15 is-flex w-auto no-padding">
<div class="is--flex br500 no-padding">
<img class="is-img is-rel" style="background:transparent;height:40px;width:40px;border:2px solid #fff;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-01.jpg" alt="Matrix Themes" />
</div>
<div class="is--flex">
Maria (Berlin)
</div>
</div>
</div>
</div>
Testimonial Card 02
<div class="is-matrix is-flex is-flex-block no-padding" style="border:2px solid">
<div class="col-12 add-20 cc-box">
<h3 class="weight-400">
Simply the best!
</h3>
<!-- star rating widget -->
<div class="star-rating" title="">
<div class="back-stars size-20">
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="front-stars" style="width: 90%">
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
</div>
</div>
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="is-matrix br15 is-flex w-auto no-padding">
<div class="is--flex br500 no-padding">
<img class="is-img is-rel" style="background:transparent;height:40px;width:40px;padding:2px;border:2px solid;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-01.jpg" alt="Matrix Themes" />
</div>
<div class="is--flex">
Maria (Berlin)
</div>
</div>
</div>
</div>
Testimonial Card 03
<div class="is-matrix br15 is-flex is-flex-block no-padding" style="background:#FFD94F;">
<div class="col-12 add-20 cc-box">
<!-- star rating widget -->
<div class="star-rating" title="">
<div class="back-stars size-20" style="color:#a8a8a8;">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="front-stars" style="width: 90%;color:#000;">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
</div>
</div>
</div>
<h3>
Simply the best!
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="is-matrix br15 is-flex w-auto no-padding">
<div class="is--flex br500 no-padding">
<img class="is-img is-rel" style="background:transparent;height:40px;width:40px;padding:2px;border:2px solid;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-01.jpg" alt="Matrix Themes" />
</div>
<div class="is--flex">
Maria (Berlin)
</div>
</div>
</div>
</div>
Testimonial Card 04
<div class="is-matrix is-parallax is--flex rel no-padding br25 has-mobile-fullwidth-btn" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-shape-02.png ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay bg-primary br25 opacity-06">
</div>
<div class="max-inner color-white m-padding cc-clearover is-anim-block" style="padding:50px 0;">
<div class="is-matrix content-teaser bg-transparent is--flex is-flex-block cc-clearover">
<div class="is-matrix is-flex is-flex-block no-padding">
<div class="col-12 add-20 cc-box">
<h3>
Simply the best!
</h3>
<!-- star rating widget -->
<div class="star-rating" title="">
<div class="back-stars size-20">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="front-stars" style="width: 90%">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
</div>
</div>
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="is-matrix br15 is-flex w-auto no-padding">
<div class="is--flex br500 no-padding">
<img class="is-img is-rel" style="background:transparent;height:40px;width:40px;border:2px solid #fff;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-01.jpg" alt="Matrix Themes" />
</div>
<div class="is--flex">
Maria (Berlin)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Testimonial Card 05
<div class="is-matrix br15 is-flex flex-center w-auto no-padding">
<div class="is-flex br500 no-padding">
<img class="is-img is-rel" style="background:transparent;height:40px;width:40px;border:2px solid #fff;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-01.jpg"
alt="Matrix Themes" /> <img class="is-img is-rel br500" style="background:transparent;height:40px;width:40px;border:2px solid #fff;margin-left:-15px;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-02.jpg" alt="Matrix Themes" /> <img class="is-img is-rel br500" style=
"background:transparent;height:40px;width:40px;border:2px solid #fff;margin-left:-15px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-03.jpg" alt=
"Matrix Themes" />
</div>
<div class="is--flex">
100+ happy customers
</div>
</div>
Testimonial Card 06
<div class="is-matrix br500 color-white is-flex w-auto bg-primary add-5">
<div class="is--flex br500 no-padding">
<img class="is-img is-rel" style="background:transparent;height:40px;width:40px;border:2px solid #fff;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-01.jpg"
alt="Matrix Themes" /> <img class="is-img is-rel br500" style="background:transparent;height:40px;width:40px;border:2px solid #fff;margin-left:-15px;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-02.jpg" alt="Matrix Themes" /> <img class="is-img is-rel br500" style=
"background:transparent;height:40px;width:40px;border:2px solid #fff;margin-left:-15px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-03.jpg" alt=
"Matrix Themes" />
</div>
<div class="is--flex">
100+ happy customers
</div>
</div>
Testimonial Card 07
<div class="is-matrix br500 is-flex w-auto add-5" style="border:2px solid;">
<div class="is--flex br500 no-padding">
<img class="is-img is-rel" style="background:transparent;height:40px;width:40px;border:2px solid #fff;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-01.jpg"
alt="Matrix Themes" /> <img class="is-img is-rel br500" style="background:transparent;height:40px;width:40px;border:2px solid #fff;margin-left:-15px;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-02.jpg" alt="Matrix Themes" /> <img class="is-img is-rel br500" style=
"background:transparent;height:40px;width:40px;border:2px solid #fff;margin-left:-15px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-03.jpg" alt=
"Matrix Themes" />
</div>
<div class="is--flex">
100+ happy customers
</div>
</div>
Testimonial Card 08
<div class="is-matrix br10 is-flex bg-primary-light add-10 w-auto">
<div class="is--flex br500 no-padding">
<img class="is-img is-rel" style="background:transparent;height:40px;width:40px;border:2px solid #fff;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-01.jpg"
alt="Matrix Themes" /> <img class="is-img is-rel br500" style="background:transparent;height:40px;width:40px;border:2px solid #fff;margin-left:-15px;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-02.jpg" alt="Matrix Themes" /> <img class="is-img is-rel br500" style=
"background:transparent;height:40px;width:40px;border:2px solid #fff;margin-left:-15px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-testimonial-03.jpg" alt=
"Matrix Themes" />
</div>
<div class="is-flex-column add-10 margin-5" style="border-left:1px solid #ccc;">
<!-- star rating widget -->
<div class="star-rating" title="">
<div class="back-stars size-18">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="front-stars" style="width: 90%">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
</div>
</div>
</div>
Rated 4.9/5.0 by users
</div>
</div>
About Card 01
<div class="is-matrix is-anim-block br15 bg-primary-light is-flex is-flex-block no-padding">
<div class="col-6 add-20 cc-box wow is-folded-bottom">
<div class="is-matrix br10 is-parallax is--flex rel no-padding" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-04.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="max-inner cc-clearover cc-box" style="padding:190px 10px 10px">
<div class="is-matrix is-card br10 right-align is-flex bg-primary color-white add-10 w-auto">
<!-- use classes 'counter', 'counter-slow' or 'counter-slower' for the counter's speed -->
<p class="counter" style="font-size:60px;font-weight:600;line-height:100%;padding-right:5px;">
25
</p>
<div class="is--flex no-padding">
Years working experience
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="add-20">
<h3>
Matrix: Innovating the Future of Technology
</h3>
<span class="is-tag bg-transparent primary-color br500" style="border:1px solid var(--bg-primary);">About Us</span>
<div class="c">
</div>
<br />
<p>
At Matrix, we believe in innovation, quality, and excellence. With a passion for technology, we strive to deliver products that make a difference. Our mission is to empower businesses
with cutting-edge solutions . Backed by 25 years of expertise, we are committed to pushing boundaries and exceeding expectations.
</p>
<br />
<p>
<b>Join us and experience the Matrix difference!</b>
</p>
<br />
<a class="primary-color right-align" href="http://www.matrix-themes.com/templates/" target="">Contact Us<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a><br />
</div>
</div>
</div>
About Card 02
<div class="is-matrix is-anim-block br15 bg-primary color-white is-flex is-flex-block no-padding">
<div class="col-6 add-20 cc-box wow is-folded-bottom">
<div class="is-matrix br10 is-parallax is--flex rel no-padding" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-04.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity br10">
</div>
<div class="max-inner cc-clearover cc-box" style="padding:190px 10px 10px">
<div class="is-matrix is-card br10 right-align is-flex add-10 w-auto">
<!-- use classes 'counter', 'counter-slow' or 'counter-slower' for the counter's speed -->
<p class="counter" style="font-size:60px;font-weight:600;line-height:100%;padding-right:5px;">
25
</p>
<div class="is--flex no-padding">
Years working experience
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="add-20">
<h3>
Matrix: Innovating the Future of Technology
</h3>
<span class="is-tag bg-transparent br500" style="border:1px solid #fff;">About Us</span>
<div class="c">
</div>
<br />
<p>
At Matrix, we believe in innovation, quality, and excellence. With a passion for technology, we strive to deliver products that make a difference. Our mission is to empower businesses
with cutting-edge solutions . Backed by 25 years of expertise, we are committed to pushing boundaries and exceeding expectations.
</p>
<br />
<p>
<b>Join us and experience the Matrix difference!</b>
</p>
<br />
<a class="color-white right-align" href="http://www.matrix-themes.com/templates/" target="">Contact Us<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a><br />
</div>
</div>
</div>
About Card 03
<div class="is-matrix is-anim-block bg-lightgray br5 is-flex is-flex-block no-padding" style="border:1px solid;">
<div class="col-6 add-20 cc-box wow is-folded-bottom">
<div class="is-matrix br5 is-parallax is--flex rel no-padding" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-04.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="max-inner cc-clearover cc-box" style="padding:190px 10px 10px">
<div class="is-matrix is-card br10 right-align is-flex bg-dark color-white add-10 w-auto">
<!-- use classes 'counter', 'counter-slow' or 'counter-slower' for the counter's speed -->
<p class="counter" style="font-size:60px;font-weight:600;line-height:100%;padding-right:5px;">
25
</p>
<div class="is--flex no-padding">
Years working experience
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="add-20">
<h3>
Matrix: Innovating the Future of Technology
</h3>
<span class="is-tag bg-transparent has-dark-link br500" style="border:1px solid;">About Us</span>
<div class="c">
</div>
<br />
<p>
At Matrix, we believe in innovation, quality, and excellence. With a passion for technology, we strive to deliver products that make a difference. Our mission is to empower businesses
with cutting-edge solutions . Backed by 25 years of expertise, we are committed to pushing boundaries and exceeding expectations.
</p>
<br />
<p>
<b>Join us and experience the Matrix difference!</b>
</p>
<br />
<a class="primary-color right-align" href="http://www.matrix-themes.com/templates/" target="">Contact Us<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a><br />
</div>
</div>
</div>
Promo Card 01
<div class="is-matrix is-card is-flex is-flex-block no-padding">
<div class="col-7 wow is-folded-left-img">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" />
</div>
<div class="col-5 is--flex no-padding wow animate__animated animate__fadeInUp">
<div class="add-20 col-12 cc-box is-promo-block bg-primary-light" style="margin:20px 0 20px -20%;">
<h3>
Exclusive Offer: Upgrade Your Tech
</h3>
<span class="is-tag bg-primary">Promo Card</span>
<div class="c">
</div>
<br />
<p>
Boost your business with cutting-edge AI, automation, and cloud solutions. Stay ahead with the latest innovations designed for efficiency and growth.
</p>
<br />
<a class="arrow-link primary-color" href="http://www.matrix-themes.com/templates/" target="">Ger started<span class="arrow"> </span></a>
</div>
</div>
</div>
Promo Card 02
<div class="is-matrix is-card bg-primary has-border-radius is-flex is-flex-block no-padding">
<div class="col-7 wow is-folded-left-img">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" />
</div>
<div class="col-5 is--flex no-padding wow animate__animated animate__fadeInUp">
<div class="add-20 col-12 cc-box is-promo-block bg-white br10" style="margin:20px 0 20px -20%;">
<h3>
Exclusive Offer: Upgrade Your Tech
</h3>
<span class="is-tag bg-primary">Promo Card</span>
<div class="c">
</div>
<br />
<p>
Boost your business with cutting-edge AI, automation, and cloud solutions. Stay ahead with the latest innovations designed for efficiency and growth.
</p>
<br />
<a class="arrow-link primary-color" href="http://www.matrix-themes.com/templates/" target="">Ger started<span class="arrow"> </span></a>
</div>
</div>
</div>
Promo Card 03
<div class="is-matrix is-card bg-lightgray is-flex is-flex-block no-padding">
<div class="col-7 wow is-folded-left-img">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" />
</div>
<div class="col-5 is--flex no-padding wow animate__animated animate__fadeInUp">
<div class="add-20 col-12 cc-box bg-white br5 is-promo-block" style="margin:20px 0 20px -20%;border:1px solid;">
<h3>
Exclusive Offer: Upgrade Your Tech
</h3>
<span class="is-tag bg-dark">Promo Card</span>
<div class="c">
</div>
<br />
<p>
Boost your business with cutting-edge AI, automation, and cloud solutions. Stay ahead with the latest innovations designed for efficiency and growth.
</p>
<br />
<a class="arrow-link primary-color" href="http://www.matrix-themes.com/templates/" target="">Ger started<span class="arrow"> </span></a>
</div>
</div>
</div>
Promo Card 04
<div class="is-matrix is-card bg-white has-border-shadow is-flex is-flex-block no-padding">
<div class="col-7 wow is-folded-left-img">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" />
</div>
<div class="col-5 is--flex no-padding wow animate__animated animate__fadeInUp">
<div class="add-20 col-12 cc-box bg-white is-promo-block" style="margin:20px 0 20px -20%;border:2px solid #000;">
<h3>
Exclusive Offer: Upgrade Your Tech
</h3>
<span class="is-tag bg-dark">Promo Card</span>
<div class="c">
</div>
<br />
<p>
Boost your business with cutting-edge AI, automation, and cloud solutions. Stay ahead with the latest innovations designed for efficiency and growth.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">Read more<span class="arrow"> </span></a>
</div>
</div>
</div>
Tile Card 01
<div class="is-matrix is-card bg-primary color-white">
<div class="is-flex is-flex-column no-padding cc-clearover">
<div class="col-6">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
</div>
<div class="col-6 add-30 cc-box">
<h3>
Smart Solutions, Seamless Performance
</h3>
<p>
Enhance your workflow with innovative, efficient, and secure technology designed for growth and success.
</p>
<br />
<a class="hs-button bg-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
Tile Card 02
<div class="is-matrix is-card bg-primary color-white is-reverse">
<div class="is-flex is-flex-column cc-clearover">
<div class="col-6 add-30 cc-box">
<h3>
Smart Solutions, Seamless Performance
</h3>
<p>
Enhance your workflow with innovative, efficient, and secure technology designed for growth and success.
</p>
<br />
<a class="hs-button bg-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
<div class="col-6">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
</div>
</div>
</div>
Tile Card 03
<div class="is-matrix is-card">
<div class="is--flex is-flex-column no-padding cc-clearover">
<div class="col-6">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
</div>
<div class="col-6 add-30 cc-box">
<h3>
Smart Solutions, Seamless Performance
</h3>
<p>
Enhance your workflow with innovative, efficient, and secure technology designed for growth and success.
</p>
<br />
<a class="hs-button" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
Tile Card 04
<div class="is-matrix is-card is-reverse">
<div class="is--flex is-flex-column no-padding cc-clearover">
<div class="col-6 add-30 cc-box">
<h3>
Smart Solutions, Seamless Performance
</h3>
<p>
Enhance your workflow with innovative, efficient, and secure technology designed for growth and success.
</p>
<br />
<a class="hs-button" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
<div class="col-6">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
</div>
</div>
</div>
Tile Card 05
<div class="is-matrix is-card">
<div class="is-flex is-flex-column gap-10 no-padding cc-clearover">
<div class="col-6">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
</div>
<div class="col-6 add-30 bg-primary color-white cc-box" style="margin-right:-10px;">
<h3>
Smart Solutions, Seamless Performance
</h3>
<p>
Enhance your workflow with innovative, efficient, and secure technology designed for growth and success.
</p>
<br />
<a class="hs-button ghost-white --thin-line" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
Tile Card 06
<div class="is-matrix is-card is-reverse">
<div class="is-flex is-flex-column gap-10 no-padding cc-clearover">
<div class="col-6 add-30 bg-primary color-white cc-box">
<h3>
Smart Solutions, Seamless Performance
</h3>
<p>
Enhance your workflow with innovative, efficient, and secure technology designed for growth and success.
</p>
<br />
<a class="hs-button ghost-white --thin-line" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
<div class="col-6" style="margin-right:-10px;">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
</div>
</div>
</div>
Tile Card 07
<div class="is-matrix is-card">
<div class="is-flex is-flex-column gap-10 no-padding cc-clearover">
<div class="col-5 br5">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
</div>
<div class="col-7 bg-lightgray add-30 br5 cc-box" style="margin-right:-10px;border:1px solid">
<h3>
Smart Solutions, Seamless Performance
</h3>
<p>
Enhance your workflow with innovative, efficient, and secure technology designed for growth and success.
</p>
<br />
<a class="hs-button br500 bg-dark" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
Tile Card 08
<div class="is-matrix is-card">
<div class="is-flex is-flex-column gap-10 no-padding cc-clearover">
<div class="col-7 bg-lightgray add-30 br5 cc-box" style="margin-left:-10px;border:1px solid">
<h3>
Smart Solutions, Seamless Performance
</h3>
<p>
Enhance your workflow with innovative, efficient, and secure technology designed for growth and success.
</p>
<br />
<a class="hs-button br500 bg-dark" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
<div class="col-5 br5" style="margin-right:-10px;">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
</div>
</div>
</div>
Business hours
<ul class="hours">
<li>
<span>Monday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Tuesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Wednesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Thursday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Friday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Saturday</span>
<p>
09:00 - 12:30
</p>
</li>
<li>
<span>Sunday</span>
<p>
Closed
</p>
</li>
</ul>
Business hours 2
<ul class="hours bg-primary mid-round color-white add-10">
<li>
<span>Monday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Tuesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Wednesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Thursday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Friday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Saturday</span>
<p>
09:00 - 12:30
</p>
</li>
<li>
<span>Sunday</span>
<p>
Closed
</p>
</li>
</ul>
Progressbar 02
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Skills small</span>
</p>
<span>85%</span>
</div>
<div class="skill_bar">
<div class="skill_active bg-primary" style="width: 85%;">
</div>
</div>
</div>
Progressbar 03
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Skills small rounded styles</span>
</p>
<span>75%</span>
</div>
<div class="skill_bar br500">
<div class="skill_active bg-primary br500" style="width: 75%;">
</div>
</div>
</div>
Progressbar 04
<div class="skill">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Skills big</span>
</p>
<span>55%</span>
</div>
<div class="skill_bar">
<div class="skill_active bg-primary" style="width: 55%;">
</div>
</div>
</div>
Progressbar 05
<div class="skill">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Skills big with long text</span>
</p>
<span>75%</span>
</div>
<div class="skill_bar br5">
<div class="skill_active bg-primary br5" style="width: 75%;">
</div>
</div>
</div>
Progressbar 06
<div class="is-matrix is-card content-teaser br15 bg-primary-light is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Our Core Strengths
</h3>
<p>
At Matrix, we excel in delivering innovative, efficient, and secure technology solutions. Our expertise ensures cutting-edge advancements, optimized performance, and top-tier protection
for your business.
</p>
<br />
<a class="hs-button weight-500 br500 center-align" style="padding: 3px 3px 3px 30px!important;" href="http://www.matrix-themes.com/templates/" target="">Let's talk<svg viewbox="0 0 24 24"
focusable="false" role="presentation" class="is-arrow is-arrow bg-white br500 add-10 size-11 has-dark-link" style="margin-left:10px;">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
<div class="right-align col-4 add-20 cc-box">
<!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Innovation</span>
</p>
<span>84%</span>
</div>
<div class="skill_bar bg-white br500">
<div class="skill_active bg-primary br500 wow is-folded-left" style="width: 84%;">
</div>
</div>
</div>
<!-- end skill component --><!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Efficiency</span>
</p>
<span>95%</span>
</div>
<div class="skill_bar br500 bg-white">
<div class="skill_active bg-primary br500 wow is-folded-left" style="width: 95%;">
</div>
</div>
</div>
<!-- end skill component --><!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Security</span>
</p>
<span>100%</span>
</div>
<div class="skill_bar bg-white br500">
<div class="skill_active bg-primary br500 wow is-folded-left" style="width: 100%;">
</div>
</div>
</div>
<!-- end skill component -->
</div>
</div>
Progressbar 07
<div class="is-matrix is-card content-teaser br15 bg-primary-light is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Innovation</span>
</p>
<span>84%</span>
</div>
<div class="skill_bar bg-white br500">
<div class="skill_active bg-primary br500 wow is-folded-left" style="width: 84%;">
</div>
</div>
</div>
<!-- end skill component --><!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Efficiency</span>
</p>
<span>95%</span>
</div>
<div class="skill_bar br500 bg-white">
<div class="skill_active bg-primary br500 wow is-folded-left" style="width: 95%;">
</div>
</div>
</div>
<!-- end skill component --><!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Security</span>
</p>
<span>100%</span>
</div>
<div class="skill_bar bg-white br500">
<div class="skill_active bg-primary br500 wow is-folded-left" style="width: 100%;">
</div>
</div>
</div>
<!-- end skill component -->
</div>
<div class="right-align col-4 add-20 cc-box">
<h3>
Our Core Strengths
</h3>
<p>
At Matrix, we excel in delivering innovative, efficient, and secure technology solutions. Our expertise ensures cutting-edge advancements, optimized performance, and top-tier protection
for your business.
</p>
<br />
<a class="hs-button weight-500 br500 center-align" style="padding: 3px 3px 3px 30px!important;" href="http://www.matrix-themes.com/templates/" target="">Let's talk<svg viewbox="0 0 24 24"
focusable="false" role="presentation" class="is-arrow is-arrow bg-white br500 add-10 size-11 has-dark-link" style="margin-left:10px;">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
Progressbar 08
<div class="is-matrix is-card content-teaser br5 is--flex is-flex-block cc-clearover" style="border:1px solid;">
<div class="left-align col-8 add-20 cc-box">
<h3>
Our Core Strengths
</h3>
<p>
At Matrix, we excel in delivering innovative, efficient, and secure technology solutions. Our expertise ensures cutting-edge advancements, optimized performance, and top-tier protection
for your business.
</p>
<br />
<a class="hs-button weight-500 bg-dark br500 center-align" style="padding: 3px 3px 3px 30px!important;" href="http://www.matrix-themes.com/templates/" target="">Let's talk<svg viewbox=
"0 0 24 24" focusable="false" role="presentation" class="is-arrow is-arrow bg-white br500 add-10 size-11 has-dark-link" style="margin-left:10px;">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
<div class="right-align col-4 add-20 cc-box">
<!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Innovation</span>
</p>
<span>84%</span>
</div>
<div class="skill_bar bg-white br5">
<div class="skill_active bg-dark br5 wow is-folded-left" style="width: 84%;">
</div>
</div>
</div>
<!-- end skill component --><!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Efficiency</span>
</p>
<span>95%</span>
</div>
<div class="skill_bar br5 bg-white">
<div class="skill_active bg-dark br5 wow is-folded-left" style="width: 95%;">
</div>
</div>
</div>
<!-- end skill component --><!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Security</span>
</p>
<span>100%</span>
</div>
<div class="skill_bar bg-white br5">
<div class="skill_active bg-dark br5 wow is-folded-left" style="width: 100%;">
</div>
</div>
</div>
<!-- end skill component -->
</div>
</div>
Progressbar 09
<div class="is-matrix is-card content-teaser br5 is--flex is-flex-block cc-clearover" style="border:1px solid;">
<div class="left-align col-8 add-20 cc-box">
<!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Innovation</span>
</p>
<span>84%</span>
</div>
<div class="skill_bar bg-white br5">
<div class="skill_active bg-dark br5 wow is-folded-left" style="width: 84%;">
</div>
</div>
</div>
<!-- end skill component --><!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Efficiency</span>
</p>
<span>95%</span>
</div>
<div class="skill_bar br5 bg-white">
<div class="skill_active bg-dark br5 wow is-folded-left" style="width: 95%;">
</div>
</div>
</div>
<!-- end skill component --><!-- skill component -->
<div class="skill skill-small">
<div class="is--flex no-padding">
<p>
<span class="skill_name">Security</span>
</p>
<span>100%</span>
</div>
<div class="skill_bar bg-white br5">
<div class="skill_active bg-dark br5 wow is-folded-left" style="width: 100%;">
</div>
</div>
</div>
<!-- end skill component -->
</div>
<div class="right-align col-4 add-20 cc-box">
<h3>
Our Core Strengths
</h3>
<p>
At Matrix, we excel in delivering innovative, efficient, and secure technology solutions. Our expertise ensures cutting-edge advancements, optimized performance, and top-tier protection
for your business.
</p>
<br />
<a class="hs-button weight-500 bg-dark br500 center-align" style="padding: 3px 3px 3px 30px!important;" href="http://www.matrix-themes.com/templates/" target="">Let's talk<svg viewbox=
"0 0 24 24" focusable="false" role="presentation" class="is-arrow is-arrow bg-white br500 add-10 size-11 has-dark-link" style="margin-left:10px;">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
Menu card
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3>
French omelette
</h3>
</div>
<div class="m-line">
</div>
<div style="display:flex;">
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
<div class="m-price-holder">
<h3 style="font-size:20px;font-weight:600;">
$21
</h3>
</div>
</div>
</div>
Menu card 2
<div class="m-menu-content bg-primary-light add-20 br10 is-matrix">
<div class="m-title-holder">
<h3>
French omelette with long title
</h3>
</div>
<div class="m-line">
</div>
<div style="display:flex;">
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
<div class="m-price-holder">
<h3 style="font-size:20px;font-weight:600;">
$21
</h3>
</div>
</div>
</div>
Menu card 3
<div class="m-menu-content add-20 is-matrix" style="border:2px solid #000;">
<div class="m-title-holder">
<h3>
French omelette with long title
</h3>
</div>
<div class="m-line">
</div>
<div style="display:flex;">
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
<div class="m-price-holder">
<h3 style="font-size:20px;font-weight:600;">
$21
</h3>
</div>
</div>
</div>
Menu card 4
<div class="is-matrix is-card bg-primary color-white is-flex is-flex-block no-padding">
<div class="col-2 is-anim-block">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-menu-item.jpg?t=1705742607" alt="Matrix Themes" />
</div>
<div class="col-10">
<div class="add-20">
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3>
French omelette
</h3>
</div>
<div class="is-line bg-gradient">
</div>
<div style="display:flex;">
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
<div class="m-price-holder">
<h3 style="font-size:20px;font-weight:600;">
$21
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
Overlay Card 01
<div class="is-matrix hs-thumbnail is-parallax is--flex rel no-padding wow is-skew-left" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-04.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity">
</div>
<div class="thumbnail-hover">
<a href="http://matrix-themes.com/"></a>
</div>
<div class="max-inner cc-box cc-clearover" style="padding:150px 15px 15px">
<div class="col-12 text-hover color-white is-anim-block">
<h3 class="">
Let's talk<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow br500 add-10 size-11" style="border:1px solid">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg>
</h3>
<p>
The answer awaits in the depths of your own resolve.
</p>
</div>
</div>
</div>
Overlay Card 02
<div class="is-matrix br15 hs-thumbnail is-parallax is--flex rel no-padding wow is-skew-left" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-04.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity br15">
</div>
<div class="thumbnail-hover no-icon is--flex br15 no-padding">
<a class="hs-button weight-500 ghost-white br500 center-align" style="padding: 3px 3px 3px 30px!important;" href="http://www.matrix-themes.com/templates/" target="">Let's talk<svg viewbox=
"0 0 24 24" focusable="false" role="presentation" class="is-arrow is-arrow bg-white br500 add-10 size-11 has-dark-link" style="margin-left:10px;">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
<div class="max-inner cc-box cc-clearover" style="padding:150px 15px 15px">
<div class="col-12 text-hover color-white is-anim-block">
<h3 class="">
Let's talk<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow br500 add-10 size-11" style="border:1px solid">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg>
</h3>
<p>
The answer awaits in the depths of your own resolve.
</p>
</div>
</div>
</div>
YouTube Popup
<div class="is-matrix is-parallax is--flex rel no-padding wow is-folded-middle-top-bottom" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-06.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity">
</div>
<div class="max-inner cc-clearover" style="padding:250px 15px 15px;">
<div class="col-6 m-col-6 right-align bg-white has-shadow br8 rel add-15 is-anim-block" style="">
<div class="col-12 add-10 cc-box">
<h3>
Experience Innovation in Action
</h3>
<span class="is-tag bg-transparent has-dark-link" style="border:1px solid #ccc;">YouTube video</span>
<div class="c">
</div>
<br />
<p>
Watch how Matrix transforms businesses with cutting-edge technology. From AI-driven automation to secure cloud solutions, see our expertise come to life.
</p>
<br />
<div class="hs-button extra-small-btn bg-red rel br5">
<div class="fa-brands fa-youtube add-right-5">
</div>
Watch video <a class="popup-youtube div-link" href="https://www.youtube.com/watch?v=54b-_5xvKEU" target="_top"></a>
</div>
</div>
</div>
</div>
</div>
Vimeo Popup
<div class="is-matrix is-parallax is--flex rel no-padding wow is-folded-middle-top-bottom" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-06.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity">
</div>
<div class="max-inner cc-clearover" style="padding:250px 15px 15px;">
<div class="col-6 m-col-6 left-align bg-white has-shadow br8 rel add-15 is-anim-block" style="">
<div class="col-12 add-10 cc-box">
<h3>
Experience Innovation in Action
</h3>
<span class="is-tag bg-transparent has-dark-link" style="border:1px solid #ccc;">Vimeo video</span>
<div class="c">
</div>
<br />
<p>
Watch how Matrix transforms businesses with cutting-edge technology. From AI-driven automation to secure cloud solutions, see our expertise come to life.
</p>
<br />
<div class="hs-button extra-small-btn bg-blue rel br5">
<div class="fa-brands fa-vimeo add-right-5">
</div>
Watch video <a class="popup-vimeo div-link" href="https://vimeo.com/366012302" target="_top"></a>
</div>
</div>
</div>
</div>
</div>
Iframe Popup
<div class="is-matrix is-parallax is--flex rel no-padding wow is-folded-middle-top-bottom" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-06.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity">
</div>
<div class="max-inner cc-clearover" style="padding:250px 15px 15px;">
<div class="col-6 m-col-10 right-align br8 rel add-15 is-anim-block" style="">
<div class="hs-overlay bg-white opacity-08 br8">
</div>
<div class="col-12 add-10 cc-box">
<h3>
Experience Innovation in Action
</h3>
<span class="is-tag bg-transparent has-dark-link" style="border:1px solid #ccc;">Popup page</span>
<div class="c">
</div>
<br />
<p>
Watch how Matrix transforms businesses with cutting-edge technology. From AI-driven automation to secure cloud solutions, see our expertise come to life.
</p>
<br />
<div class="hs-button extra-small-btn ghost-dark rel br5">
<div class="fa fa-arrow-up-right-from-square add-right-5">
</div>
Read more <a class="popup-vimeo div-link" href="https://www.matrix-themes.com/templates/"></a>
</div>
</div>
</div>
</div>
</div>
Tabs widget
<ul class="tabs-nav">
<li class="active">
<a href="#tab1">First</a>
</li>
<li>
<a href="#tab2">Second</a>
</li>
<li>
<a href="#tab3">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab1" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod t empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo connnnsequat.
</p>
</div>
<div id="tab2" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab3" class="tab-content">
<p>
Lorem ipsum dolor sit amet, jjconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Tabs widget 2
<ul class="tabs-nav snip-nav center-align">
<li class="active">
<a href="#tab01">First</a>
</li>
<li>
<a href="#tab02">Second</a>
</li>
<li>
<a href="#tab03">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab01" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod t empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="tab02" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab03" class="tab-content">
<p>
Lorem ipsum dolor sit amet, jjconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Tabs widget 3
<div class="tabs">
<input type="radio" name="tabs" id="a" checked="checked" /> <label for="a">First Tab</label>
<div class="tab">
<h3>
First Tab Content
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<input type="radio" name="tabs" id="b" /> <label for="b">Second Tab</label>
<div class="tab">
<h3>
Second Tab Content
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<input type="radio" name="tabs" id="c" /> <label for="c">Third Tab</label>
<div class="tab">
<h3>
Third tab content
</h3>
<p>
hfioezhogehzioghz
</p>
</div>
</div>
Tabs widget 4
<ul class="tabs-nav tabs-style-2 center-align">
<li class="active">
<a href="#tab001">First</a>
</li>
<li>
<a href="#tab002">Second</a>
</li>
<li>
<a href="#tab003">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab001" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod t empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="tab002" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab003" class="tab-content">
<p>
Lorem ipsum dolor sit amet, jjconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Tabs widget 5
<ul class="tabs-nav tabs-style-2 dark-style center-align">
<li class="active">
<a href="#tab201">First</a>
</li>
<li>
<a href="#tab202">Second</a>
</li>
<li>
<a href="#tab203">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab201" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod t empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="tab202" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab203" class="tab-content">
<p>
Lorem ipsum dolor sit amet, jjconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Tabs widget 6
<ul class="tabs-nav tabs-style-2 color-style center-align">
<li class="active">
<a href="#tab101">First</a>
</li>
<li>
<a href="#tab102">Second</a>
</li>
<li>
<a href="#tab103">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab101" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod t empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="tab102" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab103" class="tab-content">
<p>
Lorem ipsum dolor sit amet, jjconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Accordion
<div class="toggle weight-500 size-20">
<a class="switch" href="#">Accordion 1</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
Accordion 2
<div class="toggle bg-primary-light weight-500 size-20 br5 add-10">
<a class="switch" href="#">Accordion 2</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliqui p ex ea commodo consequat.
</p>
</div>
</div>
Accordion 3
<div class="toggle bg-dark color-white weight-500 size-20 br5 add-10">
<a class="switch" href="#">Accordion 3</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliqui p ex ea commodo consequat.
</p>
</div>
</div>
Accordion 3
<div class="toggle bg-dark color-white weight-500 size-20 br5 add-10">
<a class="switch" href="#">Accordion 3</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliqui p ex ea commodo consequat.
</p>
</div>
</div>
Accordion 4
<div class="toggle weight-500 size-20 br5 add-10" style="border:2px solid #ddd;">
<a class="switch" href="#">Accordion 4</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliqui p ex ea commodo consequat.
</p>
</div>
</div>
Accordion 5
<div class="toggle color-white weight-500">
<a class="switch hs-button small-btn" href="#">Accordion 5</a>
<div class="content color-dark">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
Accordion 6
<div class="toggle weight-500">
<a class="switch hs-button small-btn ghost-dark" href="#">Accordion 6</a>
<div class="content color-dark">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
Pure CSS Accordion
<div class="is-faqs">
<input type="checkbox" id="f1" />
<h3 style="">
<label for="f1">Fusce convallis metus id felis?</label>
</h3>
<div class="is-faqs__content">
<p>
Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Ut a nisl id ante tempus hendrerit. Praesent venenatis metus at tortor
pulvinar varius. Nam pretium turpis et arcu. Aenean imperdiet. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Praesent egestas tristique nibh. Praesent congue erat at
massa. Vivamus aliquet elit ac nisl. Aenean commodo ligula eget dolor. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Proin pretium, leo ac pellentesque mollis,
felis nunc ultrices eros, sed gravida augue augue mollis justo. Quisque malesuada placerat nisl. Etiam feugiat lorem non metus. Vestibulum ullamcorper mauris at ligula.
</p>
</div>
</div>
Divider widget 2
<div class="is-line bold-line small-line bg-primary">
</div>
Social icons
<div class="hs-social new-social small-social text-left size-11 is-circle-solid-white is-rounded link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-x-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
</div>
Social icons 2
<div class="hs-social text-left new-social small-social size-11 is-circle-border link-dark is-rounded">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-x-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
</div>
Social icons 3
<div class="hs-social text-left new-social small-social size-11 is-circle-border link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5 br3"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-x-twitter fa-2x add-right-5 br3"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5 br3"></a>
</div>
Social icons 4
<div class="hs-button small-btn ghost-dark rel">
<div class="fa-brands fa-facebook add-right-5">
</div>
Facebook <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button ghost-dark small-btn rel">
<div class="fa-brands fa-x-twitter add-right-5">
</div>
Twitter <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button ghost-dark small-btn rel">
<div class="fa-brands fa-instagram add-right-5">
</div>
Instagram <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
Social icons 5
<div class="hs-button small-btn br3 rel">
<div class="fa-brands fa-facebook add-right-5">
</div>
Facebook <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button small-btn br3 rel">
<div class="fa-brands fa-x-twitter add-right-5">
</div>
Twitter <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button small-btn br3 rel">
<div class="fa-brands fa-instagram add-right-5">
</div>
Instagram <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
Social icons 6
<div class="hs-button extra-small-btn bg-round rel">
<div class="fa-brands fa-facebook add-right-5">
</div>
Facebook <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button extra-small-btn bg-round rel">
<div class="fa-brands fa-x-twitter add-right-5">
</div>
Twitter <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button extra-small-btn bg-round rel">
<div class="fa-brands fa-instagram add-right-5">
</div>
Instagram <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
Contact Card
<div class="is-matrix is-card rel is-parallax is--flex rel no-padding br8" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-abstract-13.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay opacity-03 bg-primary-light br8">
</div>
<div class="max-inner m-padding cc-clearover is-anim-block" style="padding:20px 0;">
<div class="is-matrix content-teaser bg-transparent is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Reach our Expert Team
</h3>
<p>
Connect with our experts today & explore customized solutions for your business.
</p>
<br />
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<!-- address line -->
<div class="fa fa-home bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Office Address
</p>
<p>
Feldstraße 28, 20357 Hamburg, Germany
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<div class="fa fa-envelope bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Write email
</p>
<p>
info@example.com
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<div class="fa fa-phone bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Give us a call
</p>
<p>
+49 12 345 6789
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<div class="fa fa-clock bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Working hours
</p>
<p>
Mon - Fri 09:00 - 13:00, 14:00 - 17:00
</p>
</div>
</div>
<!-- end address line -->
<br />
<h3>
Follow us
</h3>
<!-- social icons -->
<div class="hs-social new-social small-social text-left size-11 is-circle-solid-white is-rounded link-white">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook bg-primary fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank"
class="fa-brands fa-x-twitter bg-primary fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-instagram bg-primary fa-2x add-right-5"></a>
</div>
<!-- end social icons -->
</div>
</div>
</div>
</div>
Contact Card 2
<div class="is-matrix is-card content-teaser bg-white has-border-shadow is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Reach our Expert Team
</h3>
<p>
Connect with our experts today & explore customized solutions for your business.
</p>
<br />
<div class="is-matrix is-flex" style="padding:10px 0; display:flex;border-bottom:1px solid #ddd;">
<!-- address line -->
<div class="fa fa-home br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Office Address
</p>
<p>
Feldstraße 28, 20357 Hamburg, Germany
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="padding:10px 0; display:flex;border-bottom:1px solid #ddd;">
<!-- address line -->
<div class="fa fa-envelope br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Write email
</p>
<p>
info@example.com
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="padding:10px 0; display:flex;border-bottom:1px solid #ddd;">
<div class="fa fa-phone br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Give us a call
</p>
<p>
+49 12 345 6789
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="padding:10px 0; display:flex;border-bottom:1px solid #ddd;">
<div class="fa fa-clock br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Working hours
</p>
<p>
Mon - Fri 09:00 - 13:00, 14:00 - 17:00
</p>
</div>
</div>
<!-- end address line -->
<br />
<h3>
Follow us
</h3>
<!-- social icons -->
<div class="hs-social new-social small-social text-left size-11 is-circle-solid-white is-rounded link-dark is--inline-block br500" style="border:2px solid;">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-x-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
</div>
<!-- end social icons -->
</div>
</div>
Contact Card 3
<div class="is-matrix is-card bg-primary color-white">
<div class="is-flex is-flex-block cc-clearover">
<div class="col-6">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-07.jpg" alt="Matrix Themes" />
</div>
<div class="col-6 add-20 cc-box">
<div class="left-align add-20 cc-box">
<h3>
Reach our Expert Team
</h3>
<p>
Connect with our experts today & explore customized solutions for your business.
</p>
<br />
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<!-- address line -->
<div class="fa fa-home bg-white primary-color br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Office Address
</p>
<p>
Feldstraße 28, 20357 Hamburg, Germany
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<div class="fa fa-envelope bg-white primary-color br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Write email
</p>
<p>
info@example.com
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<div class="fa fa-phone bg-white primary-color br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Give us a call
</p>
<p>
+49 12 345 6789
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<div class="fa fa-clock bg-white primary-color br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Working hours
</p>
<p>
Mon - Fri 09:00 - 13:00, 14:00 - 17:00
</p>
</div>
</div>
<!-- end address line -->
<br />
<h3>
Follow us
</h3>
<!-- social icons -->
<div class="hs-social new-social small-social text-left size-11 is-circle-solid-white is-rounded has-dark-link">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook bg-white fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank"
class="fa-brands fa-x-twitter bg-white fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-instagram bg-white fa-2x add-right-5"></a>
</div>
<!-- end social icons -->
</div>
</div>
</div>
</div>
Contact Card 4
<div class="is-matrix br15 is-parallax is--flex rel no-padding" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-01.jpg ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay gradient-opacity br15">
</div>
<div class="max-inner cc-clearover" style="padding:250px 15px 15px;">
<div class="col-6 cc-box left-align opacity-6 color-white br15 rel add-15 is-anim-block" style="">
<div class="col-12 add-10 cc-box">
<h3>
Reach our Expert Team
</h3>
<p>
Connect with our experts today & explore customized solutions for your business.
</p>
<br />
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<!-- address line -->
<div class="fa fa-home bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Office Address
</p>
<p>
Feldstraße 28, 20357 Hamburg, Germany
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<div class="fa fa-envelope bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Write email
</p>
<p>
info@example.com
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<div class="fa fa-phone bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Give us a call
</p>
<p>
+49 12 345 6789
</p>
</div>
</div>
<!-- end address line -->
<!-- address line -->
<div class="is-matrix is-flex" style="margin-bottom:20px; display:flex;">
<div class="fa fa-clock bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<p class="weight-600 size-18">
Working hours
</p>
<p>
Mon - Fri 09:00 - 13:00, 14:00 - 17:00
</p>
</div>
</div>
<!-- end address line -->
<br />
<h3>
Follow us
</h3>
<!-- social icons -->
<div class="hs-social new-social small-social text-left size-11 is-circle-solid-white is-rounded link-white">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook bg-primary fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank"
class="fa-brands fa-x-twitter bg-primary fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-instagram bg-primary fa-2x add-right-5"></a>
</div>
<!-- end social icons -->
</div>
</div>
</div>
</div>
Team Card 1
<figure class="is-shined snip1581 color-white">
<img style="" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" alt="Hembarevskyy Serhiy" />
<figcaption>
<div class="max-inner color-white cc-clearover">
<div class="col-12 left-align is-anim-block">
<h3>
Olivia Hayes
</h3>
<p>
Business Development Manager
</p>
<a class="color-white link-outlined" href="http://www.matrix-themes.com/templates/" target="">Full Profile<svg viewbox="0 0 24 24" focusable="false" role="presentation" class=
"is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</figcaption>
</figure>
Team Card 2
<figure class="is-shined br30 snip1581 color-white">
<img style="" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" alt="Hembarevskyy Serhiy" />
<figcaption>
<div class="max-inner color-white cc-clearover">
<div class="col-12 left-align is-anim-block">
<h3>
Olivia Hayes
</h3>
<p>
Business Development Manager
</p>
<a class="color-white link-outlined" href="http://www.matrix-themes.com/templates/" target="">Full Profile<svg viewbox="0 0 24 24" focusable="false" role="presentation" class=
"is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</figcaption>
</figure>
Team Card 3
<figure class="is-shined snip1581 color-white">
<img style="" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" alt="Hembarevskyy Serhiy" />
<div class="hs-overlay white-solid-border">
</div>
<figcaption>
<div class="max-inner color-white cc-clearover">
<div class="col-12 left-align is-anim-block">
<h3>
Olivia Hayes
</h3>
<p>
Business Development Manager
</p>
<a class="color-white link-outlined" href="http://www.matrix-themes.com/templates/" target="">Full Profile<svg viewbox="0 0 24 24" focusable="false" role="presentation" class=
"is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</figcaption>
</figure>
Team Card 4
<figure class="is-shined snip1581 dark-solid-border color-white">
<img style="" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" alt="Hembarevskyy Serhiy" />
<figcaption>
<div class="max-inner color-white cc-clearover">
<div class="col-12 left-align is-anim-block">
<h3>
Olivia Hayes
</h3>
<p>
Business Development Manager
</p>
<a class="color-white link-outlined" href="http://www.matrix-themes.com/templates/" target="">Full Profile<svg viewbox="0 0 24 24" focusable="false" role="presentation" class=
"is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</figcaption>
</figure>
Team Card 5
<figure class="is-shined snip1581 has-border-shadow color-white">
<img style="" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" alt="Hembarevskyy Serhiy" />
<figcaption>
<div class="max-inner color-white cc-clearover">
<div class="col-12 left-align is-anim-block">
<h3>
Olivia Hayes
</h3>
<p>
Business Development Manager
</p>
<a class="color-white link-outlined" href="http://www.matrix-themes.com/templates/" target="">Full Profile<svg viewbox="0 0 24 24" focusable="false" role="presentation" class=
"is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</figcaption>
</figure>
Team Card 6
<div class="is-matrix is-card bg-primary color-white is-flex is-flex-block no-padding br0" style="margin-top:10px;">
<div class="col-3">
<div class="image_wrapper resp-img" style="height:150px;width:150px;">
<img class="is-img is-rel" style="background:#fff;margin-top:-20px;margin-left:10px; border-radius:0px;padding:5px;border:2px solid #fff;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-01.jpg" alt="Hembarevskyy Serhiy" />
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
Liam Bennett
</h3>
<p>
Chief Executive Officer (CEO)
</p>
<p>
Maecenas nec odio et ante tincidunt tempus. Etiam rhoncus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
</p>
<br />
<a class="link-outlined" href="http://www.matrix-themes.com/templates/" target="">Full Profile<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
Team Card 7
<div class="is-matrix is-card is-flex is-flex-block no-padding br10" style="margin-top:10px;border:2px solid var(--bg-primary);">
<div class="col-3">
<div class="image_wrapper resp-img" style="height:150px;width:150px;">
<img class="is-img is-rel" style="background:#fff;margin-top:-20px;margin-left:10px; border-radius:500px;padding:5px;border:2px solid var(--bg-primary);" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-01.jpg" alt="Hembarevskyy Serhiy" />
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
Liam Bennett
</h3>
<p>
Chief Executive Officer (CEO)
</p>
<p>
Maecenas nec odio et ante tincidunt tempus. Etiam rhoncus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
</p>
<br />
<a class="link-outlined" href="http://www.matrix-themes.com/templates/" target="">Full Profile<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
Team Card 8
<div class="is-matrix is-card is-flex is-flex-block no-padding has-border-shadow">
<div class="col-3">
<div class="image_wrapper resp-img" style="width:150px;">
<img style="background:#fff;margin-top:-20px;margin-left:10px; border-radius:0px;padding:5px;border:2px solid #000;" src=
"https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-01.jpg" alt="Hembarevskyy Serhiy" />
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
Liam Bennett
</h3>
<p>
Chief Executive Officer (CEO)
</p>
<p>
Maecenas nec odio et ante tincidunt tempus. Etiam rhoncus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
</p>
<br />
<a class="link-outlined" href="http://www.matrix-themes.com/templates/" target="">Full Profile<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
Image Mask 1
<div class="is-matrix is-card" style="border:2px solid var(--bg-primary)">
<div class="is--flex is-flex-block cc-clearover">
<div class="col-5">
<div class="mask-img resp-img pull-top-30 pull-btm-30" style="mask-image: url(https://u.jimcdn.com/cms/o/s77270d56027027a9/userlayout/font/mask-06.svg?t=1710323091);">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" class="" alt="Matrix themes" />
</div>
</div>
<div class="col-7 add-20 cc-box has-mobile-fullwidth-btn">
<h3 class="weight-600">
3 Reasons to choose Matrix Themes
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="has-check-list br10 green-color">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Professional 24/7 Support
</li>
</ul>
</div>
<br />
<a class="hs-button is-outlined" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Read more<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Mask 2
<div class="is-matrix is-card bg-primary color-white link-white br5">
<div class="is--flex is-flex-block cc-clearover">
<div class="col-5 add-25 cc-box">
<div class="mask-img resp-img" style="mask-image: url( https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/font/m-mask-06.svg );">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" class="" alt="Matrix themes" />
</div>
</div>
<div class="col-7 add-20 cc-box">
<h3 class="weight-600">
3 Reasons to choose Matrix Themes
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="has-check-list-2 br10">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Professional 24/7 Support
</li>
</ul>
</div>
<br />
<a class="link-outlinedl link-flash" href="http://www.matrix-themes.com/templates/" target="">Read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Mask 3
<div class="is-matrix is-card bg-primary-light add-20 br25 rel color-white link-white" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-shape-02.png ') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay bg-primary opacity-05 br25">
</div>
<div class="is--flex is-flex-block cc-clearover">
<div class="col-5">
<div class="mask-img resp-img br0" style="mask-image: url( https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/font/m-mask-08.svg );">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" class="" alt="Matrix themes" />
</div>
</div>
<div class="col-7 add-20 cc-box">
<h3 class="weight-600">
3 Reasons to choose Matrix Themes
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="has-check-list-2 br10">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Professional 24/7 Support
</li>
</ul>
</div>
<br />
<a class="link-outlinedl link-flash" href="http://www.matrix-themes.com/templates/" target="">Read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Mask 4
<div class="is-matrix is-card bg-primary-light add-20 br25 rel color-white link-white" style=
"background: url(' https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-pattern-01.png ') repeat center;background-attachment:scroll!important;background-size: 500px 500px!important;">
<div class="hs-overlay bg-primary opacity-09 br25">
</div>
<div class="is--flex is-flex-block cc-clearover">
<div class="col-5">
<div class="mask-img resp-img br0" style="mask-image: url( https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/font/m-mask-01.svg );">
<img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" class="" alt="Matrix themes" />
</div>
</div>
<div class="col-7 add-20 cc-box">
<h3 class="weight-600">
3 Reasons to choose Matrix Themes
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="has-check-list-2 br10">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Professional 24/7 Support
</li>
</ul>
</div>
<br />
<a class="link-outlinedl link-flash" href="http://www.matrix-themes.com/templates/" target="">Read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Vertical Timeline
<div class="timeline-container alt">
<ul class="vl">
<li>
<h3>
Step 01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</li>
<li>
<h3>
Step 02
</h3>
<p>
Morbi ac felis. Praesent ac massa at ligula laoreet iaculis. Etiam imperdiet imperdiet orci. Vestibulum fringilla pede sit amet augue. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem. Nunc nonummy metus.
</p>
</li>
<li>
<h3>
Step 03
</h3>
<p>
In auctor lobortis lacus. Phasellus nec sem in justo pellentesque facilisis.
</p>
</li>
<li class="is-green">
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit. Pellentesque ut neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent egestas neque eu enim.
</p>
</li>
</ul>
</div>
Vertical Timeline 2
<div class="timeline-container bg-primary-light add-20 mid-round">
<ul class="vl">
<li>
<h3>
Step 01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</li>
<li>
<h3>
Step 02
</h3>
<p>
Morbi ac felis. Praesent ac massa at ligula laoreet iaculis. Etiam imperdiet imperdiet orci. Vestibulum fringilla pede sit amet augue. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem. Nunc nonummy metus.
</p>
</li>
<li>
<h3>
Step 03
</h3>
<p>
In auctor lobortis lacus. Phasellus nec sem in justo pellentesque facilisis.
</p>
</li>
<li>
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit. Pellentesque ut neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent egestas neque eu enim.
</p>
</li>
</ul>
</div>
Vertical Timeline (Image)
<div class="timeline-container alt">
<div class="timeline-container has-img alt">
<ul class="vl">
<li>
<div style="position: absolute;left: -33px;top:-15px;">
<img class="is-img resp-img is-rel" style="max-width:60px;border:1px dashed #ddd;border-radius:500px;background:#fff;" srcset=
"https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/01-walk.png" alt="Matrix Themes" />
</div>
<h3>
Step 01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</li>
<li>
<div style="position: absolute;left: -33px;top:-15px;">
<img class="is-img resp-img is-rel" style="max-width:60px;border:1px dashed #ddd;border-radius:500px;background:#fff;" srcset=
"https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/02-bus.png" alt="Matrix Themes" />
</div>
<h3>
Step 02
</h3>
<p>
Morbi ac felis. Praesent ac massa at ligula laoreet iaculis. Etiam imperdiet imperdiet orci. Vestibulum fringilla pede sit amet augue. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem. Nunc nonummy metus.
</p>
</li>
<li>
<div style="position: absolute;left: -33px;top:-15px;">
<img class="is-img resp-img is-rel" style="max-width:60px;border:1px dashed #ddd;border-radius:500px;background:#fff;" srcset=
"https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/03-train.png" alt="Matrix Themes" />
</div>
<h3>
Step 03
</h3>
<p>
In auctor lobortis lacus. Phasellus nec sem in justo pellentesque facilisis.
</p>
</li>
<li class="is-green">
<div style="position: absolute;left: -33px;top:-15px;">
<img class="is-img resp-img is-rel" style="max-width:60px;border:1px dashed #ddd;border-radius:500px;background:#fff;" srcset=
"https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/04-airplane.png" alt="Matrix Themes" />
</div>
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit. Pellentesque ut neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent egestas neque eu enim.
</p>
</li>
</ul>
</div>
Horizontal Timeline
<div class="timeline-container is-horizontal">
<ul class="vl">
<li>
<h3>
Step01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti.
</p>
</li>
</ul>
</div>
Vertical T.(last item)
<div class="timeline-container is-horizontal is-last">
<ul class="vl">
<li>
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit.Vestibulum fringilla pede sit amet augue.
</p>
</li>
</ul>
</div>
Button 2
<a class="hs-button mid-round" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button 3
<a class="hs-button bg-round" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button 4
<a class="hs-button ghost-primary" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button 5
<a class="hs-button ghost-dark" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button 6
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom Button</a>
Button 7
<a class="hs-button weight-500 ghost-dark" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
Button 8
<a class="hs-button weight-500 ghost-white" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
has-right-col-border
Documentation
draggable-logo
Global colors
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
Template colors
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
Footer Styles
| background | |
| text color | |
| link color | |
| horizontal line |
Buttons
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
Mobile navigation
| background color | |
| navigation color |
Other elements
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.
is-switcher