@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" /> <script src="/js/main.js" type="module"></script> </head> <body class="on-light" > <div class="container mt-80 mb-160" id="Top"> <section class="mb-64"> <div class="d-flex justify-content-between align-items-center"> <div> <span>Kit Digital USS</span> <code id="version"></code> </div> <div class="flex"> <button class="uss-btn uss-btn--theme-toggle" onclick="window.toggleTheme()"> <i class="uss-icon"></i> </button> </div> </div> <hr> </section> <picture>  <img class="hide-on-dark mb-40" src="/assets/img/logo-horizontal-on-light.svg" height="68px">  <img class="hide-on-light mb-40" src="/assets/img/logo-horizontal-on-dark.svg" height="68px"> </picture> <section class="uss-divider mb-160"> <p id="target">Divider 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> <div class="row flex mb-40"> <h4>Botón primario</h4> <div class="col"> <p>Default</p> <a href="#" class="uss-btn uss-btn--primary mb-24 "> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary mb-24"> Botón primario </a> </div> <div class="col"> <p>Hover</p> <a href="#" class="uss-btn uss-btn--primary hover mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary hover mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary hover mb-24"> Botón primario </a> </div> <div class="col"> <p>Active</p> <a href="#" class="uss-btn uss-btn--primary active mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary active mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary active mb-24"> Botón primario </a> </div> <div class="col"> <p>Disable</p> <a href="#" class="uss-btn uss-btn--primary mb-24" aria-disabled="true"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary mb-24" aria-disabled> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary mb-24" aria-disabled="true"> Botón primario </a> </div> </div> <div class="row mb-40"> <h4>Botón secundario</h4> <div class="col"> <p>Default</p> <a href="#" class="uss-btn uss-btn--secondary mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--secondary mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--secondary mb-24"> Botón secundario </a> </div> <div class="col"> <p>Hover</p> <a href="#" class="uss-btn uss-btn--secondary hover mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--secondary hover mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--secondary hover mb-24"> Botón secundario </a> </div> <div class="col"> <p>Active</p> <a href="#" class="uss-btn uss-btn--secondary active mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--secondary active mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--secondary active mb-24"> Botón secundario </a> </div> <div class="col"> <p>Disable</p> <a href="#" class="uss-btn uss-btn--secondary mb-24" aria-disabled="true"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--secondary mb-24" aria-disabled="true"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--secondary mb-24" aria-disabled="true"> Botón secundario </a> </div> </div> <div class="row mb-40"> <h4>Botón terciario</h4> <div class="col"> <p>Default</p> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Hover</p> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary hover mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary hover mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary hover mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Active</p> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary active mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary active mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary active mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Disable</p> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24" aria-disabled="true"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24" aria-disabled="true"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24" aria-disabled="true"> Botón terciario </a> </div> </div> <div class="row mb-40"> <h5>Botón Full width</h5> <p>Default</p> <div class="col-lg-6"> <a href="#" class="uss-btn uss-btn--full-width mb-24"> Botón Full width <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <p>Hover</p> <div class="col-lg-6"> <a href="#" class="uss-btn uss-btn--full-width hover mb-24"> Botón Full width <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <p>Active</p> <div class="col-lg-12"> <a href="#" class="uss-btn uss-btn--full-width active mb-24"> Botón Full width <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <p>Disabled</p> <div class="col-lg-12"> <a href="#" class="uss-btn uss-btn--full-width disabled mb-24"> Botón Full width <i class="uss-icon ri-arrow-right-line"></i> </a> </div> </div> <div class="row mb-40"> <h5>Botones ícono L</h5> <div class="col-1"> <p>Default</p> <a href="#" class="uss-btn uss-btn--icon"> <i class="uss-icon ri-edit-line"></i> </a> </div> <div class="col-1"> <p>Hover</p> <a href="#" class="uss-btn uss-btn--icon hover"> <i class="uss-icon ri-edit-line"></i> </a> </div> <div class="col-1"> <p>Active</p> <a href="#" class="uss-btn uss-btn--icon active"> <i class="uss-icon ri-edit-line"></i> </a> </div> <div class="col-1"> <p>Disabled</p> <a href="#" class="uss-btn uss-btn--icon " aria-disabled="true"> <i class="uss-icon ri-edit-line"></i> </a> </div> </div> <div class="row mb-40"> <h5>Botones ícono S</h5> <div class="col-1"> <p>Default</p> <a href="#" class="uss-btn uss-btn--icon uss-btn--icon-sm"> <i class="uss-icon uss-icon--sm ri-edit-line"></i> </a> </div> <div class="col-1"> <p>Hover</p> <a href="#" class="uss-btn uss-btn--icon uss-btn--icon-sm hover"> <i class="uss-icon ri-edit-line ri-s"></i> </a> </div> <div class="col-1"> <p>Active</p> <a href="#" class="uss-btn uss-btn--icon uss-btn--icon-sm active"> <i class="uss-icon ri-edit-line ri-s"></i> </a> </div> <div class="col-1"> <p>Disabled</p> <a href="#" class="uss-btn uss-btn--icon uss-btn--icon-sm " aria-disabled="true"> <i class="uss-icon ri-edit-line ri-s"></i> </a> </div> </div> <div class="row mb-40"> <h5>Botón Redes Sociales</h5> <div class="col-1"> <p>Default</p> <a href="#" class="uss-btn uss-btn--rrss mb-12"> <i class="uss-icon ri-instagram-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss mb-12"> <i class="uss-icon ri-twitter-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss mb-12"> <i class="uss-icon ri-facebook-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss mb-12"> <i class="uss-icon ri-youtube-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss mb-12"> <i class="uss-icon ri-linkedin-line"></i> </a> </div> <div class="col-1 gap-4"> <p>Hover</p> <a href="#" class="uss-btn uss-btn--rrss hover mb-12"> <i class="uss-icon ri-instagram-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss hover mb-12"> <i class="uss-icon ri-twitter-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss hover mb-12"> <i class="uss-icon ri-facebook-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss hover mb-12"> <i class="uss-icon ri-youtube-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss hover mb-12"> <i class="uss-icon ri-linkedin-line"></i> </a> </div> <div class="col-1 gap-4"> <p>Active</p> <a href="#" class="uss-btn uss-btn--rrss active mb-12"> <i class="uss-icon ri-instagram-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss active mb-12"> <i class="uss-icon ri-twitter-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss active mb-12"> <i class="uss-icon ri-facebook-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss active mb-12"> <i class="uss-icon ri-youtube-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss active mb-12"> <i class="uss-icon ri-linkedin-line"></i> </a> </div> <div class="col-1 gap-4"> <p>Disabled</p> <a href="#" class="uss-btn uss-btn--rrss mb-12 disabled"> <i class="uss-icon ri-instagram-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss mb-12 disabled"> <i class="uss-icon ri-twitter-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss mb-12 disabled"> <i class="uss-icon ri-facebook-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss mb-12" aria-disabled="true"> <i class="uss-icon ri-youtube-line"></i> </a> <a href="#" class="uss-btn uss-btn--rrss mb-12" aria-disabled="true"> <i class="uss-icon ri-linkedin-line"></i> </a> </div> </div> <div class=" mb-40"> <h5>Botónes Slider</h5> <div class="col-2 my-12"> <button class="uss-btn uss-btn--slide uss-btn--slide-prev" data-uss-carousel-button="prev" > <i class="uss-icon ri-arrow-left-s-line"></i> </button> <button class="uss-btn uss-btn--slide uss-btn--slide-next" data-uss-carousel-button="next" > <i class="uss-icon ri-arrow-right-s-line"></i> </button> </div> <div class="col-2 my-12"> <button class="uss-btn uss-btn--slide uss-btn--slide-prev hover" data-uss-carousel-button="prev" > <i class="uss-icon ri-arrow-left-s-line"></i> </button> <button class="uss-btn uss-btn--slide uss-btn--slide-next hover" data-uss-carousel-button="next" > <i class="uss-icon ri-arrow-right-s-line"></i> </button> </div> <div class="col-2 my-12"> <button class="uss-btn uss-btn--slide uss-btn--slide-prev active" data-uss-carousel-button="prev" > <i class="uss-icon ri-arrow-left-s-line"></i> </button> <button class="uss-btn uss-btn--slide uss-btn--slide-next active" data-uss-carousel-button="next" > <i class="uss-icon ri-arrow-right-s-line"></i> </button> </div> <div class="col-2 my-12"> <button class="uss-btn uss-btn--slide uss-btn--slide-prev disabled" data-uss-carousel-button="prev" > <i class="uss-icon ri-arrow-left-s-line"></i> </button> <button class="uss-btn uss-btn--slide uss-btn--slide-next disabled" data-uss-carousel-button="next" > <i class="uss-icon ri-arrow-right-s-line"></i> </button> </div> </div> <div class="row mb-40"> <h5>Botón Flotante</h5> <div class="col-2"> <a href="#Top" class="uss-btn uss-btn--floating"> <i class="uss-icon ri-arrow-up-s-line"></i> </a> <a href="#Footer" class="uss-btn uss-btn--floating uss-btn--floating-left"> <i class="uss-icon ri-arrow-down-s-line"></i> </a> </div> </div> </div> </section> <section> <div class="row flex mb-40"> <div class="col-lg-2 col-sm-4 mb-24"> <p>Neutral</p> <span class="uss-badge uss-badge--neutral">5 Nuevos</span> </div> <div class="col-lg-2 col-sm-4 mb-24"> <p>Info</p> <span class="uss-badge uss-badge--info">5 Nuevos</span> </div> <div class="col-lg-2 col-sm-4 mb-24"> <p>Success</p> <span class="uss-badge uss-badge--success">5 Nuevos</span> </div> <div class="col-lg-2 col-sm-4 mb-24"> <p>Warning</p> <span class="uss-badge uss-badge--warning">5 Nuevos</span> </div> <div class="col-lg-2 col-sm-4 mb-24"> <p>Error</p> <span class="uss-badge uss-badge--error">5 Nuevos</span> </div> <div class="col-lg-2 col-sm-4 mb-24"> <p>Dot</p> <span class="uss-badge uss-badge--dot"></span> </div> </div> </section> <section> <div class="row flex mb-40"> <h5>Tags</h5> <div class="col-lg-3 col-sm-4 mb-24"> <p>Anchor Tag</p> <a href="#" class="uss-tag uss-tag--primary mb-24"> Tag primario </a> <a href="#" class="uss-tag uss-tag--secondary mb-24"> Tag secundario </a> </div> <div class="col-lg-3 col-sm-4 mb-24"> <p>Button Tag con <code>data-uss-close-self</code></p> <button class="uss-tag uss-tag--primary mb-24" data-uss-close-self="true"> data-uss-close-self="true" <i class="uss-icon uss-icon--xs ri-close-line"></i> </button> <button class="uss-tag uss-tag--primary mb-24" data-uss-close-self> data-uss-close-self <i class="uss-icon uss-icon--xs ri-close-line"></i> </button> <button class="uss-tag uss-tag--secondary mb-24" data-uss-close-self="false"> data-uss-close-self="false" <i class="uss-icon uss-icon--xs ri-close-line"></i> </button> <button class="uss-tag uss-tag--secondary mb-24"> no data-uss-close-self <i class="uss-icon uss-icon--xs ri-close-line"></i> </button> </div> </section> <section class="mb-160"> <h2 class="">Tipografias</h2> <hr class="mb-40"> <p>h1</p> <h1>El veloz murciélago hindú comía feliz cardillo y kiwi.</h1> <hr> <p>h2</p> <h2>El veloz murciélago hindú comía feliz cardillo y kiwi.</h2> <hr> <p>h3</p> <h3>El veloz murciélago hindú comía feliz cardillo y kiwi.</h3> <hr> <p>h4</p> <h4>El veloz murciélago hindú comía feliz cardillo y kiwi.</h4> <hr> <p>h5</p> <h5>El veloz murciélago hindú comía feliz cardillo y kiwi.</h5> <hr> <p>h6</p> <h6>El veloz murciélago hindú comía feliz cardillo y kiwi.</h6> <hr> </section> <section class="mb-160"> <h2>Parrafos</h2> <hr class="mb-40"> <p class="p-size--sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam aperiam alias tenetur quo similique cum consectetur animi modi quasi? Sed dolore ipsa dolorum porro temporibus nisi alias quia sint <a href="#" target="_blank">fugiat odit molestias</a> tempora. </p> <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam aperiam alias tenetur quo similique cum consectetur animi modi quasi? Sed dolore ipsa dolorum porro temporibus nisi alias quia sint tempora? </p> <p class="p-size--lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam aperiam alias tenetur quo similique cum consectetur animi modi quasi? Sed dolore ipsa dolorum porro temporibus nisi alias quia sint <a href="#" target="_blank">fugiat odit molestias</a> tempora? </p> <p class="p-size--sm text-color--alt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam aperiam alias tenetur quo similique cum consectetur animi modi quasi? Sed dolore ipsa dolorum porro temporibus nisi alias quia sint tempora?</p> <p class=" text-color--alt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam aperiam alias tenetur <a href="#" target="_blank">fugiat odit molestias</a> quo similique cum consectetur animi modi quasi? Sed dolore ipsa dolorum porro temporibus nisi alias quia sint tempora? </p> <p class="p-size--lg text-color--alt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam aperiam alias tenetur quo similique cum consectetur animi modi quasi? Sed dolore ipsa dolorum porro temporibus nisi alias quia sint tempora?</p> </section> <section class="mb-160"> <h2 class="mb-80">Citas</h2> <hr> <blockquote>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem aperiam tempora dolor id illum libero velit dicta inventore delectus blanditiis quisquam molestias consequatur dignissimos nesciunt deserunt fuga reprehenderit, beatae repellendus!</blockquote> <blockquote class="blockquote-size--xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem aperiam <a href="#" target="_blank">fugiat odit molestias</a> tempora dolor id illum libero velit dicta inventore delectus blanditiis quisquam molestias consequatur dignissimos nesciunt deserunt fuga reprehenderit, beatae repellendus! </blockquote> <blockquote class="text-color--alt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem aperiam tempora dolor id illum libero velit dicta inventore delectus blanditiis quisquam molestias consequatur <a href="#" target="_blank">fugiat odit molestias</a> dignissimos nesciunt deserunt fuga reprehenderit, beatae repellendus! </blockquote> <blockquote class="blockquote-size--xl text-color--alt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem aperiam tempora dolor id illum libero velit dicta inventore delectus blanditiis quisquam molestias consequatur dignissimos nesciunt deserunt fuga reprehenderit, beatae repellendus!</blockquote> </section> <section class="mb-40"> <h1 class="mb-80">Elevaciones</h1> <div class="card shadow-1 p-24 mb-80"> <h4>Elevación 1</h4> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius dolorem reiciendis praesentium dolores. Aliquam velit praesentium perspiciatis voluptatem quidem modi illum soluta debitis dolores dolor? Veniam asperiores dignissimos ipsa modi!</p> </div> <div class="card shadow-2 p-24 mb-80 "> <h4>Elevación 2</h4> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius dolorem reiciendis praesentium dolores. Aliquam velit praesentium perspiciatis voluptatem quidem modi illum soluta debitis dolores dolor? Veniam asperiores dignissimos ipsa modi!</p> </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> // window.preventThemeToggle = true; window.addEventListener("message", (event) => { if (event.data.type === "toggleTheme") { console.log(event.data.theme) } }); </script> </body> </html>