WOO (CHRONO)(Black, Yellow) by @Darkness977 - Codewith.it

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

Referenze

srcIndica la provenienza di una risorsa esterna (tramite URL).
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<label>Mostrare un testo di etichetta per un elemento di input.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<textarea>Area di testo libero espandibile per form HTML
<td>Definisce una cella di una tabella HTML.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

ArteFORMA — Architectural Digita

Costruzione form

Gli Aristogatti

HTML con CSS esempio generale

JS Strutture dati e funzioni es3

Il Labirinto di Teseo

Thomas Fattori 1

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>Timeless Design</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header -->
    <header>
        <div class="logo">
            <h1>Timeless Design</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#prodotti">Prodotti</a></li>
                <li><a href="#nuovi-arrivi">Nuovi Arrivi</a></li>
                <li><a href="#materiali">Materiali</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#newsletter">Newsletter</a></li>
                <li><a href="#footer">Contatti</a></li>
            </ul>
        </nav>
        <a href="#" class="cta">Acquista Ora</a>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-text">
            <h2>Timeless.</h2>
            <p>Un design senza tempo, adatto ad ogni stile e occasione.</p>
            <a href="#" class="btn">Scopri di più</a>
        </div>
    </section>

    <!-- Nuovi Arrivi -->
    <section id="nuovi-arrivi" class="nuovi-arrivi">
        <h2>Nuovi Arrivi</h2>
        <div class="arrivals-grid">
            <div class="arrival-item">
                <img src="placeholder4.jpg" alt="Nuovo Arrivo 1">
                <h3>Nuovo Arrivo 1</h3>
            </div>
            <div class="arrival-item">
                <img src="placeholder5.jpg" alt="Nuovo Arrivo 2">
                <h3>Nuovo Arrivo 2</h3>
            </div>
        </div>
    </section>

    
    
    <!-- Arrivi di tendenza -->
     <section id="trending-styles" class="">
    <h2>Stili di Tendenza</h2>

    <div class="product-grid">
        <div class="product-item">
            <div class="product-image">Immagine Prodotto 1</div>
            <h3>Prodotto 1</h3>
            <p class="price">€99,00</p>
            <button>Acquista</button>
        </div>
        <div class="product-item">
            <div class="product-image">Immagine Prodotto 2</div>
            <h3>Prodotto 2</h3>
            <p class="price">€89,00</p>
            <button>Acquista</button>
        </div>
        <div class="product-item">
            <div class="product-image">Immagine Prodotto 3</div>
            <h3>Prodotto 3</h3>
            <p class="price">€75,00</p>
            <button>Acquista</button>
        </div>
        <div class="product-item">
            <div class="product-image">Immagine Prodotto 4</div>
            <h3>Prodotto 4</h3>
            <p class="price">€120,00</p>
            <button>Acquista</button>
        </div>
    </div>
</section>


<!-- Sezione "Product of the Week" -->
<div class="product-of-the-week">
    <h2>Product of the Week</h2>
    <div class="product-highlight">
        <img src="path/to/product-image.jpg" alt="Product Image" />
        <div class="product-info">
            <h3>Nome Prodotto</h3>
            <p>Breve descrizione del prodotto che mette in evidenza le sue caratteristiche uniche.</p>
            <a href="#" class="btn-buy">Scopri di più</a>
        </div>
    </div>
</div>


    <!-- Prodotti principali -->
    <section id="prodotti" class="prodotti">
        <h2>Prodotti Principali</h2>
        <div class="product-grid">
            <div class="product-item">
                <img src="placeholder1.jpg" alt="Orologio 1">
                <h3>Orologio Classico</h3>
                <a href="#" class="btn">Acquista</a>
            </div>
            <div class="product-item">
                <img src="placeholder2.jpg" alt="Orologio 2">
                <h3>Orologio Sportivo</h3>
                <a href="#" class="btn">Acquista</a>
            </div>
            <div class="product-item">
                <img src="placeholder3.jpg" alt="Orologio 3">
                <h3>Orologio Elegante</h3>
                <a href="#" class="btn">Acquista</a>
            </div>
        </div>
    </section>

    <!-- Materiali di Qualità -->
    <section id="materiali" class="materiali">
        <h2>Materiali di Qualità</h2>
        <p>Utilizziamo solo materiali di prima qualità per garantire la durata e lo stile dei nostri prodotti.</p>
    </section>

    <!-- Blog -->
    <section id="blog" class="blog">
        <h2>Dal Nostro Blog</h2>
        <div class="blog-grid">
            <div class="blog-item">
                <img src="placeholder6.jpg" alt="Articolo 1">
                <h3>Web Design: Tendenze 2024</h3>
                <p>Le ultime tendenze in materia di design per il nuovo anno.</p>
            </div>
            <div class="blog-item">
                <img src="placeholder7.jpg" alt="Articolo 2">
                <h3>Digital Marketing: Strategie Vincitrici</h3>
                <p>Scopri come migliorare le tue campagne di marketing.</p>
            </div>
        </div>
    </section>


    <!-- Newsletter -->
    <section id="newsletter" class="newsletter">
        <h2>Iscriviti alla Newsletter</h2>
        <p>Ricevi le ultime notizie su design, marketing e intelligenza artificiale direttamente nella tua email.</p>
        <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 (valida)" required>
            <button type="submit">Iscriviti</button>
        </form>
    </section>

    
    <!-- Footer -->
    <footer id="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>
        <p>&copy; 2024 DesignNews. Tutti i diritti riservati.</p>
    </footer>
