@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
117 lines (115 loc) • 4.57 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">
<section>
<!-- <div class="uss-hero uss-hero--60vh"> -->
<div class="uss-hero uss-hero--80vh">
<div class="col-sm col-md-5 col-xl-5">
<div class="uss-hero__content uss-hero__content--centered">
<div class="uss-hero__subtitle">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>
</section>
<section>
<div class="uss-hero row">
<div
class="uss-hero__content-container col-md col-lg-4 order-2 order-md-1"
>
<div class="uss-hero__content">
<p>Texto introductorio</p>
<h1 class="uss-hero__title">Lorem ipsum dolor sit amet</h1>
<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.
</p>
<div class="uss-hero__buttons">
<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
class="uss-hero__image-container col-sm col-md-6 col-xl-6 offset-md-1 order-1 order-md-2"
>
<img
class="uss-hero__image"
src="https://dummyimage.com/750x520/"
alt="Hero image"
/>
</div>
</div>
</section>
<section>
<div class="uss-hero row">
<div
class="uss-hero__content-container uss-hero__content-container--inverted col-md col-lg-4 offset-md-1 order-2"
>
<div class="uss-hero__content">
<p>Texto introductorio</p>
<h1 class="uss-hero__title">Lorem inversed</h1>
<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.
</p>
<div class="uss-hero__buttons">
<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
class="uss-hero__image-container uss-hero__image-container--inverted col-sm col-md-6 col-xl-6 order-1"
>
<div class="uss-hero__wrapper">
<img
class="uss-hero__image"
src="https://dummyimage.com/620x620/"
alt="Hero image"
/>
</div>
</div>
</div>
</section>
</div>
<script src="/js/main.js" type="module"></script>
</body>
</html>