БЛОГ НА HUSL


Вертикально адаптация макета под разные устройства

Автор вопроса: shaaai2h

Есть такой макет, он уже свёрстан, но адаптив ещё не сделан.
Подскажите, как сделать для определённых расширений вертикальные шаги?
Проще говоря, все эти круги со стрелками сделать вертикально, что бы на мобильных устройствах прокручивались вниз. Просмотрел инфу по адаптиву, но никак не получается реализовать.

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

/* museomoderno-regular - latin */

@font-face {
  font-family: 'MuseoModerno';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('../fonts/museomoderno-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/museomoderno-v4-latin-regular.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* museomoderno-600 - latin */

@font-face {
  font-family: 'MuseoModerno';
  font-style: normal;
  font-weight: 600;
  src: local(''), url('../fonts/museomoderno-v4-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/museomoderno-v4-latin-600.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
  box-sizing: border-box;
}

*,
*before,
*::after {
  box-sizing: inherit;
}

.wrapper {
  max-width: 1300px;
  margin: 0 auto;
}

body {
  font-family: "Museo Cyrl";
  font-style: normal;
  font-size: 16px;
  line-height: 1.2;
  font-weight: normal;
  color: #FFFFFF;
}


/* Header styles */

.header {
  position: fixed;
  top: 18px;
  left: 0;
  width: 100%;
}

.header_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  header-top: 56px;
}

.header_list {
  display: flex;
  flex-wrap: wrap;
}

.header_item {
  margin-right: 82px;
}


/* Header styles */

.intro {
  height: 1427px;
  width: 99%;
  background: url("../images/svg/background.svg") no-repeat center;
  background-size: cover;
  padding: 4px;
}

.red {
  height: 1200px;
  width: 1300px;
  margin-top: 80px;
}

.green {
  padding: 40px;
  height: 1200px;
  width: 1225px;
  margin-top: 150px;
}

.black {
  width: 1200px;
  height: 500px;
  justify-content: center;
  padding-bottom: 40px;
}

.block {
  flex-wrap: wrap;
  width: 375px;
  height: 450px;
  margin: 5px;
  display: inline-block;
  justify-content: space-between;
  padding: 1px;
}

.etap {
  padding: 15px;
  justify-content: center;
}

.circle {
  height: 220px;
  width: 220px;
  background: linear-gradient(90deg, deeppink, darkorchid);
  border-radius: 50%;
  font-weight: 800;
  margin: 0 auto;
  display: flex;
}

.green_circle {
  width: 29px;
  height: 29px;
  background-color: #91DE14;
  border: 2px solid #000000;
  border-radius: 50%;
  position: absolute;
  left: 680px;
  top: 461px;
}

.yellow_circle {
  width: 29px;
  height: 29px;
  background-color: #FFD740;
  border: 2px solid #000000;
  border-radius: 50%;
  position: absolute;
  left: 1072px;
  top: 461px;
}

.orange_circle {
  width: 29px;
  height: 29px;
  background-color: #FF6242;
  border: 2px solid #000000;
  border-radius: 50%;
  position: absolute;
  left: 680px;
  top: 1000px;
}

.orange_circle2 {
  width: 29px;
  height: 29px;
  background-color: #FF6242;
  border: 2px solid #000000;
  border-radius: 50%;
  position: absolute;
  left: 285px;
  top: 1000px;
}

.zagolovok {
  font-style: normal;
  display: block;
  align-items: center;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 25px;
}

.text {
  font-family: "Museo Cyrl";
  font-style: italic;
  display: flex;
  align-items: center;
  margin-left: 45px;
  font-size: 18px;
  line-height: 27px;
  max-width: 300px;
  font-weight: 2;
  text-align: left;
  margin-top: 10px;
}

.arrow {
  position: absolute;
  top: 372px;
  left: 346px;
}

.arrow_img {
  width: 175px;
}

.arrow2 {
  position: absolute;
  top: 372px;
  left: 737px;
}

.arrow3 {
  position: absolute;
  top: 378px;
  left: 1125px;
}

.arrow3_img {
  width: 100px;
}

.arrow4 {
  position: absolute;
  left: 346px;
  top: 912px;
}

.arrow5 {
  position: absolute;
  left: 738px;
  top: 912px;
}

.arrow4_img {
  width: 175px;
}


/* Pictutes */

.pistol\.svg {
  position: absolute;
  width: 230px;
  height: 180px;
  left: 1000px;
  top: 27px
}

.dollar1 {
  position: absolute;
  left: 152px;
  top: 90px;
}

.dollar2 {
  position: absolute;
  left: 386px;
  top: 85px;
  width: 90px;
  height: 77px;
}

.dollar3 {
  position: absolute;
  width: 69px;
  height: 60px;
  left: 900px;
  top: 140px;
}

.dollar4 {
  position: absolute;
  width: 95px;
  height: 83px;
  left: 790px;
  top: 635px;
}

.boy {
  width: 190px;
  height: 206px;
  margin: 0 auto;
}

.bird {
  width: 130px;
  height: 220px;
  margin: 0 auto;
}

.doc {
  width: 100px;
  height: 210px;
  margin: 0 auto;
}

.hand {
  width: 130px;
  height: 220px;
  margin: 0 auto;
}

.pen {
  width: 130px;
  height: 220px;
  margin: 0 auto;
}

.boy2 {
  width: 190px;
  height: 206px;
  margin: 0 auto;
}
<!doctype html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Lending Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="styles/reset.css">
  <link rel="stylesheet" href="styles/styles.css">
  <link rel="stylesheet" href="fonts/museocyrl.css">
  <link rel="stylesheet" href="styles/adaptive.css">
</head>

<body>
  <header class="header">
    <div class="wrapper">
      <div class="header_wrapper">
        <div class="header_logo">
          <a href="/" class="header_logo-link">
            <img class="header_logo-pic" alt="LandingPage" src="./images/svg/logo.svg">
          </a>
        </div>

      </div>
    </div>
  </header>

  <main class="main">
    <section class="intro">
      <div class="items">
        <div class="red">
          <div class="pictures">
            <img class="pistol.svg" alt="#" src="images/svg/pistol.svg">
            <img class="dollar1" alt="#" src="images/svg/dollar1.svg">
            <img class="dollar2" alt="#" src="images/svg/dollar2.svg">
            <img class="dollar3" alt="#" src="images/svg/dollar3.svg">
            <img class="dollar4" alt="#" src="images/svg/dollar4.svg">
          </div>


          <div class="green">
            <div class="black">
              <div class="block">
                <div class="etap">
                  <div class="zagolovok">
                    Начальный уровень
                  </div>
                  <div class="circle">
                    <img class="boy" src="images/svg/boy.svg">
                  </div>
                  <div class="text">
                    Клуба удаленной работы и заработка в интернете
                  </div>
                  <div class="arrow">
                    <img class="arrow_img" src="images/svg/arrow1.svg">
                  </div>
                </div>
              </div>

              <div class="block">
                <div class="etap">
                  <div class="zagolovok">
                    Первые шаги в клубе
                  </div>
                  <div class="circle">
                    <div class="green_circle"></div>
                    <img class="bird" src="images/svg/bird.svg">
                  </div>
                  <div class="text">
                    Изучаем ключевые моменты, чтобы потом легче получать основные знания.
                    <br>Награда: 10 монет
                  </div>
                  <div class="arrow2">
                    <img class="arrow_img" src="images/svg/arrow1.svg">
                  </div>
                </div>
              </div>

              <div class="arrow3">
                <img class="arrow3_img" src="images/svg/arrow3.svg">
              </div>

              <div class="block">
                <div class="etap">
                  <div class="zagolovok">
                    Фундамент вашего успеха
                  </div>
                  <div class="circle">
                    <div class="yellow_circle"></div>
                    <img class="doc" src="images/svg/doc.svg">
                  </div>
                  <div class="text">
                    Фундамент, который вы должны выстроить с самого начала. Награда: 25 монет
                  </div>
                  <div class="arrow4">
                    <img class="arrow4_img" src="images/svg/arrow4.svg">
                  </div>
                </div>
              </div>

            </div>
            <div class=b lack>

              <div class="block">
                <div class="etap">
                  <div class="zagolovok">
                    Удаленная работа
                  </div>
                  <div class="circle">
                    <div class="orange_circle"></div>
                    <img class="hand" src="images/svg/hand.svg">
                  </div>
                  <div class="text">
                    Основы удаленной работы, которые позволят вам научится находить клиентов и получать деньги.
                    <br>Награда: от 100 монет
                  </div>
                  <div class="arrow5">
                    <img class="arrow4_img" src="images/svg/arrow4.svg">
                  </div>
                </div>
              </div>

              <div class="block">
                <div class="etap">
                  <div class="zagolovok">
                    Факультеты
                  </div>
                  <div class="circle">
                    <div class="orange_circle2" id="2"></div>
                    <img class="pen" src="images/svg/pen.svg">
                  </div>
                  <div class="text">
                    Изучаем навыки которые позволят нам зарабатывать в интернете.
                    <br>Награда: от 100 монет
                  </div>
                </div>
              </div>

              <div class="block">
                <div class="etap">
                  <div class="zagolovok">
                    Этап навыков
                  </div>
                  <div class="circle">
                    <img class="boy2" src="images/svg/boy2.svg">
                  </div>
                  <div class="text">
                    Клуба удаленной работы и заработка в интернете
                  </div>
                </div>
              </div>
            </div>


          </div>

        </div>


      </div>

    </section>
  </main>



</body>

</html>


Источник

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

licensed under cc by-sa 3.0 with attribution.