<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<div id="flexbox">
<div id="image">
<div id="odin">
<img src="assets/bicycle.svg" alt="">
<span>Cycling</span>
</div>
<div id="adnotation">
<span>Photo by me</span>
</div>
</div>
<div id="interface">
<div id="encouragement">
<span>
<em>
One-a day I'mma goin' to Malta to bigger hotel<br>
In the morning I go down to eat breakfast<br>
I tell a waitress "I wanna two pieces of toast"<br>
She brings me only one piece<br>
</em>
<span style="float: right; font-size: 1.2rem;">~ The Italian Man</span>
</span>
</div>
<form action="#">
<div id="enter">
<h2>Let's do this!</h2>
<div id="form-grid">
<div class="element">
<label for="fn">First name</label>
<input type="text" id="fn">
</div>
<div class="element">
<label for="ln">Last name</label>
<input type="text" id="ln">
</div>
<div class="element">
<label for="em">Email</label>
<input type="email" id="em">
</div>
<div class="element">
<label for="pn">Phone number</label>
<input type="text" id="pn">
</div>
<div class="element">
<label for="psk">Password</label>
<input type="password" id="psk">
</div>
<div class="element">
<label for="cpsk">Confirm password</label>
<input type="password" id="cpsk">
</div>
</div>
</div>
<div id="actions">
<button type="submit">Create account</button>
<span>
Already have an account? <a href="#">Log in</a>
</span>
</div>
</form>
</div>
</div>
</body>
</html>