SallyMcGrath · omerffaruk · May 28, 2021 · May 28, 2021 · May 28, 2021 · May 28, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/img/palmtree1.jpg b/img/palmtree1.jpg
diff --git a/img/palmtree2.jpg b/img/palmtree2.jpg
diff --git a/img/palmtree3.jpg b/img/palmtree3.jpg
diff --git a/index.html b/index.html
@@ -1,24 +1,80 @@
 <!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"
+    />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&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>
+       <p>Can you guess which one is a lie?</p>
+    </header>
+    <main>
+      <!-- how will you mark up your media objects -->
+      <section class="wrapper omer">
+        <div class="title">
+          <h2>Omer</h2>
+        </div>
+        <div class="tl">
+          <ol>
+            <li><p>I like Peaky Blinders</p></li>
+            <li><p>I drink four litres of water everyday</p></li>
+            <li><p>I watch NBA games every week</p></li>
+          </ol>
+          <div class="img-wrapper">
+            <img src="img/palmtree1.jpg" alt="palm tree" />
+          </div>
+        </div>
+      </section>
+      <section class="wrapper seyed">
+        <div class="title">
+          <h2>Seyed</h2>
+        </div>
+        <div class="tl">
+          <ol>
+            <li><p>I go for a run everyday of the week.</p></li>
+            <li><p>I have stopped eating fish.</p></li>
+            <li><p>I love watching football.</p></li>
+          </ol>
+          <div class="img-wrapper">
+            <img src="img/palmtree2.jpg" alt="palm tree" />
+          </div>
+        </div>
+      </section>
+      <section class="wrapper sean">
+        <div class="title">
+          <h2>Sean</h2>
+        </div>
+        <div class="tl">
+          <ol>
+            <li>
+              <p>I was once shot at by somebody who thought I was a fox.</p>
+            </li>
+            <li><p>I’ve spent some time at Chernobyl.</p></li>
+            <li><p>I’m originally from Wales.</p></li>
+          </ol>
+          <div class="img-wrapper">
+            <img src="img/palmtree3.jpg" alt="palm tree" />
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <h3>by Omer, Seyed and Sean</h3>
+    </footer>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -28,6 +28,133 @@
 * take a screenshot at laptop and Moto G4 device sizes in Devtools
 */
 
+/* General styles */
+:root {
+  --spacing: clamp(1vw, calc(10px + 1vw), 2vw);
+  --omercolor: #8a0012;
+  --seyedcolor: #004931;
+  --seancolor: #004a55;
+  --background: #eff6e0;
+}
 body {
-  font: 100% "Poppins", sans-serif;
+  font: 100% "Newsreader", "Poppins", sans-serif;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: var(--background);
+}
+header {
+  margin-top: 2rem;
+  text-align: center;
+}
+header p {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+h1, h2, h3, h4 {
+  padding: 0;
+}
+/* Main */
+main {
+  display: grid;
+  gap: var(--spacing);
+  grid-template-areas:
+  ". . . . . ."
+  ". omer omer seyed seyed ."
+  ". . sean sean . ."
+  ". . . . . ."
+  ;
+  justify-items: stretch;
+}
+main > section {
+  display: flex;
+  flex-flow: column nowrap;
+}
+.title > h2 {
+  text-align: center;
+}
+.tl {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+.img-wrapper img {
+  max-width: 210px;
+  max-height: 140px;
+  border: 2px solid;
+  border-radius: 3%;
+}
+.omer, .sean, .seyed {
+  color: #fff;
+  font-weight: 500;
+}
+.img-wrapper {
+  margin-left: 0.5rem;
+}
+.omer {
+  background-color: var(--omercolor);
+  grid-area: omer;
+  transition: opacity 1s ease 0sn;
 }
+.seyed {
+  background-color: var(--seyedcolor);
+  grid-area: seyed;
+}
+.sean {
+  background-color: var(--seancolor);
+  grid-area: sean;
+}
+.tl ol {
+  margin: 0;
+  padding: 0;
+  padding-left: 1rem;
+}
+
+/* Footer */ 
+footer {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+/* Media queries */ 
+@media screen and (min-width: 250px) and (max-width: 600px) {
+  main {
+    grid-template-areas: 
+    ". . . . . . "
+    ". omer omer omer omer ."
+    ". seyed seyed seyed seyed ."
+    ". sean sean sean sean ."
+    ". . . . . ."
+    ;
+
+  }
+  .img-wrapper img {
+    max-width: 120px;
+    max-height: auto;
+  }
+  .tl ol {
+    padding-left: 0.5rem;
+  }
+}
+
+@media screen and (min-width: 601px) and (max-width: 800px) {
+  main {
+    display: flex;
+    flex-flow: column wrap;
+  }
+  .img-wrapper img {
+    max-width: 135px;
+    max-height: auto;
+  }
+}
+
+@media screen and (min-width: 801px) and (max-width: 1100px) {
+  .img-wrapper img {
+    max-width: 150px;
+    max-height: auto;
+  }
+}
+
+