<!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">
	<title>How to style forms with CSS: A beginner’s guide</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="site__container">
		<main class="hero__images">
			<main class="card__wrapper">
				<!-- background for the form -->
				<section class="card__forms">

					<!-- Wrapper for all items of the box -->
					<section class="items__wrapper">

						<div class="site__logo">MS</div>
						<div class="sign__caption">
							<p>Signin for home delivery service</p>
						</div>

						<div class="user_id">
							<!-- user id options for username and password -->
							<input type="text" name="Username" placeholder="Username">
							<input type="password" name="Password" placeholder="Password">
						</div>

						<div class="checkbox__wrapper">
							<!-- Input filed for checkbox and forget password -->
							<input type="checkbox" name="checkbox">
							<label for="checkbox">stay signed in</label> 
							<a href="#">Forget Password?</a>
						</div>

						<div class="btn__wrapper">
							<!-- Sign in button -->
							<button class="btn__signin">sign in</button>
						</div>

						<div class="signup__option">
							<!-- Sign up opption for new users -->
							<p>Don't have an accout yet? <a href="#">Sign Up!</a></p>
						</div>
					</section>
				</section>
			</main>
		</main>
	</div>
</body>
</html>
*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.site__container {
    width: 100vw;
    height: 100vh;
}

.hero__images {
    height: 100%;
    /* background-image: url("Screenshot\ \(209\).png"); */
    background-image: url("https://i.postimg.cc/NfX1S37K/delivery-man.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* background-color: aqua; */
}

.card__wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card__forms {
    display: flex;
    justify-content: center;
    width: 400px;
    height: 400px;
    background-color: rgb(1, 32, 32, 0.4);
    border-radius: 0.5rem;
    box-shadow: 3.5px 3.5px 4px 2px rgba(0, 0, 0, 0.3);
    /* border: 1px solid rgb(89, 250, 156); */
    border-top: 2px solid rgb(89, 250, 156);
    border-bottom: 2px solid rgb(89, 250, 156);
}

.site__logo {
    width: 40px;
    padding: 4px;
    margin: 2.0rem 5rem;
    text-align: center;
    border-radius: 4px;
    font-size: x-large;
    font-weight: bolder;
    font-family: 'Trebuchet MS', sans-serif;
    background-color: rgb(89, 250, 156);
    color: rgb(1, 32, 32);
    border-radius: 50%;
    cursor: default;
}

.sign__caption p {
    color: white;
    font-family: calibri;
    font-style: italic;
    text-transform: lowercase;
    margin-bottom: 1.5rem;
}

.user_id input {
    width: 100%;
    display: block;
    outline: none;
    border: 0;
    padding: 1rem;
    border-radius: 20px;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.user_id input::placeholder{
    color: rgb(1, 32, 32);
}

.user_id input:active {
    outline: 2px solid rgb(89, 250, 156);
}


.checkbox__wrapper label {
        color: white;
        font-family: calibri;
        text-transform: lowercase;
}

.checkbox__wrapper a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.checkbox__wrapper a:hover {
        color: rgb(255, 255, 255);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: normal;
}

.btn__wrapper button {
    width: 100%;
    border: none;
    padding: 1rem;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.btn__wrapper button:hover {
    background-color: rgb(89, 250, 156); 
    color: white;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

.signup__option p {
    color: white;
        font-family: calibri;
        text-transform: lowercase;
}
.signup__option a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.signup__option a:hover {
    color: rgb(255, 255, 255);
    font-family: calibri;
    text-transform: lowercase;
    text-decoration: none;
    font-style: normal;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.