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

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

Referenze

<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
<em>Formatta il testo in corsivo/italico enfatizzato
typeSpecifica la tipologia/funzione di un elemento.
listCollega un elemento input con una lista di opzioni datalist
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<ul>Usato per la creazione di liste non ordinate.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Autoscuola Roma EUR Torrino Patent

Color Assigment

5/10/24 es. 8 - conta alfabeto

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 Principale con Contenuti a Due Colonne -->
    <section class="main-content">
        <h2 style="text-align: center;">Contenuti Informativi</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>


<!-- Sezione Portfolio -->
<section class="portfolio">
    <h2>Portfolio</h2>
    <div class="portfolio-items">
        <div class="portfolio-item" style="background-color: #f57fa6;">
            <div class="image-container">
                <div class="overlay">Foto 1</div>
            </div>
        </div>
        <div class="portfolio-item" style="background-color: #1F3F57;">
            <div class="image-container">
                <div class="overlay">Foto 2</div>
            </div>
        </div>
        <div class="portfolio-item" style="background-color: #00A4E9;">
            <div class="image-container">
                <div class="overlay">Foto 3</div>
            </div>
        </div>
        <div class="portfolio-item" style="background-color: #f57fa6;">
            <div class="image-container">
                <div class="overlay">Foto 4</div>
            </div>
        </div>
        <div class="portfolio-item" style="background-color: #1F3F57;">
            <div class="image-container">
                <div class="overlay">Foto 5</div>
            </div>
        </div>
        <div class="portfolio-item" style="background-color: #00A4E9;">
            <div class="image-container">
                <div class="overlay">Foto 6</div>
            </div>
        </div>
        <div class="portfolio-item" style="background-color: #f57fa6;">
            <div class="image-container">
                <div class="overlay">Foto 7</div>
            </div>
        </div>
    </div>
</section>


    <!-- Sezione News dal Blog -->
    <section class="news-section" style="margin-top: 200px;">
        <h2 style="text-align: center;">News dal Blog</h2>
        <div class="news-articles">
            <article>
                <div class="placeholder" style="background-color: #F57FA6;">
                    <h3>Web Design: Tendenze 2024</h3>
                </div>
                <p>Esplora le tendenze emergenti nel web design per il 2024.</p>
            </article>
            <article>
                <div class="placeholder" style="background-color: #00A4E9;">
                    <h3>Digital Marketing: Strategie Vincitrici</h3>
                </div>
                <p>Scopri le strategie di marketing che stanno facendo la differenza.</p>
            </article>
            <article>
                <div class="placeholder" style="background-color: #484848;">
                    <h3>AI: Le Ultime Innovazioni</h3>
                </div>
                <p>Un'analisi delle ultime innovazioni nel campo dell'intelligenza artificiale.</p>
            </article>
        </div>
    </section>


<!-- Sezione Chi Siamo -->
<section class="about-us">
    <h2>Chi Siamo</h2>
    <p>
        Siamo un team di esperti nel campo del web design e del marketing digitale. La nostra missione è aiutare le aziende a crescere online. 
    <p> Con anni di esperienza e una passione per l'innovazione, offriamo soluzioni su misura per ogni cliente. 
    <p> Ogni progetto è un'opportunità per dimostrare la nostra creatività e il nostro impegno per l'eccellenza. 
    <p> Crediamo nel potere della tecnologia e dell'arte per trasformare le idee in realtà. 
    <p> Unisciti a noi nel tuo viaggio verso il successo online.
    </p>
</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>

    <!-- Bottone per tornare su -->
<button id="scrollToTop" title="Torna su">↑</button>

<script>
    // Gestione dello scorrimento del menu
    let lastScrollTop = 0;
    const navbar = document.querySelector('.navbar');
    window.addEventListener('scroll', () => {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (scrollTop > lastScrollTop) {
            // Scorre verso il basso
            navbar.classList.add('hide');
        } else {
            // Scorre verso l'alto
            navbar.classList.remove('hide');
        }
        lastScrollTop = scrollTop;

        // Mostra o nasconde il bottone "Torna su"
        const scrollToTopBtn = document.getElementById('scrollToTop');
        if (scrollTop > 300) {
            scrollToTopBtn.style.display = 'block'; // Mostra il bottone
        } else {
            scrollToTopBtn.style.display = 'none'; // Nasconde il bottone
        }
    });

    // Funzione per tornare in cima alla pagina
    document.getElementById('scrollToTop').addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth' // Scorrimento fluido
        });
    });
</script>

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

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 per il menu sticky */
.navbar {
    position: sticky; /* Fissa il menu nella parte superiore */
    top: 0; /* Posizione in alto */
    z-index: 1000; /* Assicura che il menu sia sopra altri elementi */
    transition: top 0.3s; /* Transizione fluida */
}

/* Nascondi il menu quando scorre verso il basso */
.hide {
    top: -80px; /* Nasconde il menu */
}

/* Stile per il menu sticky */
.navbar {
    position: sticky; /* Fissa il menu nella parte superiore */
    top: 0; /* Posizione in alto */
    z-index: 1000; /* Assicura che il menu sia sopra altri elementi */
    transition: top 0.3s; /* Transizione fluida */
}

/* Nascondi il menu quando scorre verso il basso */
.hide {
    top: -80px; /* Nasconde il menu */
}

/* Stile per il pulsante "Torna su" */
#scrollToTop {
    position: fixed;
    bottom: 20px; /* Distanza dal fondo */
    right: 20px; /* Distanza da destra */
    display: none; /* Inizialmente nascosto */
    background-color: #00A4E9; /* Colore di sfondo */
    color: white; /* Colore del testo */
    border: none; /* Nessun bordo */
    border-radius: 5px; /* Angoli arrotondati */
    padding: 10px; /* Spaziatura interna */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    font-size: 1em; /* Dimensione del testo */
}

