From 138d8b1d2bf578ca60a6ece2a7802c117e3cdc32 Mon Sep 17 00:00:00 2001
From: Hamza Ahmed <hamza.anwar@outlook.com>
Date: Mon, 25 Sep 2023 10:01:45 +0100
Subject: [PATCH 1/2] core done

---
 .vscode/settings.json |   3 ++
 src/styles.css        | 116 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 111 insertions(+), 8 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6b665aa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/src/styles.css b/src/styles.css
index 59fd797..d4fad81 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -39,18 +39,118 @@
     https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
 */
 
-.two-column-grid__expand-two {}
+.container.two-column-grid__expand-two {
+  display: grid;
+  grid-template-columns: 2fr 9fr;
+  gap: 5px;
+}
+.logo {
+  border: dotted 2px lightgreen;
+}
 
-.three-column-grid {}
+.container.three-column-grid {
+  display: grid;
+  grid-template-columns: 3fr 3fr 3fr;
+  gap: 5px;
+}
 
-.three-column-grid__expand-two {}
+.container.three-column-grid__expand-two {
+  display: grid;
+  grid-template-columns: 1fr 25fr 1fr;
+  gap: 5px;
+}
+.container.five-column-grid {
+  display: grid;
+  grid-template:
+    "box1 box2 box3 box4 box5" 1fr /
+    1fr 1fr 1fr 1fr 1fr;
+  gap: 5px;
+}
+/* .test {
+display: grid;
+grid-template-columns: 1fr;
+grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+grid-template-areas: "box1 box2 box3 box4 box5";
+} */
+.container.five-column-grid > box {
+  grid-area: box1;
+}
+.container.five-column-grid > box {
+  grid-area: box2;
+}
+.container.five-column-grid > box {
+  grid-area: box3;
+}
+.container.five-column-grid > box {
+  grid-area: box4;
+}
+.container.five-column-grid > box {
+  grid-area: box5;
+}
 
-.five-column-grid {}
+.container.center-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  align-items: center;
+  justify-items: center;
+}
+.centered {
+  width: 300px;
+}
 
-.center-grid {}
+.container.grid-in-grid-1 {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "leftredbox rightredbox";
+  gap: 5px;
+}
 
-.grid-in-grid-1 {}
+.container.grid-in-grid-1 > .box:first-child {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 5px;
+}
 
-.grid-in-grid-2 {}
+.container.grid-in-grid-1 > .box:nth-child(2) {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  gap: 5px;
+}
 
-.grid-madness {}
+.container.two-column-grid > .box:first-child /*choosing the first div that has same name as div*/ {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: greenbox1 greenbox2 greenbox3;
+  gap: 5px;
+}
+.container.two-column-grid > .box:nth-child(2) /*choosing a type of box within the container (second one in this case)*/ {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-areas: 2greenbox1 2greenbox2 2greenbox3;
+  gap: 5px;
+}
+.container {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 15fr 2.5fr;
+  grid-template-areas: "leftred middlered rightred";
+  gap: 5px;
+}
+.container > .box:first-child {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-areas: "leftgreenbox";
+  gap: 5px;
+}
+.container > .box:nth-child(3) {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: "rightgreenbox1 rightgreenbox1 rightgreenbox1";
+  gap: 5px;
+}

From f81274057a12a2e357f42bdc3a1b98c28eb6df93 Mon Sep 17 00:00:00 2001
From: Hamza Ahmed <hamza.anwar@outlook.com>
Date: Thu, 5 Oct 2023 11:10:47 +0100
Subject: [PATCH 2/2] changes done

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6b665aa..2f83612 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5503
 }