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

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

References

langSpecifica la lingua del contenuto di un elemento
<table>Tag primario per la creazione di tabelle
listCollega un elemento input con una lista di opzioni datalist
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<abbr>Inserisce abbreviazioni e acronimi
maxImposta il valore numerico o temporale massimo per un elemento input

Users

Log in to search for users

Explore

Find inspiration

Blocco visualizzazione PC

primo esercizio 26 gennaio

esercitazione a cazzo a casa

4395-Indovina numero mio

Esercitazione n. 1

CalcolatoreMedia

specialità scout2

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