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

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

References

<abbr>Inserisce abbreviazioni e acronimi
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
<tbody>Definisce il contenuto principale di una tabella.
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)

Users

Log in to search for users

Explore

Find inspiration

Primo esercizio (26/01/2914)

Collegamenti ipertestuali

Appunti Informatica

Esempio di Font Size in VW

La cicala e la formica

Movimento libero JS

3 LS 29-01 IPERTESTI INTERNI

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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, SEO, design futuristico, agenzia creativa">
    <meta name="author" content="Futura Design Agency">
    
    <!-- Open Graph -->
    <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">
    
    <!-- Twitter Card -->
    <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">
    
    <!-- Canonical -->
    <link rel="canonical" href="https://www.futuradesign.example.com">
    
    <!-- Favicon -->
    <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>">
    
    <!-- Google Fonts -->
    <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">
    
    <!-- Schema.org JSON-LD -->
    <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>
        /* Design System - Variabili CSS */
        :root {
            /* Colori primari */
            --primary-dark: #0a0e27;
            --primary-medium: #1a1f3a;
            --primary-light: #2a3050;
            
            /* Colori accento */
            --accent-cyan: #00d4ff;
            --accent-purple: #8b5cf6;
            --accent-pink: #ec4899;
            --accent-gradient: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            
            /* Colori testo */
            --text-primary: #ffffff;
            --text-secondary: #a5b4fc;
            --text-muted: #64748b;
            
            /* Colori sfondo */
            --bg-primary: var(--primary-dark);
            --bg-secondary: var(--primary-medium);
            --bg-card: rgba(42, 48, 80, 0.6);
            
            /* Spaziature */
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 2rem;
            --spacing-lg: 3rem;
            --spacing-xl: 5rem;
            
            /* Bordi */
            --border-radius-sm: 0.5rem;
            --border-radius-md: 1rem;
            --border-radius-lg: 1.5rem;
            
            /* Ombre */
            --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);
            
            /* Transizioni */
            --transition-fast: 0.2s ease;
            --transition-medium: 0.3s ease;
            --transition-slow: 0.5s ease;
            
            /* Font */
            --font-primary: 'Space Grotesk', sans-serif;
            --font-secondary: 'Inter', sans-serif;
        }
        
        /* Reset e stili di base */
        * {
            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;
        }
        
        /* Stile per preferenze di movimento ridotto */
        @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 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
        }
        
        /* Header e navigazione */
        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);
        }
        
        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: var(--spacing-sm) 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 Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding-top: 80px;
        }
        
        .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 1s 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: var(--spacing-sm) var(--spacing-md);
            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: 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;
        }
        
        /* Sezioni */
        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);
        }
        
        /* Servizi */
        .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 */
        .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 */
        .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;
        }
        
        /* Contatti */
        .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 */
        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(250px, 1fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
        }
        
        .footer-column h3 {
            font-family: var(--font-primary);
            font-size: 1.25rem;
            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;
        }
        
        /* Responsive */
        @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;
            }
        }
        
        /* Stile per focus accessibilità */
        *:focus-visible {
            outline: 2px solid var(--accent-cyan);
            outline-offset: 2px;
        }
        
        /* Lazy loading placeholder */
        .lazy-load {
            opacity: 0;
            transition: opacity var(--transition-medium);
        }
        
        .lazy-load.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <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="#contact" class="nav-link">Contatti</a></li>
            </ul>
            
            <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle menu">
                <span>☰</span>
            </button>
        </nav>
    </header>
    
    <!-- Hero Section -->
    <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">Scopri i nostri lavori</a>
                    <a href="#contact" class="btn btn-secondary">Contattaci</a>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Services 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>
    
    <!-- Portfolio 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>
    
    <!-- Blog 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>
    
    <!-- Contact 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 -->
    <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="#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() {
                // Update active button
                filterBtns.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
                
                // Filter portfolio items
                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 {
                // Fallback for browsers that don't support IntersectionObserver
                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();
            
            // Here you would normally send the form data to a server
            // For this example, we'll just show a success message
            const formData = new FormData(contactForm);
            const formValues = Object.fromEntries(formData);
            
            // Create success message
            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.';
            
            // Remove any existing success message
            const existingMessage = contactForm.querySelector('.success-message');
            if (existingMessage) {
                contactForm.removeChild(existingMessage);
            }
            
            // Add the new success message
            successMessage.classList.add('success-message');
            contactForm.appendChild(successMessage);
            
            // Reset the form
            contactForm.reset();
            
            // Remove the success message after 5 seconds
            setTimeout(() => {
                if (successMessage.parentNode) {
                    successMessage.parentNode.removeChild(successMessage);
                }
            }, 5000);
        });
        
        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Here you would normally send the form data to a server
            // For this example, we'll just show a success message
            
            // Create success message
            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!';
            
            // Remove any existing success message
            const existingMessage = newsletterForm.querySelector('.success-message');
            if (existingMessage) {
                newsletterForm.removeChild(existingMessage);
            }
            
            // Add the new success message
            successMessage.classList.add('success-message');
            newsletterForm.appendChild(successMessage);
            
            // Reset the form
            newsletterForm.reset();
            
            // Remove the success message after 5 seconds
            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';
            });
            
            // Trigger animation on load
            animateOnScroll();
        });
        
        // Trigger animation on scroll
        window.addEventListener('scroll', animateOnScroll);
    </script>
</body>
</html>