<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSGOPOSITIVE - Главная</title>
    <link rel="icon" href="https://csgopstv.com/img/favicon.png" sizes="48x48">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #0d0d1a;
            color: #e0e0e0;
            font-family: 'Montserrat', sans-serif;
        }

        header {
            background-color: #1c1c2e;
            padding: 10px 40px; 
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.7);
        }

        header .logo img {
            height: 50px;
        }

        nav ul {
            list-style-type: none;
            display: flex;
            gap: 20px;
            margin: 0;
            padding: 0;
        }

        nav ul li a {
            color: #e0e0e0;
            text-decoration: none;
            font-weight: 700;
            padding: 12px 15px;
            transition: all 0.3s ease;
            border-radius: 5px;
        }

        nav ul li a:hover {
            background-color: #3a3a5e;
            color: #ffffff;
        }

        main {
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - 80px); 
            background: url(‘https://source.unsplash.com/1920x1080/?csgo’) no-repeat center center/cover;
            color: #e0e0e0;
            padding-top: 80px; 
        }

        .intro {
            text-align: center;
            background: rgba(28, 28, 46, 0.9);
            padding: 60px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
            max-width: 800px;
        }

        .intro h1 {
            color: #ff4c60;
            font-size: 48px;
            margin-bottom: 20px;
        }

        .intro p {
            font-size: 20px;
            margin-bottom: 30px;
        }

        .btn-primary {
            display: inline-block;
            padding: 15px 35px;
            background-color: #ff4c60;
            color: #ffffff;
            text-decoration: none;
            font-weight: 700;
            font-size: 18px;
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #e03b50;
        }

        footer {
            background-color: #1c1c2e;
            text-align: center;
            padding: 30px;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.7);
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        footer .socials {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        footer .socials a {
            color: #ff4c60;
            text-decoration: none;
            font-size: 24px;
            transition: transform 0.3s ease;
        }

        footer .socials a:hover {
            transform: scale(1.2);
        }

        @media (max-width: 768px) {
            header {
                flex-direction: column;
                padding: 10px 20px;
            }

            nav ul {
                flex-direction: column;
                align-items: center;
            }

            main {
                padding: 40px 20px;
            }

            .intro {
                padding: 30px;
            }

            footer {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <img src="https://csgopstv.com/img/favicon.png" alt="CSGOPOSITIVE Logo">
        </div>
        <nav>
            <ul>
                <li><a href="player_stats.html">Рейтинги</a></li>
                <li><a href="prizes.html">Призы</a></li>
                <li><a href="servers.html">Сервера</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="intro">
            <h1>Добро пожаловать в CSGOPOSITIVE</h1>
            <p>CSGOPOSITIVE предлагает уникальную статистику и профили игроков. Участвуйте в соревнованиях и выигрывайте фантастические призы!</p>
            <a href="player_stats.html" class="btn-primary">Начать сейчас</a>
        </section>
    </main>
    <footer>
        <div class="socials">
            <a href="https://vk.com/csgopositive_tour" class="vk"><i class="fab fa-vk"></i></a>
            <a href="https://www.youtube.com/@csgopstv/" class="youtube"><i class="fab fa-youtube"></i></a>
            <a href="https://www.twitch.tv/csgopstv" class="twitch"><i class="fab fa-twitch"></i></a>
        </div>
        <p>© 2023 CSGOPOSITIVE. Все права защищены.</p>
    </footer>
</body>
</html>

based on that, make servers page and ratings pages please, you can change css if its needed.

servers page should contain beatiful card like something with background image, server name, map, player count, count of these  cards is dynamic
ratings page should contain beatiful table with this fields: player name, kills,deaths, k/d, playtime, jointime