SallyMcGrath · myaskylar · May 23, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/image/black-pup.jpeg b/image/black-pup.jpeg
diff --git a/image/brown-pup.jpeg b/image/brown-pup.jpeg
diff --git a/image/konika-sec.jpg b/image/konika-sec.jpg
diff --git a/image/mya-sec.jpg b/image/mya-sec.jpg
diff --git a/index.html b/index.html
@@ -1,24 +1,60 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title>Our Grid Project</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="styles.css">
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
-    </head>
-    <body>
-  <header> 
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Our Grid Project</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header>
       <h1>Two Truths, One Lie</h1>
-  </header>
-  <main>
-    <!-- how will you mark up your media objects -->
-  </main>
-  <footer>
-    <h3>By YOUR NAMES HERE</h3>
-  </footer>
-    </body>
-</html>
+      <h2>Can you guess which statement is false?!</h2>
+    </header>
+    <main>
+      <!-- how will you mark up your media objects -->
+
+      <!--section for konika-->
+      <section>
+        <img
+          class="img-grid"
+          src="./image/brown-pup.jpeg"
+          alt="img of puppy"
+
+        />
+        <h3 class="name">konika</h3>
+        <ol class="option">
+          <li> Lorem ipsum dolor sit. </li>
+          <li>Lorem ipsum dolor sit amet consectetur.</li>
+          <li>Lorem ipsum dolor sit amet consectetur.</li>
+        </ol>
+      </section>
+
+      <!--section for mya-->
+      <section>
+        <img
+          class="img-grid"
+          src="./image/black-pup.jpeg"
+          alt="img of puppy2"
+
+        />
+        <h3 class="name">Mya</h3>
+        <ol class="option">
+          <li>I love sports.</li>
+          <li>I'm not a spicy foods lover.</li>
+          <li>I speak Malay language fluently.</li>
+        </ol>
+      </section>
+    </main>
+    <footer>
+      <h3>By Konika and Mya</h3>
+    </footer>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -30,4 +30,92 @@
 
 body {
   font: 100% "Poppins", sans-serif;
+  background-color: rgb(247, 213, 162);
+}
+
+header {
+  text-align: center;
+}
+
+main {
+  display: flex;
+  justify-content: space-around;
+  margin: 40px 40px;
+}
+
+section {
+  margin-top: 150px;
+  padding: 20px;
+  border: 1px solid rgb(243, 89, 115);
+  width: 35%;
+  display: grid;
+  gap: 20px;
+  background-color: rgb(186, 233, 252);
+  grid-template-areas:
+    "box1 box2 box2"
+    "box3 box3 box3";
+}
+
+img {
+  grid-area: box1;
+  width: 100%;
+}
+
+/*.img-grid {
+  grid-area: box1;
+}*/
+
+.name {
+  grid-area: box2;
+  padding-right: 70px;
+}
+
+.option {
+  grid-area: box3;
+  font-size: large;
+}
+
+footer {
+  margin-top: 150px;
+  text-align: center;
+}
+
+@media screen and (max-width: 600px) {
+  main {
+    display: flex;
+    flex-direction: column;
+    margin: 20px 20px;
+  }
+
+  section {
+    width: 350px;
+    margin-top: 30px;
+  }
+
+  footer {
+    margin-top: 20px;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  body {
+    background-color: darkolivegreen;
+  }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    margin: 10px 10px;
+  }
+
+  section {
+    width: 280px;
+    margin-top: 30px;
+    background-color: black;
+    color: chartreuse;
+  }
+
+  footer {
+    margin-top: 20px;
+  }
 }