@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
190 lines (176 loc) • 7.95 kB
HTML
<section class="container my-80">
<div class="uss-banner dark">
<img lazy class="uss-banner--img" src="https://dummyimage.com/1000x600/" alt="dummyimage" />
<div class="uss-banner--body_container">
<div class="uss-opacity-layer uss-opacity-layer--gradient"></div>
<div class="uss-banner--body p-20 p-md-40">
<div class="row">
<div class="col-md-8">
<span>Texto introductorio</span>
<span>Texto introductorio</span>
<h2>Lorem ipsum dolor sit amet consectetur. Duis nulla tincidunt sit egestas metus.</h2>
<p class="mb-0">
Lorem ipsum dolor sit amet consectetur. Et nunc dui nunc at felis sollicitudin cras
enim consectetur. Interdum mauris vel tristique leo egestas tristique pellentesque.
</p>
</div>
<div class="col-md-4 flex align-items-end justify-content-md-end">
<div class="d-none d-md-block">
<a href="#" class="uss-btn uss-btn--primary">
<span>Leer artículo</span>
<i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"></i>
</a>
</div>
<div class="d-block d-md-none w-100 mt-32 mb-20">
<a href="#" class="uss-btn uss-btn--primary d-flex justify-content-center">
<span>Leer artículo</span>
<i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
---
<section class="container my-80">
<div class="uss-banner dark">
<img lazy class="uss-banner--img" src="https://dummyimage.com/1000x600/" alt="dummyimage" />
<div class="uss-banner--body_container">
<div class="uss-opacity-layer uss-opacity-layer--primary uss-opacity-layer--gradient"></div>
<div class="uss-banner--body p-20 p-md-40">
<div class="row">
<div class="col-md-8">
<span>Texto introductorio</span>
<span>Texto introductorio</span>
<h2>Lorem ipsum dolor sit amet consectetur. Duis nulla tincidunt sit egestas metus.</h2>
<p class="mb-0">
Lorem ipsum dolor sit amet consectetur. Et nunc dui nunc at felis sollicitudin cras
enim consectetur. Interdum mauris vel tristique leo egestas tristique pellentesque.
</p>
</div>
<div class="col-md-4 flex align-items-end justify-content-md-end">
<div class="d-none d-md-block">
<a href="#" class="uss-btn uss-btn--primary">
<span>Leer artículo</span>
<i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"></i>
</a>
</div>
<div class="d-block d-md-none w-100 mt-32 mb-20">
<a href="#" class="uss-btn uss-btn--primary d-flex justify-content-center">
<span>Leer artículo</span>
<i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
---
<section class="container my-80">
<div class="uss-banner dark">
<img lazy class="uss-banner--img" src="https://dummyimage.com/1000x600/" alt="dummyimage" />
<div class="uss-banner--body_container">
<div class="uss-opacity-layer uss-opacity-layer--secondary uss-opacity-layer--gradient"></div>
<div class="uss-banner--body p-20 p-md-40">
<div class="row">
<div class="col-md-8">
<span>Texto introductorio</span>
<span>Texto introductorio</span>
<h2>Lorem ipsum dolor sit amet consectetur. Duis nulla tincidunt sit egestas metus.</h2>
<p class="mb-0">
Lorem ipsum dolor sit amet consectetur. Et nunc dui nunc at felis sollicitudin cras
enim consectetur. Interdum mauris vel tristique leo egestas tristique pellentesque.
</p>
</div>
<div class="col-md-4 flex align-items-end justify-content-md-end">
<div class="d-none d-md-block">
<a href="#" class="uss-btn uss-btn--primary">
<span>Leer artículo</span>
<i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"></i>
</a>
</div>
<div class="d-block d-md-none w-100 mt-32 mb-20">
<a href="#" class="uss-btn uss-btn--primary d-flex justify-content-center">
<span>Leer artículo</span>
<i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
---
<div class="uss-hero uss-hero--background 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-6">
<div class="uss-hero__content uss-hero__content--centered">
<p class="uss-hero__caption">Texto introductorio</p>
<h1 class="h1 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 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>
---
<div class="uss-hero uss-hero--background dark uss-hero--80vh">
<img class="uss-hero__image" src="https://dummyimage.com/1200x1200/" alt="Hero image" />
<div class="uss-opacity-layer uss-opacity-layer--secondary"></div>
<div class="col-md-6">
<div class="uss-hero__content uss-hero__content--centered">
<p class="uss-hero__caption">Texto introductorio</p>
<h1 class="h1 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 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>
---
<div class="uss-hero uss-hero--background dark uss-hero--80vh">
<img class="uss-hero__image" src="https://dummyimage.com/1200x1200/" alt="Hero image" />
<div class="uss-opacity-layer uss-opacity-layer--primary"></div>
<div class="col-md-6">
<div class="uss-hero__content uss-hero__content--centered">
<p class="uss-hero__caption">Texto introductorio</p>
<h1 class="h1 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 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>