Full Stack web development in Python, Flask and MySql — part 2
Sep 8, 2018 · 2 min read
Designing the Login and registration page.
Both Login and Register forms will be on the same page
The style.css and media queries.css for the entire project can be found in part 1
The link to the hero image
Login_register.html
...
</header>
<!--HEADER END-->
<!--LOGIN REGISTER START--><section class="section-login-register"><div class="full-width-image">
<img src="img/login_register/1.jpg" alt="Single Post">
<div class="hero-title">
<h3>Login / Register.</h3>
</div>
</div><div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="panel">
<div class="login-form">
<div class="form-top">
<div class="form-top-left">
<h3>Login.</h3>
<p>Enter username and password to log in.</p>
</div>
<div class="form-top-right">
<i class="fas fa-lock"></i>
</div>
<div class="clearfix"></div>
</div><div><!--THE LOGIN FORM--> <form id="login-form">
<input type="text" name="username" value="" placeholder="Enter username" class="form-control">
<input type="password" name="password" value="" class="form-control" placeholder="Enter password">
<button class="button-primary">Log in <i class="fas fa-sign-in-alt"></i></button>
<p style="width: 100%; display: block;text-align: center;font-size: 0.9em;">Or log in with</p><!--LOGIN WITH SOCIAL MEDIA BUTTONS--> <button class="btn btn-primary"><i class="fab fa-facebook-f"></i> - Facebook</button>
<button class="btn btn-danger"><i class="fab fa-google-plus-g"></i> - Google +</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="panel">
<div class="register-form">
<div class="form-top">
<div class="form-top-left">
<h3>Register.</h3>
<p>Fill in the form below to get instant access.</p>
</div>
<div class="form-top-right">
<i class="fas fa-pencil-alt"></i>
</div>
</div><div>
<!--REGISTRATION FORM--> <form id="register-form">
<input type="text" name="username" value="" placeholder="Enter username" class="form-control">
<input type="email" name="email" value="" placeholder="Enter email" class="form-control">
<input type="password" name="password" value="" class="form-control" style="margin-bottom: 20px;" placeholder="Enter password">
<input type="password" name="confirmpassword" value="" class="form-control" placeholder="Confirm password">
<button class="button-primary">Register <i class="fas fa-registered"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--LOGIN REGISTER END-->
<footer>
...

I hope you would see this result after completing this section.
Contents
Part 2