Enable RWD in Newsletter section

Enable RWD on pricing section

src/index.html

@@ -113,12 +113,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 +131,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 +146,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 +161,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 +176,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="about__what-you-get col-6">
+                <div class="about__what-you-get col-12 col-xl-6">
-                    <p class="about__title about__title--no-wrap">&lt;Here is what you get&gt;</p>
+                    <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,21 +243,21 @@
     <div class="social container">
         <div class="row justify-content-center">
             <div class="social__content col-10">
-                <div>
+                <div class="social__github">
                     <button 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>
                 </div>
-                <div>
+                <div class="social__twitter">
                     <button 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>
                 </div>
-                <div>
+                <div class="social__facebook">
                     <button class="rect-button rect-button--facebook rect-button--fixed-width">
                         <span class="rect-button__icon fab fa-facebook-f"></span>
                         Facebook
@@ -270,7 +271,7 @@
         <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">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
                         Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
@@ -278,14 +279,14 @@
                         Sed varius urna et pulvinar venenatis.
                     </p>
                 </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
                     <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">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
                         In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
@@ -295,7 +296,7 @@
                 </div>
             </div>
             <div class="testimonials__row row">
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-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">
                     <p class="testimonial__text">
@@ -304,7 +305,7 @@
                         Sed varius urna et pulvinar venenatis.
                     </p>
                 </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
                         Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
@@ -312,7 +313,7 @@
                         consequat faucibus.
                     </p>
                 </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
                         Fusce pharetra erat id odio blandit, nec
@@ -328,8 +329,8 @@
     <div class="pricing">
         <p class="pricing__title">Fork Subscription Pricing</p>
         <div class="container">
-            <div class="row">
+            <div class="row justify-content-center">
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                     <div class="price">
                         <p class="price__title">Students</p>
                         <p class="price__value">$29</p>
@@ -341,7 +342,7 @@
                         </a>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                     <div class="price">
                         <p class="price__title">Professional</p>
                         <p class="price__value">$59</p>
@@ -353,7 +354,7 @@
                         </a>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                     <div class="price">
                         <p class="price__title">Agency</p>
                         <p class="price__value">$99</p>
@@ -365,7 +366,7 @@
                         </a>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                     <div class="price">
                         <p class="price__title">Enterprise</p>
                         <p class="price__value">$159</p>
@@ -395,10 +396,10 @@
     <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">
+                <div class="col-12 col-xl-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

src/scss/_about.scss

@@ -1,7 +1,12 @@
 .about {
   background-color: $background-light;
+
+  @media all and (max-width: $desktop-xl) {
+    .about {
       padding: 75px 0 0 30px;
       height: 710px;
+    }
+  }
 }
 
 .about__title {
@@ -13,4 +18,23 @@
   &--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;
+    }
+  }
 }

src/scss/_feature.scss

@@ -3,7 +3,7 @@
 }
 
 .feature__icon {
-  text-align: center;
+  text-align: left;
 }
 
 .feature__title {

src/scss/_form.scss

@@ -5,6 +5,7 @@
   background-color: white;
   color: $regular-text;
 
+
   &::placeholder {
     font-family: Montserrat, sans-serif;
     font-size: 14px;
@@ -21,9 +22,11 @@
 
 .oneline__form__component--growing {
   width: 100%;
-  margin: 0 20px;
+  min-width: 100px;
+  margin: 0 10px;
 }
 
 .oneline__form__component--fixed {
   white-space: nowrap;
+  margin: 0 10px;
 }

src/scss/_header.scss

@@ -21,6 +21,13 @@
   margin-bottom: 0;
 }
 
+@media all and (max-width: $phone) {
+  .header__subtitle {
+    font-size: 24px;
+    text-transform: capitalize;
+  }
+}
+
 .header__description {
   margin-top: 20px;
   font-family: Montserrat, sans-serif;

src/scss/_newsletter.scss

@@ -4,12 +4,15 @@
 }
 
 .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: 50px;
+  }
 }
 

src/scss/_pricing.scss

@@ -21,12 +21,19 @@
   height: 450px;
   transition: $hover-duration;
 
+  @media all and (max-width: $desktop-xl) {
+    margin-top: 7px;
+    margin-bottom: 7px;
+  }
+
   &:hover {
+    @media all and (min-width: $desktop-xl) {
       margin-top: 70px;
       margin-bottom: 75px;
+      height: 530px;
+    }
     background-color: rgba(0, 0, 0, 0.06);
     transition: $hover-duration;
-    height: 530px;
 
     & > .price__title {
       background-color: rgba(0, 0, 0, 0.06);
@@ -88,8 +95,13 @@
   padding-bottom: 10px;
   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;
+  width: 80%;
   font-family: Montserrat, sans-serif;
   font-weight: 500;
   font-size: 16px;

src/scss/_social.scss

@@ -4,6 +4,10 @@
   padding-bottom: 80px;
   display: flex;
   justify-content: space-between;
+
+  @media all and (max-width: $tablet) {
+    flex-direction: column;
+  }
 }
 
 .social__stats {
@@ -14,3 +18,12 @@
   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,6 +1,6 @@
 .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 50% 0;
 }
 
 .testimonials__h1 {
@@ -15,12 +15,20 @@
 
 .testimonials__row {
   padding-bottom: 100px;
+  @media all and (max-width: $desktop) {
+    padding: 0 10px;
+    margin: 0;
+  }
 }
 
 .testimonial {
   position: relative;
   text-align: center;
   min-height: 170px;
+
+  @media all and (max-width: $desktop) {
+    margin-bottom: 50px;
+  }
 }
 
 .testimonial__logo {
@@ -28,8 +36,10 @@
 }
 
 .testimonial__text {
+  @media all and (min-width: $desktop-xl) {
     position: absolute;
     bottom: 0;
+  }
   font-family: Source Sans Pro, sans-serif;
   font-size: 16px;
   font-weight: bold;