Fluid sections
-
Text & Image
01
-
Text
02
-
Text & button
03
-
Overlapped image
04
-
Image & Shape
05
-
Full width image
06
-
Tile
07
-
Pricing tables
08
-
Features
09
-
Overlapped image & text
10
-
Services
11
-
Documentation
12
Select a widget, click the copy button and then paste the code into the Text module( Edit HTML button) of your website.
Fluid section 01
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: 0%; top: 12.5091%; height: 486.658px; width: 100.671%;">
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle" style="width: 440.117px; height: 93.8678%; left: 0.990176%; top: 2.12179%; background-position: 11.8182% 4.27421%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix Themes" /></div>
<div class="col-6 is-fluid is-mobile-overlay ui-draggable ui-draggable-handle" style="left: 27.9976%; top: 41.1196%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p> </p>
<h3 class="weight-400"><span style="color: #ffffff; font-size: 40px;">Make something great.</span></h3>
<br />
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <a class="hs-button bg-white weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 02
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: 0%; top: 7.80873%; height: 548.655px; width: 100.671%;">
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle" style="width: 39.8836%; height: 94.7429%; left: 0.0842544%; top: 0.00103517%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix Themes" /></div>
<div class="col-6 is-fluid m-col-11 is-mobile-overlay m-center-align ui-draggable ui-draggable-handle" style="left: 335.675px; top: 165.752px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 fluid-bg bg-white has-shadow" style="border-radius: 0px;">
<h3 class="weight-400"><span style="color: #000; font-size: 40px;">Make something great.</span></h3>
<br />
<p style="text-align: left;"><span style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /><a class="hs-button weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 03
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: 0%; top: 7.80873%; height: 514.887px; width: 100.766%;">
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle" style="width: 39.8836%; height: 94.7429%; left: 0.0842544%; top: 0.00103517%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix Themes" /></div>
<div class="col-6 is-fluid m-col-11 is-mobile-overlay m-center-align ui-draggable ui-draggable-handle" style="left: 28.725%; top: 30.3547%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 fluid-bg opacity-6" style="border-radius: 0px;">
<h3 class="weight-400"><span style="color: #fff; font-size: 40px;">Make something great.</span></h3>
<br />
<p style="text-align: left;"><span style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <a class="hs-button bg-round weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></div>
</div>
<p> </p>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 04
<div class="is-matrix-block hs-fullwidth" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 525.886px; width: 100.766%;">
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle" style="width: 39.8836%; height: 94.7429%; left: 0.0842544%; top: 0.00103517%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix Themes" /></div>
<div class="col-6 is-fluid m-col-11 is-mobile-overlay m-center-align ui-draggable ui-draggable-handle" style="left: 32.8456%; top: 33.0473%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 fluid-bg bg-turquoise " style="border-radius: 0px;">
<h3 class="weight-400"><span style="color: #000; font-size: 40px;">Make something great.</span></h3>
<br />
<p style="text-align: left;"><span style="color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <a class="hs-button ghost-dark weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 05
<div class="is-matrix-block hs-fullwidth cc-clearover">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid h-50 m-height-auto">
<p> </p>
<div class="col-2 m-col-6 resp-img m-center-align is-fluid" style="left: 40.302%; top: 22.5412%;"><img class="rel-mobile-only" style="opacity: 0.6;" srcset="https://u.jimcdn.com/cms/o/sbd5beff83d2144a5/userlayout/img/quote-icon-copia.png?t=1661587073" alt="Matrix themes" />
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 is-fluid is-mobile-overlay" style="left: 24.6956%; top: 40.1966%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p style="text-align: center;"><span style="color: #ededed; font-size: 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
</div>
</div>
<p> </p>
</div>
Fluid section 06
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 582.648px; width: 100.671%;">
<div class="col-12 mask-section m-absolute is-fluid ui-draggable ui-draggable-handle" style="height: 72.7418%; width: 1141.59px; left: 0.864433%; top: 14.4594%;">
<div class="fluid-bg is-cover opacity-6 m-height-50" style="border-radius: 40px;"></div>
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
</div>
<div class="col-6 m-col-11 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle" style="width: 431.985px; height: 89.6914%; left: 3.47529%; top: 5.81672%; background-position: 12.965% 0.244743%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" style="border-radius: 40px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix Themes" />
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 is-fluid m-add-top-20 ui-draggable ui-draggable-handle" style="left: 43.4722%; top: 32.0463%; width: 39.2261%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p style="text-align: left;"><span style="color: #d8ead1; font-size: 40px;">Create something great.</span></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="font-size: 15px;"><span color="#D8EAD1" style="color: #d8ead1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></span></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><a class="hs-button ghost-white weight-400" href="/app/sb9f158b4382fbcd3/p066191f830df2eec/" title="Home"><strong><span style="font-size: 15px;"> read more</span></strong></a></p>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 07
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner is-fluid-area is-fluid u ui-draggable ui-draggable-handle" style="height: 274.662px; width: 100.671%;">
<div class="col-6 is-anim-block is-fluid ui-draggable ui-draggable-handle" style="left: 21.0601%; top: 8.27906%; width: 57.411%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p style="text-align: center;"><span style="color: #1e55fa;"><strong><span style="font-size: 40px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore."</span></strong></span></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><span style="color: #1e55fa;">Quote text </span></p>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 08
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 321.971px; width: 100.384%;">
<div class="col-6 is-fluid ui-draggable ui-draggable-handle" style="width: 61.2196%; height: auto; left: 18.7222%; top: 20.723%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 is-anim-block has-border-shadow fluid-bg " style="border-radius: 0px;">
<p><span style="font-size: 40px; color: #000000;">Whatever it is, the way you tell your story online can make all the difference</span></p>
</div>
</div>
</div>
</div>
Fluid section 09
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #ededed;">⬤</span></p>
<div class="inner is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 321.971px; width: 100.384%;">
<div class="col-6 is-fluid ui-draggable ui-draggable-handle" style="width: 61.2196%; height: auto; left: 18.7222%; top: 20.723%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 is-anim-block bg-dark fluid-bg " style="border-radius: 20px;">
<p><span style="font-size: 40px; color: #ffffff;">Whatever it is, the way you tell your story online can make all the difference</span></p>
</div>
</div>
</div>
</div>
Fluid section 10
<div class="is-matrix-block hs-fullwidth bg-dark cc-clearover" style="background-color: #000000!important;">
<p class="bg-custom-color"><span style="color: #000;">⬤</span></p>
<div class="inner is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 332.882px; width: 100.766%;">
<div class="col-6 is-fluid ui-draggable ui-draggable-handle" style="left: 24.5732%; top: 13.0637%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p class="is-anim-block " style="padding: 30px; border: 2px solid #ffffff; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; text-align: center;"><strong><span style="font-size: 40px; color: #fff;">Whatever it is, the way you tell your story online can make all the difference</span></strong></p>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 011
<div class="is-matrix-block hs-fullwidth cc-clearover has-no-gutter">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle">
<div class="col-6 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: -0.000148648%; top: 1.78234%; width: 39.6244%; height: 94.11%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__">
<p><span style="color: #666666; font-size: 15px;">about us</span></p>
<p> </p>
<p><span style="color: #152d79;"><strong><span style="font-size: 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></strong></span></p>
<p> </p>
</div>
</div>
<div class="col-6 is-fluid is-rel ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 45.7966%; top: 8.33084%; width: 52.7449%; height: 96.9641%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__">
<p> </p>
<p> </p>
<p><span color="#09353E" style="color: #09353e;"><span style="font-size: 16px;">Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Fusce fermentum. Fusce vulputate eleifend sapien. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Morbi vestibulum volutpat enim.</span></span></p>
<p><span color="#09353E" style="color: #09353e;"><span style="font-size: 16px;"> </span></span></p>
<p><span color="#09353E" style="color: #09353e;"><span style="font-size: 16px;">Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean ut eros et nisl sagittis vestibulum. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Duis leo. Praesent egestas neque eu enim.</span></span></p>
<p> </p>
<a class="hs-button" href="https://www.matrix-themes.com" target="_top">read more</a>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>
Fluid section 012
<div class="is-matrix-block hs-fullwidth cc-clearover has-no-gutter" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 504.974px; width: 100.671%;">
<div class="col-6 is-fluid is-rel ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 24.3897%; top: 5.2698%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__">
<p style="text-align: center;"><span style="color: #666666; font-size: 15px;">about us</span></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><span style="color: #152d79;"><strong><span style="font-size: 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></strong></span></p>
<p> </p>
</div>
</div>
<div class="col-6 is-fluid ui-draggable ui-draggable-handle" style="width: 69.2919%; height: auto; left: 14.8495%; top: 39.5662%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__" style="text-align: center;">
<p> <span color="#09353E" style="color: #09353e;"><span style="font-size: 16px;">Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Fusce fermentum. Fusce vulputate eleifend sapien. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Morbi vestibulum volutpat enim.</span></span></p>
<p style="text-align: center;"><span color="#09353E" style="color: #09353e;"><span style="font-size: 16px;"> </span></span></p>
<p style="text-align: center;"><span color="#09353E" style="color: #09353e;"><span style="font-size: 16px;">Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean ut eros et nisl sagittis vestibulum. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Duis leo. Praesent egestas neque eu enim.</span></span></p>
<p> </p>
<a class="hs-button weight-400" href="https://www.matrix-themes.com" target="_top">read more</a>
<p> </p>
<p> </p>
</div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 11
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover has-no-gutter">
<div class="inner is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: 0%; top: 4.67893%; height: 486.302px; width: 100.766%;">
<div class="col-6 is-anim-block is-fluid is-rel ui-draggable ui-draggable-handle" style="left: 13.4061%; top: 12.4806%; width: 72.4041%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 has-white-solid-border m-btn-fullwidth fluid-bg" style="border-radius: 0px;">
<p> </p>
<p style="text-align: center;"><strong><span style="font-size: 40px;"> <span style="color: #ffffff;">About us</span></span></strong></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><span style="color: #ffffff; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.Praesent ut ligula non mi varius sagittis. Donec vitae orci sed dolor rutrum auctor.</span> </p>
<p style="text-align: center;"><span style="font-size: 16px;"><span style="color: #ffffff;">Donec mollis hendrerit risus.</span></span> <span style="font-size: 16px;"><span style="color: #ffffff;">Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. In hac habitasse platea dictumst.</span></span></p>
<p style="text-align: center;"> </p>
<p><span style="font-size: 16px;"> </span></p>
<p class="" style="text-align: center;"><a class="hs-button bg-white weight-400" href="http://www.matrix-themes.com/" target="_top">Portfolio</a> <a class="hs-button ghost-white weight-400" href="http://www.matrix-themes.com/" target="_top">Contact us</a></p>
<p> </p>
</div>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 12
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover has-no-gutter">
<div class="inner is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 413.524px; width: 100.766%;">
<div class="col-6 is-anim-block is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 99.4286%; height: auto; left: -0.0017382px; top: -0.0017363px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 m-btn-fullwidth fluid-bg bg-white" style="border-radius: 0px;">
<p> </p>
<p style="text-align: left;"><strong><span style="font-size: 40px;"> <span style="color: #000;">About us</span></span></strong></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="color: #000; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.Praesent ut ligula non mi varius sagittis. Donec vitae orci sed dolor rutrum auctor.</span></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="font-size: 16px;"><span style="color: #000;">Donec mollis hendrerit risus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. In hac habitasse platea dictumst. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Etiam feugiat lorem non metus.</span> <span style="color: #000;">ulum suscipit nulla quis orci.</span></span></p>
<p style="text-align: left;"><span style="font-size: 16px;"> </span></p>
<p style="text-align: left;"> </p>
<p class="" style="text-align: left;"><a class="hs-button weight-400" href="http://www.matrix-themes.com/" target="_top">Portfolio</a> <a class="hs-button ghost-dark weight-400" href="http://www.matrix-themes.com/" target="_top">Contact us</a></p>
<p style="text-align: left;"> </p>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none; text-align: left;"></div>
</div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 13
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover has-no-gutter">
<div class="inner is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 504.523px; width: 100.766%;">
<div class="col-6 is-anim-block is-fluid is-rel ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 99.1255%; height: auto; left: 0.389364%; top: 0.506613%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 m-btn-fullwidth fluid-bg opacity-6" style="border-radius: 20px;">
<p> </p>
<p style="text-align: left;"><strong><span style="font-size: 40px;"> <span style="color: #ffffff;">About us</span></span></strong></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="color: #ffffff; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.Praesent ut ligula non mi varius sagittis. Donec vitae orci sed dolor rutrum auctor.</span></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="font-size: 16px;"><span style="color: #ffffff;">Donec mollis hendrerit risus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. In hac habitasse platea dictumst. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Etiam feugiat lorem non metus.</span> <span style="color: #ffffff;">ulum suscipit nulla quis orci.</span></span></p>
<p style="text-align: left;"><span style="font-size: 16px;"> </span></p>
<p style="text-align: left;"> </p>
<p class="" style="text-align: left;"><a class="hs-button bg-white bg-round weight-400" href="http://www.matrix-themes.com/" target="_top">Portfolio</a> <a class="hs-button bg-round weight-400" href="http://www.matrix-themes.com/" target="_top">Contact us</a></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none; text-align: left;"></div>
</div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 14
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover has-no-gutter">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle">
<div class="mask-section opacity-6 m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="height: 56.0325%; width: 1165.56px; left: 0.0466371%; top: 15.7421%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 m-center-align is-anim-block is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 42.9724%; height: 97.9732%; left: 4.66656%; top: 0.112421%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 fluid-bg bg-white m-btn-fullwidth" style="border-radius: 0px;">
<p><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><strong><span style="font-size: 40px;"> About us</span></strong></span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.Praesent ut ligula non mi varius sagittis. Donec vitae orci sed dolor rutrum auctor.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="font-size: 16px; color: #454545;">Donec mollis hendrerit risus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. In hac habitasse platea dictumst. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Etiam feugiat lorem non metus. ulum suscipit nulla quis orci.</span></p>
<p style="text-align: left;"><span style="font-size: 16px; color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p class="" style="text-align: left;"><span style="color: #454545;"><a class="hs-button weight-400" href="http://www.matrix-themes.com/" target="_top">Portfolio</a> <a class="hs-button ghost-dark weight-400" href="http://www.matrix-themes.com/" target="_top" style="color: #454545;">Contact us</a></span></p>
</div>
</div>
</div>
</div>
Fluid section 15
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover has-no-gutter">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle">
<div class="mask-section mask-diagonal m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 69.6287%; width: 1165.56px; left: 0.218186%; top: 16.1474%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 m-center-align is-anim-block is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 42.9724%; height: 97.9732%; left: 4.92351%; top: 0.315061%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 bg-white m-btn-fullwidth fluid-bg" style="border-radius: 0px;">
<p><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><strong><span style="font-size: 40px;"> About us</span></strong></span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.Praesent ut ligula non mi varius sagittis. Donec vitae orci sed dolor rutrum auctor.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="font-size: 16px; color: #454545;">Donec mollis hendrerit risus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. In hac habitasse platea dictumst. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Etiam feugiat lorem non metus. ulum suscipit nulla quis orci.</span></p>
<p style="text-align: left;"><span style="font-size: 16px; color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p class="" style="text-align: left;"><span style="color: #454545;"><a class="hs-button weight-400" href="http://www.matrix-themes.com/" target="_top">Portfolio</a> <a class="hs-button ghost-dark weight-400" href="http://www.matrix-themes.com/" target="_top" style="color: #454545;">Contact us</a></span></p>
</div>
</div>
</div>
</div>
Fluid section 16
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover has-no-gutter">
<p> </p>
<p> </p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle">
<div class="mask-section mask-crosses m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="opacity: 0.2; height: 67.8883%; width: 98.5446%; left: 0.771121%; top: 14.2074%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 92.0258%; height: 98.0101%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 bg-white m-btn-fullwidth fluid-bg" style="border-radius: 0px;">
<p><span style="color: #454545;"> </span></p>
<div class="is-matrix is--flex is-flex-block cc-clearover">
<div class="left-align col-8 cc-box">
<p style="text-align: left;"><span style="color: #454545;"><strong><span style="font-size: 40px;"> <span style="color: #000;">About us</span></span></strong></span></p>
<p style="text-align: left;"><span style="color: #000;"> </span></p>
<p style="text-align: left;"><span style="color: #000; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.Praesent ut ligula non mi varius sagittis. Donec vitae orci sed dolor rutrum auctor.</span></p>
<p style="text-align: left;"><span style="color: #000;"> </span></p>
<p style="text-align: left;"><span style="font-size: 16px; color: #000;">Donec mollis hendrerit risus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. In hac habitasse platea dictumst. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Etiam feugiat lorem non metus. ulum suscipit nulla quis orci.</span></p>
</div>
<div class="right-align col-4 add-20 cc-box"><a class="hs-button bg-round right-align weight-400" href="https://www.matrix-themes.com/" target="_top">learn more</a></div>
</div>
<p style="text-align: left;"> </p>
</div>
</div>
</div>
</div>
Fluid section 17
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover has-no-gutter">
<p> </p>
<p> </p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle">
<div class="mask-section mask-crosses m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="opacity: 0.2; height: 67.8883%; width: 98.5446%; left: 0.771121%; top: 14.2074%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 92.0258%; height: 98.0101%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 opacity-8 m-btn-fullwidth fluid-bg" style="border-radius: 0px;">
<p><span style="color: #454545;"> </span></p>
<div class="is-matrix is--flex is-flex-block cc-clearover">
<div class="left-align col-8 cc-box">
<p style="text-align: left;"><span style="color: #454545;"><strong><span style="font-size: 40px;"> <span style="color: #ffffff;">About us</span></span></strong></span></p>
<p style="text-align: left;"><span style="color: #ffffff;"> </span></p>
<p style="text-align: left;"><span style="color: #ffffff; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.Praesent ut ligula non mi varius sagittis. Donec vitae orci sed dolor rutrum auctor.</span></p>
<p style="text-align: left;"><span style="color: #ffffff;"> </span></p>
<p style="text-align: left;"><span style="font-size: 16px; color: #ffffff;">Donec mollis hendrerit risus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. In hac habitasse platea dictumst. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Etiam feugiat lorem non metus. ulum suscipit nulla quis orci.</span></p>
</div>
<div class="right-align col-4 add-20 cc-box"><a class="hs-button bg-round right-align weight-400" href="https://www.matrix-themes.com/" target="_top">learn more</a></div>
</div>
<p style="text-align: left;"> </p>
</div>
</div>
</div>
</div>
Fluid section 18
<div class="is-matrix-block hs-fullwidth bg-white cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle">
<div class="mask-section max-100 mask-blob-square m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="height: 71.9346%; width: 92.1167%; left: 0.254271%; top: 13.3803%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-10 m-col-11 m-center-align is-fluid is-rel ui-draggable ui-draggable-handle" style="left: 4.37286%; top: 0.34278%; width: 60.0376%; height: 98.9707%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 bg-gray m-btn-fullwidth fluid-bg" style="border-radius: 0px;">
<p><span style="color: #454545;"> </span></p>
<div class="is-matrix cc-clearover">
<div class="c-box">
<p style="text-align: left;"><span style="color: #454545;"><strong><span style="font-size: 40px;"> About us</span></strong></span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.Praesent ut ligula non mi varius sagittis. Donec vitae orci sed dolor rutrum auctor.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="font-size: 16px; color: #454545;">Donec mollis hendrerit risus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. In hac habitasse platea dictumst. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Etiam feugiat lorem non metus. ulum suscipit nulla quis orci.</span></p>
<p style="text-align: left;"> </p>
<a class="hs-button weight-600 is-uppercase weight-400" href="https://www.matrix-themes.com/" target="_top">learn more</a></div>
</div>
<p style="text-align: left;"> </p>
</div>
</div>
</div>
</div>
Fluid section 19
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 572.656px; width: 100.671%;">
<div class="col-8 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle" style="width: 72.5034%; height: 98.9471%; left: 0px; top: -0.00057428%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img2.jpg?t=1661711358" alt="Matrix themes" />
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-4 m-col-6 m-center-align is-mobile-overlay fluild-img resp-img is-fluid ui-draggable ui-draggable-handle" style="left: 61.3992%; top: 12.5345%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" />
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 20
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 655.66px; width: 100.671%;">
<div class="col-8 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 87.423%; height: 99.1253%; left: 12.575%; top: -0.00057428%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img2.jpg?t=1661711358" alt="Matrix themes" /></div>
<div class="col-4 m-col-6 is-mobile-overlay resp-img fluid-img is-fluid ui-draggable ui-draggable-handle" style="left: 1.45611%; top: 24.2386%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only bg-white add-20 cc-box" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
<div class="guide-lines-container"></div>
</div>
Fluid section 21
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 475.886px; width: 100.766%;">
<div class="mask-section max-100 fluid-bg mask-blob-square m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="height: 79.9887%; width: 1136.26px; left: 0.132167%; top: 9.80328%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 m-add-top-20 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle" style="width: 359.646px; height: 98.6211%; left: 9.66549%; top: 0.11482%; background-position: 38.7415% 0%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="col-6 is-fluid m-add-top-20 ui-draggable ui-draggable-handle" style="left: 34.0656%; top: 33.2922%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__">
<p><span style="color: #ffffff; font-size: 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
</div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 22
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 496.884px; width: 100.766%;">
<div class="mask-section mask-diagonal m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="height: 84.1786%; width: 1122.06px; left: 0.30388%; top: 7.77546%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 m-add-top-20 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle" style="width: 33.5346%; height: 98.6544%; left: 11.9203%; top: -0.000394196%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="col-6 is-fluid m-add-top-20 ui-draggable ui-draggable-handle" style="left: 41.8502%; top: 32.2193%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__">
<p><span style="color: #ffffff; font-size: 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
</div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 23
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 515.66px; width: 100.671%;">
<div class="mask-section mask-dots m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="height: 76.18%; width: 95.7993%; left: 3.51523%; top: 6.12402%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 m-add-top-20 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle" style="width: 33.5346%; height: 98.6544%; left: 11.9203%; top: -0.000394196%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="col-6 is-fluid m-add-top-20 ui-draggable ui-draggable-handle" style="left: 41.8502%; top: 32.2193%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__">
<p><span style="color: #ffffff; font-size: 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
</div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 24
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid h-100 m-height-auto ui-draggable ui-draggable-handle" style="left: 0%; top: 7.37753%;">
<div class="col-6 mask-section mask-blob m-absolute m-height-100 col-10 is-fluid ui-draggable ui-draggable-handle" style="width: 80.3751%; height: 92.2429%; left: 18.0793%; top: 6.82459%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-add-top-20 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle" style="width: 487.875px; height: 57.1353%; left: 524.165px; top: 171.569px; background-position: 107.439% 49.4755%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only is-img" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" />
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 is-fluid m-add-top-20 ui-draggable ui-draggable-handle" style="left: 7.45719%; top: 46.8359%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__">
<p><span style="color: #ffffff; font-size: 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
</div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 25
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 492.431px; width: 100.575%;">
<div class="mask-section mask-crosses m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="height: 76.18%; width: 95.7993%; left: 3.56127%; top: 6.43957%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 m-add-top-20 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle" style="width: 33.5346%; height: 98.6544%; left: 11.9203%; top: -0.000394196%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="col-6 is-fluid m-add-top-20 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 41.8502%; top: 32.2193%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__">
<p><span style="color: #ffffff; font-size: 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
</div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 26
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 530.425px; width: 100.575%;">
<div class="mask-section mask-rain m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="height: 76.18%; width: 95.7993%; left: 3.51523%; top: 6.12402%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 m-add-top-20 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle" style="width: 385.526px; height: 92.2919%; left: 138.931px; top: -0.0017306px; background-position: 36.037% 0%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image rel-mobile-only" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="col-6 is-fluid m-add-top-20 ui-draggable ui-draggable-handle" style="left: 41.8502%; top: 32.2193%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20__">
<p><span style="color: #ffffff; font-size: 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
</div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 27
<div class="is-matrix-block is-parallax is-fullwidth rel no-padding editable-bg-image" style="background: url('https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img2.jpg?t=1661711358') no-repeat center; padding: auto 0!important; background-attachment: scroll!important; background-size: cover!important;">
<div class="hs-overlay opacity-8"></div>
<div class="inner is-fluid-area cc-clearover h-100 m-height-50 cc-clearover is-anim-block ui-draggable ui-draggable-handle">
<div class="btn-img is-single-btn" onclick="openBackgroundImageURLPopup(this);"></div>
<div class="col-10 is-fluid m-add-top-20 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 9.00868px; top: 189.347px; width: 46.8274%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><span style="color: #ffffff;"><strong>Create something great</strong></span></h3>
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><a class="hs-button weight-400" href="/app/sb9f158b4382fbcd3/p066191f830df2eec/" title="Home"><strong><span style="font-size: 15px;"> read more</span></strong></a></p>
<p style="text-align: left;"> </p>
</div>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 28
<div class="is-matrix-block is-parallax is-fullwidth rel no-padding editable-bg-image" style="background: url('https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img2.jpg?t=1661711358');">
<div class="hs-overlay bg-primary"></div>
<div class="inner is-fluid-area cc-clearover h-100 m-height-50 cc-clearover is-anim-block ui-draggable ui-draggable-handle">
<div class="btn-img is-single-btn" onclick="openBackgroundImageURLPopup(this);"></div>
<div class="col-10 is-fluid m-add-top-20 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 49.9086%; height: auto; left: 0.987855px; top: 200.111px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><span style="color: #ffffff;"><strong>Create something great</strong></span></h3>
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><a class="hs-button ghost-white weight-600 is-uppercase weight-400" href="/app/sb9f158b4382fbcd3/p066191f830df2eec/" title="Home"><strong><span style="font-size: 15px;"> read more</span></strong></a></p>
<p style="text-align: left;"> </p>
</div>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 29
<div class="is-matrix-block is-parallax is-fullwidth rel no-padding editable-bg-image" style="background: url('https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img2.jpg?t=1661711358');">
<div class="hs-overlay opacity-8"></div>
<div class="inner is-fluid-area cc-clearover h-100 m-height-50 cc-clearover is-anim-block ui-draggable ui-draggable-handle">
<div class="btn-img is-single-btn" onclick="openBackgroundImageURLPopup(this);"></div>
<div class="col-10 is-fluid m-add-top-20 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: -0.0017306px; top: 197.151px; width: 45.7893%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 fluid-bg bg-white" style="border-radius: 0px;">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><strong>Create something great</strong></h3>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><a class="hs-button weight-400" href="/app/sb9f158b4382fbcd3/p066191f830df2eec/" title="Home"><strong><span style="font-size: 15px;"> read more</span></strong></a></p>
<p style="text-align: left;"> </p>
</div>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 30
<div class="is-matrix-block is-parallax is-fullwidth rel no-padding editable-bg-image" style="background: url('https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img2.jpg?t=1661711358') no-repeat center; padding: auto 0!important; background-attachment: scroll!important; background-size: cover!important;">
<div class="hs-overlay opacity-8"></div>
<div class="inner is-fluid-area cc-clearover h-100 m-height-50 cc-clearover is-anim-block ui-draggable ui-draggable-handle">
<div class="btn-img is-single-btn" onclick="openBackgroundImageURLPopup(this);"></div>
<div class="col-10 is-fluid m-add-top-20 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 47.2537%; height: auto; left: 304.281px; top: 209.552px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 opacity-6 fluid-bg" style="border-radius: 0px;">
<h3 class="weight-400" style="font-size: 40px; text-align: center;"><span style="color: #cccccc;"><strong>Create something great</strong></span></h3>
<p style="text-align: center;"><span style="color: #cccccc;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<p style="text-align: left;"> </p>
<p style="text-align: center;"><a class="hs-button weight-400" href="/app/sb9f158b4382fbcd3/p066191f830df2eec/" title="Home"><strong><span style="font-size: 15px;"> read more</span></strong></a></p>
<p style="text-align: left;"> </p>
</div>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 31
<div class="is-matrix-block is-fullwidth" style="background-color: #0f5afa!important;">
<p class="bg-custom-color is-inner"><span style="color: #0f5afa;">⬤</span></p>
<div class="cc-clearover is-fluid-area is-fluid is-rel ui-draggable ui-draggable-handle" style="left: 0%; top: 0%;">
<div class="col-6 is-fluid is-rel ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="left: 0%; top: 0%;">
<div class="btn-img is-single-btn" onclick="openImageURLPopup(this);"></div>
<img class="editable-image is-img mobile-medium rel-mobile-only" style="position: relative;" src="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-zion01.jpg?t=1665603087" alt="Matrix Themes" /></div>
<div class="col-4 is-fluid m-padding cc-box ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="left: 54.4922%; top: 19.6544%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="is-anim-block add-20 ">
<h3 class="weight-400"><span style="color: #ffffff; font-size: 40px;">Create something great</span></h3>
<br />
<p><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <a class="hs-button bg-white weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></div>
</div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 32
<div class="is-matrix-block is-fullwidth" style="background-color: #0f5afa!important;">
<p class="bg-custom-color is-inner"><span style="color: #0f5afa;">⬤</span></p>
<div class="h-100 mobile-auto cc-clearover is-fluid-area is-fluid is-rel ui-draggable ui-draggable-handle">
<div class="col-6 is-fluid ui-draggable ui-draggable-handle" style="width: 50%; height: 100%; left: 50%; top: 0%;">
<div class="btn-img is-single-btn" onclick="openImageURLPopup(this);"></div>
<img class="editable-image is-img mobile-medium rel-mobile-only" style="position: relative; min-height: 100vh;" src="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-zion01.jpg?t=1665603087" alt="Matrix Themes" /></div>
<div class="col-4 is-fluid m-padding cc-box ui-draggable ui-draggable-handle" style="left: 13.2368%; top: 29.1609%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="is-anim-block add-20 ">
<h3 class="weight-400"><span style="font-size: 40px;"><strong><span style="color: #ffffff;">Create something great</span></strong></span></h3>
<br />
<p><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <a class="hs-button ghost-white weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></div>
</div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 33
<div class="is-matrix-block is-fullwidth" style="background-color: #0f5afa!important;">
<p class="bg-custom-color is-inner"><span style="color: #0f5afa;">⬤</span></p>
<div class="h-100 mobile-auto cc-clearover is-fluid-area is-fluid is-rel ui-draggable ui-draggable-handle">
<div class="col-6 is-fluid ui-resizable ui-draggable ui-draggable-handle " style="width: 50%; height: 100%; left: -0.000123338%; top: -0.000292995%;">
<div class="btn-img is-single-btn" onclick="openImageURLPopup(this);"></div>
<img class="editable-image is-img mobile-medium rel-mobile-only" style="position: relative; min-height: 100vh;" src="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-zion01.jpg?t=1665603087" alt="Matrix Themes" /></div>
<div class="col-4 m-col-10 m-center-align is-mobile-overlay is-fluid m-padding cc-box ui-draggable ui-draggable-handle" style="left: 586.821px; top: 163.566px; width: 34.4117%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-anim-block add-20 bg-white fluid-bg " style="border-radius: 10px;">
<h3 class="weight-400"><span style="font-size: 40px; color: #000000;"><strong>Create something great</strong></span></h3>
<br />
<p><span style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <a class="hs-button weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></div>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 34
<div class="is-matrix-block is-fullwidth" style="background-color: #0f5afa!important;">
<p class="bg-custom-color is-inner"><span style="color: #0f5afa;">⬤</span></p>
<div class="cc-clearover is-fluid-area is-fluid is-rel h-100 m-height-auto ui-draggable ui-draggable-handle">
<div class="col-6 is-fluid fluid-img m-absolute ui-draggable ui-draggable-handle" style="height: 77.5608%; width: 56.2937%; left: 8.96991%; top: 4.42583%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="is-img mobile-medium rel-mobile-only editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sec1797c56766912d/userlayout/img/matrix-fluid02.jpg?t=1662708003" alt="Matrix Themes" /></div>
<div class="col-4 m-col-11 m-add-top-20 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle" style="height: 53.9413%; width: 19.967%; left: 50.6884%; top: 21.518%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile-only editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="col-4 is-fluid m-padding cc-box ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="left: 7.74276%; top: 36.5957%; width: 32.4412%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-anim-block add-20 fluid-bg bg-primary cc-box " style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff; font-size: 40px;">Create something great</span></h3>
<br />
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <a class="hs-button ghost-white weight-400" href="https://www.matrix-themes.com" target="_top">Custom button</a></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 35
<div class="is-matrix-block is-fullwidth" style="background-color: #0f5afa!important;">
<p class="bg-custom-color is-inner"><span style="color: #0f5afa;">⬤</span></p>
<div class="cc-clearover is-fluid-area is-fluid is-rel h-100 m-height-auto ui-draggable ui-draggable-handle" style="height: 845.998px; width: 99.9219%;">
<div class="col-6 is-fluid max-100 m-absolute ui-draggable ui-draggable-handle" style="height: 54.4189%; width: 100%; left: 0%; top: 0.276975%; background-position: 0% 0.341492%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="is-img mobile-medium rel-mobile-only editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sec1797c56766912d/userlayout/img/matrix-fluid02.jpg?t=1662708003" alt="Matrix Themes" /></div>
<div class="col-4 m-col-10 m-add-top-20 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 44.5033%; width: 261.743px; left: 167.602px; top: 322.811px; background-position: 64.0339% 85.0986%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile-only editable-image" style="border-radius: 70px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="col-4 is-fluid m-padding cc-box ui-draggable ui-draggable-handle" style="left: 34.1805%; top: 53.6677%; width: 52.3939%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="is-anim-block add-20 fluid-bg " style="border-radius: 0px; text-align: left;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff; font-size: 40px;">Create something great</span></h3>
<br />
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <a class="hs-button ghost-white weight-400" href="https://www.matrix-themes.com" target="_top">Custom button</a></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 36
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid h-100 m-height-auto ui-draggable ui-draggable-handle">
<div class="col-6 resp-img is-fluid fluid-img m-absolute ui-draggable ui-draggable-handle" style="left: 421.986px; top: 59.6597px; height: 77.013%; width: 743.568px; background-position: 56.7518% 12.7953%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="editable-image is-img mobile-medium rel-mobile-only" style="position: relative;" src="https://u.jimcdn.com/cms/o/sec1797c56766912d/userlayout/img/matrix-fluid02.jpg?t=1662708003" alt="Matrix Themes" /></div>
<div class="col-4 is-fluid m-padding cc-box ui-draggable ui-draggable-handle" style="left: 0.511782%; top: 12%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-anim-block add-20 " style="text-align: center;">
<div class="is-matrix add-30 fluid-bg bg-dark" style="border-radius: 0px;">
<h1 class="weight-400"><span style="color: #ffffff;">Professional</span></h1>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Professional package</span></p>
<center>
<div class="is-line small-line bg-primary"></div>
</center>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p class="has-large-text weight-500"><span style="color: #ffffff;">€60</span></p>
<a class="hs-button weight-400" href="http://www.matrix-themes.com/" target=""_top">Get started</a></div>
</div>
</div>
<div class="col-4 is-fluid m-padding cc-box ui-draggable ui-draggable-handle" style="left: 35.1264%; top: 25.3175%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-anim-block add-20 " style="text-align: center;">
<div class="is-matrix bg-white fluid-bg add-30" style="border-radius: 0px;">
<h1 class="weight-400">Enterprise</h1>
<p class="add-top-20 add-btm-20">Enterprise package</p>
<center>
<div class="is-line small-line bg-primary"></div>
</center>
<p class="add-top-20 add-btm-20">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</p>
<p class="has-large-text weight-500">€90</p>
<a class="hs-button weight-400" href="http://www.matrix-themes.com/" target="_top">Get started</a></div>
</div>
</div>
<div class="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 37
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 533.524px; width: 100.766%;">
<div class="col-4 is-fluid is-rel m-padding cc-box ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="left: -0.0380587%; top: 13.6269%; width: 32.1634%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix bg-dark add-30 fluid-bg">
<h1 class="weight-400"><span style="color: #ffffff;">Professional</span></h1>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Professional package</span></p>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p class="has-large-text weight-500"><span style="color: #ffffff;">€60</span></p>
<a class="hs-button ghost-white weight-600 is-uppercase weight-500 weight-400" href="http://www.matrix-themes.com/" target="_top">Get started</a></div>
</div>
<div class="col-4 is-fluid m-padding cc-box ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="left: 396.005px; top: 41.0747px; height: auto; width: 32.4475%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix bg-dark add-30 fluid-bg" style="border-radius: 0px;">
<h1 class="weight-400"><span style="color: #ffffff;">Enterprise</span></h1>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Enterprise package</span></p>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p class="has-large-text weight-500"><span style="color: #ffffff;">€90</span></p>
<a class="hs-button ghost-white weight-600 is-uppercase weight-500 weight-400" href="http://www.matrix-themes.com/" target="_top">Get started</a></div>
</div>
<div class="col-4 is-fluid m-padding cc-box ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="left: 68.2659%; top: 13.1264%; width: 31.4794%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix bg-dark add-30 fluid-bg" style="border-radius: 0px;">
<h1 class="weight-400"><span style="color: #ffffff;">Advanced</span></h1>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Enterprise package</span></p>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p class="has-large-text weight-500"><span style="color: #ffffff;">€150</span></p>
<a class="hs-button ghost-white weight-600 is-uppercase weight-500 weight-400" href="http://www.matrix-themes.com/" target="_top">Get started</a></div>
</div>
</div>
</div>
Fluid section 38
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 454.297px; width: 100.671%;">
<div class="mask-section mask-diagonal m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="height: 64.8552%; width: 1161.25px; left: 0.132292%; top: 14.6835%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-4 m-col-11 is-fluid is-rel m-padding cc-box ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="left: 61.8733px; top: 2.38542px; height: auto; width: 27.896%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix bg-dark add-30 fluid-bg is-anim-block " style="border-radius: 0px;">
<h1 class="weight-400"><span style="color: #ffffff;">Professional</span></h1>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Professional package</span></p>
<div class="is-line small-line bg-primary"></div>
<p class="add-top-20 add-btm-20"><span style="color: #ffffff;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p class="has-large-text weight-500"><span style="color: #ffffff;">€60</span></p>
<a class="hs-button weight-400" href="http://www.matrix-themes.com/" target="_top">Get started</a></div>
</div>
<div class="col-4 m-col-11 is-fluid m-padding cc-box ui-draggable ui-draggable-handle" style="left: 30.537%; top: 4.26069%; width: 48.6969%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix bg-white fluid-bg add-30 is-anim-block add-20 " style="border-radius: 0px;">
<h1 class="weight-400">Enterprise</h1>
<p class="add-top-20 add-btm-20">Enterprise package</p>
<div class="is-line small-line bg-primary"></div>
<p class="add-top-20 add-btm-20">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</p>
<p class="has-large-text weight-500">€90</p>
<a class="hs-button weight-400" href="http://www.matrix-themes.com/" target="_top">Get started</a></div>
</div>
</div>
</div>
Fluid section 39
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: 0%; top: 3.97485%;">
<div class="mask-section mask-dots m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="opacity: 0.2; height: 75.2737%; width: 99.3148%; left: 0.513534%; top: 9.01794%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-add-top-20 resp-img fluid-img is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 41.8548%; height: 98.6272%; left: 3.344%; top: 0.362941%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile-only editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="col-10 m-col-11 m-center-align is-fluid is-mobile-overlay ui-draggable ui-draggable-handle" style="left: 39.228%; top: 23.0412%; width: 51.2981%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 fluid-bg has-check-list-2 bg-white cc-box" style="border-radius: 0px;">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><strong>Our features</strong></h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</li>
</ul>
<br />
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</li>
</ul>
<br />
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</li>
</ul>
</div>
</div>
</div>
</div>
Fluid section 40
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle">
<div class="mask-section mask-diagonal m-absolute m-height-50 col-10 is-fluid ui-draggable ui-draggable-handle" style="opacity: 0.2; height: 75.2737%; width: 99.3148%; left: 0.513534%; top: 9.01794%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-add-top-20 resp-img fluid-img is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 570.091px; height: 99.1696%; left: 44.4479%; top: 0.24181%; background-position: 83.8758% 0.512985%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile-only editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" /></div>
<div class="col-10 m-col-11 m-center-align is-fluid is-mobile-overlay ui-draggable ui-draggable-handle" style="left: 2.35326%; top: 27.6044%; width: 54.3481%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 bg-dark has-check-list color-white fluid-bg cc-box" style="border-radius: 0px;">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><span style="color: #d8ead1;"><strong>Our features</strong></span></h3>
<ul>
<li><span style="color: #ffffff; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></li>
</ul>
<span style="color: #ffffff; font-size: 16px;"> </span><br />
<ul>
<li><span style="color: #ffffff; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></li>
</ul>
<span style="color: #ffffff; font-size: 16px;"> </span><br />
<ul>
<li><span style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></li>
</ul>
</div>
</div>
</div>
</div>
Fluid section 41
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle">
<div class="mask-section opacity-6 m-absolute m-height-50 col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle" style="opacity: 0.2; height: 69.46%; width: 99.1467%; left: 0.335511%; top: 15.1006%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 is-fluid ui-draggable ui-draggable-handle" style="left: 5.67638%; top: 21.0123%; width: 36.4003%; height: 57.926%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p> </p>
<h3 class="weight-400"><span style="color: #ffffff; font-size: 40px;">Our features</span></h3>
<br />
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
</div>
<div class="col-10 is-fluid is-rel m-add-top-20 ui-draggable ui-draggable-handle" style="left: 57.9737%; top: 22.4513%; width: 37.5502%; height: 98.3133%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 bg-white fluid-bg cc-box has-check-list-4 has-shadow" style="border-radius: 0px;">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</li>
</ul>
<span> </span><br />
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</li>
</ul>
<span> </span><br />
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</li>
</ul>
</div>
</div>
</div>
</div>
Fluid section 42
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle">
<div class="mask-section mask-dots m-absolute m-height-50 col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle" style="opacity: 0.2; height: 69.46%; width: 99.1467%; left: 0.335511%; top: 15.1006%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-10 is-fluid is-rel m-add-top-20 ui-draggable ui-draggable-handle" style="left: 21.6111%; top: 21.9245%; width: 55.9045%; height: 98.3154%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 bg-white fluid-bg cc-box has-check-list-3 has-shadow" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><strong><span style="color: #454545; font-size: 40px;">Our features</span></strong></h3>
<br />
<p style="text-align: left;"><strong><span style="color: #454545;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></strong></p>
<p style="text-align: center;"> </p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</li>
</ul>
<br />
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</li>
</ul>
<br />
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</li>
</ul>
</div>
</div>
</div>
</div>
Fluid section 43
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: 0.0104772%; top: 12.1435%; height: 652.656px; width: 99.8051%;">
<div class="col-8 resp-img max-100 fluid-img is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 859.866px; height: 87.8998%; left: 25.5533%; top: 6.53076%; background-position: 34.3874% 3.73992%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile-only editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-parallax01.jpg?t=1665304094" alt="Matrix themes" /></div>
<div class="col-6 m-col-11 is-mobile-overlay is-fluid ui-draggable ui-draggable-handle" style="left: 0.41673%; top: 27.651%; width: 33.2057%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 rel bg-primary fluid-bg" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff; font-size: 40px;">Make something great.</span></h3>
<br />
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <span style="color: #454545;"><a class="hs-button bg-white weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></span></div>
</div>
</div>
</div>
Fluid section 44
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: 0%; top: 8.64595%; height: 801.892px; width: 99.9016%;">
<div class="col-8 resp-img fluid-img max-100 is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 99.4248%; height: auto; left: -0.444441px; top: 73.5226px; background-position: 0% 19.6634%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile-only editable-image" style="border-radius: 20px;" src="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-parallax01.jpg?t=1665304094" alt="Matrix themes" /></div>
<div class="col-6 m-col-11 is-mobile-overlay is-fluid ui-draggable ui-draggable-handle" style="left: 2.39691%; top: 68.7268%; width: 48.5526%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 rel bg-primary fluid-bg" style="border-radius: 20px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff; font-size: 40px;">Make something great.</span></h3>
<br />
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <span style="color: #454545;"><a class="hs-button bg-white weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></span></div>
</div>
</div>
</div>
Fluid section 45
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: 0%; top: 8.64595%; height: 676.346px; width: 100.094%;">
<div class="col-8 resp-img max-100 fluid-img is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 99.4248%; height: auto; left: -0.444441px; top: 73.5226px; background-position: 0% 19.6634%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile-only editable-image" style="border-radius: 20px;" src="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-parallax01.jpg?t=1665304094" alt="Matrix themes" /></div>
<div class="col-6 m-col-11 is-mobile-overlay is-fluid ui-draggable ui-draggable-handle" style="left: 2.35562%; top: 1.54113%; width: 48.5526%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 rel bg-primary fluid-bg" style="border-radius: 20px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff; font-size: 40px;">Make something great.</span></h3>
<br />
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <span style="color: #454545;"><a class="hs-button bg-white weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></span></div>
</div>
</div>
</div>
Fluid section 46
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 493.524px; width: 100.766%;">
<div class="col-4 is-fluid is-rel cc-box ui-draggable ui-draggable-handle" style="margin-bottom:20px;left: 0.0474253%; top: 21.8419%; width: 31.6484%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix opacity-6 fluid-bg add-30" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff;">Services</span></h3>
<div class="is-line bg-white"></div>
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar.</span></p>
<p> </p>
<a class="hs-button bg-white weight-400" style="padding: 10px 35px;" href="https://www.matrix-themes.com/templates/" target="_top">Read more</a></div>
</div>
<div class="col-4 is-fluid cc-box ui-draggable ui-draggable-handle" style="margin-bottom:20px;left: 34.4457%; top: 21.6656%; height: auto; width: 31.5595%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix opacity-6 add-30 fluid-bg" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff;">Approach</span></h3>
<div class="is-line bg-white"></div>
<p style="text-align: left;"><span style="color: #ffffff;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p> </p>
<a class="hs-button bg-white weight-400" style="padding: 10px 35px;" href="https://www.matrix-themes.com/templates/" target="_top">Read more</a></div>
</div>
<div class="col-4 is-fluid cc-box ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="margin-bottom:20px;left: 68.7407%; top: 21.4611%; height: auto; width: 31.2203%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix opacity-6 fluid-bg add-30" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff;">Results</span></h3>
<div class="is-line bg-white"></div>
<p style="text-align: left;"><span style="color: #ffffff;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p> </p>
<a class="hs-button bg-white weight-400" style="padding: 10px 35px;" href="https://www.matrix-themes.com/templates/" target="_top">Read more</a></div>
</div>
</div>
</div>
Fluid section 47
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 493.524px; width: 100.766%;">
<div class="col-4 is-fluid is-rel cc-box ui-draggable ui-draggable-handle" style="margin-bottom:20px;left: 0.0474253%; top: 21.8419%; width: 31.6484%; height: auto;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix bg-white has-shadow fluid-bg add-30" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #000;">Services</span></h3>
<div class="is-line bg-primary"></div>
<p style="text-align: left;"><span style="color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar.</span></p>
<p> </p>
<a class="hs-button ghost-dark weight-400" style="padding: 10px 35px;" href="https://www.matrix-themes.com/templates/" target="_top">Read more</a></div>
</div>
<div class="col-4 is-fluid cc-box ui-draggable ui-draggable-handle" style="margin-bottom:20px;left: 34.4457%; top: 21.6656%; height: auto; width: 31.5595%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix bg-white has-shadow add-30 fluid-bg" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #000;">Approach</span></h3>
<div class="is-line bg-primary"></div>
<p style="text-align: left;"><span style="color: #000;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p> </p>
<a class="hs-button ghost-dark weight-400" style="padding: 10px 35px;" href="https://www.matrix-themes.com/templates/" target="_top">Read more</a></div>
</div>
<div class="col-4 is-fluid cc-box ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="margin-bottom:20px;left: 68.7407%; top: 21.4611%; height: auto; width: 31.2203%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="is-matrix bg-white has-shadow fluid-bg add-30" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #000;">Results</span></h3>
<div class="is-line bg-primary"></div>
<p style="text-align: left;"><span style="color: #000;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p> </p>
<a class="hs-button ghost-dark weight-400" style="padding: 10px 35px;" href="https://www.matrix-themes.com/templates/" target="_top">Read more</a></div>
</div>
</div>
</div>
Fluid section 48
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 470.2px; width: 100.766%;">
<div class="col-12 is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 99.2968%; height: auto; left: 1.54341px; top: 104.538px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<!-- *** Matrix Widget counters *** -->
<div class="is-matrix bg-primary fluid-bg is-flex is-flex-block center-align cc-clearover" style="border-radius: 0px;">
<div class="one-third color-white col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-cogs fa-4x"></div>
<p> </p>
<h3 class="weight-400">Services</h3>
<p> </p>
<p><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.</span></p>
</div>
</div>
<div class="one-third color-white opacity-2 col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x"></div>
<p> </p>
<h3 class="weight-400">Approach</h3>
<p> </p>
<p class=""><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar.</span></p>
</div>
</div>
<div class="one-third color-white col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x"></div>
<p> </p>
<h3 class="weight-400">Results</h3>
<p> </p>
<p><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis,</span> <span style="color: #ffffff;">pulvinar.</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
Fluid section 49
<div class="is-matrix-block hs-fullwidth cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #ddd;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="height: 470.2px; width: 100.766%;">
<div class="col-12 is-fluid is-rel ui-draggable ui-draggable-handle" style="width: 99.2968%; height: auto; left: 1.54341px; top: 104.538px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<!-- *** Matrix Widget counters *** -->
<div class="is-matrix bg-white has-shadow fluid-bg is-flex is-flex-block center-align cc-clearover" style="border-radius: 20px;">
<div class="one-third col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-cogs fa-4x"></div>
<p> </p>
<h3 class="weight-400">Services</h3>
<p> </p>
<p><span style="color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.</span></p>
</div>
</div>
<div class="one-third col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x"></div>
<p> </p>
<h3 class="weight-400">Approach</h3>
<p> </p>
<p class=""><span style="color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar.</span></p>
</div>
</div>
<div class="one-third col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x"></div>
<p> </p>
<h3 class="weight-400">Results</h3>
<p> </p>
<p><span style="color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis,</span> <span style="color: #ffffff;">pulvinar.</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
Fluid section 50
<div class="is-matrix-block hs-fullwidth" style="background-color: #cde0f4!important;">
<p class="bg-custom-color"><span style="color: #cde0f4;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: -0.862069%; top: 4.05494%;">
<div class="col-6 resp-img is-fluid fluid-img is-rel ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 50.268%; height: 100%; left: 0.132783%; top: 47.4002%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix Themes" /></div>
<div class="col-6 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle" style="width: 48.4079%; height: 100%; left: 50.9084%; top: -0.000592427%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile is-img editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sec6bd9974bbbf244/userlayout/img/bg-holborn.jpg?t=1669011412" alt="Matrix Themes" />
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 is-fluid ui-draggable ui-draggable-handle" style="left: 393.092px; top: 401.458px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 rel bg-primary fluid-bg" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff; font-size: 40px;">Make something great.</span></h3>
<br />
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <span style="color: #454545;"><a class="hs-button bg-white weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></span></div>
</div>
</div>
</div>
Fluid section 51
<div class="is-matrix-block hs-fullwidth" style="background-color: #cde0f4!important;">
<p class="bg-custom-color"><span style="color: #cde0f4;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle" style="left: 0%; top: 6.81371%;">
<div class="col-6 resp-img is-fluid fluid-img is-rel ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 59.4506%; height: 99.2381%; left: 21.2637%; top: 0.0708164%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix Themes" /></div>
<div class="col-6 is-fluid ui-draggable ui-draggable-handle" style="left: 0.0466371%; top: 37.0241%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="add-20 rel bg-primary fluid-bg" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #ffffff; font-size: 40px;">Make something great.</span></h3>
<br />
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<br /> <span style="color: #454545;"><a class="hs-button bg-white weight-400" href="https://www.matrix-themes.com" target="_top">read more</a></span></div>
</div>
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 33.4062%; height: 61.7625%; left: 66.5524%; top: 26.4938%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="btn-radius-plus" onclick="increaseBorderRadius(this);"></div>
<div class="btn-radius-minus" onclick="decreaseBorderRadius(this);"></div>
<div class="btn-img" onclick="openImageURLPopup(this);"></div>
<img class="rel-mobile is-img editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sec6bd9974bbbf244/userlayout/img/bg-holborn.jpg?t=1669011412" alt="Matrix Themes" data-enllax-ratio=".2" data-enllax-type="foreground" />
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="guide-lines-container"></div>
</div>
</div>
Add fluid sections
To add Fluid section to your page:
1. Select one of the fluid section in Matrix Themes menu> Fluid sections
2. Paste it to your page, so add the Text module, click the button 'Edit HTML' and inside of popup text area paste your code. Click the save button at the end.
3. Click the 'Apply' button of the Style Editor in the top left corner and start editing your fluid section moving and resizing any element.
Editing
- Editing the text
Double click on the text to start editing it. Click outside of the editing area to activate again the draggable options.
Each editable element inside the Fluid section has 4 buttons 'copy','delete', "+"-":
- Copy button:
Click the copy button to copy the same element. Use the 'apply' button of the style editor everytime when you created a new element and then start editing it.
- Delete button:
Use the delete button to delete completely an element from the fluid section.
+/- button:
Allows to add the border radius to the image or simple text section.
- Changing the image
To change the images in fluid sections, you need to upload your own image file to your website and paste inside the code your own file url:
1. Go to Custom Layout and select the tab Files
2. Upload your own image ( max image size 512.00 KB )
3. Once you upload your file ( the name of the file will be displayed in the list files), select it with right mouse over 'copy link address' and replace the default image url inside the Text module
<!-- Example of the image url -->
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg?t=1405356750" alt="" /
...
More details about the file upload can be found in this page:
https://www.matrix-themes.com/support/help/hosting-the-files/
- Editing the buttons
The button text and link can changed with the Text editor.
Select the button text except the first and the last letter. Change it for your own one and at the end remove the first and the last letters.
Click the 'link' button in the text edit to setup your own link.
- Changing the background color
Most of the fluid section has an option to change the background using the default text editor:
- On the top right corner select the circle ( it should be red selected background color );
- Using the button 'Text color' of the text editor, you change it's color;
- Click the style editor button "apply styles" to see the new applied color;
The fluid sections that don't have above option to change the backround color can be customized manually by clicking the 'Edit HTML' button.
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover" style="background-color: #204829!important;">
...
You have two options:
1. Remove the class 'bg-primary' and manually add your own color in the second highlighted section of inline style.
2. Remove the second highlighted section of inline style and change 'bg-primary' for another helper class (bg-secondary, bg-red, bg-green etc)
- Working with the Tile Fluid sections
The fluid sections 23-28 are using the full width image that can be resized for your own preference. In edit mode it's not possible to reach the left/right or top/bottom edge because of the guidance lines. To reduce the space, you need to edit it manually clicking the Edit HTML button and change the percentage ( e.g. 0.56564% to 0% and 99.3564% for 100%.)
Tips and suggestions
The fluid elements have an absolute position on the desktop devices and relative for tablet and mobile devices;
The height of the fluid sections are defined by the following elements depending on the specific widget you're using :
- class 'h-100' ( height:100vh;) and 'm-height-auto' for mobile devices;
- class 'h-50' ( height:50vh;) and 'm-height-auto' for mobile devices;
- the main element inside of the fluid section with relative position ( class 'is-rel '). Resizing this element, you can resize the whole height of the fluid section.
The Fluid sections can't be use inside the columns;
If you're adding a fluid section as a hero ( the first module in your content), you can reduce the space between the header and content by adding the class 'has-no-gutter' to the first line of the fluid section;
To make a transparent header and place the fluid section 'behind' the navigation and logo, add the following class 'has-transparent-header' to the first line of the fluid section;
Please consider the fluid sections only a part of the editing features provided by Matrix Themes. The Fluid sections can't replace some block elements or other custom widgets;
has-right-col-border
Resources
Documentation
Quick links
hide-in-doc-page
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 | |
| size-15 weight-400 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