Favourites
There are no products in your favourites.
Cart
You do no have any products in your shopping bag.
Total
Incl. VAT
€ 0,00
Shopping cart Continue shopping

Components

Headings

Code

Heading 1

Heading 2

Heading 3

Heading 4

                                        
                                            <div class="container">
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
</div>                                        
                                    

Paragraphs

Code

Mauris elementum, mi non hendrerit vulputate, lacus quam laoreet massa, et convallis tortor justo vel arcu.

Duis interdum elit vel nulla porttitor volutpat. Aenean nec purus at erat volutpat lobortis non non erat.

                                        
                                            <div class="container">
    <p>Mauris elementum, mi non hendrerit vulputate, lacus quam laoreet massa, et convallis tortor justo vel arcu.</p>
    <p>Duis interdum elit vel nulla porttitor volutpat. Aenean nec purus at erat volutpat lobortis non non erat. </p>
</div>                                        
                                    

Panel-content

Code

How it started

iBi met de volgende gedachtegang en naar een door eigen zeldzame ervaring opgedaan idee: In de zomer van 2017, op zondag 2 juli omstreeks 15:00 in de middag, zijn we tijdens een vaartocht bij het eiland Ibiza in de Middellandse zee een groep dolfijnen tegen gekomen. Na deze dolfijnen een korte tijd gevolgd te hebben, zij zwommen namelijk in een bepaalde richting, merkten wij een canvas doek op waar een dier in vastzat en aan het spartelen was.

Toen we dichterbij kwamen zagen we dat er een zeeschildpad in het canvasdoek vast zat. We hebben onze boot hierop naast het doek gemanoeuvreerd en hebben het doek en de zeeschildpad op het achterdek aan boord gehaald. De zeeschildpad zat geheel vast in dit plastic doek, zijn zwemvliezen en nek zaten hierin vast. We hebben de zeeschildpad hierop op zijn rug gelegd en hebben een mes gepakt en zijn zorgvuldig begonnen met het lossnijden en verwijderen van het canvas waarin de zeeschildpad gevangen zat. Na ongeveer 5 minuten hadden we alles voorzichtig vrij gesneden en verwijderd en hebben we de zeeschildpad een kus op zijn schild gegeven en hem een fijn leven toegewenst en hierna weer voorzichtig in het water gelaten.
                                        
                                            <div class="container">
    <div class="row">
        <div class="col-70 margin-auto">
            <div class="panel content">
                <div class="title">
                    <h2><span class="emblem"></span><span class="alt-font">How it </span> started</h2>
                </div>
                <div>
                    iBi met de volgende gedachtegang en naar een door eigen zeldzame ervaring opgedaan
                    idee: In de zomer van 2017, op zondag 2 juli omstreeks 15:00 in de middag, zijn we tijdens een vaartocht bij het eiland Ibiza in de Middellandse zee een groep dolfijnen tegen gekomen.
                    Na deze dolfijnen een korte tijd gevolgd te hebben, zij zwommen namelijk in een bepaalde richting, merkten wij een canvas doek op waar een dier in vastzat en aan het spartelen was.
                    <br/><br/>
                    Toen we dichterbij kwamen zagen we dat er een zeeschildpad in het canvasdoek vast zat.
                    We hebben onze boot hierop naast het doek gemanoeuvreerd en hebben het doek en de zeeschildpad op het achterdek aan boord gehaald.
                    De zeeschildpad zat geheel vast in dit plastic doek, zijn zwemvliezen en nek zaten hierin vast.
                    We hebben de zeeschildpad hierop op zijn rug gelegd en hebben een mes gepakt en zijn zorgvuldig begonnen met het lossnijden en verwijderen van het canvas waarin de zeeschildpad gevangen zat.
                    Na ongeveer 5 minuten hadden we alles voorzichtig vrij gesneden en verwijderd en hebben we de zeeschildpad een kus op zijn schild gegeven en hem een fijn leven toegewenst en hierna weer voorzichtig in het water gelaten.
                </div>
                <div class="buttons">
                    <a class="btn arrow" href="#">Lees verder</a>
                </div>
            </div>
        </div>
    </div>
</div>                                        
                                    

Breadcrumbs

