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

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

References

<html>Tag primario di un documento HTML
autofocusAttiva un elemento al caricamento della pagina.
<pre>Indica una parte di testo preformattato
<label>Mostrare un testo di etichetta per un elemento di input.
<select>Usato per creare un menu a tendina.
classDefinisce una o più classi per elemento

Users

Log in to search for users

Explore

Find inspiration

Collegamenti ipertestuali

La prima pagina

Esempio di Font Size in VW

portfolio_marco_mantovani.html

SUAMI NOVILLO 3BSC

Batch versamento settimanale

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

  } 

}