Full Stack web development in Python, Flask and MySql — part 2

Joseph Rominda
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

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 &nbsp; <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 &nbsp; <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 1

Part 2

Part 3

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade