.elementor-364 .elementor-element.elementor-element-542a336{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-364 .elementor-element.elementor-element-e8f61df{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-container{height:80px;border-radius:0px 0px 0px 0px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a{color:#000000;padding:0px 15px 0px 15px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a:hover{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a:focus{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a:active{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li:hover > a{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a:hover .elementskit-submenu-indicator{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a:focus .elementskit-submenu-indicator{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a:active .elementskit-submenu-indicator{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li.current-menu-item > a{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li.current-menu-ancestor > a{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li.current-menu-ancestor > a .elementskit-submenu-indicator{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a .elementskit-submenu-indicator{color:#101010;fill:#101010;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon{color:#101010;fill:#101010;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;color:#000000;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav .elementskit-submenu-panel > li > a:active{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a{color:#707070;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav .elementskit-submenu-panel > li.current-menu-item > a{color:#707070 !important;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-submenu-panel{padding:15px 0px 15px 0px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;min-width:220px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-hamburger{float:right;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{background-color:rgba(0, 0, 0, 0.5);}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-hamburger > .ekit-menu-icon{color:rgba(0, 0, 0, 0.5);}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon{background-color:rgba(0, 0, 0, 0.5);}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-hamburger:hover > .ekit-menu-icon{color:rgba(0, 0, 0, 0.5);}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-close{color:rgba(51, 51, 51, 1);}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-close:hover{color:rgba(0, 0, 0, 0.5);}.elementor-364 .elementor-element.elementor-element-680cc13{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-364 .elementor-element.elementor-element-653b0a7{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-364 .elementor-element.elementor-element-653b0a7 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-364 .elementor-element.elementor-element-653b0a7:after{content:"0.66";}.elementor-364 .elementor-element.elementor-element-653b0a7 .elementor-post__thumbnail__link{width:100%;}.elementor-364 .elementor-element.elementor-element-653b0a7 .elementor-post__meta-data span + span:before{content:"///";}.elementor-364 .elementor-element.elementor-element-653b0a7.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-364 .elementor-element.elementor-element-653b0a7.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-364 .elementor-element.elementor-element-653b0a7.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}@media(max-width:1024px){.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-nav-identity-panel{padding:10px 0px 10px 0px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-container{max-width:350px;border-radius:0px 0px 0px 0px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav > li > a{color:#000000;padding:10px 15px 10px 15px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-hamburger{padding:8px 8px 8px 8px;width:45px;border-radius:3px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-menu-close{padding:8px 8px 8px 8px;margin:12px 12px 12px 12px;width:45px;border-radius:3px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-nav-logo > img{max-width:160px;max-height:60px;}.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-nav-logo{margin:5px 0px 5px 0px;padding:5px 5px 5px 5px;}}@media(max-width:767px){.elementor-364 .elementor-element.elementor-element-51a4b6b .elementskit-nav-logo > img{max-width:120px;max-height:50px;}.elementor-364 .elementor-element.elementor-element-653b0a7 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-364 .elementor-element.elementor-element-653b0a7:after{content:"0.5";}.elementor-364 .elementor-element.elementor-element-653b0a7 .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS for container, class: .elementor-element-e8f61df */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CryptoNews - Stay Ahead in Blockchain and Web3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #000000;
            color: #ffffff;
            line-height: 1.6;
        }

        /* Navigation */
        .navbar {
            position: sticky;
            top: 0;
            background: #111111;
            padding: 1rem 0;
            z-index: 1000;
            border-bottom: 1px solid #333;
        }

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

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: #f2c94c;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            color: #ffffff;
            text-decoration: none;
            transition: color 0.3s;
            font-weight: 500;
        }

        .nav-links a:hover {
            color: #f2c94c;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .search-icon, .lang-switcher {
            background: none;
            border: 1px solid #555;
            color: #ffffff;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .search-icon:hover, .lang-switcher:hover {
            border-color: #f2c94c;
            color: #f2c94c;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23222" width="1200" height="600"/><circle fill="%23f2c94c" opacity="0.1" cx="200" cy="150" r="80"/><circle fill="%232f80ed" opacity="0.1" cx="800" cy="400" r="120"/><circle fill="%23f2c94c" opacity="0.05" cx="1000" cy="200" r="60"/></svg>');
            background-size: cover;
            background-position: center;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .hero-content h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #f2c94c, #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-content p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            color: #cccccc;
        }

        .cta-button {
            background: linear-gradient(135deg, #f2c94c, #e6b800);
            color: #000000;
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .cta-button:hover {
            transform: translateY(-2px);
        }

        /* Price Ticker */
        .price-ticker {
            background: #111111;
            border-top: 1px solid #333;
            border-bottom: 1px solid #333;
            overflow: hidden;
            white-space: nowrap;
            position: sticky;
            top: 76px;
            z-index: 999;
        }

        .ticker-content {
            display: inline-block;
            animation: scroll 30s linear infinite;
            padding: 1rem 0;
        }

        .ticker-item {
            display: inline-block;
            margin-right: 3rem;
            color: #ffffff;
        }

        .price-up { color: #4caf50; }
        .price-down { color: #f44336; }

        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        /* Main Content */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .section {
            margin: 4rem 0;
        }

        .section-title {
            font-size: 2rem;
            margin-bottom: 2rem;
            color: #f2c94c;
            border-bottom: 2px solid #333;
            padding-bottom: 0.5rem;
        }

        /* News Grid */
        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .news-card {
            background: #111111;
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #333;
        }

        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(242, 201, 76, 0.1);
        }

        .news-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #333, #555);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            font-size: 3rem;
        }

        .news-content {
            padding: 1.5rem;
        }

        .news-category {
            background: #f2c94c;
            color: #000000;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .news-title {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: #ffffff;
        }

        .news-date {
            color: #888;
            font-size: 0.9rem;
        }

        .breaking-tag {
            background: #f44336;
            color: #ffffff;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-left: 0.5rem;
        }

        /* Market Trends */
        .market-table {
            background: #111111;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #333;
        }

        .table-header {
            background: #222;
            padding: 1rem;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 1rem;
            font-weight: bold;
            color: #f2c94c;
        }

        .table-row {
            padding: 1rem;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 1rem;
            border-top: 1px solid #333;
            align-items: center;
        }

        .crypto-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .crypto-logo {
            width: 32px;
            height: 32px;
            background: #f2c94c;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #000;
            font-size: 0.8rem;
        }

        /* Videos Section */
        .videos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .video-card {
            background: #111111;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #333;
        }

        .video-thumbnail {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, #2f80ed, #1e3a8a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 3rem;
        }

        .video-info {
            padding: 1rem;
        }

        .video-title {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            color: #ffffff;
        }

        .video-description {
            color: #888;
            font-size: 0.9rem;
        }

        /* Newsletter */
        .newsletter {
            background: linear-gradient(135deg, #222, #111);
            padding: 3rem;
            border-radius: 12px;
            text-align: center;
            border: 1px solid #333;
        }

        .newsletter h2 {
            color: #f2c94c;
            margin-bottom: 1rem;
        }

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

        .newsletter-input {
            flex: 1;
            padding: 1rem;
            background: #000;
            border: 1px solid #555;
            border-radius: 8px;
            color: #ffffff;
        }

        .newsletter-button {
            background: #f2c94c;
            color: #000000;
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
        }

        /* Footer */
        .footer {
            background: #111111;
            padding: 2rem 0;
            margin-top: 4rem;
            border-top: 1px solid #333;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-links {
            display: flex;
            gap: 2rem;
        }

        .footer-links a {
            color: #888;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: #f2c94c;
        }

        .social-icons {
            display: flex;
            gap: 1rem;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            background: #333;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            text-decoration: none;
            transition: background 0.3s;
        }

        .social-icon:hover {
            background: #f2c94c;
            color: #000000;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: column;
                gap: 1rem;
            }

            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }

            .hero-content h1 {
                font-size: 2rem;
            }

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

            .table-header, .table-row {
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
            }

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

            .footer-content {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">CryptoNews</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#news">News</a></li>
                <li><a href="#prices">Prices</a></li>
                <li><a href="#nft">NFT</a></li>
                <li><a href="#analysis">Analysis</a></li>
                <li><a href="#videos">Videos</a></li>
                <li><a href="#about">About</a></li>
            </ul>
            <div class="nav-right">
                <button class="search-icon">🔍</button>
                <button class="lang-switcher" onclick="toggleLanguage()">EN ↔ FR</button>
            </div>
        </div>
    </nav>

    <!-- Price Ticker -->
    <div class="price-ticker">
        <div class="ticker-content">
            <span class="ticker-item">BTC: $65,432 <span class="price-up">+2.5%</span></span>
            <span class="ticker-item">ETH: $3,245 <span class="price-down">-1.2%</span></span>
            <span class="ticker-item">SOL: $156 <span class="price-up">+5.8%</span></span>
            <span class="ticker-item">ADA: $0.48 <span class="price-up">+3.1%</span></span>
            <span class="ticker-item">DOGE: $0.12 <span class="price-down">-2.3%</span></span>
            <span class="ticker-item">AVAX: $28.50 <span class="price-up">+4.2%</span></span>
            <span class="ticker-item">DOT: $7.85 <span class="price-down">-0.8%</span></span>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1>Stay Ahead in Blockchain and Web3</h1>
            <p>Live coverage, expert analysis, and crypto price trends</p>
            <button class="cta-button">Explore News</button>
        </div>
    </section>

    <div class="container">
        <!-- Featured News -->
        <section class="section">
            <h2 class="section-title">Featured News</h2>
            <div class="news-grid">
                <article class="news-card">
                    <div class="news-image">📈</div>
                    <div class="news-content">
                        <span class="news-category">Bitcoin</span>
                        <span class="breaking-tag">Breaking</span>
                        <h3 class="news-title">Bitcoin Reaches New All-Time High Amid Institutional Adoption</h3>
                        <p class="news-date">July 30, 2025</p>
                    </div>
                </article>
                <article class="news-card">
                    <div class="news-image">🚀</div>
                    <div class="news-content">
                        <span class="news-category">DeFi</span>
                        <h3 class="news-title">Major DeFi Protocol Launches Revolutionary Yield Farming Mechanism</h3>
                        <p class="news-date">July 29, 2025</p>
                    </div>
                </article>
                <article class="news-card">
                    <div class="news-image">🎨</div>
                    <div class="news-content">
                        <span class="news-category">NFT</span>
                        <span class="breaking-tag">Trending</span>
                        <h3 class="news-title">Blue-Chip NFT Collection Announces Metaverse Integration</h3>
                        <p class="news-date">July 28, 2025</p>
                    </div>
                </article>
                <article class="news-card">
                    <div class="news-image">⚡</div>
                    <div class="news-content">
                        <span class="news-category">Ethereum</span>
                        <h3 class="news-title">Ethereum 2.0 Upgrade Shows Promising Scalability Improvements</h3>
                        <p class="news-date">July 27, 2025</p>
                    </div>
                </article>
                <article class="news-card">
                    <div class="news-image">🌐</div>
                    <div class="news-content">
                        <span class="news-category">Web3</span>
                        <h3 class="news-title">Tech Giants Embrace Web3: New Partnerships Announced</h3>
                        <p class="news-date">July 26, 2025</p>
                    </div>
                </article>
                <article class="news-card">
                    <div class="news-image">💎</div>
                    <div class="news-content">
                        <span class="news-category">Altcoins</span>
                        <h3 class="news-title">Emerging Altcoin Shows 200% Growth in Past Week</h3>
                        <p class="news-date">July 25, 2025</p>
                    </div>
                </article>
            </div>
        </section>

        <!-- Market Trends -->
        <section class="section">
            <h2 class="section-title">Market Trends</h2>
            <div class="market-table">
                <div class="table-header">
                    <div>Name</div>
                    <div>Price</div>
                    <div>24h Change</div>
                    <div>Market Cap</div>
                </div>
                <div class="table-row">
                    <div class="crypto-info">
                        <div class="crypto-logo">₿</div>
                        <div>Bitcoin (BTC)</div>
                    </div>
                    <div>$65,432</div>
                    <div class="price-up">+2.5%</div>
                    <div>$1.28T</div>
                </div>
                <div class="table-row">
                    <div class="crypto-info">
                        <div class="crypto-logo">Ξ</div>
                        <div>Ethereum (ETH)</div>
                    </div>
                    <div>$3,245</div>
                    <div class="price-down">-1.2%</div>
                    <div>$390B</div>
                </div>
                <div class="table-row">
                    <div class="crypto-info">
                        <div class="crypto-logo">◎</div>
                        <div>Solana (SOL)</div>
                    </div>
                    <div>$156</div>
                    <div class="price-up">+5.8%</div>
                    <div>$67B</div>
                </div>
                <div class="table-row">
                    <div class="crypto-info">
                        <div class="crypto-logo">₳</div>
                        <div>Cardano (ADA)</div>
                    </div>
                    <div>$0.48</div>
                    <div class="price-up">+3.1%</div>
                    <div>$17B</div>
                </div>
                <div class="table-row">
                    <div class="crypto-info">
                        <div class="crypto-logo">Ð</div>
                        <div>Dogecoin (DOGE)</div>
                    </div>
                    <div>$0.12</div>
                    <div class="price-down">-2.3%</div>
                    <div>$17B</div>
                </div>
            </div>
        </section>

        <!-- Videos Section -->
        <section class="section">
            <h2 class="section-title">Latest Videos</h2>
            <div class="videos-grid">
                <div class="video-card">
                    <div class="video-thumbnail">▶️</div>
                    <div class="video-info">
                        <h3 class="video-title">Crypto Market Analysis: What's Next for Bitcoin?</h3>
                        <p class="video-description">Expert insights on Bitcoin's recent price movements and future predictions.</p>
                    </div>
                </div>
                <div class="video-card">
                    <div class="video-thumbnail">▶️</div>
                    <div class="video-info">
                        <h3 class="video-title">DeFi Explained: Yield Farming Strategies</h3>
                        <p class="video-description">Learn about the latest yield farming opportunities in DeFi protocols.</p>
                    </div>
                </div>
                <div class="video-card">
                    <div class="video-thumbnail">▶️</div>
                    <div class="video-info">
                        <h3 class="video-title">NFT Market Trends: What's Hot in 2025</h3>
                        <p class="video-description">Discover the hottest NFT collections and market trends this year.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- NFT & Web3 Section -->
        <section class="section">
            <h2 class="section-title">NFT & Web3</h2>
            <div class="news-grid">
                <article class="news-card">
                    <div class="news-image">🎮</div>
                    <div class="news-content">
                        <span class="news-category">Gaming</span>
                        <h3 class="news-title">New Play-to-Earn Game Launches with Revolutionary Tokenomics</h3>
                        <p class="news-date">July 30, 2025</p>
                    </div>
                </article>
                <article class="news-card">
                    <div class="news-image">🏢</div>
                    <div class="news-content">
                        <span class="news-category">Metaverse</span>
                        <h3 class="news-title">Virtual Real Estate Prices Surge in Popular Metaverse Platforms</h3>
                        <p class="news-date">July 29, 2025</p>
                    </div>
                </article>
                <article class="news-card">
                    <div class="news-image">🔧</div>
                    <div class="news-content">
                        <span class="news-category">Tools</span>
                        <h3 class="news-title">New Web3 Development Framework Simplifies dApp Creation</h3>
                        <p class="news-date">July 28, 2025</p>
                    </div>
                </article>
            </div>
        </section>

        <!-- Newsletter -->
        <section class="section">
            <div class="newsletter">
                <h2>Don't Miss Crypto Updates</h2>
                <p>Get the latest cryptocurrency news, market analysis, and expert insights delivered to your inbox.</p>
                <form class="newsletter-form">
                    <input type="email" class="newsletter-input" placeholder="Enter your email address" required>
                    <button type="submit" class="newsletter-button">Subscribe</button>
                </form>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div>© 2025 CryptoNews</div>
            <div class="footer-links">
                <a href="#terms">Terms</a>
                <a href="#privacy">Privacy Policy</a>
                <a href="#contact">Contact</a>
            </div>
            <div class="social-icons">
                <a href="#" class="social-icon">📱</a>
                <a href="#" class="social-icon">🐦</a>
                <a href="#" class="social-icon">💼</a>
                <a href="#" class="social-icon">📘</a>
            </div>
        </div>
    </footer>

    <script>
        // Language switcher
        function toggleLanguage() {
            const button = document.querySelector('.lang-switcher');
            if (button.textContent === 'EN ↔ FR') {
                button.textContent = 'FR ↔ EN';
                // Add French translations here
            } else {
                button.textContent = 'EN ↔ FR';
                // Revert to English
            }
        }

        // Newsletter form
        document.querySelector('.newsletter-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const email = document.querySelector('.newsletter-input').value;
            alert(`Thank you for subscribing with email: ${email}`);
            document.querySelector('.newsletter-input').value = '';
        });

        // Smooth scrolling for navigation links
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });

        // Search functionality
        document.querySelector('.search-icon').addEventListener('click', function() {
            const query = prompt('Enter your search query:');
            if (query) {
                alert(`Searching for: ${query}`);
            }
        });

        // Add hover effects and animations
        document.querySelectorAll('.news-card, .video-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });

        // Simulate real-time price updates
        function updatePrices() {
            const priceElements = document.querySelectorAll('.ticker-item, .table-row');
            priceElements.forEach(element => {
                const priceSpan = element.querySelector('.price-up, .price-down');
                if (priceSpan) {
                    const isUp = Math.random() > 0.5;
                    const change = (Math.random() * 10 - 5).toFixed(1);
                    priceSpan.textContent = `${change > 0 ? '+' : ''}${change}%`;
                    priceSpan.className = change > 0 ? 'price-up' : 'price-down';
                }
            });
        }

        // Update prices every 30 seconds
        setInterval(updatePrices, 30000);

        // Add loading animation
        window.addEventListener('load', function() {
            document.body.style.opacity = '0';
            document.body.style.transition = 'opacity 0.5s';
            setTimeout(() => {
                document.body.style.opacity = '1';
            }, 100);
        });
    </script>
</body>
</html>/* End custom CSS */