website/layouts/partials/jumbo.html

86 lines
3.5 KiB
HTML

<section
class="jumbotron mt-n1 mb-0"
style="
background: linear-gradient(
135deg,
var(--primary-ultralight) 0%,
white 100%
);
"
>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 d-flex flex-column mb-5 align-items-center">
<img
src="/img/screenshots/happydomain-rounded.webp"
alt="happyDomain logo"
style="width: 100%; max-width: 40vw"
/>
</div>
<div class="col">
<div class="row">
<div
class="col col-sm-8 offset-sm-2 col-md-10 offset-md-1 col-xl-8 offset-xl-2"
>
<h2
class="display-4 text-center text-dark font-weight-bold"
style="text-wrap: balance"
>
{{ i18n "slogan" | safeHTML }}
</h2>
</div>
</div>
<p class="mt-5 lead text-center text-muted">
happy<strong>Domain</strong>
{{ i18n "lead" | markdownify }}
</p>
<div class="mt-5 py-2 d-none d-md-flex justify-content-center">
<a
class="btn btn-lg btn-primary px-4 mr-3"
data-umami-event="jumbo-tryit"
href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
style="border-radius: 2em"
>{{ i18n "tryit" }} &#187;</a
>
<a
class="btn btn-lg btn-outline-secondary px-4 ml-3"
data-umami-event="jumbo-downloads"
href="#downloads"
style="border-radius: 2em"
>{{ i18n "downloadit" }}</a
>
</div>
<div
class="container mt-5 py-2 d-flex d-md-none flex-column justify-content-center"
>
<a
class="btn btn-lg btn-primary px-4 mb-3"
data-umami-event="jumbo-tryit"
href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
style="border-radius: 2em"
>{{ i18n "tryit" }} &#187;</a
>
<a
class="btn btn-lg btn-outline-secondary px-4"
data-umami-event="jumbo-downloads"
href="#downloads"
style="border-radius: 2em"
>{{ i18n "downloadit" }}</a
>
</div>
<!--div class="mt-5 card bg-secondary text-light flex-row align-items-center" style="border-radius: .3rem">
<div class="card-body">
<h3>{{ i18n "conf-fosdem24-title" }}</h3>
<p class="card-text">
{{ i18n "conf-fosdem24-body-1" }}
<a href="{{ i18n "conf-fosdem24-href" }}" target="_blank" rel="noopener"><em>{{ i18n "conf-fosdem24-link" }}</em></a>
{{ i18n "conf-fosdem24-body-2" }}
</p>
</div>
<img src="/img/assets/FOSDEM24_logo.png" alt="FOSDEM 2024" style="height: 10em">
</div-->
</div>
</div>
</div>
</section>