Aurion Agency | Digital Alchemy by @Darkness977 - Codewith.it

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

References

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<video>Integra e controlla video in una pagina HTML
<tbody>Definisce il contenuto principale di una tabella.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<h2>Titolo di intestazione di secondo livello

Users

Log in to search for users

Explore

Find inspiration

RoofTop Snipers

GoUp Fitness Opz 2

Esercitazione 1ù

TABELLA RIEPILOGATIVA

esercizio gatto

ESERCIZIO: LE REGIONI ITALIANE E

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>PixelFlow - Agenzia di Comunicazione e Design</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* --- Impostazioni Globali e Variabili --- */
        :root {
            --primary-color: #0a0a0a;
            --accent-color: #d946ef; /* Viola elettrico */
            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --text-light: #e5e5e5;
            --text-muted: #a3a3a3;
            --bg-section: #111111;
            --font-primary: 'Poppins', sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-primary);
            background-color: var(--primary-color);
            color: var(--text-light);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3 {
            font-weight: 700;
            line-height: 1.2;
        }

        a {
            color: var(--accent-color);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        section {
            padding: 100px 0;
        }

        /* --- Bottone Stile Unico --- */
        .btn {
            display: inline-block;
            padding: 15px 35px;
            background: var(--accent-gradient);
            color: #fff;
            font-weight: 600;
            border-radius: 50px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }

        .btn:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(217, 70, 239, 0.4);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--accent-color);
            color: var(--accent-color);
        }

        .btn-outline:hover {
            background: var(--accent-color);
            color: #fff;
            box-shadow: 0 10px 25px rgba(217, 70, 239, 0.4);
        }

        /* --- Header e Menu di Navigazione --- */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: background-color 0.4s ease, padding 0.4s ease;
        }

        header.scrolled {
            background-color: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(10px);
            padding: 10px 0;
            box-shadow: 0 5px 20px rgba(0,0,0,0.5);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--text-light);
        }

        .logo span {
            color: var(--accent-color);
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 30px;
        }

        .nav-links a {
            color: var(--text-light);
            font-weight: 500;
            position: relative;
            padding-bottom: 5px;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-gradient);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }
        
        .nav-links a:hover, .nav-links a:focus {
            outline: 2px solid var(--accent-color);
            outline-offset: 5px;
            border-radius: 4px;
        }

        /* --- Hero Section con Gradiente e Parallasse --- */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            padding-top: 80px; /* Compensa il menu fisso */
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -20%;
            left: -20%;
            width: 140%;
            height: 140%;
            background: radial-gradient(circle, rgba(217, 70, 239, 0.1) 0%, transparent 70%);
            animation: float 20s infinite ease-in-out;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(30px, -30px) rotate(120deg); }
            66% { transform: translate(-20px, 20px) rotate(240deg); }
        }

        .hero-content {
            z-index: 1;
            max-width: 800px;
        }

        .hero h1 {
            font-size: clamp(2.5rem, 8vw, 4.5rem);
            margin-bottom: 20px;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero p {
            font-size: 1.2rem;
            color: var(--text-muted);
            margin-bottom: 40px;
        }

        .parallax-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 120%;
            background-image: url('https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');
            background-size: cover;
            background-position: center;
            will-change: transform;
            z-index: -1;
            opacity: 0.2;
        }

        /* --- Sezione Servizi --- */
        .services {
            background-color: var(--bg-section);
        }
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
        }
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        .service-card {
            background: #1a1a1a;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #333;
        }
        .service-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 30px rgba(217, 70, 239, 0.2);
            border-color: var(--accent-color);
        }
        .service-card i {
            font-size: 3rem;
            color: var(--accent-color);
            margin-bottom: 20px;
        }
        .service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        /* --- Sezione Portfolio (Anteprime) --- */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
        }
        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            height: 300px;
            cursor: pointer;
        }
        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 10, 10, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        .portfolio-item:hover img {
            transform: scale(1.1);
        }
        .portfolio-overlay h3 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }
        .portfolio-overlay p {
            color: var(--text-muted);
        }

        /* --- Sezione FAQ --- */
        .faq {
            background-color: var(--bg-section);
        }
        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .faq-item {
            background: #1a1a1a;
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #333;
        }
        .faq-question {
            width: 100%;
            padding: 20px;
            font-size: 1.1rem;
            text-align: left;
            background: none;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s ease;
        }
        .faq-question:hover {
            background-color: #252525;
        }
        .faq-question.active {
            color: var(--accent-color);
        }
        .faq-question i {
            transition: transform 0.3s ease;
        }
        .faq-question.active i {
            transform: rotate(45deg);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
            padding: 0 20px;
            color: var(--text-muted);
        }
        .faq-answer.show {
            max-height: 500px; /* Valore arbitrario alto */
            padding: 0 20px 20px 20px;
        }

        /* --- Sezione Contatti --- */
        .contact {
            text-align: center;
        }
        .contact-form {
            max-width: 600px;
            margin: 50px auto 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .contact-form input, .contact-form textarea {
            width: 100%;
            padding: 15px;
            background: #1a1a1a;
            border: 1px solid #333;
            border-radius: 8px;
            color: var(--text-light);
            font-family: var(--font-primary);
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }
        .contact-form input:focus, .contact-form textarea:focus {
            outline: none;
            border-color: var(--accent-color);
        }
        .contact-form textarea {
            min-height: 150px;
            resize: vertical;
        }

        /* --- Footer --- */
        footer {
            background-color: #050505;
            padding: 40px 0;
            text-align: center;
            border-top: 1px solid #222;
        }
        .social-links {
            margin-bottom: 20px;
        }
        .social-links a {
            color: var(--text-muted);
            font-size: 1.5rem;
            margin: 0 15px;
            transition: color 0.3s ease;
        }
        .social-links a:hover {
            color: var(--accent-color);
        }
        footer p {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        /* --- Responsive --- */
        @media (max-width: 768px) {
            .nav-links {
                display: none; /* Per semplicità, su mobile si nasconde. In un progetto reale si userebbe un hamburger menu. */
            }
            .hero h1 {
                font-size: 2.5rem;
            }
            .section-title {
                font-size: 2rem;
            }
            section {
                padding: 60px 0;
            }
        }
    </style>
</head>
<body>

    <!-- ==================== HEADER ==================== -->
    <header id="main-header">
        <nav class="container">
            <a href="#" class="logo">Pixel<span>Flow</span></a>
            <ul class="nav-links">
                <li><a href="#services">Servizi</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#faq">FAQ</a></li>
                <li><a href="#contact" class="btn btn-outline">Contattaci</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- ==================== HERO SECTION ==================== -->
        <section class="hero">
            <div class="parallax-bg" data-speed="0.5"></div>
            <div class="hero-content">
                <h1>Creiamo Esperienze Digitali Memorabili</h1>
                <p>Dall'idea al successo. Trasformiamo la tua visione in progetti di comunicazione e design che conquistano e convertono.</p>
                <a href="#contact" class="btn">Inizia il Tuo Progetto</a>
            </div>
        </section>

        <!-- ==================== SERVICES SECTION ==================== -->
        <section id="services" class="services">
            <div class="container">
                <h2 class="section-title">I Nostri Servizi</h2>
                <div class="services-grid">
                    <div class="service-card">
                        <i class="fas fa-paint-brush"></i>
                        <h3>Brand Identity & Design</h3>
                        <p>Creiamo un'identità visiva unica e coerente, dal logo all'immagine coordinata, per far risaltare il tuo brand.</p>
                    </div>
                    <div class="service-card">
                        <i class="fas fa-laptop-code"></i>
                        <h3>Sviluppo Web & UX/UI</h3>
                        <p>Progettiamo e sviluppiamo siti web e applicazioni moderni, veloci e intuitivi, con un'esperienza utente d'impatto.</p>
                    </div>
                    <div class="service-card">
                        <i class="fas fa-bullhorn"></i>
                        <h3>Marketing Digitale</h3>
                        <p>Strategie di marketing su misura per aumentare la tua visibilità, raggiungere il tuo pubblico e misurare i risultati.</p>
                    </div>
                    <div class="service-card">
                        <i class="fas fa-video"></i>
                        <h3>Content & Video Production</h3>
                        <p>Realizziamo contenuti di valore, dai post per i social media a video corporate, per raccontare la tua storia.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- ==================== PORTFOLIO SECTION ==================== -->
        <section id="portfolio">
            <div class="container">
                <h2 class="section-title">I Nostri Lavori</h2>
                <div class="portfolio-grid">
                    <div class="portfolio-item">
                        <img src="https://images.unsplash.com/photo-1559028006-44a56f1a7b0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Progetto 1">
                        <div class="portfolio-overlay">
                            <h3>Rebranding TechCorp</h3>
                            <p>Brand Identity, Web Design</p>
                        </div>
                    </div>
                    <div class="portfolio-item">
                        <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Progetto 2">
                        <div class="portfolio-overlay">
                            <h3>Campagna "Vivi Sano"</h3>
                            <p>Social Media, Video</p>
                        </div>
                    </div>
                    <div class="portfolio-item">
                        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1173&q=80" alt="Progetto 3">
                        <div class="portfolio-overlay">
                            <h3>E-commerce ModaStyle</h3>
                            <p>UX/UI, Sviluppo Web</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ==================== FAQ SECTION ==================== -->
        <section id="faq" class="faq">
            <div class="container">
                <h2 class="section-title">Domande Frequenti</h2>
                <div class="faq-container">
                    <div class="faq-item">
                        <button class="faq-question">Qual è esattamente il vostro processo di lavoro?<i class="fas fa-plus"></i></button>
                        <div class="faq-answer">
                            <p>Il nostro processo è un percorso collaborativo in 4 fasi: 1) Ascolto e Strategia: capiamo i tuoi obiettivi. 2) Concept e Design: creiamo mockup e proposte creative. 3) Sviluppo e Produzione: diamo vita al progetto. 4) Lancio e Analisi: monitoriamo i risultati e ottimizziamo. Ti coinvolgiamo in ogni passaggio.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <button class="faq-question">Come determinate il costo di un progetto?<i class="fas fa-plus"></i></button>
                        <div class="faq-answer">
                            <p>Ogni progetto è unico. Dopo un primo consulto gratuito, prepariamo un preventivo dettagliato basato sulla complessità, sulle ore di lavoro stimate e sulle tecnologie necessarie. Trasparenza e chiarezza sono le nostre priorità: non ci sono costi nascosti.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <button class="faq-question">Quanto tempo ci vuole per completare un sito web?<i class="fas fa-plus"></i></button>
                        <div class="faq-answer">
                            <p>I tempi variano in base alla scala. Un sito vetrina può richiedere 3-4 settimane, mentre un e-commerce o un'applicazione personalizzata può richiedere 2-4 mesi. Forniamo sempre una timeline dettagliata prima di iniziare.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <button class="faq-question">E se non mi piace la prima proposta grafica?<i class="fas fa-plus"></i></button>
                        <div class="faq-answer">
                            <p>La tua soddisfazione è fondamentale. Il nostro processo include fasi di revisione e feedback. La prima proposta è un punto di partenza. Lavoriamo a stretto contatto con te per affinare il design fino a quando non sarai entusiasta del risultato finale.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <button class="faq-question">Lavorate anche con startup e piccole imprese?<i class="fas fa-plus"></i></button>
                        <div class="faq-answer">
                            <p>Assolutamente sì! Amiamo supportare le realtà emergenti. Abbiamo pacchetti flessibili e soluzioni scalabili pensate appositamente per le esigenze e i budget di startup e piccole imprese, aiutandole a crescere con una solida base di comunicazione.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <button class="faq-question">Cosa vi rende diversi dalle altre agenzie?<i class="fas fa-plus"></i></button>
                        <div class="faq-answer">
                            <p>La nostra differenza sta nell'approccio olistico: non ci limitiamo a "fare un sito" o "un logo". Creiamo un ecosistema di comunicazione coeso. Uniamo creatività pura a una solida strategia di marketing, garantendo che ogni elemento non sia solo bello, ma anche efficace e misurabile.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <button class="faq-question">Che tipo di supporto offrite dopo il lancio?<i class="fas fa-plus"></i></button>
                        <div class="faq-answer">
                            <p>Il nostro rapporto non finisce con il lancio. Offriamo piani di manutenzione e supporto tecnico per siti web, servizi di gestione social media e consulenze continue per assicurarci che il tuo progetto continui a performare al meglio e a evolversi con il tuo business.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ==================== CONTACT SECTION ==================== -->
        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title">Pronti a Iniziare?</h2>
                <p>Raccontaci il tuo progetto. Troveremo insieme la soluzione perfetta per te.</p>
                <form class="contact-form">
                    <input type="text" placeholder="Il Tuo Nome" required>
                    <input type="email" placeholder="La Tua Email" required>
                    <textarea placeholder="Descrivi la tua idea..." required></textarea>
                    <button type="submit" class="btn">Invia Messaggio</button>
                </form>
            </div>
        </section>
    </main>

    <!-- ==================== FOOTER ==================== -->
    <footer>
        <div class="container">
            <div class="social-links">
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
                <a href="#"><i class="fab fa-behance"></i></a>
                <a href="#"><i class="fab fa-dribbble"></i></a>
            </div>
            <p>&copy; 2024 PixelFlow. Tutti i diritti riservati. Progettato con ❤️ e creatività.</p>
        </div>
    </footer>

    <script>
        // --- Menu Sticky e Cambio Colore ---
        const header = document.getElementById('main-header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // --- Effetto Parallasse ---
        const parallaxElements = document.querySelectorAll('.parallax-bg');
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            parallaxElements.forEach(element => {
                const speed = element.dataset.speed || 0.5;
                const yPos = -(scrolled * speed);
                element.style.transform = `translateY(${yPos}px)`;
            });
        });

        // --- Funzionalità FAQ (Accordion) ---
        const faqQuestions = document.querySelectorAll('.faq-question');
        faqQuestions.forEach(question => {
            question.addEventListener('click', () => {
                const answer = question.nextElementSibling;
                const isActive = question.classList.contains('active');

                // Chiudi tutte le altre risposte
                faqQuestions.forEach(q => {
                    q.classList.remove('active');
                    q.nextElementSibling.classList.remove('show');
                });

                // Apri/Chiudi la risposta cliccata
                if (!isActive) {
                    question.classList.add('active');
                    answer.classList.add('show');
                }
            });
        });

        // --- Smooth Scroll per link interni (già gestito da CSS scroll-behavior, ma JS offre più controllo) ---
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if(target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

    </script>
</body>
</html>

:root {
    --bg-dark: #0a0a0a;
    --bg-light: #111111;
    --text-primary: #f4f4f4;
    --text-secondary: #a0a0a0;
    --accent-color: #ff006e; /* Magenta Neon */
    --font-sans: 'Poppins', sans-serif;
    --font-serif: 'Playfair Display', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

document.addEventListener('DOMContentLoaded', () => {

    // --- Smooth Reveal on Scroll ---
    const reveals = document.querySelectorAll('.reveal, .fade-in');

    const handleScroll = () => {
        reveals.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;

            if (elementTop < windowHeight - 100) {
                element.classList.add('is-visible');
            }
        });
    };

    // Initial check on load
    handleScroll();

    // Throttled scroll event listener
    let scrollTimeout;
    window.addEventListener('scroll', () => {
        if (scrollTimeout) {
            window.cancelAnimationFrame(scrollTimeout);
        }
        scrollTimeout = window.requestAnimationFrame(() => {
            handleScroll();
        });
    }, { passive: true });

    // --- Optional: Add a subtle parallax effect to the hero ---
    const hero = document.querySelector('.hero');
    const heroContent = document.querySelector('.hero-content');
    
    window.addEventListener('scroll', () => {
        const scrolled = window.pageYOffset;
        const parallaxSpeed = 0.5;

        if (heroContent) {
            heroContent.style.transform = `translateY(${scrolled * parallaxSpeed}px)`;
            heroContent.style.opacity = 1 - scrolled / 600;
        }
    }, { passive: true });

});