Ensure that your website is updated with the latest CSS components and the most recent version of the Style Editor (JavaScript code).
Toast notification
01. Widgets
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 has-link-outlined cc-clearover" style="background-color: #1e55fa!important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 12.5091%; height: 517.641px; width: 100.498%;">
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 711.094px; height: 87.143%; left: 1.03511%; top: 4.02964%; background-position: 2.46319% 4.47679%;">
<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: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-6 is-fluid is-mobile-overlay ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 39.796%; top: 40.3969%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p> </p>
<h3 class="weight-400"><span style="color: #ffffff; font-size: 40px;">The Choice Is Yours.</span></h3>
<br />
<p style="text-align: left;"><span color="#FFFFFF" style="color: #ffffff;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p> </p>
<p style="text-align: left;"><span style="color: #6ea8de;"><strong><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #6ea8de;">Read more</a></strong></span></p>
<br /> <br />
<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 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="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 has-link-outlined cc-clearover" style="background-color: #1e55fa!important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 16.8385%; height: 517.641px; width: 100.498%;">
<div class="mask-section mask-dots fluid-pattern opacity-02 col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 92.3651%; width: 454.9px; left: 58.5195%; top: 0.105539%;">
<div class="btn-delete"></div>
<div class="btn-add"></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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 472.756px; height: 90.372%; left: 43.7142%; top: 9.073%; background-position: 81.562% 8.7922%;">
<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/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-6 is-fluid is-mobile-overlay ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 96.5764px; top: 221.752px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p> </p>
<h3 class="weight-400"><span style="color: #ffffff; font-size: 40px;">The Choice Is Yours.</span></h3>
<br />
<p style="text-align: left;"><span color="#FFFFFF" style="color: #ffffff;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p> </p>
<p style="text-align: left;"><span style="color: #ffffff;"><strong><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;">Read more</a></strong></span></p>
<br /> <br />
<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 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="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 03
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #1e55fa!important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" 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 ui-resizable ui-resizable-autohide" style="width: 597.971px; height: 96.0794%; left: 0.005059%; top: 0.197853%; background-position: 0.164039% 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: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-6 is-fluid m-col-11 is-mobile-overlay m-center-align ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 38.9849%; top: 22.2645%; width: 35.5424%; 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 has-shadow" style="border-radius: 20px;">
<h3 class="weight-400"><span style="color: #000; font-size: 40px;">The Choice Is Yours.</span></h3>
<br />
<p style="text-align: left;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="color: #000000;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #000000;">Read more</a></span></p>
</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 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="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 04
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #3782c8!important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 7.80873%; height: 548.655px; width: 100.671%;">
<div class="mask-section mask-dots fluid-pattern opacity-02 col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 92.3651%; width: 454.9px; left: 58.3948%; top: 0.204195%;">
<div class="btn-delete"></div>
<div class="btn-add"></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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 623.969px; height: 69.3669%; left: 35.5638%; top: 11.8186%; background-position: 55.6068% 4.63457%;">
<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: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-6 is-fluid m-col-11 is-mobile-overlay m-center-align ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0.0020822%; top: 46.1417%; width: 40.8605%; 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 has-shadow" style="border-radius: 20px;">
<h3 class="weight-400"><span style="color: #000; font-size: 40px;">The Choice Is Yours.</span></h3>
<br />
<p style="text-align: left;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="color: #000000;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #000000;">Read more</a></span></p>
</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 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="guide-lines-container"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
</div>
</div>
Fluid section 05
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #1e55fa!important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 7.80873%; height: 548.655px; width: 100.671%;">
<div class="mask-section mask-dots fluid-pattern col-10 opacity-02 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 98.7823%; width: 824.467px; left: 0px; top: 0px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 75.9962%; height: 80.2193%; left: 18.9209%; top: 8.91101%; background-position: 23.4684% 0.14651%;">
<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/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-6 is-fluid m-col-11 is-mobile-overlay m-center-align ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 8.51695%; top: 49.9402%; width: 35.6554%; height: 49.2795%;">
<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;">The Choice Is Yours.</span></h3>
<br />
<p style="text-align: left;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="color: #000000;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #000000;">Read more</a></span></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 06
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #3782c8!important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" 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 ui-resizable ui-resizable-autohide" style="width: 882.74px; height: 72.1134%; left: 11.4466%; top: 7.92215%; background-position: 16.2578% 10.3093%;">
<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/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" /></div>
<div class="col-6 is-fluid m-col-11 is-mobile-overlay m-center-align ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 24.925%; top: 58.3091%;">
<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" style="text-align: center;"><span style="color: #ffffff; font-size: 40px;">The Choice Is Yours.</span></h3>
<br />
<p style="text-align: center;"><span style="color: #ffffff;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p style="text-align: center;"><span style="color: #ffffff;"> </span></p>
<p style="text-align: center;"><span style="color: #ffffff;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;">Read more</a></span></p>
</div>
</div>
<p> </p>
</div>
</div>
Fluid section 07
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #f1eeee!important;">
<p class="bg-custom-color"><span style="color: #f1eeee;">⬤</span></p>
<div class="inner is-fluid-area is-fluid m-custom-height ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 452.214px; width: 100.479%; left: 0%; top: 5.89882%;">
<div class="mask-section mask-dots fluid-pattern col-10 opacity-02 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 90.0302%; width: 534.224px; left: 0px; top: 2.90146%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 4.03654%; top: 25.6293%; width: 81.6306%; height: auto; visibility: visible;">
<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 is-card fluid-bg content-teaser add-20 bg-primary is--flex is-flex-block cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="border-radius: 20px;">
<div class="left-align col-8 add-20 cc-box">
<h3 class="weight-400"> </h3>
<h3 class="weight-400"><span style="color: #ffffff;">Make it Stand Out</span></h3>
<p><span style="color: #ffffff;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p><span style="color: #ffffff;"> </span></p>
<p><span style="color: #ffffff;"> </span></p>
</div>
<div class="center-align col-4 add-20 cc-box">
<p style="text-align: right;"><span style="color: #ffffff;"><strong><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;">Read more</a></strong></span></p>
</div>
</div>
</div>
</div>
</div>
Fluid section 08
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #f1eeee!important;">
<p class="bg-custom-color"><span style="color: #f1eeee;">⬤</span></p>
<div class="inner is-fluid-area is-fluid m-custom-height u ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 452.214px; width: 100.479%; left: 0%; top: 5.89882%;">
<div class="mask-section mask-crosses col-10 opacity-02 is-fluid fluid-pattern ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 96.9018%; width: 272.884px; left: 0.046815%; top: 0.120846%; opacity: 0.4;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 m-margin-top-30 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 95.0833px; top: 115.7px; width: 81.6306%; height: auto; visibility: visible;">
<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 is-card fluid-bg content-teaser add-20 bg-white is--flex is-flex-block cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="border-radius: 20px;">
<div class="left-align col-8 add-20 cc-box">
<h3 class="weight-400"><span style="color: #454545;">Make it Stand Out</span></h3>
<p><span style="color: #454545;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p><span style="color: #454545;"> </span></p>
</div>
<div class="center-align col-4 add-20 cc-box">
<p style="text-align: right;"><span style="color: #454545;"><strong><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></strong></span></p>
</div>
</div>
</div>
</div>
</div>
Fluid section 09
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #f1eeee!important;">
<p class="bg-custom-color"><span style="color: #ffffff;">⬤</span></p>
<div class="inner is-fluid-area is-fluid m-custom-height ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 452.214px; width: 100.479%; left: 0%; top: 5.89882%;">
<div class="mask-section mask-dots fluid-pattern opacity-02 col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 56.1067%; width: 1156.55px; left: 0px; top: 0px;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 15.1201%; top: 39.8614%; width: 65.9423%; height: auto; visibility: visible;">
<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 is-card fluid-bg content-teaser add-20 bg-white is--flex is-flex-block cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="border-radius: 10px; border: 2px solid;">
<div class="left-align col-12 add-20 cc-box">
<h3 class="weight-400" style="text-align: left;"><span style="color: #000000;">Make it Stand Out</span></h3>
<p style="text-align: left;"><span style="color: #000000;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p style="text-align: left;"><span style="color: #000000;"> </span></p>
<p style="text-align: left;"><span style="color: #000000;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #000000;"><strong> Read more</strong></a></span></p>
</div>
</div>
</div>
</div>
</div>
Fluid section 10
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #ffffff;">⬤</span></p>
<div class="inner is-fluid-area is-fluid m-custom-height ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 452.214px; width: 100.479%; left: 0%; top: 5.89882%;">
<div class="mask-section mask-dots fluid-pattern opacity-02 col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 63.1208%; width: 99.427%; left: 0%; top: 0%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 is-fluid m-margin-top-10 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0.927209%; top: 17.8629%; width: 31.0412%; height: 19.9492%; visibility: visible;">
<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 is-card fluid-bg content-teaser add-20 bg-white is--flex is-flex-block cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="border-radius: 10px; border: 2px solid;">
<div class="left-align col-12 add-20 cc-box">
<h3 class="weight-400" style="text-align: left;"><span style="color: #000000;">Make it Stand Out</span></h3>
<p style="text-align: left;"><span style="color: #000000;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p style="text-align: left;"><span style="color: #000000;"> </span></p>
<p style="text-align: left;"><span style="color: #000000;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #000000;"><strong> Read more</strong></a></span></p>
</div>
</div>
</div>
<div class="col-6 m-col-11 is-fluid m-margin-top-10 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 33.7776%; top: 18.1034%; width: 31.4713%; height: 7.43741%; visibility: visible;">
<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 is-card fluid-bg content-teaser add-20 bg-white is--flex is-flex-block cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="border-radius: 10px; border: 2px solid;">
<div class="left-align col-12 add-20 cc-box">
<h3 class="weight-400" style="text-align: left;"><span style="color: #000000;">Make it Stand Out</span></h3>
<p style="text-align: left;"><span style="color: #000000;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p style="text-align: left;"><span style="color: #000000;"> </span></p>
<p style="text-align: left;"><span style="color: #000000;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #000000;"><strong> Read more</strong></a></span></p>
</div>
</div>
</div>
<div class="col-6 m-col-11 is-fluid m-margin-top-10 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 66.6384%; top: 18.1149%; width: 31.5018%; height: 18.3693%; visibility: visible;">
<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 is-card fluid-bg content-teaser add-20 bg-white is--flex is-flex-block cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="border-radius: 10px; border: 2px solid;">
<div class="left-align col-12 add-20 cc-box">
<h3 class="weight-400" style="text-align: left;"><span style="color: #000000;">Make it Stand Out</span></h3>
<p style="text-align: left;"><span style="color: #000000;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p style="text-align: left;"><span style="color: #000000;"> </span></p>
<p style="text-align: left;"><span style="color: #000000;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #000000;"><strong> Read more</strong></a></span></p>
</div>
</div>
</div>
</div>
</div>
Fluid section 11
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #cccccc!important;">
<p class="bg-custom-color"><span style="color: #f1eeee;">⬤</span></p>
<div class="inner is-fluid-area is-fluid m-custom-height ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 459.757px; width: 100.287%; left: 0%; top: 10.7193%;">
<div class="mask-section mask-dots fluid-pattern opacity-02 col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 55.6184%; width: 1157.8px; left: 0px; top: 11.8933%; background-position: -46px center;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-11 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 3.43751%; top: 20.378%; width: 66.0476%; height: auto; visibility: visible;">
<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 is-card fluid-bg content-teaser bg-white add-20 has-border-shadow is--flex is-flex-block cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="border-radius: 0px;">
<div class="left-align col-8 add-20 cc-box">
<h3 class="weight-400"><span style="color: #454545;">Make it Stand Out</span></h3>
<p><span style="color: #454545;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
</div>
<div class="center-align col-4 add-20 cc-box">
<p style="text-align: right;"><span style="color: #454545;"><strong><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></strong></span></p>
</div>
</div>
</div>
</div>
</div>
Fluid section 12
<div class="is-matrix-block hs-fullwidth cc-clearover has-link-btn round-btn" style="background-color: #1e55fa!important;">
<p class="bg-custom-color"><span style="color: #ffffff;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 757.188px; width: 100.766%;">
<div class="mask-section bg-primary fluid-pattern opacity-1 br20 col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 56.0325%; width: 1165.56px; left: 0.0466819%; top: 15.2856%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 628.013px; height: 75.2549%; left: 3.00371%; top: 7.15246%; background-position: 5.57423% 3.69531%;">
<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: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" /></div>
<div class="col-6 m-col-11 m-center-align m-pull-top-30 is-fluid is-rel ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 41.2872%; height: auto; left: 47.1458%; top: 36.048%;">
<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: 20px;">
<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>Based in the vibrant city of Hamburg, we are a web studio dedicated to creating innovative and impactful digital experiences. Our mission is to design and develop websites that not only look stunning but also deliver exceptional functionality and performance.</p>
<p> </p>
<p>We bring together a talented team of designers, developers, and strategists who are passionate about transforming ideas into reality. From sleek websites to complex e-commerce platforms and intuitive apps, every project is tailored to meet the unique needs of our clients.</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="font-size: 16px; color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #ffffff;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;"><strong><span style="font-size: 16px;" mce-data-marked="1">Portfolio</span></strong></a></span></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
</div>
</div>
</div>
</div>
Fluid section 13
<div class="is-matrix-block hs-fullwidth cc-clearover has-link-btn" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #ffffff;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 840.738px; width: 100.573%;">
<div class="mask-section mask-dots fluid-pattern opacity-02 col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 68.9459%; width: 599.214px; left: 0.0467716%; top: 0.064926%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 691.346px; height: 82.7686%; left: 2.8784%; top: 2.80362%; background-position: 5.06485% 3.27956%;">
<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/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" /></div>
<div class="col-6 m-col-11 m-center-align m-pull-top-30 is-fluid is-rel ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 54.7498%; height: auto; left: 45.1771%; top: 49.9683%;">
<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-primary-light 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>Based in the vibrant city of Hamburg, we are a web studio dedicated to creating innovative and impactful digital experiences. Our mission is to design and develop websites that not only look stunning but also deliver exceptional functionality and performance.</p>
<p> </p>
<p>We bring together a talented team of designers, developers, and strategists who are passionate about transforming ideas into reality. From sleek websites to complex e-commerce platforms and intuitive apps, every project is tailored to meet the unique needs of our clients.</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: #ffffff;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;">Portfolio</a></span></p>
<p class="" style="text-align: left;"> </p>
<p class="" style="text-align: left;"> </p>
</div>
</div>
</div>
</div>
Fluid section 14
<div class="is-matrix-block hs-fullwidth cc-clearover has-link-btn" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #fff;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide">
<div class="mask-section max-100 mask-blob-square fluid-pattern col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 71.9346%; width: 92.1167%; left: 0.0466371%; top: 13.9836%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 686.346px; height: 91.5193%; left: 35.5289%; top: 2.88829%; background-position: 69.8205% 0.0223204%;">
<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/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" /></div>
<div class="col-10 m-col-11 m-center-align m-pull-top-30 is-fluid is-rel ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 2.78472%; top: 0.131454%; width: 31.149%; 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-primary-light fluid-bg" style="border-radius: 0px;">
<p><span style="color: #454545;"> </span></p>
<div class="is-matrix cc-clearover">
<div class="cc-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>Based in the vibrant city of Hamburg, we are a web studio dedicated to creating innovative and impactful digital experiences.</p>
<p> </p>
<p>Our mission is to design and develop websites that not only look stunning but also deliver exceptional functionality and performance.</p>
<p> </p>
<p> </p>
<p> </p>
<p><span style="color: #ffffff;"><strong><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;">Portfolio</a></strong></span></p>
</div>
</div>
<p style="text-align: left;"> </p>
</div>
</div>
</div>
</div>
Fluid section 15
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #1e55fa!important;">
<p class="bg-custom-color"><span style="color: #ffffff;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-hight is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 7.80873%; height: 548.655px; width: 100.671%;">
<div class="mask-section mask-dots opacity-02 fluid-pattern col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 92.3651%; width: 454.9px; left: 60.4521%; top: 0.0218781%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 623.969px; height: 69.3669%; left: 35.0422%; top: 11.0734%; background-position: 55.6068% 4.63457%;">
<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: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" /></div>
<div class="col-6 is-fluid m-col-11 m-pull-top-30 m-center-align ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0.766218%; top: 42.2908%; width: 40.8605%; 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 has-shadow" style="border-radius: 20px;">
<h3 class="weight-400"><span style="color: #000; font-size: 40px;" mce-data-marked="1">About Us</span></h3>
<br />
<p>Based in the vibrant city of Hamburg, we are a web studio dedicated to creating innovative and impactful digital experiences.</p>
<p> </p>
<p>Our mission is to design and develop websites that not only look stunning but also deliver exceptional functionality and performance.</p>
<p> </p>
<p> </p>
<p style="text-align: left;"><span style="color: #000000;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #000000;">Read more</a></span></p>
</div>
</div>
</div>
</div>
Fluid section 16
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #ffffff;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 3.97485%;">
<div class="mask-section mask-dots fluid-pattern col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="opacity: 0.2; height: 75.2737%; width: 99.3148%; left: 0.559796%; top: 8.956%;">
<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 ui-resizable ui-resizable-autohide" style="width: 41.8548%; height: 98.6272%; left: 3.38329%; top: 0.347372%;">
<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/sa58ac84176c7327c/userlayout/img/m-stock-08.jpg" alt="Matrix themes" /></div>
<div class="col-10 m-col-11 m-center-align is-fluid m-pull-top-30 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 39.0178%; top: 23.3876%; 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: 2px solid; 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 17
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #ffffff!important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 3.97485%; height: 525.035px; width: 100.766%;">
<div class="mask-section mask-dots fluid-pattern col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="opacity: 0.2; height: 75.2737%; width: 99.3148%; left: 0.0459384%; top: 8.73947%;">
<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 ui-resizable ui-resizable-autohide" style="width: 460.565px; height: 99.3718%; left: 52.712%; top: 0.105706%; background-position: 72.2033% 0.064616%;">
<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/sa58ac84176c7327c/userlayout/img/m-stock-03.jpg" alt="Matrix themes" /></div>
<div class="col-10 m-col-11 m-center-align is-fluid is-mobile-overlay ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 6.00459%; top: 21.184%; 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 green-color bg-white cc-box" style="border-radius: 20px;">
<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 18
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #1e55fa!important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 3.97485%; height: 657.57px; width: 100.573%;">
<div class="mask-section mask-dots fluid-pattern col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="opacity: 0.2; height: 48.2149%; width: 848.638px; left: 0.0467716%; top: 0.388501%;">
<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 ui-resizable ui-resizable-autohide" style="width: 605.889px; height: 82.5054%; left: 7.51164%; top: 10.5943%; background-position: 57.3607% 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="rel-mobile-only editable-image" style="border-radius: 0px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-03.jpg" alt="Matrix themes" /></div>
<div class="col-10 m-col-11 m-center-align is-fluid m-pull-top-30 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 42.9026%; top: 32.6124%; 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 bg-dark has-check-list-2 green-color color-white fluid-bg 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>
iv class="hs-thumbnail"> 
Fluid section 19
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #1e55fa!important;">
<p class="bg-custom-color"><span style="color: #ededed;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid m-custom-height ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 3.97485%; height: 657.57px; width: 100.573%;">
<div class="mask-section mask-dots fluid-pattern col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="opacity: 0.2; height: 48.2149%; width: 848.638px; left: 0.0467716%; top: 0.0830421%;">
<div class="btn-delete"></div>
<div class="btn-add"></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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-6 m-add-top-20 resp-img fluid-img is-fluid is-rel ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 999.87px; height: 77.1092%; left: 7.68294%; top: 10.8997%; background-position: 9.05483% 13.646%;">
<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/sa58ac84176c7327c/userlayout/img/m-stock-07.jpg" alt="Matrix themes" /></div>
<div class="col-10 m-col-11 m-center-align is-fluid m-pull-top-30 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 24.2057%; top: 52.733%; 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 bg-white has-border-shadow has-check-list-2 green-color color-white fluid-bg cc-box" style="border-radius: 0px;">
<h3 class="weight-400" style="font-size: 40px;"><span style="color: #000000;"><strong>Our features</strong></span></h3>
<ul>
<li><span style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span></li>
</ul>
<br />
<ul>
<li><span style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span></li>
</ul>
<br />
<ul>
<li><span style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span></li>
</ul>
</div>
</div>
</div>
</div>
Fluid section 20
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #1e55fa !important;">
<p class="bg-custom-color"><span style="color: #f1eeee;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 16.8385%; height: 613.412px; width: 100.402%;">
<div class="mask-section mask-dots fluid-pattern col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="opacity: 0.2; height: 57.4113%; width: 60.5301%; left: 39.4288%; top: 24.7566%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
</div>
<div class="col-6 m-col-12 m-margin-10 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 27.5685%; height: 78.7333%; left: 44.1506%; top: 9.24594%; background-position: 81.562% 8.7922%;">
<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" style="border-radius: 10px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-07.jpg" alt="Matrix Themes" /></div>
<div class="col-6 m-col-8 m-pull-top-50 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 27.2081%; height: 69.314%; left: 72.4361%; top: 0.317563%; background-position: 81.562% 8.7922%;">
<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" style="border-radius: 10px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" /></div>
<div class="col-6 is-fluid m-margin-top-10 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 1.91046%; top: 29.0483%; width: 39.6856%; height: 39.9818%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p> </p>
<h3 class="weight-400"><span style="color: #454545; font-size: 40px;">The Choice Is Yours.</span></h3>
<br />
<p style="text-align: left;"><span color="#FFFFFF" style="color: #454545;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><strong><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></strong></span></p>
<br /> </div>
</div>
</div>
Fluid section 21
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #f1eeee !important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area m-custom-height is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 0%; top: 16.8385%; height: 697.188px; width: 100.306%;">
<div class="mask-section mask-dots fluid-pattern col-10 m-col-10 is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="opacity: 0.2; height: 57.4113%; width: 60.5301%; left: 39.4288%; top: 24.7566%;">
<div class="btn-delete"></div>
<div class="btn-add"></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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-6 m-col-12 m-margin-10 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 49.5976%; height: 46.0518%; left: 46.736%; top: 0.440216%; background-position: 81.562% 8.7922%;">
<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" style="border-radius: 10px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-07.jpg" alt="Matrix Themes" /></div>
<div class="col-6 m-col-8 m-pull-top-50 resp-img fluid-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 49.8967%; height: 49.5513%; left: 46.7538%; top: 48.2975%; background-position: 81.562% 8.7922%;">
<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" style="border-radius: 10px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-05.jpg" alt="Matrix Themes" /></div>
<div class="col-6 is-fluid m-margin-top-10 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 2.00341%; top: 34.9189%; width: 39.6856%; height: 39.9818%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<p> </p>
<h3 class="weight-400"><span style="color: #ffffff; font-size: 40px;">The Choice Is Yours.</span></h3>
<br />
<p style="text-align: left;"><span color="#FFFFFF" style="color: #ffffff;">Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.</span></p>
<p><span style="color: #ffffff;"> </span></p>
<p style="text-align: left;"><span style="color: #ffffff;"><strong><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;">Read more</a></strong></span></p>
<br /> </div>
</div>
</div>
Fluid section 22
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #dddddd!important;">
<p class="bg-custom-color"><span style="color: #1e55fa;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 493.524px; width: 100.766%; left: 0%; top: 4.54076%;">
<div class="col-4 is-fluid is-rel cc-box ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="margin-bottom: 20px; left: 0.0474253%; top: 21.6391%; 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 slim-line bg-white"></div>
<br />
<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 style="text-align: left;"> </p>
<p style="text-align: left;"><span style="color: #ffffff;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;">Read more</a></span></p>
<p> </p>
</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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-4 is-fluid cc-box ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" 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 slim-line bg-white"></div>
<br />
<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 style="text-align: left;"> </p>
<p style="text-align: left;"><span style="color: #ffffff;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;">Read more</a></span></p>
</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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></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 slim-line bg-white"></div>
<br />
<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 style="text-align: left;"> </p>
<p style="text-align: left;"><span style="color: #ffffff;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;">Read more</a></span></p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 23
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #1e55fa !important;">
<p class="bg-custom-color"><span style="color: #f1eeee;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 493.524px; width: 100.766%; left: 0%; top: 4.54076%;">
<div class="col-4 is-fluid is-rel cc-box ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="margin-bottom: 20px; left: 0.0474253%; top: 21.6391%; 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: 20px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #454545;">Services</span></h3>
<div class="is-line slim-line bg-primary"></div>
<br />
<p style="text-align: left;"><span style="color: #454545;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></span></p>
<p><span style="color: #454545;"> </span></p>
</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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-4 is-fluid cc-box ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" 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: 20px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #454545;">Approach</span></h3>
<div class="is-line slim-line bg-primary"></div>
<br />
<p style="text-align: left;"><span style="color: #454545;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></span></p>
</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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></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: 20px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #454545;">Results</span></h3>
<div class="is-line slim-line bg-primary"></div>
<br />
<p style="text-align: left;"><span style="color: #454545;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></span></p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 24
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #f1eeee !important;">
<p class="bg-custom-color"><span style="color: #f1eeee;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 493.524px; width: 100.766%; left: 0%; top: 4.54076%;">
<div class="col-4 is-fluid is-rel cc-box ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="margin-bottom: 20px; left: 0.0474253%; top: 21.6391%; 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 fluid-bg add-30" style="border: 2px solid; border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #454545;">Services</span></h3>
<br />
<p style="text-align: left;"><span style="color: #454545;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></span></p>
<p><span style="color: #454545;"> </span></p>
</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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-4 is-fluid cc-box ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" 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 add-30 fluid-bg" style="border: 2px solid; border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #454545;">Approach</span></h3>
<br />
<p style="text-align: left;"><span style="color: #454545;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></span></p>
</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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></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 fluid-bg add-30" style="border: 2px solid; border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #454545;">Results</span></h3>
<br />
<p style="text-align: left;"><span style="color: #454545;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></span></p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 25
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #f1eeee !important;">
<p class="bg-custom-color"><span style="color: #f1eeee;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 493.524px; width: 100.766%; left: 0%; top: 4.54076%;">
<div class="col-4 is-fluid is-rel cc-box ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="margin-bottom: 20px; left: 0.0474253%; top: 21.6391%; 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 fluid-bg add-30 has-border-shadow" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #454545;">Services</span></h3>
<br />
<p style="text-align: left;"><span style="color: #454545;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></span></p>
<p><span style="color: #454545;"> </span></p>
</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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-4 is-fluid cc-box ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" 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 add-30 fluid-bg has-border-shadow" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #454545;">Approach</span></h3>
<br />
<p style="text-align: left;"><span style="color: #454545;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></span></p>
</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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></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 fluid-bg add-30 has-border-shadow" style="border-radius: 0px;">
<h3 class="weight-400" style="text-align: left;"><span style="color: #454545;">Results</span></h3>
<br />
<p style="text-align: left;"><span style="color: #454545;">Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;">Read more</a></span></p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 26
<div class="is-matrix-block is-parallax is-fullwidth has-link-outlined rel no-padding editable-bg-image" style="background: url('https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-01.jpg');">
<div class="hs-overlay opacity-1" style="background-color: #0000ff !important;">
<p class="bg-custom-color"><span style="color: rgba(30, 85, 250, 0.7);">⬤</span></p>
</div>
<div class="inner is-fluid-area is-fluid cc-clearover m-custom-height cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 533.307px; width: 82.2658%;">
<div class="btn-img is-single-btn" onclick="openBackgroundImageURLPopup(this);"></div>
<div class="col-10 is-fluid m-col-10 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 49.9086%; height: auto; left: 1.55434%; top: 29.4713%;">
<div class="btn-delete"></div>
<div class="btn-add"></div>
<div class="add-20 m-margin-20">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><strong><span style="color: #ffffff;">Create something great</span></strong></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;"><span style="color: #ffffff;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;"><strong>Read more</strong></a></span></p>
<p style="text-align: left;"> </p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 27
<div class="is-matrix-block is-parallax is-fullwidth has-link-outlined rel no-padding editable-bg-image" style="background: url('https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-07.jpg');">
<div class="hs-overlay opacity-1" style="background-color: rgba(30, 85, 250, 0.7) !important;">
<p class="bg-custom-color"><span style="color: rgba(0, 0, 0, 0.4);">⬤</span></p>
</div>
<div class="inner is-fluid-area is-fluid cc-clearover m-custom-height cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 533.307px; width: 82.2658%;">
<div class="btn-img is-single-btn" onclick="openBackgroundImageURLPopup(this);"></div>
<div class="col-10 is-fluid m-col-10 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 41.2956%; height: 54.2702%; left: 1.55433%; top: 29.4708%;">
<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-margin-10 fluid-bg opacity-6">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><strong><span style="color: #ffffff;">Create something great</span></strong></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;"><span style="color: #ffffff;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #ffffff;"><strong>Read more</strong></a></span></p>
<p style="text-align: left;"> </p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 28
<div class="is-matrix-block is-parallax is-fullwidth has-link-outlined rel no-padding editable-bg-image" style="background: url('https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-09.jpg');">
<div class="hs-overlay opacity-1" style="background-color: rgba(0, 0, 0, 0.4) !important;">
<p class="bg-custom-color"><span style="color: rgba(0, 0, 0, 0.4);">⬤</span></p>
</div>
<div class="inner is-fluid-area is-fluid cc-clearover m-custom-height cc-clearover ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 569.071px; width: 82.1876%;">
<div class="btn-img is-single-btn" onclick="openBackgroundImageURLPopup(this);"></div>
<div class="col-10 is-fluid m-col-10 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 44.1729%; height: 38.2298%; left: 2.46402%; top: 32.5729%;">
<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-margin-10 bg-white fluid-bg" style="border-radius: 20px;">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><span style="color: #454545;"><strong>Create something great</strong></span></h3>
<p style="text-align: left;"><span style="color: #454545;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;"><strong>Read more</strong></a></span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
</div>
Fluid section 29
<div class="is-matrix-block hs-fullwidth has-link-outlined 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 ui-resizable ui-resizable-autohide" style="height: 772.431px; width: 100.575%;">
<div class="col-8 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 87.1367%; height: 84.2024%; left: 12.5743%; top: 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: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-abstract-02.jpg" alt="Matrix themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-4 m-col-6 m-absolute resp-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 1.41712%; top: 24.4382%; width: 41.4188%; height: 72.9908%;">
<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-5 cc-box" style="border-radius: 20px;" src="https://u.jimcdn.com/cms/o/sb9f158b4382fbcd3/userlayout/img/fluid-img.jpg?t=1661711353" alt="Matrix themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-10 is-fluid m-col-12 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 55.5148%; height: 36.9038%; left: 35.8205%; top: 44.0557%;">
<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 m-margin-top-10" style="border-radius: 10px;">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><span style="color: #454545;"><strong>Create something great</strong></span></h3>
<p style="text-align: left;"><span style="color: #454545;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;"><strong>Read more</strong></a></span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
<div class="guide-lines-container"></div>
</div>
Fluid section 30
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #ffffff !important;">
<p class="bg-custom-color"><span style="color: #d9d2ea;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 755.434px; width: 100.575%;">
<div class="col-8 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 89.9832%; height: 74.7874%; left: 9.445%; top: 1.5294%;">
<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: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-abstract-03.jpg" alt="Matrix themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-4 m-col-6 m-absolute resp-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 64.9061%; top: 50.3953%; width: 22.7433%; height: 33.7492%;">
<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-5 cc-box" style="border-radius: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-02.jpg" alt="Matrix themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-10 is-fluid m-col-12 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 44.1729%; height: 38.2298%; left: 0.0787958%; top: 35.375%;">
<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 m-margin-top-10" style="border-radius: 10px;">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><span style="color: #454545;"><strong>Create something great</strong></span></h3>
<p style="text-align: left;"><span style="color: #454545;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;"><strong>Read more</strong></a></span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
<div class="guide-lines-container"></div>
</div>
Fluid section 31
<div class="is-matrix-block hs-fullwidth has-link-outlined cc-clearover" style="background-color: #d9d2ea !important;">
<p class="bg-custom-color"><span style="color: #d9d2ea;">⬤</span></p>
<div class="inner m-padding is-fluid-area is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="height: 591.198px; width: 100.479%;">
<div class="col-8 resp-img is-fluid fluid-img ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 99.0878%; height: 85.4156%; left: 0.0521825%; top: 0.0102976%;">
<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: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-abstract-06.jpg" alt="Matrix themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-4 m-col-6 m-center-align m-absolute resp-img is-fluid ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="left: 3.66977%; top: 5.82806%; width: 33.3334%; height: 51.599%;">
<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 cc-box" style="border-radius: 20px;" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-business-01.jpg" alt="Matrix themes" />
<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 class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
<div class="col-10 is-fluid m-col-12 ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" style="width: 44.1729%; height: 38.2298%; left: 53.147%; top: 46.1855%;">
<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 m-margin-top-10" style="border-radius: 20px;">
<h3 class="weight-400" style="font-size: 40px; text-align: left;"><span style="color: #454545;"><strong>Create something great</strong></span></h3>
<p style="text-align: left;"><span style="color: #454545;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
<p style="text-align: left;"><span style="color: #454545;"><a href="/app/s758c0057fdaf08b1/pca4591316cc6236f/" title="Home" style="color: #454545;"><strong>Read more</strong></a></span></p>
<p style="text-align: left;"><span style="color: #454545;"> </span></p>
</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 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 class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
<div class="guide-lines-container"></div>
</div>
<div class="guide-lines-container"></div>
</div>
02. How to add a Fluid Section
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. You'll have to 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
More details about the file upload can be found in this page:
https://www.matrix-themes.com/support/help/hosting-the-files/
- Editing the links
Each fluid section code includes the following classes at the beginning:
- has-link-outlined - All links will have an animated underlined style.
- has-link-btn - All links will have a button style.
- 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).
Tips and suggestions
The Fluid sections can't be used inside the columns. If you add the fluid section inside Widget/HTML, it won't be possible to edit the elements using drag&drop and resizing options.
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.
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;
03. FAQs
I can't see drag-and-drop options for my widgets.
You may have added the widget code into the wrong module ("Widget/HTML"). To enable drag-and-drop options and resizing, paste the widget into the "Text" module by clicking the "Edit HTML" button.
has-right-col-border
Documentation
draggable-logo
Global colors
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
Template colors
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
Footer Styles
| background | |
| text color | |
| link color | |
| horizontal line |
Buttons
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
Mobile navigation
| background color | |
| navigation color |
Other elements
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white white-outline-btn | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.
is-switcher