Eleganza Gioielli by @Darkness977 - Codewith.it

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

References

<tbody>Definisce il contenuto principale di una tabella.
application-x-www-form-urlencodedCodifica dei caratteri di un form
<table>Tag primario per la creazione di tabelle
placeholderDefinisce un testo segnaposto per un elemento input o textarea
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto

Users

Log in to search for users

Explore

Find inspiration

5/10/24 es. 10 - cifratura

Gli Aristogatti

Cheeseburger CSS

Questa è una pagina dimostrativa

Mundane Monday\'s or Fantasic Frid

dati dell-utente

VIVIANARICETTARIO

Le meraviglie d\\\\

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