Design, Marketing & AI News by @Darkness977 - Codewith.it

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

Referenze

checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<link>Collega il documento corrente con una risorsa esterna
<th>Definisce una cella di intestazione di una tabella HTML.
<em>Formatta il testo in corsivo/italico enfatizzato
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<tr>Definisce le righe di una tabella (rows)

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

console elements

NeonPulse | Agency WebMarketing, A

servizio_fiscale.html

Prima pagina web

esercizio gatto

Esercitazione n. 2

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>Design, Marketing & AI News</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Header -->
    <header class="navbar">
        <div class="navbar-logo">DesignNews</div>
        <nav class="navbar-menu">
            <a href="#home">Home</a>
            <a href="#design">Design</a>
            <a href="#marketing">Marketing</a>
            <a href="#ai">AI</a>
            <a href="#contact">Contatti</a>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero-section">
        <h1>Scopri le ultime novità su Design, Marketing & AI</h1>
        <p>Un sito pensato per chi vuole restare aggiornato sui trend di design, innovazioni nel marketing e sviluppi dell'intelligenza artificiale.</p>
        <button class="cta-button">Inizia subito</button>
    </section>

    <!-- Sezione Principale con Contenuti a Due Colonne -->
    <section class="main-content">
        <h2>Sezioni Informative</h2>
        <div class="info-sections">
            <div class="info-column">
                <article>
                    <div class="placeholder" style="background-color: #00A4E9;">
                        <h3>Design e Creatività</h3>
                    </div>
                    <p>Scopri i nuovi trend e le innovazioni nel design moderno.</p>
                </article>
                <article>
                    <div class="placeholder" style="background-color: #F57FA6;">
                        <h3>Marketing Digitale</h3>
                    </div>
                    <p>Esplora le strategie di marketing più efficaci nel panorama attuale.</p>
                </article>
            </div>
            <div class="info-column">
                <article>
                    <div class="placeholder" style="background-color: #484848;">
                        <h3>Intelligenza Artificiale</h3>
                    </div>
                    <p>Scopri come l'IA sta cambiando il nostro modo di vivere e lavorare.</p>
                </article>
                <article>
                    <div class="placeholder" style="background-color: #2fa39c;">
                        <h3>Progetti Creativi</h3>
                    </div>
                    <p>Esplora i progetti più interessanti e innovativi del momento.</p>
                </article>
            </div>
        </div>
    </section>



<div class="container">
    <h2>Iscriviti alla Newsletter</h2>
    <p>Ricevi le ultime notizie su design, marketing e intelligenza artificiale direttamente nella tua email.</p>
    <div class="newsletter-form">
        <form action="https://example.us1.list-manage.com/subscribe/post?u=yourMailchimpID&id=yourListID" method="post" target="_blank">
            <input type="email" name="EMAIL" placeholder="Inserisci la tua email" required>
            <button type="submit">Iscriviti</button>
        </form>
    </div>
</div>


<!-- Footer -->
<footer>
    <div class="footer-menu">
        <a href="#gdpr">GDPR</a> 
        <a href="#privacy">Privacy</a>
        <a href="#terms">Termini di Servizio</a>
        <a href="#faq">FAQ</a>
    </div>
    <div class="social-media">
        <!-- Icone Social, ad esempio inserisci qui le icone come i tag <a> con icon font -->
        <a href="#" aria-label="Facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" aria-label="Instagram"><i class="fa fa-instagram"></i></a>
    </div>
    <p>&copy; 2024 DesignNews. Tutti i diritti riservati.</p>
</footer>


</body>
</html>

/* Stili di base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-smoothing: antialiased;
}

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #333333;
    background-color: #f9f9f9;
    line-height: 1.6;
}

/* Stile Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #121212; /* sfondo scuro per contrasto */
    color: #ffffff;
}

.navbar-logo {
    font-size: 1.8em;
    font-weight: bold;
    margin-left: 145px; /*sposta centralità logo */ 
}

.navbar-menu {
    display: flex;
    gap: 50px;
    margin-right: 245px; /*sposta centralità menu */   
}

.navbar-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1em;
    font-weight: 500;
    transition: color 0.3s;
}

.navbar-menu a:hover {
    color: #00A4E9; /* azzurro acceso per hover */
}

