Easygarden by @emanuele123456789 - Codewith.it

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

Referenze

formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<label>Mostrare un testo di etichetta per un elemento di input.
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<head>Tag primario di un documento HTML
<hr>Inserisce una linea orizzontale
srcIndica la provenienza di una risorsa esterna (tramite URL).

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il museo di Leonardo

Random Website Demo1

Reti Informatiche

Architettura del Successo | Consul

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

  } 

}