Professional Web Templates

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Loging Form</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">	
</head>
<body>
	<form class="form_sigin_up">
        <h3>Sign Up</h3>
        <p>Already a member? <a href="#" class="link_bold">Login</a></p>
      
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>First Name <span>*</span></label>
                    <input type="text" class="form_control" placeholder="">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Last Name <span>*</span></label>
                    <input type="text" class="form_control" placeholder="">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Phone No. <span>*</span></label>
                    <input type="number" class="form_control" placeholder="">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Email Id <span>*</span></label>
                    <input type="email" class="form_control" placeholder="">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Password <span>*</span></label>
                    <input type="password" class="form_control" placeholder="">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Confirm Password <span>*</span></label>
                    <input type="password" class="form_control" placeholder="">
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="flexCheckDefault" wire:model="terms">
                    <label class="form-check-label" for="flexCheckDefault">I have read and agreed to the 
                    <a href="#" class="link_bold">Terms & Conditions</a> & 
                    <a href="#" class="link_bold">Privacy Policy</a>.</label>
                </div>
            </div>
            <div class="col-md-12">
                <button class="theme-btn style-one">Create Account</button>
            </div>
        </div>
    </form>
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	 font-family: "Poppins", sans-serif;
}
body {
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: #07161d;
}
.form_sigin_up {
    background: #fff;
    max-width: 700px;
    padding: 30px;
    position: relative;
    z-index: 1;
}
.form_sigin_up:before {
    content:'';
    background-image: url(https://themeelements.com/img/themeelement-logo.png);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index:-1;
    background-size: 10%;
    background-repeat: repeat;
    top: 0;
    left: 0;
    opacity: .03;
}
.form_sigin_up p {
        margin-bottom: 20px;
}
.link_bold {
        color: #991b37;
    font-weight: 700;
}
.form_sigin_up .form_control {
    padding: 12px 10px;
    line-height: 20px;
    border: 1px solid #d2cfcf;
    border-radius: 6px;
    margin-bottom: 13px;
    width: 100%;
}
.form_sigin_up label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 3px;
}
.theme-btn.style-one {
    font-weight: 500;
    color: #fff;
    border: none;
    font-size: 16px;
    padding: 12px 20px;
    line-height: 16px;
    border-radius: 5px;
    transition: all 0.3sease-in;
    background-color: #13172b;
}
.form_sigin_up input:focus-visible {
	border: none;
	outline: none;
}

HTML

CSS

JS

Output