mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
46 lines
2.0 KiB
HTML
46 lines
2.0 KiB
HTML
<header class="hero">
|
|
<div class="container">
|
|
<div class="row g-8 align-items-center">
|
|
<div class="col-md-6 text-center text-md-start">
|
|
<div class="hero-subheader">Tabler Emails</div>
|
|
<h1 class="hero-title">
|
|
Better email communication,<br />
|
|
{% include "ui/typed.html" strings="more effective|more efficient|more productive" %}
|
|
</h1>
|
|
<p class="hero-description mt-4">54 eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.</p>
|
|
<div class="mt-6 mt-lg-7">
|
|
<div class="row justify-content-center justify-content-md-start">
|
|
<div class="col-auto"><a href="#" class="btn btn-lg btn-primary">Buy for $29</a></div>
|
|
<div class="col-auto"><a href="#" class="btn btn-lg">Browse gallery</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="hero-img-side">
|
|
<div id="carousel-controls" class="carousel slide" data-bs-ride="carousel" data-interval="4000">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
{% include "ui/illustration.html" image="boy-with-key.svg" class="d-block mx-auto" height="350" %}
|
|
</div>
|
|
<div class="carousel-item">
|
|
{% include "ui/illustration.html" image="boy-girl.svg" class="d-block mx-auto" height="350" %}
|
|
</div>
|
|
<div class="carousel-item">
|
|
{% include "ui/illustration.html" image="computer-fix.svg" class="d-block mx-auto" height="350" %}
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev text-secondary" href="#carousel-controls" role="button" data-bs-slide="prev">
|
|
{% include "ui/icon.html" icon="chevron-left" class="icon-md" %}
|
|
<span class="visually-hidden">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next text-secondary" href="#carousel-controls" role="button" data-bs-slide="next">
|
|
{% include "ui/icon.html" icon="chevron-right" class="icon-md" %}
|
|
<span class="visually-hidden">Next</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|