uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Team Grid - @@{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"> <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> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Team Gird ( Hover Overlay Effects )</h3> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container uix-t-c"> <div class="row"> <div class="col-12"> <div class="uix-team--grid"> <div class="uix-core-grid"> <div class="uix-core-grid__row uix-core-grid__row--loop"> <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-1.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Marrie Doi</h3> <h4>Co-founder<br>Operations</h4> <div class="uix-team--grid__detail uix-team--grid__detail--toggle"> <div class="uix-v-align--table"> <div> <h3>Marrie Doi</h3> <h4>Co-founder/ Operations</h4> <hr> Co-founder and Software VP of iRiding , been in the healthcare IT industry for 11 years, has accumulated a wealth of experience in healthcare project development and played the leading role in building and implementing EMR and IT frameworks for many hospitals. Being an Internet entrepreneur for six years, contributed to the design and planning of numerous projects, including IOT and smart sharing platform,the development of IOT system and App related to smart hardware. </div> </div> </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-2.jpg" alt=""> <ul class="uix-t-c"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> <h3>Christopher Di</h3> <h4>Co-founder/ Projects</h4> <div class="uix-team--grid__detail uix-team--grid__detail--toggle"> <div class="uix-v-align--table"> <div> <h3>Christopher Di</h3> <h4>Co-founder/ Projects</h4> <hr> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-3.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Heather H</h3> <h4>Co-founder/ Marketing</h4> <div class="uix-team--grid__detail uix-team--grid__detail--toggle"> <div class="uix-v-align--table"> <div> <h3>Heather H</h3> <h4>Co-founder/ Marketing</h4> <hr> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-1.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Nancy Doe</h3> <h4>Designer</h4> <div class="uix-team--grid__detail uix-team--grid__detail--toggle"> <div class="uix-v-align--table"> <div> <h3>Nancy Doe</h3> <h4>Designer</h4> <hr> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-2.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Stella John</h3> <h4>Web Developer</h4> <div class="uix-team--grid__detail uix-team--grid__detail--toggle"> <div class="uix-v-align--table"> <div> <h3>Stella John</h3> <h4>Web Developer</h4> <hr> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-3.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Cherry John</h3> <h4>Fullstack Developer</h4> <div class="uix-team--grid__detail uix-team--grid__detail--toggle"> <div class="uix-v-align--table"> <div> <h3>Cherry John</h3> <h4>Fullstack Developer</h4> <hr> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div> </div> </div>  </div>  </div>  </div>  </div> </div>  </div>  </section>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>Team Gird ( Normal )</h3> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container uix-t-c"> <div class="row"> <div class="col-12"> <div class="uix-team--grid"> <div class="uix-core-grid"> <div class="uix-core-grid__row uix-core-grid__row--loop"> <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-1.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Marrie Doi</h3> <h4>Co-founder<br>Operations</h4> <div class="uix-team--grid__detail"> Co-founder and Software VP of iRiding , been in the healthcare IT industry for 11 years, has accumulated a wealth of experience in healthcare project development and played the leading </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-2.jpg" alt=""> <ul class="uix-t-c"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> <h3>Christopher Di</h3> <h4>Co-founder/ Projects</h4> <div class="uix-team--grid__detail"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-3.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Heather H</h3> <h4>Co-founder/ Marketing</h4> <div class="uix-team--grid__detail"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--circle"> <img src="assets/images/demo/avatar-r-1.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Nancy Doe</h3> <h4>Designer</h4> <div class="uix-team--grid__detail"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div>  </div>  </div>  </div>  </div> </div>  </div>  </section>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>Team Gird ( Rounded Avatar )</h3> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container uix-t-c"> <div class="row"> <div class="col-12"> <div class="uix-team--grid"> <div class="uix-core-grid"> <div class="uix-core-grid__row uix-core-grid__row--loop"> <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--rounded"> <img src="assets/images/demo/avatar-r-1.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Marrie Doi</h3> <h4>Co-founder<br>Operations</h4> <div class="uix-team--grid__detail"> Co-founder and Software VP of iRiding , been in the healthcare IT industry for 11 years, has accumulated a wealth of experience in healthcare project development and played the leading </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--rounded uix-border--rounded-img"> <img src="assets/images/demo/avatar-r-2.jpg" alt=""> <ul class="uix-t-c"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> <h3>Christopher Di</h3> <h4>Co-founder/ Projects</h4> <div class="uix-team--grid__detail"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--rounded uix-border--rounded-img"> <img src="assets/images/demo/avatar-r-3.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Heather H</h3> <h4>Co-founder/ Marketing</h4> <div class="uix-team--grid__detail"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div>  <div class="uix-core-grid__col-3 uix-core-grid__col-6--md"> <div class="uix-team--grid__item"> <div class="uix-team--grid__img uix-border--rounded uix-border--rounded-img"> <img src="assets/images/demo/avatar-r-1.jpg" alt=""> <ul class="uix-t-c"> <a href="#"> <li><i class="fa fa-facebook"></i></li> </a> <a href="#"> <li><i class="fa fa-twitter"></i></li> </a> <a href="#"> <li><i class="fa fa-linkedin"></i></li> </a> </ul> </div> <h3>Nancy Doe</h3> <h4>Designer</h4> <div class="uix-team--grid__detail"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div>  </div>  </div>  </div>  </div> </div>  </div>  </section> </main> @@include('./src/components/_global/include-copyright.html') </div>  @@include('./src/components/_global/include-footer.html')