Crafter Coffee by @Darkness977 - Codewith.it

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

References

<tr>Definisce le righe di una tabella (rows)
<select>Usato per creare un menu a tendina.
<em>Formatta il testo in corsivo/italico enfatizzato
<tbody>Definisce il contenuto principale di una tabella.
listCollega un elemento input con una lista di opzioni datalist
<pre>Indica una parte di testo preformattato

Users

Log in to search for users

Explore

Find inspiration

esercizio:sito web

terne pitagoriche

media ponderata voti pesi

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>Crafter Coffee</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: 'Open Sans', sans-serif;
      background-color: #f9f6f1;
      color: #3a2f2f;
    }
    header {
      background-color: #d9b99b;
      padding: 2rem;
      text-align: center;
    }
    header h1 {
      font-family: 'Playfair Display', serif;
      font-size: 3rem;
      margin: 0;
    }
    nav {
      display: flex;
      justify-content: center;
      gap: 3rem;
      padding: 1rem 0;
      background-color: #c9a77c;
    }
    nav a {
      text-decoration: none;
      color: white;
      font-weight: 700;
    }
    /*SfondoPiantagione*/
    .hero {
      background-image: url('https://images.unsplash.com/photo-1707400727895-a583ec496a0c?');
      background-size: cover;
      background-position: center;
      color: white;
      padding: 9rem 8rem;
      text-align: center;
    }
    .hero h2 {
      font-size: 2.5rem;
      margin-bottom: 4rem;
    }
    .hero button {
      padding: 0.95rem 1.9rem;
      font-size: 1rem;
      background-color: #6f4e37;
      color: white;
      border: none;
      cursor: pointer;
      border-radius:6px
    }
    .section {
      padding: 4rem 2rem;
      max-width: 1100px;
      margin: auto;
      border-radius:10px;
    }
    .products {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }
    .product {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .product img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .product h3 {
      margin: 1rem;
      font-size: 1.25rem;
    }
    .product p {
      margin: 0 1rem 1rem;
      font-size: 0.95rem;
      color: #555;
    }
    .testimonial {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin: 2rem 0;
    }
    .testimonial img {
      border-radius: 50%;
      width: 80px;
      height: 80px;
      object-fit: cover;
    }
    .testimonial-content {
      max-width: 700px;
    }
    .stars {
      color: green;
      margin-bottom: 0.2rem;
    }
    footer {
      background-color: #6f4e37;
      color: white;
      text-align: center;
      padding: 3rem;
    }
    footer p {
      margin: 0.5rem 0;
    }

    .behind-the-scenes {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxXk3I2jb_86AU4e9ZfgjPwjdC_kvnhsRcOA&s');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 6rem 2rem 3rem;
  text-align: center;
  position: relative;
}
.behind-the-scenes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.behind-the-scenes-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 50 auto;
}
.behind-the-scenes h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.behind-the-scenes p {
  font-size: 1.1rem;
  line-height: 1.6;
}
.timeline {
  position: relative;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 2;
}
.timeline-step {
  background: rgba(245, 235, 220, 0.92); /* crema caldo/beige con opacità */
  padding: 1rem 1.5rem;
  border-left: 5px solid #6f4e37; /* marrone caffè */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  color: #2e2a26; /* testo scuro leggibile */
}
.timeline-step h4 {
  color: #5a3b2e; /* sottotono caffè più marcato */
}

.timeline-step p {
  margin: 0;
}
.video-container {
  margin: 2rem auto;
  max-width: 800px;
  position: relative;
  z-index: 2;
}
.video-container iframe {
  width: 100%;
  height: 430px;
  border: none;
  border-radius: 8px;
}

  </style>
</head>
<body>
  <header>
    <h1>Crafter Coffee</h1>
  </header>
  <nav>
    <a href="#about">Chi siamo</a>
    <a href="#shop">Shop</a>
    <a href="#shop">Storia del cafè</a>
    <a href="#shop">Blog</a>
    <a href="#contact">Contatti</a>
  </nav>
  <section class="hero">
    <h2>Caffè Biologico, Appena Tostato</h2>
    <button><strong>Prenota la spesa</button>
    <button><strong>Offerta del giorno</button>

  </section>
  <section class="section" id="shop">
    <h2>I vostri gusti più apprezzati</h2>
    <div class="products">
      <div class="product">
        <img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93" alt="House Blend Coffee">
        <h3>House Blend</h3>
        <p>Morbido ed equilibrato con note di cioccolato e noci.</p>
      </div>
      <div class="product">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnt85-fe5vuOrkdESWxPlTM29pMI4QbUTGFg&s" alt="Dark Roast Coffee">
        <h3>Dark Roast</h3>
        <p>Corposo e ricco, con un finale affumicato. Perfetto per gli amanti dell'espresso.</p>
      </div>
      <div class="product">
        <img src="https://deanssweets.com/wp-content/uploads/2020/07/chocolate-espresso-beans1.jpg" alt="Espresso Beans">
        <h3>Espresso Beans</h3>
        <p>Speziato per intensità e gusto. La vera scelta del barista.</p>
      </div>
      <div class="product">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgF6G1R7wzPm8g-MGX3rNlAWVhsV0SSvp5HA&s" alt="Dark Chocolate Espresso Beans">
        <h3>Dark Chocolate Espresso Beans</h3>
        <p>Creato per intensità e gusto. La vera scelta del barista.</p>
      </div>
    </div>
  </section>

