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

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

Referenze

hreflangConsente di dichiarare la lingua del documento collegato.
<html>Tag primario di un documento HTML
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<textarea>Area di testo libero espandibile per form HTML
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
<br>Inserisce uno spazio vuoto tra due elementi HTML.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Con nome bandiera(2)

es riepilogativo da correggere

fontawesome-esempio

Micheal Jackson fanpage - Codewith

La mia prima pagina HTML

SUAMI NOVILLO 3BSC

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