einundzwanzig/einundzwanzig-portal
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git synced 2025-12-11 06:46:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

[newPage: Buecherverleih] resonsive + more design

Browse Source
This commit is contained in:
p.sterz
2023-07-21 19:49:40 +02:00
parent 576cada6b1
commit f19590a7e0
1 changed files with 33 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
resources/views/livewire/books-for-plebs/book-rental-guide.blade.php
View File

@@ -10,7 +10,6 @@
.telegram-blue { color: #0088cc; } .telegram-blue { color: #0088cc; }
.button-hover:hover { background-color: #FF9900; color: #fff;} .button-hover:hover { background-color: #FF9900; color: #fff;}
.link-gray { color: #aaaaaa; } .link-gray { color: #aaaaaa; }
/* Buttons Text weiß und beim Hover Hintergrundfarbe Bitcoin-Orange */
.btn, x-button { .btn, x-button {
color: #fff; color: #fff;
} }
@@ -24,14 +23,13 @@
<div class="h-screen w-full"> <div class="h-screen w-full">
<livewire:frontend.header :country="\App\Models\Country::query()->where('code', 'de')->first()"/> <livewire:frontend.header :country="\App\Models\Country::query()->where('code', 'de')->first()"/>
<div class="px-8 md:px-24 py-5"> <div class="px-4 md:px-8 lg:px-24 py-5">
<div class="flex justify-between items-center mb-8"> <div class="flex flex-col md:flex-row justify-between items-center mb-8">
<h1 class="text-5xl text-orange-500">Anleitung zum Bücherverleih</h1> <h1 class="text-4xl md:text-5xl text-orange-500 mb-4 md:mb-0">Anleitung zum Bücherverleih</h1>
<img src="{{ asset('/img/apple_touch_icon.png') }}" alt="Buch Etiketten" class="mb-4 object-cover h-32 rounded-md shadow-md"> <img src="{{ asset('/img/apple_touch_icon.png') }}" alt="Buch Etiketten" class="object-cover h-32 rounded-md shadow-md">
</div> </div>
<h2 class="text-3xl mb-4 text-white">Hallo Pleb,</h2> <h2 class="text-2xl md:text-3xl mb-4 text-white">Hallo Pleb,</h2>
<p class="text-lg mb-8 text-white"> <p class="text-lg mb-8 text-white">
Vielen Dank, dass du dich dazu entschieden hast, deine <span class="text-orange-500">₿itcoin-Bücher</span> zur Verfügung zu stellen. Vielen Dank, dass du dich dazu entschieden hast, deine <span class="text-orange-500">₿itcoin-Bücher</span> zur Verfügung zu stellen.
@@ -48,12 +46,12 @@
<a href="https://t.me/LottiTheFuchs" target="_blank" class="text-orange-500 underline telegram-blue"><i class="fab fa-telegram mr-2"></i>@LottiTheFuchs</a> <a href="https://t.me/LottiTheFuchs" target="_blank" class="text-orange-500 underline telegram-blue"><i class="fab fa-telegram mr-2"></i>@LottiTheFuchs</a>
</p> <br> </p> <br>
<div class="grid grid-cols-2 gap-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div class="flex flex-col items-start"> <div class="flex flex-col items-center">
<h2 class="text-2xl mb-2 text-orange-500">Bücheretiketten</h2> <h2 class="text-2xl mb-2 text-orange-500">Bücheretiketten</h2>
<p class="text-lg text-gray-300 mb-2">(Zum Editieren brauchst du <a href="https://www.adobe.com/de/products/illustrator.html" target="_blank" class="text-orange-500 underline link-gray">Adobe Illustrator)</a></p> <p class="text-lg text-gray-300 mb-2">(Zum Editieren brauchst du <a href="https://www.adobe.com/de/products/illustrator.html" target="_blank" class="text-orange-500 underline link-gray">Adobe Illustrator)</a></p>
<img src="{{ asset('/img/etiketten-min.jpeg') }}" alt="Buch Etiketten" class="mb-4 object-cover h-64 rounded-md shadow-md"> <img src="{{ asset('/img/etiketten-min.jpeg') }}" alt="Buch Etiketten" class="mb-4 object-cover h-64 rounded-md shadow-md">
<div class="flex space-x-2"> <div class="flex justify-center space-x-2">
<button class="btn bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700"> <button class="btn bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700">
<p class="text-white"> <p class="text-white">
Source-Datei Download Source-Datei Download
@@ -64,20 +62,10 @@
Beispiel-Datei Download Beispiel-Datei Download
</p> </p>
</button> </button>
<!-- <x-button download href="{{ asset('assets/book-etiketten-source.jpg') }}" class="mt-2 bg-blue-500 text-white py-2 px-4 rounded">
<p class="text-white">
Source-Datei Download
</p>
</x-button>
<x-button download href="{{ asset('/img/etiketten-min.jpeg') }}" class="mt-2 bg-blue-500 text-white py-2 px-4 rounded">
<p class="text-white">
Beispiel-Datei Download
</p>
</x-button> -->
</div> </div>
</div> </div>
<div class="flex flex-col items-start"> <div class="flex flex-col items-center">
<h2 class="text-2xl mb-2 text-orange-500">Flyer</h2> <h2 class="text-2xl mb-2 text-orange-500">Flyer</h2>
<p class="text-lg text-gray-300 mb-2">(Zum Editieren brauchst du <a href="https://www.adobe.com/de/products/illustrator.html" target="_blank" class="text-orange-500 underline link-gray">Adobe Illustrator)</a></p> <p class="text-lg text-gray-300 mb-2">(Zum Editieren brauchst du <a href="https://www.adobe.com/de/products/illustrator.html" target="_blank" class="text-orange-500 underline link-gray">Adobe Illustrator)</a></p>
@@ -93,16 +81,6 @@
Beispiel-Datei Download Beispiel-Datei Download
</p> </p>
</button> </button>
<!-- <x-button download href="{{ asset('assets/book-etiketten-source.jpg') }}" class="mt-2 bg-blue-500 text-white py-2 px-4 rounded">
<p class="text-white">
Source-Datei Download
</p>
</x-button>
<x-button download href="{{ asset('/img/etiketten-min.jpeg') }}" class="mt-2 bg-blue-500 text-white py-2 px-4 rounded">
<p class="text-white">
Beispiel-Datei Download
</p>
</x-button> -->
</div> </div>
</div> </div>
</div> </div>
@@ -121,7 +99,8 @@
</p> </p>
<p class="text-lg text-white"> <p class="text-lg text-white">
Für die sichere Lagerung deiner Bücher empfehlen wir einen Meetup-Ort, an dem du regelmäßig bist und die Bücher auch sicher verstaut werden können. Um sicherzustellen, dass du nicht betrogen wirst, haben wir auf dem Etikett ein Feld namens "Leih-Bedingung" eingerichtet. Hier kannst du einen Pfand bzw. Gegenwert sowie eine wöchentliche oder monatliche Leihgebühr festlegen. Für die sichere Lagerung deiner Bücher empfehlen wir einen Meetup-Ort, an dem du regelmäßig bist und die Bücher auch sicher verstaut werden können. Um sicherzustellen, dass
der QR-Code nicht entfernt und ausgetauscht wird, empfehlen wir, dass du die Seiten mit Klebeband verbindest oder den QR-Code mit einer Heißklebepistole auf das Buch klebst.
</p> </p>
<p class="text-lg text-white mt-8"> <p class="text-lg text-white mt-8">
@@ -129,8 +108,23 @@
</p> </p>
<p class="text-lg text-white"> <p class="text-lg text-white">
<a href="https://t.me/BOOKRING4SATS" target="_blank" class="text-orange-500 underline telegram-blue"><i class="fab fa-telegram mr-2"></i>@BOOKRING4SATS</a> <a href="https://t.me/BOOKRING4SATS" target="_blank" class="text-orange-500 underline telegram-blue">
<i class="fab fa-telegram mr-2"></i>@BOOKRING4SATS
</a>
</p> </p>
<p class="text-lg mt-8 text-white font-bold">
<i class="fas fa-book mr-2 text-orange-500"></i>Vielen Dank, dass du deine Bücher zur Verfügung stellst und uns dabei hilfst, das Wissen über ₿itcoin zu verbreiten!
</p>
<div class="flex items-center justify-center mt-4">
<img src="/img/btc-logo-6219386_1280.png" class="h-16" alt="">
<span class="text-orange-500">Happy Stacking</span>
</div>
</div> </div>
<livewire:frontend.footer/> <livewire:frontend.footer/>