Stap 6: Twee kolommen met achtergrond

In dit deel van de pagina gaan we de twee case-blokken namaken. De blokken moeten iets uit elkaar staan, zodat het twee losse blokken zijn. De achtergrond geven we vorm met een afbeelding. We beginnen met de keuze voor de lay-out. 

Aangezien we willen dat er een kleine ruimte tussen beide blokken zit, kiezen we voor een 3-koloms lay-out. De tweede kolom zorgt ervoor dat er ruimte zit tussen de twee case-blokken.

We geven de lay-out de volgende instellingen:
Column width: 48%, 4%, 48%
Achtergrond: stones background
Background width: full
Padding: 70px, 20px, 70px, 20px

Vervolgens voegen we in de linkerkolom twee afbeeldingen-blokken toe. In de eerste plaatsten we de afbeelding “Round top”. De tweede afbeelding betreft de “quote frieslandcampina”. 

We sluiten het blok af met een quote. Je kunt de tekst naar wens stylen (padding is: 0px, 20px, 0px, 20px). Tot slot plaatsen we nog de afbeelding “Round bottom”. Plaats daaronder nog een spacer met een hoogte van 20px. Deze zorgt ervoor dat de kolommen op de responsive-versie niet tegen elkaar aan staan.

Wil je op een gemakkelijke manier de tweede kolom maken? Kopieer dan de onderdelen van de eerste kolom naar de meest rechtse kolom. We veranderen de afbeeldingen en de quote.

Tot slot voegen we nog een spacer toe. De eerste spacer komt in de middelste kolom. Deze zorgt ervoor dat het grijze plusje verdwijnt en dat de kolom inhoud heeft. Deze spacer heeft slechts een hoogte van 1px. Het zorgt ervoor dat de linker- en de rechterkolom gescheiden van elkaar zijn.

Klik hier om door te gaan naar stap 7