ServeurDeTest
nathan boileau 3 years ago
parent e9c45eb474
commit a468b1a190

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

@ -14,7 +14,20 @@
font-weight: 400; 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 { body {
margin:0; margin:0;
@ -201,4 +214,6 @@ body {
bottom: 100%; bottom: 100%;
} }
} }
/* Home Button */

@ -9,31 +9,39 @@
</head> </head>
<body> <body>
<div class="main" id="home"> <div class="main" id="home">
<div> <div class="sign">
<div class="sign"> <h1>
<h1> <span class="fast-flicker">s</span>
<span class="fast-flicker">s</span> <span>crip</span>
<span>crip</span> <span class="flicker">t</span>
<span class="flicker">t</span> <span>ed</span>
<span>ed</span> </h1>
</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> </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> </body>
</html> </html>

@ -4,16 +4,18 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../CSS/Login.css"> <link rel="stylesheet" href="../../CSS/LogSign.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" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="../../JS/LogIn.js"></script> <script defer src="../../JS/Login.js"></script>
<title>Login</title> <title>Login</title>
</head> </head>
<body> <body>
<div class="main"> <div class="main">
<div class="login-box" id="form"> <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> <form>
<div class="user-box"> <div class="user-box">
<input type="text" id="username" name="" required=""> <input type="text" id="username" name="" required="">
@ -29,9 +31,9 @@
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
Login Submit
</button> </button>
<a href="#" class="right"> <a href="./SignUp.html" class="right">
<span></span> <span></span>
<span></span> <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