Create news section

Create newsletter section

src/index.html

@@ -107,6 +107,7 @@
                     </div>
                 </div>
             </div>
+        </div>
     </section>
     <section class="about">
         <div class="container">
@@ -127,7 +128,7 @@
                             </p>
                         </div>
                     </div>
-                    <div class="row about__feature">
+                    <div class="row feature">
                         <div class="col-3 feature__icon">
                             <img src="img/features/2.png"/>
                         </div>
@@ -142,7 +143,7 @@
                             </p>
                         </div>
                     </div>
-                    <div class="row about__feature">
+                    <div class="row feature">
                         <div class="col-3 feature__icon">
                             <img src="img/features/3.png"/>
                         </div>
@@ -157,7 +158,7 @@
                             </p>
                         </div>
                     </div>
-                    <div class="row about__feature">
+                    <div class="row feature">
                         <div class="col-3 feature__icon">
                             <img src="img/features/4.png"/>
                         </div>
@@ -323,6 +324,180 @@
             </div>
         </div>
     </section>
+    <section class="pricing">
+        <p class="pricing__title">Fork Subscription Pricing</p>
+        <div class="container">
+            <div class="row">
+                <div class="col-3">
+                    <div class="price">
+                        <p class="price__title">Students</p>
+                        <p class="price__value">$29</p>
+                        <p class="price__period">Per month</p>
+                        <hr class="price__splitter">
+                        <p class="price__description">Personal License</p>
+                        <a href="#" class="rounded-button price__rounded-button--purchase">
+                            Purchase
+                        </a>
+                    </div>
+                </div>
+                <div class="col-3">
+                    <div class="price">
+                        <p class="price__title">Professional</p>
+                        <p class="price__value">$59</p>
+                        <p class="price__period">Per month</p>
+                        <hr class="price__splitter">
+                        <p class="price__description">Professional License<br/>Email Support</p>
+                        <a href="#" class="rounded-button price__rounded-button--purchase">
+                            Purchase
+                        </a>
+                    </div>
+                </div>
+                <div class="col-3">
+                    <div class="price">
+                        <p class="price__title">Agency</p>
+                        <p class="price__value">$99</p>
+                        <p class="price__period">Per month</p>
+                        <hr class="price__splitter">
+                        <p class="price__description">1-12 Team Members<br/>Phone Support</p>
+                        <a href="#" class="rounded-button price__rounded-button--purchase">
+                            Purchase
+                        </a>
+                    </div>
+                </div>
+                <div class="col-3">
+                    <div class="price">
+                        <p class="price__title">Enterprise</p>
+                        <p class="price__value">$159</p>
+                        <p class="price__period">Per month</p>
+                        <hr class="price__splitter">
+                        <p class="price__description">Unlimited Team Members<br/>24/7 Phone Support</p>
+                        <a href="#" class="rounded-button price__rounded-button--purchase">
+                            Purchase
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-10">
+                    <p class="pricing__footer">
+                        Duis lobortis arcu sed arcu tincidunt feugiat. Nulla nisi mauris, facilisis vitae aliquet id,
+                        imperdiet quis
+                        nibh. Donec eget elit eu libero tincidunt consequat nec elementum orci. Cum sociis natoque
+                        penatibus
+                        et
+                        magnis dis parturient montes, nascetur ridiculus mus.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="newsletter">
+        <div class="container">
+            <div class="row justify-content-between">
+                <div class="col-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
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="news">
+        <div class="container">
+            <div class="row">
+                <div class="col-4">
+                    <p class="news__title">
+                        New in Release 2.8
+                    </p>
+                    <div class="news-entry">
+                        <p class="news-entry__brief">Fully Available: Live Preview Support for Multiple Browsers</p>
+                        <p class="news-entry__content">Morbi faucibus ante ipsum, a tincidunt libero posuere et. Etiam tempor tortor at odio condimentum, sit amet fringilla ligula maximus. Mauris venenatis nisl nisi, et dictum dui aliquet nec. Sed erat, nec aliquam vel, aliquam ac felis. </p>
+                    </div>
+                    <div class="news-entry">
+                        <p class="news-entry__brief">Improved Support for Typing</p>
+                        <p class="news-entry__content">Nulla purus quam, pulvinar sed ante et, feugiat maximus velit. Donec eu elit mauris. </p>
+                    </div>
+                    <div class="news-entry">
+                        <p class="news-entry__brief">Improved Stability</p>
+                        <p class="news-entry__content">
+                            Proin id ligula eget massa tincidunt molestie. Morbi urna lectus, molestie vel quam vel, iaculis fermentum nunc. Morbi imperdiet, leo in interdum pretium
+                        </p>
+                    </div>
+                    <button class="rect-button rect-button--small">Go to Release Log</button>
+                </div>
+                <div class="col-4">
+                    <p class="news__title">
+                        Popular Extensions
+                    </p>
+                    <div class="news-entry">
+                        <a href="#" class="news-entry__title">Custom Themes 1.1</a>
+                        <p class="news-entry__content">
+                            Etiam viverra vulputate diam, pulvinar cursus augue egestas ullamcorper.
+                        </p>
+                    </div>
+                    <div class="news-entry">
+                        <a href="#" class="news-entry__title">Filter Forge</a>
+                        <p class="news-entry__content">
+                            Nulla purus quam, pulvinar sed et, feugiat maximus velit.
+                        </p>
+                    </div>
+                    <div class="news-entry">
+                        <a href="#" class="news-entry__title">WebZap</a>
+                        <p class="news-entry__content">
+                            Morbi imperdiet, leo in interdum pretium, elit eros dapibus velit, eu posuere quam diam vitae orci. Suspendisse interdum accumsan magna vitae commodo.
+                        </p>
+                    </div>
+                    <div class="news-entry">
+                        <a href="#" class="news-entry__title">Renamy</a>
+                        <p class="news-entry__content">
+                            Vivamus consectetur suscipit elit, ut lacinia diam elementum et.
+                        </p>
+                    </div>
+                    <button class="rect-button rect-button--small">Go to Marketplace</button>
+                </div>
+                <div class="col-4">
+                    <p class="news__title">
+                        New From the Blog
+                    </p>
+                    <div class="news-entry">
+                        <a href="#" class="news-entry__title">Morbi imperdiet, leo in interdum pretium.</a>
+                        <p class="news-entry__content">
+                            February 18, 2015
+                        </p>
+                    </div>
+                    <div class="news-entry">
+                        <a href="#" class="news-entry__title">Donec orci ante, porta vel nulla quis, aliquet hendrerit leo.</a>
+                        <p class="news-entry__content">
+                            February 12, 2015
+                        </p>
+                    </div>
+                    <div class="news-entry">
+                        <a href="#" class="news-entry__title">Suspendisse egestas vulputate luctus.</a>
+                        <p class="news-entry__content">
+                            February 6, 2015
+                        </p>
+                    </div>
+                    <div class="news-entry">
+                        <a href="#" class="news-entry__title">Quisque varius ante lorem, eget pretium purus hendrerit a egestas.</a>
+                        <p class="news-entry__content">
+                            February 2, 2015
+                        </p>
+                    </div>
+                    <div class="news-entry">
+                        <a href="#" class="news-entry__title">Phasellus in augue risus.</a>
+                        <p class="news-entry__content">
+                            January 23, 2015
+                        </p>
+                    </div>
+                    <button class="rect-button rect-button--small">Go to Blog</button>
+                </div>
+            </div>
+        </div>
+    </section>
 </div>
 
 <!-- JavaScript -->

