TravelEscape - Esplora il Mondo co by @Darkness977 - Codewith.it

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

References

<b>Formatta il testo in grassetto
text/plainDefinisce un metodo di non codifica dei valori di un form
<em>Formatta il testo in corsivo/italico enfatizzato
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<ul>Usato per la creazione di liste non ordinate.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form

Users

Log in to search for users

Explore

Find inspiration

Test navbar fix

Download vlc for PC Windows

Navbar Example 4

Background Property > filter() met

ex informatica 2

I Nostri Servizi

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>TravelEscape - Esplora il Mondo con Noi</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <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=Playfair+Display:wght@400;700;900&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #1a73e8;
            --secondary-color: #0d47a1;
            --accent-color: #ff6b6b;
            --dark-color: #0a0e27;
            --light-color: #f8f9fa;
            --text-color: #333;
            --text-light: #fff;
            --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            overflow-x: hidden;
            color: var(--text-color);
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }

        /* Header e Navigazione */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: var(--transition);
            padding: 20px 0;
        }

        header.scrolled {
            background-color: rgba(10, 14, 39, 0.95);
            backdrop-filter: blur(15px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 15px 0;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .logo {
            font-size: 28px;
            font-weight: 900;
            color: var(--text-light);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
            letter-spacing: -0.5px;
        }

        .logo i {
            font-size: 32px;
            color: var(--accent-color);
        }

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

        .nav-links a {
            color: var(--text-light);
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            transition: var(--transition);
            position: relative;
            letter-spacing: 0.5px;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
            transition: var(--transition);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .menu-toggle {
            display: none;
            color: var(--text-light);
            font-size: 24px;
            cursor: pointer;
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(135deg, rgba(10, 14, 39, 0.7), rgba(26, 115, 232, 0.5)), url('https://plus.unsplash.com/premium_photo-1681451653242-5e6107b35619?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80') center/cover no-repeat fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--text-light);
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 80%, rgba(255, 107, 107, 0.2) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(26, 115, 232, 0.2) 0%, transparent 50%);
            z-index: 1;
        }

        .hero-content {
            max-width: 800px;
            padding: 0 20px;
            z-index: 2;
        }

        .hero h1 {
            font-size: 4.5rem;
            margin-bottom: 25px;
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -1px;
            animation: fadeInDown 1.2s ease;
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .hero p {
            font-size: 1.4rem;
            margin-bottom: 40px;
            font-weight: 300;
            animation: fadeInUp 1.2s ease 0.3s both;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-button {
            display: inline-block;
            padding: 16px 40px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            color: var(--text-light);
            text-decoration: none;
            font-weight: 600;
            font-size: 18px;
            transition: var(--transition);
            animation: fadeInUp 1.2s ease 0.6s both;
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border-radius: 4px;
            box-shadow: 0 10px 20px rgba(26, 115, 232, 0.3);
            letter-spacing: 0.5px;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.7s ease;
        }

        .cta-button:hover::before {
            left: 100%;
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(26, 115, 232, 0.4);
        }

        .hero-quote {
            position: absolute;
            bottom: 70px;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 0 20px;
            animation: fadeIn 1.8s ease 1s both;
        }

        .hero-quote blockquote {
            font-style: italic;
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto;
            background-color: rgba(10, 14, 39, 0.7);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid var(--accent-color);
        }

        .hero-quote cite {
            display: block;
            margin-top: 15px;
            font-size: 1rem;
            font-weight: 500;
        }

        /* Sezione Servizi */
        .services {
            padding: 100px 0;
            background-color: var(--light-color);
            position: relative;
        }

        .services::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 10% 50%, rgba(26, 115, 232, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 90% 50%, rgba(255, 107, 107, 0.05) 0%, transparent 50%);
            z-index: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        .section-title {
            text-align: center;
            margin-bottom: 70px;
        }

        .section-title h2 {
            font-size: 3rem;
            color: var(--dark-color);
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
            border-radius: 2px;
        }

        .section-title p {
            font-size: 1.2rem;
            color: #666;
            max-width: 600px;
            margin: 30px auto 0;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }

        .service-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: var(--transition);
            position: relative;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
        }

        .service-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .service-img {
            height: 220px;
            overflow: hidden;
            position: relative;
        }

        .service-img::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.7));
            z-index: 1;
        }

        .service-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .service-card:hover .service-img img {
            transform: scale(1.1);
        }

        .service-content {
            padding: 30px;
        }

        .service-content h3 {
            font-size: 1.6rem;
            margin-bottom: 15px;
            color: var(--dark-color);
        }

        .service-content p {
            color: #666;
            margin-bottom: 25px;
            font-size: 1rem;
            line-height: 1.7;
        }

        .service-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
            font-size: 1rem;
        }

        .service-link:hover {
            gap: 15px;
            color: var(--secondary-color);
        }

        /* Sezione Video */
        .video-section {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--dark-color), #1a237e);
            color: var(--text-light);
            position: relative;
            overflow: hidden;
        }

        .video-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></svg>');
            background-size: 100px 100px;
            z-index: 0;
        }

        .video-container {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Sezione FAQ */
        .faq {
            padding: 100px 0;
            background-color: var(--light-color);
            position: relative;
        }

        .faq::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 90% 10%, rgba(255, 107, 107, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 10% 90%, rgba(26, 115, 232, 0.05) 0%, transparent 50%);
            z-index: 0;
        }

        .faq-container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .faq-item {
            background-color: white;
            border-radius: 10px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

        .faq-item:hover {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .faq-question {
            padding: 25px 30px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
            color: var(--dark-color);
        }

        .faq-question:hover {
            background-color: rgba(26, 115, 232, 0.05);
        }

        .faq-question i {
            transition: var(--transition);
            color: var(--primary-color);
            font-size: 1.2rem;
        }

        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        .faq-item.active .faq-answer {
            max-height: 500px;
        }

        .faq-answer-content {
            padding: 0 30px 25px;
            color: #666;
            font-size: 1rem;
            line-height: 1.7;
        }

        /* Sezione Blog */
        .blog {
            padding: 100px 0;
            background: linear-gradient(135deg, #1a237e, var(--dark-color));
            color: var(--text-light);
            position: relative;
            overflow: hidden;
        }

        .blog::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></svg>');
            background-size: 100px 100px;
            z-index: 0;
        }

        .blog .section-title h2 {
            color: var(--text-light);
        }

        .blog .section-title p {
            color: rgba(255, 255, 255, 0.7);
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            position: relative;
            z-index: 1;
        }

        .blog-card {
            background-color: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .blog-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .blog-img {
            height: 220px;
            overflow: hidden;
            position: relative;
        }

        .blog-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .blog-card:hover .blog-img img {
            transform: scale(1.1);
        }

        .blog-content {
            padding: 30px;
        }

        .blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

        .blog-meta span {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .blog-content h3 {
            font-size: 1.6rem;
            margin-bottom: 15px;
            color: var(--text-light);
        }

        .blog-content p {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 25px;
            font-size: 1rem;
            line-height: 1.7;
        }

        .blog-link {
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
            font-size: 1rem;
        }

        .blog-link:hover {
            gap: 15px;
        }

        /* Sezione Newsletter */
        .newsletter {
            padding: 100px 0;
            background-color: var(--light-color);
            position: relative;
            overflow: hidden;
        }

        .newsletter::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(26, 115, 232, 0.1) 0%, transparent 70%);
            z-index: 0;
        }

        .newsletter-content {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .newsletter h2 {
            font-size: 2.8rem;
            margin-bottom: 20px;
            color: var(--dark-color);
        }

        .newsletter p {
            font-size: 1.2rem;
            margin-bottom: 40px;
            color: #666;
        }

        .newsletter-form {
            display: flex;
            gap: 15px;
            max-width: 500px;
            margin: 0 auto;
        }

        .newsletter-form input {
            flex: 1;
            padding: 16px 25px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 50px;
            font-size: 1rem;
            background-color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

        .newsletter-form input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 5px 20px rgba(26, 115, 232, 0.2);
        }

        .newsletter-form button {
            padding: 16px 35px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            color: var(--text-light);
            border: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 10px 20px rgba(26, 115, 232, 0.3);
        }

        .newsletter-form button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(26, 115, 232, 0.4);
        }

        /* Footer */
        footer {
            background-color: var(--dark-color);
            color: var(--text-light);
            padding: 70px 0 30px;
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></svg>');
            background-size: 100px 100px;
            z-index: 0;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
            position: relative;
            z-index: 1;
        }

        .footer-column h3 {
            font-size: 1.5rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
            color: var(--text-light);
        }

        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
            border-radius: 2px;
        }

        .footer-column p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 25px;
            line-height: 1.7;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li {
            margin-bottom: 12px;
        }

        .footer-column ul li a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: var(--transition);
            display: inline-block;
        }

        .footer-column ul li a:hover {
            color: var(--primary-color);
            transform: translateX(5px);
        }

        .footer-column ul li i {
            margin-right: 10px;
            color: var(--accent-color);
            width: 20px;
            text-align: center;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }

        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--text-light);
            border-radius: 50%;
            transition: var(--transition);
            font-size: 1.2rem;
        }

        .social-links a:hover {
            background-color: var(--primary-color);
            transform: translateY(-5px);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
            position: relative;
            z-index: 1;
        }

        /* Animazioni */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* Responsive */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 3.5rem;
            }

            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 0;
                left: -100%;
                width: 80%;
                height: 100vh;
                background-color: var(--dark-color);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: var(--transition);
            }

            .nav-links.active {
                left: 0;
            }

            .menu-toggle {
                display: block;
                z-index: 1001;
            }

            .hero h1 {
                font-size: 2.8rem;
            }

            .hero p {
                font-size: 1.1rem;
            }

            .services-grid {
                grid-template-columns: 1fr;
            }

            .blog-grid {
                grid-template-columns: 1fr;
            }

            .newsletter-form {
                flex-direction: column;
            }

            .footer-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header id="header">
        <nav>
            <a href="#" class="logo">
                <i class="fas fa-globe-americas"></i>
                TravelEscape
            </a>
            <ul class="nav-links" id="navLinks">
                <li><a href="#home">Home</a></li>
                <li><a href="#services">Servizi</a></li>
                <li><a href="#video">Video</a></li>
                <li><a href="#faq">FAQ</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contatti</a></li>
            </ul>
            <div class="menu-toggle" id="menuToggle">
                <i class="fas fa-bars"></i>
            </div>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h1>Scopri il Mondo con Noi</h1>
            <p>Esplora destinazioni mozzafiato, vivi avventure indimenticabili e crea ricordi che dureranno per sempre</p>
            <a href="#services" class="cta-button">Esplora Ora</a>
        </div>
        <div class="hero-quote">
            <blockquote>"Il mondo è un libro e chi non viaggia ne conosce solo una pagina"</blockquote>
            <cite>- Sant'Agostino</cite>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="services">
        <div class="container">
            <div class="section-title">
                <h2>I Nostri Servizi</h2>
                <p>Tutto ciò di cui hai bisogno per la tua avventura</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1501555088652-021faa106b9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Viaggi organizzati">
                    </div>
                    <div class="service-content">
                        <h3>Viaggi Organizzati</h3>
                        <p>Pacchetti completi con volo, alloggio e attività pensati per te. Lascia che ci occupiamo di ogni dettaglio.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1174&q=80" alt="Escursioni">
                    </div>
                    <div class="service-content">
                        <h3>Escursioni Guidate</h3>
                        <p>Esplora la natura con guide esperte. Trekking, safari, escursioni in montagna e molto altro ancora.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1540202404-1b927e34f81d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Itinerari personalizzati">
                    </div>
                    <div class="service-content">
                        <h3>Itinerari Personalizzati</h3>
                        <p>Creiamo il viaggio perfetto basato sui tuoi interessi, budget e tempi. Un'esperienza su misura per te.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Immersioni">
                    </div>
                    <div class="service-content">
                        <h3>Immersioni Subacquee</h3>
                        <p>Esplora i fondali marini con i nostri corsi certificati. Dai principianti ai sub esperti, per tutti i livelli.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" alt="Viaggi di lusso">
                    </div>
                    <div class="service-content">
                        <h3>Viaggi di Lusso</h3>
                        <p>Esperienze esclusive nei migliori resort del mondo. Servizi premium per una vacanza indimenticabile.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1507525428034-b723a9ce6890?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Avventure">
                    </div>
                    <div class="service-content">
                        <h3>Avventure Estreme</h3>
                        <p>Per i più audaci: rafting, paracadutismo, arrampicata e molto altro. Sfida i tuoi limiti con noi.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Video Section -->
    <section class="video-section" id="video">
        <div class="container">
            <div class="section-title">
                <h2 style="color: white;">Esplora con Noi</h2>
                <p style="color: rgba(255, 255, 255, 0.7);">Un assaggio delle avventure che ti aspettano</p>
            </div>
            <div class="video-container">
                <iframe src="https://www.youtube.com/embed/ScMzIvxBSi4" title="TravelEscape Video" allowfullscreen></iframe>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq" id="faq">
        <div class="container">
            <div class="section-title">
                <h2>Domande Frequenti</h2>
                <p>Tutto quello che devi sapere sui nostri servizi</p>
            </div>
            <div class="faq-container">
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Cosa include un pacchetto viaggio standard?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-content">
                            I nostri pacchetti viaggio standard includono volo di andata e ritorno, alloggio in hotel selezionati, trasferimenti da e per l'aeroporto, e una selezione di escursioni guidate. A seconda del pacchetto scelto, possono essere inclusi anche pasti e assicurazione di viaggio.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Posso personalizzare il mio itinerario?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-content">
                            Assolutamente! Offriamo un servizio di personalizzazione completa dove puoi modificare destinazioni, durata del soggiorno, tipo di alloggio e attività. Il nostro team di esperti lavorerà con te per creare l'itinerario perfetto basato sulle tue preferenze e budget.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Offrite corsi di immersione per principianti?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-content">
                            Sì, offriamo corsi di immersione per tutti i livelli, dai principianti assoluti ai sub esperti. I nostri istruttori certificati ti guideranno passo dopo passo in un ambiente sicuro. I corsi includono teoria, esercizi in piscina e immersioni in mare aperto.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Cosa succede se devo cancellare il mio viaggio?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-content">
                            La nostra politica di cancellazione varia a seconda del tipo di pacchetto e di quanto in anticipo viene effettuata la cancellazione. Offriamo opzioni di assicurazione viaggio che coprono cancellazioni per motivi medici o imprevisti. Ti consigliamo di consultare i termini e condizioni specifici al momento della prenotazione.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Le guide parlano italiano?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-content">
                            Sì, la maggior parte delle nostre guide parla italiano fluentemente. Per destinazioni particolari o su richiesta, possiamo fornire guide che parlano anche altre lingue come inglese, spagnolo, francese e tedesco. Specifica le tue preferenze linguistiche al momento della prenotazione.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>È possibile viaggiare con bambini?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-content">
                            Certamente! Molti dei nostri pacchetti sono adatti alle famiglie con bambini. Offriamo attività adatte a tutte le età e possiamo organizzare servizi come babysitting, menù per bambini e alloggi family-friendly. Alcune attività come le immersioni hanno limiti di età, ma offriamo sempre alternative adatte.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Offrite sconti per gruppi?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-content">
                            Sì, offriamo sconti speciali per gruppi a partire da 6 persone. Lo sconto aumenta con il numero di partecipanti. Inoltre, organizziamo viaggi aziendali e team building con programmi personalizzati. Contatta il nostro team per un preventivo su misura per il tuo gruppo.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section class="blog" id="blog">
        <div class="container">
            <div class="section-title">
                <h2>Blog e Novità</h2>
                <p>Storie, consigli e ispirazione per i tuoi viaggi</p>
            </div>
            <div class="blog-grid">
                <article class="blog-card">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1552733407-5d5c46c3bb3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Guida alle Maldive">
                    </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> Marco Rossi</span>
                        </div>
                        <h3>Guida Completa alle Maldive: Paradiso Subacqueo</h3>
                        <p>Scopri tutto ciò che c'è da sapere sulle Maldive, dai migliori spot per le immersioni ai resort più esclusivi. Un viaggio nel cuore dell'Oceano Indiano.</p>
                        <a href="#" class="blog-link">Leggi di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </article>
                <article class="blog-card">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1559827260-dc66d52bef19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Trekking in Patagonia">
                    </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> Laura Bianchi</span>
                        </div>
                        <h3>Trekking in Patagonia: Avventura ai Confini del Mondo</h3>
                        <p>Seguici in un epico viaggio attraverso i parchi nazionali della Patagonia. Glacieri, montagne imponenti e paesaggi mozzafiato ti aspettano.</p>
                        <a href="#" class="blog-link">Leggi di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </article>
                <article class="blog-card">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Safari in Kenya">
                    </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> Alessandro Verdi</span>
                        </div>
                        <h3>Safari in Kenya: Incontro con la Fauna Selvatica</h3>
                        <p>Esperienza indimenticabile nei parchi nazionali del Kenya. Dal Masai Mara all'Amboseli, un'avventura a contatto con la natura più autentica.</p>
                        <a href="#" class="blog-link">Leggi di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- Newsletter Section -->
    <section class="newsletter" id="newsletter">
        <div class="container">
            <div class="newsletter-content">
                <h2>Non Perdere le Nostre Offerte Esclusive</h2>
                <p>Iscriviti alla nostra newsletter per ricevere le migliori promozioni, consigli di viaggio e ispirazione per la tua prossima avventura</p>
                <form class="newsletter-form" id="newsletterForm">
                    <input type="email" placeholder="Il tuo indirizzo email" required>
                    <button type="submit">Iscriviti</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>TravelEscape</h3>
                    <p>La tua agenzia di fiducia per viaggi indimenticabili in tutto il mondo. Esplora, scopri, vivi.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Link Utili</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#services">Servizi</a></li>
                        <li><a href="#video">Video</a></li>
                        <li><a href="#faq">FAQ</a></li>
                        <li><a href="#blog">Blog</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Servizi</h3>
                    <ul>
                        <li><a href="#">Viaggi Organizzati</a></li>
                        <li><a href="#">Escursioni Guidate</a></li>
                        <li><a href="#">Itinerari Personalizzati</a></li>
                        <li><a href="#">Immersioni Subacquee</a></li>
                        <li><a href="#">Viaggi di Lusso</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Contatti</h3>
                    <ul>
                        <li><i class="fas fa-map-marker-alt"></i> Via Roma 123, 00100 Roma, Italia</li>
                        <li><i class="fas fa-phone"></i> +39 06 12345678</li>
                        <li><i class="fas fa-envelope"></i> info@travelescape.it</li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 TravelEscape. Tutti i diritti riservati. | Privacy Policy | Termini e Condizioni</p>
            </div>
        </div>
    </footer>

    <script>
        // Menu Toggle
        const menuToggle = document.getElementById('menuToggle');
        const navLinks = document.getElementById('navLinks');

        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });

        // Header Scroll Effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // FAQ Accordion
        const faqItems = document.querySelectorAll('.faq-item');

        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            
            question.addEventListener('click', () => {
                // Close all other items
                faqItems.forEach(otherItem => {
                    if (otherItem !== item) {
                        otherItem.classList.remove('active');
                    }
                });
                
                // Toggle current item
                item.classList.toggle('active');
            });
        });

        // Newsletter Form
        const newsletterForm = document.getElementById('newsletterForm');
        
        newsletterForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Create success message
            const successMessage = document.createElement('div');
            successMessage.style.padding = '15px';
            successMessage.style.marginTop = '20px';
            successMessage.style.backgroundColor = 'rgba(26, 115, 232, 0.1)';
            successMessage.style.borderRadius = '8px';
            successMessage.style.color = 'var(--primary-color)';
            successMessage.style.fontWeight = '500';
            successMessage.textContent = 'Grazie per esserti iscritto! Riceverai presto le nostre offerte esclusive.';
            
            // Clear form and add message
            newsletterForm.reset();
            newsletterForm.appendChild(successMessage);
            
            // Remove message after 5 seconds
            setTimeout(() => {
                successMessage.remove();
            }, 5000);
        });

        // Smooth scroll for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    navLinks.classList.remove('active');
                }
            });
        });

        // Animate elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        // Observe service cards and blog cards
        document.querySelectorAll('.service-card, .blog-card').forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(30px)';
            card.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
            observer.observe(card);
        });
    </script>
</body>
</html>