SallyMcGrath · humailhasankhan · May 22, 2021 · May 22, 2021 · Jun 2, 2021 · Jun 2, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/image-declan.png b/image-declan.png
diff --git a/image-humail.jpg b/image-humail.jpg
diff --git a/index.html b/index.html
@@ -1,24 +1,75 @@
 <!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> 
-      <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>
+<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 class="heading">Two Truths, One Lie</h1>
+      <p class="head-para">Can you guess which statement is false?</p>
+    </header>
+
+    <main>
+      <section class="each-person">
+        <article class="truth-lie">
+          <div class="name-container">
+            <div class="landscape-image">
+              <img
+                class="images"
+                src="./image-declan.png"
+                alt="declan's landscape image"
+              />
+            </div>
+            <div>
+              <h2 class="name-heading">Declan Heritage</h2>
+            </div>
+          </div>
+          <div class="truth-or-lie">
+            <ol class="list">
+              <li>I broke my own leg kicking someone</li>
+              <li>I have performed live as part of a band</li>
+              <li>I can back-flip</li>
+            </ol>
+          </div>
+        </article>
+      </section>
+      <section class="each-person">
+        <article class="truth-lie">
+          <div class="name-container">
+            <div class="landscape-image">
+              <img
+                class="images"
+                src="./image-humail.jpg"
+                alt="humail's landscape image"
+              />
+            </div>
+            <div>
+              <h2 class="name-heading">Humail Khan</h2>
+            </div>
+          </div>
+          <div class="truth-or-lie">
+            <ol class="list">
+              <li>I have already lived in four different countries</li>
+              <li>I have never flown a real plane</li>
+              <li>I have travelled 40 hours between two states in USA</li>
+            </ol>
+          </div>
+        </article>
+      </section>
+      <!-- how will you mark up your media objects -->
+    </main>
+    <footer>
+      <h3>Declan & Humail</h3>
+    </footer>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -30,4 +30,105 @@
 
 body {
   font: 100% "Poppins", sans-serif;
+  background-color: rgb(224, 224, 224);
+}
+
+main {
+  display: grid;
+  grid-template-rows: auto auto;
+  gap: 10px;
+}
+
+/* Use flex box row wrap with max-width 480px. don't go above 480px as a genral rule for two cards. Sallly added flex to the boby so two cards in the grid had lex to them */
+
+/* --Heading-- */
+.heading {
+  text-align: center;
+  padding: 10px;
+  font-size: 1.9em;
+}
+.head-para {
+  text-align: center;
+  padding: 10px;
+  font-size: 1.2em;
+}
+
+/* --Cards-- */
+.truth-lie {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 480px;
+}
+
+.name-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  padding: 20px;
+  font-size: small;
+  gap: 20px;
+}
+
+.images {
+  width: 80px;
+  height: 80px;
+}
+.name-heading {
+  width: 50px;
+}
+
+li {
+  margin: 10px;
+}
+section:first-child {
+  border: rgb(3, 3, 3) 5px solid;
+  background-color: rgb(133, 2, 2);
+  color: white;
+  font-weight: bold;
+}
+section:last-child {
+  border: rgba(8, 8, 8, 0.712) 5px solid;
+  background-color: rgb(194, 39, 39);
+  color: white;
+  font-weight: bold;
+}
+
+/* --FOOTER-- */
+
+footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+@media screen and (min-width: 960px) {
+  /* --MAIN-- */
+
+  main {
+    display: grid;
+    grid-template-columns: 480px 480px;
+    gap: 10px;
+    margin: 90px 20px;
+    justify-content: space-around;
+  }
+
+  /* --Cards-- */
+
+  .images {
+    width: 100px;
+    height: 100px;
+  }
+  .name-heading {
+    width: 250px;
+  }
+
+  /* --FOOTER-- */
+
+  footer {
+    font-size: 2em;
+  }
 }