FuturaDesign - Design che Definisc by @Darkness977 - Codewith.it

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

References

formnovalidateImpedisce la convalida di un singolo elemento input
<h3>Titolo di intestazione di terzo livello
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<caption>Definisce didascalie all'interno di una tabella
<br>Inserisce uno spazio vuoto tra due elementi HTML.
formSpecifica a quale form appartiene un elemento.

Users

Log in to search for users

Explore

Find inspiration

esercitazione 1

template 2 colonne

JEANSON ANCHETA

Esercitazione informatica(2)

5/10/24 es. 8 - conta alfabeto

Esercitazione STA 16/03

Template Wheel Stripes

affettiminoriwill

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 all'avanguardia specializzata in web design, comunicazione multimediale AI generativa e strategie SEO avanzate">
    <meta name="keywords" content="design, web design, AI generativa, SEO, comunicazione multimediale, strategia digitale">
    <meta name="author" content="FuturaDesign Agency">
    <meta property="og:title" content="FuturaDesign - Design che Definisce il Futuro">
    <meta property="og:description" content="Trasformiamo le tue idee in esperienze digitali memorabili con l'aiuto dell'AI e design all'avanguardia">
    <meta property="og:image" content="https://picsum.photos/seed/futuradesign/1200/630.jpg">
    <meta property="og:url" content="https://www.futuradesign.it">
    <meta name="twitter:card" content="summary_large_image">
    
    <title>FuturaDesign - Design che Definisce il Futuro</title>
    
    <!-- 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">
    
    <!-- Font Awesome per icone -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* Variabili CSS per design system */
        :root {
            --primary-color: #6B46C1;
            --secondary-color: #9333EA;
            --accent-color: #EC4899;
            --dark-color: #0F172A;
            --light-color: #F8FAFC;
            --text-color: #334155;
            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
            --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-2xl: 0 25px 50px rgba(0,0,0,0.25);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Reset e stili di base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--light-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        /* Stile per titoli */
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: 1rem;
        }
        
        h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
        }
        
        h2 {
            font-size: clamp(2rem, 4vw, 3rem);
        }
        
        h3 {
            font-size: clamp(1.5rem, 3vw, 2rem);
        }
        
        p {
            margin-bottom: 1rem;
        }
        
        a {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }
        
        a:hover {
            color: var(--secondary-color);
        }
        
        /* Container */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 12 20px;
        }
        
        /* Header e navigazione */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: var(--transition);
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.8);
        }
        
        header.scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: var(--shadow-md);
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5rem 0;
        }
        
        .logo {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 0.5rem;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }
        
        .nav-link {
            font-weight: 500;
            position: relative;
            transition: var(--transition);
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient-primary);
            transition: var(--transition);
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }
        
        .hamburger span {
            width: 25px;
            height: 3px;
            background-color: var(--dark-color);
            margin: 3px 0;
            transition: var(--transition);
        }
        
        .hamburger.active span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }
        
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger.active span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }
        
        /* 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;
            background: linear-gradient(135deg, rgba(107, 70, 193, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
        }
        
        .geometric-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }
        
        .shape {
            position: absolute;
            opacity: 0.1;
        }
        
        .shape-1 {
            width: 300px;
            height: 300px;
            background: var(--gradient-primary);
            border-radius: 50%;
            top: 10%;
            left: 10%;
            animation: float 15s infinite ease-in-out;
        }
        
        .shape-2 {
            width: 200px;
            height: 200px;
            background: var(--gradient-secondary);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            bottom: 10%;
            right: 10%;
            animation: float 20s infinite ease-in-out reverse;
        }
        
        .shape-3 {
            width: 150px;
            height: 150px;
            background: var(--gradient-accent);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            top: 50%;
            right: 20%;
            animation: float 18s infinite ease-in-out;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(10deg);
            }
        }
        
        .hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }
        
        .hero-text h1 {
            margin-bottom: 1.5rem;
        }
        
        .gradient-text {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .hero-text p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        
        .btn-group {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            font-size: 1rem;
        }
        
        .btn-primary {
            background: var(--gradient-primary);
            color: white;
            box-shadow: var(--shadow-md);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-xl);
        }
        
        .btn-outline {
            background: transparent;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
        }
        
        .btn-outline:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-3px);
        }
        
        .hero-image {
            position: relative;
        }
        
        .hero-image img {
            width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: var(--shadow-2xl);
        }
        
        .hero-image::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: 20px;
            bottom: 20px;
            background: var(--gradient-primary);
            border-radius: 20px;
            z-index: -1;
            opacity: 0.3;
        }
        
        /* Sezione Servizi */
        .services {
            padding: 100px 0;
            background-color: white;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        
        .section-header h2 {
            margin-bottom: 1rem;
        }
        
        .section-header 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: 2rem;
        }
        
        .service-card {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--gradient-primary);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-2xl);
        }
        
        .service-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            color: white;
            font-size: 1.5rem;
        }
        
        .service-card h3 {
            margin-bottom: 1rem;
        }
        
        .service-card p {
            margin-bottom: 1.5rem;
        }
        
        .service-link {
            display: inline-flex;
            align-items: center;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .service-link i {
            margin-left: 0.5rem;
            transition: var(--transition);
        }
        
        .service-link:hover i {
            transform: translateX(5px);
        }
        
        /* Sezione Portfolio */
        .portfolio {
            padding: 100px 0;
            background-color: #f8fafc;
        }
        
        .portfolio-filters {
            display: flex;
            justify-content: center;
            margin-bottom: 3rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .filter-btn {
            padding: 0.5rem 1.5rem;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 50px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-btn.active,
        .filter-btn:hover {
            background: var(--gradient-primary);
            color: white;
            border-color: transparent;
        }
        
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
        }
        
        .portfolio-item {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
            height: 300px;
        }
        
        .portfolio-item:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-2xl);
        }
        
        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .portfolio-item:hover img {
            transform: scale(1.1);
        }
        
        .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: 2rem;
            opacity: 0;
            transition: var(--transition);
        }
        
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        
        .portfolio-overlay h3 {
            color: white;
            margin-bottom: 0.5rem;
        }
        
        .portfolio-overlay p {
            color: rgba(255,255,255,0.8);
            margin-bottom: 1rem;
        }
        
        .portfolio-link {
            display: inline-flex;
            align-items: center;
            color: white;
            font-weight: 600;
        }
        
        .portfolio-link i {
            margin-left: 0.5rem;
        }
        
        /* Sezione About */
        .about {
            padding: 100px 0;
            background-color: white;
        }
        
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }
        
        .about-text h2 {
            margin-bottom: 1.5rem;
        }
        
        .about-text p {
            margin-bottom: 1.5rem;
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .stat-label {
            font-weight: 500;
            color: var(--text-color);
        }
        
        .about-image {
            position: relative;
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: var(--shadow-2xl);
        }
        
        .about-image::before {
            content: '';
            position: absolute;
            top: -20px;
            right: -20px;
            left: 20px;
            bottom: 20px;
            background: var(--gradient-secondary);
            border-radius: 20px;
            z-index: -1;
            opacity: 0.3;
        }
        
        /* Sezione Team */
        .team {
            padding: 100px 0;
            background-color: #f8fafc;
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
        }
        
        .team-member {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
        }
        
        .team-member:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-2xl);
        }
        
        .member-image {
            height: 280px;
            overflow: hidden;
        }
        
        .member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .team-member:hover .member-image img {
            transform: scale(1.1);
        }
        
        .member-info {
            padding: 1.5rem;
        }
        
        .member-info h3 {
            margin-bottom: 0.5rem;
        }
        
        .member-role {
            color: var(--primary-color);
            font-weight: 500;
            margin-bottom: 1rem;
        }
        
        .member-socials {
            display: flex;
            gap: 1rem;
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-color);
            transition: var(--transition);
        }
        
        .social-link:hover {
            background: var(--gradient-primary);
            color: white;
        }
        
        /* Sezione Blog */
        .blog {
            padding: 100px 0;
            background-color: white;
        }
        
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
        }
        
        .blog-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
        }
        
        .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-2xl);
        }
        
        .blog-image {
            height: 200px;
            overflow: hidden;
        }
        
        .blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
        
        .blog-content {
            padding: 1.5rem;
        }
        
        .blog-meta {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: var(--text-color);
        }
        
        .blog-meta span {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .blog-content h3 {
            margin-bottom: 1rem;
        }
        
        .blog-content p {
            margin-bottom: 1.5rem;
        }
        
        .blog-link {
            display: inline-flex;
            align-items: center;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .blog-link i {
            margin-left: 0.5rem;
            transition: var(--transition);
        }
        
        .blog-link:hover i {
            transform: translateX(5px);
        }
        
        /* Sezione Contatti */
        .contact {
            padding: 100px 0;
            background-color: #f8fafc;
        }
        
        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }
        
        .contact-info h2 {
            margin-bottom: 1.5rem;
        }
        
        .contact-info p {
            margin-bottom: 2rem;
        }
        
        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .contact-icon {
            width: 50px;
            height: 50px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .contact-form {
            background: white;
            padding: 2rem;
            border-radius: 20px;
            box-shadow: var(--shadow-md);
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-family: inherit;
            transition: var(--transition);
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        textarea.form-control {
            resize: vertical;
            min-height: 150px;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 60px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        .footer-column h3 {
            margin-bottom: 1.5rem;
            color: white;
        }
        
        .footer-logo {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .footer-logo i {
            margin-right: 0.5rem;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .footer-column p {
            margin-bottom: 1.5rem;
            color: rgba(255,255,255,0.7);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.75rem;
        }
        
        .footer-links a {
            color: rgba(255,255,255,0.7);
            transition: var(--transition);
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        .footer-socials {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        
        .footer-social {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: var(--transition);
        }
        
        .footer-social:hover {
            background: var(--gradient-primary);
        }
        
        .footer-bottom {
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            text-align: center;
            color: rgba(255,255,255,0.7);
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .hero-content,
            .about-content,
            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .hero-image {
                order: -1;
            }
            
            .stats {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .nav-menu {
                position: fixed;
                left: -100%;
                top: 70px;
                flex-direction: column;
                background-color: white;
                width: 100%;
                text-align: center;
                transition: 0.3s;
                box-shadow: var(--shadow-lg);
                padding: 2rem 0;
            }
            
            .nav-menu.active {
                left: 0;
            }
            
            .hamburger {
                display: flex;
            }
            
            .stats {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .btn-group {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .portfolio-grid,
            .blog-grid {
                grid-template-columns: 1fr;
            }
            
            .services-grid,
            .team-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Animazioni */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Scroll to top button */
        .scroll-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 999;
        }
        
        .scroll-top.active {
            opacity: 1;
            visibility: visible;
        }
        
        .scroll-top:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header id="header">
        <nav class="container">
            <div class="logo">
                <i class="fas fa-rocket"></i>
                FuturaDesign
            </div>
            <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="#about" class="nav-link">Chi Siamo</a></li>
                <li><a href="#team" class="nav-link">Team</a></li>
                <li><a href="#blog" class="nav-link">Blog</a></li>
                <li><a href="#contact" class="nav-link">Contatti</a></li>
            </ul>
            <div class="hamburger" id="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </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="container">
            <div class="hero-content">
                <div class="hero-text fade-in">
                    <h1>Design che <span class="gradient-text">Definisce il Futuro</span></h1>
                    <p>Trasformiamo le tue idee in esperienze digitali memorabili con l'aiuto dell'AI e design all'avanguardia</p>
                    <div class="btn-group">
                        <a href="#portfolio" class="btn btn-primary">Scopri i nostri lavori</a>
                        <a href="#contact" class="btn btn-outline">Contattaci</a>
                    </div>
                </div>
                <div class="hero-image fade-in">
                    <img src="https://picsum.photos/seed/futuradesign-hero/600/500.jpg" alt="Design Futuristico">
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="services">
        <div class="container">
            <div class="section-header fade-in">
                <h2>I Nostri <span class="gradient-text">Servizi</span></h2>
                <p>Offriamo soluzioni digitali complete che combinano creatività, tecnologia e strategia per risultati eccezionali</p>
            </div>
            <div class="services-grid">
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-palette"></i>
                    </div>
                    <h3>Design Creativo</h3>
                    <p>Creiamo identità visive uniche che comunicano i valori del tuo brand e catturano l'attenzione del pubblico.</p>
                    <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h3>Web Design Avanzato</h3>
                    <p>Siti web responsive, veloci e ottimizzati che offrono un'esperienza utente impeccabile su tutti i dispositivi.</p>
                    <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3>AI Generativa</h3>
                    <p>Sfruttiamo l'intelligenza artificiale generativa per creare contenuti visivi unici e soluzioni innovative.</p>
                    <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3>Strategia SEO</h3>
                    <p>Ottimizziamo il tuo sito per i motori di ricerca con tecniche avanzate e tag semantici per massima visibilità.</p>
                    <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-bullhorn"></i>
                    </div>
                    <h3>Comunicazione Multimediale</h3>
                    <p>Creiamo campagne di comunicazione integrate che combinano video, animazioni e contenuti interattivi.</p>
                    <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3>Marketing Digitale</h3>
                    <p>Strategie di marketing digitale mirate per aumentare la tua visibilità e convertire visitatori in clienti.</p>
                    <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section class="portfolio" id="portfolio">
        <div class="container">
            <div class="section-header fade-in">
                <h2>Il Nostro <span class="gradient-text">Portfolio</span></h2>
                <p>Esplora i nostri progetti più recenti e scopri come abbiamo aiutato i nostri clienti a raggiungere i loro obiettivi</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="branding">Branding</button>
                <button class="filter-btn" data-filter="ai">AI Generativa</button>
                <button class="filter-btn" data-filter="marketing">Marketing</button>
            </div>
            <div class="portfolio-grid">
                <div class="portfolio-item fade-in" data-category="web">
                    <img src="https://picsum.photos/seed/portfolio1/400/300.jpg" alt="Progetto Web Design">
                    <div class="portfolio-overlay">
                        <h3>Sito E-commerce Moderno</h3>
                        <p>Design e sviluppo di piattaforma e-commerce con esperienza utente ottimizzata</p>
                        <a href="#" class="portfolio-link">Vedi progetto <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="branding">
                    <img src="https://picsum.photos/seed/portfolio2/400/300.jpg" alt="Progetto Branding">
                    <div class="portfolio-overlay">
                        <h3>Rebranding Tech Startup</h3>
                        <p>Creazione di identità visiva completa per startup tecnologica emergente</p>
                        <a href="#" class="portfolio-link">Vedi progetto <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="ai">
                    <img src="https://picsum.photos/seed/portfolio3/400/300.jpg" alt="Progetto AI">
                    <div class="portfolio-overlay">
                        <h3>Campagna AI Generativa</h3>
                        <p>Sviluppo di contenuti visivi unici con intelligenza artificiale generativa</p>
                        <a href="#" class="portfolio-link">Vedi progetto <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="marketing">
                    <img src="https://picsum.photos/seed/portfolio4/400/300.jpg" alt="Progetto Marketing">
                    <div class="portfolio-overlay">
                        <h3>Campagna Multimediale</h3>
                        <p>Strategia di comunicazione integrata per lancio prodotto</p>
                        <a href="#" class="portfolio-link">Vedi progetto <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="web">
                    <img src="https://picsum.photos/seed/portfolio5/400/300.jpg" alt="Progetto Web Design">
                    <div class="portfolio-overlay">
                        <h3>Applicazione Web Interattiva</h3>
                        <p>Sviluppo di dashboard interattiva con visualizzazione dati avanzata</p>
                        <a href="#" class="portfolio-link">Vedi progetto <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="portfolio-item fade-in" data-category="ai">
                    <img src="https://picsum.photos/seed/portfolio6/400/300.jpg" alt="Progetto AI">
                    <div class="portfolio-overlay">
                        <h3>Esperienza AR Immersiva</h3>
                        <p>Creazione di esperienza di realtà aumentata per evento aziendale</p>
                        <a href="#" class="portfolio-link">Vedi progetto <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="about" id="about">
        <div class="container">
            <div class="about-content">
                <div class="about-text fade-in">
                    <h2>Chi <span class="gradient-text">Siamo</span></h2>
                    <p>Siamo un team di creativi, designer e sviluppatori appassionati che credono nel potere del design per trasformare idee in esperienze digitali memorabili.</p>
                    <p>Con anni di esperienza nel settore e una costante ricerca di innovazione, combiniamo estetica, funzionalità e tecnologia per creare soluzioni che non solo sembrano belle, ma producono risultati concreti.</p>
                    <p>La nostra missione è aiutare le aziende a distinguersi nel panorama digitale, comunicando i loro valori in modo efficace e creando connessioni autentiche con il loro pubblico.</p>
                    <div class="stats">
                        <div class="stat-item">
                            <div class="stat-number">150+</div>
                            <div class="stat-label">Progetti Completati</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">50+</div>
                            <div class="stat-label">Clienti Soddisfatti</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">8+</div>
                            <div class="stat-label">Anni di Esperienza</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">15+</div>
                            <div class="stat-label">Premi Vinti</div>
                        </div>
                    </div>
                </div>
                <div class="about-image fade-in">
                    <img src="https://picsum.photos/seed/about-image/600/500.jpg" alt="Il nostro team">
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="team" id="team">
        <div class="container">
            <div class="section-header fade-in">
                <h2>Il Nostro <span class="gradient-text">Team</span></h2>
                <p>Conosci i talenti che danno vita alle idee più innovative</p>
            </div>
            <div class="team-grid">
                <div class="team-member fade-in">
                    <div class="member-image">
                        <img src="https://picsum.photos/seed/team1/300/300.jpg" alt="Team Member">
                    </div>
                    <div class="member-info">
                        <h3>Alessandro Rossi</h3>
                        <p class="member-role">Creative Director</p>
                        <div class="member-socials">
                            <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-dribbble"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member fade-in">
                    <div class="member-image">
                        <img src="https://picsum.photos/seed/team2/300/300.jpg" alt="Team Member">
                    </div>
                    <div class="member-info">
                        <h3>Giulia Bianchi</h3>
                        <p class="member-role">UX/UI Designer</p>
                        <div class="member-socials">
                            <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-behance"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member fade-in">
                    <div class="member-image">
                        <img src="https://picsum.photos/seed/team3/300/300.jpg" alt="Team Member">
                    </div>
                    <div class="member-info">
                        <h3>Marco Ferrari</h3>
                        <p class="member-role">Lead Developer</p>
                        <div class="member-socials">
                            <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-codepen"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member fade-in">
                    <div class="member-image">
                        <img src="https://picsum.photos/seed/team4/300/300.jpg" alt="Team Member">
                    </div>
                    <div class="member-info">
                        <h3>Sara Conti</h3>
                        <p class="member-role">AI Specialist</p>
                        <div class="member-socials">
                            <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-medium"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section class="blog" id="blog">
        <div class="container">
            <div class="section-header fade-in">
                <h2>Il Nostro <span class="gradient-text">Blog</span></h2>
                <p>Approfondimenti, tendenze e novità dal mondo del design e della tecnologia</p>
            </div>
            <div class="blog-grid">
                <article class="blog-card fade-in">
                    <div class="blog-image">
                        <img src="https://picsum.photos/seed/blog1/400/250.jpg" alt="Blog Post">
                    </div>
                    <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> Alessandro Rossi</span>
                        </div>
                        <h3>L'evoluzione del web design: tendenze 2023</h3>
                        <p>Scopri le ultime tendenze nel mondo del web design e come stanno trasformando l'esperienza utente.</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">
                    <div class="blog-image">
                        <img src="https://picsum.photos/seed/blog2/400/250.jpg" alt="Blog Post">
                    </div>
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span><i class="far fa-calendar"></i> 8 Maggio 2023</span>
                            <span><i class="far fa-user"></i> Sara Conti</span>
                        </div>
                        <h3>AI generativa: rivoluzione nel design creativo</h3>
                        <p>Come l'intelligenza artificiale sta cambiando il processo creativo e aprendo nuove possibilità.</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">
                    <div class="blog-image">
                        <img src="https://picsum.photos/seed/blog3/400/250.jpg" alt="Blog Post">
                    </div>
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span><i class="far fa-calendar"></i> 2 Maggio 2023</span>
                            <span><i class="far fa-user"></i> Marco Ferrari</span>
                        </div>
                        <h3>SEO semantica: il futuro della ricerca online</h3>
                        <p>Approfondisci le strategie SEO basate sulla semantica per migliorare il posizionamento sui motori di ricerca.</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="container">
            <div class="section-header fade-in">
                <h2>Contattaci</h2>
                <p>Parlaci del tuo progetto e scopri come possiamo aiutarti a raggiungere i tuoi obiettivi</p>
            </div>
            <div class="contact-content">
                <div class="contact-info fade-in">
                    <h2>Iniziamo un <span class="gradient-text">Progetto Insieme</span></h2>
                    <p>Siamo pronti a trasformare le tue idee in realtà. Contattaci per una consulenza gratuita e scopri come possiamo portare il tuo business al livello successivo.</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4>Indirizzo</h4>
                                <p>Via del Design, 123<br>20121 Milano, Italia</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4>Telefono</h4>
                                <p>+39 02 12345678</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4>Email</h4>
                                <p>info@futuradesign.it</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contact-form fade-in">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name">Nome</label>
                            <input type="text" id="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="subject">Oggetto</label>
                            <input type="text" id="subject" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Messaggio</label>
                            <textarea id="message" class="form-control" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Invia Messaggio</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <div class="footer-logo">
                        <i class="fas fa-rocket"></i>
                        FuturaDesign
                    </div>
                    <p>Design che definisce il futuro. Trasformiamo idee in esperienze digitali memorabili.</p>
                    <div class="footer-socials">
                        <a href="#" class="footer-social"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="footer-social"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="footer-social"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="footer-social"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="footer-social"><i class="fab fa-dribbble"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Link Utili</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#services">Servizi</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#about">Chi Siamo</a></li>
                        <li><a href="#blog">Blog</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Servizi</h3>
                    <ul class="footer-links">
                        <li><a href="#">Design Creativo</a></li>
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">AI Generativa</a></li>
                        <li><a href="#">SEO</a></li>
                        <li><a href="#">Marketing Digitale</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Iscriviti per ricevere le ultime novità dal mondo del design e della tecnologia.</p>
                    <form id="newsletterForm">
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="La tua email" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Iscriviti</button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 FuturaDesign. Tutti i diritti riservati. | <a href="#" style="color: rgba(255,255,255,0.7);">Privacy Policy</a> | <a href="#" style="color: rgba(255,255,255,0.7);">Termini di Utilizzo</a></p>
            </div>
        </div>
    </footer>

    <!-- Scroll to top button -->
    <div class="scroll-top" id="scrollTop">
        <i class="fas fa-arrow-up"></i>
    </div>

    <script>
        // Sticky header
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // Mobile menu toggle
        const hamburger = document.getElementById('hamburger');
        const navMenu = document.getElementById('navMenu');

        hamburger.addEventListener('click', function() {
            hamburger.classList.toggle('active');
            navMenu.classList.toggle('active');
        });

        // Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                hamburger.classList.remove('active');
                navMenu.classList.remove('active');
            });
        });

        // Portfolio filtering
        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.getElementById('contactForm');
        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 an alert
            alert('Grazie per averci contattato! Ti risponderemo al più presto.');
            contactForm.reset();
        });

        const newsletterForm = document.getElementById('newsletterForm');
        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 an alert
            alert('Grazie per esserti iscritto alla nostra newsletter!');
            newsletterForm.reset();
        });

        // Scroll to top
        const scrollTop = document.getElementById('scrollTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 500) {
                scrollTop.classList.add('active');
            } else {
                scrollTop.classList.remove('active');
            }
        });

        scrollTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Fade in animation on scroll
        const fadeElements = document.querySelectorAll('.fade-in');

        const fadeInOnScroll = () => {
            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);

        // Parallax effect for hero section
        window.addEventListener('scroll', () => {
            const scrolled = window.scrollY;
            const shapes = document.querySelectorAll('.shape');
            
            shapes.forEach((shape, index) => {
                const speed = 0.5 + (index * 0.1);
                shape.style.transform = `translateY(${scrolled * speed}px)`;
            });
        });
    </script>
</body>
</html>