Merge branch 'master' of git.inpt.fr:tocard-inc/enseeiht/projet-web
This commit is contained in:
Laureηt
commit
abbefbbdd3
BIN
.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pix.scssc
Normal file
BIN
.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pix.scssc
Normal file
Binary file not shown.
BIN
.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pixels.cssc
Normal file
BIN
.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pixels.cssc
Normal file
Binary file not shown.
811
src/front/index.html
Normal file
811
src/front/index.html
Normal file
|
|
@ -0,0 +1,811 @@
|
|||
<!DOCTYPE html>
|
||||
<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">
|
||||
<link rel="stylesheet" href="pix.css">
|
||||
<script>
|
||||
function toggleLoginSignup(l, s) {
|
||||
document.getElementById("show-login").checked = l;
|
||||
document.getElementById("show-signup").checked = s;
|
||||
}
|
||||
</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">
|
||||
<label for="show-login" class="login-btn">Login</label>
|
||||
|
||||
<input type="checkbox" id="show-signup" class="show">
|
||||
<label for="show-signup" class="signup-btn">Signup</label>
|
||||
|
||||
<div class="login-container">
|
||||
<label for="show-login" class="close-btn" title="close">X</label>
|
||||
<div class="text">
|
||||
Login
|
||||
</div>
|
||||
<form action="#">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="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">
|
||||
<label for="show-signup" class="close-btn" title="close">X</label>
|
||||
<div class="text">
|
||||
Signup
|
||||
</div>
|
||||
<form action="#">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="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 class="pixel-container">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="pixel" id="r0c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r1c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r2c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r3c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r4c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r5c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r6c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r7c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r8c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r9c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
816
src/front/index2.html
Normal file
816
src/front/index2.html
Normal file
|
|
@ -0,0 +1,816 @@
|
|||
<!DOCTYPE html>
|
||||
<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="profil.css">
|
||||
<link rel="stylesheet" href="pixels.css">
|
||||
<link rel="stylesheet" href="pix.css">
|
||||
<script>
|
||||
function setMenu() {
|
||||
document.getElementById("show-menu").checked = true;
|
||||
document.getElementById("show-wallet").checked = false;
|
||||
document.getElementById("show-mypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = false;
|
||||
}
|
||||
function setWallet() {
|
||||
document.getElementById("show-menu").checked = false;
|
||||
document.getElementById("show-wallet").checked = true;
|
||||
document.getElementById("show-mypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = false;
|
||||
}
|
||||
function setMypixel() {
|
||||
document.getElementById("show-menu").checked = false;
|
||||
document.getElementById("show-wallet").checked = false;
|
||||
document.getElementById("show-mypixel").checked = true;
|
||||
document.getElementById("show-settings").checked = false;
|
||||
}
|
||||
function setSettings() {
|
||||
document.getElementById("show-menu").checked = false;
|
||||
document.getElementById("show-wallet").checked = false;
|
||||
document.getElementById("show-mypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = true;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<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-settings" class="show">
|
||||
|
||||
<label class="menu-btn" onclick="setMenu()">Menu</label>
|
||||
<div class="username">My name is Amogus</div>
|
||||
|
||||
<div class="menu-container">
|
||||
<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="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>
|
||||
</div>
|
||||
|
||||
<div class="mypixel-container">
|
||||
<label for="show-mypixel" class="close-btn" title="close">X</label>
|
||||
<div class="text">
|
||||
My pixels
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-container">
|
||||
<label for="show-settings" class="close-btn" title="close">X</label>
|
||||
<div class="text">
|
||||
Settings
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pixel-container">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="pixel" id="r0c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r0c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r1c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r1c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r2c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r2c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r3c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r3c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r4c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r4c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r5c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r5c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r6c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r6c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r7c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r7c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r8c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r8c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pixel" id="r9c0">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c1">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c2">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c3">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c4">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c5">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c6">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c7">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c8">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
<td class="pixel" id="r9c9">
|
||||
<div class="info-pixel">
|
||||
<div class="username">Moi</div>
|
||||
<div class="description">Petit desc oklm</div>
|
||||
</div>
|
||||
<div class="patch-shadow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
114
src/front/login-signup.css
Normal file
114
src/front/login-signup.css
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
.login-container,
|
||||
.signup-container {
|
||||
--width: 410px;
|
||||
display: none;
|
||||
visibility: visible;
|
||||
background: #fff;
|
||||
width: var(--width);
|
||||
margin: 30px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
left: calc(50% - var(--width) / 2);
|
||||
top: 30%;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
}
|
||||
|
||||
#show-login:checked~.login-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#show-signup:checked~.signup-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-container .close-btn,
|
||||
.signup-container .close-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-container .close-btn:hover,
|
||||
.signup-container .close-btn:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.login-container .text,
|
||||
.signup-container .text {
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-container form,
|
||||
.signup-container form {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.login-container form .data,
|
||||
.signup-container form .data {
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
form .data label {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
form .data input {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
font-size: 17px;
|
||||
border: 1px solid silver;
|
||||
}
|
||||
|
||||
form .data input:focus {
|
||||
border-color: #3498db;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
form .forgot-pass {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
form .forgot-pass a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
form .forgot-pass a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
form .btn {
|
||||
margin: 30px 0;
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 45px;
|
||||
}
|
||||
|
||||
form .btn button {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
|
||||
}
|
||||
|
||||
form .signup-login-link {
|
||||
text-align: center;
|
||||
}
|
||||
BIN
src/front/logo.png
Normal file
BIN
src/front/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
301
src/front/pix.css
Normal file
301
src/front/pix.css
Normal file
|
|
@ -0,0 +1,301 @@
|
|||
#r0c0 {
|
||||
background: #bd8226; }
|
||||
|
||||
#r0c1 {
|
||||
background: #6ad2bb; }
|
||||
|
||||
#r0c2 {
|
||||
background: #ac6816; }
|
||||
|
||||
#r0c3 {
|
||||
background: #f0e5ad; }
|
||||
|
||||
#r0c4 {
|
||||
background: #9b7ae2; }
|
||||
|
||||
#r0c5 {
|
||||
background: #fc4b16; }
|
||||
|
||||
#r0c6 {
|
||||
background: #493562; }
|
||||
|
||||
#r0c7 {
|
||||
background: #597b58; }
|
||||
|
||||
#r0c8 {
|
||||
background: #f68af4; }
|
||||
|
||||
#r0c9 {
|
||||
background: #29d291; }
|
||||
|
||||
#r1c0 {
|
||||
background: #a9da86; }
|
||||
|
||||
#r1c1 {
|
||||
background: #ee5ccc; }
|
||||
|
||||
#r1c2 {
|
||||
background: #c2170c; }
|
||||
|
||||
#r1c3 {
|
||||
background: #38cd2b; }
|
||||
|
||||
#r1c4 {
|
||||
background: #7c2adf; }
|
||||
|
||||
#r1c5 {
|
||||
background: #fcbc48; }
|
||||
|
||||
#r1c6 {
|
||||
background: #31aa29; }
|
||||
|
||||
#r1c7 {
|
||||
background: #b65dd9; }
|
||||
|
||||
#r1c8 {
|
||||
background: #cab125; }
|
||||
|
||||
#r1c9 {
|
||||
background: #b41569; }
|
||||
|
||||
#r2c0 {
|
||||
background: #308164; }
|
||||
|
||||
#r2c1 {
|
||||
background: #5fe6c4; }
|
||||
|
||||
#r2c2 {
|
||||
background: #740cd8; }
|
||||
|
||||
#r2c3 {
|
||||
background: #16340a; }
|
||||
|
||||
#r2c4 {
|
||||
background: #0f48dc; }
|
||||
|
||||
#r2c5 {
|
||||
background: #047373; }
|
||||
|
||||
#r2c6 {
|
||||
background: #a683c6; }
|
||||
|
||||
#r2c7 {
|
||||
background: #acf056; }
|
||||
|
||||
#r2c8 {
|
||||
background: #5261ea; }
|
||||
|
||||
#r2c9 {
|
||||
background: #1dc6ce; }
|
||||
|
||||
#r3c0 {
|
||||
background: #05f60b; }
|
||||
|
||||
#r3c1 {
|
||||
background: #a7e815; }
|
||||
|
||||
#r3c2 {
|
||||
background: #1ed985; }
|
||||
|
||||
#r3c3 {
|
||||
background: #7154e4; }
|
||||
|
||||
#r3c4 {
|
||||
background: #fbd471; }
|
||||
|
||||
#r3c5 {
|
||||
background: #3dccb7; }
|
||||
|
||||
#r3c6 {
|
||||
background: #b021a9; }
|
||||
|
||||
#r3c7 {
|
||||
background: #b2f2fc; }
|
||||
|
||||
#r3c8 {
|
||||
background: #2b21a2; }
|
||||
|
||||
#r3c9 {
|
||||
background: #65f83b; }
|
||||
|
||||
#r4c0 {
|
||||
background: #dfbfad; }
|
||||
|
||||
#r4c1 {
|
||||
background: #e99270; }
|
||||
|
||||
#r4c2 {
|
||||
background: #b36216; }
|
||||
|
||||
#r4c3 {
|
||||
background: #5d531b; }
|
||||
|
||||
#r4c4 {
|
||||
background: #76da95; }
|
||||
|
||||
#r4c5 {
|
||||
background: #79884f; }
|
||||
|
||||
#r4c6 {
|
||||
background: #e8dfc5; }
|
||||
|
||||
#r4c7 {
|
||||
background: #8971f4; }
|
||||
|
||||
#r4c8 {
|
||||
background: #1ceb1f; }
|
||||
|
||||
#r4c9 {
|
||||
background: #a15e02; }
|
||||
|
||||
#r5c0 {
|
||||
background: #604930; }
|
||||
|
||||
#r5c1 {
|
||||
background: #65274c; }
|
||||
|
||||
#r5c2 {
|
||||
background: #61bd26; }
|
||||
|
||||
#r5c3 {
|
||||
background: #5759a2; }
|
||||
|
||||
#r5c4 {
|
||||
background: #b9cda2; }
|
||||
|
||||
#r5c5 {
|
||||
background: #961983; }
|
||||
|
||||
#r5c6 {
|
||||
background: #a3cc2b; }
|
||||
|
||||
#r5c7 {
|
||||
background: #7e8361; }
|
||||
|
||||
#r5c8 {
|
||||
background: #50f4f9; }
|
||||
|
||||
#r5c9 {
|
||||
background: #b14f97; }
|
||||
|
||||
#r6c0 {
|
||||
background: #1e8113; }
|
||||
|
||||
#r6c1 {
|
||||
background: #e004b9; }
|
||||
|
||||
#r6c2 {
|
||||
background: #7ed1ec; }
|
||||
|
||||
#r6c3 {
|
||||
background: #26c544; }
|
||||
|
||||
#r6c4 {
|
||||
background: #426012; }
|
||||
|
||||
#r6c5 {
|
||||
background: #ef7356; }
|
||||
|
||||
#r6c6 {
|
||||
background: #4399f5; }
|
||||
|
||||
#r6c7 {
|
||||
background: #89d054; }
|
||||
|
||||
#r6c8 {
|
||||
background: #746b0f; }
|
||||
|
||||
#r6c9 {
|
||||
background: #b616f7; }
|
||||
|
||||
#r7c0 {
|
||||
background: #27ed47; }
|
||||
|
||||
#r7c1 {
|
||||
background: #c570e7; }
|
||||
|
||||
#r7c2 {
|
||||
background: #379b0a; }
|
||||
|
||||
#r7c3 {
|
||||
background: #d0dcf9; }
|
||||
|
||||
#r7c4 {
|
||||
background: #b6ba04; }
|
||||
|
||||
#r7c5 {
|
||||
background: #0f563d; }
|
||||
|
||||
#r7c6 {
|
||||
background: #4e34b0; }
|
||||
|
||||
#r7c7 {
|
||||
background: #e3c32d; }
|
||||
|
||||
#r7c8 {
|
||||
background: #f39d9e; }
|
||||
|
||||
#r7c9 {
|
||||
background: #e9f9e0; }
|
||||
|
||||
#r8c0 {
|
||||
background: #1a4571; }
|
||||
|
||||
#r8c1 {
|
||||
background: #5ad67d; }
|
||||
|
||||
#r8c2 {
|
||||
background: #e6a830; }
|
||||
|
||||
#r8c3 {
|
||||
background: #3b089a; }
|
||||
|
||||
#r8c4 {
|
||||
background: #033b9c; }
|
||||
|
||||
#r8c5 {
|
||||
background: #9e0d6e; }
|
||||
|
||||
#r8c6 {
|
||||
background: #b29f25; }
|
||||
|
||||
#r8c7 {
|
||||
background: #1d33d8; }
|
||||
|
||||
#r8c8 {
|
||||
background: #053658; }
|
||||
|
||||
#r8c9 {
|
||||
background: #23b71d; }
|
||||
|
||||
#r9c0 {
|
||||
background: #5c32c5; }
|
||||
|
||||
#r9c1 {
|
||||
background: #9d7d3e; }
|
||||
|
||||
#r9c2 {
|
||||
background: #172f58; }
|
||||
|
||||
#r9c3 {
|
||||
background: #850343; }
|
||||
|
||||
#r9c4 {
|
||||
background: #79eac9; }
|
||||
|
||||
#r9c5 {
|
||||
background: #ff9abd; }
|
||||
|
||||
#r9c6 {
|
||||
background: #4ca78c; }
|
||||
|
||||
#r9c7 {
|
||||
background: #d25aae; }
|
||||
|
||||
#r9c8 {
|
||||
background: #9130d0; }
|
||||
|
||||
#r9c9 {
|
||||
background: #7529f8; }
|
||||
|
||||
/*# sourceMappingURL=pix.css.map */
|
||||
7
src/front/pix.css.map
Normal file
7
src/front/pix.css.map
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAEQ,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C",
|
||||
"sources": ["pix.scss"],
|
||||
"names": [],
|
||||
"file": "pix.css"
|
||||
}
|
||||
7
src/front/pix.scss
Normal file
7
src/front/pix.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@for $i from 0 through 9 {
|
||||
@for $j from 0 through 9 {
|
||||
#r#{$i}c#{$j} {
|
||||
background: rgb(random(255), random(255), random(255));
|
||||
}
|
||||
}
|
||||
}
|
||||
55
src/front/pixels.css
Normal file
55
src/front/pixels.css
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
.pixel-container {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
table {
|
||||
--side: 80px;
|
||||
--border-width: 3px;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
width: calc(10 * var(--side));
|
||||
height: calc(10 * var(--side));
|
||||
}
|
||||
|
||||
.pixel {
|
||||
background: #fff;
|
||||
width: var(--side);
|
||||
height: var(--side);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pixel:hover {
|
||||
box-shadow: 0px 0px 0px var(--border-width) #333;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.info-pixel {
|
||||
display: none;
|
||||
position: relative;
|
||||
width: max-content;
|
||||
top: var(--side);
|
||||
box-shadow: 0px 0px 0px var(--border-width) #333;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.pixel:hover .info-pixel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.patch-shadow {
|
||||
display: none;
|
||||
width: 3px;
|
||||
position: relative;
|
||||
height: var(--side);
|
||||
left: var(--side);
|
||||
top: calc(var(--side) / (-2) + var(--border-width));
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.pixel:hover .patch-shadow {
|
||||
display: block;
|
||||
}
|
||||
148
src/front/profil.css
Normal file
148
src/front/profil.css
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
.menu-container {
|
||||
--width: 410px;
|
||||
display: none;
|
||||
visibility: visible;
|
||||
background: #fff;
|
||||
width: var(--width);
|
||||
margin: 30px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
left: calc(50% - var(--width) / 2);
|
||||
top: 30%;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-menu:checked~.menu-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-container .close-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-container .close-btn:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.menu-container div {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.wallet-container {
|
||||
--width: 410px;
|
||||
display: none;
|
||||
visibility: visible;
|
||||
background: #fff;
|
||||
width: var(--width);
|
||||
margin: 30px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
left: calc(50% - var(--width) / 2);
|
||||
top: 30%;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-wallet:checked~.wallet-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wallet-container .close-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wallet-container .close-btn:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.mypixel-container {
|
||||
--width: 410px;
|
||||
display: none;
|
||||
visibility: visible;
|
||||
background: #fff;
|
||||
width: var(--width);
|
||||
margin: 30px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
left: calc(50% - var(--width) / 2);
|
||||
top: 30%;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-mypixel:checked~.mypixel-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mypixel-container .close-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mypixel-container .close-btn:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
|
||||
.settings-container {
|
||||
--width: 410px;
|
||||
display: none;
|
||||
visibility: visible;
|
||||
background: #fff;
|
||||
width: var(--width);
|
||||
margin: 30px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
left: calc(50% - var(--width) / 2);
|
||||
top: 30%;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-settings:checked~.settings-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.settings-container .close-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-container .close-btn:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
|
||||
.wallet-btn,
|
||||
.mypixel-btn,
|
||||
.settings-btn {
|
||||
background: #fff;
|
||||
margin: 10px 10px;
|
||||
padding: 10px 10px;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
|
||||
}
|
||||
|
||||
.href {
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
}
|
||||
.href:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.login-btn,
|
||||
.signup-btn {
|
||||
background: #fff;
|
||||
padding: 10px 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.show {
|
||||
display: none;
|
||||
}
|
||||
.login-container,
|
||||
.signup-container{
|
||||
display: none;
|
||||
background: #fff;
|
||||
width: 410px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
#show-login:checked ~ .login-container{
|
||||
display: block;
|
||||
}
|
||||
#show-signup:checked ~ .signup-container{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-container .close-btn,
|
||||
.signup-container .close-btn{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login-container .close-btn:hover,
|
||||
.signup-container .close-btn:hover{
|
||||
color: #3498db;
|
||||
}
|
||||
.login-container .text,
|
||||
.signup-container .text{
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.login-container form,
|
||||
.signup-container form{
|
||||
margin-top: -20px;
|
||||
}
|
||||
.login-container form .data,
|
||||
.signup-container form .data{
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
margin: 40px 0;
|
||||
}
|
||||
form .data label{
|
||||
font-size: 18px;
|
||||
}
|
||||
form .data input{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
font-size: 17px;
|
||||
border: 1px solid silver;
|
||||
}
|
||||
form .data input:focus{
|
||||
border-color: #3498db;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
form .forgot-pass{
|
||||
margin-top: -8px;
|
||||
}
|
||||
form .forgot-pass a{
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
}
|
||||
form .forgot-pass a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
form .btn{
|
||||
margin: 30px 0;
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
form .btn button{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
|
||||
}
|
||||
form .signup-login-link{
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Created By CodingNepal -->
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Popup Login Form Design | CodingNepal</title>
|
||||
<link rel="stylesheet" href="test.css">
|
||||
<script>
|
||||
function toggleLoginSignup(l, s) {
|
||||
document.getElementById("show-login").checked = l;
|
||||
document.getElementById("show-signup").checked = s;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input type="checkbox" id="show-login" class="show">
|
||||
<label for="show-login" class="login-btn">Login</label>
|
||||
|
||||
<input type="checkbox" id="show-signup" class="show">
|
||||
<label for="show-signup" class="signup-btn">Signup</label>
|
||||
|
||||
<div class="login-container">
|
||||
<label for="show-login" class="close-btn" title="close">X</label>
|
||||
<div class="text">
|
||||
Login
|
||||
</div>
|
||||
<form action="#">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="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">
|
||||
<label for="show-signup" class="close-btn" title="close">X</label>
|
||||
<div class="text">
|
||||
Signup
|
||||
</div>
|
||||
<form action="#">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="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>
|
||||
</body>
|
||||
</html>
|
||||
40
src/front/title-bar.css
Normal file
40
src/front/title-bar.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.title-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background: #3333;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.title img {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border-radius: 10%;
|
||||
margin: 10%;
|
||||
}
|
||||
|
||||
.profil {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-btn,
|
||||
.signup-btn,
|
||||
.menu-btn {
|
||||
background: #fff;
|
||||
margin: 10% 10px;
|
||||
padding: 10% 10px;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: none;
|
||||
}
|
||||
20
src/front/utils.css
Normal file
20
src/front/utils.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
|
||||
}
|
||||
|
||||
.href {
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.href:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
Loading…
Reference in a new issue