Merge branch 'pavelefimen95' of pavelefimen95/angularProject into master

app/directives/mainSlider.js

@@ -5,7 +5,13 @@ app.directive('mainSlider',['$interval','$timeout',function($interval,$timeout){
     replace: true,
     templateUrl: './app/views/main-slider.html',
     controller: function($scope){
+      var backOverlay = angular.element(document.querySelector('.main-slider-back-overlay'));
+      $timeout(function(){
+        backOverlay.css('transform', 'translateX(-100%)');
+      },10)
+
       $scope.currentSlide = 0;
+      $scope.canIClick = true;
       $scope.slides = [
         'content/images/main-page-slider-image1.jpg',
         'content/images/main-page-slider-image2.jpg',
@@ -25,9 +31,15 @@ app.directive('mainSlider',['$interval','$timeout',function($interval,$timeout){
       runInterval();
 
       $scope.selectImage = function(imageUrl){
-        $scope.currentSlide = $scope.slides.indexOf(imageUrl);
-        $interval.cancel($scope.sliderInterval);
-        runInterval();
+        if($scope.canIClick){
+          $scope.canIClick = false;
+          $scope.currentSlide = $scope.slides.indexOf(imageUrl);
+          $interval.cancel($scope.sliderInterval);
+          runInterval();
+          $timeout(function(){
+            $scope.canIClick = true;
+          },3000)
+        }
       }
     }
   }

app/directives/scroll.js

@@ -0,0 +1,38 @@
+app.directive('scroll', ['$window','$timeout',function($window,$timeout) {
+  return {
+    restrict: 'A',
+    scope: {
+      offset: '@',
+      offsetSecond: '@',
+      scrollClass: '@',
+      scrollClassSecond: '@',
+      scrollClassThird: '@'
+    },
+    link: function(scope, element) {
+      var canIHover = function(){
+        element.removeClass(scope.scrollClassThird);
+        $timeout(function(){
+          element.addClass(scope.scrollClassThird);
+        },1000)
+      }
+      var windowJQ = angular.element($window)
+      windowJQ.bind("scroll", function() {
+          if (window.pageYOffset >= parseInt(scope.offset)) {
+            element.addClass(scope.scrollClass);
+            canIHover();
+          } else {
+            element.removeClass(scope.scrollClass);
+            canIHover();
+          }
+
+          if(window.pageYOffset >= parseInt(scope.offsetSecond)){
+            element.addClass(scope.scrollClassSecond);
+            canIHover();
+          } else {
+            element.removeClass(scope.scrollClassSecond);
+            canIHover();
+          }
+      });
+    }
+  };
+}])

app/directives/steps.js

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

app/views/about.html

@@ -10,7 +10,7 @@
           </div>
           <h2>HEALTHY FOOD</h2>
           <div class="about-item-description">
-            Our food is low in sodium for proper treatment of high blood pressure, absent of processed flours and sugars.
+            Our food is low in sodium for proper treatment of high blood pressure, absent of processed sugars.
           </div>
         </div>
         <a href="#" class="about-item-second-side">
@@ -24,7 +24,7 @@
           </div>
           <h2>GOOD TASTE</h2>
           <div class="about-item-description">
-            Any time of day, any day of the week, have quick access to delicious nourishing <br>meals.
+            Any time of day, any day of the week, have quick access to delicious nourishing meals.
           </div>
         </div>
         <a href="#" class="about-item-second-side">

app/views/main-page.html

@@ -1,4 +1,5 @@
 <div class="main-page">
   <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>
 </div>

app/views/main-slider.html

@@ -1,6 +1,8 @@
 <div class="main-slider">
   <div class="main-slider-overlay"></div>
-  <div class="main-slider-back-overlay"></div>
+  <div class="main-slider-back-overlay">
+    <img ng-src="{{slides[slides.length - 1]}}">
+  </div>
   <div class="main-slider-content">
     <div class="main-slider-text">
       <p>DELICIOUS HEALTHY FOOD DELIVERED RIGHT TO YOUR DOOR</p>

app/views/steps.html

@@ -0,0 +1,48 @@
+<div class="steps">
+  <div class="steps-wrapper">
+    <h1 class="steps-title">
+      HOW IT WORKS
+    </h1>
+    <div class="steps-description">
+      FOUR SIMPLE STEPS
+    </div>
+    <div class="steps-item-wrapper">
+      <div class="steps-item">
+        <div class="steps-item-content">
+          Your food is prepared and securely packaged. Our courier is at your door.
+          Your food is prepared and securely packaged. Our courier is at <br>your door.
+        </div>
+        <div class="steps-item-number">
+          Step 1
+        </div>
+      </div>
+      <div class="steps-item">
+        <div class="steps-item-content">
+          Your food is prepared and securely packaged. Our courier is at your door.
+          Your food is prepared and securely packaged. Our courier is at <br>your door.
+        </div>
+        <div class="steps-item-number">
+          Step 2
+        </div>
+      </div>
+      <div class="steps-item">
+        <div class="steps-item-content">
+          Your food is prepared and securely packaged. Our courier is at your door.
+          Your food is prepared and securely packaged. Our courier is at <br>your door.
+        </div>
+        <div class="steps-item-number">
+          Step 3
+        </div>
+      </div>
+      <div class="steps-item">
+        <div class="steps-item-content">
+          Your food is prepared and securely packaged. Our courier is at your door.
+          Your food is prepared and securely packaged. Our courier is at <br>your door.
+        </div>
+        <div class="steps-item-number">
+          Step 4
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

content/css/styles.css

@@ -1,5 +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');
 
 @font-face {
   font-family: "Helvetica Neue";
@@ -19,13 +20,13 @@ body{
   overflow-x: hidden;
 }
 
-h1,h2,h3,p{
+h1,h2,h3{
   margin: 0;
   font-weight: bold;
 }
 
 h1 {
-  font-size: 40px;
+  font-size: 32px;
 }
 
 h2 {
@@ -218,8 +219,8 @@ body * {
   position: absolute;
   width: 100%;
   height: 100vh;
-  background-color: #000;
-  opacity: 0.7;
+  opacity: 1;
+  transition: all 3s ease;
 }
 
 .main-slider img {
@@ -332,21 +333,18 @@ body * {
 }
 
 .main-page .about {
-  font-family: "Helvetica Neue", Arial, sans-serif;
-  letter-spacing: 1.75px;
   padding: 60px 0;
   /* background: linear-gradient(to bottom,rgb(244, 244, 246), rgb(260, 260, 260)); */
-  background: rgb(244, 244, 246);
+  background: rgb(241, 241, 245);
 }
 
 .main-page .about-wrapper {
   margin: 0 auto;
-  width: 1180px;
+  max-width: 1180px;
 }
 
 .main-page .about h1 {
   text-align: center;
-  font-size: 30px;
   color: #2A2627;
   margin-bottom: 80px;
 }
@@ -380,7 +378,11 @@ body * {
   position: relative;
   z-index: 1;
   perspective: 600px;
+}
 
+.main-page .about-item-description {
+  font-family: 'Lato', sans-serif;
+  letter-spacing: 0.3px;
 }
 
 .main-page .about-item-first-side {
@@ -391,7 +393,10 @@ body * {
   /* border: 1px solid rgba(29, 29, 31,.1); */
   position: absolute;
   transform: rotateY(0deg);
-  background: linear-gradient(to top,rgb(247, 247, 247), rgb(260, 260, 260));
+
+  /* background: linear-gradient(to top,rgb(252, 252, 252), rgb(260, 260, 260)); */
+  /* background-color: #fff; */
+  background: rgb(252, 252, 254);
 }
 
 .main-page .about-item-second-side {
@@ -401,7 +406,7 @@ body * {
   padding: 40px 30px;
   box-shadow: 0 0 22px #cacaca;
   width: 100%;
-  height: 283px;
+  height: 272px;
   transform: rotateY(90deg);
   text-align: center;
   cursor: pointer
@@ -443,4 +448,104 @@ body * {
   color: #2A2627;
   margin-bottom: 25px;
 }
+
+.main-page .steps {
+  padding: 60px 0;
+  background: rgb(252, 252, 254);
+}
+
+.main-page .steps-wrapper {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.main-page h1.steps-title {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.main-page .steps-description {
+  text-align: center;
+  font-size: 18px;
+  margin-bottom: 50px;
+}
+
+.main-page .steps-item-wrapper {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  perspective: 600px;
+}
+
+.main-page .steps-item {
+  width: 42%;
+  position: relative;
+  margin-bottom: 60px;
+  background: rgb(252, 252, 254);
+  box-shadow: 0 0 10px #cacaca;
+  transition: all 1s cubic-bezier(.645,.045,.355,1);
+}
+
+.main-page .steps-item:nth-child(1), .main-page .steps-item:nth-child(3) {
+  transform: translateX(-200%);
+}
+
+.main-page .steps-item:nth-child(2), .main-page .steps-item:nth-child(4) {
+  transform: translateX(200%);
+}
+
+
+/* .main-page .steps-item:hover {
+  transform-origin: 50% 0%;
+  transform: rotateX(8deg);
+  box-shadow: 0 0 20px #cacaca;
+} */
+
+.main-page .steps-item-content {
+  text-align: center;
+  border: 2px solid rgba(29, 29, 31,.7);
+  padding: 70px 40px 40px;
+  font-size: 17px;
+  font-family: 'Lato', sans-serif;
+}
+
+.main-page .steps-item-number {
+  position: absolute;
+  background: rgba(29, 29, 31,.9);
+  color: #fff;
+  font-size: 17px;
+  font-weight: bold;
+  padding: 10px 25px;
+  top: 20px;
+  left: -10px;
+  font-style: italic;
+}
+
+.main-page .steps-item-number::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -10px;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 0 10px 10px;
+  border-color: transparent transparent #000 transparent;
+}
+
+.main-page .steps-scroll-class .steps-item:nth-child(1), .steps-scroll-class .steps-item:nth-child(2) {
+  transform: translateX(0);
+}
+
+.main-page .steps-scroll-class-second .steps-item:nth-child(3), .steps-scroll-class-second .steps-item:nth-child(4){
+  transform: translateX(0);
+}
+
+.main-page .steps-scroll-class-hover .steps-item:hover {
+  transition: all 0.7s ease;
+  transform: translateX(0) rotateX(7deg);
+  transform-origin: 50% 0%;
+  box-shadow: 0 0 20px #cacaca;
+}
 /* main-page */

index.html

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