/* Stile per il bottone al passaggio del mouse */
#scrollToTop:hover {
    background-color: #007bbf; /* Colore al passaggio del mouse */
}


/* Stile per il bottone al passaggio del mouse */
#scrollToTop:hover {
    background-color: #007bbf; /* Colore al passaggio del mouse */
}


/* 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: 10px; /* Raggio di curvatura degli angoli */
    padding: 20px; /* Spaziatura interna */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombra leggera per il sollevamento */
}

.info-column article {
    margin-bottom: 20px; /* Spazio tra gli articoli */
}

.placeholder {
    width: 100%; /* Larghezza al 100% */
    height: 200px; /* Altezza fissa */
    display: flex; /* Flexbox per centrare il testo */
    align-items: center; /* Allineamento verticale */
    justify-content: center; /* Allineamento orizzontale */
    color: #ffffff; /* Colore del testo bianco */
    font-size: 1.5em; /* Dimensione del testo */
    font-weight: bold; /* Grassetto per il testo */
    border-radius: 8px; /* Raggio di curvatura per i bordi */
}

/* Stile per la sezione Portfolio */
.portfolio {
    padding: 40px 20px;
    text-align: center;
    margin: 100px 0; /* Spazio di 100px sopra e sotto */
    background-color: #333333; /* Sfondo scuro */
}

.portfolio h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #ffffff; /* Colore del titolo */
}

.portfolio-items {
    display: grid; /* Utilizza un grid layout */
    grid-template-columns: repeat(3, 1fr); /* Tre colonne */
    gap: 20px; /* Spazio tra le colonne */
}

/* Stile per gli elementi del portfolio */
.portfolio-item {
    position: relative; /* Necessario per l'overlay */
    border-radius: 10px;
    overflow: hidden; /* Nasconde la parte in eccesso */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    transition: transform 0.3s ease; /* Transizione per l'effetto di zoom */
}

.portfolio-item:hover {
    transform: scale(1.05); /* Effetto zoom */
}

/* Contenitore per l'immagine */
.image-container {
    height: 200px; /* Altezza fissa per le immagini */
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra orizzontalmente */
    background-color: #444; /* Colore di sfondo del contenitore */
}

/* Stile per l'overlay */
.overlay {
    position: absolute; /* Posizionamento assoluto */
    color: #ffffff; /* Colore del testo */
    font-size: 1.5em; /* Dimensione del font */
    opacity: 0; /* Inizialmente invisibile */
    transition: opacity 0.3s ease; /* Transizione per l'overlay */
}

.portfolio-item:hover .overlay {
    opacity: 1; /* Rende visibile l'overlay al passaggio del mouse */
}


/* Sezione News dal Blog */
.news-section {
    padding: 40px 20px;
    background-color: #ffffff; /* Colore di sfondo bianco */
}

.news-articles {
    display: flex; /* Flexbox per allineare gli articoli */
    justify-content: space-around; /* Spazio uniforme tra gli articoli */
    max-width: 1200px; /* Larghezza massima */
    margin: 0 auto; /* Centra la sezione */
}

.news-articles article {
    width: 30%; /* Larghezza dei singoli articoli */
    background-color: #f9f9f9; /* Colore di sfondo chiaro */
    border-radius: 10px; /* Raggio di curvatura degli angoli */
    padding: 20px; /* Spaziatura interna */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombra leggera */
}

/* Sezione Chi Siamo */
.about-us {
    padding: 40px 20px;
    background-color: #ffffff; /* Colore di sfondo bianco */
    text-align: center; /* Centra il testo */
}

/* Sezione Newsletter */
.newsletter {
    padding: 40px 20px;
    background-color: #f1f1f1; /* Colore di sfondo leggero */
    text-align: center; /* Centra il testo */
}

.newsletter form {
    display: flex; /* Flexbox per allineare gli input */
    justify-content: center; /* Centra gli elementi */
    gap: 10px; /* Spazio tra gli input */
    margin-top: 20px; /* Spazio sopra il form */
}

.newsletter input[type="text"],
.newsletter input[type="email"] {
    padding: 10px; /* Spaziatura interna */
    border: 1px solid #ccc; /* Bordo grigio */
    border-radius: 5px; /* Raggio di curvatura per i bordi */
    width: 200px; /* Larghezza fissa per gli input */
}

.newsletter button {
    padding: 10px 20px; /* Spaziatura interna */
    background-color: #00A4E9; /* Colore di sfondo */
    color: #ffffff; /* Colore del testo */
    border: none; /* Nessun bordo */
    border-radius: 5px; /* Raggio di curvatura */
    cursor: pointer; /* Cambia il cursore */
    transition: background-color 0.3s; /* Transizione per il hover */
}

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

/* Stili del Footer */
footer {
    background-color: #121212; /* Colore scuro per il footer */
    color: #ffffff; /* Colore del testo bianco */
    padding: 20px 0; /* Spaziatura verticale */
    text-align: center; /* Centra il testo */
}

.footer-content ul {
    list-style: none; /* Rimuove i punti elenco */
    padding: 0; /* Rimuove il padding */
}

.footer-content ul li {
    display: inline; /* Mostra gli elementi in linea */
    margin: 0 15px; /* Spazio tra i link */
}

.footer-content p {
    margin-top: 10px; /* Spazio sopra il paragrafo */
    font-size: 0.9em; /* Dimensione del testo */
    color: #E0E0E0; /* Colore del testo grigio chiaro */
}

.footer-content hr {
    border: 0; /* Rimuove il bordo predefinito */
    height: 1px; /* Altezza del separatore */
    background-color: #ccc; /* Colore del separatore */
    margin: 10px 0; /* Spazio verticale */
}