Archived widgets
Archive
Restaurant menu 3
<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sef6e1f8b3142c48a/userlayout/img/food-parallax.jpg?t=1583071052') no-repeat center;">
<div class="hs-overlay bg-dark">
</div>
<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
<div class="col-6 center-align cc-box">
<!-- menu item -->
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3 class="size-20 weight-600">
French omelette
</h3>
</div>
<div class="m-line">
</div>
<div class="m-price-holder">
<h3 class="weight-600 size-20">
$21
</h3>
</div>
<div class="m-btm-holder text-left">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
</div>
<!-- end menu item -->
<!-- menu item -->
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3 class="size-20 weight-600">
French omelette
</h3>
</div>
<div class="m-line">
</div>
<div class="m-price-holder">
<h3 class="weight-600 size-20">
$21
</h3>
</div>
<div class="m-btm-holder text-left">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
</div>
<!-- end menu item -->
<!-- menu item -->
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3 class="size-20 weight-600">
French omelette
</h3>
</div>
<div class="m-line">
</div>
<div class="m-price-holder">
<h3 class="weight-600 size-20">
$21
</h3>
</div>
<div class="m-btm-holder text-left">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
</div>
<!-- end menu item -->
</div>
</div>
</div>
Animated Popup
<!-- ************* Content teaser with animated popup ************* -->
<a href="#popup-article" class="hs-button bg-round">article popup</a>
<div id="popup-article" class="popup popup-overlay">
<div class="popup__block lazy">
<div class="max-inner">
<h1 class="big">
This is my title
</h1>
<br />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</p>
<br />
<!-- ************** Fa social icons **************** -->
<div class="hs-social left-align link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>
</div>
<a href="#!" class="popup__close">close</a>
</div>
</div>
<!-- ************* End Content teaser ************* -->
Fullwidth Content Carousel
<style>
/* <![CDATA[ */
.is-new-slider .item {
height:600px!important;
}
@media only screen and (max-width: 459px) {
.is-new-slider .item {
height:300px!important;
}
}
/*]]>*/
</style><!-- ************* new matrix slider ************* -->
<div class="is-matrix-slider is-new-slider owl-carousel owl-theme is-fullwidth">
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide01.jpg" alt="" />
<div class="is-new-caption">
<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.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide-test.jpg?t=1588067569" alt="" />
<div class="is-new-caption">
<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.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide03.jpg" alt="" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<!-- ************* mid-rounded button ************* -->
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.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-matrix-slider').owlCarousel({
// transitionStyle : "fade",// other options 'fadeUp', 'goDown'
autoPlay: 5000,
slideSpeed:600,
items : 1,
itemsDesktop : [1199,1],
itemsDesktopSmall : [980,1],
itemsTablet: [768,1],
itemsMobile : [479,1],
navigation : true
});
});
})(jQuery);
//]]>
</script><br />
<div class="matrix-msg invisible">
Edit here your content carousel
</div>
Parallax
<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/zdc-parallax.jpg') no-repeat center;background-size:cover!important;">
<div class="hs-overlay opacity-8">
</div>
<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
<div class="col-6">
<h1 class="">
This is a fixed image
</h1>
<p>
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
</p>
<br />
<a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</div>
Fullwidth tile 3
<div class="is-matrix is-fullwidth bg-dark">
<div class="is-flex is-flex-block h-100 mobile-auto cc-clearover">
<div class="col-6">
<img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1539558175" />
</div>
<div class="is--flex h-100 mobile-auto col-6 m-padding cc-box" style="padding:5%;">
<div class="color-white is-anim-block" style="max-width:800px; margin:0 auto;">
<h3>
Ultimate tile 3
</h3>
<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. Lorem ipsum
dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus
est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button ghost-white" href="https://www.zodiac-framework.com/" target="">Custom button</a>
</div>
</div>
</div>
</div>
Fullwidth tile 4
<div class="is-matrix is-fullwidth bg-grey">
<div class="is-flex is-flex-block h-100 mobile-auto cc-clearover">
<div class="h-100 is--flex mobile-auto col-6 m-padding cc-box" style="padding:5%;">
<div class="is-anim-block" style="max-width:800px; margin:0 auto;">
<h3>
Ultimate tile 4
</h3>
<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. Lorem ipsum
dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus
est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button" href="https://www.zodiac-framework.com/" target="">Custom button</a>
</div>
</div>
<div class="col-6">
<img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1539558175" />
</div>
</div>
</div>
Parallax
<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/zdc-parallax.jpg') no-repeat center;background-size:cover!important;">
<div class="hs-overlay opacity-8">
</div>
<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
<div class="col-6 center-align">
<h1 class="">
This is a fixed image
</h1>
<p>
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
</p>
<br />
<a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</div>
Parallax 3
<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/zdc-parallax.jpg') no-repeat center;background-size:cover!important;">
<div class="hs-overlay opacity-8">
</div>
<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
<div class="col-6 right-align text-right add-10 cc-box">
<h1 class="">
This is a fixed image
</h1>
<p>
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
</p>
<br />
<a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</div>
Bestseller widget 3
<div class="is-matrix rel is--flex no-padding">
<div class="col-8 left-align">
<div class="item resp-img">
<img style="border-radius:10px;" src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="col-6 right-align" style="margin-left:-30%;border-radius:10px;">
<div class="hs-description bg-white has-shadow add-2" style="border-radius:10px;">
<h3 class="weight-600">
Make it stand out
</h3>
<p class="size-15">
Premium Jimdo theme with a modern design and bundled with powerful plugins for creating versatile online stores
</p>
<br />
<a class="hs-button ghost-dark is-outlined" href="http://www.matrix-themes.com/purchase" target="">Learn more</a>
</div>
</div>
</div>
Bestseller widget 4
<div class="is-matrix rel is--flex no-padding">
<div class="col-8 left-align">
<div class="item resp-img">
<img style="border-radius:10px;" src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="col-6 right-align" style="margin-left:-30%;border-radius:10px;">
<div class="hs-description bg-primary color-white add-2" style="border-radius:10px;">
<h3 class="weight-600">
Make it stand out
</h3>
<p class="size-15">
Premium Jimdo theme with a modern design and bundled with powerful plugins for creating versatile online stores
</p>
<br />
<a class="hs-button ghost-white is-outlined" href="http://www.matrix-themes.com/purchase" target="">Learn more</a>
</div>
</div>
</div>
Fullwidth section 2
<div class="is-matrix hs-fullwidth bg-dark color-white cc-clearover">
<div class="inner cc-clearover" style="padding:150px 0;">
<div class="col-6 right-align text-right add-10 cc-box is-anim-block">
<h1>
Your Title
</h1>
<p>
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Fullwidth section 3
<div class="is-matrix hs-fullwidth bg-primary color-white cc-clearover">
<div class="inner cc-clearover" style="padding:150px 0;">
<div class="col-6 center-align is-anim-block">
<h1>
Your Title
</h1>
<p>
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Bold quote 1
<div class="hs-fullwidth bg-primary color-white link-white cc-clearover">
<div class="inner m-padding" style="padding:200px 0;">
<!-- ************* Quote teaser ************* -->
<center>
<div class="fa fa-quote-left fa-3x primary-color-dark">
</div>
<br />
<p class="has-large-text col-6">
Whatever it is, the way you tell your story online can make all the difference
</p>
<a href="https://www.matrix-themes.com/" class="bold-underline">Bold underline link</a>
</center>
<!-- ************* End Quote teaser ************* -->
</div>
</div>
Bold quote 2
<div class="hs-fullwidth bg-dark color-white link-white cc-clearover">
<div class="inner m-padding" style="padding:250px 0;">
<!-- ************* Quote teaser ************* -->
<div class="left-align col-6 animated fadeInUp">
<div class="fa fa-quote-left fa-4x absolute-top-left" style="top:-30px;opacity:0.6;font-size:100px;">
</div>
<span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="add-top-10">
(Elemeivamus)
</p>
</div>
<!-- ************* End Quote teaser ************* -->
</div>
</div>
Half fullwidth bg
<!-- *** Matrix Widget half fullwidth section *** -->
<div class="is-matrix half-fullwidth is-flex-block">
<div class="mid-box-left bg-primary main-equal col-flex">
<div class="hs-description bg-transparent color-white link-white m-padding cc-clearover" style="padding:200px 20px;">
<h2>
This is your heading
</h2>
<p>
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. massa, convallis a pellentesque nec, egestas non nisi.
</p>
<br />
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
<div class="mid-box-right bg-dark equal col-flex">
<div class="hs-description bg-transparent color-white link-white m-padding cc-clearover" style="padding:200px 20px;">
<h2>
This is your heading
</h2>
<p>
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada
feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. P
</p>
<br />
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Fullwidth section
<div class="is-matrix hs-fullwidth bg-grey cc-clearover">
<div class="inner cc-clearover" style="padding:150px 0;">
<div class="col-6 is-anim-block">
<h1>
Your Title
</h1>
<p>
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Feedback widget
<div class="is-matrix bg-grey">
<div class="hs-left-50 col-12">
<div class="image_wrapper resp-img add-10" style="border-radius img: 30px;">
<img src="https://u.jimcdn.com/cms/o/s7f57b782ca2dfcb3/userlayout/img/customer.jpg?t=1524662588" alt="" style="border-radius:20px 0 20px 0;" />
</div>
</div>
<div class="hs-right-50 col-12 pull-top-50">
<div class="gutter-20 clearover">
<!-- ************** Quote teaser ************** -->
<div class="center-align">
<center>
<div class="fa fa-quote-left fa-4x rel" style="color:#888;">
</div>
</center>
<span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference Sed porttitor lectus nibh</span>
<p class="add-top-10">
(Quote 1)
</p>
</div>
<!-- ************** End Quote teaser ************** -->
</div>
</div>
</div>
Feedback widget 2
<div class="is-matrix bg-dark color-white">
<div class="hs-left-50 col-12">
<div class="image_wrapper resp-img add-10" style="border-radius img: 30px;">
<img src="https://u.jimcdn.com/cms/o/s7f57b782ca2dfcb3/userlayout/img/customer.jpg?t=1524662588" alt="" style="border-radius:20px 0 20px 0;" />
</div>
</div>
<div class="hs-right-50 col-12 pull-top-50">
<div class="gutter-20 clearover">
<!-- ************** Quote teaser ************** -->
<div class="center-align">
<center>
<div class="fa fa-quote-left fa-4x rel" style="color:#888;">
</div>
</center>
<span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="add-top-10">
(Quote 2)
</p>
</div>
<!-- ************** End Quote teaser ************** -->
</div>
</div>
</div>
Feedback widget 3
<div class="is-matrix bg-grey">
<center>
<div class="col-6">
<div class="image_wrapper resp-img add-10">
<img src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="" style="border-radius:500px;" />
</div>
</div>
<div class="hs-right-50 col-12 pull-top-50">
<div class="gutter-20 clearover">
<!-- ************** Quote teaser ************** -->
<center>
<div class="fa fa-quote-left fa-4x rel center-align" style="color:#888;">
</div>
</center>
<span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="add-top-10">
(Quote 3)
</p>
</div>
<!-- ************** End Quote teaser ************** -->
</div>
</center>
</div>
Feedback widget 4
<div class="is-matrix bg-transparent">
<center>
<div class="col-6">
<div class="image_wrapper resp-img add-10">
<img src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="" style="border-radius:500px;" />
</div>
</div>
<div class="hs-right-50 col-12 pull-top-50">
<div class="gutter-20 clearover">
<!-- ************** Quote teaser ************** -->
<center>
<div class="fa fa-quote-left fa-4x rel center-align" style="color:#888;">
</div>
</center>
<span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="add-top-10">
(Quote 5)
</p>
</div>
<!-- ************** End Quote teaser ************** -->
</div>
</center>
</div>
Quote teaser 2
<!-- *** Matrix Widget quote teaser *** -->
<div class="is-matrix col-6 center-align cc-clearover">
<center>
<div class="fa fa-quote-left fa-4x" style="top:10px;opacity:0.2;font-size:50px;">
</div>
<br />
<span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="weight-500 size-11">
( Quote style 2 )
</p>
</center>
</div>
Quote teaser 3
<!-- *** Matrix Widget quote teaser *** -->
<div class="is-matrix cc-clearover">
<div class="col-6 right-align text-right">
<div class="fa fa-quote-left fa-4x absolute-top-right" style="top:-10px;opacity:0.2;font-size:50px;">
</div>
<span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="weight-500 size-11 add-top-5">
( Quote style 3 )
</p>
</div>
</div>
Bestseller widget
<div class="is-matrix rel">
<div class="col-8">
<div class="item resp-img">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="absolute-top-right col-6 rel-mobile-only" style="margin-top:30px;">
<div class="hs-description bg-white has-shadow add-20">
<h3 class="big add-top-10">
Make it loud
</h3>
<p class="size-15">
Premium Jimdo theme with a modern design and bundled with powerful plugins for creating versatile online stores
</p>
<br />
<a class="hs-button ghost-dark is-outlined" href="http://www.matrix-themes.com/purchase" target="">Purchase now</a>
</div>
</div>
</div>
Bestseller widget 2
<div class="is-matrix rel">
<div class="col-8 right-align">
<div class="item resp-img">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="absolute-top-left col-6 rel-mobile-only" style="margin-top:30px;">
<div class="hs-description bg-dark add-20 color-white">
<h3 class="big add-top-10">
Make it loud
</h3>
<p class="size-15">
Premium Jimdo theme with a modern design and bundled with powerful plugins for creating versatile online stores
</p>
<br />
<a class="hs-button ghost-white is-outlined" href="http://www.matrix-themes.com/purchase" target="">Purchase now</a>
</div>
</div>
</div>
Accordion 1
<!-- toggle style 1 -->
<ul class="accordeon">
<li class="accordeon_item">
<h3 class="accordeon_title">
Title
</h3>
<div class="accordeon_content">
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, quibusdam?
</p>
</div>
</li>
</ul>
Accordion 2
<!-- toggle style 2 -->
<ul class="accordeon">
<li class="accordeon_item">
<h3 class="accordeon_title bg-dark color-white mid-round size-14">
Title
</h3>
<div class="accordeon_content">
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, quibusdam?
</p>
</div>
</li>
</ul>
Tile widget
<!-- *** Matrix Widget tile widget *** -->
<div class="is-matrix bg-primary cc-clearover">
<div class="hs-right-50">
<div class="image_wrapper resp-img">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="hs-left-50 color-white">
<div class="gutter-20 clearover">
<h1>
Your title
</h1>
<p>
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Pellentesque in ipsum id orci porta dapibus.
</p>
<br />
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>
</div>
</div>
<div class="c">
</div>
Tile widget 2
<!-- *** Matrix Widget tile widget *** -->
<div class="is-matrix bg-grey cc-clearover">
<div class="hs-left-50">
<div class="image_wrapper resp-img">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="hs-right-50">
<div class="gutter-20 clearover">
<h1>
Your title
</h1>
<p>
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Pellentesque in ipsum id orci porta dapibus.
</p>
<br />
<a class="hs-button" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>
</div>
</div>
<div class="c">
</div>
Hero title
<!-- hero caption -->
<div class="bg-caption g-font animated fadeInUp">
<div class="inner">
<div class="col-6 color-white">
<h1 class="weight-600 big__ super-big__">
Stand out with a professional Jimdo website
</h1>
<!-- ************* mid-rounded button ************* -->
<a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
<div class="matrix-msg invisible">
Edit here your hero title
</div>
Hero title 2
<!-- hero caption -->
<div class="bg-caption g-font animated fadeInUp">
<div class="inner">
<div class="col-6 center-align color-white">
<h1 class="weight-600 big__ super-big__">
Stand out with a professional Jimdo website
</h1>
<!-- ************* mid-rounded button ************* -->
<a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
<div class="matrix-msg invisible">
Edit here your hero title
</div>
Hero title 3
<!-- hero caption -->
<div class="bg-caption g-font animated fadeInUp">
<div class="inner">
<div class="col-6 right-align text-right add-10 cc-box color-white">
<h1 class="weight-600 big__ super-big__">
Stand out with a professional Jimdo website
</h1>
<!-- ************* mid-rounded button ************* -->
<a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
<div class="matrix-msg invisible">
Edit here your hero title
</div>
Hero title 4
<!-- hero caption -->
<div class="bg-caption g-font animated fadeInUp">
<div class="inner">
<div class="col-6 color-white center-align">
<h1 class="weight-600 big__ super-big__">
Stand out with a professional Jimdo website
</h1>
<center>
<!-- ************* mid-rounded button ************* -->
<a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a> <a class="hs-button bg-white small-btn" href="https://www.zodiac-framerwork.com"
target="">Read more</a>
</center>
</div>
</div>
</div>
<div class="matrix-msg invisible">
Edit here your hero title
</div>
Timeline widget
<div class="timeline-item primary-color pull-top-10" date-is="12-02-2016">
<h1>
Single responsive timeline!
</h1>
<p>
I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far...
While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
</p>
</div>
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 white-outline-btn | |
| 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