From 499e2c78843e0a26c4af3559c98ed66c00fa31c5 Mon Sep 17 00:00:00 2001
From: ayseakyol <ayseakyol.22309@gmail.com>
Date: Thu, 16 Jan 2020 20:59:08 +0100
Subject: [PATCH 1/2] css-exercise-1

---
 exercise-1/styles.css | 46 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/exercise-1/styles.css b/exercise-1/styles.css
index d40e73d..f96193a 100644
--- a/exercise-1/styles.css
+++ b/exercise-1/styles.css
@@ -63,3 +63,49 @@ body {
   margin-right: auto;
   max-width: 56em;
 }
+
+
+
+@media screen and (min-width: 600px){
+  
+
+  .grid__text {
+    grid-area: text;
+    padding-left: 150px;
+
+  }
+  .wrapper {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+.box {
+  margin: var(--grid);
+  min-height: calc(4 * var(--grid));
+  padding: var(--grid);
+  width: 80%;
+}
+
+
+.grid {
+  grid-template-areas:
+    "red text"
+    "black text";
+}
+
+}
+
+@media screen and (min-width: 900px){
+   
+    .grid {
+      display: grid;
+      grid-template-areas:
+        "black text red";
+    
+    }
+    .box {
+      margin-top: var(--grid);
+      min-height: calc(4 * var(--grid));
+    }
+
+    }
\ No newline at end of file

From 78d982d0534d8f77dbf04cf8ae04e6adebf17f1a Mon Sep 17 00:00:00 2001
From: ayseakyol <ayseakyol.22309@gmail.com>
Date: Fri, 31 Jan 2020 20:48:01 +0100
Subject: [PATCH 2/2] exercise-8

---
 exercise-8/styles.css | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/exercise-8/styles.css b/exercise-8/styles.css
index c0a2ac2..051915d 100644
--- a/exercise-8/styles.css
+++ b/exercise-8/styles.css
@@ -30,15 +30,35 @@ main {
 }
 
 .block {
+  display: flex;
+  width: 100%;
+}
+.ratio__16-9 {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+}
+iframe {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
 }
-
 .ratio__1-1::after {
   content: "1:1";
 }
+.ratio__1-1 {
+  width: 33.3%;
+  padding-top: 33.3%;
+}
 
 .ratio__2-1::after {
   content: "2:1";
 }
+.ratio__2-1 {
+  width: 66.6%;
+  padding-top: 33.3%;
+}
 
 .ratio__2-3::after {
   content: "2:3";
@@ -47,3 +67,7 @@ main {
 .ratio__3-2::after {
   content: "3:2";
 }
+.ratio__3-2 {
+  width: 100%;
+  padding-top: 66.6%;
+}