added loyalty section, footer and preloader screen

app/app.js

@@ -8,5 +8,4 @@ app.config(['$routeProvider', function($routeProvider){
     }).otherwise({
       redirectTo: '/'
     })
-
 }])

app/controllers/appRootController.js

@@ -1,4 +1,16 @@
-app.controller('AppRootController',['$scope',function($scope){
+app.controller('AppRootController',['$scope','$window','$timeout',function($scope,$window,$timeout){
+  var window = angular.element($window);
+  $scope.load = function(){
+    $timeout(function(){
+      var preloader = angular.element(document.querySelector('.preload-screen'));
+      preloader.css('opacity','0');
+    },2700)
+    $timeout(function(){
+      var preloader = angular.element(document.querySelector('.preload-screen'));
+      preloader.css('display','none');
+    },3700)
+  }
+
   $scope.isOpenMenu = false;
   $scope.toggleMenu = function(){
     if($scope.isOpenMenu){

app/directives/footer.js

@@ -0,0 +1,7 @@
+app.directive('footer',[function(){
+  return {
+    restrict: 'E',
+    replace: true,
+    templateUrl: 'app/views/footer.html',
+  }
+}])

app/directives/loyaltyPrograms.js

@@ -0,0 +1,7 @@
+app.directive('loyaltyPrograms',[function(){
+  return {
+    restrict: 'E',
+    replace: true,
+    templateUrl: 'app/views/loyalty-programs.html'
+  }
+}])

app/directives/scroll.js

@@ -6,9 +6,13 @@ app.directive('scroll', ['$window','$timeout',function($window,$timeout) {
       offsetSecond: '@',
       scrollClass: '@',
       scrollClassSecond: '@',
-      scrollClassThird: '@'
+      scrollClassThird: '@',
+      isOnce: '='
     },
     link: function(scope, element) {
+
+      // костыли
+
       var canIHover = function(){
         element.removeClass(scope.scrollClassThird);
         $timeout(function(){
@@ -17,12 +21,22 @@ app.directive('scroll', ['$window','$timeout',function($window,$timeout) {
       }
       var windowJQ = angular.element($window)
       windowJQ.bind("scroll", function() {
-          if (window.pageYOffset >= parseInt(scope.offset)) {
+          if (window.pageYOffset >= parseInt(scope.offset)){
+            if(scope.isOnce){
+              $timeout(function(){
+                var circleFrontArr = document.querySelectorAll('.loyalty-programs-item-circle-back');
+                for (var i = 0; i < circleFrontArr.length; i++) {
+                  circleFrontArr[i].style.opacity = '0';
+                }
+              },300)
+            }
             element.addClass(scope.scrollClass);
             canIHover();
           } else {
-            element.removeClass(scope.scrollClass);
-            canIHover();
+            if(!scope.isOnce){
+              element.removeClass(scope.scrollClass);
+              canIHover();
+            }
           }
 
           if(window.pageYOffset >= parseInt(scope.offsetSecond)){

app/views/app-root.html

@@ -1,7 +1,12 @@
-<div ng-controller="AppRootController" ng-class="isOpenMenu?'open-menu' : 'close-menu'">
+<div ng-controller="AppRootController" ng-class="isOpenMenu?'open-menu' : 'close-menu'" ng-init="load()">
   <div class="header-line">
+    <!-- Fixed elements -->
     <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>
+    <div class="preload-screen">
+      <img src="content\images\preloader\Double Ring-1s-200px.gif">
+    </div>
+    <!-- Fixed elements -->
     <i class="fa fa-bars" ng-click="toggleMenu()"></i>
     <div class="logo">
       Master Kitchen

app/views/footer.html

@@ -0,0 +1,37 @@
+<div class="footer">
+  <div class="footer-wrapper">
+    <div class="footer-icons">
+      <div class="footer-icon">
+        <a href="#">
+          <i class="fa fa-facebook"></i>
+          <i></i>
+        </a>
+      </div>
+      <div class="footer-icon">
+        <a href="#">
+          <i class="fa fa-instagram"></i>
+          <i></i>
+        </a>
+      </div>
+      <div class="footer-icon">
+        <a href="#">
+          <i class="fa fa-twitter"></i>
+          <i></i>
+        </a>
+      </div>
+    </div>
+    <div class="footer-navbar">
+      <ul>
+        <li><a href="#!/">Main page</a></li>
+        <li><a href="#">Customize menu</a></li>
+        <li><a href="#">Ready menus</a></li>
+        <li><a href="#">Delivery</a></li>
+        <li><a href="#">About us</a></li>
+        <li><a href="#">Contacts</a></li>
+      </ul>
+    </div>
+    <div class="footer-copyright">
+      Copyright © 2018 Master Kitchen Inc. All rights reserved. | Terms and Conditions | Privacy Policy
+    </div>
+  </div>
+</div>

app/views/loyalty-programs.html

@@ -0,0 +1,75 @@
+<div class="loyalty-programs">
+  <div class="loyalty-programs-wrapper">
+    <h1 class="loyalty-programs-title">
+      Loyalty programs
+    </h1>
+    <div class="loyalty-programs-item-wrapper">
+      <div class="loyalty-programs-item">
+        <div class="loyalty-programs-item-circle">
+          <div class="loyalty-programs-item-circle-front">
+            <img src="content/images/loyalty/program_icon1-black.png">
+          </div>
+          <div class="loyalty-programs-item-circle-back">
+            <img src="content/images/loyalty/program_icon1-white.png">
+          </div>
+        </div>
+        <div class="loyalty-programs-item-description">
+          1 ball is equivalent <br>to 1 US
+        </div>
+      </div>
+      <div class="loyalty-programs-item">
+        <div class="loyalty-programs-item-circle">
+          <div class="loyalty-programs-item-circle-front">
+            <img src="content/images/loyalty/program_icon2-black.png">
+          </div>
+          <div class="loyalty-programs-item-circle-back">
+            <img src="content/images/loyalty/program_icon2-white.png">
+          </div>
+        </div>
+        <div class="loyalty-programs-item-description">
+          delicious surprises
+        </div>
+      </div>
+      <div class="loyalty-programs-item">
+        <div class="loyalty-programs-item-circle">
+          <div class="loyalty-programs-item-circle-front">
+            <img src="content/images/loyalty/program_icon3-black.png">
+          </div>
+          <div class="loyalty-programs-item-circle-back">
+            <img src="content/images/loyalty/program_icon3-white.png">
+          </div>
+        </div>
+        <div class="loyalty-programs-item-description">
+          birthday gifts
+        </div>
+      </div>
+      <div class="loyalty-programs-item">
+        <div class="loyalty-programs-item-circle">
+          <div class="loyalty-programs-item-circle-front">
+            <img src="content/images/loyalty/program_icon4-black.png">
+          </div>
+          <div class="loyalty-programs-item-circle-back">
+            <img src="content/images/loyalty/program_icon4-white.png">
+          </div>
+        </div>
+        <div class="loyalty-programs-item-description">
+          privileges for regular participants
+        </div>
+      </div>
+      <div class="loyalty-programs-item">
+        <div class="loyalty-programs-item-circle">
+          <div class="loyalty-programs-item-circle-front">
+            <img src="content/images/loyalty/program_icon5-black.png">
+          </div>
+          <div class="loyalty-programs-item-circle-back">
+            <img src="content/images/loyalty/program_icon5-white.png">
+          </div>
+        </div>
+        <div class="loyalty-programs-item-description">
+          contests with valuable gifts
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>

app/views/main-page.html

@@ -2,4 +2,6 @@
   <main-slider></main-slider>
   <about></about>
   <steps scroll offset="900" offset-second="1150" scroll-class="steps-scroll-class" scroll-class-second="steps-scroll-class-second" scroll-class-third="steps-scroll-class-hover"></steps>
+  <loyalty-programs scroll offset="1600" scroll-class="loyalty-programs-scroll-class" is-once="true" scroll-class-third="loyalty-programs-scroll-class-hover"></loyalty-programs>
+  <footer></footer> 
 </div>

content/css/styles.css

@@ -1,6 +1,6 @@
 /* fonts */
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
-@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
 
 @font-face {
   font-family: "Helvetica Neue";
@@ -27,6 +27,7 @@ h1,h2,h3{
 
 h1 {
   font-size: 32px;
+  letter-spacing: 1px;
 }
 
 h2 {
@@ -36,12 +37,26 @@ h2 {
 ul,li {
   margin: 0;
   padding: 0;
+  list-style-type: none;
 }
 
 body * {
   box-sizing: border-box;
 }
 
+.preload-screen {
+  position: absolute;
+  width: 100%;
+  line-height: 100vh;
+  background: #1D1D1F;
+  text-align: center;
+  transition: all 0.6s cubic-bezier(.645,.045,.355,1);
+}
+
+.preload-screen img{
+  vertical-align: middle;
+}
+
 .overlay {
   position: absolute;
   width: 100%;
@@ -224,7 +239,7 @@ body * {
 }
 
 .main-slider img {
-  width: 100%;
+  max-width: 100%;
 }
 
 .main-slider img.ng-enter, .main-slider img.ng-leave {
@@ -381,7 +396,7 @@ body * {
 }
 
 .main-page .about-item-description {
-  font-family: 'Lato', sans-serif;
+  font-family: 'Roboto', sans-serif;
   letter-spacing: 0.3px;
 }
 
@@ -478,6 +493,7 @@ body * {
 }
 
 .main-page .steps-item {
+  opacity: 0;
   width: 42%;
   position: relative;
   margin-bottom: 60px;
@@ -506,7 +522,7 @@ body * {
   border: 2px solid rgba(29, 29, 31,.7);
   padding: 70px 40px 40px;
   font-size: 17px;
-  font-family: 'Lato', sans-serif;
+  font-family: 'Roboto', sans-serif;
 }
 
 .main-page .steps-item-number {
@@ -519,6 +535,7 @@ body * {
   top: 20px;
   left: -10px;
   font-style: italic;
+  box-shadow: 0 0 10px #cacaca;
 }
 
 .main-page .steps-item-number::after {
@@ -536,10 +553,12 @@ body * {
 
 .main-page .steps-scroll-class .steps-item:nth-child(1), .steps-scroll-class .steps-item:nth-child(2) {
   transform: translateX(0);
+  opacity: 1;
 }
 
 .main-page .steps-scroll-class-second .steps-item:nth-child(3), .steps-scroll-class-second .steps-item:nth-child(4){
   transform: translateX(0);
+  opacity: 1;
 }
 
 .main-page .steps-scroll-class-hover .steps-item:hover {
@@ -548,4 +567,221 @@ body * {
   transform-origin: 50% 0%;
   box-shadow: 0 0 20px #cacaca;
 }
+
+.main-page .loyalty-programs {
+  background: rgb(241, 241, 245);
+  padding: 60px 0;
+}
+
+.main-page .loyalty-programs-wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+}
+
+.main-page h1.loyalty-programs-title {
+  text-align: center;
+  text-transform: uppercase;
+  margin-bottom: 60px;
+}
+
+.main-page .loyalty-programs-item-wrapper {
+  display: flex;
+  justify-content: space-between;
+  perspective: 1000px;
+}
+
+.main-page .loyalty-programs-item {
+  width: 18%;
+  text-align: center;
+  position: relative;
+
+}
+
+.main-page .loyalty-programs-item-circle {
+
+}
+
+.main-page .loyalty-programs-item-circle-front {
+  display: inline-block;
+  padding: 30px;
+  border-radius: 50%;
+  background: rgb(252, 252, 254);
+  transition: all 0.3s 0.3s ease-out;
+  transform: rotateY(90deg);
+  box-shadow: 0 0 5px #cacaca;
+}
+
+.main-page .loyalty-programs-scroll-class-hover .loyalty-programs-item-circle:hover .loyalty-programs-item-circle-front {
+  transition: all 0.4s 0s ease;
+  box-shadow: 0 0 10px #cacaca;
+  transform: scale(1.05);
+}
+
+.main-page .loyalty-programs-item-circle-back {
+  top: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 113.09px;
+  padding: 30px;
+  border-radius: 50%;
+  background: #1D1D1F;
+  transition: all 0.3s ease-in;
+  transform: rotateY(180deg);
+  box-shadow: 0 0 5px #cacaca;
+}
+
+.main-page .loyalty-programs-item:nth-child(1) .loyalty-programs-item-circle-front{
+  transition: all 0.3s 0.3s ease-out;
+}
+
+.main-page .loyalty-programs-item:nth-child(1) .loyalty-programs-item-circle-back{
+  transition: all 0.3s ease-in;
+}
+
+.main-page .loyalty-programs-item:nth-child(2) .loyalty-programs-item-circle-front{
+  transition: all 0.3s 0.4s ease-out;
+}
+
+.main-page .loyalty-programs-item:nth-child(2) .loyalty-programs-item-circle-back{
+  transition: all 0.3s 0.1s ease-in;
+}
+
+.main-page .loyalty-programs-item:nth-child(3) .loyalty-programs-item-circle-front{
+  transition: all 0.3s 0.5s ease-out;
+}
+
+.main-page .loyalty-programs-item:nth-child(3) .loyalty-programs-item-circle-back{
+  transition: all 0.3s 0.2s ease-in;
+}
+
+.main-page .loyalty-programs-item:nth-child(4) .loyalty-programs-item-circle-front{
+  transition: all 0.3s 0.6s ease-out;
+}
+
+.main-page .loyalty-programs-item:nth-child(4) .loyalty-programs-item-circle-back{
+  transition: all 0.3s 0.3s ease-in;
+}
+
+.main-page .loyalty-programs-item:nth-child(5) .loyalty-programs-item-circle-front{
+  transition: all 0.3s 0.7s ease-out;
+}
+
+.main-page .loyalty-programs-item:nth-child(5) .loyalty-programs-item-circle-back{
+  transition: all 0.3s 0.4s ease-in;
+}
+
+.main-page .loyalty-programs-scroll-class .loyalty-programs-item-circle-front {
+  transform: rotateY(0deg);
+}
+
+.main-page .loyalty-programs-scroll-class .loyalty-programs-item-circle-back {
+  transform: rotateY(90deg);
+  opacity: 0;
+}
+
+.main-page .loyalty-programs-item-description {
+  margin-top: 30px;
+  font-size: 17px;
+  font-family: 'Roboto', sans-serif;
+}
+
+.main-page .loyalty-programs-item img {
+  width: 50px;
+  height: 50px;
+}
 /* main-page */
+
+/* footer */
+.footer {
+  background-color: #1D1D1F;
+  padding: 60px 0;
+}
+
+.footer-icons {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  width: 180px;
+  margin-bottom: 40px;
+}
+
+.footer-icon {
+  width: 33.3%;
+  cursor: pointer;
+}
+
+.footer-icon a {
+  display: block;
+  text-align: center;
+  position: relative;
+
+}
+
+.footer-icon i {
+  transition: all 0.3s ease;
+}
+
+.footer-icon i:nth-of-type(1) {
+  font-size: 19px;
+  color: #9c9c9c;
+}
+
+.footer-icon i:nth-of-type(2) {
+  position: absolute;
+  top: -11px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 40px;
+  height: 40px;
+  border: 1.5px solid rgb(156,156,156);
+  border-radius: 50%;
+}
+
+.footer-icon:hover i:.fa, {
+  color: #fff!important;
+}
+
+.footer-icon:hover i:nth-of-type(2) {
+  border-color: #F1F1F5;
+}
+
+.footer-navbar {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.footer-navbar ul {
+  display: inline-block;
+}
+
+.footer-navbar ul li {
+  display: inline-block;
+  padding: 0 10px;
+  border-right: 1px solid rgba(156,156,156,.5);
+}
+
+.footer-navbar ul li:last-child {
+  border-right: none;
+}
+
+.footer-navbar ul a {
+  text-decoration: none;
+  color: rgb(156,156,156);
+  font-size: 18px;
+  transition: all 0.3s ease;
+}
+
+.footer-navbar ul li:hover a {
+  color: #F1F1F5;
+}
+
+.footer-copyright {
+  color: rgb(156,156,156);
+  font-family: 'Roboto', sans-serif;
+  text-align: center;
+  font-size: 14px;
+}
+/* footer */

index.html

@@ -15,6 +15,8 @@
     <script src="./app/directives/about.js"></script>
     <script src="./app/directives/steps.js"></script>
     <script src="./app/directives/scroll.js"></script>
+    <script src="./app/directives/loyaltyPrograms.js"></script>
+    <script src="./app/directives/footer.js"></script>
   </head>
   <body>
     <app-root ng-include="'./app/views/app-root.html'"></app-root>