Code
                                        
                                            <nav class="navigation-breadcrumbs">
    <div class="container">
        <span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
            <a class="crumble first" itemprop="url" href="#">
                <span itemprop="title">Home</span>
            </a>
        </span>
        <span class="crumbleSep"> › </span>
            <span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
            <a class="crumble last" itemprop="url" href="#"><span itemprop="title">Last breadcrumb</span>
            </a>
        </span>
    </div>
</nav>                                        
                                    

Buttons

Code
                                        
                                            <div class="container">
    <a class="btn" href="">Default</a>
    <a class="btn arrow" href="">Arrow</a>
    <a class="btn small" href="">Small</a>
    <a class="btn green" href="">Green Default</a>
    <a class="btn green arrow" href="">Green Arrow</a>
</div>                                        
                                    

Collapse-item

Code
                                        
                                            <div class="container">
    <div class="collapse-wrapper">
        <ul>
            <li class="collapse-item">
                <a class="collapse-title">
                    <span class="on"><i class="fas fa-chevron-down"></i></span>
                    <span><i class="fas fa-chevron-up"></i></span>
                    Dit is de titel van het item wat kan collapsen
                </a>
                <div class="collapse-info">
                    <p>Dit is de info in de collapse</p>
                </div>
            </li>
            <li class="collapse-item">
                <a class="collapse-title">
                    <span class="on"><i class="fas fa-chevron-down"></i></span>
                    <span><i class="fas fa-chevron-up"></i></span>
                    Dit is de titel van het item wat kan collapsen
                </a>
                <div class="collapse-info">
                    <p>Dit is de info in de collapse</p>
                </div>
            </li>
        </ul>
    </div>
</div>                                        
                                    

Listings

Code
  • List
  • List
  1. List
  2. List
  • Verzending
  • Retour sturen
                                        
                                            <div class="container">
    <ul>
        <li>List</li>
        <li>List</li>
    </ul>
    <ol>
        <li>List</li>
        <li>List</li>
    </ol>
    <ul class="has-icon">
        <li><i class="far fa-paper-plane"></i> Verzending</li>
        <li><i class="far fa-paper-plane"></i> Retour sturen</li>
    </ul>
</div>                                        
                                    

Item

Code

Titel

€ 20,00

Titel

€ 20,00

Wishlist

Titel

Maat: 92/98 Kleur: Groen € 20,00
Verwijderen Naar Shopping Bag

Newsletter

Nieuwsbrief ontvangen?

                                        
                                            <div class="container">
    <div class="row">
        <div class="col-33 s-col-50">
            <div class="item" data-link="#">
                <div class="image" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80')"></div>
                <div class="content">
                    <h2>Titel</h2>
                    <span>&euro; 20,00</span>
                </div>
            </div>
        </div>
        <div class="col-33 s-col-50">
            <div class="item" data-link="#">
                <div class="image" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80')"></div>
                <div class="content" data-text="Meerdere kleuren beschikbaar!">
                    <h2>Titel</h2>
                    <span>&euro; 20,00</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <h3>Wishlist</h3>
    <div class="row">
        <div class="col-100">
            <div class="wishlist-item" data-link="#">
                <div class="image" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80')"></div>
                <div class="content" data-mh="wishlist-content">
                    <h3>Titel</h3>
                    <span class="size">Maat: 92/98</span>
                    <span class="size">Kleur: Groen</span>
                    <span>&euro; 20,00</span>
                    <hr/>
                    <a class="action">
                        <i class="fal fa-trash"></i>
                        Verwijderen
                    </a>
                    <a class="action" href="">
                        <i class="far fa-shopping-bag"></i>
                        Naar Shopping Bag
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <h3>Newsletter</h3>
    <div class="row">
        <div class="col-100">
            <div class="panel">
                <h3>Nieuwsbrief ontvangen?</h3>
                <div class="form-item-container cf">
                    <input type="checkbox" id="newsletter-checkbox" name="newsletter-checkbox" class="form-input"/>
                    <label for="newsletter-checkbox" title="newsletter-checkbox"><span></span>Ja, ik ontvang graag de nieuwsbrief</label>
                </div>
            </div>
        </div>
    </div>
</div>                                        
                                    

Product-slider

Code

Categorieën

Titel 1

€ 20,00

Titel 2

€ 20,00

Titel 3

€ 20,00

Titel 4

€ 20,00

Titel 5

€ 20,00

Titel 6

