From 94ac0981e5f489fa276a56fbde79eca18f6284a9 Mon Sep 17 00:00:00 2001
From: Kevin io <>
Date: Thu, 17 Nov 2022 18:53:32 +0100
Subject: [PATCH 1/2] set up

---
 01-review/excercise/ex-1.css   | 41 ++++++++++++++++++++++++++++++++++
 01-review/excercise/start.html | 12 ++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 01-review/excercise/ex-1.css
 create mode 100644 01-review/excercise/start.html

diff --git a/01-review/excercise/ex-1.css b/01-review/excercise/ex-1.css
new file mode 100644
index 0000000..bde7678
--- /dev/null
+++ b/01-review/excercise/ex-1.css
@@ -0,0 +1,41 @@
+/* scroll for starting CSS and hints; instructions in JS window -> */
+
+/* HINT: Three types of Grid syntax might include:
+- line-based placement, like grid-column: 1 / 3; 
+- use the "span" keyword, like grid-column: span 2;
+- use grid area notation
+
+
+
+
+
+/* presentational CSS, no answers here -- ignore below this line */
+div > div {
+  font-size: 5rem;
+  text-align: center;
+  color: white;
+}
+.a {
+  background-color: #fcb10f;
+}
+.b {
+  background-color: #801340;
+}
+.c {
+  background-color: #4d2975;
+}
+.d {
+  background-color: #244479;
+}
+.e {
+  background-color: #55b4af;
+}
+.f {
+  background-color: rgba(128, 19, 64, 0.7);
+}
+.g {
+  background-color: rgba(77, 41, 117, 0.5);
+}
+.h {
+  background-color: rgba(252, 177, 15, 0.7);
+}
diff --git a/01-review/excercise/start.html b/01-review/excercise/start.html
new file mode 100644
index 0000000..2422d82
--- /dev/null
+++ b/01-review/excercise/start.html
@@ -0,0 +1,12 @@
+<div class="wrapper">
+  <div class="a">A</div>
+  <div class="b">B</div>
+  <div class="c">C</div>
+  <div class="d">D</div>
+  <div class="e">E</div>
+  <div class="f">F</div>
+  <div class="g">G</div>
+  <div class="h">H</div>
+</div>
+
+<!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3273620/grid1.png" alt="Make it look like this, uncomment to see the image"> -->

From 9e550a1faa8d8ea5160106633a8d7418bbe5d66a Mon Sep 17 00:00:00 2001
From: Kevin io <>
Date: Thu, 17 Nov 2022 19:26:36 +0100
Subject: [PATCH 2/2] Solution

---
 01-review/excercise/{ex-1.css => base.css} | 11 -------
 01-review/excercise/ex-1-flex.css          | 27 ++++++++++++++++
 01-review/excercise/ex-1-grid.css          | 14 +++++++++
 01-review/excercise/start.html             | 36 ++++++++++++++--------
 4 files changed, 65 insertions(+), 23 deletions(-)
 rename 01-review/excercise/{ex-1.css => base.css} (65%)
 create mode 100644 01-review/excercise/ex-1-flex.css
 create mode 100644 01-review/excercise/ex-1-grid.css

diff --git a/01-review/excercise/ex-1.css b/01-review/excercise/base.css
similarity index 65%
rename from 01-review/excercise/ex-1.css
rename to 01-review/excercise/base.css
index bde7678..f9b3c28 100644
--- a/01-review/excercise/ex-1.css
+++ b/01-review/excercise/base.css
@@ -1,14 +1,3 @@
-/* scroll for starting CSS and hints; instructions in JS window -> */
-
-/* HINT: Three types of Grid syntax might include:
-- line-based placement, like grid-column: 1 / 3; 
-- use the "span" keyword, like grid-column: span 2;
-- use grid area notation
-
-
-
-
-
 /* presentational CSS, no answers here -- ignore below this line */
 div > div {
   font-size: 5rem;
diff --git a/01-review/excercise/ex-1-flex.css b/01-review/excercise/ex-1-flex.css
new file mode 100644
index 0000000..1d2c948
--- /dev/null
+++ b/01-review/excercise/ex-1-flex.css
@@ -0,0 +1,27 @@
+.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+.wrapper > * {
+  margin-bottom: 1rem;
+}
+
+.a,
+.h {
+  flex-basis: 66%;
+}
+
+.b,
+.d,
+.e,
+.f,
+.g {
+  flex-basis: 32%;
+}
+
+.c {
+  flex: 100%;
+}
diff --git a/01-review/excercise/ex-1-grid.css b/01-review/excercise/ex-1-grid.css
new file mode 100644
index 0000000..d1baa7a
--- /dev/null
+++ b/01-review/excercise/ex-1-grid.css
@@ -0,0 +1,14 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 1rem;
+}
+
+.a,
+.h {
+  grid-column: span 2;
+}
+
+.c {
+  grid-column: span 3;
+}
diff --git a/01-review/excercise/start.html b/01-review/excercise/start.html
index 2422d82..f10b3ef 100644
--- a/01-review/excercise/start.html
+++ b/01-review/excercise/start.html
@@ -1,12 +1,24 @@
-<div class="wrapper">
-  <div class="a">A</div>
-  <div class="b">B</div>
-  <div class="c">C</div>
-  <div class="d">D</div>
-  <div class="e">E</div>
-  <div class="f">F</div>
-  <div class="g">G</div>
-  <div class="h">H</div>
-</div>
-
-<!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3273620/grid1.png" alt="Make it look like this, uncomment to see the image"> -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="./base.css" />
+    <link rel="stylesheet" href="./ex-1-flex.css" />
+    <link rel="stylesheet" href="./ex-1-grid.css" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="a">A</div>
+      <div class="b">B</div>
+      <div class="c">C</div>
+      <div class="d">D</div>
+      <div class="e">E</div>
+      <div class="f">F</div>
+      <div class="g">G</div>
+      <div class="h">H</div>
+    </div>
+  </body>
+</html>