NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Earthy Natural

Organisch designsysteem met zand, klei en salie als basis, organische afgeronde vormen en één elektrisch teal-accent voor de actie. Voor boerderijwinkels, eco-merken, food en lifestyle.

Bekijk op volledig scherm ↗

Thema 08 · organisch en digitaal

Earthy Natural

Grond onder de nagels, cijfers op orde. Warme aardetinten dragen alles, teal wijst waar je bestelt.

Achtergrond · zand#EFE6D8
Oppervlak#F8F3EA
Tekst · aarde#2F2A24
Gedempt#6B6257
Lijn#D8CBB6
Accent · teal#00877F
Accent 2 · klei#B5653F
Signaal · salie#7D8F6A
Houten kist met bieten, boerenkool, wortels en pompoenen op een boerentafel

Boerderij De Hooge Weide · Twello

Groentekist week 42

  • Bieten met loof
  • Boerenkool
  • Winterpeen
  • Flespompoen
  • Salie, vers gesneden
€ 24,50ophalen vrijdag 16:00 tot 18:30

Letters · zaadzakje

Oogst van deze week

Zodiak voor koppen, Manrope voor alles wat je moet kunnen lezen: van herkomst tot houdbaarheid.

Kop
Zodiak 700 · 40
Intro
Zodiak 400 · 22
Tekst
Manrope 400 · 16
Label
Manrope 700 · 12

Knoppen en invoer

Labels en kaart

Op voorraadBiologischSeizoenNieuw
Abonnement zonder vastzittenElke week of om de week, stopzetten wanneer je wilt.

Past bij boerderijwinkels en groentetassen · eco- en zero-waste-merken · bakkerijen en lunchrooms · tuincentra · natuurlijke verzorging

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Geen JavaScript nodig.
<!-- Earthy Natural · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tea"><div class="tea__in">
  <div class="tea__top">
    <div class="tea__intro">
      <p class="tea__eye">Thema 08 · organisch en digitaal</p>
      <h3 class="tea__name">Earthy <i>Natural</i></h3>
      <p class="tea__mood">Grond onder de nagels, cijfers op orde. Warme aardetinten dragen alles, teal wijst waar je bestelt.</p>
      <div class="tea__stones">
        <div class="tea__st" style="--c:#EFE6D8;--r:58% 42% 46% 54% / 52% 48% 52% 48%"><i></i><b>Achtergrond · zand</b><code>#EFE6D8</code></div>
        <div class="tea__st" style="--c:#F8F3EA;--r:44% 56% 60% 40% / 50% 44% 56% 50%"><i></i><b>Oppervlak</b><code>#F8F3EA</code></div>
        <div class="tea__st" style="--c:#2F2A24;--r:50% 50% 40% 60% / 60% 46% 54% 40%"><i></i><b>Tekst · aarde</b><code>#2F2A24</code></div>
        <div class="tea__st" style="--c:#6B6257;--r:62% 38% 52% 48% / 44% 58% 42% 56%"><i></i><b>Gedempt</b><code>#6B6257</code></div>
        <div class="tea__st" style="--c:#D8CBB6;--r:40% 60% 46% 54% / 56% 42% 58% 44%"><i></i><b>Lijn</b><code>#D8CBB6</code></div>
        <div class="tea__st" style="--c:#00877F;--r:54% 46% 58% 42% / 46% 56% 44% 54%"><i></i><b>Accent · teal</b><code>#00877F</code></div>
        <div class="tea__st" style="--c:#B5653F;--r:46% 54% 42% 58% / 58% 40% 60% 42%"><i></i><b>Accent 2 · klei</b><code>#B5653F</code></div>
        <div class="tea__st" style="--c:#7D8F6A;--r:56% 44% 50% 50% / 42% 60% 40% 58%"><i></i><b>Signaal · salie</b><code>#7D8F6A</code></div>
      </div>
    </div>
    <div class="tea__hero">
      <img class="tea__img" src="https://neddev.com/lab-media/thm-earthy-1.webp" alt="Houten kist met bieten, boerenkool, wortels en pompoenen op een boerentafel" loading="lazy">
      <div class="tea__hcard">
        <p class="tea__hloc">Boerderij De Hooge Weide · Twello</p>
        <p class="tea__ht">Groentekist week 42</p>
        <ul class="tea__hlist"><li>Bieten met loof</li><li>Boerenkool</li><li>Winterpeen</li><li>Flespompoen</li><li>Salie, vers gesneden</li></ul>
        <div class="tea__hfoot"><span><b>€ 24,50</b><small>ophalen vrijdag 16:00 tot 18:30</small></span><button class="tea__btn tea__btn--p" type="button">Bestel kist</button></div>
      </div>
    </div>
  </div>
  <div class="tea__row">
    <div class="tea__pack">
      <p class="tea__lbl">Letters · zaadzakje</p>
      <p class="tea__t1">Oogst van deze week</p>
      <p class="tea__t2">Zodiak voor koppen, Manrope voor alles wat je moet kunnen lezen: van herkomst tot houdbaarheid.</p>
      <dl class="tea__specs"><div><dt>Kop</dt><dd>Zodiak 700 · 40</dd></div><div><dt>Intro</dt><dd>Zodiak 400 · 22</dd></div><div><dt>Tekst</dt><dd>Manrope 400 · 16</dd></div><div><dt>Label</dt><dd>Manrope 700 · 12</dd></div></dl>
    </div>
    <div class="tea__ui">
      <p class="tea__lbl">Knoppen en invoer</p>
      <div class="tea__btns">
        <button class="tea__btn tea__btn--p" type="button">In mandje</button>
        <button class="tea__btn tea__btn--s" type="button">Bekijk oogst</button>
        <button class="tea__btn tea__btn--g" type="button">Recepten</button>
        <button class="tea__btn tea__btn--p is-hover" type="button">Hover</button>
      </div>
      <div class="tea__form">
        <label class="tea__field"><span>Postcode</span><input class="tea__input" type="text" value="7391 AB"></label>
        <label class="tea__field"><span>Ophaalpunt</span><select class="tea__sel"><option>Boerderijwinkel Twello</option><option>Markt Deventer · za</option></select></label>
      </div>
    </div>
    <div class="tea__side">
      <p class="tea__lbl">Labels en kaart</p>
      <div class="tea__badges"><span class="tea__bdg tea__bdg--s">Op voorraad</span><span class="tea__bdg tea__bdg--c">Biologisch</span><span class="tea__bdg">Seizoen</span><span class="tea__bdg tea__bdg--t">Nieuw</span></div>
      <div class="tea__card">
        <span class="tea__card-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21V10"/><path d="M12 13c-4 0-6-3-6-7 4 0 6 3 6 7z"/><path d="M12 11c0-3.5 2-6 6-6 0 3.5-2 6-6 6z"/></svg></span>
        <span><b>Abonnement zonder vastzitten</b><small>Elke week of om de week, stopzetten wanneer je wilt.</small></span>
      </div>
    </div>
  </div>
  <p class="tea__fit"><b>Past bij</b> boerderijwinkels en groentetassen · eco- en zero-waste-merken · bakkerijen en lunchrooms · tuincentra · natuurlijke verzorging</p>
</div></div>
</div>

Meer uit thema's

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →