jason/db-trocken-innenausbau.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dynamische Layoutänderung anhand der Bildschirmgröße

Browse Source
This commit is contained in:
Jason Streifling 2024-10-05 18:04:13 +02:00
parent 7e369dc6d9
commit 0962215824
3 changed files with 47 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
impressum.html
View File

@ -16,17 +16,17 @@
als endgültig betrachtet werden. als endgültig betrachtet werden.
</p> </p>
<div class="items-center container flex gap-16 justify-between max-w-screen-xl m-auto py-8"> <div class="items-center container flex gap-16 justify-between max-w-screen-xl m-auto p-8">
<img class="max-w-32" src="images/logo-transparent.webp"> <img class="max-w-32" src="images/logo-transparent.webp">
<nav class="flex gap-8 right-0"> <nav class="flex flex-wrap gap-x-8 gap-y-4 right-0">
<a href="index.html">Trocken- und Innenausbau</a> <a href="index.html">Trocken- und Innenausbau</a>
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
</nav> </nav>
</div> </div>
</header> </header>
<main class="container max-w-screen-xl mx-auto py-16"> <main class="container max-w-screen-xl mx-auto px-8 py-16">
<h1>Impressum</h1> <h1>Impressum</h1>
<div class="mb-8"> <div class="mb-8">

68
index.html
View File

