GreenBox - Giardinaggio a casa tua by @emanuele123456789 - Codewith.it

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

References

<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
_topApre collegamenti ipertestuali nell'elemento parent assoluto
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
text/plainDefinisce un metodo di non codifica dei valori di un form
srcIndica la provenienza di una risorsa esterna (tramite URL).

Users

Log in to search for users

Explore

Find inspiration

TravelEscape - Esplora il Mondo co

un casino pazzesco

Contatore di Click

esercitazione n1

Clona elementi JS

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

  } 

}