1

Имеется два блока, внутри ссылка, как отцентрировать ссылки по вертикали так, что бы при попытках сделать адаптив всё не слетало, мучаюсь целый день... Скрины что хочу приложил, код тоже. Обычная версия - Адаптивная версия (блок с ссылкой должен быть на весь экран, а когда проматываешь, то следующий тоже на весь)

Вёрстка - https://codepen.io/SadxDarkness/pen/eYdbLQz

body {
  margin: 0;
}
.main {
  display: flex;
}
.about {
  width: 50%;
  background: black;
  height: 100vh;
}
.works {
  width: 50%;
  background: white;
  height: 100vh;
}
.link1 {
  color: white;
  text-decoration: none;
  border: 3px solid white;
  padding: 20px;
  font-size: 2em;
  font-family: "Jura", sans-serif;
}
.link2 {
  color: black;
  text-decoration: none;
  border: 3px solid black;
  padding: 20px;
  font-size: 2em;
  font-family: "Jura", sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="third.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jura:wght@600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="wrapperMain">
        <div class="main">
            <div class="about">
                <a href="" class="link1">Обо мне</a>
            </div>
      <div class="works">
                <a href="" class="link2">Портфолио</a>
            </div>
        </div>
    </div>
</body>
</html>

1 ответ 1

0

Оно?

body {
  margin: 0;
}

.main {
  display: flex;
}

.about,
.works {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  width: 50%;
  height: 100vh;
}

.about {
  background: black;
}

.works {
  background: white;
}

.link1 {
  color: white;
  text-decoration: none;
  border: 3px solid white;
  padding: 20px;
  font-size: 2em;
  font-family: "Jura", sans-serif;
}

.link2 {
  color: black;
  text-decoration: none;
  border: 3px solid black;
  padding: 20px;
  font-size: 2em;
  font-family: "Jura", sans-serif;
}

@media screen and (max-width: 800px) {
  .main {
    flex-flow: column nowrap;
  }
  .about,
  .works {
    width: 100%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="third.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Jura:wght@600&display=swap" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <div class="wrapperMain">
    <div class="main">
      <div class="about">
        <a href="" class="link1">Обо мне</a>
      </div>
      <div class="works">
        <a href="" class="link2">Портфолио</a>
      </div>
    </div>
  </div>
</body>

</html>

1
  • Оно, но теперь я не понимаю как это в адаптив перевести, ведь после перехода в него, "обо мне " остаётся по центру, а вот портфолио уходит в левый бок...
    – Darkness
    2 фев 2021 в 19:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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