From dde6f4c199d20cfa451a172f1984efd21bbbf2d6 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 12 Dec 2017 14:12:12 +0100 Subject: [PATCH] suggestions and some tips --- week03/index.html | 271 ++++++++++++++++++++++------------------------ week03/style.css | 220 +++++++++++++++++++++++-------------- 2 files changed, 267 insertions(+), 224 deletions(-) diff --git a/week03/index.html b/week03/index.html index fcd8772..25abaeb 100644 --- a/week03/index.html +++ b/week03/index.html @@ -1,167 +1,156 @@ - + + - - - + + Informatie van de Rijksoverheid | Rijksoverheid.nl - - - + - - - -
- dutch government crest -
THIS IS A TEST, IT IS not THE WEBSITE OF THE NETHERLANDS GOVERNMENT;
- HET IS EEN TEST, HET IS geen WEBPAGINA VAN DE RIJKSOVERHEID
-
- - -
-

Informatie van de Rijksoverheid

- + cafe +

+ © Nationale Beeldbank

+
-
-

Verschillende Afdelingen

-
- -
- +
+
+ -
- - \ No newline at end of file +

Meer weten over de plannen van het kabinet-Rutte III? Bekijk de animatie.

+ + + + + + + + diff --git a/week03/style.css b/week03/style.css index f884547..26f2d98 100644 --- a/week03/style.css +++ b/week03/style.css @@ -1,20 +1,31 @@ /* ===== 1. default styles (mobile first) ===== */ + + +/*this removes default styling from for eample lists etc*/ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + .disclaimer { position: sticky; background-color: red; color: white; } -.headerItems{ +/*header*/ + +.headerItems { position: absolute; - background: rgb(255, 255, 255); + background: rgb(255, 255, 255); left: 10%; top: 30%; list-style: none; padding-right: 30px; - } +} -.headerImage{ +.headerImage { position: relative; width: 100%; background-size: contain; @@ -23,71 +34,115 @@ overflow: hidden; } -.government {text-align: center;} +.government { + text-align: center; +} + +/*navigation*/ .navbar { - padding: 2%; - background-color: rgb(19, 19, 226); - color: white; + padding: 2%; + background-color: rgb(19, 19, 226); + color: white; } - /*===1a. GRID-FLEX===*/ - #grid-flex { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - } - - #grid-flex #flex2 .flex-item { - margin-bottom: 14px; - display: block; - width: 96%; - overflow: hidden; - } - main { - display: flex; - padding: 0.5%; - background-color: grey; - } +/*main content*/ - section {margin-bottom: 3%;} - - .flex-item { - list-style: none; - width: auto; - margin: 0.5%; - padding: 0.5%; - overflow: hidden; +main { + background: lightgrey; +} + +section { + background: white; + padding: 2%; + margin: 3%; + padding: 0.5%; +} + +/*===1a. GRID-FLEX===*/ + +#grid-flex, +#flex2 { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +#grid-flex #flex2 .flex-item { + margin-bottom: 14px; + display: block; + width: 100%; + overflow: hidden; +} + +#grid-flex .flex-item { + list-style: none; + width: 100%; + margin: 0.5%; + padding: 0.5%; + overflow: hidden; +} + +.headerImage img { + width: 100%; +} + +.flex-image { + display: grid; + float: left; + width: 90%; + list-style: none; + overflow: hidden; +} + +/*p { + width: auto; + height: auto; + color: black; +}*/ + +ul { + list-style: none; +} + + +/* ===== 2. TABLET SETTINGS ===== */ +@media screen and (min-width: 768px) { + #grid-flex .flex-item { + width: 45%; + } + #flex2 .flex-item{ + width: 50%; } .flex-image { - display: grid; - float: left; + /* list-style: none;*/ + display: flex; + flex-wrap: nowrap; + } +} - width: 90%; +/* ===== 3. Screen SETTINGS ===== */ +@media screen and (min-width: 1080px) { + #grid-flex .flex-item { + width: 30%; } - p { - width: auto; - height: auto; - color: black; + #flex2 .flex-item{ + width: 33%; } - - ul {list-style: none;} - - } + /* ===== 2. TABLET SETTINGS ===== */ -@media screen and (min-width:480px) -(max-width: 1079px) { +/*@media screen and (min-width:480px) (max-width: 1079px) { main { - display: flex; - padding: 0.5%; - font-size: 1.2em; - background-color: grey; + + padding: 0.5%; + font-size: 1.2em; + background-color: grey; } - + .flex-item { width: 45%; list-style: none; @@ -95,55 +150,54 @@ padding: 0.5%; overflow: hidden; } - + p { - width: auto; - height: auto; - color: black; + width: auto; + height: auto; + color: black; } - - ul {list-style: none;} - + + ul { + list-style: none; + } + .flex-image { list-style: none; display: flex; flex-wrap: nowrap; width: 30%; } -} +}*/ /* ===== 3. Screen SETTINGS ===== */ -@media screen and (min-width:1080px) { - - - main { +/*@media screen and (min-width:1080px) { + main { display: flex; padding: 0.5%; font-size: 1.2em; background-color: grey; - } + } .flex-item { - width: 22%; - list-style: none; - margin: 0.5%; - padding: 0.5%; - overflow: hidden; + width: auto; + list-style: none; + margin: 0.5%; + padding: 0.5%; + overflow: hidden; } - p { width: auto; height: auto; color: black; - } - - ul {list-style: none;} - - .flex-image { - list-style: none; - display: flex; - flex-wrap: nowrap; - width: 30%; - } - } - + } + ul { + list-style: none; + } + .flex-image { + list-style: none; + display: flex; + flex-wrap: nowrap; + width: 30%; + } +} +*/ \ No newline at end of file