uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Sample Page 1 - @@{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 class="uix-header__container uix-header__container--overlay"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <main id="uix-maincontent">  <div role="banner" class="uix-advanced-slider-sp__wrapper"> <div class="uix-advanced-slider__outline uix-advanced-slider-sp uix-advanced-slider-sp--eff-parallax" data-draggable="false" data-draggable-cursor="move" data-auto="true" data-loop="true" data-speed="800" data-timing="5000" data-count-total="false" data-count-now="false" data-filter-texture="false" data-controls-pagination=".my-a-slider-pagination-2" data-controls-arrows="false"> <div class="uix-advanced-slider-sp__inner"> <div class="uix-advanced-slider-sp__item"> <img src="assets/images/demo/slide-1.jpg" alt="Title 1" /> <div class="uix-advanced-slider-sp__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h2 data-text-eff="letters-eff-flyInOut1" data-text-eff-speed="800">Beautiful Free & Premium Responsive WordPress Themes</h2> <p data-text-eff="letters-eff-flyInOut1-2" data-text-eff-speed="500">Uix Responsive Web UI Frameworks</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Link To</a> </div> </div> </div> <div class="uix-advanced-slider-sp__item"> <img src="assets/images/demo/slide-2.jpg" alt="Title 1" /> <div class="uix-advanced-slider-sp__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h2 data-text-eff="letters-eff-flyInOut2" data-text-eff-speed="800">Hello World</h2> <p data-text-eff="letters-eff-flyInOut2-2" data-text-eff-speed="500">UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Link To</a> </div> </div> </div> <div class="uix-advanced-slider-sp__item"> <img src="assets/images/demo/slide-3.jpg" alt="Title 1" /> <div class="uix-advanced-slider-sp__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h2 data-text-eff="letters-eff-flyInOut3" data-text-eff-speed="800">Title 3</h2> <p data-text-eff="letters-eff-flyInOut3-2" data-text-eff-speed="500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div>  </div>  </div>  <div class="uix-advanced-slider-sp__pagination my-a-slider-pagination-2"></div>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12 col-lg-4 col-sm-12"> <div class="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}' > <h3 class="uix-t-l uix-t-c--md">My Story</h3> <p class="uix-t-l uix-t-c--md"> UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends! <br> An underlying front-end system that makes it easy to extend and modify core files. This spec is a living document that will be updated as we continue to develop the tenets and specifics of Uix Kit. Support JS and CSS component( SCSS ) development with Gulp & Webpack together. </p> <p class="uix-t-l uix-t-c--md"> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary uix-btn__icon uix-btn__icon--left"><span><i class="fa fa-cogs" aria-hidden="true"></i></span>Free Download</a> </p> </div> </div>  <div class="col-12 col-lg-4 col-sm-6"> <div class="uix-el--transparent uix-border--rounded uix-border--rounded-img" data-uix-anim='{"viewport":"100%","from":{"opacity":0,"y":150},"to":{"opacity":1,"y":0},"ease":"Power2.easeOut","duration":0.4,"delay":0.2,"infinite":false}' > <img src="assets/images/demo/avatar-r-3.jpg" alt=""> </div> </div>  <div class="col-12 col-lg-4 col-sm-6"> <div class="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.4,"infinite":false}' > <p> <h3>Personal Information</h3> <dl class="uix-list-abreast uix-list-abreast--icon"> <dt><i class="fa fa-location-arrow" aria-hidden="true"></i></dt> <dd> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <p>Eet lacinia odio sem nec elit.</p> </dd> </dl> <dl class="uix-list-abreast uix-list-abreast--icon"> <dt><i class="fa fa-envelope" aria-hidden="true"></i></dt> <dd> <p>your@gmail.com </p> </dd> </dl> <dl class="uix-list-abreast uix-list-abreast--icon"> <dt><i class="fa fa-phone" aria-hidden="true"></i></dt> <dd> <p>(1234) 12345678</p> </dd> </dl> <dl class="uix-list-abreast uix-list-abreast--icon"> <dt><i class="fa fa-fax" aria-hidden="true"></i></dt> <dd> <p>(1234) 12345678</p> </dd> </dl> </p> <hr> <p> <a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin" 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" 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" title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank"> <i class="fa fa-github"></i> </a> </p> </div> </div>  </div>  </div>  </section>  <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>Skills</h2> <p>Ability to use skills for commercial projects</p> </div> </div>  </div>  </section>  <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="row"> <div class="col-lg-3 col-6"> <div class="uix-progressbar--circle uix-progressbar--progress-0 is-transparent" data-progressbar-percent="100" data-progressbar-unit="%"> <span class="uix-progressbar__track"> <span>0<em class="uix-progressbar__unit">%</em></span> </span> <div class="uix-progressbar__pie"> <div class="uix-progressbar__pie--left-side uix-progressbar__pie--half-circle"></div> <div class="uix-progressbar__pie--right-side uix-progressbar__pie--half-circle"></div> </div> <div class="uix-progressbar__title">Front-end Kit</div> </div> </div> <div class="col-lg-3 col-6"> <div class="uix-progressbar--circle uix-progressbar--progress-0 is-transparent" data-progressbar-percent="55" data-progressbar-unit="%"> <span class="uix-progressbar__track"> <span>0<em class="uix-progressbar__unit">%</em></span> </span> <div class="uix-progressbar__pie"> <div class="uix-progressbar__pie--left-side uix-progressbar__pie--half-circle"></div> <div class="uix-progressbar__pie--right-side uix-progressbar__pie--half-circle"></div> </div> <div class="uix-progressbar__title"></div> </div> <p>Web Design Faster</p> </div> <div class="col-lg-3 col-6"> <div class="uix-progressbar--circle uix-progressbar--progress-0 is-transparent" data-progressbar-percent="18" data-progressbar-unit="%"> <span class="uix-progressbar__track"> <span>0<em class="uix-progressbar__unit">%</em></span> </span> <div class="uix-progressbar__pie"> <div class="uix-progressbar__pie--left-side uix-progressbar__pie--half-circle"></div> <div class="uix-progressbar__pie--right-side uix-progressbar__pie--half-circle"></div> </div> <div class="uix-progressbar__title"></div> </div> <p>100% Responsive Design</p> </div> <div class="col-lg-3 col-6"> <div class="uix-progressbar--circle uix-progressbar--progress-0 is-transparent" data-progressbar-percent="99" data-progressbar-unit="%"> <span class="uix-progressbar__track"> <span>0<em class="uix-progressbar__unit">%</em></span> </span> <div class="uix-progressbar__pie"> <div class="uix-progressbar__pie--left-side uix-progressbar__pie--half-circle"></div> <div class="uix-progressbar__pie--right-side uix-progressbar__pie--half-circle"></div> </div> <div class="uix-progressbar__title"></div> </div> <p>Freedom Styles</p> </div> </div>  </div> </div>  </div>  </section>  <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>Services</h2> <p>What can I do for you?</p> </div> </div>  </div>  </section>  <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="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 is-bordered uix-border--circle"><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>  <div class="uix-core-grid__col-4"> <div> <p class="uix-feature__icon is-bordered uix-border--circle"><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>  <div class="uix-core-grid__col-4"> <div> <p class="uix-feature__icon is-bordered uix-border--circle"><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>  <div class="uix-core-grid__col-4"> <div> <p class="uix-feature__icon is-bordered uix-border--circle"><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>  <div class="uix-core-grid__col-4"> <div> <p class="uix-feature__icon is-bordered uix-border--circle"><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>  <div class="uix-core-grid__col-4"> <div> <p class="uix-feature__icon is-bordered uix-border--circle"><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>  </div>  </div>  </div>  </div> </div>  </div>  </section>  <section class="uix-spacing--s uix-spacing--no-top 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="uix-parallax uix-height--50 uix-typo--color-white" data-fully-visible="false" data-offset-top="0" data-overlay-bg="rgba(0,0,0,.6)" data-skew="0" data-speed="0.3"> <img class="uix-parallax__img" src="assets/images/demo/spiral-galaxy-1920x309.jpg" alt=""> <div class="uix-v-align--absolute uix-t-c"> <div class="row"> <div class="col-12"> <h2> Parallax Background <p class="uix-typo--h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si verbum sequimur. Summum a vobis bouix-price__num voluptas dicitur.</p> </h2> </div> </div>  </div> </div> </section>  <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>Pricing</h2> <p>Reasonable prices and great value services</p> </div> </div>  </div>  </section>  <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="uix-price"> <div class="row"> <div class="col-lg-4 col-md-4 uix-price__outline--hover" data-bcolor="#DD514C" data-tcolor="#CE3A3E"> <div class="js-uix-init-height"> <div class="uix-price__outline"> <div class="uix-price__level">free</div> <div class="uix-price__num"><span class="uix-price__currency">$</span><span class="uix-price__num--im">49</span><span class="uix-price__period">per month</span></div> <div class="uix-price__excerpt"> <p>Some description text here.</p> </div> <div class="uix-t-c"> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary is-pill">TRY FOR FREE</a> </div> <div class="uix-price__hr"></div> <div class="uix-price__detail"> <ul> <li>Feature Description</li> <li>Another Feature Description</li> <li>Invalid Feature Description</li> </ul> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 uix-price__outline--hover" data-bcolor="#DD514C" data-tcolor="#CE3A3E"> <div class="js-uix-init-height"> <div class="uix-price__outline is-active"> <div class="uix-price__level">premium</div> <div class="uix-price__num"><span class="uix-price__currency">$</span><span class="uix-price__num--im">69</span><span class="uix-price__period">per month</span></div> <div class="uix-price__excerpt"> <p>Some description text here.</p> </div> <div class="uix-t-c"> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary is-pill">BUY</a> </div> <div class="uix-price__hr"></div> <div class="uix-price__detail"> <ul> <li>Feature Description</li> <li>Another Feature Description</li> <li>Another Feature Description</li> <li>Invalid Feature Description</li> </ul> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 uix-price__outline--hover" data-bcolor="#DD514C" data-tcolor="#CE3A3E"> <div class="js-uix-init-height"> <div class="uix-price__outline"> <div class="uix-price__level">professional</div> <div class="uix-price__num"><span class="uix-price__currency">$</span><span class="uix-price__num--im">109</span><span class="uix-price__period">per month</span></div> <div class="uix-price__excerpt"> <p>Some description text here.</p> </div> <div class="uix-t-c"> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary is-pill">BUY</a> </div> <div class="uix-price__hr"></div> <div class="uix-price__detail"> <ul> <li>Feature Description</li> <li>Another Feature Description</li> <li>Another Feature Description</li> <li>Invalid Feature Description</li> <li>Another Feature Description</li> </ul> </div> </div> </div> </div> </div>  </div>  </div> </div>  </div>  </section> </main>  <footer class="uix-special-footer__container"> <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.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> </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> </div> </footer> </div>  @@include('./src/components/_global/include-footer.html')