style: autoformatting

This commit is contained in:
Laureηt 2022-05-27 14:30:57 +02:00
parent a957027656
commit 1939f8df0c
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
8 changed files with 396 additions and 338 deletions

View file

@ -1,101 +1,121 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Popup Login Form Design | CodingNepal</title>
<link rel="stylesheet" href="utils.css" />
<link rel="stylesheet" href="title-bar.css" />
<link rel="stylesheet" href="login-signup.css" />
<link rel="stylesheet" href="pixels.css" />
<script>
function toggleLoginSignup(l, s) {
document.getElementById("show-login").checked = l;
document.getElementById("show-signup").checked = s;
}
</script>
<script type="text/javascript" src="pixels.js"></script>
</head>
<head> <body>
<meta charset="utf-8"> <div class="title-bar">
<title>Popup Login Form Design | CodingNepal</title> <div class="title"><img src="logo.png" /> Pixels</div>
<link rel="stylesheet" href="utils.css"> <div class="profil">
<link rel="stylesheet" href="title-bar.css"> <input type="checkbox" id="show-login" class="show" />
<link rel="stylesheet" href="login-signup.css"> <div onclick="toggleLoginSignup(true, false)" class="login-btn">
<link rel="stylesheet" href="pixels.css">
<script>
function toggleLoginSignup(l, s) {
document.getElementById("show-login").checked = l;
document.getElementById("show-signup").checked = s;
}
</script>
<script type="text/javascript" src="pixels.js"></script>
</head>
<body>
<div class="title-bar">
<div class="title">
<img src="logo.png" /> Pixels
</div>
<div class="profil">
<input type="checkbox" id="show-login" class="show">
<div onclick="toggleLoginSignup(true, false)" class="login-btn">Login</div>
<input type="checkbox" id="show-signup" class="show">
<div onclick="toggleLoginSignup(false, true)" class="signup-btn">Signup</div>
<div class="login-container">
<div onclick="toggleLoginSignup(false, false)" class="close-btn" title="close">X</div>
<div class="text">
Login Login
</div> </div>
<form action="api/user/login" method="post">
<div class="data">
<label>Nickname</label>
<input type="text" name="username" required>
</div>
<div class="data">
<label>Password</label>
<input type="password" name="password" required>
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<div class="btn">
<button type="submit">login</button>
</div>
<div class="signup-login-link">
Not a member?
<div class="href" onclick="toggleLoginSignup(false, true)">Signup now</div>
</div>
</form>
</div>
<div class="signup-container"> <input type="checkbox" id="show-signup" class="show" />
<div onclick="toggleLoginSignup(false, false)" class="close-btn" title="close">X</div> <div
<div class="text"> onclick="toggleLoginSignup(false, true)"
class="signup-btn"
>
Signup Signup
</div> </div>
<form action="api/user/signup" method="post">
<div class="data"> <div class="login-container">
<label>Nickname</label> <div
<input type="text" name="username" required> onclick="toggleLoginSignup(false, false)"
class="close-btn"
title="close"
>
X
</div> </div>
<div class="data"> <div class="text">Login</div>
<label>Password</label> <form action="api/user/login" method="post">
<input type="password" name="password" required> <div class="data">
<label>Nickname</label>
<input type="text" name="username" required />
</div>
<div class="data">
<label>Password</label>
<input type="password" name="password" required />
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<div class="btn">
<button type="submit">login</button>
</div>
<div class="signup-login-link">
Not a member?
<div
class="href"
onclick="toggleLoginSignup(false, true)"
>
Signup now
</div>
</div>
</form>
</div>
<div class="signup-container">
<div
onclick="toggleLoginSignup(false, false)"
class="close-btn"
title="close"
>
X
</div> </div>
<div class="btn"> <div class="text">Signup</div>
<button type="submit">signup</button> <form action="api/user/signup" method="post">
</div> <div class="data">
<div class="signup-login-link"> <label>Nickname</label>
Already a member? <input type="text" name="username" required />
<div class="href" onclick="toggleLoginSignup(true, false)">Login now</div> </div>
</div> <div class="data">
</form> <label>Password</label>
<input type="password" name="password" required />
</div>
<div class="btn">
<button type="submit">signup</button>
</div>
<div class="signup-login-link">
Already a member?
<div
class="href"
onclick="toggleLoginSignup(true, false)"
>
Login now
</div>
</div>
</form>
</div>
</div> </div>
</div> </div>
</div> <div class="pixel-container">
<div class="pixel-container"> <table id="pixelTable">
<table id="pixelTable"> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> </table>
</table> </div>
</div> </body>
</body>
</html> </html>

