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

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

Referenze

langSpecifica la lingua del contenuto di un elemento
<h1>Titolo di intestazione di primo livello
<object>Incorpora risorse varie nella pagina web.
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<option>Serve ad inserire una voce in un menu di selezione.
<p>Serve a definire paragrafi di testo

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

square - social bar

Esercizio 1 3ASC

Real Word Counter JS

Costruzione form

Esercizio fatto benissimo

26/01/2024 pagina html

Esercitazione n.1

Even Odd High Low Guessing Game

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 ora</button>
    </section>

    <!-- Sezione Design News -->
    <section id="design" class="section">
    <h2>Ultime dal Mondo del Design</h2>
    <div class="articles">
        <article>
            <img src="https://via.placeholder.com/300x200" alt="Design News: Nuovi trend nel Web Design">
            <h3>Nuovi trend nel Web Design</h3>
            <p>Scopri come il minimalismo influenza il design dei siti web moderni.</p>
        </article>
        <article>
            <img src="https://via.placeholder.com/300x200" alt="Colori e Palette del Futuro">
            <h3>Colori e Palette del Futuro</h3>
            <p>Analizziamo le palette che domineranno il design nel prossimo anno.</p>
        </article>
    </div>
</section>

    </section>

    <!-- Sezione Marketing -->
    <section id="marketing" class="section">
        <h2>Novità e Tendenze nel Marketing</h2>
        <div class="articles">
            <article>
                <img src="https://via.placeholder.com/300x200" alt="Marketing News 1">
                <h3>IA nel Marketing</h3>
                <p>Come le aziende usano l'AI per migliorare le strategie di marketing.</p>
            </article>
            <article>
                <img src="https://via.placeholder.com/300x200" alt="Marketing News 2">
                <h3>Marketing Personalizzato</h3>
                <p>L'importanza di creare esperienze su misura per ogni cliente.</p>
            </article>
        </div>
    </section>

    <!-- Sezione Intelligenza Artificiale -->
    <section id="ai" class="section">
        <h2>Intelligenza Artificiale: Scoperte e Innovazioni</h2>
        <div class="articles">
            <article>
                <img src="https://via.placeholder.com/300x200" alt="AI News 1">
                <h3>AI e Design Creativo</h3>
                <p>Come l'intelligenza artificiale sta rivoluzionando il mondo del design.</p>
            </article>
            <article>
                <img src="https://via.placeholder.com/300x200" alt="AI News 2">
                <h3>Algoritmi Intelligenti nel Marketing</h3>
                <p>I nuovi algoritmi AI che stanno cambiando il volto del marketing.</p>
            </article>
        </div>
    </section>

    <!-- Sezione Newsletter -->
    <section class="newsletter">
        <h2>Iscriviti alla nostra Newsletter</h2>
        <p>Rimani aggiornato con le ultime notizie e le tendenze direttamente nella tua casella di posta.</p>
        <form action="#" method="post">
            <input type="text" placeholder="Nome" required>
            <input type="email" placeholder="Email" required>
            <button type="submit">Iscriviti</button>
        </form>
    </section>

    <footer>
    <div class="footer-content">
        <ul>
            <li><a href="#">Termini di Servizio</a></li>
            <li><a href="#">Politica sulla Privacy</a></li>
            <li><a href="#">Informativa sui Cookie</a></li>
            <li><a href="#">Contattaci</a></li>
        </ul>
        <p>&copy; 2024 La Tua Azienda. Tutti i diritti riservati.</p>
    </div>
</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;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(120deg, #1F3F57, #F57FA6, #484848);
    color: #FFFFFF;
    border-radius: 15px;
}

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

/* Stile delle Sezioni */
section {
    padding: 40px 20px;
}

h2 {
    font-size: 2em;
    font-weight: 700;
    color: #333333;
    text-align: center;
    margin-bottom: 20px;
    
}

.highlighted-news, .design-section, .marketing-section, .ai-section {
    max-width: 1200px;
    margin: 0 auto;
}