<section class="section" style="background-color:#dda77c;text-align:center;">
  <h2>Iscriviti alla nostra Newsletter</h2>
  <p>Ricevi il 10% di sconto sul primo ordine e offerte esclusive!</p>
  <input type="email" placeholder="la Tua email" style="padding:0.5rem;margin-right:0.6rem;" />
  <button style="padding:0.7rem 1.5rem;background-color:#008e37;color:white;border:none;"><strong>Iscriviti</button>
</section>


<section class="section" style="background-color:#fff;">
  <h2>Box Regalo & Abbonamenti</h2>
  <div class="products">
    <div class="product">
      <img src="https://aldoscoffee.com/cdn/shop/files/FrenchPressGiftBasketShopify.jpg?v=1715779754" alt="Coffee Gift Box">
      <h3>Gift Box Artigianale</h3>
      <p>Confezione elegante con 3 miscele selezionate. Perfetto per ogni occasione.</p>
    </div>
    <div class="product">
      <img src="https://www.caffefusari.it/storage/2024/12/cofanetto-degustazione-america-centrale-cdac_674ef0fda0a11.png" alt="Subscription">
      <h3>Abbonamento Mensile</h3>
      <p>Ricevi ogni mese un caffè diverso, fresco e sorprendente, direttamente a casa tua.</p>
    </div>
  </div>
</section>


<section class="section" id="about" style="background-color:#f9f6f1;">
  <h2>Il Nostro Impegno</h2>
  <p><strong>CrafterCoffee </strong>nasce con l’obiettivo di offrire caffè di qualità rispettando le persone e l’ambiente. Selezioniamo chicchi da piccole cooperative sostenibili e tostiamo in lotti artigianali. Ogni chicco racconta una storia. Dalle alture dell'Etiopia alle mani esperte dei nostri torrefattori artigianali, ci impegniamo a creare un caffè etico, sostenibile e dal gusto inconfondibile. La nostra missione è offrire qualità, rispetto per il pianeta e passione in ogni tazza</p>
</section>

<section class="behind-the-scenes">
  <div class="behind-the-scenes-content">
    <h2>Dietro le Quinte</h2>
    <p>Ogni chicco racconta una storia. Dalle alture dell'Etiopia alle mani esperte dei nostri torrefattori artigianali, ci impegniamo a creare un caffè etico, sostenibile e dal gusto inconfondibile. La nostra missione è offrire qualità, rispetto per il pianeta e passione in ogni tazza.</p>
    
    <div class="timeline">
      <div class="timeline-step">
        <h4>✔️ COLTIVAZIONE SOSTENIBILE</h4>
        <p>Collaboriamo con agricoltori che rispettano la biodiversità e praticano tecniche biologiche.</p>
      </div>
      <div class="timeline-step">
        <h4>✔️ LAVORAZIONE ARTIGIANALE</h4>
        <p>I nostri maestri torrefattori curano ogni chicco per garantire un profilo aromatico unico.</p>
      </div>
      <div class="timeline-step">
        <h4>✔️ CONFEZION ECOLOGICA</h4>
        <p>Utilizziamo packaging riciclabili e compostabili per ridurre l’impatto ambientale.</p>
      </div>
      <div class="timeline-step">
        <h4>✔️ <strong>SPEDIZIONE e CONSEGNA<strong></h4>
        <p>Consegna rapida e sicura in tutta Italia, con tracciamento e packaging a prova di freschezza.</p>
      </div>
    </div>

    <div class="video-container">
      <iframe src="https://vimeo.com/307133457" title="CraftCoffee - Video Story" allowfullscreen></iframe>
    </div>
  </div>
</section>


  <section class="section" style="background-color:#fffaf5;">
    <h2>Recensioni dei nostri clienti</h2>
    <div class="testimonial">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Cliente 1">
      <div class="testimonial-content">
        <div class="stars">★★★★★</div>
        <p>“Il miglior caffè che abbia mai bevuto. La qualità è eccezionale e arriva sempre fresco. Lo consiglio a chi cerca un'esperienza autentica. Ottimo servizio anche per i regali.”</p>
        <strong>- Laura M., 35 anni</strong>
      </div>
    </div>
    <div class="testimonial">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente 2">
      <div class="testimonial-content">
        <div class="stars">★★★★★</div>
        <p>“Servizio clienti impeccabile. Ho ricevuto un regalo con il mio primo ordine e una lettera scritta a mano. Una vera chicca per gli amanti del caffè artigianale.”</p>
        <strong>- Marco R., 29 anni</strong>
      </div>
    </div>
  </section>

<section class="section" style="background-color:#f2ebe2;">
  <h2>Offerta della Settimana</h2>
  <div class="product">
    <img src="https://joesgaragecoffee.com/content/uploads/2022/11/02-What-is-espresso-1024x512.jpg.webp" alt="Promo Coffee" />
    <h3>Single Origin - Etiopia</h3>
    <p><strong>-20%</strong> solo per pochi giorni! Gusto fruttato e floreale.</p>
    <button style="margin:1rem;background-color:#008e37;color:white;padding:0.8rem 1rem;border:none;"<strong><strong>Acquista Ora</button>
  </div>
</section>

  <footer>
    <p>&copy; 2025 CrafterCoffee. All rights reserved.</p>
    <p>Contattaci: info@craftcoffee.com</p>
  </footer>
</body>
</html>