- Add lobby html css
This commit is contained in:
madegryc pc
2024-08-18 00:05:15 +02:00
parent fe58722e91
commit 7c9414eb47
10 changed files with 160 additions and 3 deletions

View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* home.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
/* Updated: 2024/08/14 18:55:27 by madegryc ### ########.fr */
/* Updated: 2024/08/17 23:27:37 by marvin ### ########.fr */
/* */
/* ************************************************************************** */
@ -234,7 +234,7 @@ body {
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(10px);
background-color: rgba(0, 0, 0);
background-color: #020202;
padding: 10px;
width: 100%;
opacity: 0;

36
site/lobby/index.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Lobby</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' href='style.css'>
<script type="module" src='main.js'></script>
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div id="topBar">
<div class="search-container">
<input type="text" placeholder="Search..." class="search-input">
<button class="search-button">Search</button>
</div>
</div>
<div class="main">
<div class="game-mode">
<div class="mode-card">
<p>Multiplayer local</p>
</div>
</div>
<div class="skin-select">
<div id="bar">
</div>
<div id="goal">
</div>
</div>
</div>
</body>

121
site/lobby/style.css Normal file
View File

@ -0,0 +1,121 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* style.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/17 22:12:26 by marvin #+# #+# */
/* Updated: 2024/08/17 22:12:26 by marvin ### ########.fr */
/* */
/* ************************************************************************** */
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
body {
border: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #020202;
user-select: none;
}
.main{
padding-top: 80px;
padding-inline: 150px;
display: flex;
flex-direction: row;
gap: 2.6rem;
}
.skin-select{
/* padding-block: 25px; */
width: 40%;
}
#bar{
margin: 15px;
width: 250px;
height: 250px;
border: 5px solid white;
}
#goal{
margin: 15px;
width: 250px;
height: 250px;
border: 5px solid white;
}
#topBar {
margin-block: 25px;
padding: 0;
padding-inline: 50px;
display: flex;
background-color: #020202;
gap: 2rem;
align-items: center;
justify-content: center;
inset-inline: 0;
top: 0;
}
.game-mode {
display: flex;
justify-content: flex-start;
}
.mode-card {
background-color: #d3d3d3;
color: #000;
padding: 20px;
width: 300px;
height: 550px;
display: flex;
justify-content: center;
font-size: 1.2em;
transition: transform 0.3s ease;
}
.mode-card:hover {
transform: scale(1.05);
}
.search-container {
display: flex;
align-items: center;
width: 40%;
}
.search-input {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
font-size: 16px;
outline: none;
}
.search-input:focus {
border-color: white;
}
.search-button {
padding: 10px 20px;
border: 2px solid white;
background-color: #272727;
color: white;
cursor: pointer;
font-size: 16px;
}
.search-button:hover {
background-color: #202020;
border-color: #c4c4c4;
}