CodeYourFuture · maham511 · May 18, 2021 · May 18, 2021 · May 18, 2021 · May 18, 2021
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,86 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+body {
+  margin: 100px;
+  font-family: Arial, Helvetica, sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 0.9rem;
+}
+
+a {
+  color: rgb(35, 70, 55);
+}
+
+a:hover {
+  color: rgb(79, 117, 101);
+}
+
+header {
+  box-shadow: 0 4px 5px 0 rgba(255, 138, 18, 45%);
+  text-align: center;
+
+  margin: -70px -20px 30px;
+  padding-bottom: 20px;
+  background-color: #e9967a;
+}
+
+/* Blog title and article titles*/
+h1,
+h3 {
+  font-family: "Pacifico", cursive;
+}
+
+h2 {
+  font-size: 1rem;
+  font-weight: 200;
+  padding: 0px 35px;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+/*1st article heading*/
+#article1 {
+  font-size: 1.6rem;
+}
+
+section {
+  box-shadow: 3px 0 5px 0 rgba(0, 0, 0, 0.2);
+  margin-top: 60px;
+  padding: 10px 20px;
+  width: 80%vw;
+}
+
+/* 1st article title stands out */
+main section:first-child {
+  background: #e9967ae2;
+}
+
+img {
+  height: 320px;
+  width: 500px;
+}
+
+.caption {
+  color: rgb(70, 67, 67);
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+footer {
+  display: flex;
+  flex-direction: row;
+  margin-top: 80px;
+}
+
+footer p {
+  padding: 20px;
+  font-size: 12px;
+  position: relative;
+  left: 30vw;
+}
diff --git a/images/annie-spratt-S7viz8JWxwY-unsplash (1).jpg b/images/annie-spratt-S7viz8JWxwY-unsplash (1).jpg
diff --git a/images/designecologist-csVPdj60E1A-unsplash.jpg b/images/designecologist-csVPdj60E1A-unsplash.jpg
diff --git a/images/sven-brandsma-VTXAZBTWu0g-unsplash.jpg b/images/sven-brandsma-VTXAZBTWu0g-unsplash.jpg
diff --git a/index.html b/index.html
@@ -1,22 +1,136 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>My Blog</title>
+    <link
+      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+
+    <header>
+      <h1>Houseplant Care for Newbies</h1>
+      <h2>
+        A safespace for anyone new to to the weird and wonderful world of indoor
+        plants. Grab a cuppa, and let's get cracking!
+      </h2>
+    </header>
+
+    <main>
+      <section>
+        <h3 id="article1">
+          <a href="https://google.com">Types of Indoor Plants</a>
+        </h3>
+
+        <img
+          src="images/annie-spratt-S7viz8JWxwY-unsplash (1).jpg"
+          alt="plants in a row"
+        />
+
+        <p class="caption">
+          Photo by
+          <a
+            href="https://unsplash.com/@anniespratt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
+            >Annie Spratt</a
+          >
+          on
+          <a
+            href="https://unsplash.com/s/photos/indoor-plants?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
+            >Unsplash</a
+          >
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et
+          diam mi. Proin posuere neque sit amet felis convallis aliquet. Etiam
+          pellentesque ipsum leo, consequat maximus justo aliquet eu. Fusce
+          aliquam vulputate congue. Aenean sed consectetur purus, sit amet
+          lacinia turpis. Aenean tempor dui a porttitor cursus. Quisque ac
+          aliquam justo, eu iaculis enim.
+        </p>
+      </section>
+
+      <section>
+        <h3><a href="https://google.com">How and When to Water</a></h3>
+
+        <img
+          src="images/designecologist-csVPdj60E1A-unsplash.jpg"
+          alt="plants on a table"
+        />
+
+        <p class="caption">
+          Photo by
+          <a
+            href="https://unsplash.com/@seffen99?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
+            >Sven Brandsma</a
+          >
+          on
+          <a
+            href="https://unsplash.com/s/photos/indoor-plants?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
+            >Unsplash</a
+          >
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et
+          diam mi. Proin posuere neque sit amet felis convallis aliquet. Etiam
+          pellentesque ipsum leo, consequat maximus justo aliquet eu. Fusce
+          aliquam vulputate congue. Aenean sed consectetur purus, sit amet
+          lacinia turpis. Aenean tempor dui a porttitor cursus. Quisque ac
+          aliquam justo, eu iaculis enim.
+        </p>
+      </section>
+
+      <section>
+        <h3><a href="https://google.com">Pruning Your Plant</a></h3>
+
+        <img
+          src="images/sven-brandsma-VTXAZBTWu0g-unsplash.jpg"
+          alt="plants on a table"
+        />
+
+        <p class="caption">
+          Photo by
+          <a
+            href="https://unsplash.com/@seffen99?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
+            >Sven Brandsma</a
+          >
+          on
+          <a
+            href="https://unsplash.com/s/photos/indoor-plants?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
+            >Unsplash</a
+          >
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et
+          diam mi. Proin posuere neque sit amet felis convallis aliquet. Etiam
+          pellentesque ipsum leo, consequat maximus justo aliquet eu. Fusce
+          aliquam vulputate congue. Aenean sed consectetur purus, sit amet
+          lacinia turpis. Aenean tempor dui a porttitor cursus. Quisque ac
+          aliquam justo, eu iaculis enim.
+        </p>
+      </section>
+    </main>
+
+    <footer>
+      <p><a href="https://google.com">Sitemap</a></p>
+      <p><a href="https://google.com">Contact</a></p>
+      <p><a href="https://google.com">Privacy</a></p>
+    </footer>
+  </body>
+</html>