Fix footer and news min-width

Fix pricing tiles size
Fix news and footer
2018-06-05 14:10:39 +02:00 · 2018-06-05 13:56:56 +02:00 · 2018-06-04 14:50:37 +02:00 · 2018-06-04 14:45:03 +02:00 · 2018-06-04 14:01:46 +02:00 · 2018-06-04 12:11:22 +02:00
29 changed files with 5550 additions and 126 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -46,7 +46,7 @@ gulp.task('serve', function() {
  });

  gulp.watch(config.htmlIn, function() { sequence('html', 'reload') });
-  gulp.watch(config.scssIn, function() { sequence('sass', 'css', 'reload') });
+  gulp.watch(config.scssIn, function() { sequence('sass', 'css' ) });
  gulp.watch(config.jsIn, function() { sequence('js', 'reload') });
  gulp.watch(config.imgIn, function() { sequence('img', 'reload') });
  gulp.watch(config.svgIn, function() { sequence('svg', 'reload') });
--- a/src/img/features/1.png
+++ b/src/img/features/1.png
--- a/src/img/features/2.png
+++ b/src/img/features/2.png
--- a/src/img/features/3.png
+++ b/src/img/features/3.png
--- a/src/img/features/4.png
+++ b/src/img/features/4.png
--- a/src/img/header/img.png
+++ b/src/img/header/img.png
--- a/src/img/navbar/sandwich.svg
+++ b/src/img/navbar/sandwich.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 22" width="27" height="22">
+	<style>
+		tspan { white-space:pre }
+		.shp0 { fill: #333333 } 
+	</style>
+	<path id="sandwich" class="shp0" d="M0,20.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM0,11.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM6,2.5c0,0.83 0.67,1.5 1.5,1.5h17c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-17c-0.83,0 -1.5,0.67 -1.5,1.5z" />
+</svg>
--- a/src/index.html
+++ b/src/index.html
@@ -28,39 +28,47 @@
 </head>
 <body>
 <div class="wrapper" id="wrapper">
-    <div class="navbar navbar-expand-lg fixed-top">
-        <div class="container">
-            <div class="brand navbar-header">
+    <div class="navbar navbar-light navbar-expand-lg fixed-top">
+        <div class="container navbar__content">
+            <div class="brand navbar__content__brand navbar-header">
                <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
                <span class="brand__name">Fork</span>
                <span class="brand__name brand__name--emph">IO</span>
            </div>
-            <ul class="navbar__body navbar-nav">
-                <li class="nav-item">
-                    <a class="navbar__link nav-link" href="#">Overview</a>
-                </li>
-                <li class="nav-item">
-                    <a class="navbar__link nav-link" href="#">About fork</a>
-                </li>
-                <li class="nav-item">
-                    <a class="navbar__link nav-link" href="#">Buying options</a>
-                </li>
-                <li class="nav-item">
-                    <a class="navbar__link nav-link" href="#">Support</a>
-                </li>
-                <li class="nav-item">
-                    <button class="rounded-button rounded-button--strong">Buy now</button>
-                </li>
-            </ul>
+            <button class="navbar__content__button navbar__content__button--phone rounded-button rounded-button--strong">Buy now</button>
+            <button class="navbar__content__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
+                    aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
+                <img src="img/navbar/sandwich.svg" alt="">
+            </button>
+            <div class="collapse navbar-collapse nav-content" id="navbarNavDropdown">
+                <ul class="navbar__content__body navbar-nav mr-0 ml-auto">
+                    <li class="nav-item">
+                        <a class="navbar__link nav-link" href="#">Overview</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="navbar__link nav-link" href="#">About fork</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="navbar__link nav-link" href="#">Buying options</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="navbar__link nav-link" href="#">Support</a>
+                    </li>
+                    <li class="nav-item">
+                        <button class="navbar__content__button navbar__content__button--desktop rounded-button rounded-button--strong">Buy now</button>
+                    </li>
+                </ul>
+            </div>
        </div>
    </div>

    <header class="header">
-        <div>
+        <div class="header__text">
            <p class="header__title">Fork app</p>
            <p class="header__subtitle">A real gamechanger in the world of web development</p>
            <p class="header__description">V. 2.8 for Mac and Windows</p>
        </div>
+        <div class="header__image">&nbsp;</div>
    </header>
    <div class="download">
        <a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated">
@@ -109,12 +117,13 @@
    <div class="about">
        <div class="container">
            <div class="row">
-                <div class="about__features col-6">
+                <div class="about__features col-12 col-xl-6">
+                    <p class="about__title about__title--desktop">&lt;Here is what you get&gt;</p>
                    <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                            <img src="img/features/1.png" alt=""/>
                        </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                            <p class="feature__title">
                                Created to Make The Web Better
                            </p>
@@ -126,10 +135,10 @@
                        </div>
                    </div>
                    <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                            <img src="img/features/2.png" alt=""/>
                        </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                            <p class="feature__title">
                                Incredibly Powerful Tool
                            </p>
@@ -141,10 +150,10 @@
                        </div>
                    </div>
                    <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                            <img src="img/features/3.png" alt=""/>
                        </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                            <p class="feature__title">
                                Experimental Stuff
                            </p>
@@ -156,10 +165,10 @@
                        </div>
                    </div>
                    <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                            <img src="img/features/4.png" alt=""/>
                        </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                            <p class="feature__title">
                                Created to Make The Web Better
                            </p>
@@ -171,8 +180,8 @@
                        </div>
                    </div>
                </div>
-                <div class="about__what-you-get col-6">
-                    <p class="about__title about__title--no-wrap">&lt;Here is what you get&gt;</p>
+                <div class="about__what-you-get col-12 col-xl-6">
+                    <p class="about__title about__title--no-wrap about__title--desktop-xl">&lt;Here is what you get&gt;</p>
                    <img src="img/features/editor.png" alt="Revolutionary editor">
                </div>
            </div>
@@ -238,26 +247,29 @@
    <div class="social container">
        <div class="row justify-content-center">
            <div class="social__content col-10">
-                <div>
-                    <button class="rect-button rect-button--github rect-button--fixed-width">
+                <div class="social__github">
+                    <a href="https://github.com/bartlomiej-pluta/forkio" target="_blank"
+                       class="rect-button rect-button--github rect-button--fixed-width">
                        <span class="rect-button__icon fab fa-github"></span>
                        GitHub
-                    </button>
-                    <p class="social__stats">7 352 Followers</p>
+                    </a>
+                    <p id="github-watchers" class="social__stats"></p>
                </div>
-                <div>
-                    <button class="rect-button rect-button--twitter rect-button--fixed-width">
+                <div class="social__twitter">
+                    <a href="https://twitter.com/pgssoftware" target="_blank"
+                       class="rect-button rect-button--twitter rect-button--fixed-width">
                        <span class="rect-button__icon fab fa-twitter"></span>
                        Twitter
-                    </button>
-                    <p class="social__stats">136 312 Followers</p>
+                    </a>
+                    <p class="social__stats"></p>
                </div>
-                <div>
-                    <button class="rect-button rect-button--facebook rect-button--fixed-width">
+                <div class="social__facebook">
+                    <a href="https://www.facebook.com/pgs.software" target="_blank"
+                       class="rect-button rect-button--facebook rect-button--fixed-width">
                        <span class="rect-button__icon fab fa-facebook-f"></span>
                        Facebook
-                    </button>
-                    <p class="social__stats">218 092 Subscribers</p>
+                    </a>
+                    <p class="social__stats"></p>
                </div>
            </div>
        </div>
@@ -266,50 +278,60 @@
        <p class="testimonials__h1">People are talking about fork</p>
        <div class="testimonials__content container">
            <div class="testimonials__row row">
-                <div class="testimonial col-4">
-                    <img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
+                <div class="testimonial col-12 col-sm-6 col-xl-4">
+                    <div class="testimonial__logo">
+                        <img src="img/testimonials/1.png" alt="Smashing Magazine">
+                    </div>
                    <p class="testimonial__text">
                        Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
                        magna.
                        Sed varius urna et pulvinar venenatis.
                    </p>
                </div>
-                <div class="testimonial col-4">
-                    <img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
+                <div class="testimonial col-12 col-sm-6 col-xl-4">
+                    <div class="testimonial__logo">
+                        <img src="img/testimonials/2.png" alt="Smashing Magazine">
+                    </div>
                    <p class="testimonial__text">
                        Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
                        mollis eleifend nibh.
                    </p>
                </div>
-                <div class="testimonial col-4">
-                    <img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
+                <div class="testimonial col-12 col-sm-6 col-xl-4">
+                    <div class="testimonial__logo">
+                        <img src="img/testimonials/3.png" alt="Smashing Magazine">
+                    </div>
                    <p class="testimonial__text">
                        In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
                        nibh.
                        Morbi tempus auctor felis ac vehicula.
                    </p>
                </div>
-            </div>
-            <div class="testimonials__row row">
-                <div class="testimonial col-4">
-                    <img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine">
-                    <img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine">
+                <div class="testimonial col-12 col-sm-6 col-xl-4">
+                    <div class="testimonial__logo">
+                        <img src="img/testimonials/4/1.png" alt="Smashing Magazine">
+                        <img src="img/testimonials/4/2.png" alt="Smashing Magazine">
+                    </div>
                    <p class="testimonial__text">
                        Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
                        magna.
                        Sed varius urna et pulvinar venenatis.
                    </p>
                </div>
-                <div class="testimonial col-4">
-                    <img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
+                <div class="testimonial col-12 col-sm-6 col-xl-4">
+                    <div class="testimonial__logo">
+                        <img src="img/testimonials/5.png" alt="Smashing Magazine">
+                    </div>
                    <p class="testimonial__text">
                        Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
                        arcu
                        consequat faucibus.
                    </p>
                </div>
-                <div class="testimonial col-4">
-                    <img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
+                <div class="testimonial col-12 col-sm-6 col-xl-4">
+                    <div class="testimonial__logo">
+                        <img src="img/testimonials/6.png" alt="Smashing Magazine">
+                    </div>
                    <p class="testimonial__text">
                        Fusce pharetra erat id odio blandit, nec
                        pharetra eros venenatis. Pellentesque porttitor cursus massa et vestibulum.
@@ -324,8 +346,8 @@
    <div class="pricing">
        <p class="pricing__title">Fork Subscription Pricing</p>
        <div class="container">
-            <div class="row">
-                <div class="col-3">
+            <div class="row justify-content-center">
+                <div class="price-wrapper col-md-3 col-sm-6 col-7">
                    <div class="price">
                        <p class="price__title">Students</p>
                        <p class="price__value">$29</p>
@@ -337,7 +359,7 @@
                        </a>
                    </div>
                </div>
-                <div class="col-3">
+                <div class="price-wrapper col-md-3 col-sm-6 col-7">
                    <div class="price">
                        <p class="price__title">Professional</p>
                        <p class="price__value">$59</p>
@@ -349,7 +371,7 @@
                        </a>
                    </div>
                </div>
-                <div class="col-3">
+                <div class="price-wrapper col-md-3 col-sm-6 col-7">
                    <div class="price">
                        <p class="price__title">Agency</p>
                        <p class="price__value">$99</p>
@@ -361,7 +383,7 @@
                        </a>
                    </div>
                </div>
-                <div class="col-3">
+                <div class="price-wrapper col-md-3 col-sm-6 col-7">
                    <div class="price">
                        <p class="price__title">Enterprise</p>
                        <p class="price__value">$159</p>
@@ -391,13 +413,14 @@
    <div class="newsletter">
        <div class="container">
            <div class="row justify-content-between">
-                <div class="col-6 newsletter__title">
+                <div class="col-12 col-xl-6 newsletter__title">
                    Subscribe to our newsletter
                </div>
-                <div class="col-6 oneline__form">
-                    <input class="textfield oneline__form__component--growing" title="Email" placeholder="Email...">
-                    <button class="rounded-button rounded-button--uppercase oneline__form__component--fixed"
-                            type="submit">Subscribe
+                <div class="col-12 col-xl-6 oneline__form">
+                    <input class="newsletter__form-element textfield oneline__form__component--growing" title="Email" placeholder="Email...">
+                    <button class="newsletter__form-element rounded-button rounded-button--uppercase oneline__form__component--fixed"
+                            type="submit">
+                        Subscribe
                    </button>
                </div>
            </div>
@@ -406,7 +429,7 @@
    <div class="news">
        <div class="container">
            <div class="row">
-                <div class="col-4">
+                <div class="news__news col-12 col-sm-4">
                    <p class="news__title">
                        New in Release 2.8
                    </p>
@@ -430,7 +453,7 @@
                    </div>
                    <button class="rect-button rect-button--small">Go to Release Log</button>
                </div>
-                <div class="col-4">
+                <div class="news__extensions col-12 col-sm-4">
                    <p class="news__title">
                        Popular Extensions
                    </p>
@@ -461,7 +484,7 @@
                    </div>
                    <button class="rect-button rect-button--small">Go to Marketplace</button>
                </div>
-                <div class="col-4">
+                <div class="news__blog col-12 col-sm-4">
                    <p class="news__title">
                        New From the Blog
                    </p>
@@ -505,7 +528,7 @@
    <div class="footer">
        <div class="container">
            <div class="row">
-                <div class="footer__about col-4">
+                <div class="footer__about col-12 col-md-4">
                    <div class="brand">
                        <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
                        <span class="brand__name">Fork</span>
@@ -515,7 +538,7 @@
                        Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo
                    </p>
                </div>
-                <div class="footer__nav col-2">
+                <div class="footer__nav col-12 col-md-2">
                    <p class="footer__nav__title">Navigation</p>
                    <ul class="footer__nav__navbar">
                        <li><a href="#">Home</a></li>
@@ -525,13 +548,13 @@
                        <li><a href="#">Support</a></li>
                    </ul>
                </div>
-                <div class="footer__contact col-3">
+                <div class="footer__contact col-12 col-md-3">
                    <p class="footer__contact__phone">347 567 78 90</p>
                    <p class="footer__contact__availability">Available from 12PM - 18PM</p>
                    <p class="footer__contact__city">New York, NY</p>
                    <p class="footer__contact__address">560 Judah St & 15th Ave, Apt 5<br/>San Francisco, CA, 230903</p>
                </div>
-                <div class="footer__info col-3">
+                <div class="footer__info col-12 col-md-3">
                    <p class="footer__info__title">Info</p>
                    <p class="footer__info__description">
                        Wisia enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -9,6 +9,7 @@

    if (scrollTop >= scrollThreshold) {
      $('.navbar').addClass('navbar--shrink');
+      $('#navbarNavDropdown').collapse('hide');
    } else {
      $('.navbar').removeClass('navbar--shrink');
    }
@@ -20,4 +21,21 @@
    autoplay: true,
    autoplaySpeed: 4000,
  });
+
+  $(window).resize(function() {
+    $('#navbarNavDropdown').collapse('hide');
+  });
+})(jQuery);
+
+(function ($) {
+  "use strict";
+
+  const p = $('#github-watchers');
+  $.get({
+    //url: 'https://api.github.com/repos/bartlomiej-pluta/forkio',
+    url: 'https://localhost',
+    success: function(data) {
+      p.text((data ? data.watchers_count : 'No') + ' Watchers');
+    },
+  });
 })(jQuery);
--- a/src/scss/_about.scss
+++ b/src/scss/_about.scss
@@ -1,7 +1,7 @@
 .about {
  background-color: $background-light;
-  padding: 75px 0 0 30px;
-  height: 710px;
+  min-width: 320px;
+  padding: 50px 0 0;
 }

 .about__title {
@@ -9,8 +9,53 @@
  font-weight: bold;
  font-size: 48px;
  color: $primary;
+  margin: 0;
+
+  @media all and (max-width: $tablet) {
+    font-size: 38px;
+  }
+
+  @media all and (max-width: $phone) {
+    font-size: 25px;
+  }
+
+  @media all and (max-width: $small-phone) {
+    font-size: 23px;
+  }

  &--no-wrap {
    white-space: nowrap;
  }
+
+  &--desktop-xl {
+    display: block;
+  }
+
+  &--desktop {
+    display: none;
+    text-align: center;
+  }
+
+  @media all and (max-width: $desktop-xl) {
+    &--desktop-xl {
+      display: none;
+    }
+
+    &--desktop {
+      display: block;
+    }
+  }
 }
+
+.about__what-you-get {
+  img {
+    position: relative;
+    margin-top: -50px;
+    top: 70px;
+
+
+    @media all and (max-width: $phone) {
+      height: 400px;
+    }
+  }
+}
--- a/src/scss/_author.scss
+++ b/src/scss/_author.scss
@@ -9,19 +9,43 @@
  width: 85px;
  height: 85px;
  border-radius: 50%;
+
+
+  @media all and (max-width: $phone) {
+    height: 65px;
+    width: 65px;
+  }
+
+  @media all and (max-width: $small-phone) {
+    height: 50px;
+    width: 50px;
+  }
 }

 .author__details {
  margin-left: 23px;
+
+  @media all and (max-width: $phone) {
+    margin-left: 15px;
+  }
 }

 .author__name {
  margin: 0;
-  padding: 0;
+  padding: 0 5px 0 0;
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: $primary-dark;
+
+
+  @media all and (max-width: $phone) {
+    font-size: 17px;
+  }
+
+  @media all and (max-width: $small-phone) {
+    font-size: 15px;
+  }
 }

 .nickname {
@@ -37,5 +61,13 @@
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 16px;
+
+    @media all and (max-width: $small-phone) {
+      font-size: 14px;
+    }
+
+    @media all and (max-width: $phone) {
+      font-size: 15px;
+    }
  }
 }
--- a/src/scss/_brand.scss
+++ b/src/scss/_brand.scss
@@ -5,6 +5,9 @@
 .brand__logo {
  height: 45px;
  margin-right: 17px;
+  @media all and (max-width: $phone) {
+    height: 30px;
+  }
 }

 .brand__name {
@@ -15,6 +18,10 @@
  display: inline-flex;
  align-items: center;

+  @media all and (max-width: $phone) {
+    font-size: 15px;
+  }
+
  &--emph {
    color: $primary;
    font-style: normal;
--- a/src/scss/_buttons.scss
+++ b/src/scss/_buttons.scss
@@ -7,6 +7,10 @@
  border-radius: 30px;
  transition: $hover-duration;

+  @media all and (max-width: $phone) {
+    padding: 7px 20px;
+  }
+
  &:hover {
    background-color: darken($primary, $hover-threshold);
    transition: $hover-duration;
@@ -24,6 +28,10 @@
    @extend .rounded-button--strong;
    font-size: 21px;
    padding: 15px 60px;
+
+    @media all and (max-width: $phone) {
+      font-size: 14px;
+    }
  }

  &--uppercase {
@@ -45,10 +53,24 @@
  text-align: left;
  line-height: 30px;

+  @media all and (max-width: $desktop) {
+    font-size: 18px;
+  }
+
+  @media all and (max-width: $tablet) {
+    padding: 10px 15px;
+    font-size: 15px;
+  }
+
+  @media all and (max-width: $phone) {
+    font-size: 15px;
+  }
+
  &:hover {
    background-color: lighten($primary, $hover-threshold);
    cursor: pointer;
    transition: $hover-duration;
+    text-decoration: none;
  }

  &--github {
@@ -57,6 +79,7 @@

    &:hover {
      background-color: darken($github-color, $hover-threshold);
+      color: black;
    }
  }

@@ -66,6 +89,7 @@

    &:hover {
      background-color: lighten($twitter-color, $hover-threshold);
+      color: white;
    }
  }

@@ -75,11 +99,24 @@

    &:hover {
      background-color: lighten($facebook-color, $hover-threshold);
+      color: white;
    }
  }

  &--fixed-width {
    width: 240px;
+
+    @media all and (max-width: $desktop) {
+      width: 180px;
+    }
+
+    @media all and (max-width: $tablet) {
+      width: 130px;
+    }
+
+    @media all and (max-width: $phone) {
+      width: 180px;
+    }
  }

  &--small {
@@ -90,6 +127,10 @@
    color: $primary;
    transition: $hover-duration;

+    @media all and (max-width: $tablet) {
+      font-size: 12px;
+    }
+
    &:hover {
      background-color: darken($background-light, $hover-threshold);
      transition: $hover-duration;
@@ -99,4 +140,16 @@

 .rect-button__icon {
  margin-right: 35px;
+
+  @media all and (max-width: $desktop) {
+    margin-right: 15px;
+  }
+
+  @media all and (max-width: $tablet) {
+    margin-right: 10px;
+  }
+
+  @media all and (max-width: $phone) {
+    margin-right: 35px;
+  }
 }
--- a/src/scss/_download.scss
+++ b/src/scss/_download.scss
@@ -1,6 +1,7 @@
 .download {
  text-align: center;
  width: 100%;
+  min-width: 320px;
 }

 .download__rounded-button--translated {
--- a/src/scss/_editor.scss
+++ b/src/scss/_editor.scss
@@ -1,14 +1,35 @@
+.editor {
+  min-width: 320px;
+}
+
 .editor__description {
  text-align: center;
 }

 .editor__title {
+  padding: 0 10px;
  margin-top: 60px;
  font-family: Montserrat, sans-serif;
  font-size: 54px;
  font-weight: bold;
  text-transform: uppercase;
  color: $primary-dark;
+
+  @media all and (max-width: $desktop) {
+    font-size: 45px;
+  }
+
+  @media all and (max-width: $tablet) {
+    font-size: 40px;
+  }
+
+  @media all and (max-width: $phone) {
+    font-size: 33px;
+  }
+
+  @media all and (max-width: $small-phone) {
+    font-size: 30px;
+  }
 }

 .editor__subtitle {
@@ -17,6 +38,18 @@
  font-size: 21px;
  font-weight: 400;
  color: $dark-text;
+
+  @media all and (max-width: $desktop) {
+    font-size: 20px;
+  }
+
+  @media all and (max-width: $tablet) {
+    font-size: 18px;
+  }
+
+  @media all and (max-width: $phone) {
+    font-size: 16px;
+  }
 }

 .editor__github {
--- a/src/scss/_feature.scss
+++ b/src/scss/_feature.scss
@@ -3,7 +3,14 @@
 }

 .feature__icon {
-  text-align: center;
+  text-align: right;
+
+
+  @media all and (max-width: $phone) {
+    img {
+      width: 90px;
+    }
+  }
 }

 .feature__title {
@@ -12,10 +19,18 @@
  font-size: 16px;
  font-weight: 600;
  color: $dark-text;
+
+  @media all and (max-width: $phone) {
+    font-size: 14px;
+  }
 }

 .feature__description {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  color: $regular-text;
+
+  @media all and (max-width: $phone) {
+    font-size: 12px;
+  }
 }
--- a/src/scss/_footer.scss
+++ b/src/scss/_footer.scss
@@ -3,6 +3,7 @@
  padding-top: 65px;
  border-top: solid 1px $background-light;
  margin-bottom: 95px;
+  min-width: 320px;

  &__about {
    &__description {
@@ -49,6 +50,14 @@
      font-weight: bold;
      font-size: 30px;
      color: #3f3f3f;
+
+      @media all and (max-width: $desktop-xl) {
+        font-size: 27px;
+      }
+
+      @media all and (max-width: $desktop) {
+        font-size: 20px;
+      }
    }

    &__availability {
@@ -88,4 +97,13 @@
      color: $regular-text;
    }
  }
+
+  @media all and (max-width: $phone) {
+    &__about,
+    &__nav,
+    &__contact,
+    &__info {
+      padding: 0 30px;
+    }
+  }
 }
--- a/src/scss/_form.scss
+++ b/src/scss/_form.scss
@@ -5,11 +5,20 @@
  background-color: white;
  color: $regular-text;

+
  &::placeholder {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: $gray-text;
+
+    @media all and (max-width: $tablet) {
+      font-size: 14px;
+    }
+
+    @media all and (max-width: $phone) {
+      font-size: 12px;
+    }
  }
 }

@@ -17,13 +26,27 @@
  display: flex;
  align-content: space-between;
  align-items: center;
+
+  @media all and (max-width: $small-phone) {
+    flex-direction: column;
+  }
 }

 .oneline__form__component--growing {
  width: 100%;
-  margin: 0 20px;
+  min-width: 100px;
+  margin: 5px 10px;
+
+  @media all and (max-width: $phone) {
+    margin: 5px 5px;
+  }
 }

 .oneline__form__component--fixed {
  white-space: nowrap;
+  margin: 5px 10px;
+
+  @media all and (max-width: $phone) {
+    margin: 5px 5px;
+  }
 }
--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@@ -1,3 +1,4 @@
-body {
+.wrapper {
  overflow-x: hidden;
+  max-width: 100%;
 }
--- a/src/scss/_header.scss
+++ b/src/scss/_header.scss
@@ -1,7 +1,21 @@
 .header {
-  background: black url(../img/header/img.png) no-repeat 50% 30% / cover;
  height: 100vh;
  padding-top: 110px;
+  width: 100%;
+  display: table;
+  background: $hero-background;
+  min-width: 320px;
+}
+
+.header__text {
+  display: table-row;
+  background: $hero-background;
+}
+
+.header__image {
+  background: $hero-background url(../img/header/img.png) no-repeat center top / cover;
+  display: table-row;
+  height: 100%;
 }

 .header__title {
@@ -19,6 +33,7 @@
  color: $primary;
  text-align: center;
  margin-bottom: 0;
+  padding: 0 10px;
 }

 .header__description {
@@ -30,3 +45,19 @@
  text-transform: uppercase;
  text-align: center;
 }
+
+@media all and (max-width: $tablet) {
+  .header__title {
+    font-size: 60px;
+  }
+
+  .header__subtitle {
+    font-size: 20px;
+    text-transform: capitalize;
+  }
+
+
+  .header__description {
+    font-size: 14px;
+  }
+}
--- a/src/scss/_navbar.scss
+++ b/src/scss/_navbar.scss
@@ -1,16 +1,75 @@
 $shrinking-duration: 0.4s;

-.navbar {
-  margin: 0 0;
-  padding: 0 90px;
-  height: 100px;
-  background-color: white;
-  transition: height $shrinking-duration;
+@media all and (min-width: $desktop) {
+  .navbar {
+    margin: 0 0;
+    padding: 0 90px;
+    height: 100px;
+    transition: height $shrinking-duration;
+  }
+
+  .navbar--shrink {
+    height: 50px;
+    transition: height $shrinking-duration;
+  }
 }

-.navbar--shrink {
-  height: 50px;
-  transition: height $shrinking-duration;
+.navbar {
+  background-color: white;
+  min-width: 320px;
+}
+
+.navbar__content {
+  text-align: right;
+}
+
+.navbar__content__header {
+}
+
+.navbar__content__toggler {
+  border: none;
+  &:focus {
+    outline: none;
+  }
+}
+
+.navbar__content__body {
+}
+
+.navbar__content__button {
+  @media all and (max-width: $phone) {
+    font-size: 12px;
+  }
+
+  @media all and (max-width: $desktop) {
+    &--desktop {
+      display: none;
+    }
+
+    &--phone {
+      display: inline;
+    }
+  }
+
+  @media all and (min-width: $desktop) {
+    &--desktop {
+      display: inline;
+    }
+
+    &--phone {
+      display: none;
+    }
+  }
+
+  @media all and (max-width: $small-phone) {
+    &--desktop {
+      display: inline;
+    }
+
+    &--phone {
+      display: none;
+    }
+  }
 }

 .navbar__link {
@@ -18,9 +77,13 @@ $shrinking-duration: 0.4s;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: bolder;
-  margin: 0 20px;
  color: $primary-dark;
  transition: $hover-duration;
+  margin: 0 20px;
+
+  @media all and (max-width: $desktop-xl) {
+    margin: 0 2px;
+  }
 }

 .navbar__link:hover {
--- a/src/scss/_news.scss
+++ b/src/scss/_news.scss
@@ -1,5 +1,6 @@
 .news {
  padding-top: 70px;
+  min-width: 320px;
 }

 .news__title {
@@ -41,4 +42,17 @@
  font-size: 13px;
  color: $regular-text;
  font-weight: 500;
+}
+
+@media all and (max-width: $phone) {
+  .news__news,
+  .news__extensions,
+  .news__blog {
+    padding: 0 30px;
+  }
+
+  .news__extensions,
+  .news__blog {
+    margin-top: 50px;
+  }
 }
--- a/src/scss/_newsletter.scss
+++ b/src/scss/_newsletter.scss
@@ -1,15 +1,35 @@
 .newsletter {
  padding: 55px 0;
  background-color: #f4f4f4;
+  min-width: 320px;
 }

 .newsletter__title {
-  display: flex;
-  align-items: center;
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  font-size: 30px;
  color: $primary-dark;
  text-transform: capitalize;
+  text-align: center;
+
+  @media all and (max-width: $desktop-xl) {
+    margin-bottom: 20px;
+  }
+
+  @media all and (max-width: $phone) {
+    font-size: 20px;
+  }
+}
+
+.newsletter__form-element {
+  font-size: 16px;
+
+  @media all and (max-width: $desktop) {
+    font-size: 14px;
+  }
+
+  @media all and (max-width: $tablet) {
+    font-size: 12px;
+  }
 }

--- a/src/scss/_pricing.scss
+++ b/src/scss/_pricing.scss
@@ -1,38 +1,58 @@
 .pricing {
-  background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%;
+  background: $background-violet url(../img/testimonials/pricing.png) no-repeat center / cover;
  padding-top: 90px;
  padding-bottom: 75px;
+  min-width: 320px;
 }

 .pricing__title {
+  padding: 10px;
  font-family: Montserrat, sans-serif;
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-transform: capitalize;
  text-align: center;
+
+  @media all and (max-width: $tablet) {
+    font-size: 38px;
+  }
+
+  @media all and (max-width: $phone) {
+    font-size: 30px;
+  }
+}
+
+.price-wrapper {
+  padding: 40px 15px;
+  height: 560px;
+  transition: $hover-duration;
+
+  &:hover {
+    padding: 0 2px;
+    transition: $hover-duration;
+
+    .price {
+      background-color: rgba(0, 0, 0, 0.06);
+      transition: $hover-duration;
+
+      & > .price__title {
+        background-color: rgba(0, 0, 0, 0.06);
+        transition: $hover-duration;
+      }
+    }
+  }
+
+  @media all and (max-width: $tablet) {
+    height: 470px;
+  }
 }

 .price {
  position: relative;
-  margin-top: 110px;
-  margin-bottom: 125px;
+  height: 100%;
  background-color: rgba(255, 255, 255, 0.06);
-  height: 450px;
  transition: $hover-duration;
-
-  &:hover {
-    margin-top: 70px;
-    margin-bottom: 75px;
-    background-color: rgba(0, 0, 0, 0.06);
-    transition: $hover-duration;
-    height: 530px;
-
-    & > .price__title {
-      background-color: rgba(0, 0, 0, 0.06);
-      transition: $hover-duration;
-    }
-  }
 }

 .price__title {
@@ -45,6 +65,14 @@
  padding: 30px 0;
  text-align: center;
  transition: $hover-duration;
+
+  @media all and (max-width: $desktop-xl) {
+    font-size: 18px;
+  }
+
+  @media all and (max-width: $small-phone) {
+    font-size: 16px;
+  }
 }

 .price__value {
@@ -53,6 +81,14 @@
  font-weight: bold;
  color: white;
  text-align: center;
+
+  @media all and (max-width: $desktop-xl) {
+    font-size: 50px;
+  }
+
+  @media all and (max-width: $desktop) {
+    font-size: 40px;
+  }
 }

 .price__period {
@@ -75,25 +111,52 @@
 }

 .price__description {
+  padding: 0 15px;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: white;
  text-transform: capitalize;
  text-align: center;
+
+  @media all and (max-width: $desktop-xl) {
+    font-size: 13px;
+  }
+
+  @media all and (max-width: $small-phone) {
+    font-size: 11px;
+  }
 }

 .price__rounded-button--purchase {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding: 10px 0;
  background-color: rgba(255, 255, 255, 0.15);
  position: absolute;
+  left: 0;
+  text-align: center;
+  right: 0;
  bottom: 35px;
-  left: 20%;
+  margin: auto;
+  display: block;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
+  width: 60%;
+
+  @media all and (max-width: $desktop-xl) {
+    font-size: 13px;
+    width: 70%;
+  }
+
+  @media all and (max-width: $tablet) {
+    width: 60%;
+  }
+
+  @media all and (max-width: $small-phone) {
+    font-size: 11px;
+    width: 60%;
+  }
 }

 .pricing__footer {
--- a/src/scss/_reviews.scss
+++ b/src/scss/_reviews.scss
@@ -12,6 +12,14 @@
  font-size: 20px;
  color: #333333;
  text-align: center;
+
+  @media all and (max-width: $phone) {
+    font-size: 15px;
+  }
+
+  @media all and (max-width: $small-phone) {
+    font-size: 13px;
+  }
 }

 .review__date {
@@ -21,4 +29,13 @@
  font-weight: 500;
  color: $regular-text;
  text-align: center;
+
+  @media all and (max-width: $phone) {
+    margin-top: 20px;
+    font-size: 12px;
+  }
+
+  @media all and (max-width: $small-phone) {
+    font-size: 10px;
+  }
 }
--- a/src/scss/_social.scss
+++ b/src/scss/_social.scss
@@ -4,6 +4,10 @@
  padding-bottom: 80px;
  display: flex;
  justify-content: space-between;
+
+  @media all and (max-width: $phone) {
+    flex-direction: column;
+  }
 }

 .social__stats {
@@ -13,4 +17,13 @@
  font-size: 14px;
  color: $regular-text;
  text-align: center;
+}
+
+.social__github,
+.social__twitter,
+.social__facebook {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
--- a/src/scss/_testimonials.scss
+++ b/src/scss/_testimonials.scss
@@ -1,40 +1,60 @@
 .testimonials {
  position: relative;
-  background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 30% / contain;
+  background: $background-violet url(../img/testimonials/testimonials.png) no-repeat center 100% / cover;
+  min-width: 320px;
+
+  @media all and (max-width: $tablet) {
+    background: $background-violet url(../img/testimonials/testimonials.png) no-repeat center top;
+  }
 }

 .testimonials__h1 {
-  padding: 100px 0;
+  padding: 100px 50px;
  font-family: Montserrat, sans-serif;
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-transform: capitalize;
-}

-.testimonials__row {
-  padding-bottom: 100px;
+  @media all and (max-width: $tablet) {
+    font-size: 38px;
+  }
+
+  @media all and (max-width: $phone) {
+    font-size: 30px;
+  }
 }

 .testimonial {
  position: relative;
  text-align: center;
-  min-height: 170px;
+  min-height: 180px;
+  max-width: 300px;
+  margin: 0 auto;
+
+  @media all and (max-width: $phone) {
+    margin-bottom: 50px;
+  }
+  @media all and (min-width: $phone) {
+    margin-bottom: 100px;
+  }
+
 }

 .testimonial__logo {
-  padding-bottom: 40px;
+  height: 80px;
 }

 .testimonial__text {
-  position: absolute;
-  bottom: 0;
  font-family: Source Sans Pro, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  color: white;
+
+
+
 }

 .testimonials__delimiter {
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -7,6 +7,8 @@ $light-text: #a291a5;
 $gray-text: #c8cbcf;
 $lightgray-text: #d3d1da;

+$hero-background: #010005;
+
 $background-light: #f4f4f4;
 $background-violet: #4a3b4e;

@@ -18,4 +20,10 @@ $hover-duration: 0.3s;

 $github-color: #f3f3f3;
 $twitter-color: #26a6d1;
-$facebook-color: #3b5998;
+$facebook-color: #3b5998;
+
+$small-phone: 350px;
+$phone: 576px;
+$tablet: 768px;
+$desktop: 992px;
+$desktop-xl: 1200px;
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Bartłomiej Pluta (PGS Software)	1359ee9131	Fix footer and news min-width	2018-06-05 14:10:39 +02:00
Bartłomiej Pluta (PGS Software)	5e147407c8	Fix pricing tiles size	2018-06-05 13:56:56 +02:00
Bartłomiej Pluta (PGS Software)	fcb9969cd1	Fix news and footer	2018-06-04 14:50:37 +02:00
Bartłomiej Pluta (PGS Software)	52745b0535	Fix newsletter	2018-06-04 14:45:03 +02:00
Bartłomiej Pluta (PGS Software)	84122d6d91	Fix pricing section	2018-06-04 14:01:46 +02:00
Bartłomiej Pluta (PGS Software)	146107b31a	Fix testimonials	2018-06-04 12:11:22 +02:00
Bartłomiej Pluta (PGS Software)	b0d501c360	Fix social buttons	2018-05-30 12:35:00 +02:00
Bartłomiej Pluta (PGS Software)	65e57ca0ce	Fix reviews	2018-05-17 13:13:30 +02:00
Bartłomiej Pluta (PGS Software)	dc0542d0cc	Fix about	2018-05-17 12:52:33 +02:00
Bartłomiej Pluta (PGS Software)	0bb3fb7d8e	Fix editor	2018-05-17 11:01:51 +02:00
Bartłomiej Pluta (PGS Software)	c18b26e613	Fix header	2018-05-17 09:55:39 +02:00
Bartłomiej Pluta (PGS Software)	5532b9e015	Improve navbar	2018-05-16 11:37:52 +02:00
Bartlomiej Pluta (PGS Software)	664cd80b37	Fix pricing section	2018-04-19 13:02:59 +02:00
Bartlomiej Pluta (PGS Software)	3153593ea5	Fix testimonials	2018-04-19 12:50:00 +02:00
Bartlomiej Pluta (PGS Software)	f15138e0e1	Fix social buttons	2018-04-19 12:41:12 +02:00
Bartlomiej Pluta (PGS Software)	def66a6fd3	Fix revolutionary editor font size	2018-04-19 12:37:36 +02:00
Bartłomiej Przemysław Pluta	45f2353012	Merge pull request #18 from bartlomiej-pluta/rwd-footer Enable RWD for footer	2018-04-19 12:21:52 +02:00
Bartlomiej Pluta (PGS Software)	5a0c860c75	Enable RWD for footer	2018-04-19 11:43:26 +02:00
Bartlomiej Pluta (PGS Software)	658886fe22	Fix navbar	2018-04-19 11:34:25 +02:00
Bartłomiej Przemysław Pluta	5e00e803bd	Merge pull request #16 from bartlomiej-pluta/rwd-news Enable RWD in news section	2018-04-16 14:44:45 +02:00
Bartłomiej Pluta	39532aacf7	Enable RWD in news section	2018-04-16 14:44:05 +02:00
Bartłomiej Przemysław Pluta	abb149b383	Merge pull request #15 from bartlomiej-pluta/rwd-newsletter Enable RWD in Newsletter section	2018-04-16 14:35:53 +02:00
Bartłomiej Pluta	325a0b5e3e	Enable RWD in Newsletter section	2018-04-16 14:34:53 +02:00
Bartłomiej Przemysław Pluta	494bf4d2c3	Merge pull request #14 from bartlomiej-pluta/rwd-pricing Enable RWD on pricing section	2018-04-16 14:21:35 +02:00
Bartłomiej Pluta	59dd5095b1	Enable RWD on pricing section	2018-04-16 14:20:29 +02:00
Bartłomiej Przemysław Pluta	d2f03f2ca6	Merge pull request #13 from bartlomiej-pluta/rwd-testimonials Enable RWD for testimonials	2018-04-16 12:19:25 +02:00
Bartłomiej Pluta	39f6316897	Enable RWD for testimonials	2018-04-16 12:18:38 +02:00
Bartłomiej Przemysław Pluta	eb04cb6a08	Merge pull request #12 from bartlomiej-pluta/rwd-social Enable RWD for social buttons	2018-04-16 12:00:59 +02:00
Bartłomiej Pluta	719906d227	Enable RWD for social buttons	2018-04-16 12:00:17 +02:00
Bartłomiej Przemysław Pluta	4b5d2198d2	Merge pull request #11 from bartlomiej-pluta/rwd-about Enable RWD for about section	2018-04-16 11:21:08 +02:00
Bartłomiej Pluta	a290809750	Enable RWD for about section	2018-04-16 11:10:29 +02:00
Bartlomiej Pluta (PGS Software)	a02b17a51b	Fix header subtitle	2018-04-12 14:43:57 +02:00
Bartłomiej Przemysław Pluta	b60fe45d49	Merge pull request #10 from bartlomiej-pluta/rwd-navbar Enable RWD for navbar and header	2018-04-12 13:44:22 +02:00
Bartlomiej Pluta (PGS Software)	83763013b8	Enable RWD for navbar and header	2018-04-12 13:27:14 +02:00
Bartłomiej Przemysław Pluta	1661de16a9	Merge pull request #9 from bartlomiej-pluta/rwd Create RWD breakpoints	2018-04-12 09:40:39 +02:00
Bartlomiej Pluta (PGS Software)	1e01ceae3a	Create RWD breakpoints	2018-04-12 09:39:38 +02:00
Bartłomiej Przemysław Pluta	dee7647f13	Merge pull request #8 from bartlomiej-pluta/cross-browser Cross browser	2018-04-10 12:33:59 +02:00