Merge pull request #5 from FahimFBA/development

Development

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/Grilled%20Lobster.jpg"  alt="Grilled Lobster" >
+                      </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,6 +226,59 @@ header {
 }
 
 
+/* ------------------------------------------- */
+/* FEATURES */
+/* ------------------------------------------- */
+
+.section-features .long-copy {
+    margin-bottom: 30px;
+}
+
+
+/* ------------------------------------------- */
+/* MEALS */
+/* ------------------------------------------- */
+
+.section-meals {
+    padding: 0;
+}
+
+.meals-showcase {
+    list-style: none;
+    width: 100%;
+}
+
+.meals-showcase li {
+    display: block;
+    float: left;
+    width: 25%;
+    
+}
+
+.meal-photo {
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    background-color: #000;
+}
+
+.meal-photo img {
+    opacity: 0.7;
+    width: 100%;
+    height: auto;
+    transform: scale(1.15);
+    transition: transform 0.5s, opacity 0.5s;
+}
+
+.meal-photo img:hover {
+    opacity: 1;
+    transform: scale(1.03);
+}
+
+
+
+
+