From b03dcb43da74a409b3acd79e5083b0d368e1ab20 Mon Sep 17 00:00:00 2001 From: Haiko Erinkveld Date: Thu, 3 Jun 2021 16:49:26 +0200 Subject: [PATCH 1/3] huiswerk haiko initieel --- index.html | 11 ++++++++ styles.css | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 91 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index feba0d8..3eeb113 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,21 @@ + Les 3 - Opdracht CSS Grid +
+
A
+
B: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates ad quos ipsa voluptatum maxime ducimus ullam animi mollitia quaerat, a esse suscipit illo impedit sunt magnam id voluptatibus repudiandae temporibus labore eum? Doloremque est explicabo assumenda tenetur facilis culpa labore consequatur architecto mollitia fugiat. Aut fugiat voluptatibus, non inventore suscipit nobis reiciendis quaerat ipsam, quae optio et doloremque dolor vel quia, illum architecto soluta incidunt nihil. Iure ab repudiandae reiciendis ipsam consequatur quam obcaecati. Inventore incidunt, quia porro voluptas illum, debitis non odio exercitationem quam voluptate laboriosam odit voluptatum, eligendi laborum facilis facere ab praesentium nisi officiis! Sit asperiores, sequi provident temporibus nulla aliquam aliquid labore, doloremque mollitia nisi cum enim praesentium numquam porro fuga saepe corporis quibusdam a? Ullam, quidem accusamus asperiores doloribus aliquid iure nesciunt pariatur quibusdam voluptatibus necessitatibus sed dolorum eaque laboriosam ab ratione maxime delectus molestias enim expedita dolore. Expedita tempore velit ex? Saepe consectetur ipsum, amet molestiae quas inventore nisi temporibus quidem vitae quia similique, recusandae delectus eaque qui vero facere optio ullam blanditiis maxime? Veniam corporis praesentium velit quas molestiae quod facilis earum ipsam nulla, odit modi aliquid provident aliquam voluptas maiores sit, neque minus cum a deserunt dolores quibusdam repellendus sapiente! Sapiente, earum.
+
C
+ +
E
+
F
+ + +
\ No newline at end of file diff --git a/styles.css b/styles.css index 16098b9..cf86c5e 100644 --- a/styles.css +++ b/styles.css @@ -1 +1,80 @@ -/*Maak hier jouw CSS!*/ \ No newline at end of file +.container { + display: grid; + + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 50px 210px auto 50px; + column-gap: 16px; + row-gap: 16px; + grid-template-areas: + "alpha charlie charlie" + "bravo charlie charlie" + "bravo echo delta" + "foxtrot foxtrot foxtrot"; +} + +#alpha { + background-color: brown; + grid-area: alpha; + + display: flex; + justify-content: center; + align-items: center; +} + +#bravo { + background-color: brown; + grid-area: bravo; + padding: 10px; +} + +#charlie { + background-color: brown; + grid-area: charlie; + + display: flex; + justify-content: center; + align-items: center; +} + +#delta { + background-color: brown; + grid-area: delta; + max-height: 100px; + + display: flex; + justify-content: center; + align-items: center; +} + +#echo { + background-color: brown; + grid-area: echo; + + display: flex; + justify-content: center; + align-items: center; +} + +#foxtrot { + background-color: brown; + grid-area: foxtrot; + + display: flex; + justify-content: center; + align-items: center; +} + +@media screen and (max-width: 576px) { + .container { + grid-template-columns: 1fr; + grid-template-rows: 50px auto 50px 50px 50px 50px 50px; + grid-template-areas: + "alpha" + "bravo" + "charlie" + "delta" + "echo" + "." + "foxtrot"; + } +} From ad3eb8e44ffa5bd7e96c563a5623bf3b62c0135f Mon Sep 17 00:00:00 2001 From: Haiko Erinkveld Date: Thu, 3 Jun 2021 18:01:57 +0200 Subject: [PATCH 2/3] change height of #charlie --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index cf86c5e..0582c27 100644 --- a/styles.css +++ b/styles.css @@ -2,7 +2,7 @@ display: grid; grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 50px 210px auto 50px; + grid-template-rows: 50px 174px auto 50px; column-gap: 16px; row-gap: 16px; grid-template-areas: From fc68c3663c6aaa7c3c2119e8c6fa42fcd0fca4ed Mon Sep 17 00:00:00 2001 From: Haiko Erinkveld Date: Tue, 8 Jun 2021 09:43:16 +0200 Subject: [PATCH 3/3] change to mobile first and change colors --- index.html | 3 +-- styles.css | 37 +++++++++++++++++++++---------------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 3eeb113..b70ba1f 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ Les 3 - Opdracht CSS Grid +
A
B: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates ad quos ipsa voluptatum maxime ducimus ullam animi mollitia quaerat, a esse suscipit illo impedit sunt magnam id voluptatibus repudiandae temporibus labore eum? Doloremque est explicabo assumenda tenetur facilis culpa labore consequatur architecto mollitia fugiat. Aut fugiat voluptatibus, non inventore suscipit nobis reiciendis quaerat ipsam, quae optio et doloremque dolor vel quia, illum architecto soluta incidunt nihil. Iure ab repudiandae reiciendis ipsam consequatur quam obcaecati. Inventore incidunt, quia porro voluptas illum, debitis non odio exercitationem quam voluptate laboriosam odit voluptatum, eligendi laborum facilis facere ab praesentium nisi officiis! Sit asperiores, sequi provident temporibus nulla aliquam aliquid labore, doloremque mollitia nisi cum enim praesentium numquam porro fuga saepe corporis quibusdam a? Ullam, quidem accusamus asperiores doloribus aliquid iure nesciunt pariatur quibusdam voluptatibus necessitatibus sed dolorum eaque laboriosam ab ratione maxime delectus molestias enim expedita dolore. Expedita tempore velit ex? Saepe consectetur ipsum, amet molestiae quas inventore nisi temporibus quidem vitae quia similique, recusandae delectus eaque qui vero facere optio ullam blanditiis maxime? Veniam corporis praesentium velit quas molestiae quod facilis earum ipsam nulla, odit modi aliquid provident aliquam voluptas maiores sit, neque minus cum a deserunt dolores quibusdam repellendus sapiente! Sapiente, earum.
@@ -14,8 +15,6 @@
E
- -
diff --git a/styles.css b/styles.css index 0582c27..ac60232 100644 --- a/styles.css +++ b/styles.css @@ -1,15 +1,23 @@ +body { + background-color: rgb(250, 234, 203); +} + .container { + color: white; display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 50px 174px auto 50px; + grid-template-columns: 1fr; + grid-template-rows: 50px auto 50px 50px 50px 50px 50px; column-gap: 16px; row-gap: 16px; grid-template-areas: - "alpha charlie charlie" - "bravo charlie charlie" - "bravo echo delta" - "foxtrot foxtrot foxtrot"; + "alpha" + "bravo" + "charlie" + "delta" + "echo" + "." + "foxtrot"; } #alpha { @@ -64,17 +72,14 @@ align-items: center; } -@media screen and (max-width: 576px) { +@media screen and (min-width: 576px) { .container { - grid-template-columns: 1fr; - grid-template-rows: 50px auto 50px 50px 50px 50px 50px; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 50px 174px auto 50px; grid-template-areas: - "alpha" - "bravo" - "charlie" - "delta" - "echo" - "." - "foxtrot"; + "alpha charlie charlie" + "bravo charlie charlie" + "bravo echo delta" + "foxtrot foxtrot foxtrot"; } }