rayhan.hassou
/
Projet_ToDoList_Php
1
0
Fork 0
Code Issues 7 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

Amélioration de la page de l inscription avec l ajout d un checkbox styler ✅

Browse Source
rayhan_gatewayTache
Emre KARTAL 2 years ago
parent 5efdb0aa09
commit 802b7cab86
4 changed files with 138 additions and 14 deletions
Show Stats Download Patch File Download Diff File

60
src/Vue/css/inscription.css
Unescape View File

@ -11,6 +11,66 @@ body {
align-items: center; align-items: center;
} }
.text-box {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 10px 15px;
display: inline-block;
border-radius: 100px;
font-size: 60%;
transition: all .2s;
position: absolute;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn-white {
background-color: #fff;
color: #777;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
.btn-white::after {
background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.5) scaleY(1.7);
opacity: 0;
}
.btn-animated {
animation: moveInBottom 5s ease-out;
animation-fill-mode: backwards;
}
.main-logo img{ .main-logo img{
width: 50%; width: 50%;
} }

69
src/Vue/css/style.css
Unescape View File

@ -14,6 +14,8 @@ body {
justify-content: center; justify-content: center;
} }
/*Bouton*/
.btn{ .btn{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -75,6 +77,8 @@ body {
animation-fill-mode: backwards; animation-fill-mode: backwards;
} }
/* Model */
.model { .model {
width: 450px; width: 450px;
background: rgba(255,255,255, .5); background: rgba(255,255,255, .5);
@ -162,10 +166,65 @@ body {
opacity: .4; opacity: .4;
} }
.login-card-form .checkbox{ /*CheckBox*/
display: flex;
align-items: center; .check {
gap: 7px; cursor: pointer;
position: relative;
margin: auto;
width: 18px;
height: 18px;
-webkit-tap-highlight-color: transparent;
transform: translate3d(0, 0, 0);
}
.check:before {
content: "";
position: absolute;
top: -20px;
left: -15px;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(34,50,84,0.03);
opacity: 0;
transition: opacity 0.2s ease;
}
.check svg {
position: relative;
z-index: 1;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #c8ccd4;
stroke-width: 1.5;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
}
.check svg path {
stroke-dasharray: 60;
stroke-dashoffset: 0;
}
.check svg polyline {
stroke-dasharray: 22;
stroke-dashoffset: 66;
}
.check:hover:before {
opacity: 1;
}
.check:hover svg {
stroke: #4285f4;
}
#cbx:checked + .check svg {
stroke: #4285f4;
}
#cbx:checked + .check svg path {
stroke-dashoffset: 60;
transition: all 0.3s linear;
}
#cbx:checked + .check svg polyline {
stroke-dashoffset: 42;
transition: all 0.2s linear;
transition-delay: 0.15s;
} }
.login-card-form .form-item-other { .login-card-form .form-item-other {
@ -219,6 +278,8 @@ body {
cursor: pointer; cursor: pointer;
} }
/* Les réseaux social **/
.social { .social {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

15
src/Vue/html/inscription.html
Unescape View File

@ -4,26 +4,23 @@
<head> <head>
<title>Page d'inscription</title> <title>Page d'inscription</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../css/inscription.css">
<script type="text/javascript" src="../javaScript/inscription.js" defer></script>
<link rel="stylesheet" href="../css/inscription.css">
<script type="text/javascript" src="../javaScript/inscription.js" defer></script>
</head> </head>
<body> <body>
<div class="text-box">
<a href="#" class="btn btn-white btn-animate">Revenir</a>
</div>
<div class="main-logo"> <div class="main-logo">
<img src="../Images/Logo.png" alt="logo"> <img src="../Images/Logo.png" alt="logo">
<h1>Inscription</h1> <h1>Inscription</h1>
</div> </div>
<form> <form>
<ul class="items"></ul> <ul class="items"></ul>
<fieldset class="username enable"> <fieldset class="username enable">

8
src/Vue/html/index.html → src/Vue/html/login.html
Unescape View File

@ -33,7 +33,13 @@
</div> </div>
<div class="form-item-other"> <div class="form-item-other">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="rememberMeCheckbox"> <input type="checkbox" id="cbx" style="display: none;">
<label for="cbx" class="check">
<svg width="18px" height="18px" viewBox="0 0 18 18">
<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
<polyline points="1 9 7 14 15 4"></polyline>
</svg>
</label>
<label for="rememberMeCheckBox">Se souvenir de moi</label> <label for="rememberMeCheckBox">Se souvenir de moi</label>
</div> </div>
<a href="#">Oublie de mot de passe</a> <a href="#">Oublie de mot de passe</a>
Write Preview
Loading…
Cancel
Save