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

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

References

multipart/form-dataCodifica dei caratteri di un form
Inserisce un commento nel codice
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
formenctypeDefinisce il tipo di codifica dei dati di un elemento input

Users

Log in to search for users

Explore

Find inspiration

square - social bar

esercitazione n1

Esercizi 05/03/2024 es10

Pizzafy - Calcolatore di Pizza

esercizio form 2

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