diff --git a/src/scss/components/_btn.scss b/src/scss/components/_btn.scss index 4e069eb..40d8620 100644 --- a/src/scss/components/_btn.scss +++ b/src/scss/components/_btn.scss @@ -1,8 +1,9 @@ .btn { + position: relative; display: inline-flex; justify-content: center; - background: $primary; - color: $bg; + background: $btn-bg; + color: $fg; text-decoration: none; font-size: $font-nav; padding: 20px 45px; @@ -12,7 +13,21 @@ transition: 0.2s ease; &:hover { - background: lighten($primary, 20%); + cursor: pointer; + background: darken($btn-bg, 5%); + } + + + &::after { + content: ''; + position: absolute; + bottom: -7px; + left: 0; + width: 100%; + height: 100%; + background: darken($btn-bg, 30%); + border-radius: 10px; + z-index: -1; } } @@ -21,6 +36,10 @@ background: $secondary; &:hover { - background: darken($secondary, 10%); + background: darken($secondary, 5%); } -} \ No newline at end of file + + &::after { + background: darken($secondary, 60%); + } +} diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index 91f21f9..23da21e 100644 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -1,8 +1,9 @@ header { - padding: 20px 120px; + padding: 20px 2%; display: flex; justify-content: space-between; align-items: center; + background: $bg-alternate; .brand { display: flex; diff --git a/src/scss/components/_title.scss b/src/scss/components/_title.scss index f0c5b5c..547ffa1 100644 --- a/src/scss/components/_title.scss +++ b/src/scss/components/_title.scss @@ -1,13 +1,19 @@ .title { - margin-top: 180px; - padding-top: 20px; + position: relative; + margin: 100px 60px 0 60px; font-size: $font-section; font-weight: $font-bold; - color: $primary; + color: $primary-dark; + display: inline-block; - .sub { - color: rgba($secondary, 0.8); - font-size: $font-section-sub; - font-weight: $font-normal; + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 20%; + background: $tertiary; + z-index: -1; } -} \ No newline at end of file +}