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

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

References

<li>Inserisce voci all'interno di una lista
text/plainDefinisce un metodo di non codifica dei valori di un form
<object>Incorpora risorse varie nella pagina web.
<label>Mostrare un testo di etichetta per un elemento di input.
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
widthImposta la larghezza di un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

Design, Marketing & AI News (Y)

20240126 pagina html

console elements(2)

Prova di programmazione html

Esercitazione tabelle

benvenuti nella mia scuola

Un Giorno a Napoli: Itinerario Det

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 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 */
}