Eleganza Gioielli (Ufficiale) by @Darkness977 - Codewith.it

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

Referenze

<td>Definisce una cella di una tabella HTML.
<br>Inserisce uno spazio vuoto tra due elementi HTML.
formSpecifica a quale form appartiene un elemento.
placeholderDefinisce un testo segnaposto per un elemento input o textarea
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<h5>Titolo di intestazione di quinto livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Calcolo Codice Fiscale

Neon Flux - Visual Design in Motio

rectangle drawning

Quiz ristrutturazione

Ethical hacking

04_Operators and Expressions

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.

Questo è il codice del progetto Gioielleria: "<!DOCTYPE html>

<html lang="it">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Eleganza Gioielli</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>

  <!-- Header -->

  <header class="navbar">
    <div class="container">
      <h1 class="logo">Eleganza Gioielli</h1>
      <nav>
        <ul class="nav-links">
          <li><a href="#home">Home</a></li>
          <li><a href="#prodotti">Prodotti</a></li>
          <li><a href="#chi-siamo">Chi Siamo</a></li>
          <li><a href="#contatti">Contatti</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Hero -->

  <section id="home" class="hero">
    <div class="slider">
      <div class="slide"><img src="https://images.unsplash.com/photo-1643236008023-dcf174afa2ab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjR8fGNvbGxhbmElMjBkaSUyMGRpYW1hbnRpfGVufDB8MHwwfHx8MA%3D%3D?auto=format&fit=crop&w=1920&q=80" alt="Gioielli per Donna"></div>