/* Stile Hero Section */
.hero-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 600px; /* Altezza della sezione hero */
    max-width: 1400px; /* Larghezza massima */
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(120deg, #1F3F57, #F57FA6, #484848);
    color: #FFFFFF;
}

.hero-section h1 {
    font-size: 3em;
    margin: 0;
    font-weight: 700;
    color: #ffffff;
}

.hero-section p {
    font-size: 1.2em;
    max-width: 700px;
    margin: 20px 0;
    color: #E0E0E0;
}

.cta-button {
    padding: 15px 30px;
    background-color: #00A4E9;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #007bbf;
}

/* Stili per la sezione principale */
.main-content {
    padding: 40px 20px;
    background-color: #ffffff; /* Colore di sfondo chiaro */
}

.info-sections {
    display: flex; /* Layout a due colonne */
    justify-content: space-between;
    gap: 20px; /* Spazio tra le colonne */
    max-width: 1200px; /* Larghezza massima per allineamento */
    margin: 0 auto; /* Centra la sezione */
}

.info-column {
    flex: 1; /* Colonne di uguale larghezza */
    background-color: #f9f9f9; /* Colore di sfondo leggero per le colonne */
    border-radius: 8px; /* Angoli arrotondati */
    padding: 20px; /* Padding interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra leggera */
}

.placeholder {
    height: 150px; /* Altezza per il placeholder */
    border-radius: 8px; /* Angoli arrotondati */
    margin-bottom: 10px; /* Margine inferiore */
    display: flex;
    align-items: center;
    justify-content: center; /* Centra il testo */
    color: #ffffff; /* Colore del testo */
    font-weight: bold;
}

/* Stile degli articoli */
article {
    margin-bottom: 20px; /* Spazio tra gli articoli */
}

article h3 {
    font-size: 1.5em;
    margin: 10px 0;
    color: #121212;
}

article p {
    color: #666666;
}

/* Stili per la sezione newsletter */
.container {
    max-width: 1400px; /* Limita la larghezza della sezione */
    margin: 100px auto; /* Centro verticale con margine superiore e inferiore */
    padding: 40px 20px;
    background-color: #1F3F57; /* Sfondo scuro */
    color: #FFFFFF; /* Colore del testo */
    text-align: center; /* Centra il testo */
    border-radius: 0px; /* Angoli arrotondati box esterno */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombra leggera */
}

.container h2 {
    font-size: 1.8em;
    margin-bottom: 10px;
    font-weight: bold;
    color: #FFD700; /* Giallo dorato per il titolo */
}

.container p {
    font-size: 1em;
    margin-bottom: 20px;
    color: #E0E0E0; /* Colore chiaro per il testo descrittivo */
}

.newsletter-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.newsletter-form input[type="email"] {
    width: 100%;
    max-width: 400px; /* Larghezza massima del campo email */
    padding: 12px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    font-size: 1em;
    color: #333333;
}

.newsletter-form button {
    padding: 12px 30px;
    background-color: #00A4E9;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.newsletter-form button:hover {
    background-color: #007bbf; /* Colore blu scuro al passaggio del mouse */
}

/* Stile generale per il footer */
footer {
    background-color: #1F3F57; /* Sfondo scuro */
    color: #FFFFFF; /* Testo chiaro */
    text-align: center;
    padding: 40px 20px;
    font-size: 1em;
    line-height: 1.6;
}

/* Stile per i link del menu del footer */
.footer-menu {
    margin-bottom: 20px;
}

.footer-menu a {
    color: #E0E0E0; /* Colore chiaro per i link */
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    transition: color 0.3s;
}

.footer-menu a:hover {
    color: #FFD700; /* Giallo dorato per hover */
}

/* Stile per le icone dei social media */
.social-media {
    margin-bottom: 20px;
}

.social-media a {
    color: #E0E0E0; /* Colore chiaro per le icone */
    font-size: 1.4em;
    margin: 0 10px;
    transition: color 0.3s;
}

.social-media a:hover {
    color: #FFD700; /* Giallo dorato per hover */
}

/* Stile per il testo del copyright */
footer p {
    color: #CCCCCC; /* Colore chiaro per il copyright */
    font-size: 0.9em;
    margin: 0;
}