<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Forms</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Fraunces:opsz,wght@9..144,500&family=Montserrat:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<h1 class="header">Ace Alliance Tennis Club</h1>
<div class="loadingio-spinner-ball-qscqo961k2a">
<div class="ldio-9320vht2eq8">
<div></div>
</div>
</div>
<img src="https://i.ibb.co/pj3g1CQ/image.png" alt="image" border="0">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac risus sit amet justo ullamcorper mattis. Nullam at cursus orci. Integer volutpat justo in cursus volutpat. Curabitur bibendum urna ut ligula tincidunt, ac tincidunt orci hendrerit. Phasellus ac nulla in dui malesuada venenatis vitae eget tellus. Integer euismod, purus nec consequat accumsan, elit eros dapibus elit, nec sollicitudin metus nisi id urna. Suspendisse auctor facilisis justo, vel dictum libero ultrices eu. Curabitur consectetur, orci vel tincidunt imperdiet, dolor sem finibus arcu, in volutpat lectus nulla at urna. Phasellus a nunc vitae elit tincidunt bibendum. Maecenas eu malesuada velit. Aliquam erat volutpat.
Suspendisse potenti. Nulla facilisi. Nulla facilisi. Nullam vel risus mi. Vivamus vulputate interdum sem, ac hendrerit elit fermentum vel. Nunc malesuada, orci eget lacinia dapibus, metus turpis viverra augue, vel fermentum libero turpis vel dolor. Suspendisse ac purus eu nunc aliquet vulputate. Nam et justo ac ante sagittis suscipit. Aenean vitae consequat libero. Maecenas sodales accumsan gravida. Duis non ultricies tellus, non hendrerit massa. Nullam non erat in libero ultricies fermentum ac non felis. Integer dictum ullamcorper velit, sit amet fringilla elit fringilla eu.
</p>
<section>
<label class="title" for="first_name">First Name:</label>
<input type="text" id="first_name">
<label class="title" for="last_name">Last Name:</label>
<input type="text" id="last_name">
<label class="title" for="user_email">Email Address:</label>
<input type="email" id="user_email" name="email" placeholder="you@example.com">
<label class="title" for="user_password">Password:</label>
<input type="password" id="user_password" name="password">
<label class="title" for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password">
<label class="title" for="phone_number">Phone number:</label>
<input type="number" id="phone_number" name="phone_number">
</section>
<div class="container">
<button>Create Account</button>
<span>Already have an account?</span>
<button class="log-in">Log in</button>
</div>
</body>
</html>
body {
background-color: rgb(113, 176, 20);
margin: 0;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
}
h1 {
color: white;
font-size: 2em;
text-align: center;
margin: 20px 0;
font-family: 'Montserrat', sans-serif;
padding: 10px;
}
img {
width: 50%;
height: 100vh;
margin-left: au;
}
.description {
display: block;
width: 50%;
margin-left: auto;
align-items: flex-start;
align-self: flex-start;
margin-top: -100vh;
color: white;
font-family: 'Fraunces', serif;
padding: auto;
}
section {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: 20px;
text-align: left;
color: white;
}
.title{
text-align: left;
margin-bottom: 8px;
font-weight: bold;
color: white;
}
input {
width: calc(50% - 35px);
padding: 10px;
margin-bottom: 36px;
}
.container{
position: relative;
right: 0;
}
button {
background-color: white;
color: rgb(113, 176, 20);
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
margin-left: auto;
}
.log-in {
margin-left: 10px;
background-color: rgb(113, 176, 20);
color: white;
}
I need help with CSS, I am struggling to keep the section on the right while label (class= .title) of the input remains on the left. My div container that has the create account button/log in is also stuck on the left side of the screen and I am unsure on how to fix it. Please help
