Algemene stylesheet

Om de grid te stylen heb ik gebruik gemaakt van css tricks grid. hier hebben ze twee methodes geleerd hoe ik grid kan gebruiken. 1 is het maken van een grid in objecten & 2 is hoe ik objecten link aan een bepaalde grid. Door deze twee technieken te gebruiken heb ik alle design die ik gemaakt heb gemaakt. De grid basis is gemaakt met techniek 1 en 2 is vooral gemaakt met techniek 2. Hieronder zit je een lijst met foto's van de code & resultaat die ik gebruikte en kreeg.

Grid basis

Basic Lay-out grid 1

Basic Lay-out grid 2

Basic Lay-out grid 3

Basic Lay-out grid 4

Basic Lay-out grid 5

Basic Lay-out grid 6

Basic Lay-out grid 7

Basic Lay-out grid 8

Basic Lay-out grid 9

Grid advanced

advancedLay-out grid 1

advancedLay-out grid 2

Bij deze kwam wat meer kijken omdat ik de objecten moest roteren. Het lastigste was dat de twee objecten over elkaar heen staan en gekanteld staat. om te zorgen dat ze goed in het midden staan heb ik een lege grid er boven en onderstaan zodat ik geen gebruik heb hoeven maken van display flex.

advancedLay-out grid 3

advancedLay-out grid 4

Bij deze kwam nog wat meer kijken omdat ik een clip path heb toegevoegd. Deze heb ik vaste maten gegeven zodat de design goed blijft staan

advancedLay-out grid 5

advancedLay-out grid 6