First implementation of TailwindCSS

This commit is contained in:
Juhn-Vitus Saß
2025-02-07 18:11:07 +01:00
parent 10849aa3eb
commit 00d73553c1
8 changed files with 943 additions and 1 deletions

View File

@@ -0,0 +1,15 @@
{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'core/t-base-style.css' %}">
<title>qivip</title>
</head>
<body>
{% include 'core/partials/_nav.html' %}
{% block content%}{% endblock %}
{% include 'core/partials/_footer.html' %}
</body>
</html>

View File

@@ -0,0 +1,15 @@
{% extends 'core/base.html' %}
{% block content %}
<div class="absolute grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">
<div class="text-center">
<h2 class="font-bold md:text-8xl text-6xl md:mb-8 text-blue-600">qivip </h2>
<h3 class="italic font-extralight sm:text-2xl text-md">Interaktives Lernen neu definiert.</h3>
</div>
<div class="grid sm:grid-cols-3 place-items-stretch text-center mt-8 gap-4 p-4 border-3 bg-blue-100 border-blue-100 rounded-md">
<a class="qp-a-button bg-green-500 text-white" href="#">Teilnehmen</a>
<a class="qp-a-button bg-indigo-500 text-white" href="#">Erstellen</a>
<a class="qp-a-button bg-purple-500 text-white" href="#">Verwalten</a>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,8 @@
<div class="absolute bottom-0 grid place-content-center gap-2 w-full">
<div class="flex space-x-2 pb-4">
<p class="text-sm font-extralight"><a href="#">Impressum</a></p>
<p class="text-sm font-extralight"><a href="#">Datenschutz</a></p>
<p class="text-sm font-extralight"><a href="#">Repository</a></p>
</div>
</div>

View File

@@ -0,0 +1,12 @@
<nav class="flex justify-between bg-blue-600 h-12 px-4 sm:px-6 lg:px-8 rounded-lg m-2 shadow-md">
<div class="flex items-center">
<h2 class="text-xl font-bold text-white hover:scale-110 transition duration-200"><a href="#">qivip</a></h2>
</div>
<div class="flex items-center">
<ul class="flex space-x-4 qp-nav-list">
<li><a href="#">Start</a></li>
<li><a href="#">Bibliothek</a></li>
<li><a href="#">Konto</a></li>
</ul>
</div>
</nav>