meal part 1

Author: FahimFBA

index.html

@@ -91,6 +91,56 @@ <h3>Order  anything</h3>
               </div>
 
           </section>
+          
+          <section class="section-meals">
+              <ul class="meals-showcase">
+                  <li>
+                      <figure class="meal-photo">
+                          <img src="resources/img/Rainy%20Roof%20Signature%20Meal.jpg"  alt="Rainy Roof Signature Mea" >
+                      </figure>
+                  </li>
+                  <li>
+                      <figure class="meal-photo">
+                          <img src="resources/img/Malai%20Kebab.jpg"  alt="Malai Kebab" >
+                      </figure>
+                  </li>
+                  <li>
+                      <figure class="meal-photo">
+                          <img src="resources/img/cashew%20nut%20salad.jpg"  alt="Cashew Nut Salad" >
+                      </figure>
+                  </li>
+                  <li>
+                      <figure class="meal-photo">
+                          <img src="resources/img/Arabic%20Grilled%20Lamb.jpg"  alt="Arabic Grilled Lamb" >
+                      </figure>
+                  </li>
+                  
+                  
+              </ul>
+              
+              <ul class="meals-showcase">
+                  <li>
+                      <figure class="meal-photo">
+                          <img src="resources/img/Mixed%20Grill%20Platter.jpg"  alt="Mixed Grill Platter" >
+                      </figure>
+                  </li>
+                  <li>
+                      <figure class="meal-photo">
+                          <img src="resources/img/Hydrabadi%20biriyani.jpg"  alt="Hydrabadi biriyani" >
+                      </figure>
+                  </li>
+                  <li>
+                      <figure class="meal-photo">
+                          <img src="resources/img/Beef%20Sirloin%20Steak.jpg"  alt="Beef Sirloin Steak" >
+                      </figure>
+                  </li>
+                  <li>
+                      <figure class="meal-photo">
+                          <img src="resources/img/Fish%20FIllet%20Steak.jpg"  alt="Fish FIllet Steak" >
+                      </figure>
+                  </li>
+              </ul>
+          </section>
 
 
 

resources/css/style.css

@@ -226,11 +226,31 @@ header {
 }
 
 
+/* ------------------------------------------- */
+/* MEALS */
+/* ------------------------------------------- */
 
 
+.meals-showcase {
+    list-style: none;
+    width: 100%;
+}
 
+.meals-showcase li {
+    display: block;
+    float: left;
+    width: 25%;
+    
+}
 
+.meal-photo {
+    width: 100%;
+    margin: 0;
+}
 
+.meal-photo img {
+    width: 100%;
+}