Create footer

Create news section

src/index.html

@@ -30,10 +30,10 @@
 <div class="wrapper" id="wrapper">
     <nav class="navbar navbar-expand-lg sticky-top">
         <div class="container">
-            <div class="navbar__header navbar-header">
-                <img class="navbar__logo" src="img/logo.svg" alt="Forkio logo">
-                <span class="navbar__brand">Fork</span>
-                <span class="navbar__brand navbar__brand--emph">IO</span>
+            <div class="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">
@@ -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>
@@ -264,6 +265,285 @@
             </div>
         </div>
     </section>
+    <section class="testimonials">
+        <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">
+                    <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">
+                    <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">
+                    <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">
+                    <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">
+                    <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">
+                    <p class="testimonial__text">
+                        Fusce pharetra erat id odio blandit, nec
+                        pharetra eros venenatis. Pellentesque porttitor cursus massa et vestibulum.
+                    </p>
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="testimonials__delimiter col-8"></div>
+            </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>
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="footer__about col-4">
+                    <div class="brand">
+                        <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>
+                    <p class="footer__about__description">
+                        Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo
+                    </p>
+                </div>
+                <div class="footer__nav col-2">
+                    <p class="footer__nav__title">Navigation</p>
+                    <ul class="footer__nav__navbar">
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">Overview</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Buying options</a></li>
+                        <li><a href="#">Support</a></li>
+                    </ul>
+                </div>
+                <div class="footer__contact col-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">
+                    <p class="footer__info__title">Info</p>
+                    <p class="footer__info__description">
+                        Wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+                        aliquip ex commodo consequat. Autem vel hendrerit iriure dolor in hendrerit.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
 </div>
 
 <!-- JavaScript -->

src/scss/_brand.scss

@@ -0,0 +1,22 @@
+.brand {
+  display: flex;
+}
+
+.brand__logo {
+  height: 45px;
+  margin-right: 17px;
+}
+
+.brand__name {
+  font-family: Lato, sans-serif;
+  text-transform: uppercase;
+  font-size: 24px;
+  font-weight: bold;
+  display: inline-flex;
+  align-items: center;
+
+  &--emph {
+    color: $primary;
+    font-style: normal;
+  }
+}

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/_footer.scss

@@ -0,0 +1,59 @@
+.footer {
+  margin-top: 65px;
+  padding-top: 65px;
+  border-top: solid 1px $background-light;
+  margin-bottom: 95px;
+
+  &__about {
+    &__description {
+      margin-top: 30px;
+      font-family: Montserrat, sans-serif;
+      font-size: 14px;
+      color: $regular-text;
+    }
+  }
+
+  &__nav {
+    &__title {
+      font-family: Montserrat, sans-serif;
+      font-weight: 600;
+      font-size: 16px;
+      color: $dark-text;
+    }
+
+    &__navbar {
+      padding-left: 0;
+      list-style-type: none;
+
+      & > li > a {
+        font-family: Montserrat, sans-serif;
+        font-weight: 500;
+        font-size: 15px;
+        color: $primary;
+        transition: $hover-duration;
+
+        &:hover {
+          color: darken($primary, $hover-threshold);
+          transition: $hover-duration;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  &__info {
+    &__title {
+      font-family: Montserrat, sans-serif;
+      font-weight: 600;
+      font-size: 16px;
+      color: $dark-text;
+    }
+
+    &__description {
+      margin-top: 25px;
+      font-family: Montserrat, sans-serif;
+      font-size: 14px;
+      color: $regular-text;
+    }
+  }
+}

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/_navbar.scss

@@ -13,30 +13,6 @@ $shrinking-duration: 0.4s;
   transition: height $shrinking-duration;
 }
 
-.navbar__header {
-  display: flex;
-  justify-content: center;
-}
-
-.navbar__logo {
-  height: 45px;
-  margin-right: 17px;
-}
-
-.navbar__brand {
-  font-family: Lato, sans-serif;
-  text-transform: uppercase;
-  font-size: 24px;
-  font-weight: bold;
-  display: inline-flex;
-  align-items: center;
-}
-
-.navbar__brand--emph {
-  color: $primary;
-  font-style: normal;
-}
-
 .navbar__link {
   text-transform: capitalize;
   font-family: Montserrat, sans-serif;

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/_testimonials.scss

@@ -0,0 +1,42 @@
+.testimonials {
+  position: relative;
+  background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 30% / contain;
+}
+
+.testimonials__h1 {
+  padding: 100px 0;
+  font-family: Montserrat, sans-serif;
+  font-size: 48px;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.testimonials__row {
+  padding-bottom: 100px;
+}
+
+.testimonial {
+  position: relative;
+  text-align: center;
+  min-height: 170px;
+}
+
+.testimonial__logo {
+  padding-bottom: 40px;
+}
+
+.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 {
+  border-bottom: solid 1px $line-dark;
+}

src/scss/_variables.scss

@@ -3,10 +3,15 @@ $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;
 
 $line-light: #f4f4f4;
+$line-dark: #655969;
 
 $hover-threshold: 20%;
 $hover-duration: 0.3s;

src/scss/style.scss

@@ -3,10 +3,17 @@
 @import "global";
 @import "author";
 @import "navbar";
+@import "brand";
 @import "header";
 @import "download";
 @import "editor";
 @import "about";
 @import "feature";
 @import "reviews";
-@import "social";
+@import "social";
+@import "testimonials";
+@import "pricing";
+@import "newsletter";
+@import "form";
+@import "news";
+@import "footer";