I have a list of servers in a scroll container name servers and the top of the list is hidden under the navbar:
HTML:
<div class="servers"></div>
CSS:
.servers{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 80%;
width: 100%;
float: bottom;
background-color: #282C34;
position: absolute;
bottom: 0;
border-top: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
overflow-y: scroll;
overflow-x: hidden;
}
This list starts empty. divs are added to this list of servers when you use the site. When too many divs are added, scrolling starts. But the problem is that the top objects are hidden under the scroll and you can no longer see them when the scroll bar is at the top.
Here is CSS of the divs to be added:
.server{
width: 70%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #4f4e4e;
align-items: center;
border-bottom: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
padding: 10px;
transition: ease-in 0.2s;
border-radius: 10px;
/**/
margin-top: 10px;
}
In the example below, I have manually inserted objects:
html,
body{
padding: 0;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
/*darker then 707AF7*/
background-color: #282C34;
height: 100%;
width: 100%;
}
.head{
background-color: #3E3E3E;
height: 60px;
width: 100%;
float: bottom;
border-bottom: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
}
textarea{
width: 100%;
height: 100%;
background-color: transparent;
color: #fff;
border: none;
outline: none;
resize: none;
}
.navbar{
/*grid*/
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "home home home home";
grid-gap: 10px;
height: 60px;
width: 100%;
float: top;
background-color: #3E3E3E;
border-bottom: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
padding: 10px;
}
.navbarBtn{
background-color: transparent;
outline: none;
cursor: pointer;
color: #fff;
font-size: 20px;
font-weight: bold;
border: 0 solid gray;
border-radius: 10px;
padding: 0;
margin: 0;
transition: ease-in 0.2s;
}
.navbarBtn:hover{
/*move text up*/
transform: translateY(-5px);
}
.navbarBtne{
background-color: transparent;
outline: none;
cursor: pointer;
color: #ff0000;
font-size: 25px;
font-weight: bold;
border: 0 solid gray;
border-radius: 10px;
padding: 0;
margin: 0;
transition: ease-in 0.2s;
/*deactivate click */
pointer-events: none;
}
.servers{
/*servers is a list were each record is displayed under eachother. The value of the list are divs that are width: 100%*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*height 100% - 60px*/
height: 80%;
width: 100%;
float: bottom;
background-color: #282C34;
position: absolute;
bottom: 0;
border-top: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
overflow-y: scroll;
overflow-x: hidden;
}
/*
Box boder: +
+++++++++++++++++++++++++
{serverImage}{4 spaces}{ServerName}{4 spaces}{Players}{6 spaces}{ManageButton}{2 spaces}{connectButton}
*/
.server{
width: 70%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #4f4e4e;
align-items: center;
border-bottom: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
padding: 10px;
transition: ease-in 0.2s;
border-radius: 10px;
/**/
margin-top: 10px;
}
.serverIcon{
width: 50px;
height: 50px;
background-color: #282C34;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
border-radius: 100%;
}
.serverName{
font-size: 20px;
font-weight: bold;
color: #ffffff;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-20px);
fit: cover;
white-space: nowrap;
}
.players{
font-size: 15px;
color: #ffffff;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-10px);
}
.status{
font-size: 15px;
color: #ffffff;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(10px);
}
.statusValue{
font-size: 15px;
color: lightgreen;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-20px);
}
.sync{
font-size: 15px;
color: #282C34;
margin: 0;
width: 32px;
height: 32px;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-20px);
background: transparent;
border: none;
}
svg{
pointer-events: all;
cursor: pointer;
fill: #ffffff;
}
.manage{
font-size: 15px;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(10px);
width: 120px;
height: 40px;
background-color: #282C34;
border: none;
border-radius: 10px;
color: #fff;
font-weight: bold;
outline: none;
cursor: pointer;
box-shadow: 3px 3px 2px #1E2228;
}
.manage:hover{
transform: translateX(10px) scale(1.1);
box-shadow: 0 0 0 #1E2228;
}
.connect{
font-size: 15px;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-20px);
width: 120px;
height: 40px;
/*make button beautiful*/
background-color: #282C34;
border: none;
border-radius: 10px;
color: #fff;
font-weight: bold;
outline: none;
cursor: pointer;
box-shadow: 3px 3px 2px #1E2228;
}
.connect:hover{
transform: translateX(-20px) scale(1.1);
box-shadow: 0 0 0 #1E2228;
}
.search{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
width: 100%;
padding: 10px;
transition: ease-in 0.2s;
border-radius: 10px;
margin-top: 10px;
}
#search{
width: 90%;
height: 100%;
background-color: #3E3E3E;
border: none;
border-radius: 10px;
color: #fff;
font-weight: bold;
outline: none;
cursor: pointer;
box-shadow: 3px 3px 2px #1E2228;
transform: translateY(10px);
margin-left: -45px;
text-align: center;
font-size: 20px;
}
@media screen and (max-width: 600px) {
.navbarBtne{
font-size: 20px;
}
.servers{
width: 100%;
}
.server{
width: 100%;
}
.serverIcon{
width: 40px;
height: 40px;
}
.serverName{
font-size: 15px;
}
.players{
font-size: 12px;
}
.status{
font-size: 12px;
}
.statusValue{
font-size: 12px;
}
.sync{
font-size: 12px;
}
.manage{
font-size: 12px;
width: 100px;
}
.connect{
font-size: 12px;
width: 100px;
}
.search{
height: 40px;
}
#search{
font-size: 15px;
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Island</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<div class="head">
<div class="navbar">
<button class="navbarBtn">Server</button>
<button class="navbarBtn">Version</button>
<button class="navbarBtn">Settings</button>
<button class="navbarBtne" id="version"></button>
</div>
</div>
<div class="search">
<input type="text" placeholder="Search" id="search" onkeyup="search()">
</div>
<div class="servers">
<div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 0</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: green;">Online</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 2</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 3</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 4</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 5</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 6</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 7</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 8</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 9</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 10</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 11</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"></div>
</div>
</body>
<script src="index.js"></script>
</html>Advertisement
Answer
A similar problem can be solved by using pseudo-elements on the container (for center alignment in the direction instead of justify-content: center) with the flex: 1 1 0 property. Example below:
html,
body{
padding: 0;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
/*darker then 707AF7*/
background-color: #282C34;
height: 100%;
width: 100%;
}
.head{
background-color: #3E3E3E;
height: 60px;
width: 100%;
float: bottom;
border-bottom: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
}
textarea{
width: 100%;
height: 100%;
background-color: transparent;
color: #fff;
border: none;
outline: none;
resize: none;
}
.navbar{
/*grid*/
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "home home home home";
grid-gap: 10px;
height: 60px;
width: 100%;
float: top;
background-color: #3E3E3E;
border-bottom: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
padding: 10px;
}
.navbarBtn{
background-color: transparent;
outline: none;
cursor: pointer;
color: #fff;
font-size: 20px;
font-weight: bold;
border: 0 solid gray;
border-radius: 10px;
padding: 0;
margin: 0;
transition: ease-in 0.2s;
}
.navbarBtn:hover{
/*move text up*/
transform: translateY(-5px);
}
.navbarBtne{
background-color: transparent;
outline: none;
cursor: pointer;
color: #ff0000;
font-size: 25px;
font-weight: bold;
border: 0 solid gray;
border-radius: 10px;
padding: 0;
margin: 0;
transition: ease-in 0.2s;
/*deactivate click */
pointer-events: none;
}
.servers{
/*servers is a list were each record is displayed under eachother. The value of the list are divs that are width: 100%*/
display: flex;
flex-direction: column;
/* justify-content: center; -- use pseudo-element on nested elements instead !!! */
align-items: center;
/*height 100% - 60px*/
height: 80%;
width: 100%;
float: bottom;
background-color: #282C34;
position: absolute;
bottom: 0;
border-top: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
overflow-y: scroll;
overflow-x: hidden;
}
/* pseudo elements are used for correct alignment in the center */
.servers:after,.servers:before {
content: '';
flex: 1 1 0;
}
/*
Box boder: +
+++++++++++++++++++++++++
{serverImage}{4 spaces}{ServerName}{4 spaces}{Players}{6 spaces}{ManageButton}{2 spaces}{connectButton}
*/
.server{
width: 70%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #4f4e4e;
align-items: center;
border-bottom: 2px solid #1E2228;
box-shadow: 3px 3px 2px #1E2228;
padding: 10px;
transition: ease-in 0.2s;
border-radius: 10px;
/**/
margin-top: 10px;
}
.serverIcon{
width: 50px;
height: 50px;
background-color: #282C34;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
border-radius: 100%;
}
.serverName{
font-size: 20px;
font-weight: bold;
color: #ffffff;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-20px);
fit: cover;
white-space: nowrap;
}
.players{
font-size: 15px;
color: #ffffff;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-10px);
}
.status{
font-size: 15px;
color: #ffffff;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(10px);
}
.statusValue{
font-size: 15px;
color: lightgreen;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-20px);
}
.sync{
font-size: 15px;
color: #282C34;
margin: 0;
width: 32px;
height: 32px;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-20px);
background: transparent;
border: none;
}
svg{
pointer-events: all;
cursor: pointer;
fill: #ffffff;
}
.manage{
font-size: 15px;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(10px);
width: 120px;
height: 40px;
background-color: #282C34;
border: none;
border-radius: 10px;
color: #fff;
font-weight: bold;
outline: none;
cursor: pointer;
box-shadow: 3px 3px 2px #1E2228;
}
.manage:hover{
transform: translateX(10px) scale(1.1);
box-shadow: 0 0 0 #1E2228;
}
.connect{
font-size: 15px;
margin: 0;
padding: 0;
transition: ease-in 0.2s;
/*move 10px up*/
transform: translateX(-20px);
width: 120px;
height: 40px;
/*make button beautiful*/
background-color: #282C34;
border: none;
border-radius: 10px;
color: #fff;
font-weight: bold;
outline: none;
cursor: pointer;
box-shadow: 3px 3px 2px #1E2228;
}
.connect:hover{
transform: translateX(-20px) scale(1.1);
box-shadow: 0 0 0 #1E2228;
}
.search{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
width: 100%;
padding: 10px;
transition: ease-in 0.2s;
border-radius: 10px;
margin-top: 10px;
}
#search{
width: 90%;
height: 100%;
background-color: #3E3E3E;
border: none;
border-radius: 10px;
color: #fff;
font-weight: bold;
outline: none;
cursor: pointer;
box-shadow: 3px 3px 2px #1E2228;
transform: translateY(10px);
margin-left: -45px;
text-align: center;
font-size: 20px;
}
@media screen and (max-width: 600px) {
.navbarBtne{
font-size: 20px;
}
.servers{
width: 100%;
}
.server{
width: 100%;
}
.serverIcon{
width: 40px;
height: 40px;
}
.serverName{
font-size: 15px;
}
.players{
font-size: 12px;
}
.status{
font-size: 12px;
}
.statusValue{
font-size: 12px;
}
.sync{
font-size: 12px;
}
.manage{
font-size: 12px;
width: 100px;
}
.connect{
font-size: 12px;
width: 100px;
}
.search{
height: 40px;
}
#search{
font-size: 15px;
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Island</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<div class="head">
<div class="navbar">
<button class="navbarBtn">Server</button>
<button class="navbarBtn">Version</button>
<button class="navbarBtn">Settings</button>
<button class="navbarBtne" id="version"></button>
</div>
</div>
<div class="search">
<input type="text" placeholder="Search" id="search" onkeyup="search()">
</div>
<div class="servers">
<div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 0</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: green;">Online</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"><img class="serverIcon" src="https://img.gommehd.net/512x512/logo.png"><a class="serverName">Server 1</a><a class="players">Players: 25000/100000</a><a class="status">Status: <a class="statusValue" style="color: red;">Offline</a></a><button class="sync"><svg class="icon"><svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"></path>
</svg></svg></button><button class="manage">Manage</button><button class="connect">Connect</button></div><div class="server" style="display: flex;"></div>
</div>
</body>
<script src="index.js"></script>
</html>