0

введите сюда описание изображения

.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
  • Забыли background сделать для меню 18 мар в 21:30
  • Не, там написано для меню боди background color #121212, как бы я не изменял макет, всегда это ссылки(books) все перекрывают
    – Grolland
    19 мар в 5:34

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.