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

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

References

<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
formmethodDefinisce il metodo di invio dei dati oltre a method
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form

Users

Log in to search for users

Explore

Find inspiration

RoofTop Snipers

portfolio_marco_mantovani.html

ESERCIZIO 1.1 WEB

Lola Harrel Project 2

“esercitazione7.html”

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.

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