BuzzTech.it - Eccellenza nel Giorn by @Darkness977 - Codewith.it

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

Referenze

srcIndica la provenienza di una risorsa esterna (tramite URL).
Inserisce un commento nel codice
titleIndica informazioni aggiuntive riguardo un elemento HTML
<th>Definisce una cella di intestazione di una tabella HTML.
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<ol>Crea liste ordinate o numerate.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Attività della settimana

La Ghigliottina | Matteo Greco &

Esercitazione esame

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BuzzTech.it - Eccellenza nel Giornalismo Tecnologico</title>
    
    <!-- Google Fonts: Bebas Neue e Inter -->
    <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=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="site-header">
        <div class="container">
            <div class="logo">
                <a href="#">Buzz<span>Tech</span>.it</a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="#">AI</a></li>
                    <li><a href="#">Startup</a></li>
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Software</a></li>
                    <li><a href="#">Security</a></li>
                </ul>
            </nav>
            <div class="header-actions">
                <button class="search-btn" aria-label="Cerca">⚲</button>
                <button class="mobile-menu-toggle" aria-label="Menu">☰</button>
            </div>
        </div>
    </header>

    <main>
        <!-- Sezione Hero -->
        <section class="hero-section">
            <div class="container">
                <div class="hero-grid">
                    <article class="featured-article">
                        <span class="category-tag">Intelligenza Artificiale</span>
                        <img src="https://via.placeholder.com/800x450.png?text=Futuro+dell'IA" alt="Immagine articolo principale">
                        <h1>Il Futuro dell'IA: Come i Modelli di Linguaggio Stanno Ridisegnando il Nostro Mondo</h1>
                        <p>Un'analisi approfondita sull'impatto dei nuovi modelli di IA generativa su industrie, creatività e società, con interviste esclusive ai leader del settore.</p>
                        <div class="article-meta">
                            <span>By Alessia Rossi</span>
                            <span>15 Maggio 2024</span>
                        </div>
                    </article>
                    <div class="side-features">
                        <article class="side-feature">
                            <img src="https://via.placeholder.com/400x225.png?text=Nuovo+Chip" alt="Immagine articolo secondario">
                            <h3>Apple Svela il Nuovo Chip M4: Promesse di Rivoluzione per il MacBook Pro</h3>
                            <span class="article-date">14 Maggio 2024</span>
                        </article>
                        <article class="side-feature">
                            <img src="https://via.placeholder.com/400x225.png?text=Cybersecurity" alt="Immagine articolo secondario">
                            <h3>Cybersecurity 2024: Le Minacce Emergenti e Come Difendersi</h3>
                            <span class="article-date">13 Maggio 2024</span>
                        </article>
                    </div>
                </div>
            </div>
        </section>

        <!-- Sezione Trending -->
        <section class="trending-section">
            <div class="container">
                <h2 class="section-title">Trending Now</h2>
                <div class="trending-grid">
                    <a href="#" class="trending-item">1. La Startup Italiana che Sta Conquistando la Silicon Valley</a>
                    <a href="#" class="trending-item">2. Quantum Computing: Più Vicino di Quanto Si Pensi</a>
                    <a href="#" class="trending-item">3. Elon Musk Annuncia Nuovi Progetti per SpaceX</a>
                    <a href="#" class="trending-item">4. Il Mercato delle Criptovalute in Ripresa: Analisi e Previsioni</a>
                </div>
            </div>
        </section>

        <!-- Griglia Articoli Principali -->
        <section class="content-section">
            <div class="container">
                <h2 class="section-title">Ultime Notizie</h2>
                <div class="articles-grid">
                    <article class="article-card">
                        <img src="https://via.placeholder.com/400x250.png?text=Startup+Fintech" alt="Immagine articolo">
                        <span class="category-tag">Fintech</span>
                        <h3>La Rivoluzione del Fintech: Piattaforme Decentralizzate e il Futuro della Banca</h3>
                        <p>Esploriamo come la tecnologia blockchain sta trasformando i servizi finanziari tradizionali...</p>
                        <div class="article-meta">
                            <span>Marco Bianchi</span>
                            <span>12 Maggio 2024</span>
                        </div>
                    </article>
                    <article class="article-card">
                        <img src="https://via.placeholder.com/400x250.png?text=VR+Gaming" alt="Immagine articolo">
                        <span class="category-tag">Gaming</span>
                        <h3>Il Gaming in VR: Il Nuovo Titolo di Sony Promette un'Esperienza Immersiva Senza Precedenti</h3>
                        <p>Anteprima esclusiva del prossimo gioco che potrebbe definire lo standard per la realtà virtuale...</p>
                        <div class="article-meta">
                            <span>Giulia Verdi</span>
                            <span>11 Maggio 2024</span>
                        </div>
                    </article>
                    <article class="article-card">
                        <img src="https://via.placeholder.com/400x250.png?text=Auto+Autonome" alt="Immagine articolo">
                        <span class="category-tag">Mobilità</span>
                        <h3>Auto a Guida Autonoma: I Nuovi Test su Strada Aperta Sollevano Polemiche</h3>
                        <p>Un'azienda leader nel settore avvia i test più ambiziosi finora, ma le questioni etiche rimangono aperte...</p>
                        <div class="article-meta">
                            <span>Lorenzo Neri</span>
                            <span>10 Maggio 2024</span>
                        </div>
                    </article>
                    <article class="article-card">
                        <img src="https://via.placeholder.com/400x250.png?text=Sviluppo+Web" alt="Immagine articolo">
                        <span class="category-tag">Sviluppo</span>
                        <h3>Web3: Oltre il Hype, Quali Sono le Reali Applicazioni Pratiche?</h3>
                        <p>Andiamo oltre la speculazione per analizzare i progetti concreti che stanno costruendo il nuovo web...</p>
                        <div class="article-meta">
                            <span>Alessia Rossi</span>
                            <span>9 Maggio 2024</span>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- Sezione Newsletter -->
        <section class="newsletter-section">
            <div class="container">
                <div class="newsletter-content">
                    <h2>Rimani Aggiornato</h2>
                    <p>Iscriviti alla nostra newsletter per ricevere le ultime notizie e analisi esclusive direttamente nella tua casella di posta.</p>
                    <form class="newsletter-form">
                        <input type="email" placeholder="Il tuo indirizzo email" required>
                        <button type="submit">ISCRIVITI</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-column">
                    <div class="logo">
                        <a href="#">Buzz<span>Tech</span>.it</a>
                    </div>
                    <p>Un prodotto di eccellenza nel giornalismo tecnologico e dell'innovazione.</p>
                </div>
                <div class="footer-column">
                    <h4>Categorie</h4>
                    <ul>
                        <li><a href="#">Intelligenza Artificiale</a></li>
                        <li><a href="#">Startup e Venture</a></li>
                        <li><a href="#">Hardware e Gadget</a></li>
                        <li><a href="#">Software e App</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>Azienda</h4>
                    <ul>
                        <li><a href="#">Chi Siamo</a></li>
                        <li><a href="#">Contatti</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Termini di Servizio</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 BuzzTech.it. Tutti i diritti riservati.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

