Add some change

app/app.js

@@ -1,4 +1,4 @@
-var app = angular.module('angularProject',['ngRoute','ngAnimate','firebase']);
+var app = angular.module('angularProject',['slickCarousel','ngRoute','ngAnimate','firebase']);
 
 app.config(['$routeProvider', function($routeProvider){
   $routeProvider

app/controllers/AboutUsController.js

@@ -1,3 +1,18 @@
-app.controller('AboutUsController',['$scope',function($scope){
+app.controller('AboutUsController',MyCtrl);
+function MyCtrl($http, $scope, $interval) {
 
-}])
+    $scope.images = [{
+        url: 'http://a-level.com.ua/wp-content/uploads/2016/09/%D0%91%D0%B5%D0%B7-%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8-8.png'
+    }, {
+        url: 'http://a-level.com.ua/wp-content/uploads/2016/09/%D0%91%D0%B5%D0%B7-%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8-11.png'
+    }, {
+        url: 'http://a-level.com.ua/wp-content/uploads/2017/04/appus_logo.png'
+    }, {
+        url: 'http://a-level.com.ua/wp-content/uploads/2016/09/%D0%91%D0%B5%D0%B7-%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8-15.png'
+    }, {
+        url: 'http://a-level.com.ua/wp-content/uploads/2018/02/5-min.png'
+    }, {
+        url: 'http://a-level.com.ua/wp-content/uploads/2017/06/advertika.jpg'
+    }];
+
+}

app/directives/aboutUs.js

@@ -0,0 +1,172 @@
+angular.module("slickCarousel", []).constant("slickCarouselConfig", {
+    method: {},
+    event: {}
+}).directive("slick", ["$timeout", "slickCarouselConfig", function(e, n) {
+    var i, t;
+    return i = ["slickGoTo", "slickNext", "slickPrev", "slickPause", "slickPlay", "slickAdd", "slickRemove", "slickFilter", "slickUnfilter", "unslick"], t = ["afterChange", "beforeChange", "breakpoint", "destroy", "edge", "init", "reInit", "setPosition", "swipe"], {
+        scope: {
+            settings: "=",
+            enabled: "@",
+            accessibility: "@",
+            adaptiveHeight: "@",
+            autoplay: "@",
+            autoplaySpeed: "@",
+            arrows: "@",
+            asNavFor: "@",
+            appendArrows: "@",
+            prevArrow: "@",
+            nextArrow: "@",
+            centerMode: "@",
+            centerPadding: "@",
+            cssEase: "@",
+            customPaging: "&",
+            dots: "@",
+            draggable: "@",
+            fade: "@",
+            focusOnSelect: "@",
+            easing: "@",
+            edgeFriction: "@",
+            infinite: "@",
+            initialSlide: "@",
+            lazyLoad: "@",
+            mobileFirst: "@",
+            pauseOnHover: "@",
+            pauseOnDotsHover: "@",
+            respondTo: "@",
+            responsive: "=?",
+            rows: "@",
+            slide: "@",
+            slidesPerRow: "@",
+            slidesToShow: "@",
+            slidesToScroll: "@",
+            speed: "@",
+            swipe: "@",
+            swipeToSlide: "@",
+            touchMove: "@",
+            touchThreshold: "@",
+            useCSS: "@",
+            variableWidth: "@",
+            vertical: "@",
+            verticalSwiping: "@",
+            rtl: "@"
+        },
+        restrict: "AE",
+        link: function(t, o, s) {
+            angular.element(o).css("display", "none");
+            var r, a, l, d, u, c;
+            return a = function() {
+                r = angular.extend(angular.copy(n), {
+                    enabled: "false" !== t.enabled,
+                    accessibility: "false" !== t.accessibility,
+                    adaptiveHeight: "true" === t.adaptiveHeight,
+                    autoplay: "true" === t.autoplay,
+                    autoplaySpeed: null != t.autoplaySpeed ? parseInt(t.autoplaySpeed, 10) : 3e3,
+                    arrows: "false" !== t.arrows,
+                    asNavFor: t.asNavFor ? t.asNavFor : void 0,
+                    appendArrows: angular.element(t.appendArrows ? t.appendArrows : o),
+                    prevArrow: t.prevArrow ? angular.element(t.prevArrow) : void 0,
+                    nextArrow: t.nextArrow ? angular.element(t.nextArrow) : void 0,
+                    centerMode: "true" === t.centerMode,
+                    centerPadding: t.centerPadding || "50px",
+                    cssEase: t.cssEase || "ease",
+                    customPaging: s.customPaging ? function(e, n) {
+                        return t.customPaging({
+                            slick: e,
+                            index: n
+                        })
+                    } : void 0,
+                    dots: "true" === t.dots,
+                    draggable: "false" !== t.draggable,
+                    fade: "true" === t.fade,
+                    focusOnSelect: "true" === t.focusOnSelect,
+                    easing: t.easing || "linear",
+                    edgeFriction: t.edgeFriction || .15,
+                    infinite: "false" !== t.infinite,
+                    initialSlide: parseInt(t.initialSlide) || 0,
+                    lazyLoad: t.lazyLoad || "ondemand",
+                    mobileFirst: "true" === t.mobileFirst,
+                    pauseOnHover: "false" !== t.pauseOnHover,
+                    pauseOnDotsHover: "true" === t.pauseOnDotsHover,
+                    respondTo: null != t.respondTo ? t.respondTo : "window",
+                    responsive: t.responsive || void 0,
+                    rows: null != t.rows ? parseInt(t.rows, 10) : 1,
+                    slide: t.slide || "",
+                    slidesPerRow: null != t.slidesPerRow ? parseInt(t.slidesPerRow, 10) : 1,
+                    slidesToShow: null != t.slidesToShow ? parseInt(t.slidesToShow, 10) : 1,
+                    slidesToScroll: null != t.slidesToScroll ? parseInt(t.slidesToScroll, 10) : 1,
+                    speed: null != t.speed ? parseInt(t.speed, 10) : 300,
+                    swipe: "false" !== t.swipe,
+                    swipeToSlide: "true" === t.swipeToSlide,
+                    touchMove: "false" !== t.touchMove,
+                    touchThreshold: t.touchThreshold ? parseInt(t.touchThreshold, 10) : 5,
+                    useCSS: "false" !== t.useCSS,
+                    variableWidth: "true" === t.variableWidth,
+                    vertical: "true" === t.vertical,
+                    verticalSwiping: "true" === t.verticalSwiping,
+                    rtl: "true" === t.rtl
+                }, t.settings)
+            }, l = function() {
+                var e = angular.element(o);
+                return e.hasClass("slick-initialized") && (e.remove("slick-list"), e.slick("unslick")), e
+            }, d = function() {
+                a();
+                var n = angular.element(o);
+                if (angular.element(o).hasClass("slick-initialized")) {
+                    if (r.enabled) return n.slick("getSlick");
+                    l()
+                } else {
+                    if (angular.element(o).css("display", "block"), !r.enabled) return;
+                    n.on("init", function(e, n) {
+                        return "undefined" != typeof r.event.init && r.event.init(e, n), "undefined" != typeof c ? n.slideHandler(c) : void 0
+                    }), e(function() {
+                        n.slick(r)
+                    })
+                }
+                t.internalControl = r.method || {}, i.forEach(function(e) {
+                    t.internalControl[e] = function() {
+                        var i;
+                        i = Array.prototype.slice.call(arguments), i.unshift(e), n.slick.apply(o, i)
+                    }
+                }), n.on("afterChange", function(e, n, i, o) {
+                    c = i, "undefined" != typeof r.event.afterChange && t.$apply(function() {
+                        r.event.afterChange(e, n, i, o)
+                    })
+                }), n.on("beforeChange", function(e, n, i, o) {
+                    "undefined" != typeof r.event.beforeChange && t.$apply(function() {
+                        r.event.beforeChange(e, n, i, o)
+                    })
+                }), n.on("reInit", function(e, n) {
+                    "undefined" != typeof r.event.reInit && t.$apply(function() {
+                        r.event.reInit(e, n)
+                    })
+                }), "undefined" != typeof r.event.breakpoint && n.on("breakpoint", function(e, n, i) {
+                    t.$apply(function() {
+                        r.event.breakpoint(e, n, i)
+                    })
+                }), "undefined" != typeof r.event.destroy && n.on("destroy", function(e, n) {
+                    t.$apply(function() {
+                        r.event.destroy(e, n)
+                    })
+                }), "undefined" != typeof r.event.edge && n.on("edge", function(e, n, i) {
+                    t.$apply(function() {
+                        r.event.edge(e, n, i)
+                    })
+                }), "undefined" != typeof r.event.setPosition && n.on("setPosition", function(e, n) {
+                    t.$apply(function() {
+                        r.event.setPosition(e, n)
+                    })
+                }), "undefined" != typeof r.event.swipe && n.on("swipe", function(e, n, i) {
+                    t.$apply(function() {
+                        r.event.swipe(e, n, i)
+                    })
+                })
+            }, u = function() {
+                l(), d()
+            }, o.one("$destroy", function() {
+                l()
+            }), t.$watch("settings", function(e, n) {
+                return null !== e ? u() : void 0
+            }, !0)
+        }
+    }
+}]);

app/views/about-us.html

@@ -3,25 +3,44 @@
 
        <div class="about-us-main">
             <h3>Master Kitchen Food Delivery</h3>
-            <div class="counter">
-                <div class="description">
+            <div class="about-us-counter">
+                <div class="about-us-description">
                     <p>Gourmet dishes of Italian, American, Japanese, Ukrainian and Georgian cuisines - this is the hospitable world of Master Kitchen, a world of delicious food and a pleasant stay! </p>
                 </div>
-                <div class="timer-left">
-                    <div class="timer-brend">12</div>
+                <div class="about-us-timer-left">
+                    <div class="about-us-timer-brend">12</div>
                     <p>BRENDS</p>
                 </div>
-                <div class="timer-right">
-                    <div class="timer-restaurant">18</div>
+                <div class="about-us-timer-right">
+                    <div class="about-us-timer-restaurant">18</div>
                     <P>RESTAURANTS</P>
                 </div>
             </div>
         </div>
-            <div class="block_1"></div>
-           <div class="block_2">
+            <div class="about-us-block_1"></div>
+            <div class="about-us-block_2">
                 <h2>Master Kitchen-live tasty!</h2>
             </div>
-        <div class="block_3"></div>
+            <div class="about-us-block_3">
+                <h2>PARTNERS</h2>
+                <div class="slick-container">
+                <slick
+                    infinite=true
+                    slides-to-show=3
+                    slides-to-scroll=1
+                    dots=true
+            >
+                <div class="slick-item" ng-repeat="image in images">
+                    <img src="{{ image.url }}" />
+                </div>
+                </slick>
+                </div>
+            </div>
+            <div class="about-us-block_4">
+                <h2>Master Kitchen - food with meaning.</h2>
+                <p>Master Kitchen provides the client with a balanced diet for each day. This is more than delivering a healthy meal. Ordering from us, you get not just a menu, but exquisite gastronomic dishes: delicious and very useful! Master Kitchen Eat Easy provides customers with the highest quality and fresh food.</p>
+            </div>
         </div>
-    </div>
-</div>
+    <footer></footer>
+</div>
+

content/css/stylesPavel.css

@@ -2,10 +2,10 @@
     background-image:  url(../images/block_2.jpg);
     background-size:cover;
     z-index: -1;
-    height: 1300px;
+    height: 100%;
     top:100px;
    background-attachment:fixed;
-   max-width: 100%;
+   min-width: 100%;
 }
 .about-us-main {
     background-image: url(../images/about_fullscreen_bg.jpg);
@@ -26,7 +26,7 @@
     color: #fff;
     font-size: 72px;
     letter-spacing: .72px;
-    line-height: 60px;
+    line-height: 80px;
     text-align: center;
     margin: 0 auto;
     z-index: 0;
@@ -36,7 +36,7 @@
     -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
 }
-.counter{
+.about-us-counter{
     background: #fff;
     padding: 20px;
     max-width: 900px;
@@ -44,12 +44,12 @@
     position: absolute;
     top: 100vh;
     left: 50%;
-    z-index: 2;
+    z-index: 1;
    /* -webkit-transform: translate(-50%,-50%);*/
     transform: translate(-50%,-50%);
     box-shadow: 0 1px 1px 0 rgba(84,84,84,.3);
 }
-.description{
+.about-us-description{
     font-weight: 300;
     color: #676767;
     font-size: 16px;
@@ -59,28 +59,28 @@
     max-width: 560px;
     margin: 0 auto 10px;
 }
-.timer-left{
+.about-us-timer-left{
     width: 50%;
     float: left;
 
 }
-.timer-brend{
+.about-us-timer-brend{
     margin: 0 auto;
     font-weight: 700;
     color: #e4ca87;
     font-size: 110px;
 }
-.timer-right{
+.about-us-timer-right{
     width: 50%;
     float: right;
 }
-.timer-restaurant{
+.about-us-timer-restaurant{
     margin: 0 auto;
     font-weight: 700;
     color: #e4ca87;
     font-size: 110px;
 }
-.block_1{
+.about-us-block_1{
     background-image: url(../images/block_1.png);
     background-repeat: no-repeat;
     background-position: center calc(100% + 140px);
@@ -88,26 +88,72 @@
     padding-top: 420px;
     padding-bottom: 140px;
 }
-.block_2{
+.about-us-block_2{
     padding: 100px 20px;
     border: solid 1px;
     position: relative;
     overflow: hidden;
 }
-.block_2 h2{
-    font-size: 30px;
+.about-us-block_2 h2{
     letter-spacing: .3px;
     font-weight: 700;
     font-size: 48px;
     color: #fff;
     text-align: center;
-    z-index: 2;
+    z-index: 1;
     position: relative;
     display: block;
 }
-.block_3{
+.about-us-block_3{
     background: white;
-    height: 200px;
+}
+.about-us-block_3 h2{
+    font-size: 30px;
+    text-align: center;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    color: #4d4d4d;
+    font-weight: 700;
+}
+.about-us-block_4{
+    background: white;
+}
+.about-us-block_4{
+   text-align: center;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    color: #4d4d4d;
+}
+.slick-container {
+    text-align: center;
+    background: lightgrey;
     width: 100%;
-    border: solid 1px;
+    margin: auto;
+    padding: 15px;
+}
+
+.slick-item {}
+.slick-dots li button{
+    font-size: 0 !important;
+    border: 1px solid gray !important;
+    border-radius: 50%;
+    background: #606060 !important;
+}
+.slick-dots li button:hover{
+    background: white !important;
+}
+.slick-dots li button:before{
+    content: none !important;
+}
+.slick-prev:before,.slick-next:before {
+    font-size: 20px!important;
+    content:''!important;
+}
+.slick-item img {
+    width: 250px;
+    height: 200px;
+    margin: auto;
+}
+.slick-arrow {
+    background: green;
 }

index.html

@@ -5,7 +5,12 @@
     <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
     <link href="content/css/stylesPavel.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-
+    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css'>
+    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css'>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js'></script>
     <script src="./app/lib/angular.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
     <script src="./app/lib/angular-animate.min.js"></script>
@@ -26,9 +31,10 @@
     <script src="./app/directives/navmenu.js"></script>
     <script src="./app/controllers/AppRootController.js"></script>
     <script src="./app/controllers/MainPageController.js"></script>
-    <script src="./app/controllers/AboutUsController.js"></script>
+
     <script src="./app/directives/mainSlider.js"></script>
     <script src="./app/directives/about.js"></script>
+    <script src="./app/directives/aboutUs.js"></script>
     <script src="./app/directives/steps.js"></script>
     <script src="./app/directives/scroll.js"></script>
     <script src="./app/directives/loyaltyPrograms.js"></script>
@@ -36,6 +42,7 @@
     <script src="./app/controllers/SelectMenuPageController.js"></script>
     <script src="./app/controllers/AddItemPageController.js"></script>
     <script src="./app/directives/selectedMeals.js"></script>
+    <script src="./app/controllers/AboutUsController.js"></script>
   </head>
   <body>
     <app-root ng-include="'./app/views/app-root.html'"></app-root>