footer fixed

This commit is contained in:
Benjamin Takats
2022-12-12 18:52:03 +01:00
parent 1549fb0f43
commit e18c352f7b
4 changed files with 136 additions and 134 deletions

View File

@@ -8,6 +8,6 @@ class Welcome extends Component
{ {
public function render() public function render()
{ {
return view('livewire.frontend.welcome'); return view('livewire.frontend.welcome')->layout('layouts.guest');
} }
} }

View File

@@ -56,7 +56,7 @@
</style> </style>
</head> </head>
<body class="font-sans antialiased bg-21gray dark"> <body class="font-sans antialiased bg-21gray dark">
<x-notifications z-index="z-50" blur="md" align="center"/> {{--<x-notifications z-index="z-50" blur="md" align="center"/>--}}
{{ $slot }} {{ $slot }}
@stack('modals') @stack('modals')
@livewireScripts @livewireScripts

View File

@@ -1,4 +1,4 @@
<div class="bottom-0 py-6 bg-gray-900 w-full"> <div class="py-6 bg-gray-900 w-full">
<div class="px-10 mx-auto max-w-7xl"> <div class="px-10 mx-auto max-w-7xl">
<div class="flex flex-col items-center md:flex-row md:justify-between"> <div class="flex flex-col items-center md:flex-row md:justify-between">
<a href="#_"> <a href="#_">

View File

