added about section

app/controllers/appRootController.js

@@ -6,6 +6,5 @@ app.controller('AppRootController',['$scope',function($scope){
     }else {
       $scope.isOpenMenu = true;
     }
-
   }
 }])

app/directives/about.js

@@ -0,0 +1,26 @@
+app.directive('about',['$document',function($document){
+  var link = function(scope, element, attr){
+    var aboutItemArr = element[0].querySelectorAll('.about-item');
+    var aboutItemArrJq = angular.element(aboutItemArr);
+    for (let i = 0; i < aboutItemArrJq.length; i++) {
+      let aboutItemJq = angular.element(aboutItemArrJq[i]);
+      aboutItemJq.on('mouseover', function(){
+        aboutItemJq.children()[0].style.transition = 'all 0.3s ease-in';
+        aboutItemJq.children()[1].style.transition = 'all 0.3s 0.3s ease-out';
+      })
+      aboutItemJq.on('mouseout', function(){
+        aboutItemJq.children()[0].style.transition = 'all 0.3s 0.3s ease-out';
+        aboutItemJq.children()[1].style.transition = 'all 0.3s ease-in';
+      })
+    }
+  }
+
+  return {
+    link: link,
+    restrict: 'E',
+    replace: true,
+    templateUrl: 'app/views/about.html',
+    controller: function($scope){
+    }
+  }
+}])

app/views/about.html

@@ -0,0 +1,50 @@
+<div class="about">
+  <div class="about-wrapper">
+    <h1>WHY CHOOSE US</h1>
+
+    <div class="about-item-wrapper">
+      <div class="about-item">
+        <div class="about-item-first-side">
+          <div class="about-item-img">
+            <i class="fa fa-medkit"></i>
+          </div>
+          <h2>HEALTHY FOOD</h2>
+          <div class="about-item-description">
+            Our food is low in sodium for proper treatment of high blood pressure, absent of processed flours and sugars.
+          </div>
+        </div>
+        <a href="#" class="about-item-second-side">
+          <span>Read more</span>
+        </a>
+      </div>
+      <div class="about-item">
+        <div class="about-item-first-side">
+          <div class="about-item-img">
+            <i class="fa fa-cutlery"></i>
+          </div>
+          <h2>GOOD TASTE</h2>
+          <div class="about-item-description">
+            Any time of day, any day of the week, have quick access to delicious nourishing <br>meals.
+          </div>
+        </div>
+        <a href="#" class="about-item-second-side">
+          <span>Read more</span>
+        </a>
+      </div>
+      <div class="about-item">
+        <div class="about-item-first-side">
+          <div class="about-item-img">
+            <i class="fa fa-fighter-jet"></i>
+          </div>
+          <h2>FAST DELIVERY</h2>
+          <div class="about-item-description">
+            Each item on our menu is delivered individually wrapped and delivered to your table promptly.
+          </div>
+        </div>
+        <a href="#" class="about-item-second-side">
+          <span>Read more</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

app/views/app-root.html

@@ -1,12 +1,12 @@
 <div ng-controller="AppRootController" ng-class="isOpenMenu?'open-menu' : 'close-menu'">
-  <div ng-click="toggleMenu()" class="overlay" ng-class="{'overlay-active': isOpenMenu}"></div>
   <div class="header-line">
+    <nav-menu toggle-menu="toggleMenu()" ng-class="isOpenMenu?'open-menu' : 'close-menu'"></nav-menu>
+    <div ng-click="toggleMenu()" class="overlay" ng-class="{'overlay-active': isOpenMenu}"></div>
     <i class="fa fa-bars" ng-click="toggleMenu()"></i>
     <div class="logo">
       Master Kitchen
     </div>
     <div class="undefined-btn"></div>
   </div>
-  <nav-menu toggle-menu="toggleMenu()" ng-class="isOpenMenu?'open-menu' : 'close-menu'"></nav-menu>
   <main ng-view></main>
 </div>

app/views/main-page.html

@@ -1,20 +1,4 @@
 <div class="main-page">
   <main-slider></main-slider>
-  <div class="about">
-    <div class="about-title">
-
-    </div>
-    <div class="about-description">
-
-    </div>
-    <div class="about-item">
-      <div class="about-item-name"></div>
-      <div class="about-item-description">
-
-      </div>
-      <div class="about-item-name-btn">
-        <a href="#">Check</a>
-      </div>
-    </div>
-  </div>
+  <about></about>
 </div>

content/css/styles.css

