CodeYourFuture · HadiyahL · May 6, 2020 · May 8, 2020 · May 8, 2020 · May 8, 2020
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Súrúlérè"
+    ]
+}
diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css
@@ -6,3 +6,138 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+* {
+  margin: 0;
+  padding: 0px;
+}
+body {
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+#header {
+  background-color: #f7cd95;
+  background-image: url("../images/sunset.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 75vh;
+  position: relative;
+}
+.navigation li {
+  list-style-type: none;
+  display: inline-block;
+  padding: 30px;
+}
+.navigation a {
+  text-decoration: none;
+}
+.navigation a:hover {
+  background-color: burlywood;
+  color: black;
+}
+.text {
+  color: wheat;
+  text-align: center;
+}
+.header-text {
+  position: absolute;
+  top: 60%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.title-desc {
+  margin-top: 20px;
+}
+#title {
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  font-size: 40px;
+
+  text-align: center;
+}
+#main {
+  background-color: #f0d8c1e3;
+}
+#about-section {
+  background-color: #f8ffe5;
+  margin-top: 50px;
+  padding: 50px 30px;
+}
+.about-imgbox {
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+  width: 60%;
+}
+#about-text {
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  font-style: italic;
+  width: 75%;
+  margin: auto;
+}
+.about-img {
+  padding-top: 30px;
+  width: 200px;
+  height: 150px;
+}
+#section-blog {
+  background-color: whitesmoke;
+  padding: 50px 30px;
+}
+.title {
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  font-size: 30px;
+  padding: 0px;
+}
+
+.article-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  width: 60%;
+  margin: 20px auto;
+  background-color: wheat;
+}
+.article-box:first-child {
+  color: #bd710e;
+}
+.image {
+  width: 200px;
+  height: 200px;
+  padding-right: 50px;
+}
+.article-title {
+  font-size: 20px;
+  padding-bottom: 20px;
+  color: rgb(204, 137, 30);
+}
+.article-text {
+  text-align: justify;
+  line-height: 1.2em;
+  padding-bottom: 20px;
+}
+.article-button {
+  background-color: black;
+  border: none;
+  border-radius: 2px;
+  color: burlywood;
+  cursor: pointer;
+  padding: 10px;
+}
+.article-button:hover {
+  background-color: chocolate;
+  color: black;
+}
+#footer {
+  height: 80px;
+  background-color: #080501;
+  padding-left: 30px;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-between;
+}
+.footer-title {
+  font-size: 14;
+  padding-top: 30px;
+  text-align: left;
+  vertical-align: center;
+}
diff --git a/week1/3-website/images/bench.jpg b/week1/3-website/images/bench.jpg
diff --git a/week1/3-website/images/coding.jpg b/week1/3-website/images/coding.jpg
diff --git a/week1/3-website/images/hijab.jpg b/week1/3-website/images/hijab.jpg
diff --git a/week1/3-website/images/lemon.jpg b/week1/3-website/images/lemon.jpg
diff --git a/week1/3-website/images/nature.jpg b/week1/3-website/images/nature.jpg
diff --git a/week1/3-website/images/path1.jpg b/week1/3-website/images/path1.jpg
diff --git a/week1/3-website/images/sunset.jpg b/week1/3-website/images/sunset.jpg
diff --git a/week1/3-website/index.html b/week1/3-website/index.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
+    <title>Súrúlérè | My Blog</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
@@ -17,6 +17,125 @@
   </head>
   <body>
     <!-- Add your HTML markup here -->
