Industrial Nieuw
Beton, staal en één oranje signaalkleur, opgebouwd als een technisch tekenblad met maatlijnen, kenmerkvelden en waarschuwingsstrepen. Voor bouw, staalbouw, installatie en logistiek.
Thema
Industrial
Blad07 / 12
Rev.C
Datum07-10-2026
Stemming
Robuust en eerlijk. Materialen zoals ze zijn, één signaalkleur voor wat ertoe doet.
A · Kleurcodes
achtergrond
#CFCCC6oppervlak
#E4E2DDtekst
#1B1D1Fgedempt
#5C6066lijn
#9A9890accent
#FF6A13accent-2
#3E4A55signaal
#F2C200B · Typografie
HEA 300
| 64 | PORTAALKRAAN |
| 32 | Hal 4, Moerdijk |
| 16 | Staalconstructie 42 ton |
| 14 | Montage in 9 werkdagen. |
| 11 | REF. SV-2026-118 |
Khand 600/700 · Manrope 400/600 · JetBrains Mono
C · Bediening
VCA**EN 1090 EXC3Levertijd 6 wk
Staalbouw VisserDienstenProjectenWerkplaatsVacatures0168 34 12 90
Staalbouw · Moerdijk sinds 1987
Hallen en kranen tot 60 meter overspanning.
Engineering, productie en montage onder één dak. Eigen werkplaats van 4.200 m² aan het Havenweg-terrein.
Past bij aannemers · staal- en machinebouw · installateurs · transport en logistiek · sloop en grondverzet
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Geen JavaScript nodig.
<!-- Industrial · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tin-thm">
<div class="tin-hazard" aria-hidden="true"></div>
<div class="tin-sheet">
<div class="tin-ruler" aria-hidden="true"></div>
<div class="tin-titleblock">
<div class="tin-tb tin-tb--name"><span>Thema</span><h3>Industrial</h3></div>
<div class="tin-tb"><span>Blad</span><b>07 / 12</b></div>
<div class="tin-tb"><span>Rev.</span><b>C</b></div>
<div class="tin-tb"><span>Datum</span><b>07-10-2026</b></div>
<div class="tin-tb tin-tb--mood"><span>Stemming</span><p>Robuust en eerlijk. Materialen zoals ze zijn, één signaalkleur voor wat ertoe doet.</p></div>
</div>
<div class="tin-grid">
<div class="tin-panel tin-pal"><i class="tin-bolt"></i><p class="tin-lbl">A · Kleurcodes</p>
<div class="tin-chips">
<div><i style="background:var(--tin-bg)"></i><b>achtergrond</b><code>#CFCCC6</code></div>
<div><i style="background:var(--tin-surface)"></i><b>oppervlak</b><code>#E4E2DD</code></div>
<div><i style="background:var(--tin-text)"></i><b>tekst</b><code>#1B1D1F</code></div>
<div><i style="background:var(--tin-muted)"></i><b>gedempt</b><code>#5C6066</code></div>
<div><i style="background:var(--tin-line)"></i><b>lijn</b><code>#9A9890</code></div>
<div><i style="background:var(--tin-accent)"></i><b>accent</b><code>#FF6A13</code></div>
<div><i style="background:var(--tin-accent-2)"></i><b>accent-2</b><code>#3E4A55</code></div>
<div><i style="background:var(--tin-signal)"></i><b>signaal</b><code>#F2C200</code></div>
</div>
</div>
<div class="tin-panel tin-type"><i class="tin-bolt"></i><p class="tin-lbl">B · Typografie</p>
<div class="tin-type__big">HEA 300</div>
<table class="tin-tbl"><tr><td>64</td><td style="font:700 34px/1 var(--tin-display)">PORTAALKRAAN</td></tr><tr><td>32</td><td style="font:600 24px/1 var(--tin-display)">Hal 4, Moerdijk</td></tr><tr><td>16</td><td style="font:600 16px var(--tin-body)">Staalconstructie 42 ton</td></tr><tr><td>14</td><td style="font-size:14px">Montage in 9 werkdagen.</td></tr><tr><td>11</td><td style="font:500 11px 'JetBrains Mono',monospace">REF. SV-2026-118</td></tr></table>
<p class="tin-note">Khand 600/700 · Manrope 400/600 · JetBrains Mono</p>
</div>
<div class="tin-panel tin-ui"><i class="tin-bolt"></i><p class="tin-lbl">C · Bediening</p>
<div class="tin-btns"><button class="tin-btn tin-btn--p" type="button">Offerte aanvragen</button><button class="tin-btn tin-btn--s" type="button">Projecten</button><button class="tin-btn tin-btn--g" type="button">Download specs (PDF)</button></div>
<div class="tin-fields"><label class="tin-f"><span>Overspanning (m)</span><input type="text" inputmode="decimal" placeholder="24,0"></label><label class="tin-f"><span>Toepassing</span><select><option>Bedrijfshal</option><option>Mezzanine</option><option>Overkapping</option></select></label></div>
<div class="tin-badges"><span class="tin-bd tin-bd--ok">VCA**</span><span class="tin-bd">EN 1090 EXC3</span><span class="tin-bd tin-bd--warn">Levertijd 6 wk</span></div>
</div>
<div class="tin-panel tin-card"><i class="tin-bolt"></i>
<div class="tin-card__head"><span>Project 118</span><span>Gereed</span></div>
<h4>Distributiehal Heijmansweg</h4>
<dl><div><dt>Staal</dt><dd>412 t</dd></div><div><dt>Opp.</dt><dd>18.600 m²</dd></div><div><dt>Bouwtijd</dt><dd>14 wk</dd></div></dl>
<a href="#" class="tin-lnk">Bekijk project</a>
</div>
<div class="tin-panel tin-hero">
<div class="tin-hero__nav"><strong><i></i>Staalbouw Visser</strong><span>Diensten</span><span>Projecten</span><span>Werkplaats</span><span>Vacatures</span><span class="tin-tel">0168 34 12 90</span></div>
<div class="tin-hero__in">
<div><p class="tin-lbl">Staalbouw · Moerdijk sinds 1987</p><h4>Hallen en kranen tot 60 meter overspanning.</h4><p>Engineering, productie en montage onder één dak. Eigen werkplaats van 4.200 m² aan het Havenweg-terrein.</p><button class="tin-btn tin-btn--p" type="button">Plan een bouwteamgesprek</button></div>
<div class="tin-dim" aria-hidden="true"><span class="tin-dim__line"><b>60.000</b></span><div class="tin-dim__truss"></div></div>
</div>
</div>
</div>
<p class="tin-fit"><b>Past bij</b> aannemers · staal- en machinebouw · installateurs · transport en logistiek · sloop en grondverzet</p>
</div>
</div>
</div>/* Industrial · NedDev · eigen werk. */
/* fonts (Fontshare): khand@500,600,700 + manrope@400,500,600,700 */
.tin-thm{--tin-bg:#CFCCC6;--tin-surface:#E4E2DD;--tin-text:#1B1D1F;--tin-muted:#5C6066;--tin-line:#9A9890;--tin-accent:#FF6A13;--tin-accent-2:#3E4A55;--tin-signal:#F2C200;--tin-radius:2px;--tin-display:'Khand',sans-serif;--tin-body:'Manrope',sans-serif;--tin-mono:'JetBrains Mono',monospace;container:tin/inline-size;color:var(--tin-text);font:400 14px/1.5 var(--tin-body);background:radial-gradient(rgba(27,29,31,.07) 1px,transparent 1.2px) 0 0/7px 7px,var(--tin-bg)}
.tin-thm,.tin-thm *{box-sizing:border-box}
.tin-hazard{height:14px;background:repeating-linear-gradient(-45deg,var(--tin-text) 0 14px,var(--tin-signal) 14px 28px)}
.tin-sheet{position:relative;padding:22px 26px 18px 46px}
.tin-ruler{position:absolute;left:14px;top:22px;bottom:18px;width:16px;border-right:1px solid var(--tin-text);background:repeating-linear-gradient(180deg,var(--tin-text) 0 1px,transparent 1px 10px) right/6px 100% no-repeat,repeating-linear-gradient(180deg,var(--tin-text) 0 1px,transparent 1px 50px) right/14px 100% no-repeat}
.tin-titleblock{display:grid;grid-template-columns:1.4fr .5fr .4fr .6fr 2fr;border:2px solid var(--tin-text);background:var(--tin-surface);margin-bottom:16px}
.tin-tb{padding:8px 12px;border-right:1px solid var(--tin-text);min-width:0}
.tin-tb:last-child{border-right:0}
.tin-tb span{display:block;font:500 10px var(--tin-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tin-muted)}
.tin-tb b{font:600 22px/1.3 var(--tin-display);font-variant-numeric:tabular-nums}
.tin-tb h3{margin:0;font:700 52px/.9 var(--tin-display);text-transform:uppercase;letter-spacing:.01em}
.tin-tb p{margin:2px 0 0;font-size:14px;line-height:1.4}
.tin-tb--name{background:var(--tin-accent)}
.tin-tb--name span{color:var(--tin-text)}
.tin-grid{display:grid;grid-template-columns:1.1fr 1fr 1.1fr .9fr;gap:14px}
.tin-panel{position:relative;background:var(--tin-surface);border:1px solid var(--tin-text);border-radius:var(--tin-radius);padding:14px 16px;min-width:0}
.tin-bolt{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e9e7e2,#6d7177);top:6px;right:6px}
.tin-lbl{margin:0 0 10px;font:600 11px var(--tin-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tin-accent-2)}
.tin-chips{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--tin-line)}
.tin-chips div{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:6px 0;border-bottom:1px solid var(--tin-line);min-width:0}
.tin-chips i{grid-row:span 2;width:28px;height:28px;border:1px solid var(--tin-text)}
.tin-chips b{font-size:12px;font-weight:600;line-height:1.2}
.tin-chips code{font:500 10px var(--tin-mono);color:var(--tin-muted)}
.tin-type__big{font:700 76px/.85 var(--tin-display);letter-spacing:-.01em;color:var(--tin-accent-2);border-bottom:2px solid var(--tin-text);padding-bottom:4px;margin-bottom:4px}
.tin-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.tin-tbl td{padding:5px 0;border-bottom:1px solid var(--tin-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:baseline}
.tin-tbl td:first-child{width:28px;font:500 10px var(--tin-mono);color:var(--tin-muted)}
.tin-note{margin:8px 0 0;font:500 10px var(--tin-mono);color:var(--tin-muted)}
.tin-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tin-btn{font:600 15px/1 var(--tin-display);letter-spacing:.06em;text-transform:uppercase;padding:12px 16px 10px;border:2px solid var(--tin-text);border-radius:var(--tin-radius);cursor:pointer;transition:background .15s,color .15s}
.tin-btn--p{background:var(--tin-accent);color:var(--tin-text);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);padding-right:22px}
.tin-btn--p:hover{background:var(--tin-text);color:var(--tin-accent)}
.tin-btn--s{background:var(--tin-accent-2);border-color:var(--tin-accent-2);color:var(--tin-surface)}
.tin-btn--s:hover{background:var(--tin-text);border-color:var(--tin-text)}
.tin-btn--g{background:none;border-color:transparent;padding-left:0;font:600 12px/1 var(--tin-mono);text-transform:none;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}
.tin-btn--g:hover{color:var(--tin-accent);text-decoration-thickness:2px}
.tin-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.tin-f{min-width:0;display:flex;flex-direction:column;gap:3px;font:500 10px var(--tin-mono);text-transform:uppercase;color:var(--tin-muted)}
.tin-f input,.tin-f select{font:600 15px var(--tin-body);color:var(--tin-text);background:#F1F0EC;border:1px solid var(--tin-text);border-left:4px solid var(--tin-accent-2);border-radius:var(--tin-radius);padding:9px 10px;outline:0;min-width:0;font-variant-numeric:tabular-nums}
.tin-f input:focus,.tin-f select:focus{border-left-color:var(--tin-accent)}
.tin-badges{display:flex;flex-wrap:wrap;gap:6px}
.tin-bd{font:600 11px/1 var(--tin-mono);padding:5px 7px;border:1px solid var(--tin-text);background:#F1F0EC}
.tin-bd--ok{background:var(--tin-text);color:var(--tin-signal)}
.tin-bd--warn{background:var(--tin-signal)}
.tin-card{display:flex;flex-direction:column;background:var(--tin-accent-2);color:var(--tin-surface);border-color:var(--tin-accent-2)}
.tin-card__head{display:flex;justify-content:space-between;font:500 10px var(--tin-mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;padding-right:12px}
.tin-card__head span:last-child{color:var(--tin-signal)}
.tin-card h4{margin:0 0 12px;font:600 24px/1 var(--tin-display)}
.tin-card dl{margin:0 0 12px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(228,226,221,.3)}
.tin-card dl div{padding:8px 6px 0 0}
.tin-card dt{font:500 10px var(--tin-mono);opacity:.75}
.tin-card dd{margin:2px 0 0;font:600 18px var(--tin-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.tin-lnk{margin-top:auto;color:var(--tin-accent);font:600 14px var(--tin-display);text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
.tin-lnk::after{content:" \2192"}
.tin-lnk:hover{color:var(--tin-signal)}
.tin-hero{grid-column:1/-1;padding:0;background:var(--tin-text);color:var(--tin-surface);border-color:var(--tin-text)}
.tin-hero__nav{display:flex;align-items:center;gap:22px;padding:12px 18px;border-bottom:1px solid #3a3d41;font:600 15px var(--tin-display);letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap}
.tin-hero__nav strong{display:flex;align-items:center;gap:8px;font:700 20px var(--tin-display);margin-right:auto}
.tin-hero__nav strong i{width:14px;height:14px;background:var(--tin-accent);clip-path:polygon(0 0,100% 0,100% 100%,60% 100%,60% 40%,0 40%)}
.tin-tel{background:var(--tin-accent);color:var(--tin-text);padding:5px 9px;font-family:var(--tin-mono);font-size:12px}
.tin-hero__in{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;padding:18px 18px 20px;align-items:center}
.tin-hero .tin-lbl{color:var(--tin-signal)}
.tin-hero h4{margin:0 0 8px;font:700 clamp(30px,3.6cqw,44px)/.95 var(--tin-display);text-transform:uppercase}
.tin-hero p:not(.tin-lbl){margin:0 0 14px;color:#b9bcbf;max-width:52ch}
.tin-hero .tin-btn--p{border-color:var(--tin-accent)}
.tin-dim{position:relative;height:130px}
.tin-dim__line{position:absolute;left:0;right:0;top:4px;height:18px;border-left:1px solid var(--tin-accent);border-right:1px solid var(--tin-accent);display:flex;align-items:center;justify-content:center}
.tin-dim__line::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--tin-accent)}
.tin-dim__line b{position:relative;background:var(--tin-text);padding:0 8px;font:500 12px var(--tin-mono);color:var(--tin-accent)}
.tin-dim__truss{position:absolute;left:0;right:0;top:40px;height:70px;border-top:3px solid #d0d2d4;border-bottom:3px solid #d0d2d4;background:repeating-linear-gradient(60deg,transparent 0 22px,#d0d2d4 22px 25px),repeating-linear-gradient(-60deg,transparent 0 22px,#8e9296 22px 24px)}
.tin-fit{margin:14px 0 0;font:500 11px var(--tin-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--tin-muted)}
.tin-fit b{color:var(--tin-text)}
@container tin (max-width:1000px){.tin-grid{grid-template-columns:1fr 1fr}.tin-titleblock{grid-template-columns:1.4fr .6fr .4fr .7fr}.tin-tb--mood{grid-column:1/-1;border-top:1px solid var(--tin-text)}}
@container tin (max-width:620px){.tin-sheet{padding:16px 14px 14px 34px}.tin-ruler{left:8px;width:12px}.tin-grid,.tin-fields,.tin-hero__in{grid-template-columns:1fr}.tin-titleblock{grid-template-columns:1fr 1fr 1fr}.tin-tb--name{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--tin-text)}.tin-tb h3{font-size:42px}.tin-hero__nav span:not(.tin-tel){display:none}.tin-type__big{font-size:60px}.tin-tbl td{white-space:normal}}
@media (prefers-reduced-motion:reduce){.tin-btn{transition:none}}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 →