@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
269 lines (261 loc) • 14.3 kB
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 class="mb-64">
<div class="d-flex justify-content-between align-items-center">
<span>Kit Digital USS</span>
<code id="version"></code>
</div>
<hr>
</section>
<section class="mb-160">
<p id="target">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut modi fuga, accusamus vitae ex
incidunt qui labore illum voluptas omnis debitis. Autem aspernatur iure qui cum, excepturi quidem illo
sunt?</p>
<hr class="mb-40">
<div class="row flex mb-40">
<div class="col-lg-4 col-sm-6 uss-card--equal-height">
<div class="uss-card">
<img lazy class="card-img" src="https://dummyimage.com/640x4:3/" alt="dummyimage">
<div class="uss-card__body">
<a href="#" class="uss-tag tag-primary mb-20">Tag secundario</a>
<div class="overline text-color--alt">Metadato introductorio</div>
<a href="">
<div class="h4 mb-16">Titulo de la card</div>
<p class="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>
<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="col-lg-4 col-sm-6 uss-card--equal-height">
<div class="uss-card uss-card--background-alt">
<img lazy class="card-img" src="https://dummyimage.com/640x4:3/" alt="dummyimage">
<div class="uss-card__body">
<a href="#" class="uss-tag tag-primary mb-20">
Tag secundario
</a>
<div class="overline text-color--alt">Metadato introductorio</div>
<p class="mb-32">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur
consequat. </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="col-lg-4 col-sm-6 uss-card--equal-height">
<div class="uss-card uss-card--border-none">
<img lazy class="card-img" src="https://dummyimage.com/640x4:3/" alt="dummyimage">
<div class="uss-card__body">
<a href="#" class="uss-tag tag-primary mb-20">
Tag secundario
</a>
<div class="overline text-color--alt">Metadato introductorio</div>
<div class="h4 mb-20">Titulo de la card</div>
<p class="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>
<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 src="/js/main.js" type="module"></script>
</body>
</html>