Last active
March 9, 2023 20:33
-
-
Save Jackson595/10e9a7a64957c46cc0dd431193aa742f to your computer and use it in GitHub Desktop.
sign up form #new #trending #for you #sing up
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
body {font-family: Arial, Helvetica, sans-serif;} | |
* {box-sizing: border-box} | |
/* Full-width input fields */ | |
input[type=text], input[type=password] { | |
width: 100%; | |
padding: 15px; | |
margin: 5px 0 22px 0; | |
display: inline-block; | |
border: none; | |
background: #f1f1f1; | |
} | |
input[type=text]:focus, input[type=password]:focus { | |
background-color: #ddd; | |
outline: none; | |
} | |
hr { | |
border: 1px solid #f1f1f1; | |
margin-bottom: 25px; | |
} | |
/* Set a style for all buttons */ | |
button { | |
background-color: #04AA6D; | |
color: white; | |
padding: 14px 20px; | |
margin: 8px 0; | |
border: none; | |
cursor: pointer; | |
width: 100%; | |
opacity: 0.9; | |
} | |
button:hover { | |
opacity:1; | |
} | |
/* Extra styles for the cancel button */ | |
.cancelbtn { | |
padding: 14px 20px; | |
background-color: #f44336; | |
} | |
/* Float cancel and signup buttons and add an equal width */ | |
.cancelbtn, .signupbtn { | |
float: left; | |
width: 50%; | |
} | |
/* Add padding to container elements */ | |
.container { | |
padding: 16px; | |
} | |
/* Clear floats */ | |
.clearfix::after { | |
content: ""; | |
clear: both; | |
display: table; | |
} | |
/* Change styles for cancel button and signup button on extra small screens */ | |
@media screen and (max-width: 300px) { | |
.cancelbtn, .signupbtn { | |
width: 100%; | |
} | |
} | |
</style> | |
<body> | |
<form action="/action_page.php" style="border:1px solid #ccc"> | |
<div class="container"> | |
<h1>Sign Up</h1> | |
<p>Please fill in this form to create an account.</p> | |
<hr> | |
<label for="email"><b>Email</b></label> | |
<input type="text" placeholder="Enter Email" name="email" required> | |
<label for="psw"><b>Password</b></label> | |
<input type="password" placeholder="Enter Password" name="psw" required> | |
<label for="psw-repeat"><b>Repeat Password</b></label> | |
<input type="password" placeholder="Repeat Password" name="psw-repeat" required> | |
<label> | |
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me | |
</label> | |
<p>By creating an account you agree to our <a href="file:///media/fuse/drivefs-525daa482b0b219dcaeee7cc8e7ecf57/root/loging.html" style="color:dodgerblue">Terms & Privacy</a>.</p> | |
<div class="clearfix"> | |
<button type="button" class="cancelbtn">Cancel</button> | |
<button type="submit" class="signupbtn">Sign Up</button> | |
</div> | |
</div> | |
</form> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment