Erster Wurf der Website
This commit is contained in:
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
tmp
|
||||
styles/style.css
|
||||
images/svg
|
||||
images/jpg
|
||||
BIN
images/baustelle.webp
Normal file
BIN
images/baustelle.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
images/baustelle2.webp
Normal file
BIN
images/baustelle2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
BIN
images/logo_transparent.webp
Normal file
BIN
images/logo_transparent.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
244
index.html
Normal file
244
index.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Dominik Bremer Trocken- und Innenausbau</title>
|
||||
<link href="styles/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body class="bg-stone-50 text-stone-950">
|
||||
<header>
|
||||
<div class="items-center container flex gap-16 justify-between max-w-screen-xl m-auto py-8">
|
||||
<img class="max-w-32" src="images/logo_transparent.webp">
|
||||
<nav class="flex gap-8 right-0">
|
||||
<a href="">Kontakt & Anfahrt</a>
|
||||
<a href="">Impressum</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="bg-stone-700 py-16 text-stone-50">
|
||||
<div class="container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto">
|
||||
<div class="my-auto">
|
||||
<h2 class="mb-4 text-center text-2xl">Trocken- und Innenausbau</h2>
|
||||
<p>
|
||||
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
|
||||
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
|
||||
zur Seite und setzen Ihre individuellen Wünsche und Vorstellungen präzise um.
|
||||
|
||||
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
|
||||
Qualitätskontrolle begleiten wir Sie durch jedes Projekt. Vertrauen Sie auf unsere Kompetenz und
|
||||
Leidenschaft für den Bau – gemeinsam schaffen wir Räume, die nicht nur funktional, sondern auch
|
||||
ästhetisch ansprechend sind.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img class="my-auto" src="images/baustelle2.webp">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16">
|
||||
<div class="container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto">
|
||||
<div class="gap-2 grid grid-cols-2 my-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="mb-4 text-center text-2xl">Unsere Leistungen</h2>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon w-6" viewBox="0 0 512 512">
|
||||
<path class="text-stone-800"
|
||||
d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
|
||||
fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" />
|
||||
<path class="text-stone-800" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272" />
|
||||
</svg>
|
||||
<span><strong>Trockenbau</strong></span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon w-6" viewBox="0 0 512 512">
|
||||
<path class="text-stone-800"
|
||||
d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
|
||||
fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" />
|
||||
<path class="text-stone-800" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272" />
|
||||
</svg>
|
||||
<span><strong>Innenausbau</strong></span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon w-6" viewBox="0 0 512 512">
|
||||
<path class="text-stone-800"
|
||||
d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
|
||||
fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" />
|
||||
<path class="text-stone-800" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272" />
|
||||
</svg>
|
||||
<span><strong>Renovierung und Sanierung</strong></span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon w-6" viewBox="0 0 512 512">
|
||||
<path class="text-stone-800"
|
||||
d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
|
||||
fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" />
|
||||
<path class="text-stone-800" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272" />
|
||||
</svg>
|
||||
<span><strong>Schallschutz und Dämmung</strong></span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon w-6" viewBox="0 0 512 512">
|
||||
<path class="text-stone-800"
|
||||
d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
|
||||
fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" />
|
||||
<path class="text-stone-800" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272" />
|
||||
</svg>
|
||||
<span><strong>Bodenbeläge</strong></span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon w-6" viewBox="0 0 512 512">
|
||||
<path class="text-stone-800"
|
||||
d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
|
||||
fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" />
|
||||
<path class="text-stone-800" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272" />
|
||||
</svg>
|
||||
<span><strong>Maler- und Lackierarbeiten</strong></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="mt-4">
|
||||
Unser Leistungsspektrum umfasst alle Aspekte des Trocken- und Innenausbaus. Wir bieten flexible
|
||||
und effiziente Lösungen für Wände, Decken und Böden, die sich perfekt an Ihre Bedürfnisse
|
||||
anpassen. Unsere maßgeschneiderten Konzepte für den Innenausbau sorgen dafür, dass Ihre Räume
|
||||
nicht nur funktional, sondern auch ästhetisch ansprechend gestaltet werden. Bei Renovierungen
|
||||
und Sanierungen bringen wir frischen Wind in alte Strukturen und sorgen dafür, dass Ihr Zuhause
|
||||
auf den neuesten Stand gebracht wird. Zudem bieten wir optimale Lösungen für Schallschutz und
|
||||
Dämmung, um ein angenehmes Raumklima und Ruhe zu gewährleisten. Unsere hochwertigen Bodenbeläge
|
||||
und die fachgerechte Verlegung sorgen für langlebige und ästhetische Böden, während unsere
|
||||
kreativen Maler- und Lackierarbeiten ein perfektes Finish Ihrer Räume garantieren.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-stone-700 py-24 text-stone-50">
|
||||
<div class="container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto">
|
||||
<div class="my-auto">
|
||||
<h2 class="mb-4 text-center text-2xl">Kundenzufriedenheit</h2>
|
||||
<p>
|
||||
Ihre Zufriedenheit steht bei uns an erster Stelle. Wir arbeiten eng mit unseren Kunden zusammen,
|
||||
um sicherzustellen, dass jedes Detail Ihren Erwartungen entspricht. Unser Ziel ist es, nicht nur
|
||||
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
|
||||
unser Engagement. Lassen Sie uns gemeinsam Ihr nächstes Projekt angehen und erleben Sie den
|
||||
Unterschied, den ein engagiertes und professionelles Team machen kann.
|
||||
|
||||
Kontaktieren Sie uns noch heute und lassen Sie uns Ihr Projekt besprechen. Wir freuen uns
|
||||
darauf, Ihre Vision Wirklichkeit werden zu lassen!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="my-auto">
|
||||
<div class="relative">
|
||||
<div class="absolute bg-stone-400 cursor-pointer h-16 left-20 rounded-full top-32 w-16"
|
||||
id="prev-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
|
||||
<path class="text-stone-800" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute bg-stone-400 cursor-pointer h-16 right-20 rounded-full top-32 w-16"
|
||||
id="next-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
|
||||
<path class="text-stone-800" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-gray-200 mx-auto w-96 p-12 rounded-xl text-gray-800">
|
||||
<p>
|
||||
Die Zusammenarbeit mit Herrn Bremer war hervorragend! Das Team war stets pünktlich und
|
||||
professionell. Besonders beeindruckt hat uns die hohe Qualität der Arbeit und die Liebe zum
|
||||
Detail. Das Ergebnis ist einfach perfekt und übertrifft unsere Erwartungen.
|
||||
</p>
|
||||
<p class="mt-4 text-center">- <strong>Anna Müller</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="card hidden bg-gray-200 mx-auto w-96 p-12 rounded-xl text-gray-800">
|
||||
<p>
|
||||
Wir sind begeistert von der Qualität und dem Service. Von der ersten Beratung bis zur
|
||||
Fertigstellung wurden wir hervorragend betreut. Unsere Wünsche wurden genau umgesetzt, und
|
||||
das Endergebnis ist besser, als wir es uns vorgestellt haben.
|
||||
</p>
|
||||
<p class="mt-4 text-center">- <strong>Thomas Schmidt</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="card hidden bg-gray-200 mx-auto w-96 p-12 rounded-xl text-gray-800">
|
||||
<p>
|
||||
Schnelle und saubere Arbeit. Das Team war immer freundlich und hat uns bei jedem Schritt des
|
||||
Projekts unterstützt. Wir sind sehr zufrieden mit dem Ergebnis und können die Firma nur
|
||||
weiterempfehlen.
|
||||
</p>
|
||||
<p class="mt-4 text-center">- <strong>Julia Becker</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="card hidden bg-gray-200 mx-auto w-96 p-12 rounded-xl text-gray-800">
|
||||
<p>
|
||||
Von der Planung bis zur Fertigstellung lief alles reibungslos. Das Team hat unsere
|
||||
Vorstellungen perfekt umgesetzt und war dabei immer zuverlässig und kompetent. Wir sind sehr
|
||||
zufrieden mit dem Ergebnis und werden sicher wieder auf ihre Dienstleistungen zurückgreifen.
|
||||
</p>
|
||||
<p class="mt-4 text-center">- <strong>Michael Fischer</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="my-24 text-stone-700">
|
||||
<div class="container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto">
|
||||
<div>
|
||||
<h2 class="text-2xl">Anschrift</h2>
|
||||
<p>Dominik Bremer Trocken- und Innenausbau</p>
|
||||
<p>Hagener Straße 18</p>
|
||||
<p>31535 Neustadt</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-2xl">Kontakt</h2>
|
||||
<p>Mobil: <a href="tel:+491749279364">0174 / 9279 364</a></p>
|
||||
<p>E-Mail: <a href="mailto:info@db-trocken-innenausbau.de">info@db-trocken-innenausbau.de</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
20
scripts/script.js
Normal file
20
scripts/script.js
Normal file
@@ -0,0 +1,20 @@
|
||||
const cards = document.querySelectorAll('.card');
|
||||
let currentIndex = 0;
|
||||
|
||||
document.getElementById('next-btn').addEventListener('click', () => {
|
||||
const currentCard = cards[currentIndex];
|
||||
currentIndex = (currentIndex + 1) % cards.length;
|
||||
const nextCard = cards[currentIndex];
|
||||
|
||||
currentCard.classList.add('hidden');
|
||||
nextCard.classList.remove('hidden');
|
||||
});
|
||||
|
||||
document.getElementById('prev-btn').addEventListener('click', () => {
|
||||
const currentCard = cards[currentIndex];
|
||||
currentIndex = (currentIndex - 1 + cards.length) % cards.length;
|
||||
const prevCard = cards[currentIndex];
|
||||
|
||||
prevCard.classList.remove('hidden');
|
||||
currentCard.classList.add('hidden');
|
||||
});
|
||||
3
styles/input.css
Normal file
3
styles/input.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
12
tailwind.config.js
Normal file
12
tailwind.config.js
Normal file
@@ -0,0 +1,12 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["*.{html,js}"],
|
||||
theme: {
|
||||
extend: {
|
||||
width: {
|
||||
'112': '28rem',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user