БЛОГ НА HUSL


Как сделать чтобы иконка не уезжала на ширине экрана 210px

Автор вопроса: Максим Косарев

Должно выйти так

Получилось так

На определенном размере экрана иконки меняются местами

//Main settings
html {
  overflow-x: hidden;
  font-size: 10px;
  height: 100vh;
  width: 100%;
}

body {
  overflow-x: hidden;
  height: 100vh;
  width: 100%;
}

* {
  scroll-behavior: smooth;
}

.h2() {
  color: @h2_text;
  font-size: 5.4rem;
  font-weight: 700;
}

//buttons settings
.btn_orange {
  padding: 1.5rem 6rem;
  background-color: @orange;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  &:focus {
    outline: none;
  }
  &:active {
    background-color: darken(@orange, 10%);
  }
}

.btn_call {
  display: block;
  padding: 1rem 3.5rem;
  background-color: transparent;
  border: 1px solid #f82370;
  color: #f53f4f;
  font-size: 1.6rem;
  &:focus {
    outline: none;
  }
  &:active {
    background-color: darken(white, 5%);
  }
}

//Colors settings
@main-bg: #fbfbfb;
@orange: #ff4e2e;
@text-color-dark: #1f1f24;
@text-color-grey: #8993ad;
@h2_text: #262626;
//main section
.main {
  background-color: @main-bg;
  &-header {
    .btn_call {
      display: inline-block;
    }
    &-menu {
      padding: 3rem 0;
      a {
        margin: 0 1rem;
        color: @text-color-dark;
        font-size: 1.6rem;
        &:hover {
          text-decoration: none;
          color: @text-color-dark;
        }
        &:focus {
          color: #fc557c;
          border-bottom: 1px solid #ff4e2e;
          ;
        }
      }
    }
    &-contacts {
      padding: 2rem 0;
      a {
        margin-right: 2rem;
        color: @text-color-dark;
        font-size: 2.5rem;
        font-weight: 700;
        &:hover {
          text-decoration: none;
          color: @text-color-dark;
        }
      }
    }
  }
  &-content {
    &-text {
      margin-top: 18rem;
      margin-bottom: 4.6rem;
      h1 {
        color: @text-color-dark;
        font-size: 7rem;
        font-weight: 700;
      }
      p {
        color: @text-color-grey;
        font-size: 2.2rem;
        font-weight: 400;
      }
    }
    &-img {
      width: 46.9rem;
      height: auto;
      img {
        max-width: 100%;
        height: auto;
      }
    }
  }
}

//Section Work
.work {
  margin-top: 10rem;
  &-header {
    h2 {
      .h2();
    }
  }
  &-content {
    margin: 9rem 0;
    &-block {
      p {
        margin-top: 2.4rem;
        font-size: 1.8rem;
        color: @text-color-grey;
      }
    }
  }
  .btn_orange {
    margin-bottom: 20rem;
  }
}

//Section Portfolio
.portfolio {
  &-header {
    h2 {
      .h2();
    }
  }
  &-content {
    margin: 9rem 0;
    &-block {
      p {
        color: @text-color-grey;
        font-size: 2rem;
      }
    }
  }
}

// Adaptive Section
.adaptive {
  &-header {
    margin-top: 10rem;
    padding: 8rem 0rem 6rem 11rem;
  }
  background-color: @orange;
  h3 {
    color: #ffffff;
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 4rem;
  }
  p {
    color: #ffffff;
    font-size: 1.8rem;
  }
}

// Contacts Section
.contacts {
  padding: 8rem 0;
  &-menu {
    a {
      display: block;
      font-size: 1.6rem;
      color: @text-color-grey;
      &:nth-child(2) {
        margin-top: 1rem;
      }
      &:nth-child(3) {
        margin-top: 1rem;
      }
      &:hover {
        text-decoration: none;
        color: #f82370
      }
    }
  }
  &_links {
    a {
      display: block;
      margin-left: 1rem;
      font-size: 2rem;
      color: #000000;
      &:nth-child(2) {
        margin-top: 3rem;
      }
      &:hover {
        text-decoration: none;
        color: #000000;
      }
    }
    &-text {
      margin-left: 2rem;
      display: inline-block;
    }
  }
  .social {
    .social_links {
      &:nth-child(3) {
        margin-left: 1.8rem;
      }
      &:nth-child(4) {
        margin-left: 1.8rem;
      }
      &:nth-child(5) {
        margin-left: 1.8rem;
      }
    }
  }
  i {
    font-size: 2rem;
    color: @text-color-grey;
  }
  .btn_call {
    margin-bottom: 2rem;
  }
}

