Merge pull request #16 from Nez27/feature/service-html

Implement html layout service section.

practice/practice-02/src/index.pug

@@ -22,3 +22,4 @@ html(lang="en")
           include layouts/nav-menu
     include layouts/welcome
     include layouts/offer
+    include layouts/service

practice/practice-02/src/layouts/service.pug

@@ -0,0 +1,49 @@
+- var service_img_path = "./assets/images/service/";
+- var list_service_category = [{url_icon : service_img_path + "icon-1.png", content: "Online order"}, {url_icon : service_img_path + "icon-3.png", content: "Pre-Reservation"}, {url_icon : service_img_path + "icon-3.png", content: "Super chef"}, {url_icon : service_img_path + "icon-2.png", content: "24/7 Service"}, {url_icon : service_img_path + "icon-3.png", content: "Oragonized foodhut place"}, {url_icon : service_img_path + "icon-3.png", content: "Clean Kitchen"}];
+
+section.service
+  .service__container
+    .service__background-color
+    .service__img-container
+      picture
+        source(
+          media="(min-width: 1200px)",
+          srcset=service_img_path + "background-desktop.png"
+        )
+        img.service__background-img(
+          src=service_img_path + "background-mobile.png",
+          alt="Background image"
+        )
+      picture
+        source(
+          media="(min-width: 1200px)",
+          srcset=service_img_path + "main-character-desktop.png"
+        )
+        img.service__main-img(
+          src=service_img_path + "main-character-mobile.png",
+          alt="Main character image"
+        )
+      picture
+        source(
+          media="(min-width: 1200px)",
+          srcset=service_img_path + "vegetable-desktop.png"
+        )
+        img.service__vegetable-img(
+          src=service_img_path + "vegetable-mobile.png",
+          alt="Vegetable background image"
+        )
+    .service__content
+      h2.service__heading We are
+        = " "
+        span.primary-text more
+        = " than "
+        span.secondary-text multiple
+        = " service"
+      p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food
+      .service__category
+        .service__category-list
+          each val in list_service_category
+            .service__category-item
+              img.service__icon-category(src=val.url_icon, alt="Icon category")
+              p.service__name-category= val.content
+      a.service__btn.btn(href="javascript:void(0)") About us