Code
<html>
<head>
<style>
main {
display: flex;
font-family: 'Roboto', sans-serif;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>
<title></title>
</head>
</html>
<main class="main-style">
<h1 class="h1-style">Sign in to Photon Designer</h1>
<p class="signup-text">Don't have an account? <a class="link-sign-up" href="/sign-up">Sign up</a>.</p>
<br>
<div class="div-google-signin">
<div id="g_id_onload"></div>
<div class="g_id_signin" data-logo_alignment="left" data-shape="pill" data-size="large" data-text="signin_with" data-theme="outline" data-type="standard">
</div>
</div>
<div class="div-or-separator">
<div class="separator-line"></div>
<span class="separator-text">OR</span>
<div class="separator-line"></div>
</div>
<div>
<div class="div-email-input">
<label class="label-email" for="email">Email</label>
<input id="email" autocomplete="true" class="input-email" name="email" placeholder="alan.turing@example.com" type="email">
</div>
<div class="div-password-input">
<div class="password-label-wrapper">
<label class="label-password" for="password">Password</label>
<a class="password-forgot-link">Forgot your password?</a>
</div>
<input id="password" autocomplete="true" class="input-password" name="password" placeholder="••••••••••••" type="password">
</div>
<button class="continue-button">Continue <span class="continue-button-icon" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" style="width: 100%; height: 100%; min-width: 14px; min-height: 14px;"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 0 0 9 9 9 9 0 0 0 9-9"></path><path d="M17 12a5 5 0 1 0-5 5"></path></g></svg></span></button>
</div>
<p class="terms-text">By signing in, you agree to our <a class="link-terms-service" href="/legal/terms-of-service">Terms of Service</a> and <a class="link-privacy-policy" href="/legal/privacy-policy">Privacy Policy</a>.</p>
</main>