@@ -14,13 +14,22 @@
 /* fonts */
 
 body{
-  font-family: Helvetica;
+  font-family: "Helvetica Neue", Arial, sans-serif;
   margin: 0;
   overflow-x: hidden;
 }
 
 h1,h2,h3,p{
   margin: 0;
+  font-weight: bold;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 22px;
 }
 
 ul,li {
@@ -33,7 +42,7 @@ body * {
 }
 
 .overlay {
-  position: fixed;
+  position: absolute;
   width: 100%;
   height: 100vh;
   background-color: rgba(29,29,31,.6);
@@ -52,7 +61,7 @@ body * {
 /* header-line */
 .header-line {
   z-index: 2;
-  position: fixed;
+  position: -webkit-sticky;position: sticky;
   top: 0;
   width: 100%;
   height: 50px;
@@ -90,7 +99,7 @@ body * {
 
 /* navmenu */
 .nav-menu {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   height: 100vh;
@@ -189,15 +198,6 @@ body * {
 }
 /* navmenu */
 
-/* main-page */
-.main-page {
-  background: rgb(244, 244, 246);
-}
-.main-page .about {
-  height: 500px;
-}
-/* main-page */
-
 /* main-slider */
 .main-slider {
   height: 100vh;
@@ -321,3 +321,126 @@ body * {
   opacity: 0.7;
 }
 /* main-slider */
+
+/* main-page */
+.main-page {
+  margin-top: -50px;
+}
+
+.main-page .about h1,h2 {
+  font-weight: bolder;
+}
+
+.main-page .about {
+  font-family: "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 1.75px;
+  padding: 60px 0;
+  /* background: linear-gradient(to bottom,rgb(244, 244, 246), rgb(260, 260, 260)); */
+  background: rgb(244, 244, 246);
+}
+
+.main-page .about-wrapper {
+  margin: 0 auto;
+  width: 1180px;
+}
+
+.main-page .about h1 {
+  text-align: center;
+  font-size: 30px;
+  color: #2A2627;
+  margin-bottom: 80px;
+}
+
+.main-page .about h1::after {
+  content: '';
+  display: block;
+  position: relative;
+  top: 35px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  height: 2px;
+  width: 100px;
+  background-color: #000;
+}
+
+.main-page .about-description {
+  text-align: center;
+  margin-bottom: 35px;
+}
+
+.main-page .about-item-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.main-page .about-item {
+  width: 30%;
+  height: 283px;
+  position: relative;
+  z-index: 1;
+  perspective: 600px;
+
+}
+
+.main-page .about-item-first-side {
+  text-align: center;
+  background-color: #fff;
+  padding: 40px 30px;
+  box-shadow: 0 0 22px #cacaca;
+  /* border: 1px solid rgba(29, 29, 31,.1); */
+  position: absolute;
+  transform: rotateY(0deg);
+  background: linear-gradient(to top,rgb(247, 247, 247), rgb(260, 260, 260));
+}
+
+.main-page .about-item-second-side {
+  display: block;
+  position: absolute;
+  background-color: #1D1D1F;
+  padding: 40px 30px;
+  box-shadow: 0 0 22px #cacaca;
+  width: 100%;
+  height: 283px;
+  transform: rotateY(90deg);
+  text-align: center;
+  cursor: pointer
+}
+
+.main-page .about-item-second-side span {
+  display: inline-block;
+  color: #fff;
+  font-size: 29px;
+  margin-top: 85px;
+  transform: scale(-1, 1);
+  opacity: 0;
+  transition: all 1.6s ease;
+}
+
+.main-page .about-item:hover .about-item-first-side{
+  transform: rotateY(90deg);
+}
+
+.main-page .about-item:hover .about-item-second-side{
+  transform: rotateY(180deg);
+  opacity: 1;
+}
+
+.main-page .about-item:hover .about-item-second-side span {
+  opacity: 1;
+}
+
+.main-page .about-item-img {
+  margin-bottom: 35px;
+}
+
+.main-page .about-item-img i {
+  font-size: 50px;
+  color: #1D1D1F;
+}
+
+.main-page .about-item h2 {
+  color: #2A2627;
+  margin-bottom: 25px;
+}
+/* main-page */

index.html

@@ -12,6 +12,7 @@
     <script src="./app/controllers/AppRootController.js"></script>
     <script src="./app/controllers/MainPageController.js"></script>
     <script src="./app/directives/mainSlider.js"></script>
+    <script src="./app/directives/about.js"></script>
   </head>
   <body>
     <app-root ng-include="'./app/views/app-root.html'"></app-root>