€ 20,00
                                        
                                            <div class="product-slider-container">
    <div class="container">
        <div class="row">
            <div class="col-100 align-center">
                <h2 class="title">Categorieën</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-100">
                <div class="product-slider-nav">
                    <button class="btn open is-active" data-cat-id="1">Vestjes</button>
                    <button class="btn open" data-cat-id="2">Pyjama's</button>
                    <button class="btn open" data-cat-id="3">Rompertjes</button>
                </div>
            </div>
        </div>
    </div>
    <div class="product-slider-arrows"></div>
    <div class="product-slider-loader"></div>
    <div class="product-slider">
        <div class="item" data-link="#" data-cat-id="1">
            <div class="image" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80')"></div>
            <div class="content">
                <h2>Titel 1</h2>
                <span>&euro; 20,00</span>
            </div>
        </div>
        <div class="item" data-link="#" data-cat-id="1">
            <div class="image" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80')"></div>
            <div class="content">
                <h2>Titel 2</h2>
                <span>&euro; 20,00</span>
            </div>
        </div>
        <div class="item" data-link="#" data-cat-id="1">
            <div class="image" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80')"></div>
            <div class="content">
                <h2>Titel 3</h2>
                <span>&euro; 20,00</span>
            </div>
        </div>
        <div class="item" data-link="#" data-cat-id="1">
            <div class="image" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80')"></div>
            <div class="content">
                <h2>Titel 4</h2>
                <span>&euro; 20,00</span>
            </div>
        </div>
        <div class="item" data-link="#" data-cat-id="2">
            <div class="image" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80')"></div>
            <div class="content">
                <h2>Titel 5</h2>
                <span>&euro; 20,00</span>
            </div>
        </div>
        <div class="item" data-link="#" data-cat-id="3">
            <div class="image" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80')"></div>
            <div class="content">
                <h2>Titel 6</h2>
                <span>&euro; 20,00</span>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-100 align-center">
                <a href="#" class="btn arrow product-slider-btn">Bekijk alles</a>
            </div>
        </div>
    </div>
</div>                                        
                                    

Select-color

Code
                                        
                                            <div class="container">
    <div class="row">
        <div class="col-100">
            <div class="select-color">
                <input type="radio" id="radio-1" name="radios" />
                <label for="radio-1" title="Groen"><span style="background-color: #52B99E"></span></label>

                <input type="radio" id="radio-2" name="radios" />
                <label for="radio-2" title="Geel"><span style="background-color: #F9B233"></span></label>

                <input type="radio" id="radio-3" name="radios" />
                <label for="radio-3" title="Paars"><span style="background-color: #5A3A8E"></span></label>
            </div>
        </div>
    </div>
</div>                                        
                                    

Select-size

Code
                                        
                                            <div class="container">
    <div class="row">
        <div class="col-100">
            <div class="select-size">
                <input type="radio" id="radio-size-1" name="radios-size" />
                <label for="radio-size-1" title="147"><span class="in-stock">147</span></label>

                <input type="radio" id="radio-size-2" name="radios-size" />
                <label for="radio-size-2" title="152"><span class="in-stock">152</span></label>

                <input type="radio" id="radio-size-3" name="radios-size" disabled/>
                <label for="radio-size-3" title="164"><span>164</span></label>
            </div>
        </div>
    </div>
</div>                                        
                                    

Boys-girls-panel

Code
                                        
                                            <div class="boys-girls">
    <div class="container">
        <div class="boys-girls-container">
            <div class="boys">
                <div class="bg" style="background-image: url('/modules/core/site/default/images/category-boy.png')"></div>
                <div class="arrows">
                    <a class="btn arrow-lg-left s-arrow-right green" href="">Boys</a>
                    <div><a class="btn small" href="">Shop nu</a></div>
                </div>
            </div>
            <div class="girls">
                <div class="bg" style="background-image: url('/modules/core/site/default/images/category-girl.png')"></div>
                <div class="arrows">
                    <a class="btn arrow-lg-right s-arrow-left green" href="">Girls</a>
                    <div><a class="btn small" href="">Shop nu</a></div>
                </div>
            </div>
        </div>
    </div>
</div>                                        
                                    

Content-image

Code

The IBI story

iBi met de volgende gedachtegang en naar een door eigen zeldzame ervaring opgedaan idee: In de zomer van 2017, op zondag 2 juli omstreeks 15:00 in de middag, zijn we tijdens een vaartocht bij het eiland Ibiza in de Middellandse zee een groep dolfijnen tegen gekomen. Na deze dolfijnen een korte tijd gevolgd te hebben, zij zwommen namelijk in een bepaalde richting, merkten wij een canvas doek op waar een dier in vastzat en aan het spartelen was.

