HTML CODE 👇
<!DOCTYPE html>
<html>
<head>
<title>New Account Form</title>
</head>
<body>
<h3><strong>Create New Account</strong></h3>
<div class="section">
<form>
<label for="username" style="font-size: 20px">Username</label>
<input type="text" id="username" name="username" required><br>
<label for="email" style="font-size: 20px">Email</label>
<input type="text" id="email" name="email" required><br>
<label for="phonenumber" style="font-size: 20px">phonenumber</label>
<input type="number" id="number" name="phonenumber" required><br>
<label for="dateofbirth" style="font-size: 20px">Date of Birth</label>
<input type="Date" id="dateofbirth" name="dateofbirth" required><br>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
CSS STYLE 👇
<style type="text/css">
*{margin: 0;
padding: 0;
box-sizing: border-box;}
body{background-color: #e9ebee;}
h3{text-align: center;padding-top: 2em;font-size: 30px;color: green;}
.section{text-align: center;padding-top: 2em;}
#email{margin-top: 1em;margin-left: 1.8em;border:solid 1px;border-radius: 5px;}
#number{margin-top: 1em;margin-right:1.6em;border:solid 1px;border-radius: 5px; }
#username{border:solid 1px;border-radius: 5px;}
#dateofbirth{margin-top: 1em;margin-right: 1.7em;border:solid 1px;border-radius: 5px;}
button{margin-top: 3em;border:solid 3px #000000;border-radius: 5px;font-size: 20px;background-color: green;color: white;opacity: 1;}
#username:hover,#email:hover,#number:hover,#dateofbirth:hover{border:solid green;box-shadow: 2px 2px 7px green;}
button:hover{border:solid black;box-shadow: 2px 2px 8px 7px green ;opacity: 3;cursor: pointer;}
@media screen and (max-width: 10px)
</style>
Comments
Post a Comment