index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="assets/icons/PDROt0mQl3Y.jpg" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.cdnfonts.com/css/sf-pro-display"
      rel="stylesheet"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <link href="style.css" rel="stylesheet" />
    
    <title>Astral Project</title>
  </head>

  <body>
    
    <header>
      <ol>
        <li class="sf active"><a href="#">Главная</a></li>
        <li class="sf"><a href="#">Донат</a></li>
        <li class="sf"><a href="map.html">Динамическая карта</a></li>
        <li class="sf"><a href="#">F.A.Q.</a></li>
        <li class="sf"><a href="#">Контакты</a></li>
      </ol>
    </header>

    <main>
      <div class="mainheader">
        <p id="ip">IP</p>
        <p id="ipastral">AstralProject.ru</p>
      </div>
      <div id="Title">
        <h1 class="titleee">Astral<br />Project</h1>
        <article>
          <p class="sf">
            Место, где твоё восприятие игры меняется - воистину мистические
            место.
          </p>
        </article>
      </div>
      <section>
        <aside class="surv">
          <span>Survival</span>
          <p>
            Классический режим выживания, где ты волен делать всё, до чего у
            тебя только хватит фантазии. При условии, конечно, что ты не умрёшь
            в свою самую первую ночь.
          </p>
        </aside>
        <aside class="rolep">
          <span>Roleplay</span>
          <p>
            В разработке.<br />Хочешь стать бизнесменом? Или стать
            сертифицированным лесорубом? А если всё вместе? Astral RP даст тебе
            эту возможность!
          </p>
        </aside>
      </section>
    </main>

    <footer>
      <h4>Наши соц сети:</h4>
        <ul class="media">
          <li>
          <a href="https://vk.com/projectastral" target="_blank"> VK</a>
        </li>
        <li>
          <a href="https://www.tiktok.com/@astralproject2" target="_blank"> TikTok </a>
        </li>
      </ul>
  </footer>
  </body>
</html>