// Footer
footer {
  padding: 2.8rem 0;
  background-color: #31293c;
  p {
    color: #ffffff;
    font-size: 1.6rem;
  }
}

// Adaptive 
@media(max-width: 991px) {
  .main {
    &-header {
      &-menu {
        text-align: center;
      }
      &-contacts {
        text-align: center;
        a {
          display: block;
          margin-bottom: 2rem;
        }
      }
    }
    &-content {
      img {
        margin: 4rem 12.5rem;
      }
      button {
        margin: 0 22rem;
      }
      &-text {
        h1 {
          text-align: center;
        }
        p {
          text-align: center;
        }
      }
    }
  }
  .work {
    &-content {
      &-block {
        margin-bottom: 5rem;
      }
    }
  }
  .contacts {
    &-menu {
      margin-bottom: 4rem;
      a {
        margin: 0 30rem;
        &:nth-child(1) {
          margin-right: 5rem;
        }
        &:nth-child(2) {
          margin-right: 5rem;
        }
      }
    }
    &_links {
      margin-bottom: 4rem;
      text-align: center;
    }
    button {
      margin: 0 auto;
    }
    .social_links {
      margin-left: 28rem;
    }
  }
}

@media(max-width: 767px) {
  .main {
    &-content {
      button {
        margin: 0 13rem;
      }
      &-img {
        img {
          margin: 4rem 3.1rem;
        }
      }
    }
  }
  .contacts {
    &-menu {
      a {
        margin-left: 22rem;
      }
    }
    .social_links {
      margin-left: 18rem;
    }
  }
}

@media(max-width: 500px) {
  .main {
    &-content {
      &-text {
        margin-top: 10rem;
        h1 {
          font-size: 4rem;
        }
      }
      button {
        margin: 0;
      }
      .human-img {
        display: none;
      }
    }
  }
  .work {
    &-btn {
      .btn_orange {
        margin-bottom: 10rem;
      }
      button {
        padding: 1.5rem 3rem;
      }
    }
  }
  .portfolio {
    &-img {
      img {
        width: 100%;
      }
    }
    &-header {
      h2 {
        text-align: center;
        font-size: 4rem;
      }
    }
    .btn_orange {
      padding: 1.5rem 3rem;
    }
  }
  .adaptive {
    &-header {
      padding: 0;
      h3 {
        font-size: 3rem;
      }
    }
  }
  .contacts {
    &-menu {
      a {
        margin: 0 5.5rem
      }
    }
    &_links {
      a {
        margin: 0;
      }
      &-text {
        font-size: 1.6rem;
      }
    }
    .social {
      width: 100%;
    }
  }
}
<!doctype html>
<html lang="en">

