Experte für Webdesign Landing-Page-Prompt
Von Wikiprompt, der freien Prompt-Enzyklopädie
13. Okt. 2024
Experte für Webdesign Landing-Page-Prompt Eine Aufforderung, die eine KI anweist, als erfahrener Webdesigner zu agieren und Code für eine Landingpage zu generieren, basierend auf einer vom Nutzer bereitgestellten Zeichnung oder einem Mockup.
Prompt-InhaltSpeichern
🌐
Als erfahrener Webdesigner mit über 10 Jahren Erfahrung erstelle ich Ihnen den Code für die Landingpage, die Sie gezeichnet haben. Bitte beachten Sie, dass ich ohne das tatsächliche Bild nur eine generische, professionelle Landingpage-Struktur erstellen kann. Wenn Sie mir Details zu Ihrem Design (Farben, Layout, Sektionen) mitteilen, kann ich den Code entsprechend anpassen.
Hier ist ein vollständiges, responsives Beispiel:
```html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landingpage - Ihr Produkt</title>
<style>
/* ===== CSS Reset & Basis ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ===== Header / Navigation ===== */
header {
background: #ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: #2c3e50;
text-decoration: none;
}
.logo span {
color: #3498db;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: #555;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: #3498db;
}
.cta-btn {
background: #3498db;
color: white;
padding: 10px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: background 0.3s, transform 0.2s;
}
.cta-btn:hover {
background: #2980b9;
transform: translateY(-2px);
}
/* ===== Hero Section ===== */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 100px 0;
text-align: center;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 20px;
font-weight: 700;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
opacity: 0.9;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
background: white;
color: #764ba2;
padding: 15px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
}
.btn-primary:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn-secondary {
background: transparent;
color: white;
padding: 15px 35px;
border: 2px solid white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
}
.btn-secondary:hover {
background: rgba(255,255,255,0.1);
}
/* ===== Features Section ===== */
.features {
padding: 80px 0;
background: white;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
color: #2c3e50;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: #f8f9fa;
padding: 30px;
border-radius: 10px;
transition: transform 0.3s, box-shadow 0.3s;
text-align: center;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.feature-card h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: #2c3e50;
}
.feature-card p {
color: #666;
}
/* ===== About / Info Section ===== */
.about {
padding: 80px 0;
background: #f8f9fa;
}
.about-content {
display: flex;
align-items: center;
gap: 50px;
flex-wrap: wrap;
}
.about-text {
flex: 1;
min-width: 300px;
}
.about-text h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #2c3e50;
}
.about-text p {
color: #555;
margin-bottom: 15px;
}
.about-image {
flex: 1;
min-width: 300px;
background: #ddd;
height: 300px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 1.2rem;
}
/* ===== Testimonials ===== */
.testimonials {
padding: 80px 0;
background: white;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.testimonial-card {
background: #f8f9fa;
padding: 30px;
border-radius: 10px;
border-left: 4px solid #3498db;
}
.testimonial-card p {
font-style: italic;
margin-bottom: 15px;
color: #555;
}
.testimonial-author {
font-weight: 600;
color: #2c3e50;
}
/* ===== CTA Section ===== */
.cta-section {
background: #2c3e50;
color: white;
padding: 80px 0;
text-align: center;
}
.cta-section h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.cta-section p {
font-size: 1.1rem;
margin-bottom: 30px;
opacity: 0.9;
}
/* ===== Footer ===== */
footer {
background: #1a252f;
color: #aaa;
padding: 30px 0;
text-align: center;
}
.footer-links {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 20px;
list-style: none;
}
.footer-links a {
color: #aaa;
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: white;
}
/* ===== Responsive Design ===== */
@media (max-width: 768px) {
.nav-wrapper {
flex-direction: column;
gap: 15px;
}
.nav-links {
flex-direction: column;
text-align: center;
gap: 15px;
}
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.section-title {
font-size: 2rem;
}
.about-content {
flex-direction: column;
}
.cta-section h2 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.hero {
padding: 60px 0;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.btn-primary, .btn-secondary {
width: 100%;
max-width: 300px;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container nav-wrapper">
<a href="#" class="logo">Ihr<span>Logo</span></a>
<nav>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#testimonials">Kundenstimmen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
<a href="#cta" class="cta-btn">Jetzt starten</a>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>Willkommen auf Ihrer Landingpage</h1>
<p>Hier können Sie Ihre Produkte oder Dienstleistungen präsentieren. Überzeugen Sie Ihre Besucher mit einem starken ersten Eindruck.</p>
<div class="hero-buttons">
<a href="#cta" class="btn-primary">Mehr erfahren</a>
<a href="#features" class="btn-secondary">Features ansehen</a>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="container">
<h2 class="section-title">Unsere Features</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>Schnell & Effizient</h3>
<p>Optimierte Performance für maximale Geschwindigkeit und Benutzerfreundlichkeit.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>Sicher & Zuverlässig</h3>
<p>Höchste Sicherheitsstandards und zuverlässige Verfügbarkeit rund um die Uhr.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3>Responsive Design</h3>
<p>Perfekte Darstellung auf allen Geräten - vom Smartphone bis zum Desktop.</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="container about-content">
<div class="about-text">
<h2>Über unser Unternehmen</h2>
<p>Wir sind ein engagiertes Team, das sich auf innovative Lösungen spezialisiert hat. Seit über 10 Jahren helfen wir Kunden, ihre Ziele zu erreichen.</p>
<p>Unser Ansatz kombiniert Kreativität mit technischer Exzellenz, um Produkte zu schaffen, die begeistern.</p>
<a href="#contact" class="cta-btn" style="display: inline-block; margin-top: 20px;">Kontakt aufnehmen</a>
</div>
<div class="about-image">
[Platzhalter für Bild]
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials" id="testimonials">
<div class="container">
<h2 class="section-title">Was unsere Kunden sagen</h2>
<div class="testimonial-grid">
<div class="testimonial-card">
<p>"Hervorragender Service und ein Produkt, das alle Erwartungen übertroffen hat. Absolut empfehlenswert!"</p>
<div class="testimonial-author">- Max Mustermann</div>
</div>
<div class="testimonial-card">
<p>"Die Zusammenarbeit war professionell und unkompliziert. Das Ergebnis spricht für sich."</p>
<div class="testimonial-author">- Anna Beispiel</div>
</div>
<div class="testimonial-card">
<p>"Ein Team, das wirklich versteht, was Kunden brauchen. Wir sind begeistert!"</p>
<div class="testimonial-author">- Peter Muster</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section" id="cta">
<div class="container">
<h2>Bereit zu starten?</h2>
<p>Melden Sie sich noch heute an und erleben Sie den Unterschied.</p>
<a href="#" class="btn-primary" style="background: #3498db; color: white;">Kostenlos testen</a>
</div>
</section>
<!-- Footer -->
<footer id="contact">
<div class="container">
<ul class="footer-links">
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">AGB</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<p>© 2024 Ihr Unternehmen. Alle Rechte vorbehalten.</p>
</div>
</footer>
<!-- JavaScript für interaktive Elemente -->
<script>
// Smooth Scrolling für Anker-Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Sticky Header - Schatten bei Scroll
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.style.boxShadow = '0 4px 20px rgba(0,0,0,0.15)';
} else {
header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
}
});
// Einfache Animation für Feature-Cards (optional)
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.feature-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
</script>
</body>
</html>
```
**Hinweise zur Anpassung:**
1. **Farben**: Die Hauptfarben sind Blau (#3498db) und Lila (#764ba2). Sie können diese im CSS einfach ändern.
2. **Bilder**: Ersetzen Sie den Platzhalter `[Platzhalter für Bild]` durch Ihr tatsächliches Bild.
3. **Texte**: Passen Sie alle Texte an Ihr Unternehmen und Ihre Zielgruppe an.
4. **Sektionen**: Fügen Sie weitere Sektionen hinzu oder entfernen Sie nicht benötigte.
Wenn Sie mir Ihr gezeichnetes Design beschreiben (z.B. "Hero mit großem Bild links, Text rechts", "dunkles Farbschema", "viele Animationen"), kann ich den Code entsprechend anpassen.
Melde dich an, um den vollständigen Prompt zu sehen
Weiter mit:
Mit der Anmeldung akzeptierst du unsere Nutzungsbedingungen und Datenschutz
Verwendung
Dieser Prompt ist für die Verwendung mit coding gedacht. Kopiere den Inhalt oben und füge ihn in dein bevorzugtes KI-Tool ein.
Für beste Ergebnisse passe die Platzhalter (eckige Klammern oder Großbuchstaben) an deine Anforderungen an.
Referenzen
- Kategorie: coding-Prompts
- Quelle: https://x.com/eyishazyer/status/1845358781149904921
Diskussion
0 Kommentare