opc_loader
​​
De Hoogste Kwaliteit
​​
Breed assortiment
​​
De Beste Service
​​
Persoonlijke Aandacht

Content Sjabloon

Typographie

Titel 1:

Lorem ipsum dolor sit amet

<header> <h1>zet hier je eigen tekst neer</h1> </header>

Titel 2:

Lorem ipsum dolor sit amet

<header> <h2>zet hier je eigen tekst neer</h2> </header>

Titel 3:

Lorem ipsum dolor sit amet

<header> <h3>zet hier je eigen tekst neer</h3> </header>

Paragraaf

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec pretium dui. Duis gravida placerat sapien. Nulla facilisi. Donec molestie volutpat nisi, ut faucibus dolor pharetra tincidunt. Nullam at gravida ipsum.

<p class="lead">zet hier je eigen tekst neer</p>

Buttons

Soorten buttons

<div class="button-group"> <a class="btn configuration_button_listing justify-content-xs-center justify-content-lg-start" href="/"> <span>button tekst hier</span> </a> </div> <div class="button-group"> <a class="btn configuration_button_general justify-content-xs-center justify-content-lg-start" href="/"> <span>button tekst hier</span> </a> </div> <div class="button-group"> <a class="btn configuration_button_productinfo justify-content-xs-center justify-content-lg-start" href="/"> <span>button tekst hier</span> </a> </div>

Twee buttons naast elkaar

<div class="button-group d-flex flex-xs-column flex-lg-row"> <a class="btn configuration_button_listing justify-content-xs-center justify-content-lg-start" href="/"> <span>button tekst hier</span> </a> <a class="btn configuration_button_general justify-content-xs-center justify-content-lg-start" href="/"> <span>button tekst hier</span> </a> </div>

Gecentreerde buttons

<div class="button-group d-flex justify-content-center flex-xs-column flex-lg-row"> <a class="btn configuration_button_listing justify-content-xs-center justify-content-lg-start" href="/"> <span>button tekst hier</span> </a> <a class="btn configuration_button_general justify-content-xs-center justify-content-lg-start" href="/"> <span>button tekst hier</span> </a> </div>

Button link

<div class="button-group d-flex justify-content-end"> <a class="btn btn-link link-icon-right justify-content-xs-center justify-content-lg-start" href="/"> <span>button tekst hier</span> <i class="icon icon-arrow-right8"<&ZeroWidthSpace;​</i> </a> </div>

Bulletlists

USP list

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
<div class="usp-list"> <ul> <li class="d-flex"> <i class="icon icon-checkmark">&ZeroWidthSpace;</i> <span>zet hier je tekst neer</span> </li> <li class="d-flex"> <i class="icon icon-checkmark">&ZeroWidthSpace;</i> <span>zet hier je tekst neer</span> </li> <li class="d-flex"> <i class="icon icon-checkmark">&ZeroWidthSpace;</i> <span>zet hier je tekst neer</span> </li> </ul> </div>

Unordered list

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
<ul> <li> <span>zet hier je tekst neer</span> </li> <li> <span>zet hier je tekst neer</span> </li> <li> <span>zet hier je tekst neer</span> </li> </ul>

Unordered link list met arrow icons

<ul class="no-bullets"> <li> <i class="icon icon-arrow-right5">&ZeroWidthSpace;</i> <a href="/"><span>zet hier je tekst neer</span></a> </li> <li> <i class="icon icon-arrow-right5">&ZeroWidthSpace;</i> <a href="/"><span>zet hier je tekst neer</span></a> </li> <li> <i class="icon icon-arrow-right5">&ZeroWidthSpace;</i> <a href="/"><span>zet hier je tekst neer</span></a> </li> </ul>

Contact

Contact information list

<div class="contact-info"> <a href="mailto:info@reisgemak-online.nl" class="d-flex flex-row"> <div> <i class="icon icon-envelop5">&ZeroWidthSpace;</i> </div> <div> <span>info@reisgemak-online.nl</span> </div> </a> <a href="tel:+31618119184" class="d-flex flex-row"> <div> <i class="icon icon-phone">&ZeroWidthSpace;</i> </div> <div> <span>+31 (0)6 - 181 19 184</span> </div> </a> <div class="whatsapp d-flex"> <a href="https://api.whatsapp.com/send?phone=0627323506" target="_blank" title="whatsapp-number" class="d-flex flex-row align-items-center"> <i class="whatsapp-icon">&ZeroWidthSpace;</i> <span>+31 (0)6 - 273 23 506</span> </a> </div> <p>Btw: NL850942822B01<br> KvK: 53597605</p> </div>

