diff --git a/src/img/hero/img.png b/src/img/header/img.png similarity index 100% rename from src/img/hero/img.png rename to src/img/header/img.png diff --git a/src/index.html b/src/index.html index 7c816de..ba0b2c5 100644 --- a/src/index.html +++ b/src/index.html @@ -23,44 +23,47 @@
-
diff --git a/src/js/script.js b/src/js/script.js index abbba52..54f687c 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -5,9 +5,9 @@ $(document).ready(function () { scrollTop = $(window).scrollTop(); if (scrollTop >= 100) { - $('#nav').addClass('shrink'); + $('.navbar').addClass('navbar--shrink'); } else if (scrollTop < 100) { - $('#nav').removeClass('shrink'); + $('.navbar').removeClass('navbar--shrink'); } }); }); diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss index dfedc38..1984cca 100644 --- a/src/scss/_buttons.scss +++ b/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; } \ No newline at end of file diff --git a/src/scss/_download.scss b/src/scss/_download.scss index eaa2658..36eab62 100644 --- a/src/scss/_download.scss +++ b/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; } \ No newline at end of file diff --git a/src/scss/_header.scss b/src/scss/_header.scss new file mode 100644 index 0000000..36812a0 --- /dev/null +++ b/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; +} diff --git a/src/scss/_hero.scss b/src/scss/_hero.scss deleted file mode 100644 index dabf14c..0000000 --- a/src/scss/_hero.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/scss/_navbar.scss b/src/scss/_navbar.scss index 42dce84..9ccb545 100644 --- a/src/scss/_navbar.scss +++ b/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 - } - } -} \ No newline at end of file +.navbar__link:hover { + color: $primary; + transition: $hover-duration; +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index b4bc93a..6c9139b 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,3 +1,6 @@ $primary: #8d81ac; $primary-dark: #635c73; -$regular-text: #848e97; \ No newline at end of file +$primary-light: #a599c8; +$regular-text: #848e97; + +$hover-duration: 0.3s; \ No newline at end of file diff --git a/src/scss/style.scss b/src/scss/style.scss index 246b41f..344f2bb 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,5 +1,5 @@ @import "variables"; @import "buttons"; @import "navbar"; -@import "hero"; +@import "header"; @import "download"; \ No newline at end of file