@ussebastian/kitdigital

<!DOCTYPE html> <html> <head> <title>Kit Digital - Universidad San Sebastían</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="/css/theme.css" rel="stylesheet" type="text/css" /> <link href="/css/main.css" rel="stylesheet" type="text/css" /> </head> <body class=""> <div class="container my-80"> <section> <div data-uss-carousel="uss-carousel-cards" data-uss-title="Lectus magna fringilla urna" data-uss-visible-items="2" data-uss-draggable > <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> </div> <div data-uss-carousel="uss-carousel-cards" data-uss-title="Lectus magna fringilla urna" data-uss-visible-items="4" data-uss-draggable > <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <div class="uss-card__body"> <div class="uss-tooltip" data-uss-tooltip="1"> <h4>titulo</h4> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span> </div> <a href="#" class="uss-tag uss-tag--secondary mb-20" data-uss-tooltip-target="1"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> </div> <div data-uss-carousel="uss-carousel-cards" data-uss-title="Lectus magna fringilla urna" data-uss-visible-items="4" data-uss-draggable > <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <img lazy class="uss-card__img" src="https://dummyimage.com/640x16:9/" alt="dummyimage" /> <div class="uss-card__body"> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-16">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <img lazy class="uss-card__img" src="https://dummyimage.com/640x16:9/" alt="dummyimage" /> <div class="uss-card__body"> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-16">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <img lazy class="uss-card__img" src="https://dummyimage.com/640x16:9/" alt="dummyimage" /> <div class="uss-card__body"> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-16">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-carousel-cards__item-container"> <div class="uss-card"> <img lazy class="uss-card__img" src="https://dummyimage.com/640x16:9/" alt="dummyimage" /> <div class="uss-card__body"> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-16">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> <div class="uss-card"> <div class="uss-card__body"> <div class="uss-tooltip" data-uss-tooltip="1"> <h4>titulo</h4> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span> </div> <a href="#" class="uss-tag uss-tag--secondary mb-20" data-uss-tooltip-target="1"> Tag secundario </a> <div class="overline text-color--alt">Metadato introductorio</div> <div class="h5 mb-20">Titulo de la card</div> <p class="p-size--sm mb-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="uss-btn uss-btn--tertiary"> Botón terciario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> </div> </div> </div> </div> </section> </div> <footer class="uss-footer"> <div class="uss-footer-sublinks"> <div class="container py-128"> <div class="row gap-64"> <div class="col-md-3"> <aside class="uss-linked-list"> <h6 class="h6 mb-20">La uiversidad</h6> <ul class="uss-linked-list__items"> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Proyecto Educativo <i class="uss-icon ri-external-link-line"></i> </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Nuestra Institución </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> ¿Por qué la USS? </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Extesión Cultural </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Nuestras Redes Sociales </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Vinculación con el Medio </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Trabaja en la USS <i class="uss-icon ri-external-link-line"></i> </a> </li> </ul> </aside> </div> <div class="col-md-3"> <aside class="uss-linked-list"> <h6 class="h6 mb-20">Estudiantes</h6> <ul class="uss-linked-list__items"> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Bienestar Estudiantil <i class="uss-icon ri-external-link-line"></i> </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Vida Universitaria </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Deportes </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Voluntariados </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Desarrollo y Liderazgo </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Nuevos Sebastianos </a> </li> </ul> </aside> </div> <div class="col-md-3"> <aside class="uss-linked-list"> <h6 class="h6 mb-20">Acreditación</h6> <ul class="uss-linked-list__items"> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Acreditación Institucional <i class="uss-icon ri-external-link-line"></i> </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Acreditación de Carreras y Programas </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Equipo </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Sitios de Interés </a> </li> <li class="uss-linked-list__item"> <a href="#" class="uss-btn uss-btn--link"> Desarrollo y Liderazgo </a> </li> </ul> </aside> </div> </div> </div> </div> <div class="uss-footer-main"> <div class="container uss-footer__logos"> <img class="uss-logo hide-on-mobile" src="/assets/img/logo-horizontal-on-dark-slogan.svg" alt="Logo USS" /> <img class="uss-logo show-on-mobile" src="/assets/img/logo-vertical-on-dark-slogan.svg" alt="Logo Acreditación USS" /> <img class="uss-logo" src="/assets/img/acreditaciones-on-dark.svg" alt="Logo USS" /> </div> </div> <div class="dark uss-footer-baseline"> <div class="container"> <div class="row uss-footer__wrapper"> <div class="col-xl-6 uss-footer__links"> <ul class="uss-footer__nav"> <li class="uss-footer__item"> <a class="uss-footer__link" href="http://">Ver politicas de privacidad</a> </li> <li> <a class="uss-footer__link" href="http://">Términos legales</a> </li> <li> <a class="uss-footer__link" href="http://">Preguntas frecuentes</a> </li> </ul> </div> <div class="col-xl-6 uss-footer__phone-socials"> <a class="uss-link uss-link--phone" href="phone:600 771 3000"> <i class="uss-icon ri-phone-line"></i> 600 771 3000 </a> <ul class="uss-footer__nav uss-footer__nav-social"> <li class="uss-footer__item"> <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href=""> <i class="uss-icon ri-s ri-facebook-line"></i> </a> </li> <li class="uss-footer__item"> <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href=""> <i class="uss-icon ri-s ri-twitter-line"></i> </a> </li> <li class="uss-footer__item"> <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href=""> <i class="uss-icon ri-s ri-instagram-line"></i> </a> </li> <li class="uss-footer__item"> <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href=""> <i class="uss-icon ri-s ri-youtube-line"></i> </a> </li> </ul> </div> </div> </div> </div> </footer> <script type="text/javascript"></script> <script src="/js/main.js" type="module"></script> </body> </html>