added slider

app/app.js

@@ -1 +1,12 @@
-var app = angular.module('angularProject',[]);
+var app = angular.module('angularProject',['ngRoute','ngAnimate']);
+
+app.config(['$routeProvider', function($routeProvider){
+  $routeProvider
+    .when('/',{
+      templateUrl: './app/views/main-page.html',
+      controller: 'MainPageController'
+    }).otherwise({
+      redirectTo: '/'
+    })
+
+}])

app/controllers/MainPageController.js

@@ -0,0 +1,3 @@
+app.controller('MainPageController',['$scope',function($scope){
+  
+}])

app/controllers/appRootController.js

@@ -1,6 +1,6 @@
-app.controller('appRootController',['$scope',function($scope){
+app.controller('AppRootController',['$scope',function($scope){
   $scope.isOpenMenu = false;
-  $scope.openMenu = function(){
+  $scope.toggleMenu = function(){
     if($scope.isOpenMenu){
       $scope.isOpenMenu = false;
     }else {

app/directives/mainSlider.js

@@ -0,0 +1,34 @@
+app.directive('mainSlider',['$interval','$timeout',function($interval,$timeout){
+  return {
+    restrict: 'E',
+    scope: {},
+    replace: true,
+    templateUrl: './app/views/main-slider.html',
+    controller: function($scope){
+      $scope.currentSlide = 0;
+      $scope.slides = [
+        'content/images/main-page-slider-image1.jpg',
+        'content/images/main-page-slider-image2.jpg',
+        'content/images/main-page-slider-image3.jpg'
+      ]
+
+
+      var runInterval = function(){
+        $scope.sliderInterval = $interval(function(){
+          if($scope.currentSlide == $scope.slides.length - 1){
+            $scope.currentSlide = 0;
+          } else{
+            $scope.currentSlide++;
+          }
+        },7000)
+      }
+      runInterval();
+
+      $scope.selectImage = function(imageUrl){
+        $scope.currentSlide = $scope.slides.indexOf(imageUrl);
+        $interval.cancel($scope.sliderInterval);
+        runInterval();
+      }
+    }
+  }
+}]);

app/directives/navmenu.js

@@ -1,10 +1,20 @@
-app.directive('navmenu',[function(){
+app.directive('navMenu',[function(){
   return {
     restrict: 'E',
-    scope: {},
-    templateUrl: 'app/views/navmenu.html',
-    controller: function($scope){
-      
+    scope: {
+      toggleMenu: '&',
+      isActive: '&'
+    },
+    templateUrl: 'app/views/nav-menu.html',
+    controller: function($scope,$location){
+      $scope.isActive = function(linkPath){
+        if(linkPath == $location.path()){
+          return true;
+        } else{
+          return false;
+        }
+
+      }
     }
   }
 }])

app/views/app-root.html

@@ -1,11 +1,12 @@
-<div ng-controller="appRootController" ng-class="isOpenMenu?'open-menu' : 'close-menu'" class="navbar">
+<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">
-    <i class="fa fa-bars" ng-click="openMenu()"></i>
+    <i class="fa fa-bars" ng-click="toggleMenu()"></i>
     <div class="logo">
       Master Kitchen
     </div>
     <div class="undefined-btn"></div>
   </div>
-  <navmenu ng-class="isOpenMenu?'open-menu' : 'close-menu'"></navmenu>
+  <nav-menu toggle-menu="toggleMenu()" ng-class="isOpenMenu?'open-menu' : 'close-menu'"></nav-menu>
   <main ng-view></main>
 </div>

app/views/main-page.html

@@ -0,0 +1,20 @@
+<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>
+</div>

app/views/main-slider.html

@@ -0,0 +1,17 @@
+<div class="main-slider">
+  <div class="main-slider-overlay"></div>
+  <div class="main-slider-back-overlay"></div>
+  <div class="main-slider-content">
+    <div class="main-slider-text">
+      <p>DELICIOUS HEALTHY FOOD DELIVERED RIGHT TO YOUR DOOR</p>
+    </div>
+    <div class="main-slider-buttons">
+      <a href="#">SELECT MENU</a>
+      <a href="#">READY MENUS</a>
+    </div>
+    <div class="main-slider-bars-wrapper">
+      <div class="main-slider-bar" ng-repeat="slide in slides" ng-class="{'main-slider-bar-active': slide == slides[currentSlide]}" ng-click="selectImage(slide)"></div>
+    </div>
+  </div>
+  <img ng-animate-swap="slides[currentSlide]" ng-src="{{slides[currentSlide]}}">
+</div>

app/views/nav-menu.html

@@ -0,0 +1,22 @@
+<nav class="nav-menu">
+  <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-click="toggleMenu()"><a href="#">Customize menu</a></li>
+    <li ng-click="toggleMenu()"><a href="#">Ready menus</a></li>
+    <li ng-click="toggleMenu()"><a href="#">Delivery</a></li>
+    <li ng-click="toggleMenu()"><a href="#">About us</a></li>
+    <li ng-click="toggleMenu()"><a href="#">Contacts</a></li>
+  </ul>
+  <div class="nav-menu-icons-wrapper">
+    <div class="nav-menu-icon">
+      <a href="#"><i class="fa fa-facebook"></i></a>
+    </div>
+    <div class="nav-menu-icon">
+      <a href="#"><i class="fa fa-instagram"></i></a>
+    </div>
+    <div class="nav-menu-icon">
+      <a href="#"><i class="fa fa-twitter"></i></a>
+    </div>
+  </div>
+</nav>

app/views/navmenu.html

@@ -1,8 +0,0 @@
-<nav class="nav-menu">
-  <ul>
-    <li><a href="#">Option</a></li>
-    <li><a href="#">Option</a></li>
-    <li><a href="#">Option</a></li>
-    <li><a href="#">Option</a></li>
-  </ul>
-</nav>

content/css/styles.css

@@ -1,3 +1,6 @@
+/* fonts */
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
+
 @font-face {
   font-family: "Helvetica Neue";
   src: url('../fonts/helveticaneuecyr-light.otf');
@@ -8,12 +11,15 @@
   src: url('../fonts/AvenirNextLTPro-Demi.otf');
 }
 
+/* fonts */
+
 body{
   font-family: Helvetica;
   margin: 0;
+  overflow-x: hidden;
 }
 
-h1,h2,h3{
+h1,h2,h3,p{
   margin: 0;
 }
 
@@ -26,19 +32,38 @@ body * {
   box-sizing: border-box;
 }
 
-/* navbar */
-.navbar {
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(29,29,31,.6);
+  z-index: 3;
+  opacity: 0;
+  transition: opacity .6s cubic-bezier(.645,.045,.355,1);
+  pointer-events: none;
+}
+
+.overlay-active {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+
+/* header-line */
+.header-line {
+  z-index: 2;
   position: fixed;
   top: 0;
   width: 100%;
   height: 50px;
-  background-color: #F3F3F5;
+  background-color: #FFF;
+  border-bottom: 1px solid rgb(222, 223, 224);
 }
 
-.navbar .fa-bars {
+.header-line .fa-bars {
   display: inline-block;
   cursor: pointer;
-  color: #010101;
+  color: #222;
   width: 10%;
   padding-left: 25px;
   padding-top: 15px;
@@ -46,21 +71,21 @@ body * {
   font-size: 22px;
 }
 
-.navbar .logo {
+.header-line .logo {
   display: inline-block;
   font-family: "Helvetica Neue",Arial,sans-serif;
-  font-weight: bold;
+  font-weight: bolder;
   font-size: 25px;
   letter-spacing: 0.1em;
   width: 80%;
   text-align: center;
 }
 
-.navbar .undefined-btn {
+.header-line .undefined-btn {
   width: 80%;
   display: inline-block;
 }
-/* navbar */
+/* header-line */
 
 
 /* navmenu */
@@ -76,25 +101,223 @@ body * {
   transform: translateX(-281px);
 }
 
+.nav-menu span.nav-menu-title{
+  display: block;
+  color: #fff;
+  font-size: 15px;
+  margin-top: 10px;
+  margin-bottom: 40px;
+}
+
 .nav-menu li {
   list-style-type: none;
-  padding: 15px 0;
+  padding: 18px 0;
+  transition: all .5s cubic-bezier(.39,.575,.565,1);
+  cursor: pointer;
 }
 
-.nav-menu li a {
-  font-family: "AvenirNextLTPro-Demi", Arial, sans-serif;
+.nav-menu li:hover {
+  transform: translateX(4px);
+}
 
+.nav-menu li:hover a{
   color: #fff;
+}
+
+.nav-menu li a, .nav-menu span{
+  font-family: "AvenirNextLTPro-Demi", Arial, sans-serif;
+  color: #9c9c9c;
   text-decoration: none;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: .2em;
+}
+
+.nav-menu li.active-link a{
+  color: #fff;
+}
+
+.nav-menu-icons-wrapper {
+  position: absolute;
+  display: -webkit-flex;
+  display: -ms-flex;
+  display: flex;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-top: 1px solid #333;
+}
+
+.nav-menu-icon {
+  display: inline-block;
+  width: 33.3%;
+}
+
+.nav-menu-icon a {
+  display: block;
+  font-size: 19px;
+  color: #BCBCBC;
+  text-align: center;
+  padding: 15px 0;
+  transition: all .5s ease;
+}
+
+.nav-menu-icon a:hover {
+  background-color: #000;
+  color: #fff;
+}
+
+.nav-menu-icon:nth-child(1) a {
+  border-right: 1px solid #333;
+}
+
+.nav-menu-icon:nth-child(2){
+}
+
+.nav-menu-icon:nth-child(3) a {
+  border-left: 1px solid #333;
 }
-/* navmenu */
 
 .open-menu {
-  transition: all 1s cubic-bezier(.645,.045,.355,1);
+  transition: all 0.6s cubic-bezier(.645,.045,.355,1);
   transform: translateX(281px);
 }
 
 .close-menu {
-  transition: all 1s cubic-bezier(.645,.045,.355,1);
+  transition: all 0.6s cubic-bezier(.645,.045,.355,1);
   transform: translateX(0px);
 }
+/* navmenu */
+
+/* main-page */
+.main-page {
+  background: rgb(244, 244, 246);
+}
+.main-page .about {
+  height: 500px;
+}
+/* main-page */
+
+/* main-slider */
+.main-slider {
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+.main-slider-overlay {
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.35);
+}
+
+.main-slider-back-overlay {
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  background-color: #000;
+  opacity: 0.7;
+}
+
+.main-slider img {
+  width: 100%;
+}
+
+.main-slider img.ng-enter, .main-slider img.ng-leave {
+  transition: all 3s ease;
+}
+
+.main-slider img.ng-enter {
+  transform: translateX(100%);
+}
+
+.main-slider img.ng-enter-active {
+  transform: translateX(0);
+}
+
+.main-slider img.ng-leave {
+  transform: translateX(0) translateY(-100.5%);
+}
+
+.main-slider img.ng-leave-active {
+  transform: translateX(-100%) translateY(-100.5%);
+}
+
+/* .main-slider img.ng-leave-stagger {
+  transition-delay: 0.2s;
+  transition-duration: 0;
+} */
+
+.main-slider-content {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+}
+
+.main-slider-text {
+  text-align: center;
+  font-size: 56px;
+  color: #fff;
+  z-index: 2;
+  width: 1180px;
+  margin: 0 auto;
+  margin-top: 220px;
+  margin-bottom: 60px;
+}
+
+.main-slider-text p {
+  font-weight: bold;
+  font-family: 'Montserrat', Arial, sans-serif;
+  letter-spacing: 2px;
+}
+
+.main-slider-buttons {
+  display: flex;
+  justify-content: space-around;
+  z-index: 2;
+  border: red;
+  width: 550px;
+  margin: 0 auto;
+}
+
+.main-slider-buttons a {
+  padding: 12px 32px;
+  text-decoration: none;
+  color: #fff;
+  border: 1px solid rgba(255,255,255,.6);
+  background: rgba(0,0,0,.5);
+  font-size: 20px;
+  font-weight: bold;
+  font-family: 'Montserrat', Arial, sans-serif;
+  transition: all ease .5s;
+}
+
+.main-slider-buttons a:hover {
+  background: rgba(150,150,150,.5);
+}
+
+.main-slider-bars-wrapper {
+  display: flex;
+  margin: 0 auto;
+  margin-top: 150px;
+  width: 155px;
+  justify-content: space-between;
+}
+
+.main-slider-bar {
+  display: inline-block;
+  width: 46px;
+  height: 7px;
+  background: #fff;
+  cursor: pointer;
+  opacity: 0.4;
+  background: #fff;
+}
+
+.main-slider-bar-active {
+  opacity: 0.7;
+}
+/* main-slider */

index.html

@@ -9,7 +9,9 @@
     <script src="./app/lib/angular-animate.min.js"></script>
     <script src="./app/app.js"></script>
     <script src="./app/directives/navmenu.js"></script>
-    <script src="./app/controllers/appRootController.js"></script>
+    <script src="./app/controllers/AppRootController.js"></script>
+    <script src="./app/controllers/MainPageController.js"></script>
+    <script src="./app/directives/mainSlider.js"></script>
   </head>
   <body>
     <app-root ng-include="'./app/views/app-root.html'"></app-root>