Блоки Berry CSS 26 шт.
Выберите нужный блок и скопируйте его на свою страницу. В качестве исходного дизайна использовались блоки из Froala Design Blocks. Вся вёрстка выполнена на классах Berry CSS. После копирования нужно только поправить пути изображений и ссылок.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Код для вставки (ca1.html)
<div class="layout-center-wrap-tablet mar50-t">
<div class="layout-wrap t-center">
<div class="t-gray600 t130">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="mar20-t"><a class="button" href="">Download</a></div>
</div>
</div>Call to Action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur
Код для вставки (ca2.html)
<div class="layout-center-wrap-tablet">
<div class="layout-wrap t-center">
<h1>Call to Action</h1>
<div class="t-gray600 t130">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur</div>
<div class="mar20-t"><a class="button" href="">Download</a></div>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur, quid repugnet, vident.
Код для вставки (ca3.html)
<div class="layout-center-wrap-tablet">
<div class="layout-wrap t-center">
<h3 class="t-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur, quid repugnet, vident. </h3>
<div class="mar30-t"><a class="button button-outline1" href="">Download</a></div>
</div>
</div>Call to Action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur, quid repugnet, vident.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Код для вставки (ca4.html)
<div class="layout-center-wrap-tablet">
<div class="layout-wrap t-center">
<h1>Call to Action</h1>
<div class="t-gray600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur, quid repugnet, vident.</div>
<div class="mar30-t"><a class="button" href="">Download</a></div>
<div class="mar50-t t-bold t-gray400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="mar40-t flex flex-wrap">
<img class="h30px" src="<?= UPLOADS_URL ?>froala/customers/adobe.svg">
<img class="h30px" src="<?= UPLOADS_URL ?>froala/customers/amazon.svg">
<img class="h30px" src="<?= UPLOADS_URL ?>froala/customers/ebay.svg">
<img class="h30px" src="<?= UPLOADS_URL ?>froala/customers/samsung.svg">
<img class="h30px" src="<?= UPLOADS_URL ?>froala/customers/orange.svg">
<img class="h30px" src="<?= UPLOADS_URL ?>froala/customers/salesforce.svg">
</div>
</div>
</div>Quid de Platone aut de Democrito loquar
Код для вставки (ca5.html)
<div class="layout-center-wrap-tablet">
<div class="layout-wrap t-center">
<h1>Quid de Platone aut de Democrito loquar</h1>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
</div>Код для вставки (ca6.html)
<!--
use.bootstrap-icons: +
-->
<div class="layout-center-wrap">
<div class="layout-wrap t-center">
<div class="t-gray600 t120">Follow us and ask more on:</div>
<div class="t200 t-blue600 links-no-color links-hover-t-blue">
<a class="mar5-rl" href=""><i class="bi-facebook"></i></a>
<a class="mar5-rl" href=""><i class="bi-twitter"></i></a>
<a class="mar5-rl" href=""><i class="bi-instagram"></i></a>
<a class="mar5-rl" href=""><i class="bi-google"></i></a>
<a class="mar5-rl" href=""><i class="bi-pinterest"></i></a>
</div>
</div>
</div>Код для вставки (ca7.html)
<div class="layout-center-wrap">
<div class="layout-wrap t-center">
<h1 class="t-bold">Call to action</h1>
<div class="mar70-t b-flex flex-wrap-tablet flex-jc-center">
<div class="w30 w80-tablet mar50-b-tablet">
<div><img class="h50px" alt="" src="<?= UPLOADS_URL ?>froala/icons/gift.svg"></div>
<h5 class="mar30-t">First Action</h5>
<div class="t-gray500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.</div>
<div class="mar30-t"><a class="button button-outline2" href="">Download</a></div>
</div>
<div class="w10 hide-tablet"></div>
<div class="w30 w80-tablet">
<div><img class="h50px" alt="" src="<?= UPLOADS_URL ?>froala/icons/cloud.svg"></div>
<h5 class="mar30-t">Second Action</h5>
<div class="t-gray500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.</div>
<div class="mar30-t"><a class="button button-outline2" href="">Download</a></div>
</div>
</div>
</div>
</div>Call to action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.
Код для вставки (ca8.html)
<div class="layout-center-wrap">
<div class="layout-wrap t-center">
<div class="bg-no-repeat bg-position-var pad70-tb" style="background-image: url(<?= UPLOADS_URL ?>froala/shapes/2.svg);">
<div class="b-center bg-white pad80-tb pad50-rl w-tablet-max rounded10 b-shadow-var">
<h1 class="t-bold">Call to action</h1>
<div class="t-gray500 t120">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.</div>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
</div>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Код для вставки (ca9.html)
<div class="layout-center-wrap">
<div class="layout-wrap t-center">
<div class="flex flex-wrap-tablet flex-jc-center flex-ai-center">
<h2 class="mar0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h2>
<div class="pad20-rl mar20-t-tablet"><a class="button" href="">Download</a></div>
</div>
</div>
</div>Call to action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.
Код для вставки (ca10.html)
<div class="layout-center-wrap">
<div class="layout-wrap t-center">
<div class="bg-no-repeat bg-position-var pad100 pad10-tablet b-clearfix" style="background-image: url(<?= UPLOADS_URL ?>froala/shapes/4.svg);">
<div class="bg-white w500px-max pad100-tb pad30-rl mar50-r mar0-tablet b-right w-tablet-max rounded10 b-shadow-var">
<h1 class="t-bold">Call to action</h1>
<div class="t-gray500 t120">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.</div>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
</div>
</div>
</div>Lorem ipsum dolor sit amet, consectetur
Код для вставки (ca11.html)
<div class="layout-center-wrap">
<div class="layout-wrap t-center">
<div class="flex flex-wrap-tablet flex-jc-center flex-ai-center">
<div class="pad20-rl mar20-b-tablet"><a class="button button-outline1" href="">Download</a></div>
<h2 class="mar0">Lorem ipsum dolor sit amet, consectetur</h2>
</div>
</div>
</div>Far far away behind
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Call to action
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Код для вставки (ca12.html)
<div class="layout-center-wrap">
<div class="layout-wrap">
<h1 class="t-bold t-center">Far far away behind</h1>
<h2 class="t-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<div class="mar50-t flex flex-jc-center flex-wrap">
<div class="w50 w80-tablet">
<h3>Call to action</h3>
<div class="t-gray600 t120">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
<div class="w5 hide-tablet"></div>
<div class="w30 w80-tablet pad30-t-tablet">
<img class="" alt="" src="<?= UPLOADS_URL ?>froala/draws/git.svg">
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.
Код для вставки (ca13.html)
<div class="layout-center-wrap bg-no-repeat bg-size-cover" style="background-image: url(<?= UPLOADS_URL ?>froala/hero/purple.svg)">
<div class="layout-wrap t-center t-white pad100-tb">
<div class="w-tablet-max b-center">
<div><img class="h70px" alt="" src="<?= UPLOADS_URL ?>froala/icons/coffee.svg"></div>
<h1 class="t-bold mar40-t">Lorem ipsum dolor sit amet</h1>
<div class="t120 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.</div>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
</div>
</div>Call to Action
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Код для вставки (ca14.html)
<div class="layout-center-wrap">
<div class="layout-wrap pad100-tb bg-no-repeat bg-position-var" style="background-image: url(<?= UPLOADS_URL ?>froala/shapes/1.svg); --position: 100% 50%">
<div class="w-tablet-max">
<h1 class="t-bold mar40-t">Call to Action</h1>
<div class="t120 w-tablet-max">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
</div>
</div>
Call to Action
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Код для вставки (ca15.html)
<div class="layout-center-wrap">
<div class="layout-wrap">
<div class="flex flex-wrap-tablet">
<div class="w25 w40-tablet w100-tablet mar30-b-tablet t-center">
<img class="w100 w300px-max" alt="" src="<?= UPLOADS_URL ?>froala/draws/smile.svg">
</div>
<div class="w70 w55-tablet w100-tablet">
<h1>Call to Action</h1>
<div class="t120 t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
</div>
</div>
</div>A small river named Duden flows by their place and supplies it with the necessary regelialia
Код для вставки (ca16.html)
<div class="layout-center-wrap bg-no-repeat bg-size-cover" style="background-image: url(<?= UPLOADS_URL ?>froala/hero/blue.svg)">
<div class="layout-wrap t-center t-white pad100-tb">
<div class="w-tablet-max b-center">
<h1 class="t-bold mar40-t">A small river named Duden flows by their place and supplies it with the necessary regelialia</h1>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
</div>
</div>Separated they live in Bookmarks
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Код для вставки (ca17.html)
<div class="layout-center-wrap">
<div class="layout-wrap">
<h1 class="t-bold">Separated they live in Bookmarks</h1>
<div class="t120 t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="mar50-t flex flex-ai-center flex-wrap-tablet">
<div class="w25 w65-tablet flex-order2-tablet"><img class="w100 w300px-max" alt="" src="<?= UPLOADS_URL ?>froala/draws/code.svg"></div>
<div class="w50 w100-tablet mar30-b-tablet">
<h3>Lorem ipsum dolor sit amet</h3>
<div class="t-gray600">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="w15 w30-tablet flex-order3-tablet">
<a class="w100 button button-outline1 mar5-b" href="">Take a Tour</a>
<a class="w100 button" href="">Start Now</a>
</div>
</div>
</div>
</div>Call to Action
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Код для вставки (ca18.html)
<div class="layout-center-wrap">
<div class="layout-wrap">
<div class="flex flex-wrap-tablet">
<div class="w50 w100-tablet">
<h1>Call to Action</h1>
<div class="t120 t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
<div class="w50 w100-tablet mar30-t-tablet t-center">
<img class="w100 w300px-max" alt="" src="<?= UPLOADS_URL ?>froala/draws/sync.svg">
</div>
</div>
</div>
</div>
Call to Action
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Код для вставки (ca19.html)
<div class="layout-center-wrap">
<div class="layout-wrap">
<div class="flex flex-wrap-tablet">
<div class="w48 w100-tablet mar30-b-tablet t-center">
<img class="w100 w400px-max" alt="" src="<?= UPLOADS_URL ?>froala/draws/sync2.svg">
</div>
<div class="w48 w100-tablet">
<h1 class="t-bold">Call to Action</h1>
<div class="t120 t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
</div>
</div>
</div>Call to Action
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Код для вставки (ca20.html)
<div class="layout-center-wrap">
<div class="layout-wrap">
<div class="flex flex-ai-center flex-wrap-tablet">
<div class="flex-grow3 w-tablet-max mar30-b-tablet">
<h1 class="t-bold">Call to Action</h1>
<div class="t120 t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="flex-grow1 t-right pad20-rl t-center-tablet">
<div class="mar30-t"><a class="button" href="">Download</a></div>
</div>
</div>
<div class="mar50-t"><img class="center w400px-max" alt="" src="<?= UPLOADS_URL ?>froala/draws/rocket.svg"></div>
</div>
</div>Call to Action
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Код для вставки (ca21.html)
<div class="layout-center-wrap bg-no-repeat bg-size-cover bg-position-center" style="background-image: url(<?= UPLOADS_URL ?>froala/hero/red.svg)">
<div class="layout-wrap t-white pad100-tb pad50-rl">
<h1 class="t-bold w-tablet-max">Call to Action</h1>
<div class="mar50-t t120 w-tablet-max">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="mar70-t"><a class="button button-red" href="">Call to Action</a> <a class="mar10-rl button button-red" href="">Download</a></div>
</div>
</div>Call to Action
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
Feature One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Код для вставки (ca22.html)
<div class="layout-center-wrap">
<div class="layout-wrap t-center">
<h1 class="t-bold">Call to Action</h1>
<div class="b-center mar30-t t120 t-gray600 w400px-max">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </div>
<div class="mar30-t"><a class="mar10-rl button" href="">Call to Action</a></div>
<div class="mar80-t flex flex-wrap">
<div class="w23 w48-tablet w100-tablet mar20-b">
<div><img class="h70px center" alt="" src="<?= UPLOADS_URL ?>froala/icons/cloud.svg"></div>
<h5 class="mar20-t">Feature One</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w23 w48-tablet w100-tablet mar20-b">
<div><img class="h70px center" alt="" src="<?= UPLOADS_URL ?>froala/icons/gift.svg"></div>
<h5 class="mar20-t">Feature One</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w23 w48-tablet w100-tablet mar20-b">
<div><img class="h70px center" alt="" src="<?= UPLOADS_URL ?>froala/icons/github.svg"></div>
<h5 class="mar20-t">Feature One</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w23 w48-tablet w100-tablet mar20-b">
<div><img class="h70px center" alt="" src="<?= UPLOADS_URL ?>froala/icons/compass.svg"></div>
<h5 class="mar20-t">Feature One</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>Feature
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Код для вставки (fe1.html)
<div class="layout-center-wrap">
<div class="layout-wrap">
<div class="flex flex-wrap t-center">
<div class="w4col w6col-tablet w12col-tablet pad20">
<h5>Feature</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w4col w6col-tablet w12col-tablet pad20">
<h5>Feature</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w4col w6col-tablet w12col-tablet pad20">
<h5>Feature</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w4col w6col-tablet w12col-tablet pad20">
<h5>Feature</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w4col w6col-tablet w12col-tablet pad20">
<h5>Feature</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w4col w6col-tablet w12col-tablet pad20">
<h5>Feature</h5>
<div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>Nunc
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Nunc
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Nunc
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Nunc
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Nunc
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Nunc
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Код для вставки (fe13.html)
<div class="layout-center-wrap"> <div class="layout-wrap"> <div class="flex flex-wrap-tablet mar30-tb"> <div class="w31 w100-tablet mar20-tb t-right t-left-tablet"> <div class="mar50-b"> <div><img src="<?= UPLOADS_URL ?>froala/icons/gift.svg" width="70"></div> <div class="t-bold t-gray800 mar20-tb">Nunc</div> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> <div class="mar50-b"> <div><img src="<?= UPLOADS_URL ?>froala/icons/layers.svg" width="70"></div> <div class="t-bold t-gray800 mar20-tb">Nunc</div> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> <div class="mar50-b"> <div><img src="<?= UPLOADS_URL ?>froala/icons/map.svg" width="70"></div> <div class="t-bold t-gray800 mar20-tb">Nunc</div> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> </div> <div class="w31 hide-tablet mar20-tb t-center pad20"> <img src="<?= UPLOADS_URL ?>froala/draws/simple-iphone.svg"> </div> <div class="w31 w100-tablet mar20-tb"> <div class="mar50-b"> <div><img src="<?= UPLOADS_URL ?>froala/icons/package.svg" width="70"></div> <div class="t-bold t-gray800 mar20-tb">Nunc</div> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> <div class="mar50-b"> <div><img src="<?= UPLOADS_URL ?>froala/icons/monitor.svg" width="70"></div> <div class="t-bold t-gray800 mar20-tb">Nunc</div> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> <div class="mar50-b"> <div><img src="<?= UPLOADS_URL ?>froala/icons/compass.svg" width="70"></div> <div class="t-bold t-gray800 mar20-tb">Nunc</div> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> </div> </div> </div> </div>
Cras malesuada
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Код для вставки (fe15.html)
<div class="layout-center-wrap mar50-tb"> <div class="layout-wrap"> <div class="w800px-max b-center flex flex-wrap-tablet"> <div class="w50 w100-tablet"> <div class="t200 t-gray800 t-bold">Cras malesuada</div> <div class="mar20-tb t-gray800 t-bold">Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> <div class="flex flex-ai-start mar50-t"> <img class="mar20-r" src="<?= UPLOADS_URL ?>froala/icons/gift.svg" width="50"> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> <div class="flex flex-ai-start mar50-t"> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> <img class="mar20-l" src="<?= UPLOADS_URL ?>froala/icons/map-pin.svg" width="50"> </div> <div class="flex flex-ai-start mar50-t"> <img class="mar20-r" src="<?= UPLOADS_URL ?>froala/icons/life-buoy.svg" width="50"> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> </div> <div class="w35 hide-tablet"> <img src="<?= UPLOADS_URL ?>froala/draws/simple-iphone.svg"> </div> </div> </div> </div>
Aenean ut lacus Nunc
Ut magna. Morbi eu justo sed tortor euismod porttitor. Morbi blandit mollis magna. Ut a pede ac neque mattis facilisis. Aenean ut lacus. Aliquam sit amet felis. Phasellus in neque. Vestibulum tempor nisi rhoncus eros. Nunc fermentum convallis ligula. Aliquam dictum gravida
Nunc
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Nunc
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Nunc
Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.
Код для вставки (fe17.html)
<div class="layout-center-wrap mar50-tb"> <div class="layout-wrap"> <div class="t200">Aenean ut lacus Nunc</div> <div class="t-gray700 mar10-t">Ut magna. Morbi eu justo sed tortor euismod porttitor. Morbi blandit mollis magna. Ut a pede ac neque mattis facilisis. Aenean ut lacus. Aliquam sit amet felis. Phasellus in neque. Vestibulum tempor nisi rhoncus eros. Nunc fermentum convallis ligula. Aliquam dictum gravida</div> <div class="mar40-tb t-center"><img class="w700px-max" src="<?= UPLOADS_URL ?>froala/draws/android.svg"> </div> <div class="flex flex-wrap-tablet mar30-tb"> <div class="w31 w100-tablet flex flex-ai-start mar20-tb"> <img src="<?= UPLOADS_URL ?>froala/icons/github.svg" width="70"> <div class="pad20-rl"> <div class="t-bold t-gray800 mar10-b">Nunc</div> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> </div> <div class="w31 w100-tablet flex flex-ai-start mar20-tb"> <img src="<?= UPLOADS_URL ?>froala/icons/layers.svg" width="70"> <div class="pad20-rl"> <div class="t-bold t-gray800 mar10-b">Nunc</div> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> </div> <div class="w31 w100-tablet flex flex-ai-start mar20-tb"> <img src="<?= UPLOADS_URL ?>froala/icons/life-buoy.svg" width="70"> <div class="pad20-rl"> <div class="t-bold t-gray800 mar10-b">Nunc</div> <div>Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div> </div> </div> </div> </div> </div>