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

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

References

formnovalidateImpedisce la convalida di un singolo elemento input
langSpecifica la lingua del contenuto di un elemento
<h1>Titolo di intestazione di primo livello
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<h5>Titolo di intestazione di quinto livello
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Users

Log in to search for users

Explore

Find inspiration

Tabella matricole

Anita Angiolini

Esame di informatica

esercitazione4.html(2)

informatica 13/10

mappa del malandrino

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

  } 

}