</body>
</html>

/* Resetta i margini e padding predefiniti */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Impostazioni generali */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    padding: 0;
}

/* Header */
header {
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header h1 {
    font-size: 1.8em;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #f9d342;
}

.cta {
    background-color: #f9d342;
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
}

.cta:hover {
    background-color: #fff;
    color: #000;
}

/* Hero Section */
.hero {
    background: url('hero-background.jpg') no-repeat center center/cover;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.hero h2 {
    font-size: 3em;
    margin-bottom: 20px;
}

.hero .btn {
    background-color: #f9d342;
    color: #000;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.hero .btn:hover {
    background-color: #fff;
}

/* Sezione Prodotti */
.prodotti {
    padding: 50px;
    background-color: #fff;
    text-align: center;
}

.prodotti h2 {
    margin-bottom: 30px;
    font-size: 2em;
    color: #333;
}

.product-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.product-item {
    width: 300px;
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.product-item h3 {
    margin-bottom: 15px;
}

.product-item img {
    width: 100%;
    height: auto;
}

.product-item .btn {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    margin-top: 10px;
}

.product-item .btn:hover {
    background-color: #f9d342;
    color: #000;
}

/* Stile per la sezione "Product of the Week" */
.product-of-the-week {
    padding: 50px 20px;
    margin-top: 100px; /* Spazio tra le sezioni */
    background-color: #f8f8f8; /* Colore di sfondo leggero */
    text-align: center;
}

.product-of-the-week h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}

.product-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.product-highlight img {
    max-width: 200px;
    border-radius: 10px;
}

.product-info {
    max-width: 400px;
    text-align: left;
}

.product-info h3 {
    font-size: 1.5em;
    color: #222;
    margin-bottom: 10px;
}

.product-info p {
    font-size: 1em;
    color: #666;
    margin-bottom: 20px;
}

.btn-buy {
    display: inline-block;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.btn-buy:hover {
    background-color: #555;
}


/* Prodotti Principali */
.trending-styles {
    padding: 50px 20px;
    text-align: center;
    background-color: #f5f5f5;
}

.trending-styles h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 30px;
}

.product-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.product-item {
    background-color: #fff;
    padding: 20px;
    width: 220px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
    border-radius: 8px;
}

.product-image {
    width: 100%;
    height: 150px;
    background-color: #ddd;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: #666;
}

.price {
    font-size: 1.1em;
    color: #333;
    margin: 10px 0;
}

button {
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}


/* Centra e spazia il titolo - Stili di tendenza*/
#trending-styles h2 {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;

}


/* Nuovi Arrivi */
.nuovi-arrivi {
    padding: 50px;
    background-color: #f9f9f9;
    text-align: center;
}

.arrivals-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.arrival-item img {
    width: 100%;
    height: auto;
}

/* Materiali di Qualità */
.materiali {
    background-color: #fff;
    padding: 50px;
    text-align: center;
}

.materiali h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.materiali p {
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Blog News Section */
.blog {
    padding: 50px;
    background-color: #f9f9f9;
    text-align: center;
}

.blog h2 {
    margin-bottom: 30px;
    font-size: 2em;
    color: #333;
}

.blog-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.blog-item {
    width: 300px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.blog-item h3 {
    margin-bottom: 15px;
}

.blog-item img {
    width: 100%;
    height: auto;
}

.blog-item p {
    font-size: 0.9em;
    line-height: 1.6;
}


/* Newsletter con maggior impatto visivo*/
.newsletter {
    padding: 75px;
    background: linear-gradient(135deg, #333, #444);
    color: #fff;
    text-align: center;
    border-radius: 0px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.newsletter h2 {
    margin-bottom: 20px;
    font-size: 2.2em;
}

.newsletter p {
    margin-bottom: 30px;
    font-size: 1.2em;
}

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

.newsletter input[type="email"] {
    padding: 5px; /* altezza campo placeholder emailbox Aumentato da 10px */
    border: none;
    border-radius: 5px;
    width: 350px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    font-size: 1.2em; /* Aumentato per maggiore evidenza */
}

/* Aggiunto per rendere il placeholder più grande */
.newsletter input[type="email"]::placeholder {
    color: #797575;
    font-size: 1.2em; 
}

.newsletter button {
    padding: 15px 30px; /* Aumentato da 10px 20px */
    background-color: #f7cd27;
    color: #fff; /* Cambiato il colore del testo */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 1.1em; /* Aumentato per maggiore leggibilità */
}

.newsletter button:hover {
    background-color: #fff;
    color: #000;
}



/* Footer */
footer {
    background-color: #222;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}

.footer-menu {
    margin-bottom: 15px;
}

.footer-menu a {
    color: #f9d342;
    text-decoration: none;
    margin: 0 10px;
}

.footer-menu a:hover {
    text-decoration: underline;
}

footer p {
    font-size: 0.9em;
}

/* Spaziatura tra le sezioni */
section {
    margin-bottom: 50px;
}