# Become a professional in either field

Man children rejoiced yet uncommonly his ten who. Yet uncommonly his ten who diminution astonished. Yet uncommonly his ten who diminution astonished.

Explore our courses

## Welcome back

New here? Create an account

Enter email id
Enter password
Remember me?
Forgot password?

Or sign in with

Google
Facebook

#### HTML

    <section class="mb-9 position-relative" style="background-image:url(assets/images/bg/07.jpg); background-position: center left; background-size: cover;">
    	<!-- Background dark overlay -->
    	<div class="bg-overlay bg-blue opacity-9"></div>
    	<div class="container z-index-9 position-relative">
    		<div class="row g-4 justify-content-between align-items-center">
    			<!-- Content -->
    			<div class="col-lg-6">
    				<h1 class="text-white">Become a professional in either field</h1>
    				<p class="text-white mb-3">Man children rejoiced yet uncommonly his ten who. Yet uncommonly his ten who diminution astonished. Yet uncommonly his ten who diminution astonished.</p>
    				<a href="#" class="btn btn-white mb-0">Explore our courses<i class="bi bi-arrow-right ms-2"></i></a>
    			</div>

    			<!-- Form -->
    			<div class="col-lg-6 col-xl-5 mb-n9">
    				<div class="card card-body shadow p-4 p-sm-5">
    					<!-- Title -->
    					<h2 class="mb-0 h3">Welcome back</h2>
    					<p class="mb-0">New here?<a href="#"> Create an account</a></p>
    					<!-- Form START -->
    					<form class="mt-3 mt-sm-4 text-start">
    						<!-- Email -->
    						<div class="mb-3">
    							<label class="form-label">Enter email id</label>
    							<input type="email" class="form-control">
    						</div>
    						<!-- Password -->
    						<div class="mb-3">
    							<label class="form-label">Enter password</label>
    							<input class="form-control" type="password">
    						</div>
    						<!-- Remember me -->
    						<div class="mb-3 d-sm-flex justify-content-between">
    							<div>
    								<input type="checkbox" class="form-check-input" id="rememberCheck">
    								<label class="form-check-label" for="rememberCheck">Remember me?</label>
    							</div>
    							<a href="#" class="text-primary-hover text-muted">Forgot password?</a>
    						</div>
    						<!-- Button -->
    						<div class="d-grid"><button type="submit" class="btn btn-dark mb-0">Login</button></div>

    						<!-- Divider -->
    						<div class="position-relative my-4">
    							<hr>
    							<p class="small position-absolute top-50 start-50 translate-middle bg-body px-2">Or sign in with</p>
    						</div>

    						<div class="row g-3">
    							<div class="col-sm-6 d-grid">
    								<a href="#" class="btn btn-outline-light mb-0"><i class="fab fa-fw fa-google text-google-icon me-2"></i>Google</a>
    							</div>

    							<div class="col-sm-6 d-grid">
    								<a href="#" class="btn btn-outline-light mb-0"><i class="fab fa-fw fa-facebook-f text-facebook me-2"></i>Facebook</a>
    							</div>
    						</div>
    					</form>
    					<!-- Form END -->
    				</div>
    			</div>

    		</div> <!-- Row END -->
    	</div>
    	</section>