added about us page

app/app.js

@@ -45,6 +45,10 @@ app.config(['$routeProvider', function($routeProvider){
       templateUrl: './app/views/constructor.html',
       controller: 'mealsConstructor'
     })
+    .when('/about-us',{
+      templateUrl: './app/views/about-us.html',
+      controller: 'AboutUsController'
+    })
     .otherwise({
       redirectTo: '/'
     })

app/controllers/AboutUsController.js

@@ -0,0 +1,18 @@
+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/controllers/ReadyMenuSecondController.js

@@ -46,7 +46,7 @@ app.controller('ReadyMenuSecondController',['$scope','$location','$timeout','$wi
     //   var JQItem = angular.element(item);
     //   JQItem.removeClass('ready-menu-second-scroll-class');
     // }
-    if(window.pageYOffset >= '350'){
+    if(window.pageYOffset >= '350' || $window.innerWidth < 1180){
       var item = document.querySelector('.ready-menu-second .item:nth-child(2)');
       var JQItem = angular.element(item);
       JQItem.addClass('ready-menu-second-scroll-class');
@@ -57,7 +57,7 @@ app.controller('ReadyMenuSecondController',['$scope','$location','$timeout','$wi
       JQItem.removeClass('ready-menu-second-scroll-class');
     }
 
-    if(window.pageYOffset >= '600'){
+    if(window.pageYOffset >= '600' || $window.innerWidth < 1180){
       var item = document.querySelector('.ready-menu-second .item:nth-child(3)');
       var JQItem = angular.element(item);
       JQItem.addClass('ready-menu-second-scroll-class');

app/controllers/UserPageController.js

@@ -27,7 +27,6 @@ app.controller('UserPageController',['$scope','$http',function($scope,$http){
   }
 
   //AIzaSyCHfQNLTRwK9C24adja3xs79GtqeKOTIOE - google apies
-
   $http.get('https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json').then(function(response){
     $scope.countriesObject = response.data;
   })

app/controllers/appRootController.js

@@ -143,6 +143,7 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location','$
   }
 
   $scope.signInUserObj = {};
+  $scope.signInUserError = '';
   $scope.signInUser = function(){
     firebase.auth().signInWithEmailAndPassword($scope.signInUserObj.email,$scope.signInUserObj.password).then(function(success){
       console.log('Signed in successfully: ',success);
@@ -154,7 +155,8 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location','$
       },1000)
 
     }).catch(function(error){
-      console.log('Sign in error: ',error.message);
+      console.log('Sign in error: ',error);
+      $scope.signInUserError = error.message;
     })
   }
 

app/directives/one-week2.js

@@ -0,0 +1,10 @@
+app.directive('oneWeek2', [function() {
+  let link = function(scope, element, attrs) {
+    //console.log("oneWeek  directive");
+  }
+  return {
+    restrict: 'E',
+    templateUrl: './app/views/oneWeek2.html',
+    link: link
+  }
+}]);

app/views/about-us.html

@@ -0,0 +1,45 @@
+<div ng-controller="AboutUsController">
+    <div class="about-us">
+
+       <div class="about-us-main">
+            <h3>Master Kitchen Food Delivery</h3>
+            <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="about-us-timer-left">
+                    <div class="about-us-timer-brend">12</div>
+                    <p>BRENDS</p>
+                </div>
+                <div class="about-us-timer-right">
+                    <div class="about-us-timer-restaurant">18</div>
+                    <P>RESTAURANTS</P>
+                </div>
+            </div>
+        </div>
+            <div class="about-us-block_1"></div>
+            <div class="about-us-block_2">
+                <h2>Master Kitchen-live tasty!</h2>
+            </div>
+            <div class="about-us-block_3">
+                <h2>PARTNERS</h2>
+                <div class="slick-container about-us-slick">
+                <slick
+                    infinite=true
+                    slides-to-show=3
+                    slides-to-scroll=1
+                    dots=true
+                 >
+                <div class="about-us-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>
+    <footer></footer>
+</div>

app/views/app-root.html

@@ -44,6 +44,7 @@
               <input type="email" placeholder="Email" ng-model="signInUserObj.email" ng-required="true" name="email">
               <span ng-if="loginForm.email.$invalid && loginForm.email.$touched">Enter a valid email</span>
               <input type="password" placeholder="Password" ng-model="signInUserObj.password" ng-required="true" name="password">
+              <span>{{signInUserError}}</span>
               <input type="submit" value="login">
             </form>
           </div>

app/views/constructor.html

@@ -62,7 +62,7 @@
               <i></i>
               <h2 class="accordion__title">SNACKS</h2>
               <div class="accordion__content">
-                <div class="constructor-meals">
+                <div class="constructor-meals constructor-meals--snacks">
                     <div ng-repeat='item in list4' ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}" class='constructor-meals__item' >
                       <div class="constructor-meals__img">
                         <img ng-src="{{item.imageUrl}}">
@@ -77,7 +77,12 @@
           </ul>
         </div>
       </div>
-    <one-week></one-week>
+      <div class="one-week">
+        <one-week></one-week>
+      </div>
+      <div class="one-week2">
+        <one-week2></one-week2>
+      </div>
   </div>
   <br>
   <div class="btn-basket" ng-click="sendCustomDiet()">

app/views/nav-menu.html

@@ -2,10 +2,10 @@
   <span class="nav-menu-title"> MENU </span>
   <ul>
     <li ng-class="{'active-link': isActive('/')}" ng-click="toggleMenu()"><a href="#!/">Main page</a></li>
-    <li ng-class="{'active-link': isActive('/select-menu')}" ng-click="toggleMenu()"><a href="#!/select-menu">Customize menu</a></li>
     <li ng-class="{'active-link': isActive('/ready-menu')}" ng-click="toggleMenu()"><a href="#!/ready-menu">Ready menus</a></li>
+    <li ng-class="{'active-link': isActive('/select-menu')}" ng-click="toggleMenu()"><a href="#!/select-menu">Customize menu</a></li>
     <li ng-click="toggleMenu()"><a href="#">Delivery & Contacts</a></li>
-    <li ng-click="toggleMenu()"><a href="#">About us</a></li>
+    <li ng-class="{'active-link': isActive('/about-us')}" ng-click="toggleMenu()"><a href="#!/about-us">About us</a></li>
     <li ng-if="isModeratorSigned" ng-class="{'active-link': isActive('/add-item')}" ng-click="toggleMenu()"><a href="#!/add-item">Add item</a></li>
     <li ng-if="isModeratorSigned" ng-class="{'active-link': isActive('/messages')}" ng-click="toggleMenu()"><a href="#!/messages">Messages</a></li>
   </ul>

app/views/oneWeek2.html

@@ -0,0 +1,82 @@
+<!-- {{todayDay+$index+'/'+todayMonthYear}} -->
+<div class="constructor-cart">
+  <div class="slick-container">
+    <slick slides-to-show=1 slides-to-scroll=1 infinite=false>
+      <div ng-repeat=" item in arrDays track by $index">
+        <div class="constructor-day">
+            <h2 class="constructor-day__title accordion__title">{{item.caption}}</h2>
+            <div class="constructor-day__type">
+              <b class="constructor-day__type-title"> BREAKFAST </b>
+              <div class="constructor-meals" data-drop="true" ng-model="order[item.day].breakfast" jqyoui-droppable="{multiple:true}">
+                <span ng-hide="hideMe( item.day, 'breakfast')" class='constructor-meals__btn-add'>ADD MEAL</span>
+                <div class='constructor-meals__item' ng-repeat="item in order[item.day].breakfast track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone', animate: true}" ng-model="order[item.day].breakfast" jqyoui-draggable="{index: {{$index}},animate:true}">
+                  <div class="constructor-meals__img">
+                    <img ng-src="{{item.imageUrl}}">
+                  </div>
+                  <div class="constructor-meals__title">
+                    <h3>{{item.mealName}}</h3>
+                  </div>
+                  <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'breakfast', $index)">
+                    <span class="fa fa-times"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="constructor-day__type">
+              <b class="constructor-day__type-title"> LUNCH </b>
+              <div class="constructor-meals" data-drop="true" ng-model="order[item.day].lunch" jqyoui-droppable="{multiple:true}">
+                <span ng-hide="hideMe( item.day, 'lunch')" class='constructor-meals__btn-add'>ADD MEAL</span>
+                <div class='constructor-meals__item' ng-repeat="item in order[item.day].lunch track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="order[item.day].lunch" jqyoui-draggable="{index: {{$index}},animate:true}">
+                  <div class="constructor-meals__img">
+                    <img ng-src="{{item.imageUrl}}">
+                  </div>
+                  <div class="constructor-meals__title">
+                    <h3>{{item.mealName}}</h3>
+                  </div>
+                  <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'lunch', $index)">
+                    <span class="fa fa-times"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="constructor-day__type">
+              <b class="constructor-day__type-title">DINNER</b>
+              <div class="constructor-meals" data-drop="true" ng-model="order[item.day].dinner" jqyoui-droppable="{multiple:true}">
+                <span ng-hide="hideMe( item.day, 'dinner')" class='constructor-meals__btn-add'>ADD MEAL</span>
+                <div class='constructor-meals__item'  ng-repeat="item in order[item.day].dinner track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="order[item.day].dinner" jqyoui-draggable="{index: {{$index}},animate:true}">
+                  <div class="constructor-meals__img">
+                    <img ng-src="{{item.imageUrl}}">
+                  </div>
+                  <div class="constructor-meals__title">
+                    <h3>{{item.mealName}}</h3>
+                  </div>
+                  <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'dinner', $index)">
+                    <span class="fa fa-times"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="constructor-day__type">
+              <b class="constructor-day__type-title">SNACKS</b>
+              <div class="constructor-meals constructor-meals--border" data-drop="true" ng-model="order[item.day].snacks" jqyoui-droppable="{multiple:true}">
+                <span ng-hide="hideMe( item.day, 'snacks')" class='constructor-meals__btn-add'>ADD MEAL</span>
+                <div>
+                  <div class='constructor-meals__item' ng-repeat="item in order[item.day].snacks track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="order[item.day].snacks" jqyoui-draggable="{index: {{$index}},animate:true}">
+                    <div class="constructor-meals__img">
+                      <img ng-src="{{item.imageUrl}}">
+                    </div>
+                    <div class="constructor-meals__title">
+                      <h3>{{item.mealName}}</h3>
+                    </div>
+                    <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'snacks', $index)">
+                      <span class="fa fa-times"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </slick>
+  </div>
+</div>

app/views/ready-menu-second.html

@@ -14,7 +14,7 @@
         </div>
         <div class="item-center">
           <div class="item-price">
-            {{diet.price * +weekCount}} USD
+            <span>{{diet.price * +weekCount}} USD</span>
             <select ng-model="weekCount">
               <option value="1" ng-selected="true">1 week</option>
               <option value="2">2 week</option>
@@ -26,6 +26,9 @@
             <button type="button" ng-click="addToCart(diet, diet.price, +weekCount)">Order</button>
           </div>
         </div>
+        <div class="adaptive-price">
+          {{diet.price * +weekCount}} USD
+        </div>
         <div class="item-description">
           {{diet.description}}
         </div>

app/views/user-page.html

@@ -20,15 +20,15 @@
       <div class="navigation-btns">
         <div ng-class="{'navigation-btn-active': activeBtn == 'personal info'}" ng-click="activeBtn = 'personal info'" class="navigation-btn">
           <span class="fa fa-user"></span>
-          personal info
+          <div>personal info</div>
         </div>
         <div ng-class="{'navigation-btn-active': activeBtn == 'your diets'}" ng-click="activeBtn = 'your diets'" class="navigation-btn">
           <span class="fa fa-cutlery"></span>
-          your diets
+          <div>your diets</div>
         </div>
         <div ng-class="{'navigation-btn-active': activeBtn == 'write us'}" ng-click="activeBtn = 'write us'" class="navigation-btn">
           <span class="fa fa-edit"></span>
-          write us
+          <div>write us</div>
         </div>
       </div>
     </div>
@@ -203,14 +203,16 @@
           </div>
         </div>
         <div class="write-message">
-          <div class="write-input">
-            <input type="text" placeholder="Type your message..." ng-model="messageObject.userMessage">
-          </div>
-          <div class="write-btn">
-            <div class="write-btn-wrapper" ng-click="sendMessage()">
-              <span class="fa fa-paper-plane"></span>
+          <form>
+            <div class="write-input">
+              <input type="text" placeholder="Type your message..." ng-model="messageObject.userMessage">
             </div>
-          </div>
+            <div class="write-btn">
+              <div class="write-btn-wrapper" ng-click="sendMessage()">
+                <span class="fa fa-paper-plane"></span>
+              </div>
+            </div>
+          </form>
         </div>
       </div>
     </div>

content/css/adaptive-styles.css

@@ -1,4 +1,5 @@
 @media screen and (max-width: 1180px) {
+
   .main-slider {
     height: 640px;
   }
@@ -21,27 +22,107 @@
   .main-slider-text {
     margin-top: 18%;
     margin-bottom: 5%;
+    width: 90%;
   }
 
-  .main-slider-text {
-    width: 80%;
-  }
+
 
   .main-slider-text p {
+    font-size: 43px;
+  }
+
+
+
+  .main-slider-bars-wrapper {
+    margin-top: 9%;
+  }
+
+  .main-page .about-item-wrapper {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .main-page .about-item {
+    margin: 30px;
+    width: 354px;
+  }
+
+  .main-page .steps-item-wrapper {
+    justify-content: space-around;
+    flex-wrap: wrap;
+  }
+
+  .main-page .steps-item {
+    width: 361px;
+    transition: none;
+    opacity: 1;
+    transform: translateX(0)!important;
+  }
+
+  .main-page h1.loyalty-programs-title {
     font-size: 30px;
   }
 
-  .main-slider-buttons {
-    width: 45%;
+  .main-page .loyalty-programs-item-wrapper {
+    flex-wrap: wrap;
+    justify-content: center;
   }
 
-  .main-slider-buttons a {
-    font-size: 17px;
-    padding: 8px 15px;
+  .main-page .loyalty-programs-item {
+    width: 184px;
+    margin: 15px 0;
   }
 
-  .main-slider-bars-wrapper {
-    margin-top: 9%;
+  .ready-menu-second-wrapper {
+    width: auto;
+    margin: 0 auto;
+  }
+
+  .ready-menu-second .item {
+    flex-wrap: wrap;
+    margin: 0 200px;
+    margin-bottom: 60px;
+  }
+  .ready-menu-page .img-wrapper .img-overlay {
+    background: rgba(29, 29, 31,.5);
+  }
+  .ready-menu-second .item-img {
+    width: 100%;
+    /* transform-origin: 100% 50%;
+    transform: rotateY(0)!important; */
+  }
+
+  .ready-menu-second-scroll-class .item-content {
+    width: 100%;
+    /* transform-origin: 0% 50%;
+    transform: rotateY(-0)!important; */
+  }
+
+  .user-page .navigation {
+    width: 250px;
+  }
+
+  .user-page .content {
+    width: 100%;
+  }
+
+  .user-page .content .personal-info-item-title {
+    width: 50%;
+  }
+  .user-page .content .personal-info-item-title {
+    width: 50%;
+  }
+
+  .messages-page .dialog {
+    width: 100%;
+  }
+
+  .messages-page .select-dialog {
+    width: 256px;
+  }
+
+  .messages-page .select-dialog .item {
+    width: 256px;
   }
 
 }
@@ -50,10 +131,135 @@
   .main-slider {
     height: 520px;
   }
+  .main-slider-buttons {
+    width: 60%;
+  }
+
+  .main-slider-buttons a {
+    font-size: 18px;
+    padding: 10px 30px;
+  }
+  .main-slider-text p {
+    font-size: 35px;
+  }
+  .ready-menu-second .item {
+    flex-wrap: wrap;
+    margin: 0 80px;
+    margin-bottom: 50px;
+  }
 }
 
 @media screen and (max-width: 850px) {
+
+  .header-line .logo {
+    display: none;
+  }
+
+  .main-slider {
+    height: 450px;
+  }
+  .main-slider-text p {
+    font-size: 30px;
+  }
+  .main-slider-buttons a {
+    font-size: 16px;
+    padding: 7px 25px;
+  }
+
+  .ready-menu-page .read-menu-title h1 {
+    font-size: 30px;
+  }
+  .ready-menu-page .items-wrapper {
+    flex-wrap: wrap;
+  }
+  .ready-menu-page .item {
+    width: 100%;
+  }
+  .ready-menu-page .item-icon {
+    margin-top: 200px;
+  }
+  .ready-menu-second .item {
+    flex-wrap: wrap;
+    margin: 0 30px;
+    margin-bottom: 30px;
+  }
+
+  .ready-menu-second .item-numbers {
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+
+  .ready-menu-second .item-numbers-text {
+    width: 100%;
+    margin-bottom: 30px;
+  }
+  .add-item-page form {
+    padding: 50px 5px;
+  }
+  .add-item-page .form-tab1 {
+    width: 170px;
+    font-size: 15px;
+  }
+  .add-item-page .form-tab2 {
+    width: 170px;
+    font-size: 15px;
+  }
+
+}
+
+@media screen and (max-width: 690px) {
+  .main-slider {
+    height: 350px;
+  }
+  .main-slider-text p {
+    font-size: 23px;
+  }
+  .main-slider-buttons a {
+    font-size: 14px;
+    padding: 6px 20px;
+  }
+
+  .messages-page .select-dialog {
+    width: auto;
+  }
+
+  .messages-page .select-dialog .item {
+    width: auto;
+  }
+
+  .messages-page .select-dialog .item-name {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 550px) {
   .main-slider {
-    height: 400px;
+    display: none;
   }
+  .ready-menu-second .item-center {
+    justify-content: center;
+  }
+  .ready-menu-second .item-price {
+    justify-content: flex-end;
+    width: 101px;
+  }
+  .ready-menu-second .item-price span {
+    display: none;
+  }
+  .ready-menu-second .adaptive-price {
+    display: block;
+  }
+  .user-page .navigation {
+    width: 70px;
+  }
+  .user-page .navigation-profile {
+    display: none;
+  }
+  .user-page .navigation-btn div {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 450px) {
+
 }

content/css/style_Andrii.css

@@ -1,19 +1,17 @@
-/* Constructor */
-/* .constructor-page-title h1 {
+/* Constructor
+ .constructor-page-title h1 {
     text-align: center;
     margin: 45px 0;
     font-family: "AvenirNextLTPro-Demi";
     color: #1D1D1F;
     font-weight: 200;
-} */
-
+}  */
 .constructor-page-title {
 	background: #1D1D1F;
 	text-align: center;
 	margin-bottom: 45px;
 	padding: 11px 0;
 }
-
 .constructor-page-title h1 {
 	display: inline-block;
 	font-family: "AvenirNextLTPro-Demi";
@@ -21,7 +19,6 @@
 	font-size: 25px;
 	color: #fff;
 }
-
 .constructor-wrapper {
 	margin-bottom: 30px;
 	display: flex;
@@ -160,7 +157,6 @@
 div.accordion__content, ul li i:before, ul li i:after {
     transition: all 0.5s ease-in-out;
 }
-
 /* CAROUSEL */
 .slick-slider {
   margin-bottom: 0;
@@ -239,7 +235,6 @@ div.accordion__content, ul li i:before, ul li i:after {
   text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
 	font-weight: normal;
 }
-
 .constructor-day__type .constructor-meals {
   border-left: 2px inset #1d1d1f;
   border-right: 2px inset #1d1d1f;
@@ -284,7 +279,7 @@ div.accordion__content, ul li i:before, ul li i:after {
 	width: 48px;
 	height: 48px;
 	bottom: 30px;
-	left: 1%;
+	left: 2%;
 	cursor: pointer;
 }
 .scrollTop:hover {
@@ -292,7 +287,6 @@ div.accordion__content, ul li i:before, ul li i:after {
   animation-duration: 1s;
   animation-iteration-count: infinite;
 }
-
 @keyframes pulse {
   0% {
       transform: scale(0.9);
@@ -305,7 +299,6 @@ div.accordion__content, ul li i:before, ul li i:after {
   }
 }
 /* button to basket */
-
 .btn-basket {
   margin: 0 auto;
   z-index: 5;
@@ -322,17 +315,14 @@ div.accordion__content, ul li i:before, ul li i:after {
 	background: #1d1d1f;
 	transition: border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1);
 }
-
 .btn-basket .btn-basket__link {
 	color: #f1f1f5;
 	text-decoration: none;
 }
-
 .btn-basket .btn-basket__mask {
 	background: #fff;
 	background: rgba(255,255,255,0.5);
 }
-
 .btn-basket .btn-basket__mask {
 	position: absolute;
 	display: block;
@@ -341,26 +331,21 @@ div.accordion__content, ul li i:before, ul li i:after {
 	transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
 	transition: all 1.1s cubic-bezier(0.19,1,.22,1);
 }
-
 .btn-basket:hover {
 	background: black;
 	border-color: #fff;
 	box-shadow: 0 0 5px rgba(255,245,245,0.8);
 /* background-image: url('http://cuinine.com/img/codepen/savvy.jpg');  */
 }
-
 .btn-basket:hover .btn-basket__link {
 	color: #fff;
 }
-
 .btn-basket:hover .btn-basket__mask {
 	background: white;
 	-webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
 	transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
 }
-
 /* constructor-meals__btn-delete */
-
 .constructor-meals__btn-delete {
   position: absolute;
   right: 9px;
@@ -382,8 +367,210 @@ div.accordion__content, ul li i:before, ul li i:after {
 .constructor-meals__item:hover .constructor-meals__btn-delete {
   opacity: 1;
 }
-
 .constructor-total-price {
 	margin-bottom: 50px;
 	text-align: center;
 }
+
+/* Responsive */
+
+.select-menu-page .meal-item-ingredients {
+	opacity: 0;
+}
+.select-menu-page .meal-item:hover .meal-item-ingredients{
+	opacity: 1;
+}
+.one-week2 {
+	display: none;
+}
+.constructor-meals--snacks {
+	border-bottom: 1px inset #1d1d1f;
+}
+
+@media screen and (max-width: 1100px){
+
+		.select-menu-page .meal-items {
+			padding: 50px 20px;
+		}
+		/* .search-buttons-wrapper {
+			padding-right: 50px;
+		} */
+		.constructor {
+			width: 25vw;
+		}
+		.constructor-meals__title {
+			font-size: 15px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		.constructor-meals__title h3 {
+			margin: 0;
+		}
+		.scrollTop {
+			bottom: 60px;
+			left: 2%;
+		}
+
+  @media screen and (max-width: 800px){
+
+		.select-menu-page .meal-item-title h2 {
+			padding: 3px 0;
+			font-size: 18px;
+		}
+		.select-menu-page .meal-items {
+			padding: 40px 20px;
+		}
+		.select-menu-page .meal-item-ingredients {
+			padding: 5px 0;
+		}
+		.select-menu-page .meal-item-ingredients li {
+			font-size: 13px;
+			margin: 2px 5px;
+		}
+		.select-menu-page .meal-item-bottom-container {
+			padding: 0;
+		}
+		.select-menu-page .meal-item-price {
+			display: flex;
+			align-content: center;
+		}
+		.select-menu-page .meal-item-price span {
+			padding-top: 1.5px;
+			font-size: 16px;
+		}
+		.select-menu-page .meal-item-btn {
+			padding: 3px;
+		}
+		.slick-prev {
+		    left: -30px;
+		}
+		[dir='rtl'] .slick-prev {
+		    right: -30px;
+		    left: auto;
+		}
+		.slick-next {
+		    right: -17px;
+		}
+		[dir='rtl'] .slick-next {
+		    right: auto;
+		    left: -17px;
+		}
+		.constructor {
+			margin-right: 5vw;
+			width: 25vw;
+		}
+		.slick-container {
+		  width: 65vw;
+		}
+		.constructor-wrapper {
+			padding-left: 10px;
+			justify-content: left;
+		}
+		.constructor-day {
+			margin-right: 8px;
+		}
+		.slick-prev:before,
+		.slick-next:before {
+		    font-size: 25px;
+		}
+		.constructor-meals__title {
+			font-size: 13.5px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		.constructor-meals__title h3 {
+			margin: 0;
+		}
+		.btn-basket {
+			width: 25vw;
+			letter-spacing: .1rem;
+		}
+		.scrollTop {
+			bottom: 155px;
+			left: 1%;
+		}
+	}
+
+  @media screen and (max-width: 400px){
+		.select-menu-page .meal-items {
+			flex-direction: column;
+			padding: 20px 20px;
+		}
+		.select-menu-page .meal-item {
+			width: 80%;
+			margin: 10px auto;
+		}
+		.select-menu-page .meal-item-title h2 {
+			padding: 3px 0;
+			font-size: 22px;
+		}
+		.select-menu-page .meal-item-ingredients {
+			padding: 0;
+		}
+		.select-menu-page .meal-item-ingredients li {
+			font-size: 15px;
+			margin: 4px 5px;
+		}
+		.scrollTop {
+			bottom: 210px;
+			left: 3%;
+		}
+		.select-menu-page .search-description {
+			padding: 15px 15px;
+			text-align: center;
+			font-size: 23px;
+		}
+		.select-menu-page .meal-item-price span {
+			padding-top: 3px;
+			font-size: 18px;
+		}
+		.one-week {
+			display: none;
+		}
+		.one-week2 {
+			display: block;
+		}
+		.constructor-day {
+			margin-right: 5px;
+		}
+		.btn-basket {
+			width: 45vw;
+		}
+		.slick-prev {
+				left: -11px;
+				bottom: 25px;
+				z-index: 1;
+		}
+		[dir='rtl'] .slick-prev {
+				right: -11px;
+				left: auto;
+				z-index: 1;
+		}
+		.slick-next {
+				right: -2px;
+		}
+		[dir='rtl'] .slick-next {
+				right: auto;
+				left: -2px;
+				z-index: 1;
+		}
+		.constructor {
+			margin-right: 5vw;
+			width: 45vw;
+		}
+		.slick-container {
+			width: 45vw;
+		}
+		.accordion__title {
+			font-size: 17px;
+		}
+		.slick-prev:before, .slick-next:before {
+			color: black;
+		}
+		.slick-prev, .slick-next {
+			top: 45%;
+		}
+  }
+}

content/css/styles.css

@@ -1680,6 +1680,10 @@ main.ng-enter .shopping-cart-page .item{
   position: relative;
 }
 
+.ready-menu-page .img-wrapper {
+  overflow: hidden;
+}
+
 .ready-menu-page .img-wrapper .img-overlay {
   position: absolute;
   width: 100%;
@@ -1690,6 +1694,13 @@ main.ng-enter .shopping-cart-page .item{
   transition: all 1s ease;
 }
 
+.ready-menu-second .adaptive-price {
+  display: none;
+  text-align: center;
+  font-size: 27px;
+  margin-bottom: 20px;
+}
+
 .ready-menu-page .img-wrapper img {
   height: 92vh;
 }
@@ -1829,6 +1840,8 @@ main.ng-enter .shopping-cart-page .item{
   transform-origin: 100% 50%;
   transform: rotateY(90deg);
   transition: all 1s ease;
+  visibility: hidden;
+  opacity: 0.5;
 }
 
 /* .ready-menu-second .item:nth-child(1) .item-img{
@@ -1848,6 +1861,8 @@ main.ng-enter .shopping-cart-page .item{
   transform-origin: 0% 50%;
   transform: rotateY(-90deg);
   transition: all 1s ease;
+  visibility: hidden;
+  opacity: 0.5;
 }
 
 /* .ready-menu-second .item:nth-child(1) .item-content {
@@ -2007,6 +2022,8 @@ main.ng-enter .shopping-cart-page .item{
 
 .ready-menu-second-scroll-class .item-img, .ready-menu-second-scroll-class .item-content {
   transform: rotateY(0deg);
+  visibility: visible;
+  opacity: 1;
 }
 /* ready-menu-second */
 
@@ -2792,6 +2809,7 @@ main.ng-enter .shopping-cart-page .item{
 .messages-page .select-dialog .item-name {
   color: #fff;
   margin: 5px 20px;
+  font-size: 15.9px;
 }
 
 .messages-page .dialog {

content/css/stylesPavel.css

@@ -0,0 +1,208 @@
+.about-us{
+    background-image:  url(../images/block_2.jpg);
+    background-size:cover;
+    z-index: -1;
+    height: 100%;
+    top:100px;
+   background-attachment:fixed;
+   min-width: 100%;
+   	font-family: "AvenirNextLTPro-Demi";
+}
+.about-us-main {
+    background-image: url(../images/about_fullscreen_bg.jpg);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+    height: 100vh;
+    padding-top: 130px;
+    position: relative;
+}
+.about-us-main h3{
+    max-width: 500px;
+    width: 100%;
+    font-weight: 700;
+    margin: 0;
+    padding: 60px 0;
+    color: #fff;
+    font-size: 70px;
+    letter-spacing: .72px;
+    line-height: 80px;
+    text-align: center;
+    margin: 0 auto;
+    z-index: 0;
+    position: absolute;
+    left: 50%;
+    top: calc(50% - 65px);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+}
+.about-us-counter{
+    background: #fff;
+    padding: 20px;
+    max-width: 900px;
+    text-align: center;
+    position: absolute;
+    top: 100vh;
+    left: 50%;
+    z-index: 1;
+    transform: translate(-50%,-50%);
+    box-shadow: 0 1px 1px 0 rgba(84,84,84,.3);
+}
+.about-us-description{
+    font-weight: 300;
+    color: #676767;
+    font-size: 16px;
+    letter-spacing: .16px;
+    line-height: 24px;
+    text-align: center;
+    max-width: 560px;
+    margin: 0 auto 10px;
+}
+.about-us-timer-left{
+    width: 50%;
+    float: left;
+}
+.about-us-timer-brend{
+    margin: 0 auto;
+    font-weight: 700;
+    color: #e4ca87;
+    font-size: 110px;
+}
+.about-us-timer-right{
+    width: 50%;
+    float: right;
+}
+.about-us-timer-restaurant{
+    margin: 0 auto;
+    font-weight: 700;
+    color: #e4ca87;
+    font-size: 110px;
+}
+.about-us-block_1{
+    background-image: url(../images/block_1.png);
+    background-repeat: no-repeat;
+    background-position: center calc(100% + 140px);
+    background-color: #f3f3f3;
+    padding-top: 420px;
+    padding-bottom: 140px;
+}
+.about-us-block_2{
+    padding: 100px 20px;
+    position: relative;
+    overflow: hidden;
+}
+.about-us-block_2 h2{
+  	font-family: "AvenirNextLTPro-Demi";
+    letter-spacing: .3px;
+    font-weight: 700;
+    font-size: 48px;
+    color: #fff;
+    text-align: center;
+    z-index: 1;
+    position: relative;
+    display: block;
+}
+.about-us-block_3{
+    background: white;
+}
+.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;
+  	font-family: "AvenirNextLTPro-Demi";
+    text-align: center;
+    padding: 60px 15px;
+    /*padding-bottom: 15px;*/
+    color: #4d4d4d;
+}
+.about-us-block_4 p {
+  display: block;
+  padding: 0 10px;;
+}
+.about-us-block_4 h2{
+    font-size: 30px;
+    text-align: center;
+    padding-top: 25px;
+    color: #4d4d4d;
+    font-weight: 700;
+}
+.about-us-slick {
+  background: #ffffff;
+  width: 70vw !important;
+}
+.slick-container {
+  position: relative;
+    text-align: center;
+    width: 100%;
+    margin: 0 auto;
+    /* padding: 15px; */
+}
+
+.about-us-slick-item {
+  display: flex;
+}
+.slick-dots li button{
+    font-size: 0 ;
+    border: 1px solid gray ;
+    border-radius: 50%;
+    background: #606060 ;
+    width: 10px;
+    height: 10px;
+}
+.slick-dots li button:hover{
+    background: white ;
+}
+.slick-dots li button:before{
+    content: '' ;
+}
+/* .slick-track {
+    display: flex;
+    align-items: center;
+} */
+.about-us-slick-item.slick-active:nth-of-type(3){
+  margin-right: 0px;
+}
+
+.about-us-slick-item {
+    display: flex;
+    justify-content: space-between;
+    width: 33%;
+}
+.about-us-slick-item img {
+    width: 250px;
+    margin: 0 auto;
+}
+@media screen and (max-width: 1024px){
+  .about-us-slick-item img {
+      width: 220px;
+  }
+  @media screen and (max-width: 768px){
+    .about-us-counter{
+        width: 65vw;
+    }
+    .about-us-slick-item img {
+        width: 160px;
+    }
+    .about-us-timer-brend, .about-us-timer-restaurant{
+        font-size: 90px;
+    }
+  }
+  @media screen and (max-width: 490px){
+    .about-us-slick-item img {
+        width: 90px;
+    }
+  }
+  @media screen and (max-width: 375px){
+    .about-us-slick-item img {
+        width: 50px;
+    }
+  }
+}

index.html

@@ -3,13 +3,15 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Angular App</title>
+    <title>Master Kitchen</title>
     <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
     <link href="content/css/adaptive-styles.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'>
+    <link href="content/css/stylesPavel.css" rel="stylesheet" type="text/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>
@@ -58,6 +60,9 @@
     <script src="./app/directives/one-week.js"></script>
     <script src="./app/directives/scroll-to-top.js"></script>
     <script src="./app/directives/btn-to-basket.js"></script>
+    <script src="./app/directives/one-week2.js"></script>
+    <script src="./app/controllers/AboutUsController.js"></script>
+
     <!-- test -->