ServeurDeTest
nathan boileau 3 years ago
parent e9c45eb474
commit a468b1a190

@ -1,23 +1,7 @@
/*Fonts CSS */
@font-face {
font-family: Centra;
src: url('../../assets/fonts/CentraNo2-Bold.ttf');
font-weight: 700;
}
@font-face {
font-family: Centra;
src: url('../../assets/fonts/CentraNo2-Regular.ttf');
font-weight: 500;
}
@font-face {
font-family: Centra;
src: url('../../assets/fonts/CentraNo2-Light.ttf');
font-weight: 400;
}
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
/*Default CSS*/
@ -28,12 +12,9 @@
}
body {
font-weight: 400;
overflow-x: hidden;
position: relative;
color: #fff !important;
font-family: 'Raleway', sans-serif !important;
font-weight: bold;
font-family: "Orbitron", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
@ -271,11 +252,14 @@ body {
animation: shine 2s forwards, blink 10s 1s infinite;
}
.sign{
margin-bottom: 130px;
}
.sign h1 {
font-weight: 700;
font-weight: 600;
margin: auto !important;
margin-bottom: 1rem;
display: flex;
justify-content: center;
align-items: center;
@ -283,9 +267,10 @@ body {
height: 40%;
left: 50%;
top: 50%;
font-family: "Clip";
letter-spacing: 0.5rem;
font-family: "Orbitron", sans-serif;
text-transform: uppercase;
font-size: 6em;
font-size: 5em;
color: #ffe6ff;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #dd07bf,
-0.2rem 0.1rem 1rem #dd07bf, 0.2rem 0.1rem 1rem #dd07bf,
@ -294,23 +279,31 @@ body {
}
/*Button CSS*/
/*Main Button CSS*/
.main .enigme{
margin-top:150px;
.main .duel{
color: #56fcfc;
}
.main .log{
color: #fff;
}
.main .duel, .main .log{
margin-top: 60px;
}
.main a {
margin-top: 60px;
letter-spacing: 0.2rem;
padding: 25px 30px;
color: #ff86ff;
height: 50px;
width: 200px;
border: none;
font-weight: 500;
font-weight: 400;
border-radius: 10px;
font-size: 21px;
font-size: 22px;
display: flex;
position: relative;
align-items: center;
@ -318,7 +311,6 @@ body {
cursor: pointer;
text-transform: uppercase;
transition: 0.5s;
letter-spacing: 4px;
overflow: hidden;
}
@ -327,6 +319,14 @@ body {
margin: auto;
}
.main .duel:hover{
background: #56fcfc;
color: #000000;
box-shadow: 0 0 5px #56fcfc,
0 0 25px #56fcfc,
0 0 50px #56fcfc,
0 0 100px #56fcfc;
}
.main a:hover {
background: #ff86ff;
@ -339,12 +339,16 @@ body {
}
a span{
.main a span{
position: absolute;
display: block;
}
.duel span:nth-child(1){
background: linear-gradient(90deg, transparent, #56fcfc);
}
a span:nth-child(1){
top: 0;
left: 0;
@ -354,6 +358,10 @@ a span:nth-child(1){
animation: animate1 1s linear infinite;
}
.duel span:nth-child(2){
background: linear-gradient(180deg, transparent, #56fcfc);
}
a span:nth-child(2){
top: -100%;
right: 0;
@ -364,6 +372,10 @@ a span:nth-child(2){
animation-delay: 0.25s;
}
.duel span:nth-child(3){
background: linear-gradient(270deg, transparent, #56fcfc);
}
a span:nth-child(3){
bottom: 0;
right: 0;
@ -374,6 +386,10 @@ a span:nth-child(3){
animation-delay: 0.50s;
}
.duel span:nth-child(4){
background: linear-gradient(360deg, transparent, #56fcfc);
}
a span:nth-child(4){
bottom: -100%;
left: 0;

@ -14,7 +14,20 @@
font-weight: 400;
}
p, a, li, button, ul {
margin: 0;
padding: 0;
line-height: normal;
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
}
input:focus, textarea:focus, select:focus {
outline: none;
}
body {
margin:0;
@ -201,4 +214,6 @@ body {
bottom: 100%;
}
}
/* Home Button */

@ -9,31 +9,39 @@
</head>
<body>
<div class="main" id="home">
<div>
<div class="sign">
<h1>
<span class="fast-flicker">s</span>
<span>crip</span>
<span class="flicker">t</span>
<span>ed</span>
</h1>
</div>
<div class="align-items-center">
<div>
<a class="enigme" href="./Palindrome.html" />
<span></span>
<span></span>
<span></span>
<span></span>
Énigme
</a>
</div>
<div>
<a class="duel" href="./Duel/Duel.html">Duel</a>
</div>
</div>
<div class="sign">
<h1>
<span class="fast-flicker">s</span>
<span>crip</span>
<span class="flicker">t</span>
<span>ed</span>
</h1>
</div>
</section>
<div class="align-items-center">
<div>
<a class="enigme" href="./Palindrome.html" />
<span></span>
<span></span>
<span></span>
<span></span>
Énigme
</a>
</div>
<div>
<a class="duel" href="./Duel/Duel.html">
<span></span>
<span></span>
<span></span>
<span></span>
Duel
</a>
</div>
<div>
<a class="log" href="./LogSign/LogIn.html">
Login
</a>
</div>
</div>
</div>
</body>
</html>

@ -4,16 +4,18 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../CSS/Login.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script defer src="../../JS/LogIn.js"></script>
<link rel="stylesheet" href="../../CSS/LogSign.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="../../JS/Login.js"></script>
<title>Login</title>
</head>
<body>
<div class="main">
<div class="login-box" id="form">
<h2>Sign in</h2>
<div id="top">
<h2>Sign up</h2>
<a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
</div>
<form>
<div class="user-box">
<input type="text" id="username" name="" required="">
@ -29,9 +31,9 @@
<span></span>
<span></span>
<span></span>
Login
Submit
</button>
<a href="#" class="right">
<a href="./SignUp.html" class="right">
<span></span>
<span></span>
<span></span>

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../CSS/LogSign.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="../../JS/SignUp.js"></script>
<title>Login</title>
</head>
<body>
<div class="main">
<div class="login-box" id="form">
<div id="top">
<h2>Sign up</h2>
<a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
</div>
<form>
<div class="user-box">
<input type="text" id="username" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="email" id="email" name="" required="">
<label>Email</label>
</div>
<div class="user-box">
<input type="password" id="password" name="" required="">
<label>Password</label>
</div>
<div>
<button class="left" type="submit">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</button>
</div>
</form>
</div>
</div>
</body>
</html>
Loading…
Cancel
Save