Add social buttons

src/index.html

@@ -237,9 +237,39 @@
             </div>
         </div>
     </section>
+    <section 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">
+                        <span class="rect-button__icon fab fa-github"></span>
+                        GitHub
+                    </button>
+                    <p class="social__stats">7 352 Followers</p>
+                </div>
+                <div>
+                    <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>
+                    <button 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>
+                </div>
+            </div>
+        </div>
+    </section>
 </div>
 
 <!-- JavaScript -->
+<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
+        integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
+        crossorigin="anonymous"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

src/scss/_buttons.scss

@@ -6,23 +6,78 @@
   border: none;
   border-radius: 30px;
   transition: $hover-duration;
+
+  &:hover {
+    background-color: darken($primary, $hover-threshold);
+    transition: $hover-duration;
+    text-decoration: none;
+    color: white;
+    cursor: pointer;
+  }
+
+  &--strong {
+    font-weight: bold;
+    text-transform: capitalize;
+  }
+
+  &--very-strong {
+    @extend .rounded-button--strong;
+    font-size: 21px;
+    padding: 15px 60px;
+  }
 }
 
-.rounded-button:hover {
-  background-color: darken($primary, $hover-threshold);
-  transition: $hover-duration;
-  text-decoration: none;
-  color: white;
-  cursor: pointer;
-}
-
-.rounded-button--strong {
-  font-weight: bold;
-  text-transform: capitalize;
-}
-
-.rounded-button--very-strong {
-  @extend .rounded-button--strong;
+.rect-button {
+  padding: 10px 25px;
+  font-family: Montserrat, sans-serif;
   font-size: 21px;
-  padding: 15px 60px;
+  font-weight: 500;
+  border: none;
+  border-radius: 3px;
+  background-color: $primary;
+  color: white;
+  transition: $hover-duration;
+  text-align: left;
+  line-height: 30px;
+
+  &:hover {
+    background-color: lighten($primary, $hover-threshold);
+    cursor: pointer;
+    transition: $hover-duration;
+  }
+
+  &--github {
+    background-color: $github-color;
+    color: black;
+
+    &:hover {
+      background-color: darken($github-color, $hover-threshold);
+    }
+  }
+
+  &--twitter {
+    background-color: $twitter-color;
+    color: white;
+
+    &:hover {
+      background-color: lighten($twitter-color, $hover-threshold);
+    }
+  }
+
+  &--facebook {
+    background-color: $facebook-color;
+    color: white;
+
+    &:hover {
+      background-color: lighten($facebook-color, $hover-threshold);
+    }
+  }
+
+  &--fixed-width {
+    width: 240px;
+  }
+}
+
+.rect-button__icon {
+  margin-right: 35px;
 }

src/scss/_social.scss

@@ -0,0 +1,16 @@
+.social__content {
+  border-top: solid 1px $line-light;
+  padding-top: 50px;
+  padding-bottom: 80px;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.social__stats {
+  margin-top: 20px;
+  font-family: Montserrat, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  color: $regular-text;
+  text-align: center;
+}

src/scss/_variables.scss

@@ -6,5 +6,11 @@ $dark-text: #323232;
 
 $background-light: #f4f4f4;
 
+$line-light: #f4f4f4;
+
 $hover-threshold: 20%;
-$hover-duration: 0.3s;
+$hover-duration: 0.3s;
+
+$github-color: #f3f3f3;
+$twitter-color: #26a6d1;
+$facebook-color: #3b5998;

src/scss/style.scss

@@ -7,4 +7,5 @@
 @import "download";
 @import "editor";
 @import "about";
-@import "reviews";
+@import "reviews";
+@import "social";