114 lines
3.0 KiB
HTML
114 lines
3.0 KiB
HTML
{% set image_src = image_src | default(value="") %}
|
|
{% set image_alt = image_alt | default(value="") %}
|
|
{% set title = title | default(value="") %}
|
|
{% set card_link = card_link | default(value="") %}
|
|
{% set tooltip = tooltip | default(value="") %}
|
|
{% set target = target | default(value="") %}
|
|
{% set header = header | default(value="") %}
|
|
|
|
|
|
|
|
|
|
|
|
<a href="{{ card_link }}" class="flex-1 mx-2 mb-8" target="{{ target }}">
|
|
|
|
<div class="tooltip">
|
|
{% if tooltip %}
|
|
<span class="tooltiptext">{{ tooltip }}</span>
|
|
{% endif %}
|
|
|
|
<div class="fade-in-box flex flex-col p-6 rounded-2xl border border-gray-100 bg-black/5">
|
|
{% if header %}
|
|
<h2 class="text-2xl text-center flex justify-center items-center">{{ header }}</h2>
|
|
{% endif %}
|
|
|
|
{% if image_src %}
|
|
<img class="fade-in blinking-effect relative mx-auto mb-4" width="60%" src="{{ image_src }}" alt="{{ image_alt }}">
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if title %}
|
|
<div class="flex justify-center my-4 items-center gap-x-3 lg:text-xl text-lg font-semibold">
|
|
{{ title }}
|
|
</div>
|
|
{% endif %}
|
|
</a>
|
|
|
|
|
|
|
|
<style>
|
|
/* Fade-in animation for the grid items */
|
|
.fade-in-box {
|
|
opacity: 0;
|
|
animation: fadeIn 0.6s ease-in-out forwards;
|
|
}
|
|
|
|
/* Fading in each grid item with a slight delay */
|
|
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
|
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
|
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
|
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
|
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
|
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
|
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
|
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
|
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
|
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
|
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
|
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Tooltip container */
|
|
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Tooltip text */
|
|
.tooltip .tooltiptext {
|
|
font-size: 12px;
|
|
visibility: hidden;
|
|
background-color: rgb(26 26 26 / 70%);
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
|
|
/* Position the tooltip text - see examples below! */
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 0px;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Show the tooltip text when you mouse over the tooltip container */
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tooltip .tooltiptext {
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: -7px !important;
|
|
right: 0px !important;
|
|
top: 0px !important;
|
|
left: 0px !important;
|
|
}
|
|
}
|
|
|
|
</style>
|