23 lines
1.3 KiB
Plaintext
23 lines
1.3 KiB
Plaintext
---
|
|
import quoteBg from '../../assets/img/quote-bg.jpg';
|
|
---
|
|
<section class="quote" style={`background-image:url(${quoteBg.src})`}>
|
|
<div class="container quote__in">
|
|
<p class="quote__mark">“</p>
|
|
<blockquote>
|
|
<p><strong>PERFORMANCE</strong> È SPINGERE OLTRE I PROPRI LIMITI, <strong>BALANCE</strong> È SAPERLI ASCOLTARE, <strong>LONGEVITY</strong> È COSTRUIRE NEL TEMPO CIÒ CHE DAVVERO CONTA.</p>
|
|
<cite>Insanitylab</cite>
|
|
</blockquote>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.quote { position: relative; background-size: cover; background-position: center; text-align: center; }
|
|
.quote::before { content: ''; position: absolute; inset: 0; background: rgba(46,32,24,.82); }
|
|
.quote__in { position: relative; padding-block: 110px; max-width: 820px; }
|
|
.quote__mark { color: #fff; font-size: 4rem; font-family: var(--font-heading); margin: 0; line-height: 1; }
|
|
.quote blockquote { margin: 0; }
|
|
.quote blockquote p { color: #fff; font-family: var(--font-heading); font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: .06em; line-height: 1.6; }
|
|
.quote cite { display: block; margin-top: 24px; color: var(--c-accent); font-style: normal; font-family: var(--font-heading); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; }
|
|
</style>
|