Что делать?
0
При уменьшении разрешения экрана весь сайт рушиться, как это исправить?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Главная</title>
<meta name="description" content="Slowpoke Project">
<meta name="keywords" content="Игровой проект"/>
<link rel="stylesheet" href="assets/css/style.css">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Main Style -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="assets/img/3.png" class="awp_image1">
<a href="index.html"><img src="assets/img/1.png" class="title"></a>
<img src="assets/img/4.png" class="awp_image2">
</div>
<div class="wrapper">
<div class="sidebar">
<a href="#" class="enter"><img src="assets/img/steam.png"><span>Войти через Steam</span></a>
<a class="active" href="#">Главная</a>
<a href="#">Пополнить баланс</a>
<a href="#">Магазин</a>
<a href="#">Правила</a>
<a href="#">Список администраторов</a>
<a href="#">Список VIP игроков</a>
<a href="#">Статистика игроков</a>
<a href="#">Список банов</a>
<a href="https://discord.gg/ZjrHBy4u">Discord</a>
<a href="https://vk.com/slowpoke_project">Группа Вконтакте</a>
</div>
<div class="container-fluid">
<div class="content">
<div class="block1"><p>Количество игроков</p><hr>
<img src="assets/img/8.png" class="img_2">
</div>
<div class="block2">
<p>Всего убийств</p><hr><img src="assets/img/7.png" class="img_1">
</div>
</div>
<div class="block3">
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<div class="table">
<table border="1" cellspacing="6" cellpadding="0">
<tr>
<th colspan="6">Топ 10 игроков</th>
</tr>
<tr>
<td width="50px">#</td>
<td width="200px">Игрок</td>
<td width="150px">Очки</td>
<td width="100px">Звание</td>
<td width="100px">К/Д</td>
<td width="150px">Время игры</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<br>
<br>
<br>
<div class="block4">
<span class="size1">Кол-во администраторов</span>
<span class="vl"></span>
<span class="size2" dir="rtl">Кол-во банов</span>
</div>
</div>
</div>
<div class="clear"></div>
<br>
<br>
<br>
<footer>
<div class="container-fluid">
<p>2021 © slowpoke-project</p>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
width: 100%;
font-family: sans-serif;
background: url(../img/6.jpg) no-repeat center center fixed;
}
body {
display: flex;
flex-direction: column;
background-color: #615f5f;
}
.header {
background-color: #373737;
font-size: 0.8em;
height: 150px;
background: rgba(55, 55, 55, 0.3);
}
.text {
text-align: center;
letter-spacing: 5px;
font-size: 30px;
color: white;
text-shadow: 0 0 5px red;
}
.content {
text-align: left;
float: left;
flex: 1;
}
.block1 {
border: none;
border: 5px;
border-radius: 20px;
text-align: center;
height: 120px;
margin-left: 40px;
margin-top: 20px;
width: 425px;
color: white;
background: rgba(55, 55, 55, 0.7);
box-shadow: 0 0 20px rgb(220, 83, 246, 100);
filter: contrast(150%);
clear: both;
}
.block1 p {
font-size: 25px;
}
.block1 hr {
height: 7px;
background-color: #7cd94f;
border: none;
box-shadow: 0 0 20px rgb(124,217,79);
margin: -10px 0 0 0;
filter: contrast(150%);
}
.img_1 {
height: 100px;
width: 100px;
padding-bottom: 20px;
float: left;
}
.img_2 {
height: 100px;
width: 100px;
padding-bottom: 20px;
float: left;
}
.block2 {
border-radius: 20px;
text-align: center;
height: 120px;
margin-left: 40px;
margin-top: 25px;
width: 425px;
color: white;
background: rgba(55, 55, 55, 0.7);
box-shadow: 0 0 20px rgb(220, 83, 246, 100);
filter: contrast(150%);
position: relative;
}
.block2 p {
font-size: 25px;
text-align: center;
}
.block2 hr {
height: 7px;
background-color: #7cd94f;
border: none;
box-shadow: 0 0 20px rgb(124,217,79);
margin: -10px 0 0 0;
filter: contrast(150%);
}
.block3 {
border: 3px solid;
border-radius: 20px;
position: relative;
float: right;
height: 267px;
width: 50%;
margin-top: 20px;
margin-right: 80px;
background-image: url(../img/5.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
box-shadow: 0 0 20px rgb(220, 83, 246, 100);
filter: contrast(150%);
}
.block4 {
border-radius: 20px;
width: 1485px;
height: 120px;
margin-left: 268px;
box-shadow: 0 0 20px rgb(220, 83, 246, 100);
filter: contrast(150%);
transform: translateY(10%);
}
.size1 {
position: relative;
font-size: 35px;
margin-left: 25px;
margin-top: 50px;
color: white;
top: 26%;
left: 5%;
transform: translateY(-50%);
}
.vl {
border-left: 6px solid #9cd94f;
height: 119px;
position: absolute;
left: 49%;
transform: skew(-25deg);
box-shadow: 0 0 20px rgb(124,217,79);
filter: contrast(150%);
}
.size2 {
float: right;
font-size: 35px;
position: relative;
margin-right: 25px;
margin-top: -10px;
color: white;
position: relative;
top: 56%;
right: 24%;
transform: translateY(-50%);
}
table {
box-shadow: 0 0 20px rgb(220, 83, 246, 100);
filter: contrast(150%);
background: rgba(55, 55, 55, 0.3);
color: white;
transform: translate(-56.5%, 15%);
}
table td {
text-align: center;
}
table th {
text-align: center;
}
.progress {
position: relative;
text-align: center;
top: 50%;
left: 25%;
transform: translateY(-50%);
width: 50%;
background: rgba(55, 55, 55, 0.3);
filter: contrast(150%);
}
.enter {
filter: contrast(150%);
border: 1px solid;
background-color: #5d09af;
}
.enter span {
position: relative;
left: 15px;
transform: translateX(-50%);
}
.sidebar {
width: 250px;
background-color: #373737;
font-size: 17px;
float: left;
background: rgba(55, 55, 55, 0.3);
height: 100%;
}
.sidebar a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
}
.sidebar .active {
background-color: #4f4e4e;
}
.sidebar a:hover {
background-color: #4f4e4e;
color: white;
}
.menu {
border: 3px solid;
text-align: center;
width: 30%;
height: 20%;
position: fixed;
display: block;
float: left;
margin-top: 5%;
color: black;
}
.menu_1 {
float:right;
}
.menu p {
color: white;
margin-top: 10%;
font-size: 60px;
}
.title {
margin-left: 160px;
margin-bottom: 50px;
}
.awp_image1 {
width: 20%;
padding: 15px;
margin-top: 15px;
}
.awp_image2 {
width: 20%;
float: right;
padding: 15px;
margin-top: 15px;
}
footer {
background-color: #373737;
color: white;
text-align: center;
min-height: 100px;
background: rgba(55, 55, 55, 0.3);
height: 100px;
}
footer p {
text-align: center;
padding: 40px 0 18px 0;
}
.wrapper {
min-height: calc(70vh -50%);
}