SallyMcGrath · alibvr · Jun 4, 2021 · lm93547 · Dec 1, 2021 · lm93547
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/index.html b/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<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="description" content="Two Truths, One Lie, By Anza and Ali">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="styles.css">
         <link rel="preconnect" href="https://fonts.gstatic.com">
@@ -13,12 +13,30 @@
     <body>
   <header> 
       <h1>Two Truths, One Lie</h1>
+      <p>Can you guess which statemenet is false?</p>
   </header>
   <main>
-    <!-- how will you mark up your media objects -->
+    <article>
+      <img src="/pexels-nicollazzi-xiong-668353.jpg" alt="zen stones">
+      <h2>Anza Azam</h2>
+      <ol>
+        <li>I have been to Europe</li>
+        <li>I once slept on train</li>
+        <li>I have a fear of cats</li>
+      </ol>
+    </article>
+    <article>
+      <img src="/pexels-tomáš-malík-3408354.jpg" alt="Red and Grey Pagoda temple">
+      <h2>Ali Bavarsad</h2>
+      <ol>
+        <li>I have been to south America.</li>
+        <li>I'm intrested in philosophy.</li>
+        <li>I prefer beach holidays rather than hiking trips.</li>
+      </ol>
+    </article>
   </main>
   <footer>
-    <h3>By YOUR NAMES HERE</h3>
+    <h3>By Anza and Ali</h3>
   </footer>
     </body>
 </html>
diff --git a/pexels-nicollazzi-xiong-668353.jpg b/pexels-nicollazzi-xiong-668353.jpg
diff --git a/pexels-tomáš-malík-3408354.jpg b/pexels-tomáš-malík-3408354.jpg
diff --git a/styles.css b/styles.css
@@ -28,6 +28,118 @@
 * take a screenshot at laptop and Moto G4 device sizes in Devtools
 */
 
+/* main style */
+
 body {
   font: 100% "Poppins", sans-serif;
+  /* background: url(/pexels-abdullah-ghatasheh-1631677.jpg) */
+  background-color: #112141;
+}
+
+*{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #ffffff;
+}
+
+header{
+  padding-top: 3rem;
+  text-align: center;
+}
+
+h1{
+  font-size: 2rem;
+}
+
+h2{
+  font-size: 1rem;
+  font-weight: bolder;
+  color: rgb(0, 0, 0);
+  /* border: px solid #fff; */
+  border-radius: 3rem;
+  text-align: center;
+  background-color: #e6da3f;
+  padding: 2px 20px;
+}
+
+header p{
+  font-size: 1rem;
+}
+
+main{
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+main article{
+  background-color: #112141;
+  border: 5px solid #fff;
+  display: grid;
+  grid-gap: 2rem;
+  grid-template-columns: 1fr 2fr;
+  grid-column: 1fr 1fr;
+  align-items: center;
+  padding: 2rem;
+  margin: 5rem auto;
+  width: 35vw;
+  border-radius: 1rem;
+}
+
+article ol{
+  list-style-position: inside;
+  grid-column: 1/3;
+}
+
+article li {
+  font-size: 1.5rem;
+}
+article h2 {
+  font-size: 2rem;
+  font-weight: normal;
+}
+article img {
+  border-radius: 1rem;
+  width: 100%;
+  /* height: 100%; */
+  justify-self: stretch;
+  align-self:stretch;
+}
+footer h3 {
+  font-size: 1rem;
+  text-align: center;
+  padding: 1rem;
+}
+
+/* responsive design */
+
+@media screen and (max-width:1200px){
+  main article {
+    grid-template-columns: 3fr 5fr;
+    grid-template-rows: 1fr 2fr;
+  }
+}
+@media screen and (max-width:1024px){
+  main {
+    flex-direction: column;
+  }
+  main article {
+    /* grid-template-columns: 3fr 5fr; */
+    grid-template-rows: 1fr 1fr;
+    margin: 6rem auto;
+    width: 80%;
+  }
+}
+@media screen and (max-width:768px){
+  html {
+    font-size: 12px;
+  }
+  article img {
+    align-self: center;
+  }
 }
+@media screen and (max-width:500px) {
+  html {
+    font-size: 8px;
+  }