<!DOCTYPE html>
<html lang=“de“>
<head>
<meta charset=“UTF-8″>
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
<title>Barbershop</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #1a1a1a;
color: #ffffff;
}
.navbar {
background-color: #333;
padding: 15px;
text-align: center;
}
.navbar a {
color: #ffffff;
text-decoration: none;
padding: 14px 20px;
display: inline-block;
}
.hero {
position: relative;
text-align: center;
color: white;
}
.hero img {
width: 100%;
height: auto;
opacity: 0.8;
}
.hero-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.hero-text h1 {
font-size: 50px;
}
.hero-text button {
padding: 15px 30px;
font-size: 20px;
background-color: #e63946;
border: none;
color: white;
cursor: pointer;
border-radius: 5px;
}
.section {
padding: 50px 20px;
text-align: center;
}
.section img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
.section h2 {
margin-bottom: 20px;
font-size: 32px;
}
.section p {
font-size: 20px;
}
.button-section {
background-color: #2b2b2b;
padding: 20px;
}
.button-section button {
padding: 15px 30px;
font-size: 20px;
background-color: #e63946;
border: none;
color: white;
cursor: pointer;
border-radius: 5px;
}
.footer {
background-color: #333;
padding: 30px 20px;
text-align: center;
}
.footer p {
margin: 5px 0;
}
</style>
</head>
<body>

<div class=“navbar“>
<a href=“#home“>Home</a>
<a href=“#services“>Services</a>
<a href=“#gallery“>Gallery</a>
<a href=“#contact“>Contact</a>
</div>

<div class=“hero“>
<img src=“path-to-your-hero-image.jpg“ alt=“Barber cutting hair“>
<div class=“hero-text“>
<h1>Jetzt Termin sichern und direkt loslegen!</h1>
<button>JETZT ANMELDEN</button>
</div>
</div>

<div class=“section“>
<img src=“path-to-your-image-1.jpg“ alt=“Precision Haircut“>
<h2>Präzision trifft Stil.</h2>
<p>Dein Look, perfekt zugeschnitten.</p>
</div>

<div class=“section“>
<img src=“path-to-your-image-2.jpg“ alt=“Modern Look“>
<h2>Frisch. Modern. Individuell.</h2>
</div>

<div class=“section“>
<img src=“path-to-your-image-3.jpg“ alt=“Stylish Beard and Haircut“>
<h2>Stilvoller Schnitt. Maximale Wirkung.</h2>
</div>

<div class=“button-section“>
<button>JETZT BUCHEN</button>
</div>

<div class=“footer“>
<p>LOCATION: Hauptstraße 100, 40000 Beispielstadt</p>
<p>Öffnungszeiten: Dienstag – Freitag: 10:00 – 12:00 / 14:00 – 18:00 Uhr, Samstag: 10:00 – 16:00 Uhr</p>
<p>Kontakt: Telefon: 065-0081031 | Email: info@barbershop.de</p>
<p>Bewertungen: ⭐⭐⭐⭐⭐</p>
</div>

</body>
</html>