How to Design Checkout Form HTML and CSS

How to Design Checkout Form HTML and CSS





1. Checkout Form.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
	<title>Register Form</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
	<!-- add style -->
	<link rel="stylesheet" type="text/css" href="css/style.css"> </head>

<body>
	<div class="signup-form">
		<form action="" method="post">
			<div class="card-header">
				<div class="card-cover" style="background-image: url('images/background-image.jpg')"></div> <img class="card-avatar" src="images/profile.jpg" alt="avatar" />
				<h1 class="card-fullname">Soeng Souy</h1> </div>
			<br>
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-prepend"> <span class="input-group-text">
						<span class="fa fa-user"></span> </span>
					</div>
					<input type="text" class="form-control" name="username" placeholder="Username" required="required"> </div>
			</div>
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-prepend"> <span class="input-group-text">
						<i class="fa fa-lock"></i>
					</span> </div>
					<input type="password" class="form-control" name="password" placeholder="Password" required="required"> </div>
			</div>
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-prepend"> <span class="input-group-text">
						<i class="fa fa-lock"></i>
						<i class="fa fa-check"></i>
					</span> </div>
					<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required"> </div>
			</div>
			<div class="form-group">
				<label class="form-check-label">
					<input type="checkbox" required="required"> I accept the <a href="#">Terms of Use</a> &amp; <a href="#">Privacy Policy</a></label>
			</div>
			<div class="form-group">
				<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
			</div>
		</form>
		<div class="text-center color-already-login">Already have an account? <a href="#">Login here</a></div>
	</div>
</body>
</html>

1. style.css

body {
  font-family: Arial;
  font-size: 17px;
  padding: 8px;
}

h2 {
  text-align: left;
}

* {
  box-sizing: border-box;
}

.row {
  display: -ms-flexbox;
  /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE10 */
  flex-wrap: wrap;
  margin: 0 -10px;
}

.col-25 {
  -ms-flex: 25%;
  /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%;
  /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%;
  /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {
  background-color: #cfcccc85;
  padding: 3px 18px 13px 18px;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

a {
  color: #2196F3;
}

hr {
  border: 1px solid lightgrey;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }

  .col-25 {
    margin-bottom: 20px;
  }
}
Reactions

Post a Comment

2 Comments