add offers block

gulpfile.js

@@ -1,4 +1,4 @@
-const {src, dest, parallel, watch} = require('gulp');
+const {task, src, dest, parallel, watch} = require('gulp');
 const sass =  require('gulp-sass');
 const autoprefixer = require('gulp-autoprefixer');
 const browser = require('browser-sync');
@@ -14,20 +14,28 @@ const uglify = require('gulp-uglify-es').default;
 const del = require('del');
 const header = require('gulp-header');
 
-function getCss() {
+
+const getCss = async (mode = 'develop') => {
+
+  if (mode == 'build') {
+    return src('src/sass/**/*.sass', {ignore: 'src/sass/parts/**'})
+      .pipe(sass())
+      .pipe(cleanCSS({compatibility: 'ie8'}))
+      .pipe(autoprefixer())
+      .pipe(dest('assets/css'))
+  }
+
   return src('src/sass/**/*.sass')
-  .pipe(sourcemaps.init())
+    // .pipe(sourcemaps.init())
-  .pipe(newer('*'))
+    // .pipe(newer('*'))
     .pipe(sass())
     .pipe(autoprefixer())
-  // .pipe(concat('main.css'))
+    // .pipe(sourcemaps.write('./maps'))
-  .pipe(cleanCSS({
-    compatibility: 'ie8'
-  }))
-  .pipe(sourcemaps.write('./'))
     .pipe(dest('assets/css'))
-  .pipe(browser.stream());
+    // .pipe(browser.stream({match: '**/*.css'}));
+    .pipe(browser.reload({stream: true}));
 }
+
 function getJs() {
   return src('src/js/**/*.js')
   .pipe(sourcemaps.init())
@@ -35,8 +43,9 @@ function getJs() {
   .pipe(sourcemaps.write('./'))
   .pipe(dest('./assets/js'))
 }
+
 function check() {
-  watch('src/sass/**/*.sass', getCss).on('change', browser.reload);
+  watch('src/sass/**/*.sass', getCss.bind(null, 'develop')).on('change', browser.reload.bind(null, {stream: true}));
   watch('src/js/**/*.js', getJs).on('change', browser.reload);
   watch('src/img/*', compressImages).on('change', browser.reload);
 
@@ -44,15 +53,13 @@ function check() {
   watch('templates/*.php').on('add', checkNewTemplates);
 }
 
-function build() {
+const build = async () => {
+  console.log('\x1b[32m*** START BUILD ***');
+
   clean('assets/css');
-    return src('src/sass/**/*.sass', {ignore: 'src/sass/parts/**'})
+  await getCss('build')
-    .pipe(sass())
+
-    .pipe(cleanCSS({
+  console.log('\x1b[33m*** END BUILD ***\x1b[37m');
-        compatibility: 'ie8'
-    }))
-    .pipe(autoprefixer())
-    .pipe(dest('assets/css'))
 }
 
 function clean(path) {
@@ -127,6 +134,3 @@ exports.getjs = getJs;
 exports.check = check;
 exports.build = build;
 exports.start = parallel(check, startServer);
-
-// exports.makepages = makePages;
-

package.json

@@ -6,6 +6,7 @@
   "devDependencies": {
     "browser-sync": "^2.26.14",
     "del": "^6.0.0",
+    "gulp": "^4.0.2",
     "gulp-autoprefixer": "^7.0.1",
     "gulp-clean-css": "^4.3.0",
     "gulp-header": "^2.0.9",
@@ -14,11 +15,11 @@
     "gulp-sass": "^4.1.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-uglify-es": "^2.0.0",
-    "gulp": "^4.0.2",
     "imagemin-giflossy": "^5.1.10",
     "imagemin-mozjpeg": "^9.0.0",
     "imagemin-pngquant": "^9.0.2",
     "imagemin-zopfli": "^7.0.0",
+    "module-alias": "^2.2.2",
     "node-sass": "^5.0.0"
   },
   "scripts": {

parts/landings/graduation/offer-packet.php

@@ -0,0 +1,18 @@
+<div class="graduation__packet">
+	<div class="text">
+		<h3><?php echo $args[title] ?></h2>
+		<p><span><?php echo $args[price] ?></span> ₽ / <span>человек</span></p>
+	</div>
+	<div class="packet_description">
+		<ul>
+			<?php 
+				foreach ($args[description] as &$point) {
+				     ?>
+				     <li><?php echo $point; ?></li>
+				     <?php
+				}
+			?>
+		</ul>
+	</div>
+	<button class="graduation-btn">Заказать</button>
+</div>

parts/landings/graduation/offers.php

@@ -0,0 +1,33 @@
+<section class="graduation__block offers">
+	<div class="content">
+		<div class="headers">
+			<h2>Предложения</h2>
+			<p>Мы делаем все, чтобы у ваших детей был незабываемый выпускной вечер</p>
+		</div>
+
+		<div class="row packets center">
+			<div class="col-4 packet">
+				<?php get_template_part('parts/landings/graduation/offer-packet', null, array(
+					title => 'Базовый',
+					price => 900,
+					description => ['1 квест', '3 часа лофта', 'Украшение шарами', 'Аниматор', 'Диплом выпускника']
+				)); ?>
+			</div>
+			<div class="col-4 packet">
+				<?php get_template_part('parts/landings/graduation/offer-packet', null, array(
+					title => 'Стандарт',
+					price => 1390,
+					description => ['2 квест', '3 часа лофта', 'Украшение шарами', 'Аниматор', 'Диплом выпускника']
+				)); ?>
+			</div>
+			<div class="col-4 packet">
+			
+				<?php get_template_part('parts/landings/graduation/offer-packet', null, array(
+					title => 'VIP',
+					price => 2490,
+					description => ['2 квест', '3 часа лофта', 'Украшение шарами', 'Аниматор', 'Диплом выпускника']
+				)); ?>
+			</div>
+		</div>
+	</div>
+</section>

src/sass/fonts.sass

@@ -3,24 +3,43 @@ $main-color: #dc3545
 @font-face 
   font-family: 'Museo Thin' // Имя шрифта 
   src: url(../../fonts/Museo-Sans-Cyr/MuseoSansCyrl.otf) //Путь к файлу со шрифтом 
+
 @font-face 
   font-family: 'Museo Light' // Имя шрифта 
   src: url(../../fonts/Museo-Sans-Cyr/MuseoSansCyrl_0.otf) //Путь к файлу со шрифтом 
+
 @font-face 
   font-family: 'Museo Regular' // Имя шрифта 
   src: url(../../fonts/Museo-Sans-Cyr/MuseoSansCyrl_1.otf) //Путь к файлу со шрифтом 
+
 @font-face 
   font-family: 'Museo Bold' // Имя шрифта 
   src: url(../../fonts/Museo-Sans-Cyr/MuseoSansCyrl_2.otf) //Путь к файлу со шрифтом 
+
 @font-face 
   font-family: 'Museo Black' // Имя шрифта 
   src: url(../../fonts/Museo-Sans-Cyr/MuseoSansCyrl_3.otf) //Путь к файлу со шрифтом 
   src: url(../../fonts/Museo-Sans-Cyr/MuseoSansCyrl_2.otf) //Путь к файлу со шрифтом 
+
 @font-face 
   font-family: 'Shadow Regular'
   src: url('../fonts/Shadow/Shadow-Regular.ttf') format('truetype')
   font-style: normal
   font-weight: normal
+
 @font-face
   font-family: 'Montserrat'
   src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype')
+@font-face
+  font-family: 'Montserrat'
+  src: url('../fonts/Montserrat/Montserrat-Medium.ttf') format('truetype')
+  font-weight: 500
+
+@font-face
+  font-family: 'Roboto'
+  src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype')
+  font-weight: 400
+@font-face
+  font-family: 'Roboto'
+  src: url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype')
+  font-weight: 500

src/sass/pages/graduation.sass

@@ -1,4 +1,5 @@
 @import '../fonts'
+// @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
 $title-color: #732B3C
 $text-color: #5A5A5A
@@ -12,6 +13,7 @@ body
   font-family: 'Montserrat'
 
 .graduation-btn
+  display: block
   padding: 35px 65px
   background: $btn-color
   outline: none
@@ -80,3 +82,88 @@ main
     margin: 0 auto
     max-width: 1028px
     padding: 97px 90px 87px
+
+.graduation__block
+  padding: 120px 100px
+
+  .content
+    margin: 0 auto
+
+    .headers
+      margin: 0 auto
+      max-width: 710px
+      margin-bottom: 80px
+
+      h2
+        text-align: center
+        font-size: 40px
+        
+      p
+        padding: 0 50px
+        font-family: Montserrat;
+        font-style: normal
+        font-weight: 500
+        text-align: center
+
+  &.offers
+    background: url('../../img/graduation/offers_bg.png') center no-repeat
+    background-size: cover
+
+    .packets
+      margin: 0 auto
+
+    .packet
+      &:nth-child(2)
+        margin-top: 70px
+      &:nth-child(3)
+        margin-top: 140px
+
+    .graduation__packet
+      padding: 40px 60px
+      background: #fff
+      max-width: 392px
+      box-shadow: 8px 8px 14px #EBC8AE
+      border-radius: 2px
+
+
+      .graduation-btn
+        padding: 26px 50px
+        margin: 0 auto
+
+      .text
+        width: 263.01px
+        height: 248.68px
+        background: url('../../img/graduation/offer-packet/text_bg.png') center no-repeat
+        padding: 89px 0 80px 0
+
+        h3
+          text-align: center
+          font-family: 'Shadow'
+          font-size: 40px
+          color: #444444
+
+        p
+          font-family: 'Roboto'
+          font-weight: 500
+          font-size: 24px
+          color: #323232
+          text-align: center
+
+          span
+            &:last-child
+              font-size: 16px
+
+      .packet_description
+        margin-bottom: 40px
+
+        ul
+          list-style: none
+          list-style-image: url('../../img/graduation/list_before.png')
+
+          li
+            padding-left: 30px
+            font-family: Montserrat
+            font-style: normal
+            font-weight: 600
+            font-size: 18px
+            margin-bottom: 14px

templates/graduation.php

@@ -8,5 +8,6 @@
   get_template_part('parts/landings/graduation/header');
   get_template_part('parts/landings/graduation/main');
   get_template_part('parts/landings/graduation/description');
+  get_template_part('parts/landings/graduation/offers');
   get_template_part('parts/landings/graduation/footer');
 ?>