Skip to content

Instantly share code, notes, and snippets.

@CapSens-SM

CapSens-SM/short_form_page.html

Created May 6, 2020 22:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CapSens-SM/e3c5de8d1e9e70dd76530bc976b9eff4 to your computer and use it in GitHub Desktop.
Save CapSens-SM/e3c5de8d1e9e70dd76530bc976b9eff4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
short_form_page.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">
<style>
html,
body {
font-family: 'Lato', sans-serif;
font-size: 1.1rem;
}
</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 py-5">
<div class="row justify-content-center py-5">
<h1 class="col-10 col-md-8 mb-4">Login</h1>
<form class="col-10 col-md-8">
<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="col-10 col-md-8 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>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment