Easygarden by @emanuele123456789 - Codewith.it

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

References

<em>Formatta il testo in corsivo/italico enfatizzato
<tfoot>Definisce il footer o sezione inferiore di una tabella.
minImposta il valore numerico o temporale minimo per un elemento input
formmethodDefinisce il metodo di invio dei dati oltre a method
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<textarea>Area di testo libero espandibile per form HTML

Users

Log in to search for users

Explore

Find inspiration

progetto 3 morra cinese

Pro Vercelli LB

Compito informatica

Registration Form php pazienti

Esercizi 05/03/2024 es3

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>GreenBox - Giardinaggio a casa tua</title> 
  <link rel="stylesheet" href="style.css"> 
  <script defer src="script.js"></script> 
</head> 
<body> 

  <header> 

    <h1>? Easygarden 

     

    </h1> 

    <nav> 

      <ul> 

        <li><a href="#prodotti">Prodotti</a></li> 

        <li><a href="#qr">Scopri il tuo Box</a></li> 

        <li><a href="#recensioni">Recensioni</a></li> 

        <li><a href="#contatti">Contatti</a></li> 

      </ul> 

    </nav> 

  </header> 

 

  <section class="hero"> 

    <h2>Porta la natura nel tuo balcone</h2> 

    <p>Ricevi ogni mese un box con prodotti naturali, semi e attrezzi per il tuo angolo verde ?</p> 

    <a href="#prodotti" class="cta-button">Scopri i box</a> 

  </section> 

 

  <section id="prodotti" class="products"> 

    <h2>I nostri Box</h2> 

    <div class="product-grid"> 

      <div class="product-card"> 

        <img src="assets/images/box1.jpg" alt="Box Primavera"> 

        <h3>Box Primavera</h3> 

        <p>Fiori colorati, semi aromatici e accessori per la stagione.</p> 

      </div> 

      <div class="product-card"> 

        <img src="assets/images/box2.jpg" alt="Box Estate"> 

        <h3>Box Estate</h3> 

        <p>Coltiva basilico, pomodori e insalate sul balcone.</p> 

      </div> 

      <div class="product-card"> 

        <img src="assets/images/box3.jpg" alt="Box Autunno"> 

        <h3>Box Autunno</h3> 

        <p>Preparati all’inverno con piante resistenti e bulbi.</p> 

      </div> 

    </div> 

  </section> 

 

  <section id="qr" class="qr-scan"> 

    <h2>Hai ricevuto un Box?</h2> 

    <p>Inserisci il codice o scansiona il QR per scoprire contenuti esclusivi!</p> 

    <input type="text" id="qrCodeInput" placeholder="Inserisci codice del box"> 

    <button onclick="goToBox()">Scopri il tuo box</button> 

  </section> 

 

  <section id="recensioni" class="reviews"> 

    <h2>Cosa dicono i nostri clienti</h2> 

    <div class="review"> 

      <p>"Un’idea geniale! Ho trasformato il mio balcone in un piccolo giardino!" – Martina R.</p> 

    </div> 

    <div class="review"> 

      <p>"Istruzioni chiare e materiali di qualità. Bellissimo!" – Luca D.</p> 

    </div> 

  </section> 

 

  <section id="contatti" class="contact"> 

    <h2>Contattaci</h2> 

    <p>Email: info@greenbox.it | Tel: +39 123 456 7890</p> 

  </section> 

 

  <footer> 

    <p>© 2025 GreenBox. Tutti i diritti riservati.</p> 

  </footer> 

</body> 
</html>

body { 

  font-family: 'Segoe UI', sans-serif; 

  margin: 0; 

  padding: 0; 

  background: #f2f7f1; 

  color: #2f4f2f; 

} 

 

header { 

  background: #88b04b; 

  padding: 1em; 

  display: flex; 

  justify-content: space-between; 

  align-items: center; 

  color: white; 

} 

 

nav ul { 

  list-style: none; 

  display: flex; 

  gap: 1em; 

} 

 

nav a { 

  color: white; 

  text-decoration: none; 

  font-weight: bold; 

} 

 

.hero { 

  text-align: center; 

  padding: 4em 2em; 

  background-image: url('assets/images/hero-bg.jpg'); 

  background-size: cover; 

  color: ; 

} 

 

.cta-button { 

  padding: 1em 2em; 

  background: #4caf50; 

  color: white; 

  text-decoration: none; 

  border-radius: 5px; 

  margin-top: 1em; 

  display: inline-block; 

} 

 

.products { 

  padding: 3em; 

  background: #ffffff; 

} 

 

.product-grid { 

  display: flex; 

  gap: 2em; 

  justify-content: space-around; 

} 

 

.product-card { 

  background: #e8f5e9; 

  padding: 1em; 

  border-radius: 10px; 

  width: 30%; 

  text-align: center; 

} 

 

.qr-scan { 

  padding: 3em; 

  text-align: center; 

  background: #dcedc8; 

} 

 

input[type="text"] { 

  padding: 0.5em; 

  width: 300px; 

  margin: 1em 0; 

} 

 

button { 

  padding: 0.7em 2em; 

  background: #689f38; 

  color: white; 

  border: none; 

  cursor: pointer; 

} 

 

.reviews { 

  padding: 2em; 

  background: #f1f8e9; 

} 

 

.contact { 

  padding: 2em; 

  background: #c8e6c9; 

  text-align: center; 

} 

 

footer { 

  background: #558b2f; 

  color: white; 

  text-align: center; 

  padding: 1em; 

} 

/* --- Animazioni e Transizioni --- */ 

 

@keyframes fadeInUp { 

  from { 

    opacity: 0; 

    transform: translateY(40px); 

  } 

  to { 

    opacity: 1; 

    transform: translateY(0); 

  } 

} 

 

@keyframes glow { 

  0% { 

    box-shadow: 0 0 5px #76ff03; 

  } 

  50% { 

    box-shadow: 0 0 20px #76ff03; 

  } 

  100% { 

    box-shadow: 0 0 5px #76ff03; 

  } 

} 

 

@keyframes pulse { 

  0% { 

    transform: scale(1); 

  } 

  50% { 

    transform: scale(1.08); 

  } 

  100% { 

    transform: scale(1); 

  } 

} 

 

/* Applica fade-in agli elementi visibili */ 

.fade-in { 

  opacity: 0; 

  transition: all 1s ease-out; 

} 

 

/* Zoom su immagini box */ 

.product-card img { 

  transition: transform 0.3s ease; 

} 

.product-card:hover img { 

  transform: scale(1.05); 

} 

 

/* Bottone CTA animato */ 

.cta-button { 

  animation: pulse 2s infinite; 

} 

 

/* Hover effetto glow */ 

button:hover, .cta-button:hover { 

  animation: glow 1s infinite; 

  cursor: pointer; 

}

function goToBox() { 

  const code = document.getElementById("qrCodeInput").value.trim(); 

  if (code) { 

    // Redirect to dynamic box page (simulate QR code use) 

    window.location.href = `https://greenbox.it/box/${code}`; 

  } else { 

    alert("Inserisci un codice valido!"); 

  } 

}