Sections-features
sections-features1
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap">
<div class="h1 t-bold t-center">Far far away behind</div>
<div class="h2 t-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="mar50-t flex flex-wrap">
<div class="w50 w100-tablet">
<div class="h3 mar0-t">Call to action</div>
<div class="t-primary700 dark:t-primary200 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 bi-check" _href="">Download</a></div>
</div>
<div class="w40 w100-tablet pad30-t-tablet">
<img class="w100" alt="" src="https://placehold.co/450x250">
</div>
</div>
</div>
</div> sections-features2
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap">
<div class="h1 t-bold t-center">Far far away behind</div>
<div class="h2 t-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="mar50-t flex flex-wrap">
<div class="w40 w100-tablet pad30-t-tablet flex-order2-tablet">
<img class="w100" alt="" src="https://placehold.co/450x250">
</div>
<div class="w50 w100-tablet">
<div class="h3 mar0-t">Call to action</div>
<div class="t-primary700 dark:t-primary200 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 bi-check" _href="">Download</a></div>
</div>
</div>
</div>
</div> sections-features3
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap">
<div class="h1 t-bold t-primary700 dark:t-primary100">Lorem ipsum dolor sit amet</div>
<div class="t120 t-primary600 dark:t-primary200">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 flex flex-wrap-tablet">
<div class="w25 w100-tablet flex-order2-tablet mar30-b-tablet"><img class="w100" alt="" src="https://placehold.co/800x600"></div>
<div class="w50 w100-tablet mar30-b-tablet">
<div class="h3 mar0 t-primary500 dark:t-primary250">Lorem ipsum dolor sit amet</div>
<div class="t-primary400 dark:t-primary300">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 w100-tablet flex-order3-tablet">
<a class="button mar10-b w100 t-center bi-sun" _href="">Take a Tour</a>
<a class="button w100 t-center bi-moon" _href="">Start Now</a>
</div>
</div>
</div>
</div> sections-features4
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap t-center">
<div class="h1 t-bold">Call to Action</div>
<div class="b-center mar30-t t120 w400px-max">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </div>
<div class="mar20-t"><a class="button" _href="">Call to Action</a></div>
<div class="mar30-t flex flex-wrap">
<div class="w23 w48-tablet mar20-b">
<div><img class="center" alt="" src="https://placehold.co/100"></div>
<div class="h5 mar20-t">Feature One</div>
<div class="mar20-t">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 mar20-b">
<div><img class="center" alt="" src="https://placehold.co/100"></div>
<div class="h5 mar20-t">Feature One</div>
<div class="mar20-t">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 mar20-b">
<div><img class="center" alt="" src="https://placehold.co/100"></div>
<div class="h5 mar20-t">Feature One</div>
<div class="mar20-t">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 mar20-b">
<div><img class="center" alt="" src="https://placehold.co/100"></div>
<div class="h5 mar20-t">Feature One</div>
<div class="mar20-t">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div> sections-features5
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap">
<section class="flex flex-wrap">
<div class="w48 w100-tablet">
<div class="t-bold">Lorem Ipsum</div>
<div class="h2 mar10-t">Lorem Ipsum is simply dummy text of the printing </div>
<p class="mar10-t">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<div class="flex flex-wrap-tablet mar20-t">
<div class="w48 w100-tablet">
<p class="t-bold">Describe feature one</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="w48 w100-tablet">
<p class="t-bold">Describe feature two</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="mar20-tb">
<a class="button bi-check" _href="">Get started</a>
<a class="t-bold b-right icon-arrow-right" _href="">Learn more</a>
</div>
</div>
<div class="w48 w100-tablet">
<img src="https://placehold.co/800x600" alt="Placeholder image">
</div>
</section>
</div>
</div> sections-features6
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap">
<div class="flex flex-wrap gap20">
<div class="w3col w12col-tablet">
<div class="h5 t-bold">Feature</div>
<div class="mar20-t">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w3col w12col-tablet">
<div class="h5 t-bold">Feature</div>
<div class="mar20-t">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w3col w12col-tablet">
<div class="h5 t-bold">Feature</div>
<div class="mar20-t">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w3col w12col-tablet">
<div class="h5 t-bold">Feature</div>
<div class="mar20-t">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w3col w12col-tablet">
<div class="h5 t-bold">Feature</div>
<div class="mar20-t">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="w3col w12col-tablet">
<div class="h5 t-bold">Feature</div>
<div class="mar20-t">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div> sections-features7
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap">
<div class="grid-3col grid-1col-tablet column-gap50">
<div class="grid-area grid-area-tablet" style="--grid-area: 1 / 1;">
<div class="t-right t-left-tablet"><img src="https://placehold.co/100"></div>
<div class="t-right t-left-tablet t-bold t120 mar20-t">Lorem Ipsum</div>
<div class="mar10-t">Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div>
</div>
<div class="grid-area grid-area-tablet" style="--grid-area: 2 / 1;">
<div class="t-right t-left-tablet mar30-t"><img src="https://placehold.co/100"></div>
<div class="t-right t-left-tablet t-bold t120 mar20-t">Lorem Ipsum</div>
<div class="mar10-t">Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div>
</div>
<div class="grid-area grid-area-tablet" style="--grid-area: 3 / 1;">
<div class="t-right t-left-tablet mar30-t"><img src="https://placehold.co/100"></div>
<div class="t-right t-left-tablet t-bold t120 mar20-t">Lorem Ipsum</div>
<div class="mar10-t">Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div>
</div>
<div class="grid-area grid-area-tablet t-center mar30-t-tablet order-last-tablet" style="--grid-area: 1 / 2 / span 3;">
<img src="https://placehold.co/300x800/f8f8f8/777">
</div>
<div class="grid-area grid-area-tablet" style="--grid-area: 1 / 3;">
<div class=""><img src="https://placehold.co/100"></div>
<div class="t-bold t120 mar20-t">Lorem Ipsum</div>
<div class="mar10-t">Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div>
</div>
<div class="grid-area grid-area-tablet" style="--grid-area: 2 / 3;">
<div class="mar30-t"><img src="https://placehold.co/100"></div>
<div class="t-bold t120 mar20-t">Lorem Ipsum</div>
<div class="mar10-t">Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div>
</div>
<div class="grid-area grid-area-tablet" style="--grid-area: 3 / 3;">
<div class="mar30-t"><img src="https://placehold.co/100"></div>
<div class="t-bold t120 mar20-t">Lorem Ipsum</div>
<div class="mar10-t">Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div>
</div>
</div>
</div>
</div> sections-features8
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap">
<div class="mar50-t flex flex-wrap-tablet gap30">
<div class="w50 w100-tablet">
<div class="h1 t-bold">Cras malesuada</div>
<div class="h4 t-bold">Sed eu turpis. Curabitur id est. Cras malesuada. Vivamus vitae risus vitae lorem iaculis placerat. Nulla velit. Morbi blandit.</div>
<div class="t110">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>
<div class="w50 w100-tablet pad30-t-tablet">
<img class="w100" alt="" src="https://placehold.co/800x800">
</div>
</div>
</div>
</div>