2025-04-22 16:21:26 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2025-04-23 08:30:28 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
2025-04-22 16:21:26 +02:00
|
|
|
<title>Sign Up Form Project</title>
|
2025-04-23 08:30:28 +02:00
|
|
|
<link rel="stylesheet" href="style.css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-04-23 08:42:19 +02:00
|
|
|
<div class="full-screen-container">
|
2025-04-23 09:11:15 +02:00
|
|
|
<div class="left-panel">
|
|
|
|
|
<div class="picture-container">
|
|
|
|
|
<img src="nice_pic.jpg" class="left-panel-pic" alt="" />
|
2025-04-23 08:42:19 +02:00
|
|
|
</div>
|
2025-04-23 09:11:15 +02:00
|
|
|
<div class="odin-banner">
|
|
|
|
|
<img src="odin-lined.png" alt="" class="odin-logo" />
|
|
|
|
|
<p class="odin-logo-text">ODIN</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="picture-caption-container">
|
|
|
|
|
<p class="picture-caption">Photo by someone, somewhere</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-04-29 18:02:17 +02:00
|
|
|
<div class="right-panel">
|
|
|
|
|
<div class="top-right-area">
|
2025-05-05 15:20:30 +02:00
|
|
|
<h3 class="right-panel-header first right-panel-left-margin">
|
|
|
|
|
This is not a real online service! You know you need something like
|
|
|
|
|
this in your life to help you realize your deepest dreams. Sign up
|
|
|
|
|
<em>now</em> to get started.
|
|
|
|
|
</h3>
|
|
|
|
|
<h3 class="right-panel-header second right-panel-left-margin">
|
|
|
|
|
You <em>know</em> you want to.
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-area subtle-shadow">
|
|
|
|
|
<div class="form-contents right-panel-left-margin">
|
|
|
|
|
<div class="form-header">
|
|
|
|
|
<h3>Let's do this!</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-fields">
|
|
|
|
|
<div class="form-field-container">
|
|
|
|
|
<h5 class="form-field-header">First name</h5>
|
|
|
|
|
<input class="form-field-value-container"></input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-field-container">
|
|
|
|
|
<h5 class="form-field-header">Last name</h5>
|
|
|
|
|
<input class="form-field-value-container"></input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-field-container">
|
|
|
|
|
<h5 class="form-field-header">Email</h5>
|
|
|
|
|
<input class="form-field-value-container"></input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-field-container">
|
|
|
|
|
<h5 class="form-field-header">Phone number</h5>
|
|
|
|
|
<input class="form-field-value-container"></input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-field-container">
|
|
|
|
|
<h5 class="form-field-header">Password</h5>
|
|
|
|
|
<input class="form-field-value-container"></input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-field-container">
|
|
|
|
|
<h5 class="form-field-header">Confirm password</h5>
|
|
|
|
|
<input class="form-field-value-container"></input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-04-29 18:02:17 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="bottom-right-area">
|
2025-05-05 15:20:30 +02:00
|
|
|
<div
|
|
|
|
|
class="create-account-button bg-main subtle-shadow right-panel-left-margin"
|
|
|
|
|
>
|
|
|
|
|
Create Account
|
|
|
|
|
</div>
|
|
|
|
|
<p class="existing-account-nudge-text right-panel-left-margin">
|
|
|
|
|
Already have an account? <span class="text-color-main">Log in</span>
|
|
|
|
|
</p>
|
2025-04-29 18:02:17 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-04-23 08:42:19 +02:00
|
|
|
</div>
|
2025-04-23 08:30:28 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
