sign-up-form/index.html
2023-05-04 12:30:01 -07:00

68 lines
No EOL
3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap" rel="stylesheet">
<title>Sign-Up Form</title>
</head>
<body>
<grid>
<left>
<div></div>
<logo>
<img src="logo.png" alt="Oneflux Enterprises Logo (temporary)"></img>
</logo>
<div></div>
<imagefooter>
<p>Photo by <a href="https://unsplash.com/@xteemu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Teemu Paananen</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
</p>
</imagefooter>
</left>
<right>
<intromsg><p>This is not a fully functioning site yet, but this <i>does</i> represent an intermediate stage in getting everything put together. For now, the focus is on forms. Please find a free form below for your use!</p></intromsg>
<formdiv>
<p><b>Fill me out!</b></p>
<form action="post">
<gridme>
<fn>
<label for="FN">First Name</label>
<input type="text" id="FN">
</fn>
<ln>
<label for="LN">Last Name</label>
<input type="text" id="LN">
</ln>
<email>
<label for="email">Email</label>
<input type="email" id="email">
</email>
<phone>
<label for="phone">Phone Number</label>
<input type="tel" id="phone" maxlength="14">
</phone>
<pwd>
<label for="pwd">Password</label>
<input type="password" id="pwd">
</pwd>
<confpwd>
<label for="confpwd">Confirm Password</label>
<input type="password" id="confpwd">
</confpwd>
</gridme>
</form>
</formdiv>
<outromsg>
<button type="submit" onclick="">Submit Form</button>
<p>Already have an account? <a href="" style="color: darkolivegreen;">Log in</a></p>
</outromsg>
</right>
</grid>
</body>
<script src="main.js"></script>
</html>