homepage/templates/services.html
2024-07-02 16:21:57 +02:00

27 lines
No EOL
1.4 KiB
HTML

{% extends "_base" %}
{% block main %}
<h1>Services</h1>
<div class="flex flex-row flex-wrap place-content-center place-items-center">
{% for service in services %}
<a href="https://{{ service.domain }}/"
class="flex flex-col basis-11/12 md:basis-5/12 xl:basis-3/12 rounded-lg p-4 m-4 h-60 hover:scale-105 transition bg-surface dark:bg-surface-dark border hover:border-2 border-base-dark dark:border-surface-dark hover:border-surface-dark dark:hover:border-surface">
<div class="flex flex-row flex-center basis-1/3">
<img src="/assets/images/{{ service.name | lower }}.png" alt="{{ service.name }} logo"
class="w-16 dark:hidden">
<img src="/assets/images/{{ service.name | lower }}-dark.png" alt="{{ service.name }} logo"
class="w-16 hidden dark:inline-block">
<div class="flex flex-col justify-center ml-4">
<h3>{{ service.name }}</h3>
<p class="text-subtle dark:text-subtle-dark">{{ service.domain }}</p>
</div>
</div>
<p class="mt-4 basis-1/3">{{ service.description }}</p>
<div class="flex flex-row items-end basis-1/3">
<button class="rounded-lg h-7 px-4 text-center text-text-dark bg-overlay dark:bg-overlay-dark"><i
class="fa-solid fa-code"></i> {{ service.language }}
</button>
</div>
</a>
{% endfor %}
</div>
{% endblock %}