@ussebastian/kitdigital

<section class="w-100">  <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> <section class="container my-80">  <nav class="uss-breadcrumb mb-24" aria-label="Breadcrumb"> <ol class="uss-breadcrumb__inner-list"> <li class="uss-breadcrumb__list-item"> <a href="#" class="uss-breadcrumb__link"> Inicio </a> <i class="uss-icon ri-arrow-drop-right-line"></i> </li> <li class="uss-breadcrumb__current-page" aria-current="page"> <span> Ejemplo formulario </span> </li> </ol> </nav>  <h1>Ejemplo de formulario</h1>  <p class="mb-32"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi debitis quod vel! Tempore at perferendis, quia corrupti, ab soluta consequatur aperiam doloremque mollitia reprehenderit ea! Beatae animi provident aliquam cumque. Assumenda tenetur cum commodi quidem velit vel adipisci repellendus impedit quibusdam deleniti excepturi similique aspernatur dolorum, </p>  <form class="uss-form">  <div class="uss-form-group mb-40"> <label for="inputExample" class="uss-form__label"> Label normal <i class="uss-icon ri-question-line"></i> </label> <input type="text" class="uss-form__input" id="inputExample" aria-describedby="inputExample" /> <div class="uss-form__help">Mensaje de contexto.</div> </div>  <div class="uss-form-group mb-40"> <label for="inputEmail" class="uss-form__label"> Text Area <i class="uss-icon ri-question-line"></i> </label> <textarea class="uss-form__input" name="textarea" rows="5" cols="50"> Write something here </textarea > <div id="emailHelp" class="uss-form__help">Mensaje de contexto.</div> </div>  <div class="uss-form-group"> <label class="uss-form__label uss-form__label--margin-plus"> Radio button <i class="uss-icon ri-question-line"></i> </label> <input id="radio-1" type="radio" value="select an op" name="radio-group" /> <label class="uss-form__radio-label" for="radio-1" >Use radio buttons if the meaning of the empty</label > <input id="radio-2" type="radio" value="between these" name="radio-group" /> <label class="uss-form__radio-label" for="radio-2"> Between these values </label> <input id="radio-3" type="radio" value="between these" name="radio-group" disabled /> <label class="uss-form__radio-label" for="radio-3"> Between these values disable </label> <input id="radio-4" type="radio" value="between these" name="radio-group" checked /> <label class="uss-form__radio-label" for="radio-4"> Other </label> </div>  <div class="uss-form-group flex gap-16 justify-content-end"> <button type="submit" class="uss-btn uss-btn--secondary">Cancelar</button> <button type="submit" class="uss-btn uss-btn--primary">Enviar Formulario</button> </div> </form> </section>  <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-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> </section>