Nexa Digital - Web Design, AI Gene by @Darkness977 - Codewith.it

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

References

<br>Inserisce uno spazio vuoto tra due elementi HTML.
autofocusAttiva un elemento al caricamento della pagina.
<object>Incorpora risorse varie nella pagina web.
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
downloadConsente di scaricare file al click di collegamento ipertestuale.
<textarea>Area di testo libero espandibile per form HTML

Users

Log in to search for users

Explore

Find inspiration

tabella con immagine

UX / Web Design, Freelance – Pro

Review of Functions I

esercizio riepilogativo 2

esercitazione 1

Palinsesto Radio

esercitazione 1

round - social bar

Scacchi scrausi

TABELLA ESERCITAZIONE

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">
    <title>Nexa Digital - Web Design, AI Generativa e Strategie SEO Avanzate</title>
    
    <!-- Meta Tags SEO -->
    <meta name="description" content="Nexa Digital: agenzia specializzata in web design, comunicazione multimediale, AI generativa e strategie SEO. Trasformiamo le tue idee in esperienze digitali memorabili.">
    <meta name="keywords" content="web design, comunicazione multimediale, AI generativa, strategia SEO, tag semantici, design futuristico, esperienza utente, sviluppo web, marketing digitale, ottimizzazione SEO, content strategy, brand identity, UX/UI design, sviluppo app, digital transformation">
    <meta name="author" content="Nexa Digital">
    <meta name="robots" content="index, follow">
    <meta name="language" content="Italian">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Nexa Digital - Web Design, AI Generativa e Strategie SEO Avanzate">
    <meta property="og:description" content="Trasformiamo le tue idee in esperienze digitali memorabili con design innovativo e strategie SEO all'avanguardia.">
    <meta property="og:image" content="https://picsum.photos/seed/nexadigital/1200/630.jpg">
    <meta property="og:url" content="https://www.nexadigital.it">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Nexa Digital">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Nexa Digital - Web Design, AI Generativa e Strategie SEO Avanzate">
    <meta name="twitter:description" content="Trasformiamo le tue idee in esperienze digitali memorabili con design innovativo e strategie SEO all'avanguardia.">
    <meta name="twitter:image" content="https://picsum.photos/seed/nexadigital/1200/630.jpg">
    
    <!-- Schema.org Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "Nexa Digital",
        "url": "https://www.nexadigital.it",
        "logo": "https://picsum.photos/seed/nexalogo/200/200.jpg",
        "description": "Agenzia specializzata in web design, comunicazione multimediale, AI generativa e strategie SEO",
        "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.facebook.com/nexadigital",
            "https://www.instagram.com/nexadigital",
            "https://www.linkedin.com/company/nexadigital"
        ]
    }
    </script>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* CSS Variables - Design System */
        :root {
            /* Color Palette */
            --primary-dark: #0a0e27;
            --primary-light: #ffffff;
            --accent-1: #6366f1;
            --accent-2: #ec4899;
            --accent-3: #14b8a6;
            --accent-4: #f59e0b;
            --accent-5: #8b5cf6;
            --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --gradient-dark: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
            
            /* Typography */
            --font-primary: 'Inter', sans-serif;
            --font-display: 'Space Grotesk', sans-serif;
            
            /* Spacing */
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 2rem;
            --spacing-lg: 3rem;
            --spacing-xl: 5rem;
            
            /* Shadows */
            --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-neon: 0 0 10px rgba(99, 102, 241, 0.7);
            
            /* Transitions */
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
            --transition-slow: 0.5s ease;
        }
        
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: var(--font-primary);
            background-color: var(--primary-dark);
            color: var(--primary-light);
            overflow-x: hidden;
            line-height: 1.6;
        }
        
        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: var(--spacing-sm);
        }
        
        h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            background: var(--gradient-1);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: var(--spacing-md);
            opacity: 0;
            animation: fadeIn 1s ease forwards;
        }
        
        h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            margin-bottom: var(--spacing-md);
        }
        
        h3 {
            font-size: clamp(1.5rem, 3vw, 2rem);
        }
        
        p {
            margin-bottom: var(--spacing-sm);
            color: rgba(255, 255, 255, 0.8);
        }
        
        a {
            color: var(--accent-1);
            text-decoration: none;
            transition: var(--transition-normal);
        }
        
        a:hover {
            color: var(--accent-2);
        }
        
        /* Buttons */
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            transition: var(--transition-normal);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn-primary {
            background: var(--gradient-1);
            color: white;
            border: none;
            box-shadow: var(--shadow-md);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg), var(--shadow-neon);
        }
        
        .btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid var(--accent-1);
        }
        
        .btn-secondary:hover {
            background: var(--accent-1);
            transform: translateY(-3px);
        }
        
        .btn-outline {
            background: transparent;
            color: var(--accent-1);
            border: 2px solid var(--accent-1);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn-outline::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--accent-1);
            z-index: -1;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        
        .btn-outline:hover::before {
            transform: translateX(0);
        }
        
        .btn-outline:hover {
            color: white;
        }
        
        /* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1rem 0;
            z-index: 1000;
            transition: var(--transition-normal);
            backdrop-filter: blur(10px);
            background-color: rgba(10, 14, 39, 0.8);
        }
        
        header.scrolled {
            padding: 0.5rem 0;
            background-color: rgba(10, 14, 39, 0.95);
            box-shadow: var(--shadow-lg);
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
        }
        
        .logo {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 0.5rem;
            background: var(--gradient-1);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            gap: var(--spacing-md);
        }
        
        .nav-link {
            color: white;
            font-weight: 500;
            position: relative;
            transition: var(--transition-normal);
        }
        
        .nav-link::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient-1);
            transition: var(--transition-normal);
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .nav-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: var(--spacing-lg) var(--spacing-md);
        }
        
        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.2;
        }
        
        .hero-bg::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://picsum.photos/seed/hero/1920/1080.jpg') center/cover;
            filter: grayscale(100%);
        }
        
        .hero-bg::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-dark);
        }
        
        .geometric-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .shape {
            position: absolute;
            opacity: 0.1;
        }
        
        .shape-1 {
            top: 10%;
            left: 10%;
            width: 300px;
            height: 300px;
            background: var(--gradient-1);
            border-radius: 50%;
            filter: blur(80px);
            animation: float 8s ease-in-out infinite;
        }
        
        .shape-2 {
            bottom: 10%;
            right: 10%;
            width: 400px;
            height: 400px;
            background: var(--gradient-2);
            border-radius: 50%;
            filter: blur(100px);
            animation: float 10s ease-in-out infinite reverse;
        }
        
        .shape-3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 500px;
            background: var(--gradient-3);
            border-radius: 50%;
            filter: blur(120px);
            animation: float 12s ease-in-out infinite;
        }
        
        .hero-content {
            max-width: 1200px;
            text-align: center;
            z-index: 1;
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: var(--spacing-md);
            color: rgba(255, 255, 255, 0.8);
            opacity: 0;
            animation: fadeIn 1s ease 0.3s forwards;
        }
        
        .hero-description {
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto var(--spacing-lg);
            color: rgba(255, 255, 255, 0.7);
            opacity: 0;
            animation: fadeIn 1s ease 0.6s forwards;
        }
        
        .hero-buttons {
            display: flex;
            gap: var(--spacing-sm);
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeIn 1s ease 0.9s forwards;
        }
        
        /* Services Section */
        .services {
            padding: var(--spacing-xl) var(--spacing-md);
            background: linear-gradient(180deg, var(--primary-dark) 0%, #0f1433 100%);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: var(--spacing-lg);
            position: relative;
        }
        
        .section-title h2 {
            background: var(--gradient-1);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
        }
        
        .section-title p {
            max-width: 700px;
            margin: 0 auto;
            font-size: 1.1rem;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--spacing-md);
        }
        
        .service-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: var(--spacing-lg);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition-normal);
            position: relative;
            overflow: hidden;
        }
        
        .service-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-1);
            opacity: 0;
            transition: var(--transition-normal);
            z-index: -1;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl);
        }
        
        .service-card:hover::before {
            opacity: 0.1;
        }
        
        .service-icon {
            font-size: 2.5rem;
            margin-bottom: var(--spacing-sm);
            background: var(--gradient-1);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .service-title {
            font-size: 1.5rem;
            margin-bottom: var(--spacing-sm);
        }
        
        .service-description {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: var(--spacing-md);
        }
        
        /* Portfolio Section */
        .portfolio {
            padding: var(--spacing-xl) var(--spacing-md);
            background: #0f1433;
        }
        
        .portfolio-filters {
            display: flex;
            justify-content: center;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-lg);
            flex-wrap: wrap;
        }
        
        .filter-btn {
            padding: 0.5rem 1rem;
            background: transparent;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition-normal);
        }
        
        .filter-btn.active,
        .filter-btn:hover {
            background: var(--accent-1);
            border-color: var(--accent-1);
        }
        
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--spacing-md);
        }
        
        .portfolio-item {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            height: 300px;
            transition: var(--transition-normal);
        }
        
        .portfolio-item:hover {
            transform: scale(1.03);
            box-shadow: var(--shadow-xl);
        }
        
        .portfolio-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-normal);
        }
        
        .portfolio-item:hover .portfolio-img {
            transform: scale(1.1);
            filter: brightness(0.7);
        }
        
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: var(--spacing-md);
            opacity: 0;
            transition: var(--transition-normal);
        }
        
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        
        .portfolio-title {
            font-size: 1.3rem;
            margin-bottom: var(--spacing-xs);
        }
        
        .portfolio-category {
            font-size: 0.9rem;
            color: var(--accent-1);
        }
        
        /* Blog Section */
        .blog {
            padding: var(--spacing-xl) var(--spacing-md);
            background: linear-gradient(180deg, #0f1433 0%, var(--primary-dark) 100%);
        }
        
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--spacing-md);
        }
        
        .blog-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            overflow: hidden;
            transition: var(--transition-normal);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl);
        }
        
        .blog-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .blog-content {
            padding: var(--spacing-md);
        }
        
        .blog-meta {
            display: flex;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-sm);
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.6);
        }
        
        .blog-title {
            font-size: 1.3rem;
            margin-bottom: var(--spacing-sm);
        }
        
        .blog-excerpt {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: var(--spacing-md);
        }
        
        .blog-link {
            color: var(--accent-1);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .blog-link:hover {
            gap: 1rem;
        }
        
        /* Contact Section */
        .contact {
            padding: var(--spacing-xl) var(--spacing-md);
            background: var(--primary-dark);
        }
        
        .contact-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .contact-form {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: var(--spacing-lg);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .form-group {
            margin-bottom: var(--spacing-md);
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: white;
            transition: var(--transition-normal);
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--accent-1);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }
        
        textarea.form-control {
            resize: vertical;
            min-height: 150px;
        }
        
        .form-submit {
            width: 100%;
            padding: 0.75rem;
            background: var(--gradient-1);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-normal);
        }
        
        .form-submit:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }
        
        /* Footer */
        footer {
            padding: var(--spacing-lg) var(--spacing-md);
            background: #0a0e27;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing-lg);
        }
        
        .footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: var(--spacing-sm);
            background: var(--gradient-1);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.5rem;
        }
        
        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            transition: var(--transition-normal);
        }
        
        .footer-links a:hover {
            color: var(--accent-1);
        }
        
        .social-links {
            display: flex;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-sm);
        }
        
        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: var(--transition-normal);
        }
        
        .social-link:hover {
            background: var(--accent-1);
            transform: translateY(-3px);
        }
        
        .footer-bottom {
            text-align: center;
            margin-top: var(--spacing-lg);
            padding-top: var(--spacing-md);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.5);
        }
        
        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(10deg);
            }
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .nav-menu {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: rgba(10, 14, 39, 0.98);
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                padding-top: var(--spacing-lg);
                transition: var(--transition-normal);
            }
            
            .nav-menu.active {
                left: 0;
            }
            
            .nav-toggle {
                display: block;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .services-grid,
            .portfolio-grid,
            .blog-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header id="header">
        <nav>
            <a href="#" class="logo">
                <i class="fas fa-cube"></i>
                Nexa Digital
            </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="nav-toggle" id="navToggle">
                <i class="fas fa-bars"></i>
            </button>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-bg"></div>
        <div class="geometric-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
        <div class="hero-content">
            <h1>Creo Esperienze Digitali che Ispirano: Wireframing, TemplateAI</h1>
            <p class="hero-subtitle">Web Design, AI Generativa e Strategie SEO Avanzate</p>
            <p class="hero-description">
                Trasformiamo le tue idee in esperienze digitali memorabili con design innovativo, 
                tecnologie all'avanguardia e strategie di marketing che generano risultati concreti.
            </p>
            <div class="hero-buttons">
                <a href="#services" class="btn btn-primary">Scopri i nostri servizi</a>
                <a href="#portfolio" class="btn btn-outline">Vedi il portfolio</a>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="services">
        <div class="container">
            <div class="section-title fade-in">
                <h2>I Nostri Servizi</h2>
                <p>Offriamo soluzioni digitali complete per far crescere il tuo business nell'era digitale</p>
            </div>
            <div class="services-grid">
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-palette"></i>
                    </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="btn btn-outline">Scopri di più</a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-bullhorn"></i>
                    </div>
                    <h3 class="service-title">Comunicazione Multimediale</h3>
                    <p class="service-description">
                        Sviluppiamo strategie di comunicazione integrate che combinano video, 
                        grafica e contenuti testuali per raccontare la tua storia in modo efficace.
                    </p>
                    <a href="#" class="btn btn-outline">Scopri di più</a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="service-title">AI Generativa</h3>
                    <p class="service-description">
                        Sfruttiamo il potere dell'intelligenza artificiale per creare contenuti 
                        unici, personalizzati e ottimizzati che distinguono il tuo brand.
                    </p>
                    <a href="#" class="btn btn-outline">Scopri di più</a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3 class="service-title">Strategia SEO</h3>
                    <p class="service-description">
                        Ottimizziamo il tuo sito per i motori di ricerca con tecniche avanzate 
                        e tag semantici per migliorare la visibilità e attrarre traffico qualificato.
                    </p>
                    <a href="#" class="btn btn-outline">Scopri di più</a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="service-title">Growth Marketing</h3>
                    <p class="service-description">
                        Implementiamo strategie di marketing basate sui dati per accelerare 
                        la crescita del tuo business e massimizzare il ROI.
                    </p>
                    <a href="#" class="btn btn-outline">Scopri di più</a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="service-title">Sviluppo App</h3>
                    <p class="service-description">
                        Progettiamo e sviluppiamo applicazioni mobile native e cross-platform 
                        che offrono esperienze utente eccezionali.
                    </p>
                    <a href="#" class="btn btn-outline">Scopri di più</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section class="portfolio" id="portfolio">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Il Nostro Portfolio</h2>
                <p>Scopri alcuni dei progetti che abbiamo realizzato per i nostri clienti</p>
            </div>
            <div class="portfolio-filters fade-in">
                <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="multimedia">Multimedia</button>
                <button class="filter-btn" data-filter="ai">AI Generativa</button>
                <button class="filter-btn" data-filter="seo">SEO</button>
            </div>
            <div class="portfolio-grid">
                <div class="portfolio-item fade-in" data-category="web">
                    <img src="https://picsum.photos/seed/project1/600/400.jpg" alt="Progetto Web Design" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">E-commerce Fashion</h3>
                        <p class="portfolio-category">Web Design</p>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="multimedia">
                    <img src="https://picsum.photos/seed/project2/600/400.jpg" alt="Progetto Multimedia" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Campagna Video Brand</h3>
                        <p class="portfolio-category">Multimedia</p>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="ai">
                    <img src="https://picsum.photos/seed/project3/600/400.jpg" alt="Progetto AI" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Contenuti AI Generativa</h3>
                        <p class="portfolio-category">AI Generativa</p>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="seo">
                    <img src="https://picsum.photos/seed/project4/600/400.jpg" alt="Progetto SEO" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Ottimizzazione SEO E-commerce</h3>
                        <p class="portfolio-category">SEO</p>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="web">
                    <img src="https://picsum.photos/seed/project5/600/400.jpg" alt="Progetto Web Design" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Sito Corporate</h3>
                        <p class="portfolio-category">Web Design</p>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="multimedia">
                    <img src="https://picsum.photos/seed/project6/600/400.jpg" alt="Progetto Multimedia" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Branding Completo</h3>
                        <p class="portfolio-category">Multimedia</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section class="blog" id="blog">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Blog & Insights</h2>
                <p>Approfondimenti, tendenze e strategie per rimanere sempre aggiornati sul mondo digitale</p>
            </div>
            <div class="blog-grid">
                <article class="blog-card fade-in">
                    <img src="https://picsum.photos/seed/blog1/600/400.jpg" alt="Articolo Blog" class="blog-img">
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span><i class="far fa-calendar"></i> 15 Maggio 2023</span>
                            <span><i class="far fa-user"></i> Marco Rossi</span>
                        </div>
                        <h3 class="blog-title">L'impatto dell'AI Generativa nel Web Design</h3>
                        <p class="blog-excerpt">
                            Scopri come l'intelligenza artificiale sta rivoluzionando il processo creativo 
                            nel web design e quali opportunità offre per i designer moderni.
                        </p>
                        <a href="#" class="blog-link">
                            Leggi di più <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </article>
                <article class="blog-card fade-in">
                    <img src="https://picsum.photos/seed/blog2/600/400.jpg" alt="Articolo Blog" class="blog-img">
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span><i class="far fa-calendar"></i> 10 Maggio 2023</span>
                            <span><i class="far fa-user"></i> Laura Bianchi</span>
                        </div>
                        <h3 class="blog-title">SEO Semantico: La Chiave per il Futuro della Ricerca</h3>
                        <p class="blog-excerpt">
                            Approfondisci le tecniche di SEO semantico e scopri come ottimizzare i contenuti 
                            per rispondere alle esigenze degli utenti e dei motori di ricerca moderni.
                        </p>
                        <a href="#" class="blog-link">
                            Leggi di più <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </article>
                <article class="blog-card fade-in">
                    <img src="https://picsum.photos/seed/blog3/600/400.jpg" alt="Articolo Blog" class="blog-img">
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span><i class="far fa-calendar"></i> 5 Maggio 2023</span>
                            <span><i class="far fa-user"></i> Alessandro Verdi</span>
                        </div>
                        <h3 class="blog-title">Tendenze del Web Design per il 2023</h3>
                        <p class="blog-excerpt">
                            Dall'interfaccia 3D all'animazione avanzata, scopri le tendenze che 
                            domineranno il web design nel corso del 2023 e come applicarle.
                        </p>
                        <a href="#" class="blog-link">
                            Leggi di più <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="contact-container">
            <div class="section-title fade-in">
                <h2>Contattaci</h2>
                <p>Parlaci del tuo progetto e scopri come possiamo aiutarti a raggiungere i tuoi obiettivi</p>
            </div>
            <form class="contact-form fade-in">
                <div class="form-group">
                    <label for="name" class="form-label">Nome e Cognome</label>
                    <input type="text" id="name" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" id="email" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="subject" class="form-label">Oggetto</label>
                    <input type="text" id="subject" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="message" class="form-label">Messaggio</label>
                    <textarea id="message" class="form-control" required></textarea>
                </div>
                <button type="submit" class="form-submit">Invia Messaggio</button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3>Nexa Digital</h3>
                <p>Creiamo esperienze digitali che ispirano e trasformano le idee in realtà.</p>
                <div class="social-links">
                    <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="footer-column">
                <h3>Servizi</h3>
                <ul class="footer-links">
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Comunicazione Multimediale</a></li>
                    <li><a href="#">AI Generativa</a></li>
                    <li><a href="#">Strategia SEO</a></li>
                    <li><a href="#">Growth Marketing</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Azienda</h3>
                <ul class="footer-links">
                    <li><a href="#">Chi Siamo</a></li>
                    <li><a href="#">Il Nostro Team</a></li>
                    <li><a href="#">Carriere</a></li>
                    <li><a href="#">Partners</a></li>
                    <li><a href="#">Contatti</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Risorse</h3>
                <ul class="footer-links">
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Case Study</a></li>
                    <li><a href="#">Guide</a></li>
                    <li><a href="#">Webinar</a></li>
                    <li><a href="#">Newsletter</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Nexa Digital. Tutti i diritti riservati. | P.IVA 12345678901 | Privacy Policy | Cookie Policy</p>
        </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 navToggle = document.getElementById('navToggle');
        const navMenu = document.getElementById('navMenu');

        navToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            
            // Change icon
            const icon = navToggle.querySelector('i');
            if (icon.classList.contains('fa-bars')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });

        // Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                navMenu.classList.remove('active');
                const icon = navToggle.querySelector('i');
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            });
        });

        // Fade In Animation on Scroll
        const fadeElements = document.querySelectorAll('.fade-in');

        const fadeInOnScroll = function() {
            fadeElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('visible');
                }
            });
        };

        window.addEventListener('scroll', fadeInOnScroll);
        window.addEventListener('load', fadeInOnScroll);

        // Portfolio Filter
        const filterBtns = document.querySelectorAll('.filter-btn');
        const portfolioItems = document.querySelectorAll('.portfolio-item');

        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Remove active class from all buttons
                filterBtns.forEach(btn => btn.classList.remove('active'));
                // Add active class to clicked button
                btn.classList.add('active');
                
                const filter = btn.getAttribute('data-filter');
                
                portfolioItems.forEach(item => {
                    if (filter === 'all' || item.getAttribute('data-category') === filter) {
                        item.style.display = 'block';
                        // Add animation
                        setTimeout(() => {
                            item.style.opacity = '1';
                            item.style.transform = 'scale(1)';
                        }, 10);
                    } else {
                        item.style.opacity = '0';
                        item.style.transform = 'scale(0.8)';
                        setTimeout(() => {
                            item.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });

        // Form Submission
        const contactForm = document.querySelector('.contact-form');
        
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const subject = document.getElementById('subject').value;
            const message = document.getElementById('message').value;
            
            // Here you would normally send the data to a server
            // For this example, we'll just show a success message
            const formElements = contactForm.querySelectorAll('.form-control, .form-submit');
            formElements.forEach(element => {
                element.disabled = true;
            });
            
            // Create success message
            const successMessage = document.createElement('div');
            successMessage.className = 'success-message';
            successMessage.style.padding = '1rem';
            successMessage.style.marginTop = '1rem';
            successMessage.style.background = 'rgba(67, 233, 123, 0.2)';
            successMessage.style.border = '1px solid rgba(67, 233, 123, 0.5)';
            successMessage.style.borderRadius = '8px';
            successMessage.style.textAlign = 'center';
            successMessage.innerHTML = '<i class="fas fa-check-circle" style="color: #43e97b; margin-right: 0.5rem;"></i>Grazie per averci contattato! Ti risponderemo quanto prima.';
            
            contactForm.appendChild(successMessage);
            
            // Reset form after 3 seconds
            setTimeout(() => {
                contactForm.reset();
                formElements.forEach(element => {
                    element.disabled = false;
                });
                successMessage.remove();
            }, 3000);
        });

        // 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) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // Parallax effect for hero section
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const parallax = document.querySelector('.hero-bg');
            const shapes = document.querySelectorAll('.shape');
            
            if (parallax) {
                parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
            }
            
            shapes.forEach((shape, index) => {
                const speed = 0.5 + (index * 0.1);
                shape.style.transform = `translateY(${scrolled * speed}px)`;
            });
        });

        // Add animation to service cards on hover
        const serviceCards = document.querySelectorAll('.service-card');
        
        serviceCards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-10px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });

        // Dynamic typing effect for hero title
        const heroTitle = document.querySelector('.hero-content h1');
        const originalText = heroTitle.textContent;
        heroTitle.textContent = '';
        let charIndex = 0;

        function typeText() {
            if (charIndex < originalText.length) {
                heroTitle.textContent += originalText.charAt(charIndex);
                charIndex++;
                setTimeout(typeText, 50);
            }
        }

        // Start typing effect when page loads
        window.addEventListener('load', () => {
            setTimeout(typeText, 500);
        });
    </script>
</body>
</html>