OPGAVER TIL HTML & CSS – BEGYNDER – BASIC WEBSITE
Opgave 6 - Basic website opsætning
Lav en simpelt hjemmeside opsætning
Opgave 6 – Del 1
Gå ind på CODEPEN og ….
Gå ind i html boksen lav nogle div bokse
Således her:
< div>
<h1 >Her kommer din Header til at være< /h1>
< /div >
< div>
<p>Denne div er for din venstre boks</p>
< /div >
< div>
< p>Denne boks vil være midter boksen. Alså din Main< /p>
</ div>
< div >
<p >Her vil din højre kasse vises</ p>
</ div>
< div >
<p >Denne vil være din footer. Altså bunden af siden</p >
< /div >
Opgave 6 – Del 2
Nu tilføjer vi nogle styles til selve siden i vores body tag(man kunne også bare lave en css klasse. men det er for at vise man kan gøre det på flere måder.
Hvis du bruger Codepen hop til linje 50 og fortsæt kun til linje 71.
I din 2. div boks skal du skrive css style overflow:auto ind. Den del styrer at den viser den div boks øverst når vinduet bliver mindre.
Tilføj klassene i dine div bokse. Vi skal lave css til dem om lidt.
Div boksen over Galleri skal have klassen: class=”right”
Opgave 6 – Del 3
Se bort fra <style> tags
Nu skal vi lave CSS’en:
Skriv efter billederne herunder.
Prøv at justere på tallene og farverne undervejs, du kan altid gå tilbage til denne opsætning, hvis det går skævt.
HUSK: At tilføje klasserne til dine div bokse med < div class=”main” > og < div class=”right” >
Opgave 6 – Del 4
Nu skal vi lave CSS’en for right og lave siden responsiv
Når man laver en side responsive, så sørger man for at den ser pæn ud i mobil visning. Her bruger man @media og kalder på klasserne og fortæller hvordan de skal se ud, når skærmen er 1px til max 620px bred.
Se bort fra <style> tags
Her under vises/eksekveres koden
Opgave 6 – Del 5
1. Indsæt top menu baren/navigationsbaren fra Begynder Opgave 4:
Den skal placeres EFTER din header div.
HUSK: At tilføje CSS klasser oppe imellem style, hvis du ikke bruger codepen.
2. Vælg dine egne farver og juster på padding og margin for at få det look du bedst kan lide. Hvis du sætter border: 0px; forsvinder kasserne omkring boksene 😉
3. Lave hover efter på på elementerne på dit site. Se bl.a. hvordan i Begynder opgave 4.
