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://www.w3schools.com/cssref/pr_grid-template-areas.asp
- CSS Columns. Läs mer på: https://www.w3schools.com/cssref/pr_grid-column.asp
- CSS @media Rule. Läs mer på: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
- Google fonts. Läs mer på: https://developers.google.com/fonts/docs/getting_started
Du bör kunna få mycket hjälp utav css-strukturen
Instruktioner
- Ladda ner zip-filen och lägg innehållet på din dator
- Fyll i alla värden i CSS-filen
- Kontrollera att slutresultatet liknar facitbilderna
- Lämna in din style.css
- Skapa en egen design utifrån samma HTML-markup
- Lämna in även den
HTML
<!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8"> <title>Nyhetsartikel</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header> <p>Parkskolans nyheter</p> </header> <article> <img src="japan.jpg" alt="Japan"> <h1>The Big Oxmox</h1> <div class="columns"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p> <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.</p> <img src="picture.jpg" alt="A man walking"> <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p> <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p> <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p> <p>But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p> <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.</p> <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p> <p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p> <img src="diner.jpg" alt="People dining"> <p>But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the</p> </div> </article> <div class="author"> <img src="woman.jpg" alt="The Author"> <h2>Skriva Pensson</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ipsam, minus est inventore non neque quidem cumque, ad repellendus qui nostrum accusamus dolore, assumenda itaque eligendi. Mollitia deserunt incidunt, quia.</p> </div> <aside> <ul> <li>Lokalt</li> <li>Nationellt</li> <li class="active">Internationellt</li> <li>Krönikor</li> <li>Kultur</li> </ul> </aside> <footer> <p>Alla rättigheter tillhör någon</p> </footer> </div> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css?family=Merriweather|Roboto'); body { font-family: 'Merriweather', serif; font-size: .8em; line-height: 1.7; background-image: linear-gradient(to top left, #fbc2eb 0%, #a6c1ee 100%); 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:first-of-type {} /* 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: "header header header" "aside article author" "footer footer footer"; } /* 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 {} }