Crafter Coffee by @Darkness977 - Codewith.it

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

Referenze

minImposta il valore numerico o temporale minimo per un elemento input
postDefinisce un metodo di invio di dati al server
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<tr>Definisce le righe di una tabella (rows)
multipleConverte in lista a selezione multipla

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

rectangle drawning

Heads Or Tails Random Tally

Donazioni per il compleanno di Emm

portfolio-Davide-Cantore.html

obbiettivi futuri

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>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>