uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
663 lines (424 loc) • 27.2 kB
HTML
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
<meta charset="@@{website_charset}" />
<title>Sample Page 2 - @@{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">
<!-- Parallax
====================================================== -->
<section>
<div class="uix-parallax uix-height--70" data-fully-visible="false" data-offset-top="0" data-overlay-bg="false" data-skew="0" data-speed="0.4">
<img class="uix-parallax__img" src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">
<div class="uix-v-align--absolute uix-t-c uix-typo--color-white">
<h2>Uix Kit Released!</h2>
<p class="uix-typo--h5 uix-typo--style-normal">Make over <span class="uix-typo--h4 uix-typo--style-underline uix-typo--style-bold" data-counter-number="100" data-counter-double-digits="true" data-counter-dilimiter="true" data-counter-duration="100">00</span><span class="uix-typo--h4 uix-typo--style-underline uix-typo--style-bold">+</span> components to wear again and again!</p>
<a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary is-pill">Free Download</a>
</div>
</div>
</section>
<!-- Section
====================================================== -->
<section>
<div class="container">
<div class="uix-container__bg uix-container__bg--white uix-container__bg--shadow uix-container__bg--totop-small uix-container__bg--rounded-medium uix-t-c">
<div class="row js-uix-common-height uix-typo--color-white">
<div class="col-lg-4 col-md-4 uix-relative" style="background-color: rgb(222, 14, 14);">
<div style="padding: 2rem;">
<h3 class="uix-typo--style-uppercase" style="font-weight: 600;">Why choose Us</h3>
<p>Transform, agency working families thinkers who make change happen communities.</p>
<a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a>
</div>
<i class="fa fa-bullhorn" aria-hidden="true" style="font-size: 10rem; opacity: .2;
position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i>
</div>
<div class="col-lg-4 col-md-4 uix-relative" style="background-color: rgb(214, 12, 12);">
<div style="padding: 2rem;">
<h3 class="uix-typo--style-uppercase" style="font-weight: 600;">Our Mission</h3>
<p>Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
<a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a>
</div>
<i class="fa fa-cogs" aria-hidden="true" style="font-size: 10rem; opacity: .2;
position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i>
</div>
<div class="col-lg-4 col-md-4 uix-relative" style="background-color: rgb(202, 1, 2);">
<div style="padding: 2rem;">
<h3 class="uix-typo--style-uppercase" style="font-weight: 600;">What you get</h3>
<p>Sustainability involvement fundraising campaign connect carbon rights, collaborative cities convener truth.</p>
<a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a>
</div>
<i class="fa fa-flask" aria-hidden="true" style="font-size: 10rem; opacity: .2;
position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i>
</div>
</div>
<!-- .row end -->
</div>
<!-- .uix-container__bg end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container uix-t-c">
<div class="row uix-el--transparent" data-uix-anim='{"viewport":"100%","from":{"opacity":0,"y":150},"to":{"opacity":1,"y":0},"ease":"Power2.easeOut","duration":0.4,"delay":0,"infinite":false}'>
<div class="col-12">
<div class="uix-testimonials">
<div role="slider" class="uix-flexslider"
data-draggable="true"
data-my-nav-thumbs="false"
data-my-prev-next-thumbs="false"
data-my-nav-timeline="false"
data-my-controls=".uix-testimonials__controls"
data-my-multiple-items="false"
data-my-multiple-items-move="1"
data-my-count-total="false"
data-my-count-now="false"
data-my-parallax="false"
data-my-sync="false"
data-wheel="true"
data-speed="600"
data-timing="10000"
data-loop="true"
data-paging="true"
data-arrows="false"
data-animation="slide"
data-auto="true"
data-prev="<i class='fa fa-chevron-left'></i>"
data-next="<i class='fa fa-chevron-right'></i>">
<div class="uix-flexslider__inner">
<div class="uix-flexslider__item">
<div class="uix-testimonials__content">
<p>Enter some details for the customer giving this testimonial., E.g., Thank you from the bottom of our hearts.</p>
<div class="uix-testimonials__signature">
<span class="uix-testimonials__signature--avatar uix-border--circle uix-border--circle-only-img"><img src="assets/images/demo/avatar.jpg"</span>
<strong class="uix-testimonials__signature__shorttext">Name</strong> - Position
</div>
</div>
</div>
<div class="uix-flexslider__item">
<div class="uix-testimonials__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duarum enim vitarum nobis erunt instituta capienda. Tamen aberramus a proposito, et, ne longius, prorsus, inquam, Piso, si ista mala sunt, placet. Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Ut proverbia non nulla veriora sint quam vestra dogmata. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Duo Reges: constructio interrete. Obsecro, inquit, Torquate, haec dicit Epicurus? Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur.</p>
<div class="uix-testimonials__signature">
<span class="uix-testimonials__signature--avatar uix-border--circle uix-border--circle-only-img"><img src="assets/images/demo/avatar.jpg"</span>
<strong class="uix-testimonials__signature__shorttext">Name</strong> - Position
</div>
</div>
</div>
<div class="uix-flexslider__item">
<div class="uix-testimonials__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duarum enim vitarum nobis erunt instituta capienda. Tamen aberramus a proposito, et, ne longius, prorsus, inquam, Piso, si ista mala sunt, placet. Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Ut proverbia non nulla veriora sint quam vestra dogmata. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Duo Reges: constructio interrete. Obsecro, inquit, Torquate, haec dicit Epicurus? Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur.</p>
<div class="uix-testimonials__signature">
<span class="uix-testimonials__signature--no-avatar"></span>
<strong class="uix-testimonials__signature__shorttext">Name</strong> - Position
</div>
</div>
</div>
</div>
<!-- .uix-flexslider__inner end -->
</div>
<!-- .uix-flexslider end -->
</div>
<!-- /.uix-testimonials -->
<div class="uix-flexslider__mycontrols uix-testimonials__controls">
<div class="uix-flexslider__mycontrols__control-paging"></div>
</div>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Section Title
====================================================== -->
<section>
<div class="container uix-t-c">
<div class="row uix-el--transparent" data-uix-anim='{"viewport":"100%","from":{"opacity":0,"y":150},"to":{"opacity":1,"y":0},"ease":"Power2.easeOut","duration":0.4,"delay":0,"infinite":false}'>
<div class="col-12">
<h2 class="uix-heading--underline"><span>Latest Posts</span></h2>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row uix-el--transparent" data-uix-anim='{"viewport":"100%","from":{"opacity":0,"y":150},"to":{"opacity":1,"y":0},"ease":"Power2.easeOut","duration":0.4,"delay":0,"infinite":false}'>
<div class="col-12">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery uix-card--gallery--overlay" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/test-img-big-1.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span class="uix-typo--color-white" style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h4 class="uix-spacing--no">Full-stack Designer</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery uix-card--gallery--overlay" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/test-img-big-2.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span class="uix-typo--color-white" style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h4 class="uix-spacing--no">Full-stack Designer</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Section Title
====================================================== -->
<section>
<div class="container uix-t-c">
<div class="row uix-el--transparent" data-uix-anim='{"viewport":"100%","from":{"opacity":0,"y":150},"to":{"opacity":1,"y":0},"ease":"Power2.easeOut","duration":0.4,"delay":0,"infinite":false}'>
<div class="col-12">
<h2 class="uix-heading--underline"><span>Portfolio</span></h2>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<div class="uix-spacing--s uix-spacing--no-top">
<div class="container">
<div class="row uix-el--transparent" data-uix-anim='{"viewport":"100%","from":{"opacity":0,"y":150},"to":{"opacity":1,"y":0},"ease":"Power2.easeOut","duration":0.4,"delay":0,"infinite":false}'>
<div class="col-12">
<div class="uix-nav uix-nav--separation uix-t-c" id="js-uix-navfilter-1">
<ul>
<li class="current-cat"><a data-group="all" href="#">All</a></li>
<li><a data-group="web-design" href="#">Web Design</a></li>
<li><a data-group="ui" href="#">UI</a></li>
<li><a data-group="seo" href="#">SEO</a></li>
</ul>
</div>
<div class="uix-spacing--s uix-spacing--no-bottom">
<div class="uix-gallery" data-show-type="filter" data-filter-id="#js-uix-navfilter-1">
<div class="uix-gallery__tiles">
<!-- Item -->
<article class="uix-core-grid__col-4 uix-gallery__item" data-groups='["web-design","seo"]'>
<div>
<a href="#" class="uix-gallery__image" >
<div class="uix-gallery__image-cover">
<img src="assets/images/demo/test-img-big-1.jpg" alt="" />
</div>
</a>
<h3>
<a href="#">Project Title Here</a>
<span class="uix-gallery__title">Beautiful WordPress Theme</span>
</h3>
</div>
</article>
<!-- .uix-gallery__item end -->
<!-- Item -->
<article class="uix-core-grid__col-4 uix-gallery__item" data-groups='["web-design"]'>
<div>
<a href="#" class="uix-gallery__image" >
<div class="uix-gallery__image-cover">
<img src="assets/images/demo/test-img-big-2.jpg" alt="" />
</div>
</a>
<h3>
<a href="#">Project Title Here</a>
<span class="uix-gallery__title">Beautiful WordPress Theme</span>
</h3>
</div>
</article>
<!-- .uix-gallery__item end -->
<!-- Item -->
<article class="uix-core-grid__col-4 uix-gallery__item" data-groups='["web-design"]'>
<div>
<a href="#" class="uix-gallery__image" >
<div class="uix-gallery__image-cover">
<img src="assets/images/demo/test-img-big-3.jpg" alt="" />
</div>
</a>
<h3>
<a href="#">Project Title Here</a>
<span class="uix-gallery__title">Beautiful WordPress Theme</span>
</h3>
</div>
</article>
<!-- .uix-gallery__item end -->
<!-- Item -->
<article class="uix-core-grid__col-4 uix-gallery__item" data-groups='["seo"]'>
<div>
<a href="#" class="uix-gallery__image" >
<div class="uix-gallery__image-cover">
<img src="assets/images/demo/test-img-big-4.jpg" alt="" />
</div>
</a>
<h3>
<a href="#">Project Title Here</a>
<span class="uix-gallery__title">Commerce Theme</span>
</h3>
</div>
</article>
<!-- .uix-gallery__item end -->
<!-- Item -->
<article class="uix-core-grid__col-4 uix-gallery__item" data-groups='["ui"]'>
<div>
<a href="#" class="uix-gallery__image" >
<div class="uix-gallery__image-cover">
<img src="assets/images/demo/test-img-big-5.jpg" alt="" />
</div>
</a>
<h3>
<a href="#">Project Title Here</a>
<span class="uix-gallery__title">Simple WordPress Theme</span>
</h3>
</div>
</article>
<!-- .uix-gallery__item end -->
<!-- Item -->
<article class="uix-core-grid__col-4 uix-gallery__item" data-groups='["web-design"]'>
<div>
<a href="#" class="uix-gallery__image" >
<div class="uix-gallery__image-cover">
<img src="assets/images/demo/test-img-big-2.jpg" alt="" />
</div>
</a>
<h3>
<a href="#">Project Title Here</a>
<span class="uix-gallery__title">Beautiful WordPress Theme</span>
</h3>
</div>
</article>
<!-- .uix-gallery__item end -->
</div>
<!-- .uix-gallery__tiles end -->
</div>
<!-- .uix-gallery end -->
</div>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</div>
</main>
<!-- Footer Demo
====================================================== -->
<footer class="uix-special-footer__container is-transparent">
<div class="uix-special-footer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 uix-t-c--md">
<img class="logo" src="assets/images/logo-colorful.png" alt="">
</div>
<div class="col-lg-6 col-md-6">
<div class="uix-special-footer__menus uix-special-footer__menus--mobile-nowrap">
<div class="uix-special-footer__menus__list">
<h3>About</h3>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Diversity & Belonging</a></li>
</ul>
</div>
<div class="uix-special-footer__menus__list">
<h3>Discover</h3>
<ul>
<li><a href="#">Trust & Safety</a></li>
<li><a href="#">Travel Credit</a></li>
<li><a href="#">Gift Cards</a></li>
<li><a href="#">Airbnb Citizen</a></li>
<li><a href="#">Business Travel</a></li>
<li><a href="#">Guidebooks</a></li>
<li><a href="#">Airbnbmag</a></li>
</ul>
</div>
<div class="uix-special-footer__menus__list">
<h3>Works</h3>
<ul>
<li><a href="#">Why Host</a></li>
<li><a href="#">Hospitality</a></li>
<li><a href="#">Responsible Hosting</a></li>
<li><a href="#">Community Center</a></li>
</ul>
</div>
</div><!-- /.uix-special-footer__menus -->
</div>
<div class="col-lg-3 col-md-3 uix-t-r">
<div class="uix-tooltip">
<span data-microtip-position="top" data-microtip-size="medium" role="tooltip">
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin is-fill-white" href="javascript:">
<i class="fa fa-qrcode"></i>
</a>
</span>
<div class="uix-t-c"><img src="assets/images/demo/qr-code.png" alt="" width="150" height="150" /></div>
</div>
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin is-fill-white" title="Follow us on Twitter" href="https://twitter.com/uiux_lab" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin is-fill-white" title="Follow us on Facebook" href="https://www.facebook.com/uiuxlabhome" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin is-fill-white" title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank">
<i class="fa fa-github"></i>
</a>
</div>
</div>
</div><!-- .container end -->
</div>
</footer>
</div>
<!-- .uix-wrapper end -->
@@include('./src/components/_global/include-footer.html')