html_content = """
Elementor Code-Generierung (Farbton #93bb00)
Projekt: Verkaufsstarke Landingpage für exklusive Immobilien in Rethymno, Kreta.
Dieses Dokument liefert Ihnen den fertigen, bereinigten HTML- und CSS-Code für Ihre Elementor-Website, exakt angepasst auf Ihren neuen, lebendigen mediterranen Grünton #93bb00.
Anwendung in Elementor: Erstellen Sie einen neuen Container in Elementor, fügen Sie ein HTML-Widget hinzu und kopieren Sie den jeweiligen Code-Block hinein. Ersetzen Sie die Platzhalter durch Ihre echten WordPress-Medien-URLs.
1. Hero-Section mit Such-Parametern (#93bb00)
Dieser Code erzeugt das beeindruckende Startbild mit dem neuen lebendig-grünen Farbverlauf-Overlay und der interaktiven Parameter-Suche.
<div class="med-hero-container">
<div class="med-hero-overlay">
<div class="med-hero-content">
<h1>Ihr Traum vom Leben im Norden Kretas</h1>
<p>Exklusive Immobilien in und um Rethymno – Wo mediterrane Lebensqualität auf zeitlose Eleganz trifft.</p>
</div>
<!-- Parameter-Suche -->
<div class="med-search-bar">
<div class="search-item">
<label>Preisklasse</label>
<select>
<option>Alle Preise</option>
<option>250.000 € - 500.000 €</option>
<option>500.000 € - 1.000.000 €</option>
<option>1.000.000 €+</option>
</select>
</div>
<div class="search-item">
<label>Wohnfläche</label>
<select>
<option>Beliebig</option>
<option>ab 80 m²</option>
<option>ab 140 m²</option>
<option>ab 200 m²</option>
</select>
</div>
<div class="search-item">
<label>Grundstück</label>
<select>
<option>Beliebig</option>
<option>ab 500 m²</option>
<option>ab 1.000 m²</option>
</select>
</div>
<button class="search-btn">Objekte filtern</button>
</div>
</div>
</div>
<style>
.med-hero-container {
background-image: url('IHR_WPMEDIA_LINK_ZU_HAFENANSICHT_JPG');
background-size: cover;
background-position: center;
min-height: 80vh;
position: relative;
font-family: sans-serif;
}
.med-hero-overlay {
background: linear-gradient(180deg, rgba(147,187,0,0.85) 0%, rgba(0,0,0,0.4) 100%);
min-height: 80vh;
padding: 60px 20px;
text-align: center;
}
.med-hero-content h1 {
color: #ffffff;
font-size: 3rem;
margin-bottom: 20px;
text-shadow: 1px 1px 10px rgba(0,0,0,0.4);
}
.med-hero-content p {
color: #f7faf0;
font-size: 1.3rem;
max-width: 800px;
margin: 0 auto 50px auto;
}
.med-search-bar {
background: #ffffff;
padding: 25px;
border-radius: 8px;
max-width: 900px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 15px;
}
.search-item {
flex: 1;
min-width: 180px;
text-align: left;
}
.search-item label {
display: block;
font-size: 0.85rem;
color: #444;
margin-bottom: 5px;
font-weight: bold;
}
.search-item select {
width: 100%;
padding: 12px;
border: 1px solid #cccccc;
border-radius: 4px;
background-color: #fafafa;
}
.search-btn {
background-color: #93bb00;
color: white;
border: none;
padding: 14px 28px;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
.search-btn:hover { background-color: #799a00; }
</style>2. Sehenswürdigkeiten-Raster (#93bb00)
Dieser responsive Code zeigt Ihre drei Original-Bilder als perfekt strukturierte Bildkarten für die Attraktionen der Region an.
<div class="med-sight-section">
<h2 class="section-title">Faszination Rethymno – Highlights der Region</h2>
<div class="sight-grid">
<!-- Karte 1 -->
<div class="sight-card">
<div class="sight-img" style="background-image: url('IHR_WPMEDIA_LINK_ZU_GALERIE_INNENSTADT_JPG');"></div>
<div class="sight-body">
<h3>Malerische Altstadt</h3>
<p>Verzauberte, blumengeschmückte Gassen voller Geschichte, venezianischer Einflüsse und gemütlicher kretischer Tavernen.</p>
</div>
</div>
<!-- Karte 2 -->
<div class="sight-card">
<div class="sight-img" style="background-image: url('IHR_WPMEDIA_LINK_ZU_KIRCHE_INNENSTADT_JPG');"></div>
<div class="sight-body">
<h3>Kultur & Geschichte</h3>
<p>Prachtvolle historische Kirchenfronten und Baudenkmäler zeugen von der tiefen kulturellen Tradition der Region.</p>
</div>
</div>
<!-- Karte 3 -->
<div class="sight-card">
<div class="sight-img" style="background-image: url('IHR_WPMEDIA_LINK_ZU_HAFENANSICHT_JPG');"></div>
<div class="sight-body">
<h3>Venezianischer Hafen</h3>
<p>Das pulsierende Herz Rethymnos mit glitzerndem Wasser, fangfrischem Fisch und dem markanten historischen Leuchtturm.</p>
</div>
</div>
</div>
</div>
<style>
.med-sight-section { padding: 60px 20px; background-color: #fafbfc; text-align: center; font-family: sans-serif; }
.section-title { color: #2c3e50; margin-bottom: 40px; font-size: 2rem; }
.sight-grid { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.sight-card { background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); overflow: hidden; flex: 1; min-width: 280px; max-width: 380px; text-align: left; transition: transform 0.3s; }
.sight-card:hover { transform: translateY(-5px); }
.sight-img { height: 220px; background-size: cover; background-position: center; }
.sight-body { padding: 22px; }
.sight-body h3 { margin: 0 0 12px 0; color: #93bb00; font-size: 1.25rem; }
.sight-body p { color: #666666; font-size: 0.95rem; margin: 0; line-height: 1.4; }
</style>