Toen we dichterbij kwamen zagen we dat er een zeeschildpad in het canvasdoek vast zat. We hebben onze boot hierop naast het doek gemanoeuvreerd en hebben het doek en de zeeschildpad op het achterdek aan boord gehaald.

                                        
                                            <div class="content-image">
    <div class="container">
        <div class="content-image-grid">
            <div class="content">
                <div class="title">
                    <h2><span class="alt-font">The</span> IBI <span class="alt-font">story</span></h2>
                </div>
                <div class="content-block">
                    <p>
                        iBi met de volgende gedachtegang en naar een door eigen zeldzame ervaring opgedaan idee: In de zomer van 2017,
                        op zondag 2 juli omstreeks 15:00 in de middag, zijn we tijdens een vaartocht bij het eiland Ibiza in de Middellandse zee een groep dolfijnen tegen gekomen.
                        Na deze dolfijnen een korte tijd gevolgd te hebben, zij zwommen namelijk in een bepaalde richting, merkten wij een canvas doek op waar
                        een dier in vastzat en aan het spartelen was.
                    </p>
                    <p>
                        Toen we dichterbij kwamen zagen we dat er een zeeschildpad in het canvasdoek vast zat.
                        We hebben onze boot hierop naast het doek gemanoeuvreerd en hebben het doek en de zeeschildpad op het achterdek aan boord gehaald.
                    </p>
                </div>
                <div class="buttons">
                    <a class="btn arrow" href="">Lees verder</a>
                </div>
            </div>
            <div class="post">
                <div class="photo-post" style="background-image: url('https://images.unsplash.com/photo-1549995005-35bf3d74a2f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80');"></div>
            </div>
        </div>
    </div>
</div>                                        
                                    

Media-panel

Code
                                        
                                            <div class="media-panel">
    <div class="container">
        <div class="media-grid">
            <div class="media-item">
                <h3>Bestanden</h3>
                <ul class="has-icon">
                    <li><a href=""><i class="fal fa-file"></i> Maattabellen</a></li>
                    <li><a href=""><i class="fal fa-file"></i> Algemene voorwaarden</a></li>
                    <li><a href=""><i class="fal fa-file"></i> Productbeschrijvingen</a></li>
                </ul>
            </div>
            <div class="media-item">
                <h3>Links</h3>
                <ul class="has-icon">
                    <li><a href=""><i class="fal fa-external-link"></i> Verkooppunten</a></li>
                    <li><a href=""><i class="fal fa-external-link"></i> Externe website url</a></li>
                    <li><a href=""><i class="fal fa-external-link"></i> Externe website url</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>                                        
                                    

Pagination

Code
                                        
                                            <div class="container">
    <div class="pagination">
        <a href="#" class="prev disabled"><i class="fas fa-chevron-left"></i></a>
        <a href="#" class="is-active">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <span class="dotSep"> ...</span>
        <a href="#">7</a>
        <a href="#" class="next"><i class="fas fa-chevron-right"></i></a>
    </div>
</div>
                                        
                                    

Inputs

Code
                                        
                                            <div class="container">
    <div class="row">
        <div class="col-33">
            <div class="form-item-container cf">
                <input type="checkbox" id="checkbox-1" name="checkboxes" class="form-input"/>
                <label for="checkbox-1" title="checkbox-1"><span></span>Checkbox 1</label>
            </div>

            <div class="form-item-container cf">
                <input type="checkbox" id="checkbox-2" name="checkboxes" class="form-input"/>
                <label for="checkbox-2" title="checkbox-2"><span></span>Checkbox 2</label>
            </div>
        </div>
    </div>
</div>                                        
                                    

Usp-icons

Code
Vóór 17:00 uur besteld morgen in huis
Gratis verzending
Met elke bestelling het goede doel steunen
                                        
                                            <div class="container">
    <div class="row">
        <div class="usp-icons">
            <div class="col-33"><i class="fas fa-calendar-check"></i> Vóór 17:00 uur besteld morgen in huis</div>
            <div class="col-33"><i class="fas fa-truck-container"></i> Gratis verzending</div>
            <div class="col-33"><i class="fas fa-hand-heart"></i> Met elke bestelling het goede doel steunen</div>
        </div>
    </div>
</div>