Veuillez vous connecter à votre compte.
Cliquer sur les annonces pour nous soutenir
Démonstration du projetInformation
Si vous voulez que l'on met un bouton pour télécharger directement commentez la publication
Code source
Code HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 100% codée par Aliou Sow -->
<title>Neumorphic</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="container" align="center">
<h1 id="sign_up">S'inscrire</h1>
<div id="user">
<i class="fa fa-user"></i>
<input type="text" placeholder="Pseudo" id="_user">
</div>
<div id="email">
<i class="fa fa-envelope"></i>
<input type="email" placeholder="Votre email" id="_email">
</div>
<div id="lock">
<i class="fa fa-lock"></i>
<input type="password" placeholder="Mot de passe" id="_lock">
</div>
<button id="signUpBt">Valider</button>
<h4>S'inscrire avec nos plateformes</h4>
<div id="social_icon">
<i class="fa fa-facebook"></i>
<i class="fa fa-google"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
<div id="foot">
<a>Déjà un compte?</a>
<a id="sign" href="#">Se connecter</a>
</div>
<div id="mode">
<button id="lt" onclick="light()">Mode jour</button>
<button id="drk" onclick="dark()">Mode nuit</button>
</div>
</div>
</body>
</html>
Code CSS
Cliquer sur les annonces pour nous soutenir
:root{
--bg1:#020204;
--bg2:#323234;
--boxShadow:#010103;
--Shadow1:#040406;
--Shadow2:#444446;
--S1forI:#2a2a2c;
--S2forI:#020305;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
user-select:none;
}
body{
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--bg1),var(--bg2));
}
#container{
background:linear-gradient(135deg,var(--bg2),var(--bg1));
box-shadow:0 0 8px 6px var(--boxShadow);
border-radius:32px;
}
#user,#email,#lock{
width:240px;
padding-left:4px;
height:42px;
border-radius:16px;
background:none;
margin:16px;
box-shadow:inset 4px 4px 8px var(--Shadow1),inset -4px -4px 8px var(--Shadow2);
color:#777;
font-size:18px;
}
input{
border:none;
background:none;
height:42px;
outline:none;
padding-left:6px;
color:#777;
}
#sign_up{
font-family:sans-serif;
margin:32px auto;
color:#4f7afe;
}
h4{
font-size:14px;
color:#777;
margin:0 0 16px 0;
}
#social_icon i{
margin:0 11px;
padding:8px;
width:36px;
height:36px;
border-radius:50%;
box-shadow:inset 3px 3px 8px var(--S1forI),inset -3px -3px 8px var(--S2forI),1px 1px 2px var(--S2forI),-1px -1px 2px var(--S1forI);
color:#4f7af1;
transition-duration:0.2s;
}
#social_icon i:hover{
transform:scale(1.3);
}
#social_icon i:active{
transform:scale(0.9);
}
#signUpBt{
margin:16px;
font-size:20px;
color:#4f7afe;
border:none;
width:220px;
height:38px;
background:none;
border-radius:48px;
box-shadow:4px 4px 8px var(--Shadow1),-4px -4px 8px var(--Shadow2);
outline:none;
}
#login:hover{
box-shadow:5px 5px 8px var(--Shadow1),-5px -5px 8px var(--Shadow2);
}
#login:active{
box-shadow:inset 4px 4px 8px var(--Shadow1),inset -4px -4px 8px var(--Shadow2);
font-size:16px;
border:none;
}
#foot{
margin:16px auto;
color:#777;
font-size:16px;
}
#sign{
color:#4f7afe;
}
#mode{
margin-bottom:0rem;
}
#mode button{
padding:6px;
border-radius:6px;
background:none;
border:none;
box-shadow:4px 4px 8px var(--Shadow1),-4px -4px 8px var(--Shadow2);
letter-spacing:1px;
}
#mode button:hover{
transform:scale(1.1);
}
#mode button:active{
transform:scale(0.9);
}
#drk{
display:none;
color:#112;
}
#lt{
color:#eef;
}
Code JavaScript
var color = document.documentElement.style ;
function light() {
color.setProperty('--bg1', '#c2c2c4');
color.setProperty('--bg2', '#e2e2e4');
color.setProperty('--boxShadow', '#a1a1a3');
color.setProperty('--Shadow1', '#848486');
color.setProperty('--Shadow2', '#fcfcfe');
color.setProperty('--S1forI', '#ececee');
color.setProperty('--S2forI', '#8a8b8e');
document.getElementById('lt').style.display="none";
document.getElementById('drk').style.display="block";
}
function dark() {
color.setProperty('--bg1', '#020204');
color.setProperty('--bg2', '#323234');
color.setProperty('--boxShadow', '#010103');
color.setProperty('--Shadow1', '#040406');
color.setProperty('--Shadow2', '#444446');
color.setProperty('--S1forI', '#2a2a2c');
color.setProperty('--S2forI', '#020305');
document.getElementById('lt').style.display="block";
document.getElementById('drk').style.display="none";
}
Cliquer sur les annonces pour nous soutenir
Console du code
See the Pen Page de connexion Style neumorphic by Coding Team - Tuto & Code (@codingtuto) on CodePen.
FINC'est tous pour aujoudh'ui on se retrouve à demain pour de nouveau tutoriel
