diff --git a/src/SASS/components/buttons.scss b/src/SASS/components/buttons.scss index 69c7310..1b320cf 100644 --- a/src/SASS/components/buttons.scss +++ b/src/SASS/components/buttons.scss @@ -1,3 +1,60 @@ +.btn { + border: none; + font-size: 1.5rem; + font-weight: 600; + text-transform: uppercase; + border-radius: 100px; + background-image: linear-gradient( + to right, + $color-primary-light, + $color-primary-dark + ); + color: $color-white; + cursor: pointer; + position: relative; + overflow: hidden; + + & > * { + display: inline-block; + height: 100%; + width: 100%; + transition: all 0.2s; + height: 100%; + width: 100%; + } + + &__visible { + padding: 2rem 7.5rem; + } + + &__invisible { + position: absolute; + padding: 2rem 0; + left: 0; + top: -100%; + } + + &:hover { + background-image: linear-gradient( + to left, + $color-primary-light, + $color-primary-dark + ); + } + + &:hover &__visible { + transform: translateY(100%); + } + + &:hover &__invisible { + top: 0; + } + + &:active { + transform: translateY(-0.2rem); + } +} + .btn-inline { border: none; color: $color-primary; diff --git a/src/SASS/components/components.scss b/src/SASS/components/components.scss index e575525..cab46b6 100644 --- a/src/SASS/components/components.scss +++ b/src/SASS/components/components.scss @@ -45,9 +45,7 @@ &__count { margin-right: auto; - } - - &__friends { + color: $color-grey-dark-3; } } diff --git a/src/SASS/pages/_home.scss b/src/SASS/pages/_home.scss index 61a60b1..59c7f65 100644 --- a/src/SASS/pages/_home.scss +++ b/src/SASS/pages/_home.scss @@ -258,3 +258,15 @@ text-transform: uppercase; } } + +.cta { + padding: 3.5rem 0; + text-align: center; + + &__book-now { + font-size: 1.5rem; + font-weight: 300; + text-transform: uppercase; + margin-bottom: 2.5rem; + } +} diff --git a/src/commons/hotel-view/hotel-view.jsx b/src/commons/hotel-view/hotel-view.jsx index 781dc01..842087f 100644 --- a/src/commons/hotel-view/hotel-view.jsx +++ b/src/commons/hotel-view/hotel-view.jsx @@ -129,6 +129,16 @@ function HotelView() { + +