:root {
    --primary-blue: #1457c7;
    --accent-green: #cffe4c;
    --light-gray: #aaaaaa;
    --white: #ffffff;
    --bg-light: #f8f9fa;
    --text-dark: #212529;
    --font-bebas: 'Bebas Neue', cursive;
    --font-inter: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-inter);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

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

h1, h2, h3 {
    font-family: var(--font-bebas);
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.2;
}

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

a:hover {
    color: var(--accent-green);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Header --- */
.site-header {
    background-color: var(--white);
    padding: 1rem 0;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-family: var(--font-bebas);
    font-size: 2.5rem;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: -1px;
}

.logo a span {
    color: var(--primary-blue);
}

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

.main-nav a {
    font-family: var(--font-inter);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.main-nav a:hover {
    color: var(--primary-blue);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-btn, .mobile-menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-dark);
}

.mobile-menu-toggle {
    display: none;
}

/* --- Hero Section --- */
.hero-section {
    padding: 2rem 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.featured-article {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.featured-article img {
    width: 100%;
}

.featured-article h1 {
    font-size: 3.5rem;
    padding: 1rem 1.5rem 0;
}

.featured-article p {
    padding: 0 1.5rem;
    font-size: 1.1rem;
    color: #555;
}

.featured-article .article-meta {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    color: var(--light-gray);
    margin-top: auto;
}

.side-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.side-feature {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.side-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.side-feature img {
    width: 100%;
}

.side-feature h3 {
    font-size: 1.8rem;
    padding: 1rem;
}

.article-date {
    padding: 0 1rem 1rem;
    font-size: 0.9rem;
    color: var(--light-gray);
}

/* --- Sezioni Generiche --- */
.section-title {
    font-size: 3rem;
    margin: 3rem 0 2rem;
    text-align: center;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--accent-green);
    margin: 0.5rem auto 0;
}

/* --- Trending Section --- */
.trending-section {
    background-color: var(--white);
    padding: 2rem 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.trending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.trending-item {
    display: block;
    padding: 1rem;
    font-weight: 600;
    font-family: var(--font-inter);
    color: var(--text-dark);
    border-left: 3px solid var(--primary-blue);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.trending-item:hover {
    background-color: var(--bg-light);
    border-color: var(--accent-green);
}

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

.article-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.article-card img {
    width: 100%;
}

.article-card h3 {
    font-size: 1.8rem;
    padding: 1rem 1.5rem 0;
}

.article-card p {
    padding: 0.5rem 1.5rem;
    color: #555;
    flex-grow: 1;
}

.article-card .article-meta {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    color: var(--light-gray);
    border-top: 1px solid #e0e0e0;
}

.category-tag {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 0.2rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-inter);
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}

/* --- Newsletter Section --- */
.newsletter-section {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 4rem 0;
    text-align: center;
    margin-top: 3rem;
}

.newsletter-section h2 {
    font-size: 3rem;
    color: var(--white);
}

.newsletter-section p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 1rem auto 2rem;
}

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

.newsletter-form input {
    flex-grow: 1;
    padding: 1rem;
    border: none;
    border-radius: 5px;
    font-family: var(--font-inter);
}

.newsletter-form button {
    background-color: var(--accent-green);
    color: var(--text-dark);
    border: none;
    padding: 1rem 2rem;
    border-radius: 5px;
    font-weight: 700;
    font-family: var(--font-inter);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: #b8e038;
}

/* --- Footer --- */
.site-footer {
    background-color: var(--text-dark);
    color: #ccc;
    padding: 3rem 0 1rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-column h4 {
    font-family: var(--font-inter);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 1rem;
}

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

.footer-column ul li {
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: #ccc;
}

.footer-column a:hover {
    color: var(--accent-green);
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid #444;
    font-size: 0.9rem;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
    .featured-article h1 {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .main-nav.is-active {
        display: flex;
    }
    .mobile-menu-toggle {
        display: block;
    }
    .hero-section, .content-section {
        padding: 1rem 0;
    }
    .section-title {
        font-size: 2.5rem;
        margin: 2rem 0 1.5rem;
    }
    .newsletter-form {
        flex-direction: column;
    }
}