Sign
Sign merupakan grup yang memiliki sebanyak tujuh elemen di dalamnya, yang mana setiap elemennya memiliki kegunaanya masing - masing dalam proses pengembangan sebuah proyek website
1. Form sign-in large
Sign In
Or Follow Us On
Form sign-in large dapat digunakan untuk fitur sign-in dari proyek pengembangan website anda. Dalam keadaan standar card ini menggunakan parameter email dan password sebagain acuannya.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="formsigninlarge-sign shadow">
<div class="formsigninlargehead-sign">
<div class="formsigninlargetitlecontainer-sign">
<p class="formsigninlargetitle-sign">Sign In</p>
</div>
<div class="formsigninlargeheadbuttoncontainer-sign">
<a href="#" class="formsigninlargeheadbutton-sign">Sign Up</a>
</div>
</div>
<div class="formsigninlargebody-sign">
<form action="/action_page.php">
<div class="formsigninlargeemailsection-sign">
<div class="formsigninlargecol12-sign">
<label for="fname">Email</label>
<input type="email" id="email" required="" name="firstname" placeholder="">
</div>
</div>
<div class="formsigninlargepasswordsection-sign">
<div class="formsigninlargecol12-sign">
<label for="fname">Password</label>
<input id="formsigninlargepassword-sign" type="password" placeholder="">
</div>
</div>
<div class="formsigninlargeshopasswordsection-sign">
<a class="formsigninlargeshowpasswordtext-sign" onclick="myFunction2()" id="formsigninlargeshowpassword-sign">Show Password</p>
</div>
<div class="formsigninlargeforgotpasswordsection-sign">
<a href="https://www.google.com" class="formsigninlargeforgotpasswordtext-sign">Forgot Password ?</p>
</div>
<div class="formsigninlargebuttoncontainer-sign">
<a href="#" class="formsigninlargebutton-sign">Sign In</a>
</div>
</form>
<p class="formsigninlargespacer"><span>Or Follow Us On</span></p>
<div class="formsigninlargebuttoncontainer-sign">
<a href="#" class="formsigninlargeinstagrambutton-sign">Instagram</a>
</div>
<div class="formsigninlargebuttoncontainer-sign">
<a href="#" class="formsigninlargetwitterbutton-sign">Twitter</a>
</div>
<div class="formsignlargefooter-sign">
<p class="formsignlargealert-sign">By creating an account you agree to our</p>
<a href="" class="formsignlargeterm-sign">Terms and Conditions</a>
</div>
</div>
</div>
</div>
2. Form sign-in small
Sign In
Form sign-in small, sama dengan form sign-in large dapat digunakan untuk fitur sign-in dari proyek pengembangan website, namun kalii ini memiliki ukuran yang lebih ringkas.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="formsigninsmall-sign shadow">
<div class="formsigninsmallhead-sign">
<div class="formsigninsmalltitlecontainer-sign">
<p class="formsigninsmalltitle-sign">Sign In</p>
</div>
<div class="formsigninsmallheadbuttoncontainer-sign">
<a href="#" class="formsigninsmallheadbutton-sign">Sign Up</a>
</div>
</div>
<div class="formsigninsmallbody-sign">
<form action="/action_page.php">
<div class="formsigninsmallemailsection-sign">
<div class="formsigninsmallcol12-sign">
<label for="fname">Email</label>
<input type="email" id="email" required="" name="firstname" placeholder="">
</div>
</div>
<div class="formsigninsmallpasswordsection-sign">
<div class="formsigninsmallcol12-sign">
<label for="fname">Password</label>
<input id="formsigninsmallpassword-sign" type="password" placeholder="">
</div>
</div>
<div class="formsigninsmallshopasswordsection-sign">
<a class="formsigninsmallshowpasswordtext-sign" onclick="myFunction3()" id="formsigninsmallshowpassword-sign">Show Password</p>
</div>
<div class="formsigninsmallforgotpasswordsection-sign">
<a href="https://www.google.com" class="formsigninsmallforgotpasswordtext-sign">Forgot Password ?</p>
</div>
<div class="formsigninsmallbuttoncontainer-sign">
<a href="#" class="formsigninsmallbutton-sign">Sign In</a>
</div>
</form>
</div>
</div>
</div>
3. Form reset password
Reset Your Password
what would you like your new password to be ? and make sure your new password is unique
Form reset password dalam berjalannya waktu pasti aka nada saatnya user dari website anda yang akan melupakan password dari akun mereka, maka saat itu form reset password akan sangat berguna dalam menangani masalah tersebut.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="formresetpassword-sign shadow">
<div class="formresetpasswordhead-sign">
<div class="formresetpasswordtitlecontainer-sign">
<img src="assets/images/resetpasswordicon.png" class="formresetpasswordlogo-sign " />
<p class="formresetpasswordtitle-sign">Reset Your Password</p>
<p class="formresetpasswordalert-sign">what would you like your new password to be ? and make sure your new password is unique</p>
</div>
</div>
<div class="formresetpasswordbody-sign">
<form action="/action_page.php">
<div class="formresetpasswordpasswordsection-sign">
<div class="formresetpasswordcol12-sign">
<label for="fname">New Password</label>
<input id="formresetpasswordpassword-sign" type="password" placeholder="New Password">
</div>
</div>
<div class="formresetpasswordpasswordsection-sign">
<div class="formresetpasswordcol12-sign">
<label for="fname">Verify New Password</label>
<input id="formresetpasswordpassword-sign" type="password" placeholder="Verify New Password">
</div>
</div>
<div class="formresetpasswordbuttoncontainer-sign">
<a href="#" class="formresetpasswordbutton-sign">Continue</a>
</div>
</form>
</div>
</div>
</div>
4. Form forgot password I
Forgot Password ?
Enter your email address below and we’ll send a special reset password link to your inbox.
Form forgot password I digunakan dalam tahapan dalam mengembalikan user yang melupakan password dari akun mereka.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="formforgotpassword1-sign shadow">
<div class="formforgotpassword1head-sign">
<div class="formforgotpassword1titlecontainer-sign">
<img src="assets/images/forgotpasswordlogo.png" class="formforgotpassword1logo-sign " />
<p class="formforgotpassword1title-sign">Forgot Password ?</p>
<p class="formforgotpassword1alert-sign">Enter your email address below and we’ll send a special reset password link to your inbox.</p>
</div>
</div>
<div class="formforgotpassword1body-sign">
<form action="/action_page.php">
<div class="formforgotpassword1passwordsection-sign">
<div class="formforgotpassword1col12-sign">
<label for="fname">Your Email or Phone</label>
<input id="formforgotpassword1password-sign" type="email" placeholder="example@mail.com">
</div>
</div>
<div class="formforgotpassword1buttoncontainer-sign">
<a href="#" class="formforgotpassword1button-sign">Continue</a>
</div>
</form>
</div>
</div>
</div>
5. Form forgot password II
Forgot Password ?
Enter your email address below and we’ll send a special reset password link to your inbox.
Form forgot password II digunakan jika terdapat kesalahan dalam meng inputkan data dalam proses pengembalian password dari user tersebut.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="formforgotpassword2-sign">
<div class="formforgotpassword2head-sign">
<div class="formforgotpassword2titlecontainer-sign">
<img src="assets/images/forgotpasswordlogo.png" class="formforgotpassword2logo-sign " />
<p class="formforgotpassword2title-sign">Forgot Password ?</p>
<p class="formforgotpassword2alert-sign">Enter your email address below and we’ll send a special reset password link to your inbox.</p>
</div>
</div>
<div class="formforgotpassword2body-sign">
<form action="/action_page.php">
<div class="formforgotpassword2passwordsection-sign">
<div class="formforgotpassword2col12-sign">
<label for="fname">Your Email or Phone</label>
<input id="formforgotpassword2password-sign" type="email" placeholder="example@mail.com">
<p class="formforgotpassword2wrongpasswordalert-sign">Opps, we couldn’t find your account with that information</p>
</div>
</div>
<div class="formforgotpassword2buttoncontainer-sign">
<a href="#" class="formforgotpassword2button-sign">Continue</a>
</div>
</form>
</div>
</div>
</div>
6. Form verification code input
Enter Verification Code
A text message with a verification code has been sent to +1 888 452 ****
Form verification code input digunakan dalam mendukung fitur keamanan dari web-site anda, form ini akan digunakan untuk meng inputkan kode verifikasi yang telah dikirimkan ke user.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="formverificationcodeinput-sign shadow">
<div class="formverificationcodeinputhead-sign">
<div class="formverificationcodeinputtitlecontainer-sign">
<img src="assets/images/formverificationcodeinputlogo.png" class="formverificationcodeinputlogo-sign " />
<p class="formverificationcodeinputtitle-sign">Enter Verification Code</p>
<p class="formverificationcodeinputalert-sign">A text message with a verification code has been sent to +1 888 452 ****
</p>
</div>
</div>
<div class="formverificationcodeinputbody-sign">
<form action="/action_page.php">
<div class="formverificationcodeinputcodesection-sign">
<div class="formverificationcodeinputcol12-sign">
<label for="fname">Enter Code Here :</label>
<div class="formverificationcodeinputcodecontainer-sign">
<div class="formverificationcode-sign col-3">
<input style="line-height: 30px; text-align: center; font-size: 20px;" maxLength="1" type="text">
</div>
<div class="formverificationcode-sign col-3">
<input style="line-height: 30px; text-align: center; font-size: 20px;" maxLength="1" type="text">
</div>
<div class="formverificationcode-sign col-3">
<input style="line-height: 30px; text-align: center; font-size: 20px;" maxLength="1" type="text">
</div>
<div class="formverificationcode-sign col-3">
<input style="line-height: 30px; text-align: center; font-size: 20px;" maxLength="1" type="text">
</div>
</div>
</div>
</div>
<div class="formverificationcodeinputbuttoncontainer-sign">
<a href="#" class="formverificationcodeinputbutton-sign">Continue</a>
</div>
<div style="width: 100%; text-align: center;">
<p class="formverificationcodeinputalert-sign">Please wait for 12 Second to resend code </p>
</div>
</form>
</div>
</div>
</div>
7. Form signup large
Sign Up
Or Follow Us On
Form sign-up large digunakan untk form pendaftara bagi para user baru untuk meng inputkan data – data mereka ke dalam sistem website anda. Untuk menggunakan form sign-up large silahkan gunakan source code dibawah.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="formsignuplarge-sign">
<div class="formsignuplargehead-sign">
<div class="formsignuplargetitlecontainer-sign">
<p class="formsignuplargetitle-sign">Sign Up</p>
</div>
<div class="formsignuplargeheadbuttoncontainer-sign">
<a href="#" class="formsignuplargeheadbutton-sign">Sign In</a>
</div>
</div>
<div class="formsignuplargebody-sign">
<form action="/action_page.php">
<div class="formsignuplargenamesection-sign">
<div class="formsignuplargefirstnamecontainer-sign">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="">
</div>
<div class="formsignuplargelastnamecontainer-sign">
<label for="fname">Last Name</label>
<input type="text" id="fname" name="firstname" placeholder="">
</div>
</div>
<div class="formsignuplargeemailsection-sign">
<div class="formsignuplargecol12-sign">
<label for="fname">Email</label>
<input type="email" id="email" required="" name="firstname" placeholder="">
</div>
</div>
<div class="formsignuplargeusernamesection-sign">
<div class="formsignuplargecol12-sign">
<label for="fname">Username</label>
<input type="text" id="email" required="" name="firstname" placeholder="">
</div>
</div>
<div class="formsignuplargepasswordsection-sign">
<div class="formsignuplargecol12-sign" id="cobaborder">
<label for="fname">Verify Password</label>
<div class="formsignuplargepasswordcontainer-sign">
<div class="formsignuplargepasswordinputcontainer-sign">
<input class="formsignuplargepasswordinput-sign" id="formsignuplargepasswordinput-sign" type="password" placeholder="">
</div>
<div class="formsignuplargepasswordvisibilityoptioncontainer-sign">
<a class="formsignuplargepasswordvisibilityoption-sign material-icons md-18" onclick="myFunction4()" id="formsignuplargepasswordvisibilityoption-sign">
visibility
</a>
</div>
</div>
</div>
</div>
<div class="formsignuplargepasswordsection-sign">
<div class="formsignuplargecol12-sign" id="cobaborder">
<label for="fname">Verify Password</label>
<div class="formsignuplargepasswordcontainer-sign">
<div class="formsignuplargepasswordinputcontainer-sign">
<input class="formsignuplargepasswordinput-sign" id="formsignuplargeverifypasswordinput-sign" type="password" placeholder="">
</div>
<div class="formsignuplargepasswordvisibilityoptioncontainer-sign">
<a class="formsignuplargepasswordvisibilityoption-sign material-icons md-18" onclick="myFunction5()" id="formsignuplargeverifypasswordvisibilityoption-sign">
visibility
</a>
</div>
</div>
</div>
</div>
<div class="formsignuplargebuttoncontainer-sign">
<a href="#" class="formsignuplargebutton-sign">Sign In</a>
</div>
</form>
<p class="formsignuplargespacer"><span>Or Follow Us On</span></p>
<div class="formsignuplargebuttoncontainer-sign">
<a href="#" class="formsignuplargeinstagrambutton-sign">Instagram</a>
</div>
<div class="formsignuplargebuttoncontainer-sign">
<a href="#" class="formsignuplargetwitterbutton-sign">Twitter</a>
</div>
<div class="formsignuplargefooter-sign">
<p class="formsignuplargealert-sign">By creating an account you agree to our</p>
<a href="" class="formsignuplargeterm-sign">Terms and Conditions</a>
</div>
</div>
</div>
</div>
Made On Earth By Human. All rights reserved © 2022.