Created
May 7, 2020 18:56
-
-
Save CapSens-SM/9b052c6997255a6d6703e51e07a06058 to your computer and use it in GitHub Desktop.
a basic form with an image on the left side
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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"> | |
<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: 1.15rem; } | |
#loginFormSection { | |
position: relative; } | |
.buffer { | |
min-height: calc(100vh - 65px); } | |
@media (max-width: 992px) { | |
.buffer { | |
min-height: 15rem; } } | |
.buffer .bg-holder { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
bottom: 0; | |
background: url("https://fakeimg.pl/840x740/?text=HelloWorld&font=lobster"); | |
background-size: cover; | |
background-position: center center; } | |
</style> | |
<title>Design a short form page.</title> | |
</head> | |
<body> | |
<nav class="navbar navbar-light bg-info"> | |
<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" 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-4">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-4 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">Forgot you password ?</a> | |
<br /> | |
<a href="#" class="d-inline-block text-info mt-4">Doesn't have an account ? Register now.</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment