Fix footer and news min-width

Enable RWD for footer

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') });

src/index.html

@@ -35,6 +35,7 @@
                 <span class="brand__name">Fork</span>
                 <span class="brand__name brand__name--emph">IO</span>
             </div>
+            <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="">
@@ -53,18 +54,21 @@
                     <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>
-            <button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
         </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">
@@ -113,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>
@@ -130,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>
@@ -145,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>
@@ -160,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>
@@ -175,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>
@@ -242,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>
@@ -270,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.
@@ -328,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>
@@ -341,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>
@@ -353,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>
@@ -365,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>
@@ -395,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>
@@ -410,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>
@@ -434,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>
@@ -465,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>
@@ -509,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>
@@ -519,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>
@@ -529,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

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);

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;
+    }
+  }
+}

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;
+    }
   }
 }

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;

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;
+  }
 }

src/scss/_download.scss

@@ -1,6 +1,7 @@
 .download {
   text-align: center;
   width: 100%;
+  min-width: 320px;
 }
 
 .download__rounded-button--translated {

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 {

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;
+  }
 }

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;
+    }
+  }
 }

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;
+  }
 }

src/scss/_global.scss

@@ -1,3 +1,4 @@
-body {
+.wrapper {
   overflow-x: hidden;
+  max-width: 100%;
 }

src/scss/_header.scss

@@ -1,7 +1,21 @@
 .header {
-  background: black url(../img/header/img.png) no-repeat center 120px/ 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;
+  }
+}

src/scss/_navbar.scss

@@ -16,27 +16,60 @@ $shrinking-duration: 0.4s;
 
 .navbar {
   background-color: white;
+  min-width: 320px;
 }
 
 .navbar__content {
-  display: flex;
+  text-align: right;
 }
 
 .navbar__content__header {
-  order: 1;
 }
 
 .navbar__content__toggler {
-  order: 4;
   border: none;
+  &:focus {
+    outline: none;
+  }
 }
 
 .navbar__content__body {
-  order: 2;
 }
 
 .navbar__content__button {
-  order: 3;
+  @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 {
@@ -44,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 {

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;
+  }
 }

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;
+  }
 }
 

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 {

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;
+  }
 }

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;
 }

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 {

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;
 
@@ -20,6 +22,7 @@ $github-color: #f3f3f3;
 $twitter-color: #26a6d1;
 $facebook-color: #3b5998;
 
+$small-phone: 350px;
 $phone: 576px;
 $tablet: 768px;
 $desktop: 992px;