<head>
  <title>Макет для сайта</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Main File CSS -->
  <link rel="stylesheet" href="css/style.css">
  <!-- Bootstrap CSS -->
  <link rel="preload" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" as="style" onload="this.rel='stylesheet'" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

  <!-- Section Main -->

  <section class="main">
    <div class="container">
      <div class="main-header">
        <div class="row">
          <div class="col-lg-4 col-md-12">
            <div class="main-header-menu">
              <a href="#work">Услуги</a>
              <a href="#portfolio">Портфолио</a>
              <a href="#price">Стоимость</a>
            </div>
          </div>
          <div class="col-lg-5 offset-lg-3 col-md-12">
            <div class="main-header-contacts">
              <a href="tel:+7(499)995-55-77">+7 (499) 995-55-77</a>
              <button class="btn_call">Заказать звонок</button>
            </div>
          </div>
        </div>
      </div>
      <div class="main-content">
        <div class="row">
          <div class="col-lg-8 col-md">
            <div class="main-content-text">
              <h1>Дмитрий Алексеев</h1>
              <p>Frontend-разработчик и веб-верстальщик</p>
            </div>
            <button class="btn_orange">Узнать больше</button>
          </div>
          <div class="col-lg-4 human-img">
            <div class="main-content-img">
              <img src="img/human.png" alt="human">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Section Work -->

  <section id="work" class="work">
    <div class="container">
      <div class="work-header text-center">
        <h2>Что я делаю</h2>
      </div>
      <div class="work-content">
        <div class="row">
          <div class="col-lg-3">
            <div class="work-content-block text-center">
              <img src="/img/work/1.png" alt="work1">
              <p>Вёрстка лендинг–страниц <br> и сайтов любой сложности</p>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="work-content-block text-center">
              <img src="/img/work/2.png" alt="work2">
              <p>Адаптивная вёрстка под все браузеры и устройства</p>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="work-content-block text-center">
              <img src="/img/work/3.png" alt="work3">
              <p>Frontend–разработка <br> и программирование</p>
            </div>
          </div>
          <div class="col-lg-3">
            <div id="price" class="work-content-block text-center">
              <img src="/img/work/4.png" alt="work4">
              <p>Исправление и доработка существующей вёрстки</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-12 text-center work-btn">
        <button class="btn_orange">Узнать стоимость</button>
      </div>
    </div>
  </section>
  <!-- Section Portfolio -->
  <section id="portfolio" class="portfolio">
    <div class="container">
      <div class="portfolio-header text-center">
        <h2>Примеры моих работ</h2>
      </div>
      <div class="portfolio-content text-center">
        <div class="row">
          <div class="col-lg-4">
            <div class="portfolio-content-block">
              <picture class="portfolio-img">
                <source srcset="img/portfolio/portfolio1.webp" type="image/webp">
                <img src="img/portfolio/portfolio1.png" alt="portfolio1">
              </picture>
              <p>Сайт психолога Веры Антоновой</p>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="portfolio-content-block">
              <picture class="portfolio-img">
                <source srcset="img/portfolio/portfolio2.webp" type="image/webp">
                <img src="img/portfolio/portfolio2.png" alt="portfolio2">
              </picture>
              <p>Сайт магазина детской одежды</p>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="portfolio-content-block">
              <picture class="portfolio-img">
                <source srcset="img/portfolio/portfolio3.webp" type="image/webp">
                <img src="img/portfolio/portfolio3.png" alt="portfolio3">
              </picture>
              <p>Сайт магазина «Рыболов»</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-12 text-center">
        <button class="btn_orange">Закзать Звонок</button>
      </div>
    </div>
  </section>
  <!-- Section Adaptive -->
  <section class="adaptive">
    <div class="container">
      <div class="adaptive-header">
        <div class="row">
          <div class="col-lg-12">
            <h3>Адаптивная вёрстка под все устройства <br> и браузеры от 1000 рублей всего за 4 часа.*</h3>
            <p>* Срок и стоимость могут отличаться от заявленных и рассчитываются индивидуально, <br> в зависимости от сложности задач.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Section contacts -->
  <section class="contacts">
    <div class="container">
      <div class="row">
        <div class="col-lg-2">
          <div class="contacts-menu">
            <a href="#work">Услуги</a>
            <a href="#portfolio">Портфолио</a>
            <a href="#price">Стоимость</a>
          </div>
        </div>
        <div class="col-lg-4 offset-lg-2">
          <div class="contacts_links text-center">
            <a href="tel:+74999957755">
              <img src="/img/icons/telephone.png" alt="phone">
              <div class="contacts_links-text">
                +7 (499) 995-77-55
              </div>
            </a>
            <a href="mailto:[email protected]">
              <img src="img/icons/mail.png" alt="e-mail">
              <div class="contacts_links-text">
                [email protected]
              </div>
            </a>
          </div>
        </div>
        <div class="col-lg-3 offset-lg-1 col-md-12">
          <div class="social">
            <button class="btn_call">
                  Заказать звонок
                </button>
            <a class="social_links" href="#"><i class="fab fa-vk"></i></a>
            <a class="social_links" href="#"><i class="fab fa-facebook-f"></i></a>
            <a class="social_links" href="#"><i class="fab fa-twitter"></i></a>
            <a class="social_links" href="#"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer class="text-center">
    <p>© Дмитрий Алексеев, 2016 – 2018</p>
  </footer>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- FontAwesome -->
  <script src="https://kit.fontawesome.com/b69910e114.js" crossorigin="anonymous"></script>
</body>

</html>


Источник

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

licensed under cc by-sa 3.0 with attribution.