Differences
This shows you the differences between two versions of the page.
mattias_06 [2019-09-12 20:34] Mattias Hamberg [Instruktioner] |
mattias_06 [2022-07-18 13:20] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Parkskolans nyheter ====== | ||
- | I denna uppgift ska du utifrån en färdig HTML-markup och en färdig CSS-struktur skapa en responsiv nyhetsartikel som använder följande tekniker: | ||
- | |||
- | * **CSS Grid Template Areas**. Läs mer på: https:// | ||
- | * **CSS Columns**. Läs mer på: https:// | ||
- | * **CSS @media Rule**. Läs mer på: https:// | ||
- | * **Google fonts**. Läs mer på: https:// | ||
- | |||
- | Du bör kunna få mycket hjälp utav css-strukturen trots att du saknar många | ||
- | |||
- | ==== Instruktioner ==== | ||
- | |||
- | - Ladda ner {{: | ||
- | - Fyll i alla värden i CSS-filen | ||
- | - Kontrollera att slutresultatet liknar facit-bilderna | ||
- | - Lämna in din style.css | ||
- | - Skapa en egen design utifrån samma HTML-markup | ||
- | - Lämna in även den | ||
- | === HTML === | ||
- | <code html> | ||
- | < | ||
- | <html lang=" | ||
- | |||
- | < | ||
- | <meta charset=" | ||
- | < | ||
- | <link rel=" | ||
- | </ | ||
- | |||
- | < | ||
- | |||
- | <div id=" | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | < | ||
- | <img src=" | ||
- | < | ||
- | <div class=" | ||
- | |||
- | < | ||
- | |||
- | <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</ | ||
- | |||
- | <img src=" | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | |||
- | <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</ | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | |||
- | <img src=" | ||
- | |||
- | < | ||
- | </ | ||
- | </ | ||
- | |||
- | <div class=" | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | < | ||
- | <ul> | ||
- | < | ||
- | < | ||
- | <li class=" | ||
- | < | ||
- | < | ||
- | </ul> | ||
- | </ | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | |||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | === CSS === | ||
- | <code css> | ||
- | @import url(' | ||
- | |||
- | body { | ||
- | font-family: | ||
- | font-size: .8em; | ||
- | line-height: | ||
- | background-image: | ||
- | padding: .5em; | ||
- | margin: auto; | ||
- | max-width: 100em; | ||
- | } | ||
- | |||
- | /* Typsnittet på rubrikerna ska vara Roboto och färgen steelblue */ | ||
- | h1, h2 {} | ||
- | |||
- | /* Bilderna får inte ta större plats än deras kolumnbredd */ | ||
- | img { max-width: ; } | ||
- | |||
- | /* Typsnittet ska vara Roboto, resten får du komma på själv. Ett tips är att kika i #container lite längre ner */ | ||
- | header { | ||
- | color: ; | ||
- | grid-area: ; | ||
- | text-align: ; | ||
- | } | ||
- | |||
- | /* Själva sidrubriken ska vara 3em stor */ | ||
- | header p {} | ||
- | |||
- | /* Kika i #container */ | ||
- | aside { grid-area: ; } | ||
- | |||
- | /* Listan i sidomenyn ska varken ha padding eller margin. Den ska heller inte ha några prickar */ | ||
- | aside ul {} | ||
- | |||
- | /* List-elementen ska ha en utfyllnad på 1em och en rundning i hörnen på 1em */ | ||
- | aside ul li {} | ||
- | |||
- | /* Det aktiva elementet ska ha vit bakgrundsfärg och textfärgen steelblue */ | ||
- | aside ul li.active {} | ||
- | |||
- | /* Dessa får du lista ut själv */ | ||
- | article { | ||
- | grid-area: ; | ||
- | background-color: | ||
- | padding: ; | ||
- | border-radius: | ||
- | } | ||
- | |||
- | /* Artikelrubriken ska ha text-storleken 2em */ | ||
- | article h1 {} | ||
- | |||
- | /* Artikelintressen ska ha samma typsnitt som rubriken och textstorleken ska vara 1.2em. Ta också bort topp-marginalen så att det ser snyggare ut. Textfärgen får du lista ut själv */ | ||
- | article p: | ||
- | |||
- | /* I mobilläget ska det bara vara en kolumn */ | ||
- | .columns { | ||
- | column-count: | ||
- | column-gap: ; | ||
- | } | ||
- | |||
- | /* Skribentrutan ska ha en utfyllnad på 1em. Resten får du lista ut själv */ | ||
- | .author { | ||
- | grid-area: ; | ||
- | column-count: | ||
- | } | ||
- | |||
- | /* Samma typsnitt som på rubrikerna. Resten fixar du */ | ||
- | footer { grid-area: ; } | ||
- | |||
- | @media only screen and (min-width: 768px) { | ||
- | /* Detta element ska visas som en grid med kolumnbredderna "1fr 3fr 1fr" */ | ||
- | #container { | ||
- | display: ; | ||
- | grid-template-columns: | ||
- | grid-template-areas: | ||
- | " | ||
- | "aside article author" | ||
- | " | ||
- | } | ||
- | |||
- | /* I denna vy vill vi ha två kolumner */ | ||
- | .columns { column-count: | ||
- | |||
- | /* I denna vy vill vi ha en utfyllnad på 2em, endast en kolumn och en textstorlek på 0.8em */ | ||
- | .author { column-count: | ||
- | |||
- | /* Marginalerna på sidomenyn ska vara 1em uppåt, 2em åt vänster och 0 både åt höger och nedåt */ | ||
- | aside ul {} | ||
- | |||
- | /* Hörnavrundningen ska vara 1em både uppe och nere åt vänster, men 0 åt höger */ | ||
- | aside ul li {} | ||
- | } | ||
- | |||
- | @media only screen and (min-width: 1200px) { | ||
- | /* I denna vy vill vi göra mittenkolumnen 1fr större än tidigare */ | ||
- | #container {} | ||
- | |||
- | /* Nu vill vi även ha tre kolumner i artikeln */ | ||
- | .columns {} | ||
- | } | ||
- | </ |