search

fdnd-agency / avl

MIT License
0 stars 1 forks source link

De search tektbalk en knop bouwen #17

Closed itsValyria closed 4 hours ago

itsValyria commented 4 hours ago

Mobile Image

Desktop Image

De functionaliteit van de search komt later.

itsValyria commented 4 hours ago

HTML

De search bestaat uit een input en een button. Om deze heb ik een form gezet. https://github.com/Ryank2004/Oncollaboration-Sprint-14/blob/50c1d0fc6df5c68fe8fb92fda2df088de785ad45/src/lib/search.svelte#L1-L8

CSS

Ik heb mobile first gewerkt. Ik heb de form display: flex; gegeven zodat de input en button naast elkaar komen te staan. ::placeholder heb ik gebruikt om de placeholder text een andere kleur gegeven. Met media queries heb ik de search responsive gemaakt. Op desktop veranderen de button en input van plek en dit heb ik gedaan door de form flex-direction: row-reverse; te geven.

https://github.com/Ryank2004/Oncollaboration-Sprint-14/blob/50c1d0fc6df5c68fe8fb92fda2df088de785ad45/src/lib/search.svelte#L11-L80