Responsive portfolio
- Tag dit Figma-design fra tirsdag og kod noget af det op i HTML/CSS, så det matcher designet. Start med desktop.
Klik for hint om menubar
Du kan lave en klasse .menubar i din .css-fil og bruge <header> og <nav> tags i din .html-side (skal være indeni <body>). I din .menubar klasse lægger du .css koden fra figma. I din <header> angiver du at class=“menubar”.
Klik for hint om flexbokse i menubar
Du kan lave en klasse .nav-right i din .css-fil og definere at den er en flexbox. Så kan du putte én <nav> (HOME) og én <nav-right> med to links (ABOUT og PROJECT) i din <header>. Det vil sige at du har en flexbox (.menubar) med to elementer, hvoraf det ene (nav-right) også er en flexbox.
Klik for hint om bredde på menubar
Din menubar er muligvis bredere end din side i browseren. Det er fordi browseren laver noget standard padding og margin. Det kan du fjerne ved at skrive ```css * { margin: 0; padding: 0; box-sizing: border-box; } ``` i starten af din .css-fil. Det nulstiller padding og margin.Klik for hint om farver
Du kan lave farvevariablene i .css sådan her
:root {
--darkgrey: #333333;
--black: #000000;
}
- Gør det responsive med media queries og flexbox
- Test på forskellige skærmstørrelser