uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
847 lines (519 loc) • 27.2 kB
HTML
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
<meta charset="@@{website_charset}" />
<title>Features - @@{website_title}</title>
@@include('./src/components/_global/include-header.html')
</head>
<body class="page">
@@include('./src/components/_global/include-loader.html')
@@include('./src/components/_global/include-toggle-trigger.html')
<div class="uix-wrapper">
<!-- Header Area
============================================= -->
<header class="uix-header__container">
<div class="uix-header">
<div class="container">
@@include('./src/components/_global/include-brand.html')
@@include('./src/components/_global/include-menu.html')
</div>
<!-- .container end -->
<div class="uix-clearfix"></div>
</div>
</header>
<div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
<main id="uix-maincontent">
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Features 1</h3>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="uix-feature">
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side"><i class="fa fa-binoculars"></i></span>Creative WordPress Theme</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side"><i class="fa fa-adjust"></i></span>Premium Templates</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>DThe first approach uses Bootstraps own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side is-bordered"><i class="fa fa-flask"></i></span>Search Engine Optimization</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Aenean congue molestie sapien, nec convallis lectus interdum ut. Vestibulum facilisis, sem eu lobortis pulvinar, dui dui ornare erat, nec porta nunc quam a metus. Fusce eget consequat purus. Sed magna odio, rhoncus eget diam fermentum, mattis porttitor dolor. </p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side is-bordered"><i class="fa fa-anchor"></i></span>Interactive Creative</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side is-bordered uix-border--circle"><i class="fa fa-cube"></i></span>Multiple layouts</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side is-bordered uix-border--circle"><i class="fa fa-paper-plane-o"></i></span>Freebies</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Nam et vestibulum odio. Aliquam auctor ac velit sit amet pretium. Maecenas pulvinar egestas rutrum. Nam et elit faucibus nunc euismod fringilla eu iaculis mi. </p>
</div>
</div>
</div>
<!-- Item end -->
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
</div>
<!-- /.uix-feature -->
</div>
<!-- .col-12 end -->
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Features 2</h3>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="uix-feature">
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-6">
<div>
<span class="uix-feature__icon--side uix-feature__icon--side--sep-col"><i class="fa fa-binoculars"></i></span>
<div class="uix-feature__desc uix-feature__desc--sep-col-side">
<h3 class="uix-feature__title">Creative WordPress Theme</h3>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<span class="uix-feature__icon--side uix-feature__icon--side--sep-col"><i class="fa fa-adjust"></i></span>
<div class="uix-feature__desc uix-feature__desc--sep-col-side">
<h3 class="uix-feature__title">Premium Templates</h3>
<p>DThe first approach uses Bootstraps own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<span class="uix-feature__icon--side uix-feature__icon--side--sep-col is-bordered"><i class="fa fa-flask"></i></span>
<div class="uix-feature__desc uix-feature__desc--sep-col-side">
<h3 class="uix-feature__title">Search Engine Optimization</h3>
<p>Aenean congue molestie sapien, nec convallis lectus interdum ut. Vestibulum facilisis, sem eu lobortis pulvinar, dui dui ornare erat, nec porta nunc quam a metus. Fusce eget consequat purus. Sed magna odio, rhoncus eget diam fermentum, mattis porttitor dolor. </p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<span class="uix-feature__icon--side uix-feature__icon--side--sep-col is-bordered"><i class="fa fa-anchor"></i></span>
<div class="uix-feature__desc uix-feature__desc--sep-col-side">
<h3 class="uix-feature__title">Interactive Creative</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<span class="uix-feature__icon--side uix-feature__icon--side--sep-col is-bordered uix-border--rounded"><i class="fa fa-cube"></i></span>
<div class="uix-feature__desc uix-feature__desc--sep-col-side">
<h3 class="uix-feature__title">Multiple layouts</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<span class="uix-feature__icon--side uix-feature__icon--side--sep-col is-bordered uix-border--rounded"><i class="fa fa-paper-plane-o"></i></span>
<div class="uix-feature__desc uix-feature__desc--sep-col-side">
<h3 class="uix-feature__title">Freebies</h3>
<p>Nam et vestibulum odio. Aliquam auctor ac velit sit amet pretium. Maecenas pulvinar egestas rutrum. Nam et elit faucibus nunc euismod fringilla eu iaculis mi. </p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<span class="uix-feature__icon--side uix-feature__icon--side--sep-col is-bordered uix-border--circle"><i class="fa fa-anchor"></i></span>
<div class="uix-feature__desc uix-feature__desc--sep-col-side">
<h3 class="uix-feature__title">Interactive Creative</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<span class="uix-feature__icon--side uix-feature__icon--side--sep-col is-bordered uix-border--circle"><i class="fa fa-cube"></i></span>
<div class="uix-feature__desc uix-feature__desc--sep-col-side">
<h3 class="uix-feature__title">Multiple layouts</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>
<!-- Item end -->
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
</div>
<!-- /.uix-feature -->
</div>
<!-- .col-12 end -->
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Features 3</h3>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="uix-feature uix-t-c">
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-4">
<div>
<p class="uix-feature__icon"><i class="fa fa-binoculars"></i></p>
<h3 class="uix-feature__title">Creative WordPress Theme</h3>
<div class="uix-feature__desc ">
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-4">
<div>
<p class="uix-feature__icon"><i class="fa fa-anchor"></i></p>
<h3 class="uix-feature__title">Interactive Creative</h3>
<div class="uix-feature__desc ">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-4">
<div>
<p class="uix-feature__icon"><i class="fa fa-adjust"></i></p>
<h3 class="uix-feature__title">Premium Templates</h3>
<div class="uix-feature__desc ">
<p>DThe first approach uses Bootstraps own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-4">
<div>
<p class="uix-feature__icon is-bordered"><i class="fa fa-cubes"></i></p>
<h3 class="uix-feature__title">Multiple layouts</h3>
<div class="uix-feature__desc ">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-4">
<div>
<p class="uix-feature__icon is-bordered"><i class="fa fa-coffee"></i></p>
<h3 class="uix-feature__title">Search Engine Optimization</h3>
<div class="uix-feature__desc ">
<p>Aenean congue molestie sapien, nec convallis lectus interdum ut. Vestibulum facilisis, sem eu lobortis pulvinar, dui dui ornare erat, nec porta nunc quam a metus. Fusce eget consequat purus. Sed magna odio, rhoncus eget diam fermentum, mattis porttitor dolor.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-4">
<div>
<p class="uix-feature__icon is-bordered"><i class="fa fa-cloud-download"></i></p>
<h3 class="uix-feature__title">Freebies</h3>
<div class="uix-feature__desc ">
<p>Nam et vestibulum odio. Aliquam auctor ac velit sit amet pretium. Maecenas pulvinar egestas rutrum. Nam et elit faucibus nunc euismod fringilla eu iaculis mi.
<br>Vitiosum est enim in dividendo partem in genere numerare. Paulum, cum regem Persem captum adduceret, eodem flumine invectio</p>
</div>
</div>
</div>
<!-- Item end -->
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
</div>
<!-- /.uix-feature -->
</div>
<!-- .col-12 end -->
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Features 4</h3>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="uix-parallax uix-height--100 uix-typo--color-white" data-fully-visible="false" data-offset-top="0" data-overlay-bg="rgba(0,0,0,.2)" data-skew="0" data-speed="0.1">
<img class="uix-parallax__img" src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">
<div class="uix-v-align--absolute">
<div class="container">
<div class="row">
<div class="col-12">
<div class="uix-feature">
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side"><i class="fa fa-binoculars"></i></span>Creative WordPress Theme</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side"><i class="fa fa-adjust"></i></span>Premium Templates</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>DThe first approach uses Bootstraps own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side is-bordered"><i class="fa fa-flask"></i></span>Search Engine Optimization</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Aenean congue molestie sapien, nec convallis lectus interdum ut. Vestibulum facilisis, sem eu lobortis pulvinar, dui dui ornare erat, nec porta nunc quam a metus. Fusce eget consequat purus. Sed magna odio, rhoncus eget diam fermentum, mattis porttitor dolor. </p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side is-bordered"><i class="fa fa-anchor"></i></span>Interactive Creative</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side is-bordered uix-border--circle"><i class="fa fa-cube"></i></span>Multiple layouts</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-core-grid__col-6">
<div>
<h3 class="uix-feature__title"><span class="uix-feature__icon--side is-bordered uix-border--circle"><i class="fa fa-paper-plane-o"></i></span>Freebies</h3>
<div class="uix-feature__desc uix-feature__desc--sep-col">
<p>Nam et vestibulum odio. Aliquam auctor ac velit sit amet pretium. Maecenas pulvinar egestas rutrum. Nam et elit faucibus nunc euismod fringilla eu iaculis mi. </p>
</div>
</div>
</div>
<!-- Item end -->
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
</div>
<!-- /.uix-feature -->
</div>
<!-- .col-12 end -->
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</div>
</div>
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Features 5 ( with Dividing Line )</h3>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="uix-feature uix-feature--line uix-t-c">
<div class="uix-feature--line__box">
<div>
<p class="uix-feature__icon"><i class="fa fa-binoculars"></i></p>
<h3 class="uix-feature__title">Creative WordPress Theme</h3>
<div class="uix-feature__desc ">
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-feature--line__box">
<div>
<p class="uix-feature__icon"><i class="fa fa-anchor"></i></p>
<h3 class="uix-feature__title">Interactive Creative</h3>
<div class="uix-feature__desc ">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-feature--line__box">
<div>
<p class="uix-feature__icon"><i class="fa fa-adjust"></i></p>
<h3 class="uix-feature__title">Premium Templates</h3>
<div class="uix-feature__desc ">
<p>DThe first approach uses Bootstraps own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-feature--line__box">
<div>
<p class="uix-feature__icon is-bordered"><i class="fa fa-cubes"></i></p>
<h3 class="uix-feature__title">Multiple layouts</h3>
<div class="uix-feature__desc ">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-feature--line__box">
<div>
<p class="uix-feature__icon is-bordered"><i class="fa fa-coffee"></i></p>
<h3 class="uix-feature__title">Search Engine Optimization</h3>
<div class="uix-feature__desc ">
<p>Aenean congue molestie sapien, nec convallis lectus interdum ut. Vestibulum facilisis, sem eu lobortis pulvinar, dui dui ornare erat, nec porta nunc quam a metus. Fusce eget consequat purus. Sed magna odio, rhoncus eget diam fermentum, mattis porttitor dolor.</p>
</div>
</div>
</div>
<!-- Item end -->
<div class="uix-feature--line__box">
<div>
<p class="uix-feature__icon is-bordered"><i class="fa fa-cloud-download"></i></p>
<h3 class="uix-feature__title">Freebies</h3>
<div class="uix-feature__desc ">
<p>Nam et vestibulum odio. Aliquam auctor ac velit sit amet pretium. Maecenas pulvinar egestas rutrum. Nam et elit faucibus nunc euismod fringilla eu iaculis mi.
<br>Vitiosum est enim in dividendo partem in genere numerare. Paulum, cum regem Persem captum adduceret, eodem flumine invectio</p>
</div>
</div>
</div>
<!-- Item end -->
</div>
<!-- /.uix-feature.uix-feature--line -->
</div>
<!-- .col-12 end -->
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
</main>
@@include('./src/components/_global/include-copyright.html')
</div>
<!-- .uix-wrapper end -->
@@include('./src/components/_global/include-footer.html')