Eleganza Gioielli by @Darkness977 - Codewith.it

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

Referenze

formSpecifica a quale form appartiene un elemento.
postDefinisce un metodo di invio di dati al server
<td>Definisce una cella di una tabella HTML.
autofocusAttiva un elemento al caricamento della pagina.
<q>Indica una parte di testo come citazione breve
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione4.html(2)

classifica serie a

Esempio positon

Brawl Stars final

Modern Space Invaders

Campagna in primavera

5/10/24 es. 9 - 3 bottoni

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.

<!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 -->
  <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 -->
  <section id="contatti" class="contact">
    <h2>Contattaci</h2>
    <form>
      <input type="text" placeholder="Nome" required />
      <input type="email" placeholder="Email" required />
      <textarea placeholder="Messaggio" required></textarea>
      <button type="submit" class="btn">Invia</button>
    </form>
  </section>

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

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

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

.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}

/* 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; /* o usa 100vh per tutto schermo */
  max-height: 700px;
  overflow: hidden;
  position: relative;
}

.hero {
  width: 100vw;
  overflow: hidden;
  position: relative;
}

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

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

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



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

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

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