Skip to content
Latoya edited this page Oct 19, 2023 · 1 revision

Tasks

Nav bar realiseren

Sidebar

Card Sections

Tools

Ik heb voornamelijk gebruik gemaakt van HTML en CSS

Code

Navbar

De navbar heb ik gemaakt door gebruik te maken van een nav element

<nav> </nav>

Hier heb ik vervolgens een Unordered List ingezet met List items die linken naar externe sites of andere sections.

Resultaat Navbar

navbar result

Sidebar

De Sidebar is gemaakt door een aparte section te maken. Hier maak ik de sidebar met labels:

<label><input type="checkbox" class="filter" value="betaald"> betaald</label>

Ook zorg ik ervoor dat de sidebar links wordt weergeven:

.sidebar{ float: left; }

Resultaat Side bar

sidebarresult

Card Section

Ik heb ervoor gezorgd dat de initiatieven in een overzicht komen door cards te gebruiken.

<section class="initiatieven-cards"> </section

Deze heb ik in een section en div geplaatst

<div class="cultuur card"> </div>

Ik zorg ervoor dat de kaarten naast elkaar komen en wrap gebruiken wanneer dit nodig is

.initiatieven-cards{ display: flex; flex-wrap: wrap; }

Ik zorg ervoor dat er evenveel ruimte komt tussen de kaarten

.initiatieven-cards{ justify-content: space-evenly; }

Ook heb ik de cards een schaduw gegeven zodat ze onderscheiden van de achtergrond

-webkit-box-shadow: 4px 7px 16px 1px #388087; box-shadow: 4px 7px 16px 1px #388087;

Resultaat Cards section

Cardsresults

Clone this wiki locally