@@ -1,146 +1,148 @@
<div class="bg-21gray flex flex-col h-screen justify-between"> <div class="bg-21gray flex flex-col justify-between">
<section class="relative px-10 py-16 overflow-hidden"> <section class="relative px-10 pt-16 pb-24 sm:py-16">
<img class="absolute left-0 z-0 w-3/4 transform -translate-y-1/2 opacity-70 top-1/2" <img class="absolute h-43 left-0 z-0 w-3/4 transform -translate-y-1/2 opacity-70 top-1/2"
src="{{ asset('img/gradient-blob.svg') }}"> src="{{ asset('img/gradient-blob.svg') }}">
<img class="absolute left-0 z-0 object-cover object-center w-full h-full opacity-50 top-24" <img class="absolute left-0 z-0 object-cover object-center w-full h-full opacity-50 top-24"
src="https://cdn.devdojo.com/tails/images/swirl-white.svg"> src="https://cdn.devdojo.com/tails/images/swirl-white.svg">
<div class="container relative z-10 px-4 mx-auto"> <div class="container relative z-10 px-4 mx-auto">
<div class="w-full mb-8 sm:w-1/2 md:w-3/4 sm:pr-4 md:pr-12 sm:-mb-32 md:-mb-24 lg:-mb-36 xl:-mb-28"> <div class="w-full mb-8 sm:w-1/2 md:w-3/4 sm:pr-4 md:pr-12 sm:-mb-32 md:-mb-24 lg:-mb-36 xl:-mb-28">
<h2 class="tracking-widest text-amber-500 uppercase">Einundzwanzig</h2> <h2 class="tracking-widest text-amber-500 uppercase">Einundzwanzig</h2>
<p class="my-3 text-5xl font-bold tracking-tighter text-amber-500 lg:text-6xl">Bitcoin Portal</p> <p class="my-3 text-5xl font-bold tracking-tighter text-amber-500 lg:text-6xl">Bitcoin Portal</p>
<p class="max-w-sm text-lg text-gray-200"> <p class="max-w-sm text-lg text-gray-200">
Eine Bitcoin Community für alle. Eine Bitcoin Community für alle.
</p> </p>
</div> </div>
<div class="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"> <div class="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
<div class="row-span-2 col-span-full sm:col-span-1 md:col-start-1 sm:row-start-2 md:row-start-3"> <div class="row-span-2 col-span-full sm:col-span-1 md:col-start-1 sm:row-start-2 md:row-start-3">
<a href="{{ route('meetup.table.meetup', ['country' => 'de']) }}" <a href="{{ route('meetup.table.meetup', ['country' => 'de']) }}"
class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group" class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group"
style="aspect-ratio: 1/1;"> style="aspect-ratio: 1/1;">
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<div <div
class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div> class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div>
<img <img
class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110" class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110"
src="{{ asset('img/meetup_saarland.jpg') }}" alt=""> src="{{ asset('img/meetup_saarland.jpg') }}" alt="">
</div> </div>
<div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7"> <div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7">
<span <span
class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Get together</span> class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Get together</span>
<h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl"> <h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl">
Meetups Meetups
</h4> </h4>
</div> </div>
</a> </a>
</div> </div>
<div <div
class="row-span-2 col-span-full sm:col-span-1 md:col-start-1 xl:col-start-2 sm:row-start-4 md:row-start-5 xl:row-start-2"> class="row-span-2 col-span-full sm:col-span-1 md:col-start-1 xl:col-start-2 sm:row-start-4 md:row-start-5 xl:row-start-2">
<a href="{{ route('school.table.city', ['country' => 'de']) }}" <a href="{{ route('school.table.city', ['country' => 'de']) }}"
class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group" class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group"
style="aspect-ratio: 1/1;"> style="aspect-ratio: 1/1;">
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<div <div
class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div> class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div>
<img <img
class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110" class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110"
src="{{ asset('img/vhs_kurs.jpg') }}" alt=""> src="{{ asset('img/vhs_kurs.jpg') }}" alt="">
</div> </div>
<div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7"> <div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7">
<span <span
class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Education</span> class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Education</span>
<h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl"> <h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl">
Kurse Kurse
</h4> </h4>
</div> </div>
</a> </a>
</div> </div>
<div <div
class="row-span-2 col-span-full sm:col-span-1 md:col-start-2 xl:col-start-2 sm:row-start-6 md:row-start-2 xl:row-start-4"> class="row-span-2 col-span-full sm:col-span-1 md:col-start-2 xl:col-start-2 sm:row-start-6 md:row-start-2 xl:row-start-4">
<a href="{{ route('library.table.libraryItems', ['country' => 'de']) }}" <a href="{{ route('library.table.libraryItems', ['country' => 'de']) }}"
class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group" class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group"
style="aspect-ratio: 1/1;"> style="aspect-ratio: 1/1;">
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<div <div
class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div> class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div>
<img <img
class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110" class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110"
src="{{ asset('img/Krypto-Fiat-Bros.webp') }}" alt=""> src="{{ asset('img/Krypto-Fiat-Bros.webp') }}" alt="">
</div> </div>
<div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7"> <div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7">
<span <span
class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Content</span> class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Content</span>
<h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl"> <h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl">
Bibliothek Bibliothek
</h4> </h4>
</div> </div>
</a> </a>
</div> </div>
<div <div
class="row-span-2 col-span-full sm:col-span-1 md:col-start-2 xl:col-start-3 sm:row-start-1 md:row-start-4 xl:row-start-1"> class="row-span-2 col-span-full sm:col-span-1 md:col-start-2 xl:col-start-3 sm:row-start-1 md:row-start-4 xl:row-start-1">
<a href="{{ route('bitcoinEvent.table.bitcoinEvent', ['country' => 'de']) }}" <a href="{{ route('bitcoinEvent.table.bitcoinEvent', ['country' => 'de']) }}"
class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group" class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group"
style="aspect-ratio: 1/1;"> style="aspect-ratio: 1/1;">
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<div <div
class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div> class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div>
<img <img
class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110" class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110"
src="{{ asset('img/20220915_007_industryday.webp') }}" alt=""> src="{{ asset('img/20220915_007_industryday.webp') }}" alt="">
</div> </div>
<div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7"> <div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7">
<span <span
class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Worldwide</span> class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Worldwide</span>
<h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl"> <h4 class="text-2xl sm:text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl">
Veranstaltungen Veranstaltungen
</h4> </h4>
</div> </div>
</a> </a>
</div> </div>
<div <div
class="row-span-2 col-span-full sm:col-span-1 md:col-start-3 xl:col-start-3 sm:row-start-3 md:row-start-1 xl:row-start-3"> class="row-span-2 col-span-full sm:col-span-1 md:col-start-3 xl:col-start-3 sm:row-start-3 md:row-start-1 xl:row-start-3">
<a href="{{ route('bookCases.table.bookcases', ['country' => 'de']) }}" <a href="{{ route('bookCases.table.bookcases', ['country' => 'de']) }}"
class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group" class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group"
style="aspect-ratio: 1/1;"> style="aspect-ratio: 1/1;">
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<div <div
class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div> class="absolute bottom-0 left-0 z-10 w-full h-full opacity-30 bg-gradient-to-b from-transparent to-gray-900"></div>
<img <img
class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110" class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110"
src="{{ asset('img/aprycot-media-bitcoin-21-lektionen-01.webp') }}" alt=""> src="{{ asset('img/aprycot-media-bitcoin-21-lektionen-01.webp') }}" alt="">
</div> </div>
<div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7"> <div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7">
<span <span
class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Reading</span> class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Reading</span>
<h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl"> <h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl">
Bücher-Schränke Bücher-Schränke
</h4> </h4>
</div> </div>
</a> </a>
</div>
{{--<div
class="row-span-2 col-span-full sm:col-span-1 md:col-start-3 xl:col-start-4 sm:row-start-5 md:row-start-3 xl:row-start-2">
<a href="{{ route('bookCases.table.bookcases', ['country' => 'de']) }}"
class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group"
style="aspect-ratio: 1/1;">
<div class="absolute inset-0 w-full h-full">
<div
class="absolute bottom-0 left-0 z-10 w-full h-full bg-gradient-to-b from-transparent to-gray-900 opacity-30"></div>
<img
class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110"
src="{{ asset('img/aprycot-media-bitcoin-21-lektionen-01.webp') }}" alt="">
</div>
<div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7">
<span
class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Reading</span>
<h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl">
Bücher-Schränke
</h4>
</div>
</a>
</div>--}}
</div> </div>
{{--<div
class="row-span-2 col-span-full sm:col-span-1 md:col-start-3 xl:col-start-4 sm:row-start-5 md:row-start-3 xl:row-start-2">
<a href="{{ route('bookCases.table.bookcases', ['country' => 'de']) }}"
class="relative flex flex-col items-start justify-end w-full h-full overflow-hidden bg-black shadow-lg rounded-xl group"
style="aspect-ratio: 1/1;">
<div class="absolute inset-0 w-full h-full">
<div
class="absolute bottom-0 left-0 z-10 w-full h-full bg-gradient-to-b from-transparent to-gray-900 opacity-30"></div>
<img
class="absolute inset-0 object-cover object-center w-full h-full transition duration-500 lg:opacity-80 group-hover:opacity-100 group-hover:scale-110"
src="{{ asset('img/aprycot-media-bitcoin-21-lektionen-01.webp') }}" alt="">
</div>
<div class="relative z-10 flex flex-col items-start justify-start w-full px-6 py-7">
<span
class="px-2 py-1 mb-3 text-xs font-semibold tracking-tight text-white uppercase bg-amber-500 rounded-md">Reading</span>
<h4 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-3xl md:text-2xl lg:text-3xl">
Bücher-Schränke
</h4>
</div>
</a>
</div>--}}
</div> </div>
</div> </section>
</section>
{{-- FOOTER --}} {{-- FOOTER --}}
</div>
<div class="fixed bottom-0 w-full">
<livewire:frontend.footer/> <livewire:frontend.footer/>
</div> </div>