Overige Elementen

Extra CTA Blokken

GRATIS aansteker
GRATIS

aansteker bij aanschaf van een COBB BBQ

Cadeaubon
EXTRA

cadeaubon bij aanschaf van een COBB BBQ

<div class="CtaExtrasDiv" id="CtaExtrasDiv"> <div class="CtaExtrasDivRegel d-flex flex-column flex-lg-row"> <div class="CtaExtrasDivItem1"> <div class="CtaExtrasDivItem"> <div class="CtaExtrasDivItemLeft"><img alt="GRATIS aansteker" src="/images/GratisAansteker2.jpg" style="width: 250px;" /></div> <div class="CtaExtrasDivItemMiddle d-flex align-items-center"> <span class="d-flex align-items-center"><strong>GRATIS</strong></span> <p>plaats hier je tekst</p> </div> </div> </div> <div class="CtaExtrasDivItem1"> <div class="CtaExtrasDivItem"> <div class="CtaExtrasDivItemLeft"><img alt="Cadeaubon" src="/images/GratisCadeaubon.jpg" style="width: 250px;" /></div> <div class="CtaExtrasDivItemMiddle d-flex align-items-center"> <span class="d-flex align-items-center"><strong>EXTRA</strong></span> <p>plaats hier je tekst</p> </div> </div> </div> </div> </div>

Warning tekst

Let op:

Om de code te kunnen gebruiken dient u ook de toilettas in de winkelwagen te plaatsen. Daarna zal de couponcode dit bedrag weer als korting verrekenen.

<div class="warning d-flex align-items-center"> <span class="warning-text d-flex align-items-center">Let op:</span> <p>warning tekst hier plaatsen</p> </div>

Kleuren

Black

Night Rider

Dim Grey

Dark Grey

Whisper

White Smoke 2

White Smoke

White

Eden

Gulf Stream

Downly

Morning Glory

Parsley

Light Green

Fruit Salad

Granny Apple

Crusta

Mandys Pink

Watusi

Old Lace

Summer Sky

Light Sky Blue

Pattens Blue

Alice Blue

Turbo

Kournikova

Cream Brulee

Floral White

Sunflower

Golden Sand

Pale Goldenrod

Promenade

Cardinal

Amaranth

Mauvelous

Pink Lace

Facebook 1

Facebook 2

Facebook 3

Facebook 4

Instagram 1

Instagram 2

Instagram 3

Instagram 4

Twitter 1

Twitter 2

Twitter 3

Twitter 4

Om een kleur te gebruiken in de CSS kan je een van de volgende root variabelen gebruiken:

:root { --white: #FFF; --white-smoke: #F8F8F8; --white-smoke-2: #F0F0F0; --whisper: #E5E5E5; --dark-grey: #ABABAB; --dim-grey: #6E6E6E; --night-rider: #222; --black: #000; --eden: #195B51; --gulf-stream: #76B9B5; --downy: #73C7C7; --morning-glory: #8CDCDC; --parsley: #2A5B2C; --light-green: #E1F8E4; --fruit-salad: #45C456; --granny-apple: #CCF3D7; --crusta: #E78953; --mandys-pink: #F0B491; --watusi: #F5CFB9; --old-lace: #FCF6E8; --summer-sky: #37A6EC; --light-sky-blue: #7FC6F3; --pattens-blue: #BDE1F9; --alice-blue: #F2FAFF; --turbo: #FFC61B; --kournikova: #FFD149; --cream-brulee: #FFE7A1; --floral-white: #FFFDF7; --sunflower: #D9C410; --golden-sand: #E7D966; --pale-goldenrod: #F3ECB1; --promenade: #F5F3E2; --cardinal: #B61534; --amaranth: #D43553; --mauvelous: #E997A7; --pink-lace: #F7CED6; --facebook-1: #3B5998; --facebook-2: #8B9DC3; --facebook-3: #DFE3EE; --facebook-4: #F7F7F7; --twitter-1: #0084B4; --twitter-2: #00ACED; --twitter-3: #C0DEED; --twitter-4: #1DCAFF; --instagram-1: #C32AA3; --instagram-2: #4C68D7; --instagram-3: #FBAD50; --instagram-4: #FCCC63; }

Stel je wilt bijvoorbeeld de body een witte achtergrond geven, dan moet je het volgende schrijven in CSS:

body { background-color: var(--white); }