Code Process
Het doel van deze CSS-code is om de kaartachtige elementen (.image-containers) verticaal en horizontaal te centreren binnen het viewport. Ik gebruik de eigenschap display: flex om een flex-container te creëren en past justify-content: center en align-items: center toe om de elementen horizontaal en verticaal te centreren. De min-height: 100vh zorgt ervoor dat de container ten minste de volledige hoogte van het viewport inneemt, zodat de elementen correct worden gecentreerd, zelfs wanneer er beperkte inhoud is.
Voor de navigation bar is er gekozen voor een simpele design, maar toch het thema aan te houden van de spelkaarten door middel van de kleuren (zwart, wit en rood)
Ik heb dit in de header gedaan, zodat dit bovenaan de pagina komt. Hierna heb ik de 2 div classes gemaakt met de ‘nav-container’, wat de navbar is. Verder heb ik de andere class de naam ‘name-homepage’ gegeven met daarin een p wat de titel is van onze pagina, namelijk ‘Squadpage 1D’. Hierna heb ik een unordered list gemaakt met daarin list items waar links staan naar de view all & FDND pagina.
