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

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

References

<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
valueValore alfanumerico o booleano contenuto in un elemento
<a>Inserisce link e collegamenti ipertestuali
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<h1>Titolo di intestazione di primo livello

Users

Log in to search for users

Explore

Find inspiration

esercizio form 2

test-wrap-with-grid

esercitazione 1

5/10/24 es. 2 - conta Parole

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>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;
    }
}