Un codice di BENE

681 BENE

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

26 September 2024

Gioco di pila

29 May 2025

Pagina di destinazione per il noleggio auto

15 September 2024

CodePen - disegnare fiori con Greensock

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>

Consigliato

Gioco di pila

Pagina di destinazione per il noleggio auto

CodePen - disegnare fiori con Greensock

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS