Вопрос задан
13 дней назад
Просмотрен
13 раз
.margin{
height: rem(41);
background-color: #121212;
z-index: 20;
}
.header {
top: 0;
position: sticky;
width: 100%;
background: #121212;
&__body {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: rem(15) rem(0) rem(15) rem(0);
}
&__logo{
z-index: 130;
}
}
.menu {
display: flex;
align-items: center;
&__body {
display: flex;
align-items: center;
}
&__list {
display: flex;
align-items: center;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
&__link {
a{color: #fff;}
font-weight: 500;
font-size: 16px;
line-height: 1;
text-align: center;
margin: 0 rem(22);
position: relative;
&:last-child{
padding-right: rem(0);
}
&:first-child{
padding-left: rem(0);
}
&:after{
position: absolute;
content: "";
display: block;
width: 50px;
height: 2px;
border-radius: 50%;
background-color: #fff;
transform: translate(-50%) scale(0.1);
opacity: 1;
top: 200%;
left: 50%;
transition: all 0.3s;
}
&:hover::after{
transform: translate(-50%) scale(1) ;
opacity: 1;
}
}
&__btn {
color: #FFFFFF;
font-weight: 600;
font-size: 16px;
line-height: 1;
text-align: center;
display: block;
padding: rem(14) rem(47) rem(14) rem(47);
border: 2px solid #FFFFFF;
transition: all 0.3s ease 0s;
background-color: #121212;
z-index: 150;
&:hover{
transform: scale(1.05);
}
}
@media (max-width: 860px) {
.menu__icon{
width: 30px;
height: 20px;
z-index: 130;
cursor: pointer;
position: relative;
display: block;
background-color: transparent;
}
.menu__icon:after, .menu__icon:before{
content: '';
position: absolute;
width: 100%;
height: 2px;
left: 0;
background-color: #fff;
transition: all 0.3s ease;
}
.menu__icon:after{
bottom: 0;
}
.menu__icon:before{
top: 0;
}
.menu__icon span{
position: absolute;
background-color: #fff;
top: 9px;
height: 2px;
width: 100%;
left: 0;
transition: all 0.3s ease;
}
.menu__icon._active span{
transform: scale(0)
}
.menu__icon._active:before{
transform: rotate(45deg);
top: 9px;
}
.menu__icon._active:after{
transform: rotate(-45deg);
bottom: 9px;
}
&__body {
flex-direction: column;
position: fixed;
left: 100%;
top: 0;
background-color: #121212;
width: 250px;
display: flex;
align-items: center;
padding-top: rem(71);
transition: all 0.3s ease 0s;
z-index: 100;
padding-bottom: rem(20);
}
&__body._active{
transform: translate(-100%);
}
&__list {
width: 100%;
flex-direction: column;
position: relative;
text-align: center;
align-items: center;
}
&__link {
margin-bottom: rem(30);
padding: 0;
font-size: 24px;
&:after{
top: 150%;
}
}
}
}
body._lock{
overflow: hidden;
}
/*-----------Основаная верстка------------*/
.fullscreen {
width: 100%;
height: calc(100vh - rem(119));
display: flex;
flex-direction: column;
&__img {
width: 100%;
flex: 1 1 auto;
}
@media (max-width: 862px) {
height: calc(100vh - rem(111));
}
}
.block-text {
background-color: #121212;
padding-top: rem(57);
padding-bottom: rem(101);
&__body{
justify-content: space-between;
display: flex;
}
&__title {
flex: 0 0 55%;
}
&__books {
padding-top: rem(10);
z-index: 1;
li{
margin-bottom: rem(24);
}
}
&__book {
font-weight: 500;
font-size: 16px;
line-height: 133.02%;
/* or 21px */
color: #fff;
position: relative;
padding-right: rem(81);
&:after{
content: "";
position: absolute;
left: 100%;
top: 50%;
transform: translate(-100%,-50%);
width: 17px;
height: 17px;
background: url('@img/Arrow-Right2.png') center no-repeat;
}
&:before{
content: "";
height: 1px;
width: 100%;
position: absolute;
background-color: #fff;
top: 30px;
}
}
@media (max-width: 650px) {
&__body{
justify-content: center;
flex-direction: column;
}
&__title {
margin-bottom: rem(30);
}
}
}
<div class="margin"></div>
<header class="header">
<div class="container">
<div class="header__body">
<a href="#" class="header__logo"><img src="@img/Group 10581.svg" alt="logoo"></a>
<div class="header__menu menu">
<button type="button" class="menu__icon icon-menu"><span></span></button>
<nav class="menu__body">
<ul class="menu__list">
<li class="menu__link"><a href="#">Home</a></li>
<li class="menu__link"><a href="#">Services</a></li>
<li class="menu__link"><a href="#">About us</a></li>
<li class="menu__link"><a href="#">Room</a></li>
<li class="menu__link"><a href="#" >Contact</a></li>
</ul>
<a class="menu__btn">Book Now</a>
</nav>
</div>
</div>
</div>
</header>
<main class="page">
<section class="fullscreen">
<div class="block-text">
<div class="container">
<div class='block-text__body'>
<h1 class="block-text__title">
Open the door for a spacious living -
</h1>
<ul class="block-text__books">
<li><a class="block-text__book" href="##">Book a hotel service</a></li>
<li><a class="block-text__book" href="##">Book a hotel service</a></li>
<li><a class="block-text__book" href="##">Book a hotel service</a></li>
</ul>
</div >
</div>
</div>
<div class="fullscreen__img ibg"><img src="@img/main.jpg" alt="hall"></div>
</section>
</main>
2