@ -16,10 +16,10 @@
als endgültig betrachtet werden. als endgültig betrachtet werden.
</p> </p>
<div class="items-center container flex gap-16 justify-between max-w-screen-xl m-auto py-8"> <div class="items-center container flex gap-16 justify-between max-w-screen-xl m-auto p-8">
<img class="max-w-32" src="images/logo-transparent.webp"> <img class="max-w-32" src="images/logo-transparent.webp">
<nav class="flex gap-8 right-0"> <nav class="flex flex-wrap gap-x-8 gap-y-4 right-0">
<a href="index.html">Trocken- und Innenausbau</a> <a href="index.html">Trocken- und Innenausbau</a>
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
</nav> </nav>
@ -29,14 +29,16 @@
<main> <main>
<section class="bg-stone-700 text-stone-50"> <section class="bg-stone-700 text-stone-50">
<div class="section"> <div class="section">
<div class="my-auto"> <img class="m-auto" src="images/baustelle2.webp">
<div class="m-auto">
<h2 class="text-center">Trocken- und Innenausbau</h2> <h2 class="text-center">Trocken- und Innenausbau</h2>
<p> <p>
Herzlich willkommen bei Dominik Bremer Trocken- und Innenausbau, Ihrem zuverlässigen Partner für Herzlich willkommen bei Dominik Bremer Trocken- und Innenausbau, Ihrem zuverlässigen Partner für
Trocken- und Innenausbau! Mit unserer langjährigen Erfahrung und einem hochqualifizierten Team Trocken- und Innenausbau! Mit unserer langjährigen Erfahrung und einem hochqualifizierten Team
bieten wir Ihnen umfassende Dienstleistungen, die Ihre Wohn- und Arbeitsräume in wahre bieten wir Ihnen umfassende Dienstleistungen, die Ihre Wohn- und Arbeitsräume in wahre
Wohlfühloasen verwandeln. Ob Renovierung, Umbau oder Neubau – wir stehen Ihnen mit Rat und Tat Wohlfühloasen verwandeln. Ob Renovierung, Umbau oder Neubau – wir stehen Ihnen mit Rat und Tat
zur Seite und setzen Ihre individuellen Wünsche und Vorstellungen präzise um. zur Seite und setzen Ihre individuellen Wünsche und Vorstellungen präzise um.<br><br>
Wir legen großen Wert auf Qualität, Termintreue und eine transparente Kommunikation. Von der Wir legen großen Wert auf Qualität, Termintreue und eine transparente Kommunikation. Von der
Planung und Beratung über die fachgerechte Ausführung bis hin zur abschließenden Planung und Beratung über die fachgerechte Ausführung bis hin zur abschließenden
@ -45,38 +47,15 @@
ästhetisch ansprechend sind. ästhetisch ansprechend sind.
</p> </p>
</div> </div>
<img class="my-auto" src="images/baustelle2.webp">
</div> </div>
</section> </section>
<section> <section>
<div class="section"> <div class="section">
<div class="gap-2 grid grid-cols-2 my-auto"> <div class="m-auto">
<div class="flex justify-end">
<img class="max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-start">
<img class="max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-end">
<img class="max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-start">
<img class="max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-end">
<img class="max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-start">
<img class="max-w-64" src="images/baustelle.webp">
</div>
</div>
<div class="my-auto">
<h2 class="text-center">Unsere Leistungen</h2> <h2 class="text-center">Unsere Leistungen</h2>
<ul class="grid grid-cols-2 gap-2 mt-4"> <ul class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">
<li class="flex gap-2"> <li class="flex gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon w-6" viewBox="0 0 512 512"> <svg xmlns="http://www.w3.org/2000/svg" class="ionicon w-6" viewBox="0 0 512 512">
<path class="text-amber-600" <path class="text-amber-600"
@ -151,12 +130,33 @@
kreativen Maler- und Lackierarbeiten ein perfektes Finish Ihrer Räume garantieren. kreativen Maler- und Lackierarbeiten ein perfektes Finish Ihrer Räume garantieren.
</p> </p>
</div> </div>
<div class="gap-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 m-auto">
<div class="flex justify-end">
<img class="max-w-64 md:max-w-56 xl:max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-start md:justify-center lg:justify-start">
<img class="max-w-64 md:max-w-56 xl:max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-end md:justify-start lg:justify-end">
<img class="max-w-64 md:max-w-56 xl:max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-start md:justify-end lg:justify-start">
<img class="max-w-64 md:max-w-56 xl:max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-end md:justify-center lg:justify-end">
<img class="max-w-64 md:max-w-56 xl:max-w-64" src="images/baustelle.webp">
</div>
<div class="flex justify-start">
<img class="max-w-64 md:max-w-56 xl:max-w-64" src="images/baustelle.webp">
</div>
</div>
</div> </div>
</section> </section>
<section class="bg-stone-700 text-stone-50"> <section class="bg-stone-700 text-stone-50">
<div class="section"> <div class="section">
<div class="my-auto"> <div class="m-auto">
<h2 class="text-center">Kundenzufriedenheit</h2> <h2 class="text-center">Kundenzufriedenheit</h2>
<p> <p>
Ihre Zufriedenheit steht bei uns an erster Stelle. Wir arbeiten eng mit unseren Kunden zusammen, Ihre Zufriedenheit steht bei uns an erster Stelle. Wir arbeiten eng mit unseren Kunden zusammen,
@ -164,23 +164,23 @@
Ihre Anforderungen zu erfüllen, sondern Ihre Erwartungen zu übertreffen. Zahlreiche positive Ihre Anforderungen zu erfüllen, sondern Ihre Erwartungen zu übertreffen. Zahlreiche positive
Rückmeldungen und langjährige Kundenbeziehungen sind der Beweis für unsere Zuverlässigkeit und Rückmeldungen und langjährige Kundenbeziehungen sind der Beweis für unsere Zuverlässigkeit und
unser Engagement. Lassen Sie uns gemeinsam Ihr nächstes Projekt angehen und erleben Sie den unser Engagement. Lassen Sie uns gemeinsam Ihr nächstes Projekt angehen und erleben Sie den
Unterschied, den ein engagiertes und professionelles Team machen kann. Unterschied, den ein engagiertes und professionelles Team machen kann.<br><br>
Kontaktieren Sie uns noch heute und lassen Sie uns Ihr Projekt besprechen. Wir freuen uns Kontaktieren Sie uns noch heute und lassen Sie uns Ihr Projekt besprechen. Wir freuen uns
darauf, Ihre Vision Wirklichkeit werden zu lassen! darauf, Ihre Vision Wirklichkeit werden zu lassen!
</p> </p>
</div> </div>
<div class="my-auto"> <div class="m-auto">
<div class="relative"> <div class="relative">
<div class="absolute bg-amber-600 cursor-pointer h-16 left-20 rounded-full top-32 w-16" <div class="absolute bg-amber-600 cursor-pointer h-16 left-neg-32 rounded-full top-32 w-16"
id="prev-btn"> id="prev-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"> <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path class="text-stone-200" fill="none" stroke="currentColor" stroke-linecap="round" <path class="text-stone-200" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144" /> stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144" />
</svg> </svg>
</div> </div>
<div class="absolute bg-amber-600 cursor-pointer h-16 right-20 rounded-full top-32 w-16" <div class="absolute bg-amber-600 cursor-pointer h-16 right-neg-32 rounded-full top-32 w-16"
id="next-btn"> id="next-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"> <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path class="text-stone-200" fill="none" stroke="currentColor" stroke-linecap="round" <path class="text-stone-200" fill="none" stroke="currentColor" stroke-linecap="round"

12
styles/input.css
View File

@ -11,9 +11,17 @@ h2 {
} }
.card { .card {
@apply bg-stone-200 mx-auto p-12 rounded-xl text-stone-800 w-96 @apply bg-stone-200 mx-auto p-12 rounded-xl text-stone-800 w-72 sm:w-96
}
.left-neg-32 {
left: -32px;
}
.right-neg-32 {
right: -32px;
} }
.section { .section {
@apply container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto py-16 @apply container gap-16 grid grid-cols-1 lg:grid-cols-2 max-w-screen-xl mx-auto px-8 py-16
} }