View file

@ -1,218 +1,260 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <title>Popup Login Form Design | CodingNepal</title>
<title>Popup Login Form Design | CodingNepal</title> <link rel="stylesheet" href="utils.css" />
<link rel="stylesheet" href="utils.css"> <link rel="stylesheet" href="title-bar.css" />
<link rel="stylesheet" href="title-bar.css"> <link rel="stylesheet" href="profil.css" />
<link rel="stylesheet" href="profil.css"> <link rel="stylesheet" href="pixels.css" />
<link rel="stylesheet" href="pixels.css"> <link rel="stylesheet" href="wallet.css" />
<link rel="stylesheet" href="wallet.css"> <link rel="stylesheet" href="mypixel.css" />
<link rel="stylesheet" href="mypixel.css"> <link rel="stylesheet" href="buypixel.css" />
<link rel="stylesheet" href="buypixel.css"> <script>
<script> function setMenu() {
function setMenu() { if (document.getElementById("show-menu").checked) {
if (document.getElementById("show-menu").checked) { document.getElementById("show-menu").checked = false;
} else {
document.getElementById("show-menu").checked = true;
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = false;
document.getElementById("show-buypixel").checked = false;
document.getElementById("show-settings").checked = false;
}
}
function setWallet() {
document.getElementById("show-menu").checked = false; document.getElementById("show-menu").checked = false;
} else { document.getElementById("show-wallet").checked = true;
document.getElementById("show-menu").checked = true;
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = false; document.getElementById("show-mypixel").checked = false;
document.getElementById("show-buypixel").checked = false; document.getElementById("show-buypixel").checked = false;
document.getElementById("show-settings").checked = false; document.getElementById("show-settings").checked = false;
} }
} function setMypixel() {
function setWallet() { document.getElementById("show-menu").checked = false;
document.getElementById("show-menu").checked = false; document.getElementById("show-wallet").checked = false;
document.getElementById("show-wallet").checked = true; document.getElementById("show-mypixel").checked = true;
document.getElementById("show-mypixel").checked = false; document.getElementById("show-buypixel").checked = false;
document.getElementById("show-buypixel").checked = false; document.getElementById("show-settings").checked = false;
document.getElementById("show-settings").checked = false; }
} function setBuypixel() {
function setMypixel() { document.getElementById("show-menu").checked = false;
document.getElementById("show-menu").checked = false; document.getElementById("show-wallet").checked = false;
document.getElementById("show-wallet").checked = false; document.getElementById("show-mypixel").checked = false;
document.getElementById("show-mypixel").checked = true; document.getElementById("show-buypixel").checked = true;
document.getElementById("show-buypixel").checked = false; document.getElementById("show-settings").checked = false;
document.getElementById("show-settings").checked = false; }
} function setSettings() {
function setBuypixel() { document.getElementById("show-menu").checked = false;
document.getElementById("show-menu").checked = false; document.getElementById("show-wallet").checked = false;
document.getElementById("show-wallet").checked = false; document.getElementById("show-mypixel").checked = false;
document.getElementById("show-mypixel").checked = false; document.getElementById("show-buypixel").checked = false;
document.getElementById("show-buypixel").checked = true; document.getElementById("show-settings").checked = true;
document.getElementById("show-settings").checked = false; }
} </script>
function setSettings() { <script type="text/javascript" src="pixels.js"></script>
document.getElementById("show-menu").checked = false; </head>
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = false;
document.getElementById("show-buypixel").checked = false;
document.getElementById("show-settings").checked = true;
}
</script>
<script type="text/javascript" src="pixels.js"></script>
</head>
<body> <body>
<div class="title-bar">
<div class="title"><img src="logo.png" /> Pixels</div>
<div class="profil">
<input type="checkbox" id="show-menu" class="show" />
<input type="checkbox" id="show-wallet" class="show" />
<input type="checkbox" id="show-mypixel" class="show" />
<input type="checkbox" id="show-buypixel" class="show" />
<input type="checkbox" id="show-settings" class="show" />
<div class="title-bar"> <label class="menu-btn" onclick="setMenu()">Menu</label>
<div class="title"> <div class="username">My name is Amogus</div>
<img src="logo.png" /> Pixels
</div>
<div class="profil">
<input type="checkbox" id="show-menu" class="show">
<input type="checkbox" id="show-wallet" class="show">
<input type="checkbox" id="show-mypixel" class="show">
<input type="checkbox" id="show-buypixel" class="show">
<input type="checkbox" id="show-settings" class="show">
<label class="menu-btn" onclick="setMenu()">Menu</label> <div class="menu-container">
<div class="username">My name is Amogus</div> <label for="show-menu" class="close-btn" title="close"
>X</label
>
<div class="text">Menu</div>
<div>
<label class="wallet-btn" onclick="setWallet()"
>Wallet</label
>
<label class="mypixel-btn" onclick="setMypixel()"
>My pixels</label
>
<label class="buypixel-btn" onclick="setBuypixel()"
>Buy pixel</label
>
<label class="settings-btn" onclick="setSettings()"
>Settings</label
>
</div>
</div>
<div class="menu-container"> <div class="wallet-container">
<label for="show-menu" class="close-btn" title="close">X</label> <label for="show-wallet" class="close-btn" title="close"
<div class="text"> >X</label
Menu >
</div> <div class="text">Wallet</div>
<div> <br />
<label class="wallet-btn" onclick="setWallet()">Wallet</label>
<label class="mypixel-btn" onclick="setMypixel()">My pixels</label>
<label class="buypixel-btn" onclick="setBuypixel()">Buy pixel</label>
<label class="settings-btn" onclick="setSettings()">Settings</label>
</div>
</div>
<div class="wallet-container">
<label for="show-wallet" class="close-btn" title="close">X</label>
<div class="text">
Wallet
</div>
<br />
<div class="solde"></div>
<form action="pay" method="post">
<div class="data">
<label>Amount</label>
<input type="number" name="amount" required>
</div>
<div class="data">
<label>Card number</label>
<input type="number" name="card" required>
</div>
<div class="data">
<label>Expiry date</label>
<input type="month" name="date" required>
</div>
<div class="btn">
<button type="submit">Pay</button>
</div>
</form>
</div>
<div class="mypixel-container">
<label for="show-mypixel" class="close-btn" title="close">X</label>
<div class="text">
My pixels
</div>
<br />
<div class="solde"></div>
<div id="color"></div>
<div id="pixel-index"></div>
(<div id="user-pixel-index"></div>)
<form action="modify" method="post">
<div class="data">
<label>Price</label>
<input type="number" name="price" id="price" required>
</div>
<div class="data">
<label>Red</label>
<input type="range" name="red" id="red" oninput="updateUserColorPreview()" required>
</div>
<div class="data">
<label>Green</label>
<input type="range" name="green" id="green" oninput="updateUserColorPreview()" required>
</div>
<div class="data">
<label>Blue</label>
<input type="range" name="blue" id="blue" oninput="updateUserColorPreview()" required>
</div>
<div class="data">
<label>Description</label>
<input type="text" name="desc" id="description" required>
</div>
<div class="btn">
<button type="submit">Modify</button>
</div>
</form>
<div>
<div class="btn">
<button onclick="previousUserPixel()">Previous</button>
</div>
<div class="btn">
<button onclick="nextUserPixel()">Next</button>
</div>
</div>
</div>
<div class="buypixel-container">
<label for="show-buypixel" class="close-btn" title="close">X</label>
<div class="text">
Buy pixel
</div>
<br />
<form action="modify" method="post">
<div class="solde"></div> <div class="solde"></div>
<div class="data"> <form action="pay" method="post">
<label>Index</label> <div class="data">
<input type="number" name="index" id="buy-pixel-index" required> <label>Amount</label>
</div> <input type="number" name="amount" required />
<div class="data"> </div>
<label>Owner</label> <div class="data">
<div id="buy-pixel-owner"></div> <label>Card number</label>
</div> <input type="number" name="card" required />
<div class="data"> </div>
<label>Description</label> <div class="data">
<div id="buy-pixel-description"></div> <label>Expiry date</label>
</div> <input type="month" name="date" required />
<div class="data"> </div>
<label>Price</label> <div class="btn">
<div id="buy-pixel-price"></div> <button type="submit">Pay</button>
</div> </div>
<div class=" btn"> </form>
<button type="submit">Buy</button> </div>
</div> <div class="mypixel-container">
</form> <label for="show-mypixel" class="close-btn" title="close"
<div> >X</label
<div class="btn"> >
<button onclick="previousBuyPixel()">Previous</button> <div class="text">My pixels</div>
</div> <br />
<div class="btn"> <div class="solde"></div>
<button onclick="nextBuyPixel()">Next</button> <div id="color"></div>
<div id="pixel-index"></div>
(
<div id="user-pixel-index"></div>
)
<form action="modify" method="post">
<div class="data">
<label>Price</label>
<input
type="number"
name="price"
id="price"
required
/>
</div>
<div class="data">
<label>Red</label>
<input
type="range"
name="red"
id="red"
oninput="updateUserColorPreview()"
required
/>
</div>
<div class="data">
<label>Green</label>
<input
type="range"
name="green"
id="green"
oninput="updateUserColorPreview()"
required
/>
</div>
<div class="data">
<label>Blue</label>
<input
type="range"
name="blue"
id="blue"
oninput="updateUserColorPreview()"
required
/>
</div>
<div class="data">
<label>Description</label>
<input
type="text"
name="desc"
id="description"
required
/>
</div>
<div class="btn">
<button type="submit">Modify</button>
</div>
</form>
<div>
<div class="btn">
<button onclick="previousUserPixel()">
Previous
</button>
</div>
<div class="btn">
<button onclick="nextUserPixel()">Next</button>
</div>
</div>
</div>
<div class="buypixel-container">
<label for="show-buypixel" class="close-btn" title="close"
>X</label
>
<div class="text">Buy pixel</div>
<br />
<form action="modify" method="post">
<div class="solde"></div>
<div class="data">
<label>Index</label>
<input
type="number"
name="index"
id="buy-pixel-index"
required
/>
</div>
<div class="data">
<label>Owner</label>
<div id="buy-pixel-owner"></div>
</div>
<div class="data">
<label>Description</label>
<div id="buy-pixel-description"></div>
</div>
<div class="data">
<label>Price</label>
<div id="buy-pixel-price"></div>
</div>
<div class="btn">
<button type="submit">Buy</button>
</div>
</form>
<div>
<div class="btn">
<button onclick="previousBuyPixel()">
Previous
</button>
</div>
<div class="btn">
<button onclick="nextBuyPixel()">Next</button>
</div>
</div> </div>
</div> </div>
</div>
<div class="settings-container"> <div class="settings-container">
<label for="show-settings" class="close-btn" title="close">X</label> <label for="show-settings" class="close-btn" title="close"
<div class="text"> >X</label
Settings >
<div class="text">Settings</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="pixel-container">
<div class="pixel-container"> <table id="pixelTable">
<table id="pixelTable"> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> </table>
</table> </div>
</div> </body>
</body>
</html> </html>

