create the blog page section

This commit is contained in:
2026-01-08 15:14:52 +05:30
parent 0cc9443e5d
commit 21d864f8e9
2 changed files with 67 additions and 67 deletions

View File

@@ -105,7 +105,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-8 justify-items-center m-auto w-[80%]">
<!-- Card -->
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/formal.jpg' %}"
@@ -119,13 +119,13 @@
<!-- Date + Tags -->
<div>
<div class="flex items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<span class="text-white text-sm font-bold">December 2021</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Verletzungen
</span>
</div>
@@ -157,7 +157,7 @@
<!-- Duplicate Cards -->
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/prov.png' %}"
alt="Former DFB physio"
@@ -170,16 +170,16 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-1 mb-4">
<span class="text-gray-300 text-sm font-bold">November 2025</span>
<span class="text-white text-sm font-bold">November 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Challenges
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
progress
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
training
</span>
</div>
@@ -208,7 +208,7 @@
</div>
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/recover.png' %}"
@@ -222,17 +222,17 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">September 2025</span>
<span class="text-white text-sm font-bold">September 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Challenges
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Features
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Features
</span>
</div>
@@ -262,7 +262,7 @@
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/disrupt.png' %}"
@@ -276,16 +276,16 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">September 2025</span>
<span class="text-white text-sm font-bold">September 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Challenges
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Features
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
training
</span>
@@ -315,7 +315,7 @@
</div>
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/ball.png' %}"
@@ -329,17 +329,17 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">September 2025</span>
<span class="text-white text-sm font-bold">September 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Features
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
progress
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
training
</span>
</div>
@@ -369,7 +369,7 @@
</div>
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/ras.png' %}"
@@ -383,16 +383,16 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">September 2025</span>
<span class="text-white text-sm font-bold">September 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Features
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Injuries
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
training
</span>
</div>
@@ -421,7 +421,7 @@
</div>
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/close.jpg' %}"
@@ -434,18 +434,18 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">August 2025</span>
<div class="flex flex-wrap items-center gap-1 mb-4">
<span class="text-white text-sm font-bold">August 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Women's football
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Injuries
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
progress
</span>
</div>
@@ -474,7 +474,7 @@
</div>
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/july.jpg' %}"
@@ -487,18 +487,18 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">July 2025</span>
<div class="flex flex-wrap items-center gap-1 mb-4">
<span class="text-white text-sm font-bold">July 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Women's football
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Stories
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
engagement
</span>
</div>
@@ -527,7 +527,7 @@
</div>
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/women.jpg' %}"
@@ -540,17 +540,17 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">June 2025</span>
<div class="flex flex-wrap items-center gap-1 mb-4">
<span class="text-white text-sm font-bold">June 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Women's football
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
training
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Injuries
</span>
</div>
@@ -578,7 +578,7 @@
</div>
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/train.jpg' %}"
@@ -591,18 +591,18 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">June 2025</span>
<div class="flex flex-wrap items-center gap-1 mb-4">
<span class="text-white text-sm font-bold">June 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Women's football
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
training
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Injuries
</span>
</div>
@@ -631,7 +631,7 @@
</div>
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/pattelar.jpg' %}"
@@ -644,17 +644,17 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">January 2025</span>
<div class="flex flex-wrap items-center gap-1 mb-4">
<span class="text-white text-sm font-bold">January 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Performance App
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Injuries
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white" >
regeneration
</span>
</div>
@@ -684,10 +684,10 @@
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col w-[29rem]">
<!-- Image -->
<img src="{% static 'images/pattelar.jpg' %}"
<img src="{% static 'images/down.jpg' %}"
alt="Former DFB physio"
class="w-full h-64 object-cover rounded-[4rem]"
/>
@@ -697,17 +697,17 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">January 2025</span>
<div class="flex flex-wrap items-center gap-1 mb-4">
<span class="text-white text-sm font-bold">January 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Performance App
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
Injuries
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium text-white">
regeneration
</span>
</div>