CodeYourFuture · Melesegithub · Jan 25, 2023
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,95 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+  * {
+    margin: 0;
+    padding: 0;
+  }
+  pre{
+    color:black;
+    font-size:medium;
+    text-align: center;
+  }
+  a{
+    text-decoration: none;
+    color: white;
+  }
+  li{
+    list-style: none;
+  }
+ body {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.8rem; /* 18px */
+    font-weight: 400;
+    line-height: 1.4;
+    color: white;
+    background-image: url("/images/coffeepicture.jpg");
+    background-size: 100%;
+
+  }
+  h1,
+  h2 {
+    font-family: 'Raleway', sans-serif;
+    font-weight: 700;
+    text-align: center;
+  }
+  h3{
+    font-family: 'Raleway', sans-serif;
+    font-weight: 700;
+    text-align: center;
+    color: black;
+
+  }
+
+  h1 {
+    font-size: 6rem;
+  }
+
+  h2 {
+    font-size: 4.2rem;
+    color:black;
+  }
+  .header {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: #481f01;
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
+    z-index: 10;
+  }
+  .item1 { grid-area: header; }
+
+
+.item2{ grid-area: right;}
+.item3 { grid-area: footer; }
+
+.grid-container {
+  display: grid;
+  grid-template-areas:
+    'header header header header header header'
+    'right right right right right right'
+    'footer footer footer footer footer footer';
+  gap: 0px;
+  padding: 10px;
+  margin-top: 1000px;
+  margin-left: 100px;
+  margin-right: 100px;
+}
+
+.grid-container > div {
+  background-color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  padding: 20px 0;
+  font-size: 30px;
+}
+footer{
+  margin-top: 500px;
+   padding: 20px;
+  text-align: center;
+  background: #481f01;
+  color: white;
+
+}
diff --git a/images/coffeelogo.jpg b/images/coffeelogo.jpg
diff --git a/images/coffeepicture.jpg b/images/coffeepicture.jpg
diff --git a/images/coffeepicture2.jpg.crdownload b/images/coffeepicture2.jpg.crdownload
diff --git a/images/coffeepicture3.jpeg b/images/coffeepicture3.jpeg
diff --git a/images/coffeepicture4.jpeg b/images/coffeepicture4.jpeg
diff --git a/images/coffeepicture5.jpeg b/images/coffeepicture5.jpeg
diff --git a/images/ethiopian-coffee-ceremony.jpg b/images/ethiopian-coffee-ceremony.jpg
diff --git a/images/harar.jpg b/images/harar.jpg
diff --git a/images/sidamo.jpg b/images/sidamo.jpg
diff --git a/images/yirgachefee.jpg b/images/yirgachefee.jpg
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+re<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -16,7 +16,54 @@
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <!-- Add your HTML markup here -->
+    <header class="header"><h1>Coffee Blog</h1></header>
+    <div class="grid-container">
+      <div class="item1"><h2>The History of Coffee</h2></div>
+
+
+      <div class="item2"><img style="margin-bottom: 20px;"src="/images/coffeepicture5.jpeg">
+        <p style=color:black;>Coffee grown worldwide can trace its heritage back centuries to the ancient coffee forests on the Ethiopian plateau. There, legend says the goat herder Kaldi first discovered the potential of these beloved beans. 
+
+        The story goes that 
+        Kaldi discovered coffee after he noticed that after eating the berries from a certain tree, his goats became so energetic that they did not want to sleep at night. 
+
+        Kaldi reported his findings to the abbot of the local monastery, who made a drink with the berries and found that it kept him alert through the long hours of evening prayer. The abbot shared his discovery with the other monks at the monastery, and knowledge of the energizing berries began to spread.
+
+        As word moved east and coffee reached the Arabian peninsula, it began a journey which would bring these beans across the globe</p></div>
+      <div class="item3"><pre><button style="background-color:black;color:white;width:100%;padding:30px;font-size:xx-large"><a href="https://en.wikipedia.org/wiki/Coffee_ceremony_of_Ethiopia_and_Eritrea">Read More...</a></button></div>
+    </div>
+    <div class="grid-container">
+      <div class="item1"><h2>Coffee Ceremony</h2></div>
+
+
+      <div class="item2"><img style="margin-bottom: 20px;"src="/images/coffeepicture3.jpeg">
+        <p style=color:black;>Coffee ceremony of Ethiopia and Eritrea is a core cultural custom in Ethiopia and Eritrea. There is a routine of serving coffee daily, mainly for the purpose of getting together with relatives, neighbors, or other visitors. If coffee is politely declined, then tea will most likely be served.
+
+          Loose grass is spread on the floor where the coffee ceremony is held, often decorated with small yellow flowers. Composite flowers are sometimes used, especially around the celebration of Meskel (an Orthodox Holiday celebrated by Eritreans and Ethiopians).
+
+          Brewing
+          The ceremony is typically performed by the woman of the household and is considered an honor.[1] The coffee is brewed by first roasting the green coffee beans over an open flame in a pan.[2][3] This is followed by the grinding of the beans, traditionally in a wooden mortar and pestle.[3] The coffee grounds are then put into a special vessel which contains boiling water and will be left on an open flame for a couple of minutes until it is well mixed with the hot water.[2] After grinding, the coffee is put through a sieve several times.[3] The boiling pot (jebena) is usually made of pottery and has a spherical base, a neck and pouring spout, and a handle where the neck connects with the base.[3] The jebena also has a straw lid.[3]
+
+          </p></div>
+      <div class="item3"><pre><button style="background-color:black;color:white;width:100%;padding:30px;font-size:xx-large"><a href="https://en.wikipedia.org/wiki/Coffee_ceremony_of_Ethiopia_and_Eritrea">Read More...</a></button></div>
+    </div>
+    <div class="grid-container">
+      <div class="item1"><h2>The Best Ethiopian Coffee Beans
+      </h2></div>
+
+
+      <div class="item2">
+        <ul>
+          <li><h3>Yirgacheffe Coffee.</h3><img style="margin-bottom: 20px;"src="/images/yirgachefee.jpg"></li>
+          <li><h3>Organic Sidamo Coffee.</h3><img style="margin-bottom: 20px;"src="/images/sidamo.jpg"></li>
+          <li><h3>Harar Coffee</h3><img style="margin-bottom: 20px;"src="/images/harar.jpg"></li>
+
+        </ul></div>
+      <div class="item3"><pre><button style="background-color:black;color:white;width:100%;padding:30px;font-size:xx-large"><a href="https://www.ncausa.org/about-coffee/history-of-coffee#:~:text=An%20Ethiopian%20Legend,potential%20of%20these%20beloved%20beans.">Read More...</a></button></div>
+    </div>
+
+    <footer><h1>Melese@coffeeblog.com</h1></footer>
+        <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
   </body>
 </html>