0

При зуме 125 и т.д.

Кусочек кода HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" 
  integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" 
  crossorigin="anonymous" referrerpolicy="no-referrer" />       <!-- Подключение анимаций -->
  <title>Document</title>
</head>
<body>
  <div class="header">
    <div class="container">
      <h1>Д<span style="color: #B44545;">ЖКХ</span></h1> <!-- изменение цвета текста отдельной буквы "Д" -->
    </div>
  </div>
  <div class="mes" data-aos="zoom-in">
    <span id="messageSpan"></span>
  </div>

<div class="reg">
        <div class="form-box">
            <div class="button-box">
            <div id="btn"></div>
            <button type="button" class="toggle-btn tog-btn" onclick="login()">Вход</button>
            <button type="button" class="toggle-btn" onclick="register()">Регистрация</button>
            </div>

CSS

body {
    font-family: 'Times New Roman', Times, serif;
    background-image: url(images/gh.svg);
    background-repeat: no-repeat;
    background-size: cover;            /* фон */
}
.container{
    position: sticky;
    top: 10px;
    margin: 0px 370px;
    color: #346FC7;
    font-size: 36px;
}

.color-txt{
    color: #B44545;
}

.mes{
    margin: 0px 1100px; 
    white-space: nowrap;
    color: #fff;
    font-weight: bold;
    font-size: 42px;
    position: fixed;
    left: 0%;
    top: 25%;
    right: 1%;
}

.form-box{
    background: rgba(0, 0, 0,0.6);    
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    width: 400px;
    height: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1.2px solid rgba(0, 0, 0,.2);
    overflow: hidden;
}

.toggle-btn{
    padding: 10px 15px;
    font-size: medium;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
    color: #fff;
    left: 10%;
}

.tog-btn{
    padding: 10px 20px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
    color: #fff;
    right: 10%;
}
2
  • а в чём вопрос? что не получается? 25 мая в 5:37
  • При масштабировании текст плывёт в разные стороны, форма статична
    – Minimus
    25 мая в 10:08

1 ответ 1

-1

Вы можете использовать свойство max-width для ограничения ширины контейнера с текстом, чтобы он не плавал при масштабировании страницы. Чтобы форма двигалась вместе с текстом, вы можете добавить свойство position: absolute и использовать относительные координаты для ее расположения. Например, чтобы форма оставалась по центру страницы, вы можете использовать следующий код:

.form-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* остальные стили */
}

Это позволит форме оставаться по центру страницы, даже если вы масштабируете страницу.

Ваш ответ

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

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