Pygame_Project/game.html

164 lines
5.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game - Tanks 2D</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #000; /* Черный цвет фона */
color: #fff; /* Белый цвет текста */
}
.wrapper {
margin-top: 80px; /* Отступ для контента под фиксированной шапкой */
/* height: 100vh; */ /* Не нужно использовать высоту 100vh для обертки */
overflow-y: auto; /* Включаем вертикальную прокрутку */
}
nav {
position: fixed; /* Фиксированная позиция */
top: 0; /* Расположение шапки вверху */
left: 0; /* Расположение шапки слева */
width: 100%; /* Занимает всю ширину экрана */
background-color: #333;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 999; /* Чтобы шапка была выше других элементов */
}
.logo img {
width: 100px; /* Устанавливаем ширину логотипа */
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
transition: background-color 0.3s;
}
nav ul li a:hover {
background-color: #555;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #222; /* Цвет фона контейнера */
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* Тень контейнера */
text-align: center;
}
h1 {
color: #007bff; /* Цвет заголовка */
}
p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #007bff; /* Цвет кнопки */
color: #fff; /* Цвет текста на кнопке */
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3; /* Изменение цвета кнопки при наведении */
}
.advertisement {
margin-top: 50px;
}
.advertisement img {
max-width: 100%;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* Тень изображения */
}
.footer {
background-color: #888; /* Серый цвет фона нижнего раздела */
padding: 20px;
margin-top: 50px; /* Отступ сверху */
}
.footer h2 {
color: #fff; /* Белый цвет текста */
margin: 0; /* Убираем внешние отступы */
}
</style>
</head>
<body>
<nav>
<div class="logo">
<a href="/"><img src="https://cdn.discordapp.com/attachments/704651653873139803/1233880220004519986/Screenshot_2024-04-27_233856-removebg-preview.png?ex=662eb400&is=662d6280&hm=518bf12af052c5268492e81d64f8957eea1d6163b3c8fe28c3e8a69758169263&" alt="Tanki Logo"></a>
</div>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/game">Game</a></li>
<li><a href="/link">Link</a></li>
</ul>
</nav>
<div class="container">
<h1>Tanks 2D</h1>
<img src="https://img.poki.com/cdn-cgi/image/quality=78,width=314,height=314,fit=cover,f=auto/2fc66b5540735bef2565f422131519d8.png" alt="Tanks 2D Screenshot">
<p>
Tanks 2D is an action-packed game where you control a tank and battle against other tanks in various environments.
The game features multiple levels, unique weapons, and challenging obstacles.
As you progress, you unlock new tanks and upgrades to enhance your gameplay experience.
</p>
<h2>Key Features</h2>
<p>
- Fast-paced 2D tank battles<br>
- Unique weapons and upgrades<br>
- Various maps and environments<br>
- Multiplayer modes and special events<br>
</p>
<h2>How to Play</h2>
<p>
To start playing Tanks 2D, download the game using the link below and follow the instructions to install it.
You can play single-player or join multiplayer battles to test your skills against other players.
</p>
<a href="/download" class="download-link">Download Tanks 2D</a>
</div>
<script>
document.querySelector('.logo').addEventListener('click', function() {
window.location.href = '/';
});
</script>
</body>
</html>