Ontwerpen - Siem-P/Codeforce-squad-page-individueel Wiki

Team

Voor het ontwerpen van de squadpage hebben wij een schets gemaakt met als idee dat het een hub moet voorstellen. De verschillende squads krijgen hun eigen button met, als daar op gedrukt wordt, de leden van de squad daar omheen gecirkeld. Daarna kan er op een lid geklikt worden om naar het visitekaartje te gaan.

Breakdownschets Mobile

Breakdownschets Desktop

Breakdownschets Desktop v2

Mediaquery

Voor deze site gebruiken wij 2 mediaqueries, mobile version(max-width: 425px) en desktop version(min-width: 426px). De mobile version zal een max-width krijgen van rond de 425px. Dit houdt in dat alle schermen met een breedte onder 425px de mobile version van de css krijgen. Hier zijn de breedtes aangepast en de lettertypes verkleind. Ook is de layout van de site anders dan op schermen met een breedte boven de 425px.

Verdeling van secties onder de teamleden

Op deze schets is te zien hoe wij onze site hebben onderverdeeld in delen. Hier hebben teamleden ook een deel gekregen die zij moeten bouwen.