Added about us

app/app.js

@@ -13,7 +13,11 @@ app.config(['$routeProvider', function($routeProvider){
     .when('/add-item',{
       templateUrl: './app/views/add-item-page.html',
       controller: 'AddItemPageController'
-    }).otherwise({
+    })
+      .when('/about-us',{
+          templateUrl: './app/views/about-us.html',
+          controller: 'AboutUsController'
+      }).otherwise({
       redirectTo: '/'
     })
 

app/controllers/AboutUsController.js

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

app/views/about-us.html

@@ -0,0 +1,27 @@
+<div ng-controller="AboutUsController">
+    <div class="about-us">
+
+       <div class="about-us-main">
+            <h3>Master Kitchen Food Delivery</h3>
+            <div class="counter">
+                <div class="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>
+                    <p>BRENDS</p>
+                </div>
+                <div class="timer-right">
+                    <div class="timer-restaurant">18</div>
+                    <P>RESTAURANTS</P>
+                </div>
+            </div>
+        </div>
+            <div class="block_1"></div>
+           <div class="block_2">
+                <h2>Master Kitchen-live tasty!</h2>
+            </div>
+        <div class="block_3"></div>
+        </div>
+    </div>
+</div>

app/views/nav-menu.html

@@ -5,7 +5,7 @@
     <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="#">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-class="{'active-link': isActive('/about-us')}" ng-click="toggleMenu()"><a href="#!/about-us">About us</a></li>
     <li ng-click="toggleMenu()"><a href="#">Contacts</a></li>
     <li ng-class="{'active-link': isActive('/add-item')}" ng-click="toggleMenu()"><a href="#!/add-item">Add item</a></li>
   </ul>

content/css/stylesPavel.css

@@ -0,0 +1,113 @@
+.about-us{
+    background-image:  url(../images/block_2.jpg);
+    background-size:cover;
+    z-index: -1;
+    height: 1300px;
+    top:100px;
+   background-attachment:fixed;
+   max-width: 100%;
+}
+.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: 72px;
+    letter-spacing: .72px;
+    line-height: 60px;
+    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%);
+}
+.counter{
+    background: #fff;
+    padding: 20px;
+    max-width: 900px;
+    text-align: center;
+    position: absolute;
+    top: 100vh;
+    left: 50%;
+    z-index: 2;
+   /* -webkit-transform: translate(-50%,-50%);*/
+    transform: translate(-50%,-50%);
+    box-shadow: 0 1px 1px 0 rgba(84,84,84,.3);
+}
+.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;
+}
+.timer-left{
+    width: 50%;
+    float: left;
+
+}
+.timer-brend{
+    margin: 0 auto;
+    font-weight: 700;
+    color: #e4ca87;
+    font-size: 110px;
+}
+.timer-right{
+    width: 50%;
+    float: right;
+}
+.timer-restaurant{
+    margin: 0 auto;
+    font-weight: 700;
+    color: #e4ca87;
+    font-size: 110px;
+}
+.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;
+}
+.block_2{
+    padding: 100px 20px;
+    border: solid 1px;
+    position: relative;
+    overflow: hidden;
+}
+.block_2 h2{
+    font-size: 30px;
+    letter-spacing: .3px;
+    font-weight: 700;
+    font-size: 48px;
+    color: #fff;
+    text-align: center;
+    z-index: 2;
+    position: relative;
+    display: block;
+}
+.block_3{
+    background: white;
+    height: 200px;
+    width: 100%;
+    border: solid 1px;
+}

index.html

@@ -3,6 +3,7 @@
   <head>
     <title>TheNetNinja Angular Playlist</title>
     <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">
 
     <script src="./app/lib/angular.js"></script>
@@ -25,6 +26,7 @@
     <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/steps.js"></script>