@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
62 lines (57 loc) • 2.34 kB
HTML
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/css/main.css" />
<title>Component: docs/components/content/hero-carousel-slide.html</title>
</head>
<body>
<header style="border-bottom: 1px solid var(--border)" class="p-20">
<div class="d-flex justify-content-between">
<a href="/" class="uss-btn uss-btn--tertiary">
<i class="uss-icon uss-icon--sm ri-home-line"></i>Volver al inicio</a
>
<div>
<button id="_uss-btn-toggle-container" class="uss-btn uss-btn--size-sm uss-btn--tertiary">
[ Toggle .container ]
</button>
</div>
</div>
<h3 class="p-0">docs/components/content/hero-carousel-slide.html</h3>
</header>
<div id="viewer" class="container my-40" style="border: 1px solid var(--border)">
<div class="uss-hero uss-hero--background uss-hero--carousel-slide dark uss-hero--80vh">
<img class="uss-hero__image" src="https://dummyimage.com/1200x1200/" alt="Hero image" />
<div class="uss-opacity-layer"></div>
<div class="col-md-8">
<div class="uss-hero__content">
<h2 class="uss-hero__title">Lorem ipsum dolor sit amet, consecteturd adipiscing elit</h2>
<p 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, vel fringilla est ullamcorper eget nulla.
</p>
<div class="uss-hero__buttons">
<a href="#" class="uss-btn uss-btn--tertiary">
<i class="uss-icon ri-arrow-right-circle-line"></i>Boton Terciario</a
>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="module" src="/js/main.js"></script>
<script>
const button = document.getElementById('_uss-btn-toggle-container');
button.addEventListener('click', () => {
const viewer = document.getElementById('viewer');
viewer.classList.toggle('container');
});
</script>
</html>