Сделай разделы: О сервере, Галерея, О комплектующих, так будет удобно, с анимациями, на свой вкус вот код:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FlogDog</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <div class="logo-container"> <h1 class="logo">FlogDog</h1> </div> <nav> <ul> <li><a href="#about">О сервере</a></li> <li><a href="#gallery">Галерея</a></li> <li><a href="#specs">Комплектующие сервера</a></li> </ul> </nav> </header> <main> <img class="serv" src="server_image.png"> </main> <footer> <div class="footer__container"> <div class="footer__left"> <p class="footer__text">Мы - компактный коллектив единомышленников, влюбленных в захватывающий мир Minecraft. Наслаждаемся игрой без сбросов и ограничений, погружаясь в бескрайние просторы виртуального мира.</p> </div> <div class="footer__social"> <a href="https://t.me/sqLDak" target="_blank"> <img src="telegram.svg" alt="Telegram" width="50" height="50"> </a> <a href="https://discord.com/users/390225160713535499" target="_blank"> <img src="discord.svg" alt="Discord" width="50" height="50"> </a> <a href="https://github.com/DaYzTm" target="_blank"> <img src="github.svg" alt="Github" width="50" height="50"> </a> <div class="mono-container"> <img src="monobank.svg" alt="Mono Bank" width="267" height="24"> <div class="card-number">5375 4114 1872 1598</div> </div> </div> </div> <p>© 2023 Все права защищены. Никакое использование материалов сайта без нашего разрешения не допускается.</p> </footer> <script src="scripts.js"></script> </body> </html>
/* Общие стили */
body, html {
height: 100%;
margin: 0;
}

body {
display: flex;
flex-direction: column;
}

a {
text-decoration: none;
color: inherit;
}

ul {
list-style-type: none;
margin: 0
}
/* Стили для шапки */
header {
background-color: transparent;
padding: 1rem 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}

.logo-container {
position: absolute;
left: 1rem;
top: 1rem;
}

.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
margin: 0;
}

nav {
display: flex;
justify-content: center;
}

nav ul {
display: flex;
}

nav li {
margin: 0 1rem;
}

nav a {
color: #fff;
font-weight: bold;
}

nav a:hover {
color: #ccc;
}

section {
margin-bottom: 2rem;
}

h2 {
font-size: 2rem;
margin-bottom: 1rem;
}

img.serv {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}

main {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}

.logo {
font-size: 24px;
font-weight: bold;
font-family: Arial, sans-serif;
color: #fff;
margin: 0;
}

/* Стили для подвала */
footer {
background-color: #222;
color: #fff;
padding: 0.5rem 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

.footer__container {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}

.footer__left {
max-width: 50%;
}

.footer__text {
font-size: 1rem;
line-height: 1;
}

.footer__social {
display: flex;
align-items: center;
}

.footer__social a {
margin-right: 1rem;
}

.footer__social a:last-child {
margin-right: 0;
}

footer p {
text-align: center;
margin-top: 2rem;
}

.footer__social a:hover img {
transform: rotate(360deg);
transition: transform 0.5s ease-in-out;
}

@media (max-width: 768px) {
nav ul {
display: flex;
flex-direction: column;
text-align: center;
background-color: #333;
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
}

nav li {
  margin: 0.5rem 0;
}

nav.show {
  display: flex;
}

.footer__container {
  flex-direction: column;
}

.footer__left {
  max-width: 100%;
  text-align: center;
}

.footer__social {
  margin-top: 1rem;
}
}

@media (max-width: 480px) {
.footer__social a {
margin-right: 0.5rem;
}

.footer__social img {
  width: 40px;
  height: 40px;
}

.mono-container img {
  width: 200px;
  height: 18px;
}

.card-number {
  font-size: 0.8rem;
}
}

/* Добавьте этот медиа-запрос в ваш CSS /
@media (max-width: 1080px) and (max-height: 2400px) {
nav {
display: none;
}
.logo-container {
position: static;
padding: 1rem;
}
header {
display: flex;
justify-content: left;
}
/ Здесь вы можете добавить стили, которые будут применяться только для экранов с шириной не более 1080px и высотой не более 2400px */
img.serv {
width: 100%;
height: 100vh;
object-fit: cover;
}

main {
height: calc(100vh - 4rem); /* Вычитаем высоту шапки и подвала */
}

footer {
position: static;
padding: 1rem 0;
}

header {
padding: 0.5rem 0;
}
}