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>
@@ -405,6 +406,98 @@
             </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

@@ -81,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/_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/_variables.scss

@@ -5,6 +5,7 @@ $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

@@ -14,3 +14,4 @@
 @import "pricing";
 @import "newsletter";
 @import "form";
+@import "news";