src/scss/_buttons.scss

@@ -25,6 +25,11 @@
     font-size: 21px;
     padding: 15px 60px;
   }
+
+  &--uppercase {
+    text-transform: uppercase;
+    font-weight: 500;
+  }
 }
 
 .rect-button {
@@ -76,6 +81,20 @@
   &--fixed-width {
     width: 240px;
   }
+
+  &--small {
+    background-color: $background-light;
+    font-family: Montserrat, sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    color: $primary;
+    transition: $hover-duration;
+
+    &:hover {
+      background-color: darken($background-light, $hover-threshold);
+      transition: $hover-duration;
+    }
+  }
 }
 
 .rect-button__icon {

src/scss/_form.scss

@@ -0,0 +1,29 @@
+.textfield {
+  padding: 7px 25px;
+  border: none;
+  border-radius: 30px;
+  background-color: white;
+  color: $regular-text;
+
+  &::placeholder {
+    font-family: Montserrat, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    color: $gray-text;
+  }
+}
+
+.oneline__form {
+  display: flex;
+  align-content: space-between;
+  align-items: center;
+}
+
+.oneline__form__component--growing {
+  width: 100%;
+  margin: 0 20px;
+}
+
+.oneline__form__component--fixed {
+  white-space: nowrap;
+}

src/scss/_news.scss

@@ -0,0 +1,44 @@
+.news {
+  padding-top: 70px;
+}
+
+.news__title {
+  margin-bottom: 50px;
+  font-family: Montserrat, sans-serif;
+  font-weight: bold;
+  font-size: 28px;
+  color: $lightgray-text;
+}
+
+.news-entry {
+  margin-bottom: 30px;
+}
+
+.news-entry__brief {
+  font-family: Montserrat, sans-serif;
+  font-size: 16px;
+  color: $dark-text;
+  font-weight: 600;
+}
+
+.news-entry__title {
+  font-family: Montserrat, sans-serif;
+  font-size: 16px;
+  color: $primary;
+  font-weight: 600;
+  transition: $hover-duration;
+
+  &:hover {
+    color: darken($primary, $hover-threshold);
+    transition: $hover-duration;
+    text-decoration: none;
+  }
+}
+
+.news-entry__content {
+  margin-top: 15px;
+  font-family: Montserrat, sans-serif;
+  font-size: 13px;
+  color: $regular-text;
+  font-weight: 500;
+}

src/scss/_newsletter.scss

@@ -0,0 +1,15 @@
+.newsletter {
+  padding: 55px 0;
+  background-color: #f4f4f4;
+}
+
+.newsletter__title {
+  display: flex;
+  align-items: center;
+  font-family: Montserrat, sans-serif;
+  font-weight: bold;
+  font-size: 30px;
+  color: $primary-dark;
+  text-transform: capitalize;
+}
+

src/scss/_pricing.scss

@@ -0,0 +1,105 @@
+.pricing {
+  background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%;
+  padding-top: 90px;
+  padding-bottom: 75px;
+}
+
+.pricing__title {
+  font-family: Montserrat, sans-serif;
+  font-size: 48px;
+  font-weight: bold;
+  color: white;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.price {
+  position: relative;
+  margin-top: 110px;
+  margin-bottom: 125px;
+  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 {
+  background-color: rgba(255, 255, 255, 0.06);
+  font-family: Montserrat, sans-serif;
+  font-size: 24px;
+  font-weight: 500;
+  color: white;
+  text-transform: uppercase;
+  padding: 30px 0;
+  text-align: center;
+  transition: $hover-duration;
+}
+
+.price__value {
+  font-family: Montserrat, sans-serif;
+  font-size: 60px;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+}
+
+.price__period {
+  font-family: Montserrat, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  opacity: 0.3;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.price__splitter {
+  margin: 30px auto;
+  color: $primary;
+  border: none;
+  width: 60px;
+  height: 5px;
+  background-color: $primary;
+}
+
+.price__description {
+  font-family: Montserrat, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  color: white;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.price__rounded-button--purchase {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: rgba(255, 255, 255, 0.15);
+  position: absolute;
+  bottom: 35px;
+  left: 20%;
+  font-family: Montserrat, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  text-transform: uppercase;
+}
+
+.pricing__footer {
+  font-family: Source Sans Pro, sans-serif;
+  font-size: 14px;
+  font-weight: 300;
+  color: $light-text;
+  text-align: center;
+}

src/scss/_variables.scss

@@ -3,6 +3,9 @@ $primary-dark: #635c73;
 $primary-light: #a599c8;
 $regular-text: #848e97;
 $dark-text: #323232;
+$light-text: #a291a5;
+$gray-text: #c8cbcf;
+$lightgray-text: #d3d1da;
 
 $background-light: #f4f4f4;
 $background-violet: #4a3b4e;

src/scss/style.scss

@@ -11,3 +11,7 @@
 @import "reviews";
 @import "social";
 @import "testimonials";
+@import "pricing";
+@import "newsletter";
+@import "form";
+@import "news";