.articles {
    display: flex;
    justify-content: center; /* Centra i contenuti */
    gap: 20px;
    margin-top: 20px;
    background-color: #ffffff;
    
/* Scritte eleganti sul placeholder */
article img::before {
    content: attr(alt); /* Usa l'attributo alt come testo per il placeholder */
    display: block;
    text-align: center;
    width: 100%;
    padding: 20px;
}

/* Stile dei placeholder per le immagini */
article img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px; /* Altezza standard per placeholder */
    border-radius: 8px;
    background-color: #00A4E9; /* Colore di sfondo per il placeholder */
    color: #ffffff; /* Colore del testo */
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
    object-fit: cover;
}

article:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

article img {
    max-width: 100%;
    border-radius: 8px;
}

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

article p {
    color: #666666;
}

/* Stile Newsletter */
.newsletter {
    background-color: #f0e8e8;
    text-align: center;
    padding: 40px 20px;
}

.newsletter h2 {
    font-size: 1.8em;
    color: #100f0f90;
    margin-bottom: 20px;
}

/* Stile Newsletter */
.newsletter {
background-color: #f0e8e8;
text-align: center;
padding: 40px 20px;
}

.newsletter h2 {
font-size: 1.8em;
color: #100f0f90;
margin-bottom: 20px;
}

.newsletter form {
display: flex;
justify-content: center;
gap: 10px;
}

.newsletter input[type="text"],
.newsletter input[type="email"] {
padding: 12px 20px;
border: 1px solid #dddddd;
border-radius: 6px;
width: 250px;
}

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

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

/* Stile Newsletter */
.newsletter {
    background-color: #f0e8e8; /* Colore di sfondo chiaro */
    text-align: center; /* Testo centrato */
    padding: 40px 20px; /* Spaziatura interna */
    border-radius: 10px; /* Angoli arrotondati */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombra leggera */
}

.newsletter h2 {
    font-size: 1.8em; /* Dimensione del titolo */
    color: #100f0f; /* Colore del testo */
    margin-bottom: 20px; /* Margine inferiore */
}

.newsletter form {
    display: flex; /* Layout flessibile per il modulo */
    justify-content: center; /* Centratura del contenuto */
    gap: 10px; /* Spazio tra gli elementi */
}


.newsletter input[type="text"]:focus,
.newsletter input[type="email"]:focus {
    border: 1px solid #00A4E9; /* Bordo blu quando in focus */
    outline: none; /* Rimuove l'outline predefinito */
}

.newsletter button {
    padding: 12px 30px; /* Spaziatura interna */
    background-color: #00A4E9; /* Colore di sfondo blu */
    color: #ffffff; /* Colore del testo bianco */
    border-radius: 6px; /* Angoli arrotondati */
    font-size: 1em; /* Dimensione del testo */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    transition: background-color 0.3s; /* Transizione per il colore di sfondo */
}

.newsletter button:hover {
    background-color: #007bbf; /* Colore blu scuro al passaggio del mouse */
}
footer {
    background-color: #195954; /* Colore di sfondo */
    color: #ffffff; /* Colore del testo */
    padding: 20px 0; /* Padding interno */
    text-align: center; /* Testo centrato */
}

.footer-content {
    max-width: 900px; /* Larghezza massima del footer */
    margin: 0 auto; /* Centra il footer nella pagina */
}

.footer-content ul {
    list-style-type: none; /* Rimuove i puntini */
    padding: 0;
    margin: 10px 0; /* Margine sopra e sotto */
    display: flex; /* Layout in flexbox */
    justify-content: center; /* Centra le voci */
    gap: 20px; /* Spaziatura tra le voci */
}

.footer-content ul li {
    display: inline; /* Gli elementi della lista sono in linea */
}

.footer-content ul li a {
    text-decoration: none; /* Rimuove la sottolineatura */
    color: #ffffff; /* Colore del link */
    transition: color 0.3s; /* Transizione per l'effetto hover */
}

.footer-content ul li a:hover {
    color: #FFD700; /* Colore al passaggio del mouse */
}

footer p {
    font-size: 0.8em; /* Dimensione del testo */
    color: #ffffff; /* Colore del testo chiaro */
    margin-top: 10px; /* Margine superiore */
}