Кусочек кода 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%;
}