 |
| Exécution |
<!DOCTYPE html>
<html lang="fr">
<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="style.css">
<title>Page de connexion en forme de cube | Coding™</title>
</head>
<body>
<form autocomplete='off' class='form'>
<div class='control'>
<h1>
@Rodhackgang
</h1>
</div>
<div class='control block-cube block-input'>
<input name='username' placeholder='Pseudo' type='text' required>
<div class='bg-top'>
<div class='bg-inner'></div>
</div>
<div class='bg-right'>
<div class='bg-inner'></div>
</div>
<div class='bg'>
<div class='bg-inner'></div>
</div>
</div>
<div class='control block-cube block-input'>
<input name='password' placeholder='Mot de passe' type='password' required>
<div class='bg-top'>
<div class='bg-inner'></div>
</div>
<div class='bg-right'>
<div class='bg-inner'></div>
</div>
<div class='bg'>
<div class='bg-inner'></div>
</div>
</div>
<button class='btn block-cube block-cube-hover' type='button'>
<div class='bg-top'>
<div class='bg-inner'></div>
</div>
<div class='bg-right'>
<div class='bg-inner'></div>
</div>
<div class='bg'>
<div class='bg-inner'></div>
</div>
<div class='text'>
Connecter
</div>
</button>
</form>
</body>
<style>
*,
::after,
::before {
box-sizing: border-box;
}
body {
background-color: #212121;
color: #fff;
font-family: monospace, serif;
letter-spacing: 0.05em;
}
h1 {
font-size: 23px;
}
.form {
width: 300px;
padding: 64px 15px 24px;
margin: 0 auto;
}
.form .control {
margin: 0 0 24px;
}
.form .control input {
width: 100%;
padding: 14px 16px;
border: 0;
background: transparent;
color: #fff;
font-family: monospace, serif;
letter-spacing: 0.05em;
font-size: 16px;
}
.form .control input:hover,
.form .control input:focus {
outline: none;
border: 0;
}
.form .btn {
width: 100%;
display: block;
padding: 14px 16px;
background: transparent;
outline: none;
border: 0;
color: #fff;
letter-spacing: 0.1em;
font-weight: bold;
font-family: monospace;
font-size: 16px;
}
.block-cube {
position: relative;
}
.block-cube .bg-top {
position: absolute;
height: 10px;
background: #020024;
background: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(52, 9, 121, 1) 37%,
rgba(0, 212, 255, 1) 94%
);
bottom: 100%;
left: 5px;
right: -5px;
transform: skew(-45deg, 0);
margin: 0;
}
.block-cube .bg-top .bg-inner {
bottom: 0;
}
.block-cube .bg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #020024;
background: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(52, 9, 121, 1) 37%,
rgba(0, 212, 255, 1) 94%
);
}
.block-cube .bg-right {
position: absolute;
background: #020024;
background: rgba(0, 212, 255, 1);
top: -5px;
z-index: 0;
bottom: 5px;
width: 10px;
left: 100%;
transform: skew(0, -45deg);
}
.block-cube .bg-right .bg-inner {
left: 0;
}
.block-cube .bg .bg-inner {
transition: all 0.2s ease-in-out;
}
.block-cube .bg-inner {
background: #212121;
position: absolute;
left: 2px;
top: 2px;
right: 2px;
bottom: 2px;
}
.block-cube .text {
position: relative;
z-index: 2;
}
.block-input input {
position: relative;
z-index: 2;
}
.block-input input:focus ~ .bg-right .bg-inner,
.block-input input:focus ~ .bg-top .bg-inner,
.block-input input:focus ~ .bg-inner .bg-inner {
top: 100%;
background: rgba(255, 255, 255, 0.5);
}
.block-input .bg-top,
.block-input .bg-right,
.block-input .bg {
background: rgba(255, 255, 255, 0.5);
transition: background 0.2s ease-in-out;
}
.block-input .bg-right .bg-inner,
.block-input .bg-top .bg-inner {
transition: all 0.2s ease-in-out;
}
.block-input:focus .bg-top,
.block-input:hover .bg-top,
.block-input:focus .bg-right,
.block-input:hover .bg-right,
.block-input:focus .bg,
.block-input:hover .bg {
background: rgba(255, 255, 255, 0.8);
}
.block-cube.block-cube-hover:focus .bg .bg-inner,
.block-cube-hover:hover .bg .bg-inner {
top: 100%;
}
</style>
</html>
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
Aucun commentaire:
Enregistrer un commentaire
Veuillez entrer votre message. Merci