CapSens-SM/final_form_two_part.html

## final_form_two_part.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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

    <!-- CSS is inlined in order to make it fit in one file. Of course this is not a good practice for your own project. -->
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");

      html,
      body {
        font-family: 'Lato', sans-serif;
        font-size: 15px; }

      .shadow {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}

      #loginFormSection {
        position: relative; }

      .buffer {
        min-height: calc(100vh - 55px); }
        @media (max-width: 992px) {
          .buffer {
            min-height: 15rem; } }
        .buffer .bg-holder {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          bottom: 0;
          background: url("https://images.unsplash.com/photo-1506862047911-9815cdcb77c2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
          background-size: cover;
          background-position: center right; }
    </style>

    <title>Design a short form page.</title>
  </head>
  <body>
    <nav class="navbar navbar-light bg-info shadow">
      <a class="navbar-brand text-light ml-md-2 ml-lg-5" href="#">
        <img src="https://fakeimg.pl/35x35/" width="30" height="30" class="d-inline-block align-top mr-3" alt="">
        Design a short form page
      </a>
    </nav>

    <section class="form-wrapper container-fluid" id="loginFormSection">

      <div class="row justify-content-center">

        <div class="col-lg-6 buffer">
          <div class="bg-holder"></div>
        </div>

        <div class="col-lg-6 d-flex">
          <div class="inner py-5 m-auto row">
            <h1 class="offset-lg-2 col-lg-8 mb-5">Login</h1>

            <form class="offset-lg-2 col-lg-8 mb-4">
              <div class="form-group">
                <label for="exampleInputEmail1">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              </div>

              <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>

              <button type="submit" class="btn btn-info mt-5 px-4">Submit</button>
            </form>

            <div class="offset-lg-2 col-lg-8 mb-4 mt-5">
              <a href="#" class="d-inline-block text-info text-left">Forgot you password ?</a>
              <br />
              <a href="#" class="d-inline-block text-info mt-4 text-left">Doesn't have an account ? Register now.</a>
            </div>
          </div>
        </div>

      </div>
    </section>
  </body>
</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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

	<!-- CSS is inlined in order to make it fit in one file. Of course this is not a good practice for your own project. -->
	<style>
	@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");

	html,
	body {
	font-family: 'Lato', sans-serif;
	font-size: 15px; }

	.shadow {
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}

	#loginFormSection {
	position: relative; }

	.buffer {
	min-height: calc(100vh - 55px); }
	@media (max-width: 992px) {
	.buffer {
	min-height: 15rem; } }
	.buffer .bg-holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	bottom: 0;
	background: url("https://images.unsplash.com/photo-1506862047911-9815cdcb77c2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
	background-size: cover;
	background-position: center right; }
	</style>

	<title>Design a short form page.</title>
	</head>
	<body>
	<nav class="navbar navbar-light bg-info shadow">
	<a class="navbar-brand text-light ml-md-2 ml-lg-5" href="#">
	<img src="https://fakeimg.pl/35x35/" width="30" height="30" class="d-inline-block align-top mr-3" alt="">
	Design a short form page
	</a>
	</nav>

	<section class="form-wrapper container-fluid" id="loginFormSection">

	<div class="row justify-content-center">

	<div class="col-lg-6 buffer">
	<div class="bg-holder"></div>
	</div>

	<div class="col-lg-6 d-flex">
	<div class="inner py-5 m-auto row">
	<h1 class="offset-lg-2 col-lg-8 mb-5">Login</h1>

	<form class="offset-lg-2 col-lg-8 mb-4">
	<div class="form-group">
	<label for="exampleInputEmail1">Email</label>
	<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
	</div>

	<div class="form-group">
	<label for="exampleInputPassword1">Password</label>
	<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
	</div>

	<button type="submit" class="btn btn-info mt-5 px-4">Submit</button>
	</form>

	<div class="offset-lg-2 col-lg-8 mb-4 mt-5">
	<a href="#" class="d-inline-block text-info text-left">Forgot you password ?</a>
	<br />
	<a href="#" class="d-inline-block text-info mt-4 text-left">Doesn't have an account ? Register now.</a>
	</div>
	</div>
	</div>

	</div>
	</section>
	</body>
	</html>