Introduce BEM naming

src/scss/_buttons.scss

@@ -1,16 +1,28 @@
-a.raised-button {
-  $hover-transition-duration: 0.4s;
-
+.rounded-button {
   padding: 7px 35px;
   background-color: $primary;
   font-family: Montserrat, sans-serif;
   color: white;
+  border: none;
   border-radius: 30px;
-  transition: $hover-transition-duration;
+  transition: $hover-duration;
+}
 
-  &:hover {
-    background-color: $primary-dark;
-    transition: $hover-transition-duration;
-    text-decoration: none;
-  }
+.rounded-button:hover {
+  background-color: $primary-light;
+  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;
+  font-size: 21px;
+  padding: 15px 60px;
 }

src/scss/_download.scss

@@ -1,20 +1,17 @@
-#download {
+.download {
   text-align: center;
+}
 
-  a.raised-button {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    font-size: 21px;
-    font-weight: bold;
-    text-transform: capitalize;
-    padding: 15px 60px;
-  }
+.download__rounded-button--translated {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
 
-  p {
-    padding-top: 45px;
-    font-family: Montserrat, sans-serif;
-    font-size: 14px;
-    color: $regular-text;
-    text-transform: capitalize;
-  }
+.download__description {
+  padding-top: 45px;
+  font-family: Montserrat, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: $regular-text;
+  text-transform: capitalize;
 }

src/scss/_header.scss

@@ -0,0 +1,32 @@
+.header {
+  background: url(../img/header/img.png) no-repeat 50% 30% / cover;
+  height: 900px;
+  padding-top: 110px;
+}
+
+.header__h1 {
+  font-family: Montserrat, sans-serif;
+  font-size: 82px;
+  font-weight: bold;
+  color: white;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.header__h2 {
+  font-family: Lato, sans-serif;
+  font-size: 30px;
+  color: $primary;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+.header__h3 {
+  margin-top: 20px;
+  font-family: Montserrat, sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  color: $regular-text;
+  text-transform: uppercase;
+  text-align: center;
+}

src/scss/_hero.scss

@@ -1,32 +0,0 @@
-#hero {
-  background: url(../img/hero/img.png) no-repeat 50% 40% / contain;
-  height: 900px;
-  padding-top: 110px;
-
-  h1 {
-    font-family: Montserrat, sans-serif;
-    font-size: 82px;
-    font-weight: bold;
-    color: white;
-    text-transform: capitalize;
-    text-align: center;
-  }
-
-  h2 {
-    font-family: Lato, sans-serif;
-    font-size: 30px;
-    color: $primary;
-    text-align: center;
-    margin-bottom: 0;
-  }
-
-  h3 {
-    margin-top: 20px;
-    font-family: Montserrat, sans-serif;
-    font-size: 16px;
-    font-weight: 600;
-    color: $regular-text;
-    text-transform: uppercase;
-    text-align: center;
-  }
-}

src/scss/_navbar.scss

@@ -1,54 +1,53 @@
-#nav {
-  $shrinking-duration: 0.4s;
+$shrinking-duration: 0.4s;
 
+.navbar {
   margin: 0 0;
   padding: 0 90px;
   height: 100px;
   background-color: white;
   transition: height $shrinking-duration;
+}
 
-  &.shrink {
-    height: 50px;
-    transition: height $shrinking-duration;
-  }
+.navbar--shrink {
+  height: 50px;
+  transition: height $shrinking-duration;
+}
 
-  #navbar-header {
-    display: flex;
-    justify-content: center;
+.navbar__header {
+  display: flex;
+  justify-content: center;
+}
 
-    img {
-      height: 45px;
-    }
+.navbar__logo {
+  height: 45px;
+  margin-right: 17px;
+}
 
-    span {
-      margin-left: 17px;
-      font-family: Lato, sans-serif;
-      text-transform: uppercase;
-      font-size: 24px;
-      font-weight: bold;
+.navbar__brand {
+  font-family: Lato, sans-serif;
+  text-transform: uppercase;
+  font-size: 24px;
+  font-weight: bold;
+  display: inline-flex;
+  align-items: center;
+}
 
-      em {
-        color: $primary;
-        font-style: normal;
-      }
-    }
-  }
+.navbar__brand--emph {
+  color: $primary;
+  font-style: normal;
+}
 
-  #navbar-body {
-    a {
-      text-transform: capitalize;
-      font-family: Montserrat, sans-serif;
-      font-size: 16px;
-      font-weight: bolder;
-    }
+.navbar__link {
+  text-transform: capitalize;
+  font-family: Montserrat, sans-serif;
+  font-size: 16px;
+  font-weight: bolder;
+  margin: 0 20px;
+  color: $primary-dark;
+  transition: $hover-duration;
+}
 
-    a.default-link {
-      margin: 0 20px;
-      color: $primary-dark;
-    }
-
-    a.raised-button {
-      @extend .raised-button
-    }
-  }
-}
+.navbar__link:hover {
+  color: $primary;
+  transition: $hover-duration;
+}

src/scss/_variables.scss

@@ -1,3 +1,6 @@
 $primary: #8d81ac;
 $primary-dark: #635c73;
-$regular-text: #848e97;
+$primary-light: #a599c8;
+$regular-text: #848e97;
+
+$hover-duration: 0.3s;

src/scss/style.scss

@@ -1,5 +1,5 @@
 @import "variables";
 @import "buttons";
 @import "navbar";
-@import "hero";
+@import "header";
 @import "download";