```
  <div class="slide"><img src="https://images.unsplash.com/photo-1532039956299-1614b86a6d2f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTA2fHxjb2xsYW5hJTIwZGklMjBkaWFtYW50aXxlbnwwfDB8MHx8fDA%3D?auto=format&fit=crop&w=1920&q=80" alt="Gioielli per Ragazza"></div>

  <div class="slide"><img src="https://images.unsplash.com/photo-1653316889237-b5cc78e719c1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjU2fHxjb2xsYW5hJTIwZGklMjBkaWFtYW50aXxlbnwwfDB8MHx8fDA%3D7?auto=format&fit=crop&w=1920&q=80" alt="Gioielli per Uomo"></div>

  <div class="slide"><img src="https://images.unsplash.com/photo-1495856458515-0637185db551?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyN3x8fGVufDB8fHx8fA%3D%3D?auto=format&fit=crop&w=1920&q=80" alt="Gioielli per Uomo"></div>

  <div class="slide"><img src="https://images.unsplash.com/photo-1661030419603-1f69b322bd3d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEwMXx8fGVufDB8fHx8fA%3D%3D?auto=format&fit=crop&w=1920&q=80" alt="Gioielli per Uomo"></div>

         
</div>


  </section>

  <!-- Prodotti di Gioielleria -->

  <section id="prodotti" class="products">
    <h2>I Nostri Prodotti</h2>
    <div class="product-grid">
      <div class="product-card">
        <img src="https://images.unsplash.com/photo-1728119884623-0a27e6dbf225?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTB8fGNvbGxhbmElMjBkaSUyMGRpYW1hbnRpfGVufDB8fDB8fHww" alt="Collana Diamanti">
        <h3>Collana Diamanti</h3>
        <p>Un simbolo di eleganza senza tempo.</p>
        <button class="btn">Scopri di più</button>
      </div>

      <div class="product-card">
        <img src="https://images.unsplash.com/photo-1619134778706-7015533a6150?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDIxfHx8ZW58MHx8fHx8" alt="Orologio Luxury">
        <h3>Orologio Luxury</h3>
        <p>Stile ed eleganza per ogni occasione.</p>
        <button class="btn">Scopri di più</button>
      </div>

      <div class="product-card">
        <img src="https://images.unsplash.com/photo-1588444837495-c6cfeb53f32d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29sbGFuYSUyMGRpJTIwZGlhbWFudGl8ZW58MHx8MHx8fDA%3Da" alt="Collana di diamanti e rubini">
        <h3>Collana di Diamanti e Rubini</h3>
        <p>Il tuo momento perfetto incastonato nel tempo.</p>
        <button class="btn">Scopri di più</button>
      </div>

   <div class="product-card">
    <img src="https://plus.unsplash.com/premium_photo-1728582542990-ea25fcb21b3d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDQ3fHx8ZW58MHx8fHx8" alt="Orologio Donna Finnzamento">
    <h3>Oroogio Donna Fidnzamento</h3>
    <p>Il tuo momento perfetto incastonato nel tempo.</p>
    <button class="btn">Scopri di più</button>
  </div>

   <div class="product-card">
    <img src="https://images.unsplash.com/photo-1631729670375-7b9bc6ba6c07?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDM0fHx8ZW58MHx8fHx8" alt="Orologio Sportivo">
    <h3>Orologio Sportivo</h3>
    <p>Il tuo momento perfetto incastonato nel tempo.</p>
    <button class="btn">Scopri di più</button>
  </div>

   <div class="product-card">
    <img src="https://plus.unsplash.com/premium_photo-1728759436945-1212dbfc04f8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDM5fHx8ZW58MHx8fHx8" alt="Orologio Ragazza">
    <h3>Orologio Ragazza</h3>
    <p>Il tuo momento perfetto incastonato nel tempo.</p>
    <button class="btn">Scopri di più</button>
  </div>

</div>


  </section>

  <!-- Chi Siamo -->

  <section id="chi-siamo" class="about">
    <h2>Chi Siamo</h2>
    <p>Siamo una gioielleria artigianale che da generazioni crea pezzi unici e preziosi. Ogni gioiello racconta una storia fatta di amore, tradizione e passione.</p>
  </section>

  <!-- Contatti -->

<!-- Contatti -->

<section id="contatti" class="contact">
  <h2>Contattaci</h2>
  <p>Hai bisogno di consigli personalizzati o vuoi cogliere le nostre offerte esclusive? Compila il modulo e ti risponderemo al più presto!</p>
  <form>
    <input type="text" placeholder="Nome" required />
    <input type="email" placeholder="Email" required />
    <textarea placeholder="Messaggio" required></textarea>

    <div class="consenso">
      <label>
        <input type="checkbox" required>
        Acconsento al trattamento dei miei dati secondo la <a href="/privacy-policy" target="_blank">Privacy Policy</a>.
      </label>
    </div>

    <button type="submit" class="btn">Invia</button>
  </form>
</section>

<!-- Newsletter -->

<section id="newsletter" class="newsletter">
  <h2>Non perderti nulla!</h2>
  <p>Iscriviti alla nostra newsletter per ricevere offerte esclusive, novità di collezione e consigli preziosi sul mondo dei gioielli.</p>
  <form>
    <input type="email" placeholder="Inserisci la tua email" required />
    
    <div class="consenso">
      <label>
        <input type="checkbox" required>
        Acconsento al trattamento dei miei dati secondo la <a href="/privacy-policy" target="_blank">Privacy Policy</a>.
      </label>
    </div>

    <button type="submit" class="btn">Iscriviti</button>
  </form>
</section>

  <!-- Footer -->

  <footer>
    <p>&copy; 2025 Eleganza Gioielli. Tutti i diritti riservati.</p>
  </footer>

  <script src="script.js"></script>

</body>
</html>

.hero {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  max-height: 80vh;
}

/* Reset e base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.6;
}


/* Navbar */
.navbar {
  background: #fff;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: #333;
  float: left;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  float: right;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

/* Hero Section */
.hero {
  width: 100%;
  height: 80vh;
  overflow: hidden;
  position: relative;
}

.slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prodotti */
.products {
  padding: 4rem 0;
  background: #fff;
}

.products h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.product-card {
  background: #fff;
  border: 1px solid #eee;
  padding: 1rem;
  text-align: center;
  transition: box-shadow 0.3s;
}

.product-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.btn {
  background: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.btn:hover {
  background: #555;
}

/* Chi Siamo */
.about {
  padding: 4rem 2rem;
  background: #f5f5f5;
  text-align: center;
}

.about h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Contatti */
.contact {
  padding: 4rem 0;
  background: #fff;
  text-align: center;
}

.contact form {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact input,
.contact textarea {
  padding: 0.8rem;
  border: 1px solid #ccc;
  font-family: inherit;
}

/* Contatti (aggiornato) */
.contact {
  padding: 4rem 0;
  background: #fff;
  text-align: center;
}

.contact h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact p {
  margin-bottom: 2rem;
  color: #555;
}

.contact form {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact input,
.contact textarea {
  padding: 0.8rem;
  border: 1px solid #ccc;
  font-family: inherit;
}

/* Newsletter */
.newsletter {
  background: #f5f5f5;
  padding: 4rem 2rem;
  text-align: center;
}

.newsletter h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.newsletter p {
  margin-bottom: 2rem;
  font-size: 1rem;
  color: #555;
}

.newsletter form {
  max-width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.newsletter input {
  padding: 0.8rem;
  border: 1px solid #ccc;
  font-family: inherit;
}

/* Checkbox consenso */
.consenso {
  font-size: 0.9rem;
  color: #555;
  text-align: left;
  margin-top: 1rem;
}

.consenso a {
  color: #333;
  text-decoration: underline;
}

/* MARGINI TRA SEZIONI FINALI */
.contact {
  margin-bottom: 4rem;
}

.newsletter {
  margin-bottom: 4rem;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem 0;
  background: #111;
  color: #aaa;
}


/* Layout responsive per la sezione prodotti */
.products {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonne su desktop */
  gap: 2rem;
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr; /* 1 colonna su mobile */
  }
}

/* Centratura logo e menu nella navbar */
.logo {
  margin-left: 50px;
}

nav {
  margin-right: 250px;
}

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;

function showSlide(index) {
  const slider = document.querySelector('.slider');
  if (index >= totalSlides) {
    currentSlide = 0;
  } else if (index < 0) {
    currentSlide = totalSlides - 1;
  } else {
    currentSlide = index;
  }
  slider.style.transform = `translateX(-${currentSlide * 100}%)`;
}

function nextSlide() {
  showSlide(currentSlide + 1);
}

setInterval(nextSlide, 5000);
showSlide(0);