En enkel responsiv design

I en värld där man kan surfa på allt ifrån sina mobiltelefoner till gigantiska tv-apparater med 4k-upplösning är det klokt att skapa hemsidor som anpassar sig till besökarens skärm. Ett enkelt sätt är att använda enheterna vh (viewport-height) och vw (viewport-width) när du sätter höjd, bredd, marginaler och typsnittsstorlek på din sida (läs mer här: https://www.w3schools.com/CSSref/css_units.asp). I denna uppgift får du också prova CSS:s egen beräkningsfunktion calc() (läs mer på https://www.w3schools.com/cssref/func_calc.asp). Med denna kan du exempelvis addera, subtrahera, multiplicera och dividera dina värden. Lycka till!

1. Ladda ner denna fil: zip-fil
2. Du ska endast skriva i CSS-filen (style.css). Du får inte röra HTML-filen (index.html).
3. Följ anvisningarna i CSS-filen, eller de här nedanför.
4. Testa din sida i webbläsaren
5. Lämna in på vklass

/*
    Ta bort alla marginaler och all utfyllnad på alla element
*/
* {}
 
/*
    Textstorleken ska räknas ut genom att 0.6em adderas med 1% av skärmens bredd.
    Radhöjden ska vara 1.6
    Typsnittsfamiljen ska vara sans-serif
*/
html {}
 
/*
    Bakgrundsbilden ska vara old_man.jpg. Bakgrundspositionen ska vara centrerad och bakgrundsstorleken ska täcka hela elementet.
    Utfyllnaden ska vara 10% av skärmens bredd.
    Höjden på elementet ska räknas ut genom att ta halva skärmens höjd och subtrahera 20% av skärmens bredd
    Textfärgen ska vara vit
*/
header {}
 
/*
    Textfärgen ska vara #266c98
*/
h2 {}
 
/*
    Utfyllnaden ska vara 10% av skärmens bredd.
*/
section {}
 
 
/*
    Marginalen ska vara 1em uppåt och nedåt men 0 åt vänster och höger
*/
p {}
 
 
/*
    Bildens bredd ska vara 100% av p-elementets bredd.
*/
img {}