diff options
| author | AlisaLinUwU <alisalinuwu@gmail.com> | 2025-01-26 10:42:28 +0500 |
|---|---|---|
| committer | AlisaLinUwU <alisalinuwu@gmail.com> | 2025-01-26 10:42:28 +0500 |
| commit | 0225bdb772d1334cc1aa7ab0fc3678df0864df6b (patch) | |
| tree | 85a8c8e4fcf1d935fcbad54886b73410c8cb2e26 /src/main/resources/static/scss/_header.scss | |
Initializemain
Diffstat (limited to 'src/main/resources/static/scss/_header.scss')
| -rw-r--r-- | src/main/resources/static/scss/_header.scss | 229 |
1 files changed, 229 insertions, 0 deletions
diff --git a/src/main/resources/static/scss/_header.scss b/src/main/resources/static/scss/_header.scss new file mode 100644 index 0000000..3488dad --- /dev/null +++ b/src/main/resources/static/scss/_header.scss @@ -0,0 +1,229 @@ +.header-area{ + position: absolute; + left: 0; + right: 0; + width: 100%; + top: 0; + z-index: 9; + @media #{$mobile_device} { + padding-top: 0; + } + @media #{$tablet_device} { + padding-top: 0; + } + .main-header-area{ + // padding: 0 150px; + @media #{$mobile_device} { + padding: 10px 10px; + } + @media #{$tablet_device} { + padding: 10px 10px; + } + .logo-img{ + @media #{$mobile_device} { + // padding-left: 20px; + text-align: left; + } + @media #{$tablet_device} { + // padding-left: 20px; + text-align: left; + } + @media #{$mid_device} { + // padding-left: 20px; + text-align: left; + } + img{ + @media #{$mobile_device} { + // padding-left: 20px; + width: 70px; + } + @media #{$tablet_device} { + // padding-left: 20px; + width: 70px; + } + + } + } + .book_room{ + @include flexbox(); + @include align-items(center); + @include justify-content(flex-end); + .socail_links{ + ul{ + li{ + display: inline-block; + + a{ + color: #A8A7A0; + margin: 0 10px; + font-size: 15px; + &:hover{ + color: #fff; + } + } + } + } + } + .book_btn{ + a{ + background: $btn_bg; + font-size: 16px; + font-weight: 400; + border: 1px solid transparent ; + color: #fff; + padding: 19px 43px 23px 43px; + font-family: $font2; + display: inline-block; + line-height: 1; + &:hover{ + background: transparent; + color: $btn_bg; + border: 1px solid $btn_bg; + } + } + } + } + .main-menu{ + text-align: center; + ul{ + li{ + display: inline-block; + position: relative; + margin-right: 45px; + @media #{$mid_device} { + margin-right: 30px; + } + @media #{$large_device} { + margin-right: 45px; + } + a{ + color: #fff; + font-size: 16px; + text-transform: capitalize; + font-weight: 400; + display: inline-block; + padding: 39px 0px 39px 0px; + font-family: $font2; + position: relative; + text-transform:capitalize; + + @media #{$mid_device} { + // padding: 41px 0px 10px 0px; + font-size: 15px; + } + @media #{$large_device} { + // padding: 41px 0px 10px 0px; + font-size: 15px; + } + i{ + font-size: 9px; + @media #{$mobile_device}{ + display: none !important; + } + @media #{$tablet_device}{ + display: none !important;; + } + } + // &::before { + // position: absolute; + // content: ""; + // background: #BC9321; + // width: 100%; + // height: 2px; + // bottom: 0; + // left: 0; + // opacity: 0; + // transform: scaleX(0); + // @include transition(.3s); + // } + // &:hover::before{ + // opacity: 1; + // transform: scaleX(1); + // } + &.active{ + // &::before{ + // opacity: 1; + // transform: scaleX(1); + // } + } + &:hover{ + color: #fff; + } + } + .submenu { + position: absolute; + left: 0; + top: 140%; + background: #fff; + width: 200px; + z-index: 2; + box-shadow: 0 0 10px rgba(0,0,0,.02); + opacity: 0; + visibility: hidden; + text-align: left; + @include transition(.6s); + li{ + display: block; + a{ + padding: 10px 15px; + position: inherit; + @include transition(.3s); + display: block; + color: #000; + &::before{ + display: none; + } + } + &:hover a{ + color: #000; + } + } + } + &:hover > .submenu{ + opacity: 1; + visibility: visible; + top: 100%; + } + &:hover > a::before{ + opacity: 1; + transform: scaleX(1); + } + &:first-child a { + padding-left: 0; + } + } + } + } + &.sticky { + box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1); + position: fixed; + width: 100%; + top: -70px; + left: 0; + right: 0; + z-index: 999; + transform: translateY(70px); + transition: transform 500ms ease, background 500ms ease; + -webkit-transition: transform 500ms ease, background 500ms ease; + box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1); + background: #000;; + @media #{$mobile_device} { + padding: 10px 10px; + } + @media #{$tablet_device} { + padding: 10px 10px; + } + @media #{$mid_device} { + padding: 10px 20px; + } + @media #{$large_device} { + padding: 10px 20px + } + .main-menu{ + padding: 0; + } + } + + } + +}
\ No newline at end of file |