View file

@ -15,11 +15,11 @@
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-login:checked~.login-container { #show-login:checked ~ .login-container {
display: block; display: block;
} }
#show-signup:checked~.signup-container { #show-signup:checked ~ .signup-container {
display: block; display: block;
} }

View file

@ -11,17 +11,17 @@ var userJSON;
const updatePixelsJSON = async () => { const updatePixelsJSON = async () => {
var reponse = await fetch(urlPixel); var reponse = await fetch(urlPixel);
pixelsJSON = await reponse.json(); pixelsJSON = await reponse.json();
} };
const updateUserJSON = async () => { const updateUserJSON = async () => {
var reponse = await fetch(urlUser); var reponse = await fetch(urlUser);
userJSON = await reponse.json(); userJSON = await reponse.json();
} };
function updateSolde() { function updateSolde() {
var elems = document.getElementsByClassName("solde"); var elems = document.getElementsByClassName("solde");
elems.forEach(el => { elems.forEach((el) => {
el.innerHTML = userJSON.solde + '₿'; el.innerHTML = userJSON.solde + "₿";
}); });
} }
@ -32,9 +32,6 @@ setInterval(updateSolde, 10000);
setInterval(updateUserJSON, 10000); setInterval(updateUserJSON, 10000);
setInterval(updatePixelsJSON, 10000); setInterval(updatePixelsJSON, 10000);
//////////////// ////////////////
// Pixel grid // // Pixel grid //
//////////////// ////////////////
@ -53,19 +50,22 @@ function setPixels() {
var row = table.rows[row_id]; var row = table.rows[row_id];
row.innerHTML += row.innerHTML +=
'<td class="pixel" style="background:#' + pixel.color + '">' + '<td class="pixel" style="background:#' +
'<div class="info-pixel">' + pixel.color +
'<div class="username">' + pixel.owner_username + '</div>' + '">' +
'<div class="description">' + pixel.description + '</div>' + '<div class="info-pixel">' +
'</div>' + '<div class="username">' +
'<div class="patch-shadow"></div>' + pixel.owner_username +
'</td>'; "</div>" +
'<div class="description">' +
pixel.description +
"</div>" +
"</div>" +
'<div class="patch-shadow"></div>' +
"</td>";
} }
} }
////////////////////// //////////////////////
// Modify my pixels // // Modify my pixels //
////////////////////// //////////////////////
@ -73,11 +73,13 @@ function setPixels() {
function hexToRgb(hex) { function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
console.log(result); console.log(result);
return result ? { return result
r: parseInt(result[1], 16), ? {
g: parseInt(result[2], 16), r: parseInt(result[1], 16),
b: parseInt(result[3], 16) g: parseInt(result[2], 16),
} : null; b: parseInt(result[3], 16),
}
: null;
} }
// Initialize pixel index // Initialize pixel index
@ -93,7 +95,9 @@ function initUserPixel() {
// Compute next pixel index // Compute next pixel index
function nextUserPixel() { function nextUserPixel() {
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML); var user_pixel_index = parseInt(
document.getElementById("user-pixel-index").innerHTML
);
user_pixel_index++; user_pixel_index++;
if (user_pixel_index > userJSON.pixels.length - 1) { if (user_pixel_index > userJSON.pixels.length - 1) {
@ -110,7 +114,9 @@ function nextUserPixel() {
// Compute previous pixel index // Compute previous pixel index
function previousUserPixel() { function previousUserPixel() {
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML); var user_pixel_index = parseInt(
document.getElementById("user-pixel-index").innerHTML
);
user_pixel_index--; user_pixel_index--;
if (user_pixel_index < 0) { if (user_pixel_index < 0) {
@ -153,9 +159,9 @@ function updatePixelPreview() {
// Update preview's color // Update preview's color
function updateUserColorPreview() { function updateUserColorPreview() {
var red = document.getElementById("red").value * 255 / 100; var red = (document.getElementById("red").value * 255) / 100;
var green = document.getElementById("green").value * 255 / 100; var green = (document.getElementById("green").value * 255) / 100;
var blue = document.getElementById("blue").value * 255 / 100; var blue = (document.getElementById("blue").value * 255) / 100;
var color = document.getElementById("color"); var color = document.getElementById("color");
color.style.background = "rgb(" + red + "," + green + "," + blue + ")"; color.style.background = "rgb(" + red + "," + green + "," + blue + ")";
@ -163,10 +169,6 @@ function updateUserColorPreview() {
initUserPixel(); initUserPixel();
/////////////// ///////////////
// Buy pixel // // Buy pixel //
/////////////// ///////////////
@ -214,7 +216,8 @@ function previousBuyPixel() {
function updatePixelBuyPreview(pixel) { function updatePixelBuyPreview(pixel) {
document.getElementById("buy-pixel-index").value = pixel.id - 1; document.getElementById("buy-pixel-index").value = pixel.id - 1;
document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username; document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username;
document.getElementById("buy-pixel-description").innerHTML = pixel.description; document.getElementById("buy-pixel-description").innerHTML =
pixel.description;
document.getElementById("buy-pixel-price").innerHTML = pixel.price; document.getElementById("buy-pixel-price").innerHTML = pixel.price;
} }

View file

@ -12,10 +12,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-menu:checked~.menu-container { #show-menu:checked ~ .menu-container {
display: block; display: block;
} }
@ -50,10 +49,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-wallet:checked~.wallet-container { #show-wallet:checked ~ .wallet-container {
display: block; display: block;
} }
@ -83,10 +81,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-mypixel:checked~.mypixel-container { #show-mypixel:checked ~ .mypixel-container {
display: block; display: block;
} }
@ -116,10 +113,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-buypixel:checked~.buypixel-container { #show-buypixel:checked ~ .buypixel-container {
display: block; display: block;
} }
@ -135,7 +131,6 @@
color: #3498db; color: #3498db;
} }
.settings-container { .settings-container {
--width: 410px; --width: 410px;
display: none; display: none;
@ -150,10 +145,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-settings:checked~.settings-container { #show-settings:checked ~ .settings-container {
display: block; display: block;
} }
@ -169,7 +163,6 @@
color: #3498db; color: #3498db;
} }
.wallet-btn, .wallet-btn,
.mypixel-btn, .mypixel-btn,
.buypixel-btn, .buypixel-btn,

View file

@ -3,7 +3,7 @@
padding: 0; padding: 0;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Poppins', sans-serif; font-family: "Poppins", sans-serif;
} }
body { body {