Ein Code von BENE

884 BENE

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

27 December 2024

Eine mit Verzeichnissen erstellte Homepage

28 December 2024

Ein Code von mematixd3162

21 October 2025

Beispiel einer einfachen HTML-Vorlage

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Website Example</title>
    <style>
        /* CSS Variables */
        :root {
            --primary-color: #2563eb;
            --secondary-color: #7c3aed;
            --dark-color: #1e293b;
            --light-color: #f8fafc;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

body {
            background-color: var(--light-color);
            color: var(--dark-color);
            line-height: 1.6;
        }

/* Navigation */
        .navbar {
            background: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
        }

.nav-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

.logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }

.nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

.nav-links a {
            text-decoration: none;
            color: var(--dark-color);
            font-weight: 500;
            transition: color 0.3s ease;
        }

.nav-links a:hover {
            color: var(--primary-color);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 2rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: white;
            margin-top: 60px;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            animation: slideUp 1s ease;
        }

/* Cards */
        .cards-container {
            max-width: 1200px;
            margin: 4rem auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

.card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            cursor: pointer;
        }

.card:hover {
            transform: translateY(-5px);
        }

/* Form */
        .contact-form {
            max-width: 600px;
            margin: 4rem auto;
            padding: 2rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

.form-group {
            margin-bottom: 1.5rem;
        }

input, textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-top: 0.5rem;
        }

button {
            background: var(--primary-color);
            color: white;
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

button:hover {
            background: var(--secondary-color);
        }

/* Animations */
        @keyframes slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

/* Mobile Responsive */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.cards-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <div class="logo">Logo</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

<section class="hero" id="home">
        <div>
            <h1>Modern Website</h1>
            <p>Where technology meets design</p>
        </div>
    </section>

<section class="cards-container" id="services">
        <div class="card">
            <h3>Responsive Design</h3>
            <p>Mobile-first approach for all devices</p>
        </div>
        <div class="card">
            <h3>Web Development</h3>
            <p>Modern web development solutions</p>
        </div>
        <div class="card">
            <h3>SEO Optimization</h3>
            <p>Search engine optimized structure</p>
        </div>
    </section>

<section class="contact-form" id="contact">
        <h2>Contact Form</h2>
        <form id="contactForm">
            <div class="form-group">
                <label>Your Name:</label>
                <input type="text" id="name" required>
            </div>
            <div class="form-group">
                <label>Email:</label>
                <input type="email" id="email" required>
            </div>
            <div class="form-group">
                <label>Your Message:</label>
                <textarea id="message" rows="5" required>

Empfohlen

Eine mit Verzeichnissen erstellte Homepage

Ein Code von mematixd3162

Beispiel einer einfachen HTML-Vorlage

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS