@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
526 lines (525 loc) • 23.6 kB
HTML
<section class="w-100">
<!-- header -->
<header class="w-100">
<nav class="uss-topnav hide-on-mobile">
<div class="container uss-topnav-wrapper">
<ul class="uss-topnav-items uss-topnav-items--responsive">
<li class="uss-topnav__menu-item uss-skip-to-content" tabindex="-2">
<a href="#main" class="uss-topnav__menu-item-link"
>Ir al contenido
<i class="uss-icon ri-arrow-right-line uss-icon--xs"></i>
</a>
</li>
<li class="uss-topnav__menu-item uss-skip-to-content" tabindex="-1">
<a href="#mainmenu-home" class="uss-topnav__menu-item-link">
Ir al menú principal
<i class="uss-icon ri-arrow-right-line uss-icon--xs"></i>
</a>
</li>
<li class="uss-topnav__menu-item">
<a href="#" class="uss-topnav__menu-item-link">Item topbar</a>
</li>
<li class="uss-topnav__menu-item">
<a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--external"
>Item topbar</a
>
</li>
<li class="uss-topnav__menu-item">
<a href="#" class="uss-topnav__menu-item-link">Item topbar</a>
</li>
<li class="uss-topnav__menu-item">
<a href="#" class="uss-topnav__menu-item-link">Item topbar</a>
</li>
</ul>
<ul class="uss-topnav-items">
<li class="uss-topnav__menu-item">
<a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--icon">
<i class="uss-icon ri-facebook-line"></i>
</a>
</li>
<li class="uss-topnav__menu-item">
<a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--icon">
<i class="uss-icon ri-twitter-line"></i>
</a>
</li>
<li class="uss-topnav__menu-item">
<a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--icon">
<i class="uss-icon ri-instagram-line"></i>
</a>
</li>
<li class="uss-topnav__menu-item">
<a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--icon">
<i class="uss-icon ri-youtube-line"></i>
</a>
</li>
</ul>
</div>
</nav>
<nav id="mainmenu" class="uss-mainnav hide-on-mobile">
<div class="container uss-mainnav__wrap">
<a id="mainmenu-home" href="#uss" class="uss-nav__logo-link">
<picture>
<source srcset="https://dummyimage.com/310x96/" media="(prefers-color-scheme:dark)" />
<img class="uss-nav__logo" src="https://dummyimage.com/220x68/" height="68px" />
</picture>
</a>
<div class="uss-mainnav__menu">
<ul class="uss-mainnav__items">
<li class="uss-mainnav__item">
<a href="#" class="uss-mainnav__item-link"> Admisión </a>
</li>
<li class="uss-mainnav__item">
<a href="#" class="uss-mainnav__item-link"> Postgrados </a>
</li>
<li class="uss-mainnav__item">
<button class="uss-mainnav__item-link" data-subitem-ref="0">
Menu 2
<i class="uss-icon ri-arrow-drop-down-line"></i>
</button>
<div class="uss-mainnav__subitems-wrapper" data-subitem-target="0">
<ul class="uss-mainnav__sub-items">
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Investigación1</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Doctorados</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#"
>Texto label externo
<i class="uss-icon ri-external-link-line ri-s"></i>
</a>
</li>
</ul>
<ul class="uss-mainnav__sub-items">
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Investigación1</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Doctorados</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
</li>
</ul>
</div>
</li>
<li class="uss-mainnav__item">
<a href="#" class="uss-mainnav__item-link"> Sedes </a>
</li>
<li class="uss-mainnav__item">
<a href="#" class="uss-mainnav__item-link"> Investigracion </a>
</li>
<li class="uss-mainnav__item">
<a href="#" class="uss-mainnav__item-link"> Facultades </a>
</li>
<li class="uss-mainnav__item">
<button class="uss-mainnav__item-link" data-subitem-ref="1">
Universidad
<i class="uss-icon ri-arrow-drop-down-line"></i>
</button>
<div class="uss-mainnav__subitems-wrapper" data-subitem-target="1">
<ul class="uss-mainnav__sub-items">
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Investigación1</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Doctorados</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#"
>Texto label externo
<i class="uss-icon ri-external-link-line ri-s"></i>
</a>
</li>
</ul>
<ul class="uss-mainnav__sub-items">
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Investigación1</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Doctorados</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
</li>
</ul>
<ul class="uss-mainnav__sub-items">
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#"
>Texto label externo
<i class="uss-icon ri-external-link-line ri-s"></i>
</a>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#"
>Oficina de transferencia y licenciamiento lorem ipsum dolor sit</a
>
</li>
<li class="uss-mainnav__item">
<a class="uss-mainnav__subitem-link" href="#">Item 7</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
<nav class="uss-mainnav--mobile show-on-mobile">
<div class="container uss-mainnav__wrap">
<div class="uss-mainnav__topnav">
<a href="#uss" class="uss-nav__logo-link">
<picture>
<source srcset="https://dummyimage.com/310x96/" media="(prefers-color-scheme:dark)" />
<img class="uss-nav__logo" src="https://dummyimage.com/155x48/" height="48px" />
</picture>
</a>
<div class="uss-nav__icons">
<button data-toggle-nav-mobile class="uss-btn uss-btn--icon">
<i class="uss-icon ri-menu-line"></i>
</button>
</div>
</div>
<div class="container uss-mainnav__menu">
<ul class="uss-menu-accordion">
<li class="uss-menu-accordion__item">
<a href="#" class="uss-menu-accordion__item-link"> Admisión </a>
</li>
<li class="uss-menu-accordion__item">
<a href="#" class="uss-menu-accordion__item-link"> Postgrados </a>
</li>
<li class="uss-menu-accordion__item">
<button class="uss-menu-accordion__item-link" data-subitem-ref="0">
Menu 2
<i class="uss-icon ri-arrow-drop-down-line"></i>
</button>
<ul class="uss-menu-accordion__sub-items" data-subitem-target="0">
<li class="uss-menu-accordion__subitem">
<a class="uss-menu-accordion__subitem-link" href="#">Doctorados</a>
</li>
<li class="uss-menu-accordion__subitem">
<div class="uss-menu-accordion__subitem-link-subtitle">Title</div>
</li>
<li class="uss-menu-accordion__subitem">
<a class="uss-menu-accordion__subitem-link" href="#">Informativos VRID</a>
</li>
<li class="uss-menu-accordion__subitem">
<a class="uss-menu-accordion__subitem-link" href="#">Fondos concursables I+D</a>
</li>
<li class="uss-menu-accordion__subitem">
<a class="uss-menu-accordion__subitem-link" href="#">
Texto label externo
<i class="uss-icon ri-external-link-line ri-s"></i>
</a>
</li>
</ul>
</li>
<li class="uss-menu-accordion__item">
<a href="#" class="uss-menu-accordion__item-link"> Sedes </a>
</li>
<li class="uss-menu-accordion__item">
<a href="#" class="uss-menu-accordion__item-link"> Investigracion </a>
</li>
<li class="uss-menu-accordion__item">
<a href="#" class="uss-menu-accordion__item-link"> Facultades y Carreras </a>
</li>
<li class="uss-menu-accordion__item">
<button class="uss-menu-accordion__item-link" data-subitem-ref="1">
Universidad
<i class="uss-icon ri-arrow-drop-down-line"></i>
</button>
<ul class="uss-menu-accordion__sub-items" data-subitem-target="1">
<li class="uss-menu-accordion__subitem">
<a class="uss-menu-accordion__subitem-link" href="#">Doctorados</a>
</li>
<li class="uss-menu-accordion__subitem">
<div class="uss-menu-accordion__subitem-link-subtitle">Title</div>
</li>
<li class="uss-menu-accordion__subitem">
<a class="uss-menu-accordion__subitem-link" href="#">Informativos VRID</a>
</li>
<li class="uss-menu-accordion__subitem">
<a class="uss-menu-accordion__subitem-link" href="#">Fondos concursables I+D</a>
</li>
<li class="uss-menu-accordion__subitem">
<a class="uss-menu-accordion__subitem-link" href="#">
Texto label externo
<i class="uss-icon ri-external-link-line ri-s"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- centered hero -->
<div class="uss-hero uss-hero--80vh">
<div class="col-md-5">
<div class="uss-hero__content uss-hero__content--centered">
<div class="uss-hero__caption">Texto introductorio</div>
<h1 class="h1 uss-hero__title">Lorem ipsum dolor sit amet</h1>
<div class="uss-hero__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus
venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent
elementum facilisis leo.
</div>
<div class="uss-hero__buttons uss-hero__buttons--centered">
<a href="#" class="uss-btn uss-btn--primary">
Botón primario
<i class="uss-icon ri-arrow-right-circle-line"></i>
</a>
<a href="#" class="uss-btn uss-btn--secondary">Botón secundario</a>
</div>
</div>
</div>
</div>
<!-- cards -->
<section class="container row mx-auto mb-64">
<div class="col-md-4 uss-card--equal-height mb-24">
<div class="uss-card">
<img lazy class="uss-card__img" src="https://dummyimage.com/640x16:9/" alt="dummyimage" />
<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>
<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 mt-auto">
Botón terciario
<i class="uss-icon ri-arrow-right-circle-line"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 uss-card--equal-height mb-24">
<div class="uss-card">
<img lazy class="uss-card__img" src="https://dummyimage.com/640x16:9/" alt="dummyimage" />
<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>
<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 mt-auto">
Botón terciario
<i class="uss-icon ri-arrow-right-circle-line"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 uss-card--equal-height mb-24">
<div class="uss-card">
<img lazy class="uss-card__img" src="https://dummyimage.com/640x16:9/" alt="dummyimage" />
<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>
<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 mt-auto">
Botón terciario
<i class="uss-icon ri-arrow-right-circle-line"></i>
</a>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="uss-footer w-100">
<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="https://dummyimage.com/260x80/" alt="Logo USS" />
<img
class="uss-logo show-on-mobile"
src="https://dummyimage.com/385x120/"
alt="Logo Acreditación USS"
/>
<img class="uss-logo" src="https://dummyimage.com/337x80/" alt="Logo USS" />
</div>
</div>
<div class="dark uss-footer-baseline">
<div class="container">
<div class="row uss-footer__wrapper">
<div class="col-lg-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-lg-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>
</section>