+
+    <!------------------Header-------------------->
+    <header id="header">
+      <nav>
+        <ul class="navigation">
+          <li><a href="#" class="text">Home</a></li>
+          <li><a href="#" class="text">Menu</a></li>
+          <li><a href="#" class="text">About Us</a></li>
+          <li><a href="#" class="text">Contact</a></li>
+        </ul>
+      </nav>
+      <div class="header-text text">
+        <h1 id="title">Súrúlérè</h1>
+        <p id="intro">...patience is rewarding</p>
+        <p class="title-desc">Life is a journey, come with me on mine...</p>
+      </div>
+    </header>
+
+    <main id="main">
+      <section id="about-section">
+        <h2 class="title">About</h2>
+        <p id="about-text">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid sunt
+          nulla dolores, assumenda similique aut dolorem eius iusto beatae
+          blanditiis laudantium omnis reprehenderit cum. Molestiae eligendi nam
+          porro sunt dolor architecto optio rerum possimus ipsa exercitationem
+          rem, quos voluptates animi quasi iure dignissimos sapiente dolorum
+          sequi, unde soluta voluptatibus. Delectus!
+        </p>
+        <div class="about-imgbox">
+          <img
+            class="about-img"
+            src="./images/hijab.jpg"
+            alt="woman in black hijab walking on a field"
+          />
+          <img
+            class="about-img"
+            src="./images/coding.jpg"
+            alt="html tags icon"
+          />
+          <img class="about-img" src="./images/nature.jpg" alt="seaside" />
+        </div>
+      </section>
+      <section id="section-blog">
+        <h2 class="title">Blog Articles</h2>
+        <div>
+          <article class="article-box">
+            <img class="image" src="./images/path1.jpg" alt="pathway" />
+            <div class="article-div">
+              <h3 class="article-title">Journey of a Thousand Miles ...</h3>
+              <p class="article-text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
+                accusamus itaque autem explicabo dolores, quaerat laudantium
+                laboriosam sunt omnis repellendus doloribus hic ab vel! Quam et
+                repudiandae nobis necessitatibus recusandae eveniet tempora quae
+                mollitia deleniti assumenda optio praesentium nam voluptate,
+                enim officia reprehenderit debitis quia, doloremque placeat ex
+                voluptatem. Cum!
+              </p>
+              <button class="article-button">Read more</button>
+            </div>
+          </article>
+          <article class="article-box">
+            <img
+              class="image"
+              src="./images/lemon.jpg"
+              alt="clear glass pitcher filled with clear liquid and slices of lemon"
+            />
+            <div>
+              <h3 class="article-title">
+                When life gives you lemons, you know what to do
+              </h3>
+              <p class="article-text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa
+                facilis iusto totam placeat reiciendis! Nulla, odit fugiat
+                tempora perferendis ipsum harum possimus reprehenderit
+                voluptates consequuntur cumque. Nulla laboriosam dicta aut
+                soluta rerum numquam, corrupti tempora ab cum, eaque
+                voluptatibus maxime illo ex dignissimos commodi suscipit labore
+                neque architecto cumque veniam.
+              </p>
+              <button class="article-button">Read more</button>
+            </div>
+          </article>
+          <article class="article-box">
+            <img
+              class="image"
+              src="./images/bench.jpg"
+              alt="bench in a beautiful green garden"
+            />
+            <div>
+              <h3 class="article-title">Take a Breather</h3>
+              <p class="article-text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+                expedita, sequi animi nemo aperiam qui enim quis. Atque modi
+                autem aliquid ducimus nam asperiores illo fuga eos! Harum esse
+                corrupti totam quis voluptas repellat consequatur itaque
+                eligendi, a nobis? Alias placeat deserunt repellendus nulla,
+                nobis ullam sit eligendi voluptatibus ut.
+              </p>
+              <button class="article-button">Read more</button>
+            </div>
+          </article>
+        </div>
+      </section>
+    </main>
+    <footer id="footer" class="footer-text">
+      <div class="footer-title text">
+        <h3 id="foot-header">Súrúlérè</h3>
+        <p>&copy; 2020 Súrúlérè Blog | All Rights Reserved</p>
+      </div>
+      <div class="footer-nav">
+        <ul class="navigation">
+          <li><a href="#" class="text">Privacy</a></li>
+          <li><a href="#" class="text">Terms & Conditions</a></li>
+          <li><a href="#" class="text">Advertise</a></li>
+        </ul>
+      </div>
+    </footer>
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
   </body>
 </html>