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

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

References

<table>Tag primario per la creazione di tabelle
methodDetermina il metodo di invio dei dati di un form al server
animationDefinisce i parametri dell'animazione di un elemento o selettore
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
headersDetermina la relazione tra celle e celle di intestazione di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Design & Comunicazione Digitale ??

Copia testo in appunti

cambio parola al click

Curriculum vitae

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