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

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

Referenze

<html>Tag primario di un documento HTML
autofocusAttiva un elemento al caricamento della pagina.
<embed>Tag per l'incorporamento di contenuti multimediali
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Contatore di Click

La volpe e la cicogna(2)

esercizio_tabella.htm.

Riprova verifica di progr(2)

vendita ebay(2)

hate this project

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