БЛОГ НА HUSL


При размерах меньше 400px появляться пробел, помогите

Автор вопроса: Joe Jostar

Вот такое чудо

Html  код `

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Waxom</title>
    <link rel="stylesheet" href="/css/main.min.css">
  </head>
  <body>
    <div class="header">
      <img src="/img/Logo.png" alt="" class="header__logo">
      <div class="header__menu">
        <div class="header__menu-item">Home</div>
        <div class="header__menu-item">About Us</div>
        <div class="header__menu-item">Portfolio</div>
        <div class="header__menu-item">Features</div>
        <div class="header__menu-item">Blog</div>
        <div class="header__menu-item">Pricing</div>
        <div class="header__menu-item">Shortcodes</div>
        <div class="header__menu-item">Contact</div>
      </div>
      <div class="header__extra-menu">
        <img src="/img/icon-cart.png" alt="" class="header__extra-menu-cart">
        <div class="header__extra-menu-search">
          <input type="text" class="header__extra-menu-searchbar">
          <img src="/img/icon-search.png" alt="" class="header__extra-menu-search-ico" onclick="openSearch()">
        </div>
      </div>
    </div>
    <div class="slider">
      <img src="/img/slider_logo_1.png" alt=""  class="slider__img slider__img_show">
      <img src="/img/slider_logo_2.png" alt=""  class="slider__img slider__img-sp">
      <img src="/img/slider_logo_3.png" alt=""  class="slider__img slider__img-sp">
      <img src="/img/slider_logo_4.png" alt=""  class="slider__img slider__img-sp">
      <img src="/img/slider_logo_5.png" alt=""  class="slider__img slider__img-sp">
      <img src="/img/slider_logo_6.png" alt=""  class="slider__img slider__img-sp">
      <div class="slider__text">
        <div class="slider__text-half-title">Unique and Modern Design</div>
        <div class="slider__text-title">
          Portfolio PSD Template
        </div>
        <div class="slider__text-subtitle">
          Nam liber tempor cum soluta nobis eleifend option congue nihil Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum similique nisi, ullam porro, laboriosam distinctio ut!
        </div>
      </div>
      <a href="#">\
      <div class="slider_btn-container">
      <div class="slider__btn">
        <a href="#" class="slider__btn-txt">
            get started
        </a>
      </div>
      </div>
      </a>
      <div class="slider__dot-container">
        <div class="slider__dot" onclick="currentSlide(1)"></div>
        <div class="slider__dot" onclick="currentSlide(2)"></div>
        <div class="slider__dot" onclick="currentSlide(3)"></div>
        <div class="slider__dot" onclick="currentSlide(4)"></div>
        <div class="slider__dot" onclick="currentSlide(5)"></div>
        <div class="slider__dot" onclick="currentSlide(6)"></div>
      </div>
      <div class="slider__arrow-container">
        <img src="/img/left-ar.png" alt="" class="slider__arrow-left" onclick="plusSLides(-1)">
        <img src="/img/right-ar.png" alt="" class="slider__arrow-right" onclick="plusSLides(1)">
      </div>
    </div>
    <div class="content">
      <div class="services">
        <div class="services-content">
          <div class="services-box">
            <img src="/img/icon-pencil.png" alt="" class="services-img">
            <div class="services-title">
              Web & App Design
            </div>
            <div class="services-subtitle">Nam liber tempor cum soluta nobis eleifend option congue nihil </div>
            <div class="services-line"></div>
          </div>
          <div class="services-box">
            <img src="/img/icon-stuck.png" alt="" class="services-img">
            <div class="services-title-gold">Development</div>
            <div class="services-subtitle">Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy n</div>
            <div class="services-line-gold"></div>
          </div>
          <div class="services-box">
            <img src="/img/icon-gear.png" alt="" class="services-img">
            <div class="services-title">Customization</div>
            <div class="services-subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti ipsa eius amet! Dolore voluptatum, perspiciatis quidem fuga eius quis illo.</div>
            <div class="services-line"></div>
          </div>
          <div class="services-box">
            <img src="/img/icon-folder.png" alt="" class="services-img">
            <div class="services-title">Customization</div>
            <div class="services-subtitle">Nam liber tempor cum soluta nobis eleifend option congue nihil </div>
            <div class="services-line"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="ideas">
      <div class="ideas-content">
        <div class="ideas__title">
          Waxom is Realization of your Ideas.
        </div>
        <div class="ideas__subtitle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident excepturi, ipsam ut illo animi consequuntur modi unde dicta illum non.
        </div>
        <div class="ideas__img">
        <img src="/img/browser-left.png" alt="" class="ideas__img-1">

        <img src="/img/browser-right.png" alt="" class="ideas__img-3">
        </div>
        <img src="/img/browser-center.png" alt="" class="ideas__img-2">
      </div>
    </div>
  <script src="/js/script.js"></script>
  </body>
</html>

css код

.header {
  z-index: 40;
  margin: 0 auto;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  width: 1173px;
  justify-content: space-between;
  margin-top: 30px;
}
.header__logo{
  margin-top: -30px;
  display: block;
  position: absolute;
  z-index: 40;
}
.header__logo-active{
  margin-top: 600px;
  display: block;
  position: absolute;
  z-index: 40;
}

.header__menu {
  z-index: 40;
  width: 600px;
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

.header__menu-item {
  z-index: 40;
  color: white;
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;

}
.header__menu-item:hover{
  z-index: 40;
  color: #C7B299;
  cursor: pointer;
}
.header__extra-menu {
  z-index: 40;
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width:80px;
}

.header__extra-menu-cart {
  z-index: 40;
  display: inline-block;
}

.header__extra-menu-search {
  z-index: 40;
  display: inline-block;
}

.header__extra-menu-searchbar {
  z-index: 40;
  display: none;
}

.header__extra-menu-search-ico {
  z-index: 40;
  display: inline-block;
}
.header__extra-menu-searchbar_active{
  z-index: 40;
  position: absolute;
  margin-left: 10px;
  display: inline-block;
  height: 36px;
  border-radius: 50px 0 0 50px;
  font-size: 16px;
  z-index: 40;
  margin-left: -704px;
  width: 700px;
}
.header__extra-menu-search-ico_active{
  display: inline-block;
  border: 1px solid white;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 10px;
  padding-left: 2px;
  margin-left: -4px;
  border-radius: 0 50px 50px 0;
  z-index: 40;
}

.header__extra-menu_active {
  width:300px;
  z-index: 40;
}


.slider{
  width: 100%;
}

.slider__text{
  position: absolute;
  z-index: 3;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.slider__text-half-title{
  font-size: 36px;
  font-family: Arial;/////Внимание
  color: white;
  margin-top: 284px;
}
.slider__text-title{
  font-size: 52px;
  color: white;
  margin-top: 16px;
}
.slider__text-subtitle{
  width: 562px;
  color: white;
  text-align: center;
  margin-top: 19px;
}
.slider_btn-container{
  width: 100%;
  position: absolute;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  margin-top: 588px;
}
.slider__btn-txt{
  color: white;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 3;
}
.slider__btn{
  height: 54px;
  width: 171px;
  background-color: #998675;
  text-align: center;
}
.slider__img{
  margin-top: -155px;
  display: none;
  margin: 0 auto;
}
.slider__img_show{
  filter:brightness(0.4);
  height: 1300px;
  width: 100%;
  margin-top: -85px;
  position: absolute;
  display: block;
}

.slider__dot-container{
  position: absolute;
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  width: 100%;
  justify-content: center;
  margin-top: 1150px;
}
.slider__dot{
  margin-left: 7px;
  height: 12px;
  width: 12px;
  border:3px solid white;
  display: inline-block;
  border-radius: 60px;
}
.slider__dot_active{
  background-color: white;
}
.slider__arrow-container{
  position: absolute;
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 473px;

}
.slider__arrow-left{
  background-color: rgba(256,256,256,0.2);
}
.slider__arrow-right{
  background-color: rgba(256,256,256,0.2);
  margin-right: 10px;
}

@media (max-width:1182px) {
  .header {
    z-index: 40;
    margin: 0 auto;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    width: 950px;
    justify-content: space-between;
    margin-top: 40px;
  }
  .header__logo{
    margin-top: -15px;
    height: 40px;
    display: block;
    position: absolute;
    z-index: 40;
  }
  .slider__text{
    position: absolute;
    z-index: 3;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }
}
@media only screen and (min-device-width : 200px) and (max-device-width : 480px) {
  .header {
    z-index: 40;
    margin: 0 auto;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    width: 1173px;
    justify-content: space-between;
    margin-top: 30px;
  }
  .slider__img_show{
    filter:brightness(0.4);
    height: 800px;
    width: 100%;
    margin-top: -85px;
    position: absolute;
    display: block;
  }
  .services{
    margin-top: 600px;
  }
  .slider_btn-container{
    width: 100%;
    position: absolute;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    margin-top: 320px;
  }
  .slider__text-half-title{
    font-size: 26px;
    font-family: Arial;/////Внимание
    color: white;
    margin-top: 104px;
  }
  .slider__text-title{
    font-size: 42px;
    color: white;
    margin-top: 16px;
  }
  .slider__text-subtitle{
    width: 500px;
    color: white;
    text-align: center;
    margin-top: 19px;
  }
  .slider__arrow-container{
    position: absolute;
    display: -webkit-inline-flex;
    display: -ms-inline-flex;
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 200px;

  }
  .slider__dot-container{
    position: absolute;
    display: -webkit-inline-flex;
    display: -ms-inline-flex;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 500px;
  }

}
@media only screen and (min-device-width : 480px) and (max-device-width : 1530px) {
  .slider__img_show{
    filter:brightness(0.4);
    height: 750px;
    width: 100%;
    margin-top: -95px;
    position: absolute;
    display: block;
  }
  .services{
    margin-top: 560px;
  }
  .slider_btn-container{
    width: 100%;
    position: absolute;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    margin-top: 300px;
  }
  .slider__text-half-title{
    font-size: 26px;
    font-family: Arial;/////Внимание
    color: white;
    margin-top: 104px;
  }
  .slider__text-title{
    font-size: 42px;
    color: white;
    margin-top: 16px;
  }
  .slider__text-subtitle{
    width: 500px;
    color: white;
    text-align: center;
    margin-top: 19px;
  }
  .slider__arrow-container{
    position: absolute;
    display: -webkit-inline-flex;
    display: -ms-inline-flex;
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 200px;

  }
  .slider__dot-container{
    position: absolute;
    display: -webkit-inline-flex;
    display: -ms-inline-flex;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 500px;
  }
}

.hide-all{
  position: absolute;
  display: none;
}



.services{
  margin-top: 1300px;
}
.services-content {
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  justify-content: center;
  justify-content: space-around;
  width: calc(90vw);
  padding-top: 120px;
}

.services-box {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: space-around;
  height: 214px;
}

.services-title {
  font-size: 22px;
  text-align: center;
}

.services-subtitle {
  font-size: 18px;
  color: gray;
  width: 266px;
  text-align: center;
}
.services-line{
  width: 71px;
  height: 4px;
  background-color: #F1EEE9;
}

.services-title-gold {
  font-size: 22px;
  text-align: center;
  color: #C7B299;
}
.services-line-gold{
  width: 71px;
  height: 4px;
  background-color: #C7B299;
}
@media screen and (max-width: 1100px) {
/* стили для больших планшетов - начало */
.services-content {
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  justify-content: center;
  justify-content: space-around;
  width: calc(90vw + 100px);
  padding-top: 120px;
}
.services-box {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: space-around;
  height: 250px;
}

.services-title {
  font-size: 22px;
  text-align: center;
}

.services-subtitle {
  font-size: 18px;
  color: gray;
  width: 150px;
  text-align: center;
}
.services-line{
  width: 71px;
  height: 4px;
  background-color: #F1EEE9;
}

.services-title-gold {
  font-size: 22px;
  text-align: center;
  color: #C7B299;
}
.services-line-gold{
  width: 71px;
  height: 4px;
  background-color: #C7B299;
}

}

.ideas {
  height: 700px;
  background-color: #FBFAF8;
}

.ideas-content {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.ideas__title {
  font-size: 30px;
  text-align: center;
  margin-top: 84px;
}

.ideas__subtitle {
  color: gray;
  font-size: 16px;
  text-align: center;
  width: 757px;
  margin-top: 24px;

}
.ideas__img{
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  margin-top: 40px;
}
.ideas__img-1 {
  margin-top: 82px;
  z-index: 1;
}

.ideas__img-2 {
  z-index: 3;
  margin-top: -482px;
}

.ideas__img-3 {
  margin-top: 82px;
  z-index: 2;
}
@media screen and (max-width: 1100px) {
  .ideas {
    height: 700px;
    background-color: #FBFAF8;
  }

  .ideas-content {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .ideas__title {
    font-size: 30px;
    text-align: center;
    margin-top: 84px;
  }

  .ideas__subtitle {
    color: gray;
    font-size: 16px;
    text-align: center;
    width: 757px;
    margin-top: 24px;

  }
  .ideas__img{
    margin-top: 150px;
  }
  .ideas__img-1 {
    margin-top: 82px;
    margin-left: 60px;
    width: 600px;
    height: 220px;
    z-index: 1;
  }

  .ideas__img-2 {
    z-index: 3;
    margin-top: -330px;
    width: 600px;
    height: 330px;
  }

  .ideas__img-3 {
    margin-right: 60px;
    margin-top: 82px;
    z-index: 2;
    width: 600px;
    height: 220px;
  }
}

css сброс

*{
  padding: 0;/*Во всех тегах отключены внутренние отступы*/
  margin: 0;/*Во всех тегах отключены внешние отступы*/
  border: 0;/*Выключены границы у всех тегов*/
}
*, *:before, *:after{
  -moz-box-sizing: border-box;/*Для Firefox cвойства width и height будут включать в себя значения полей и границ, но не отступов (margin).*/
  -webkit-box-sizing: border-box;/*Для Safari и Chrome cвойства width и height будут включать в себя значения полей и границ, но не отступов (margin)*/
  box-sizing: border-box;/*для всех остальных браузеров cвойства width и height будут включать в себя значения полей и границ, но не отступов (margin)*/
}
:focus, :active{outline:none;}/*Отключает обводку, которая возникает у некоторых браузеров*/
nav,footer,header,aside{display:block;}/*Делает блочными данные теги, для того чтобы к ним применялись блочные свойства(height,,max-width,min-width)*/
html,body{
  height: 100%;/*Чтобы страница занимала 100% от высоты окна браузера*/
  width: 100%;/*Чтобы страница занимала 100% от ширины окна браузера*/
  font-size:100%;/*Устанавливает стандартный размер текста*/
  line-height: 1;/*Устанавливает межстрочный интервыл на 1 для всех тегов*/
  scroll-behavior: smooth;/*Плавная прокрутка сайта*/
  text-rendering: optimizeSpeed;/*При загрузке текста приоритет идет на скорость*/
  -ms-text-size-adjust:100%;/*На большенстве браузеров для телефонов будет стоять стандартный размер текста*/
  -moz-text-size-adjust:100%;/*На браузере Firefox для телефонов будет стоять стандартный размер текста*/
  -webkit-text-size-adjust:100%;/*На браузерах Safari и Chrome для телефонов будет стоять стандартный размер текста*/
}
input,button,textarea{font-family:inherit;}/*Стиль текста кнопок и полей будет зависить от тега-родителя, в котором он(и) находи(я)ться*/
input::-ms-clear{display: none;}/*Значек очистки поля, который появляеться при введение в него чего-нибудь ,спрятан*/
button{cursor: pointer;}/*Для всех кнопок курсор обьявлен как указывающая рука*/
button::-moz-focus-inner{
  /*У кнопок в Firefox нестандартный вид*/
  padding:0;/*Убирает специфические внутренние отступы у копок Firefox*/
  border:0;/*Убираетт обводку у кнопок Firefox*/
}
a,a:visited{text-decoration: none;}/*Сылки становяться без нижнего подчеркивания*/
a:hover{text-decoration: none;}/*При наведении на ссылки тоже не будет подчеркивания*/
a:not([class]) {
  text-decoration-skip-ink: auto;/*Для всех элементов, которые не ссылки, при подчеркивании прерываеться на буквах, которые пересекают подчеркивание*/
}
table{
border-collapse:collapse;/*при стыке ячеек таблицы одна линия */
border-spacing:0;/*расстояние между границами ячеек нет*/
}
ul li{list-style: none;}/*Убираються значки пунктов в списке*/
img{
  vertical-align: top;/*Выравнивание верхнего края изображения по верху самого высокого элемента строки*/
  max-width: 100%;/*По стандарту изображение будет размером с файл изображения*/
  display: block;/*Блочные изображения легче редактировать*/
  }
h1,h2,h3,h4,h5,h6{
  font-size:inherit;/*Размер текста заголовков зависит от размера блока, в котором находиться заголовок*/
  font-weight: inherit;/*Насыщенность текста ставиться в зависимости от плотности блока, в котором находиться заголовок*/
}

`


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.