Futura Design - Agenzia di Design by @Darkness977 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

application-x-www-form-urlencodedCodifica dei caratteri di un form
<head>Tag primario di un documento HTML
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
<title>Definisce il titolo della pagina web.
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
minlengthDetermina il numero minimo di caratteri per un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Lezione 4 (terza parte)

Esercitazione 3

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Agenzia di design futuristico specializzata in web design, comunicazione multimediale, AI e strategie SEO avanzate">
    <meta name="keywords" content="web design, AI, comunicazione multimediale, digital marketing, SEO, design futuristico,,frontenddesign,branding strategico, intelligenza artificiale generativa, esperienze utente immersive, ux-design, siti web responsive, sviluppo front-end moderno, content strategy avanzata, ottimizzazione semantica SEO, storytelling visivo, agenzia creativa">
    <meta name="author" content="Futura Design Agency">
    <meta property="og:title" content="Futura Design - Agenzia di Design Futuristico">
    <meta property="og:description" content="Web design, comunicazione multimediale AI e strategie SEO all'avanguardia">
    <meta property="og:image" content="https://picsum.photos/seed/futuradesign/1200/630.jpg">
    <meta property="og:url" content="https://www.futuradesign.example.com">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Futura Design - Agenzia di Design Futuristico">
    <meta name="twitter:description" content="Web design, comunicazione multimediale AI e strategie SEO all'avanguardia">
    <meta name="twitter:image" content="https://picsum.photos/seed/futuradesign/1200/630.jpg">
    <link rel="canonical" href="https://www.futuradesign.example.com">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>?</text></svg>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "Futura Design Agency",
      "url": "https://www.futuradesign.example.com",
      "logo": "https://www.futuradesign.example.com/logo.png",
      "description": "Agenzia di design futuristico specializzata in web design, comunicazione multimediale AI e strategie SEO avanzate",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Via Innovazione 42",
        "addressLocality": "Milano",
        "addressRegion": "MI",
        "postalCode": "20121",
        "addressCountry": "IT"
      },
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+39-02-12345678",
        "contactType": "customer service",
        "availableLanguage": ["Italian", "English"]
      },
      "sameAs": [
        "https://www.instagram.com/futuradesign",
        "https://www.linkedin.com/company/futuradesign",
        "https://twitter.com/futuradesign"
      ]
    }
    </script>
    <title>Futura Design - Agenzia di Design Futuristico</title>
    <style>
        :root {
            --primary-dark: #0a0e27;
            --primary-medium: #1a1f3a;
            --primary-light: #2a3050;
            --accent-cyan: #00d4ff;
            --accent-purple: #8b5cf6;
            --accent-pink: #ec4899;
            --accent-gradient: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            --text-primary: #ffffff;
            --text-secondary: #a5b4fc;
            --text-muted: #64748b;
            --bg-primary: var(--primary-dark);
            --bg-secondary: var(--primary-medium);
            --bg-card: rgba(42, 48, 80, 0.6);
            --spacing-xs: 0.6rem;
            --spacing-sm: 0.8rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2.7rem;
            --spacing-xl: 5rem;
            --border-radius-sm: 0.8rem;
            --border-radius-md: 1.2rem;
            --border-radius-lg: 1.5rem;
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
            --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.5);
            --transition-fast: 0.2s ease;
            --transition-medium: 0.3s ease;
            --transition-slow: 0.5s ease;
            --font-primary: 'Space Grotesk', sans-serif;
            --font-secondary: 'Inter', sans-serif;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: var(--font-secondary);
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }
        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
        }
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: all var(--transition-medium);
            backdrop-filter: blur(10px);
            background-color: rgba(10, 14, 39, 0.8);
            padding: 15 30px;/*altezza-fascia-menu-top*/
        }
        header.scrolled {
            background-color: rgba(10, 14, 39, 0.95);
            box-shadow: var(--shadow-lg);
        }
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: calc(var(--spacing-sm) + 10px) 0;
        }
        .logo {
            font-family: var(--font-primary);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }
        .logo-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gradient);
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }
        .nav-menu {
            display: flex;
            list-style: none;
            gap: var(--spacing-md);
        }
        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: color var(--transition-fast);
            padding: var(--spacing-xs) 0;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-gradient);
            transition: width var(--transition-medium);
        }
        .nav-link:hover, .nav-link:focus {
            color: var(--text-primary);
            outline: none;
        }
        .nav-link:hover::after, .nav-link:focus::after {
            width: 100%;
        }
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
        }
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding-top: 120px;/*altezza-titolo-H1*/
        }
        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        .geometric-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .shape {
            position: absolute;
            opacity: 0.1;
            background: var(--accent-gradient);
            filter: blur(40px);
        }
        .shape-1 {
            width: 500px;
            height: 500px;
            border-radius: 50%;
            top: -100px;
            right: -100px;
            animation: float 20s infinite alternate ease-in-out;
        }
        .shape-2 {
            width: 300px;
            height: 300px;
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            bottom: -50px;
            left: -50px;
            animation: float 15s infinite alternate-reverse ease-in-out;
        }
        .shape-3 {
            width: 400px;
            height: 400px;
            border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: float 25s infinite alternate ease-in-out;
        }
        @keyframes float {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }
            50% {
                transform: translate(30px, -30px) rotate(180deg);
            }
            100% {
                transform: translate(-20px, 20px) rotate(360deg);
            }
        }
        .hero-content {
            max-width: 800px;
            z-index: 2;
            animation: fadeInUp 4s ease-out;
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .hero-title {
            font-family: var(--font-primary);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            margin-bottom: var(--spacing-md);
            line-height: 1.2;
        }
        .hero-title .gradient-text {
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
        }
        .hero-subtitle {
            font-size: 1.25rem;
            color: var(--text-secondary);
            margin-bottom: var(--spacing-lg);
            max-width: 600px;
        }
        .hero-cta {
            display: flex;
            gap: var(--spacing-md);
            flex-wrap: wrap;
        }
        .btn {
            padding: calc(var(--spacing-sm) - 5px) calc(var(--spacing-md) - 5px);
            border-radius: var(--border-radius-md);
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
            transition: all var(--transition-medium);
            cursor: pointer;
            border: none;
            font-size: 1.1rem;
        }
        .btn-primary {
            background: var(--accent-gradient);
            color: white;
            box-shadow: var(--shadow-md);
        }
        .btn-primary:hover, .btn-primary:focus {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg), var(--shadow-glow);
            outline: 2px solid var(--accent-cyan);
            outline-offset: 2px;
        }
        .btn-secondary {
            background: transparent;
            color: var(--text-primary);
            border: 2px solid var(--primary-light);
        }
        .btn-secondary:hover, .btn-secondary:focus {
            background: var(--primary-light);
            transform: translateY(-3px);
            outline: 2px solid var(--accent-cyan);
            outline-offset: 2px;
        }
        section {
            padding: var(--spacing-xl) 0;
        }
        .section-title {
            font-family: var(--font-primary);
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            text-align: center;
            margin-bottom: var(--spacing-lg);
            position: relative;
        }
        .section-subtitle {
            text-align: center;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto var(--spacing-lg);
        }
        .services {
            background-color: var(--bg-secondary);
        }
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--spacing-md);
        }
        .service-card {
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius-lg);
            padding: var(--spacing-lg);
            transition: all var(--transition-medium);
            border: 1px solid rgba(255, 255, 255, 0.1);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .service-card:hover, .service-card:focus {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl), var(--shadow-glow);
            border-color: var(--accent-cyan);
        }
        .service-icon {
            width: 60px;
            height: 60px;
            background: var(--accent-gradient);
            border-radius: var(--border-radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: var(--spacing-md);
        }
        .service-title {
            font-family: var(--font-primary);
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: var(--spacing-sm);
        }
        .service-description {
            color: var(--text-secondary);
            margin-bottom: var(--spacing-md);
            flex-grow: 1;
        }
        .service-link {
            color: var(--accent-cyan);
            text-decoration: none;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
            transition: gap var(--transition-fast);
        }
        .service-link:hover, .service-link:focus {
            gap: var(--spacing-sm);
            outline: none;
        }
        .portfolio-filters {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-lg);
        }
        .filter-btn {
            padding: var(--spacing-xs) var(--spacing-sm);
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--primary-light);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            font-weight: 500;
        }
        .filter-btn:hover, .filter-btn:focus {
            color: var(--text-primary);
            border-color: var(--accent-cyan);
            outline: none;
        }
        .filter-btn.active {
            background: var(--accent-gradient);
            color: white;
            border-color: transparent;
        }
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: var(--spacing-md);
        }
        .portfolio-item {
            position: relative;
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            height: 300px;
            cursor: pointer;
            transition: all var(--transition-medium);
        }
        .portfolio-item:hover, .portfolio-item:focus {
            transform: scale(1.03);
            box-shadow: var(--shadow-xl), var(--shadow-glow);
            outline: 2px solid var(--accent-cyan);
            outline-offset: 2px;
        }
        .portfolio-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-medium);
        }
        .portfolio-item:hover .portfolio-image {
            transform: scale(1.1);
        }
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(10, 14, 39, 0.9), rgba(10, 14, 39, 0.4));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: var(--spacing-md);
            opacity: 0;
            transition: opacity var(--transition-medium);
        }
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        .portfolio-title {
            font-family: var(--font-primary);
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: var(--spacing-xs);
        }
        .portfolio-category {
            color: var(--accent-cyan);
            font-size: 0.9rem;
            font-weight: 500;
        }
        .blog {
            background-color: var(--bg-secondary);
        }
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: var(--spacing-md);
        }
        .blog-card {
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            transition: all var(--transition-medium);
            border: 1px solid rgba(255, 255, 255, 0.1);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .blog-card:hover, .blog-card:focus {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl), var(--shadow-glow);
            border-color: var(--accent-cyan);
        }
        .blog-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .blog-content {
            padding: var(--spacing-md);
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .blog-meta {
            display: flex;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-sm);
            font-size: 0.9rem;
            color: var(--text-muted);
        }
        .blog-title {
            font-family: var(--font-primary);
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: var(--spacing-sm);
        }
        .blog-excerpt {
            color: var(--text-secondary);
            margin-bottom: var(--spacing-md);
            flex-grow: 1;
        }
        .blog-link {
            color: var(--accent-cyan);
            text-decoration: none;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
            transition: gap var(--transition-fast);
        }
        .blog-link:hover, .blog-link:focus {
            gap: var(--spacing-sm);
            outline: none;
        }
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-lg);
        }
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }
        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-sm);
        }
        .contact-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gradient);
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        .contact-details h3 {
            font-family: var(--font-primary);
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: var(--spacing-xs);
        }
        .contact-details p {
            color: var(--text-secondary);
        }
        .contact-form {
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius-lg);
            padding: var(--spacing-lg);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .form-group {
            margin-bottom: var(--spacing-md);
        }
        .form-label {
            display: block;
            margin-bottom: var(--spacing-xs);
            font-weight: 500;
        }
        .form-input, .form-textarea {
            width: 100%;
            padding: var(--spacing-sm);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius-sm);
            color: var(--text-primary);
            font-family: var(--font-secondary);
            transition: all var(--transition-fast);
        }
        .form-input:focus, .form-textarea:focus {
            outline: none;
            border-color: var(--accent-cyan);
            background: rgba(255, 255, 255, 0.08);
        }
        .form-textarea {
            min-height: 150px;
            resize: vertical;
        }
        footer {
            background-color: var(--bg-secondary);
            padding: var(--spacing-lg) 0 var(--spacing-md);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(15px, 0.8fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
        }
        .footer-column h3 {
            font-family: var(--font-primary);
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: var(--spacing-sm);
        }
        .footer-links {
            list-style: none;
        }
        .footer-links li {
            margin-bottom: var(--spacing-xs);
        }
        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: color var(--transition-fast);
        }
        .footer-links a:hover, .footer-links a:focus {
            color: var(--accent-cyan);
            outline: none;
        }
        .social-links {
            display: flex;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-sm);
        }
        .social-link {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all var(--transition-fast);
        }
        .social-link:hover, .social-link:focus {
            background: var(--accent-gradient);
            color: white;
            transform: translateY(-3px);
            outline: none;
        }
        .footer-bottom {
            text-align: center;
            padding-top: var(--spacing-md);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        /* FAQ Section */
        .faq {
            background-color: var(--bg-secondary);
        }
        .faq-container {
            max-width: 750px;
            margin: 0 auto;
        }
        .faq-item {
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius-lg);
            margin-bottom: var(--spacing-md);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .faq-question {
            padding: var(--spacing-md);
            font-family: var(--font-primary);
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all var(--transition-fast);
        }
        .faq-question:hover {
            color: var(--accent-cyan);
        }
        .faq-question::after {
            content: '+';
            font-size: 1.3rem;
            transition: transform var(--transition-fast);
        }
        .faq-question.active::after {
            transform: rotate(45deg);
        }
        .faq-answer {
            padding: 0 var(--spacing-md);
            max-height: 0;
            overflow: hidden;
            transition: all var(--transition-medium);
            color: var(--text-secondary);
        }
        .faq-answer.active {
            padding: 10 var(--spacing-md) var(--spacing-md);
            max-height: 340px;
        }
        @media (max-width: 768px) {
            .nav-menu {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: var(--bg-primary);
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                padding-top: var(--spacing-lg);
                transition: left var(--transition-medium);
            }
            .nav-menu.active {
                left: 0;
            }
            .mobile-menu-toggle {
                display: block;
            }
            .hero-content {
                text-align: center;
            }
            .hero-cta {
                justify-content: center;
            }
            .contact-container {
                grid-template-columns: 1fr;
            }
            .footer-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .social-links {
                justify-content: center;
            }
        }
        *:focus-visible {
            outline: 2px solid var(--accent-cyan);
            outline-offset: 2px;
        }
        .lazy-load {
            opacity: 0;
            transition: opacity var(--transition-medium);
        }
        .lazy-load.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <header id="header">
        <nav class="container">
            <a href="#" class="logo">
                <div class="logo-icon">?</div>
                Futura Design
            </a>
            <ul class="nav-menu" id="navMenu">
                <li><a href="#home" class="nav-link">Home</a></li>
                <li><a href="#services" class="nav-link">Servizi</a></li>
                <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
                <li><a href="#blog" class="nav-link">Blog</a></li>
                <li><a href="#faq" class="nav-link">FAQ</a></li>
                <li><a href="#contact" class="nav-link">Contatti</a></li>
            </ul>
            <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle menu">
                <span>☰</span>
            </button>
        </nav>
    </header>
    <section id="home" class="hero">
        <div class="hero-bg">
            <div class="geometric-shapes">
                <div class="shape shape-1"></div>
                <div class="shape shape-2"></div>
                <div class="shape shape-3"></div>
            </div>
        </div>
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">
                    Design <span class="gradient-text">Futuristico</span> per un Mondo Digitale in Evoluzione
                </h1>
                <p class="hero-subtitle">
                    Creiamo esperienze digitali all'avanguardia che uniscono design innovativo, intelligenza artificiale e strategie SEO avanzate per posizionare il tuo brand al centro del futuro.
                </p>
                <div class="hero-cta">
                    <a href="#portfolio" class="btn btn-primary">Guarda il Portfolio</a>
                    <a href="#contact" class="btn btn-secondary">Contattaci</a>
                </div>
            </div>
        </div>
    </section>
    <section id="services" class="services">
        <div class="container">
            <h2 class="section-title">I Nostri Servizi</h2>
            <p class="section-subtitle">
                Offriamo soluzioni digitali complete che combinano creatività, tecnologia e strategia per trasformare la tua visione in realtà.
            </p>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">?</div>
                    <h3 class="service-title">Web Design</h3>
                    <p class="service-description">
                        Creiamo siti web accattivanti e funzionali che catturano l'attenzione e offrono un'esperienza utente impeccabile su tutti i dispositivi.
                    </p>
                    <a href="#" class="service-link">Scopri di più →</a>
                </div>
                <div class="service-card">
                    <div class="service-icon">?</div>
                    <h3 class="service-title">Comunicazione Multimediale AI</h3>
                    <p class="service-description">
                        Sfruttiamo il potenza dell'intelligenza artificiale per creare contenuti multimediali unici, personalizzati e altamente coinvolgenti.
                    </p>
                    <a href="#" class="service-link">Scopri di più →</a>
                </div>
                <div class="service-card">
                    <div class="service-icon">?</div>
                    <h3 class="service-title">Strategia SEO</h3>
                    <p class="service-description">
                        Ottimizziamo la tua presenza online per raggiungere le prime posizioni sui motori di ricerca e attrarre traffico qualificato al tuo sito.
                    </p>
                    <a href="#" class="service-link">Scopri di più →</a>
                </div>
                <div class="service-card">
                    <div class="service-icon">?</div>
                    <h3 class="service-title">Design Responsive</h3>
                    <p class="service-description">
                        Progettiamo interfacce che si adattano perfettamente a ogni dispositivo, garantendo un'esperienza utente ottimale ovunque.
                    </p>
                    <a href="#" class="service-link">Scopri di più →</a>
                </div>
                <div class="service-card">
                    <div class="service-icon">?</div>
                    <h3 class="service-title">Ottimizzazione Performance</h3>
                    <p class="service-description">
                        Massimizziamo la velocità e l'efficienza del tuo sito per offrire caricamenti istantanei e un'esperienza utente fluida.
                    </p>
                    <a href="#" class="service-link">Scopri di più →</a>
                </div>
                <div class="service-card">
                    <div class="service-icon">?</div>
                    <h3 class="service-title">Analisi Dati</h3>
                    <p class="service-description">
                        Trasformiamo i dati in insight strategici per guidare le decisioni di business e ottimizzare continuamente le performance digitali.
                    </p>
                    <a href="#" class="service-link">Scopri di più →</a>
                </div>
            </div>
        </div>
    </section>
    <section id="portfolio">
        <div class="container">
            <h2 class="section-title">Il Nostro Portfolio</h2>
            <p class="section-subtitle">
                Esplora i nostri progetti più recenti e scopri come abbiamo aiutato i nostri clienti a raggiungere i loro obiettivi digitali.
            </p>
            <div class="portfolio-filters">
                <button class="filter-btn active" data-filter="all">Tutti</button>
                <button class="filter-btn" data-filter="web">Web Design</button>
                <button class="filter-btn" data-filter="ai">AI & Multimedia</button>
                <button class="filter-btn" data-filter="seo">SEO</button>
                <button class="filter-btn" data-filter="branding">Branding</button>
            </div>
            <div class="portfolio-grid">
                <div class="portfolio-item" data-category="web">
                    <img src="https://picsum.photos/seed/project1/600/400.jpg" alt="Progetto Web Design 1" class="portfolio-image lazy-load">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Piattaforma E-commerce Innovativa</h3>
                        <p class="portfolio-category">Web Design</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="ai">
                    <img src="https://picsum.photos/seed/project2/600/400.jpg" alt="Progetto AI 1" class="portfolio-image lazy-load">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Campagna Pubblicitaria Generativa AI</h3>
                        <p class="portfolio-category">AI & Multimedia</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="seo">
                    <img src="https://picsum.photos/seed/project3/600/400.jpg" alt="Progetto SEO 1" class="portfolio-image lazy-load">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Ottimizzazione SEO per Settore Finanziario</h3>
                        <p class="portfolio-category">SEO</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="branding">
                    <img src="https://picsum.photos/seed/project4/600/400.jpg" alt="Progetto Branding 1" class="portfolio-image lazy-load">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Rebranding Completo per Startup Tech</h3>
                        <p class="portfolio-category">Branding</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="web">
                    <img src="https://picsum.photos/seed/project5/600/400.jpg" alt="Progetto Web Design 2" class="portfolio-image lazy-load">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Sito Corporate per Azienda Globale</h3>
                        <p class="portfolio-category">Web Design</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="ai">
                    <img src="https://picsum.photos/seed/project6/600/400.jpg" alt="Progetto AI 2" class="portfolio-image lazy-load">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Esperienza Immersiva AR per Evento</h3>
                        <p class="portfolio-category">AI & Multimedia</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="blog" class="blog">
        <div class="container">
            <h2 class="section-title">Dal Nostro Blog</h2>
            <p class="section-subtitle">
                Approfondimenti, tendenze e novità dal mondo del design digitale, dell'intelligenza artificiale e del marketing digitale.
            </p>
            <div class="blog-grid">
                <article class="blog-card">
                    <img src="https://picsum.photos/seed/blog1/600/400.jpg" alt="Articolo Blog 1" class="blog-image lazy-load">
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span>15 Maggio 2023</span>
                            <span>•</span>
                            <span>Web Design</span>
                        </div>
                        <h3 class="blog-title">Il Futuro del Web Design: Trend e Innovazioni</h3>
                        <p class="blog-excerpt">
                            Esploriamo le tendenze emergenti nel web design e come stanno plasmando il futuro delle esperienze digitali, dal design immersivo all'integrazione dell'IA.
                        </p>
                        <a href="#" class="blog-link">Leggi di più →</a>
                    </div>
                </article>
                <article class="blog-card">
                    <img src="https://picsum.photos/seed/blog2/600/400.jpg" alt="Articolo Blog 2" class="blog-image lazy-load">
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span>8 Maggio 2023</span>
                            <span>•</span>
                            <span>Intelligenza Artificiale</span>
                        </div>
                        <h3 class="blog-title">Come l'IA sta Trasformando il Marketing Digitale</h3>
                        <p class="blog-excerpt">
                            Analizziamo l'impatto dell'intelligenza artificiale sulle strategie di marketing, dalla personalizzazione avanzata alla creazione di contenuti generativi.
                        </p>
                        <a href="#" class="blog-link">Leggi di più →</a>
                    </div>
                </article>
                <article class="blog-card">
                    <img src="https://picsum.photos/seed/blog3/600/400.jpg" alt="Articolo Blog 3" class="blog-image lazy-load">
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span>1 Maggio 2023</span>
                            <span>•</span>
                            <span>SEO</span>
                        </div>
                        <h3 class="blog-title">SEO nel 2023: Strategie per Dominare le SERP</h3>
                        <p class="blog-excerpt">
                            Le tecniche più efficaci per ottimizzare il tuo sito e raggiungere le prime posizioni su Google, inclusi i fattori E-A-T e l'ottimizzazione per la ricerca vocale.
                        </p>
                        <a href="#" class="blog-link">Leggi di più →</a>
                    </div>
                </article>
            </div>
        </div>
    </section>
    <!-- FAQ Section -->
    <section id="faq" class="faq">
        <div class="container">
            <h2 class="section-title">Domande Frequenti</h2>
            <p class="section-subtitle">
                Risposte alle domande più comuni sui nostri servizi e approccio al design futuristico.
            </p>
            <div class="faq-container">
                <div class="faq-item">
                    <div class="faq-question">Qual è il vostro approccio al web design?</div>
                    <div class="faq-answer">
                        Il nostro approccio al web design combina estetica all'avanguardia, funzionalità intuitiva e performance ottimizzata. Iniziamo sempre con una profonda analisi delle esigenze del cliente e del target di riferimento, seguita da una fase di prototipazione iterativa che coinvolge il cliente in ogni fase. Utilizziamo le ultime tecnologie e tendenze di design per creare esperienze uniche che non solo appaiono fantastiche, ma che convertono efficacemente.
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">Come integrate l'intelligenza artificiale nei vostri progetti?</div>
                    <div class="faq-answer">
                        L'intelligenza artificiale è al centro della nostra strategia di comunicazione multimediale. La utilizziamo per creare contenuti personalizzati su larga scala, ottimizzare le esperienze utente in tempo reale, analizzare i comportamenti degli utenti per prevedere le loro esigenze, e automatizzare processi creativi complessi. Dall'AI generativa per immagini e testi ai sistemi di raccomandazione intelligenti, integriamo l'IA in modo strategico per potenziare ogni aspetto del progetto digitale.
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">In cosa consiste la vostra strategia SEO avanzata?</div>
                    <div class="faq-answer">
                        La nostra strategia SEO va oltre le tecniche tradizionali. Implementiamo un approccio olistico che include ottimizzazione tecnica avanzata, semantica intelligente, esperienza utente ottimizzata, e contenuti di alta qualità. Utilizziamo strumenti di AI per l'analisi competitiva, l'identificazione di opportunità di parole chiave a lunga coda, e il monitoraggio continuo delle performance. Il nostro obiettivo è posizionare i nostri clienti non solo nelle prime posizioni, ma come autorità nel loro settore.
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">Come garantite che i siti siano futuri-proof?</div>
                    <div class="faq-answer">
                        Progettiamo pensando al futuro utilizzando tecnologie modulari e scalabili, architetture flessibili, e standard web emergenti. Implementiamo design system robusti che possono evolversi con il brand, codice pulito e manutenibile, e integriamo API e servizi che possono essere facilmente aggiornati. Inoltre, monitoriamo costantemente le tendenze tecnologiche e le evoluzioni del settore per anticipare i cambiamenti e garantire che i nostri progetti rimangano rilevanti nel tempo.
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">Qual è il vostro processo di lavoro con i clienti?</div>
                    <div class="faq-answer">
                        Il nostro processo è collaborativo e trasparente. Iniziamo con una fase di discovery approfondita per comprendere gli obiettivi di business, seguita da una strategia digitale personalizzata. Procediamo poi con il design concettuale, lo sviluppo iterativo con milestone regolari, e test continui. Manteniamo una comunicazione costante con i clienti attraverso dashboard di progetto e riunioni periodiche, garantendo che il prodotto finale non solo soddisfi ma superi le aspettative.
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">Come misurate il successo dei vostri progetti?</div>
                    <div class="faq-answer">
                        Misuriamo il successo attraverso KPI personalizzati basati sugli obiettivi specifici di ogni cliente. Questi possono includere metriche di performance come velocità di caricamento e punteggi di accessibilità, indicatori di business come tassi di conversione e ROI, metriche di engagement come tempo sulla pagina e bounce rate, e indicatori di visibilità come ranking SEO e reach organica. Forniamo report dettagliati e analisi predittive per dimostrare il valore generato e identificare opportunità di ottimizzazione continua.
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="contact">
        <div class="container">
            <h2 class="section-title">Contattaci</h2>
            <p class="section-subtitle">
                Pronto a portare il tuo brand nel futuro del digitale? Parliamo del tuo progetto.
            </p>
            <div class="contact-container">
                <div class="contact-info">
                    <div class="contact-item">
                        <div class="contact-icon">?</div>
                        <div class="contact-details">
                            <h3>Sede</h3>
                            <p>Via Innovazione 42<br>20121 Milano, Italia</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">?</div>
                        <div class="contact-details">
                            <h3>Email</h3>
                            <p>info@futuradesign.example.com<br>support@futuradesign.example.com</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">?</div>
                        <div class="contact-details">
                            <h3>Telefono</h3>
                            <p>+39 02 12345678<br>Lun-Ven: 9:00-18:00</p>
                        </div>
                    </div>
                </div>
                <form class="contact-form" id="contactForm">
                    <div class="form-group">
                        <label for="name" class="form-label">Nome</label>
                        <input type="text" id="name" name="name" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" id="email" name="email" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label for="subject" class="form-label">Oggetto</label>
                        <input type="text" id="subject" name="subject" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label for="message" class="form-label">Messaggio</label>
                        <textarea id="message" name="message" class="form-textarea" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Invia Messaggio</button>
                </form>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Futura Design</h3>
                    <p>Creiamo il futuro del design digitale, unendo innovazione, creatività e strategia per posizionare il tuo brand al centro dell'evoluzione digitale.</p>
                    <div class="social-links">
                        <a href="#" class="social-link" aria-label="Facebook">f</a>
                        <a href="#" class="social-link" aria-label="Twitter">?</a>
                        <a href="#" class="social-link" aria-label="Instagram">?</a>
                        <a href="#" class="social-link" aria-label="LinkedIn">in</a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Link Utili</h3>
                    <ul class="footer-links">
                        <li><a href="#services">Servizi</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#blog">Blog</a></li>
                        <li><a href="#faq">FAQ</a></li>
                        <li><a href="#contact">Contatti</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Servizi</h3>
                    <ul class="footer-links">
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">Comunicazione AI</a></li>
                        <li><a href="#">Strategia SEO</a></li>
                        <li><a href="#">Consulenza Digitale</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Iscriviti per ricevere le ultime novità dal mondo del design digitale.</p>
                    <form id="newsletterForm">
                        <div class="form-group">
                            <input type="email" placeholder="La tua email" class="form-input" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Iscriviti</button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 Futura Design. Tutti i diritti riservati. | <a href="#" style="color: var(--text-muted);">Privacy Policy</a> | <a href="#" style="color: var(--text-muted);">Termini di Servizio</a></p>
            </div>
        </div>
    </footer>
    <script>
        // Sticky header
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        // Mobile menu toggle
        const mobileMenuToggle = document.getElementById('mobileMenuToggle');
        const navMenu = document.getElementById('navMenu');
        mobileMenuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
        });
        // Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function() {
                navMenu.classList.remove('active');
            });
        });
        // Portfolio filter
        const filterBtns = document.querySelectorAll('.filter-btn');
        const portfolioItems = document.querySelectorAll('.portfolio-item');
        filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                filterBtns.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
                const filter = this.getAttribute('data-filter');
                portfolioItems.forEach(item => {
                    if (filter === 'all' || item.getAttribute('data-category') === filter) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
        // Lazy loading for images
        document.addEventListener('DOMContentLoaded', function() {
            const lazyImages = document.querySelectorAll('.lazy-load');
            if ('IntersectionObserver' in window) {
                const imageObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const image = entry.target;
                            image.classList.add('loaded');
                            imageObserver.unobserve(image);
                        }
                    });
                });
                lazyImages.forEach(image => {
                    imageObserver.observe(image);
                });
            } else {
                lazyImages.forEach(image => {
                    image.classList.add('loaded');
                });
            }
        });
        // Form submission
        const contactForm = document.getElementById('contactForm');
        const newsletterForm = document.getElementById('newsletterForm');
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(contactForm);
            const formValues = Object.fromEntries(formData);
            const successMessage = document.createElement('div');
            successMessage.style.padding = '1rem';
            successMessage.style.marginTop = '1rem';
            successMessage.style.backgroundColor = 'rgba(0, 212, 255, 0.2)';
            successMessage.style.borderRadius = 'var(--border-radius-sm)';
            successMessage.style.border = '1px solid var(--accent-cyan)';
            successMessage.textContent = 'Grazie per il tuo messaggio! Ti risponderemo quanto prima.';
            const existingMessage = contactForm.querySelector('.success-message');
            if (existingMessage) {
                contactForm.removeChild(existingMessage);
            }
            successMessage.classList.add('success-message');
            contactForm.appendChild(successMessage);
            contactForm.reset();
            setTimeout(() => {
                if (successMessage.parentNode) {
                    successMessage.parentNode.removeChild(successMessage);
                }
            }, 5000);
        });
        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const successMessage = document.createElement('div');
            successMessage.style.padding = '1rem';
            successMessage.style.marginTop = '1rem';
            successMessage.style.backgroundColor = 'rgba(0, 212, 255, 0.2)';
            successMessage.style.borderRadius = 'var(--border-radius-sm)';
            successMessage.style.border = '1px solid var(--accent-cyan)';
            successMessage.textContent = 'Grazie per esserti iscritto alla nostra newsletter!';
            const existingMessage = newsletterForm.querySelector('.success-message');
            if (existingMessage) {
                newsletterForm.removeChild(existingMessage);
            }
            successMessage.classList.add('success-message');
            newsletterForm.appendChild(successMessage);
            newsletterForm.reset();
            setTimeout(() => {
                if (successMessage.parentNode) {
                    successMessage.parentNode.removeChild(successMessage);
                }
            }, 5000);
        });
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    const headerHeight = document.getElementById('header').offsetHeight;
                    const targetPosition = targetElement.offsetTop - headerHeight;
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            });
        });
        // Add animation to elements when they come into view
        const animateOnScroll = function() {
            const elements = document.querySelectorAll('.service-card, .portfolio-item, .blog-card');
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                if (elementPosition < windowHeight - 100) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        };
        // Set initial state for animated elements
        document.addEventListener('DOMContentLoaded', function() {
            const elements = document.querySelectorAll('.service-card, .portfolio-item, .blog-card');
            elements.forEach(element => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(20px)';
                element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            });
            animateOnScroll();
        });
        // Trigger animation on scroll
        window.addEventListener('scroll', animateOnScroll);
        // FAQ Accordion
        document.addEventListener('DOMContentLoaded', function() {
            const faqQuestions = document.querySelectorAll('.faq-question');
            faqQuestions.forEach(question => {
                question.addEventListener('click', function() {
                    const answer = this.nextElementSibling;
                    const isActive = this.classList.contains('active');
                    
                    // Close all FAQ items
                    document.querySelectorAll('.faq-question').forEach(q => {
                        q.classList.remove('active');
                        q.nextElementSibling.classList.remove('active');
                    });
                    
                    // Open clicked item if it wasn't active
                    if (!isActive) {
                        this.classList.add('active');
                        answer.classList.add('active');
                    }
                });
            });
        });
    </script>
</body>
</html>