<style>
body {
background-color: #fffff;–––––
font-family: 'Raleway', sans-serif;
color: #1a1a1a;
margin: 2rem;
}
.form-container {
background: #FFF2E;
padding: 2rem;
border-radius: 2rem;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
max-width: 600px;
margin: auto;
}
h2 {
font-weight: 700;
font-size: 2rem;
margin-bottom: 2rem;
}
label {
display: block;
margin: 1.2rem 0 0.5rem;
font-size: 1.1rem;
font-weight: 500;
}
select {
width: 100%;
padding: 1rem;
border-radius: 1rem;
border: 1px solid #e0d6c5;
font-size: 1rem;
background-color: #fff;
appearance: none;
}
.btn {
margin-top: 2rem;
width: 100%;
padding: 1.2rem;
background-color: #DE9D45;
color: white;
font-size: 1.2rem;
font-weight: 600;
border: none;
border-radius: 1.5rem;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.btn:hover {
transform: scale(1.03);
}
.result {
margin-top: 2rem;
padding: 2rem;
background: #FFF2DE;
border-radius: 1rem;
text-align: center;
}
.result strong {
display: block;
font-size: 1.4rem;
margin-top: 0.5rem;
}
.result a {
display: inline-block;
margin-top: 1rem;
background: #DE9D45;
color: white;
padding: 1rem 2rem;
border-radius: 1rem;
text-decoration: none;
font-weight: 600;
transition: transform 0.2s ease-in-out;
}
.result a:hover {
transform: scale(1.03);
}
</style>
<div class="form-container">
<h2>Hosting-Empfehlung finden</h2>
<label for="type">1. Was für eine Seite planst du?</label>
<select id="type" onchange="showProducts()">
<option value="">Bitte auswählen</option>
<option value="1000">Blog oder Portfolio</option>
<option value="2000">Standard-Webseite</option>
<option value="4000">Online-Shop oder Business-Projekt</option>
<option value="8000">Großprojekt oder Agentur</option>
</select>
<label for="pages">2. Wie viele Seiteninhalte / Unterseiten brauchst du?</label>
<select id="pages">
<option value="">Bitte auswählen</option>
<option value="1">1–5</option>
<option value="2">5–15</option>
<option value="3">Über 15</option>
</select>
<div id="product-question" style="display: none;">
<label for="products">2a. Wie viele Produkte planst du?</label>
<select id="products">
<option value="">Bitte auswählen</option>
<option value="1">Unter 100 Produkte</option>
<option value="2">100–500 Produkte</option>
<option value="3">Über 500 Produkte</option>
</select>
</div>
<label for="priority">3. Welche Funktion ist dir am wichtigsten?</label>
<select id="priority">
<option value="">Bitte auswählen</option>
<option value="performance">Performance</option>
<option value="preis">Preis-Leistung</option>
<option value="skalierbarkeit">Skalierbarkeit</option>
</select>
<button class="btn" onclick="getRecommendation()">JETZT HOSTING FINDEN</button>
<div class="result" id="result" style="display:none;">
<div>Empfehlung für dein Projekt</div>
<strong id="package-name">Webhosting 1000</strong>
<a id="package-link" href="#" target="_blank">JETZT PAKET AUFRUFEN</a>
</div>
</div>
<script>
function showProducts() {
const siteType = document.getElementById('type').value;
const productQ = document.getElementById('product-question');
productQ.style.display = siteType === "4000" ? "block" : "none";
}
function getRecommendation() {
const siteType = document.getElementById('type').value;
const result = document.getElementById('result');
const name = document.getElementById('package-name');
const link = document.getElementById('package-link');
let recommendation = "Webhosting 1000";
let url = "https://example.com/1000";
if (siteType === "2000") {
recommendation = "Webhosting 2000";
url = "https://example.com/2000";
} else if (siteType === "4000") {
recommendation = "Webhosting 4000";
url = "https://example.com/4000";
} else if (siteType === "8000") {
recommendation = "Webhosting 8000";
url = "https://example.com/8000";
}
name.textContent = recommendation;
link.href = url;
result.style.display = "block";
}
</script>
