{% extends "base.html" %}

{% block custom_css %}
<style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
      }

      .form-register {
        max-width: 720px;
        padding: 19px 29px 29px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      .form-register .form-register-heading,
      .form-register .checkbox {
        margin-bottom: 10px;
      }
      .form-register input[type="text"],
      .form-register input[type="password"] {
        font-size: 16px;
        height: auto;
        margin-bottom: 15px;
        padding: 7px 9px;
      }

      #curtain {
      	border-radius: 5px;
      	
      	/*margin-left: auto;
      	margin-right: auto;
      	width: 366px;*/
      }

      #curtain_div {
      	margin-left: auto;
      	margin-right: auto;
      	width: 366px;
      	margin-bottom: 10px;
      }

    </style>
{% endblock %}


{% block content %}
<form class="form-register" action="" method="post">
	{% csrf_token %}
	<h3 class="form-register-heading">sign into miya!</h3>
	<div id="curtain_div">
		<img id="curtain" src="/static/img/s24510739.jpg"/>
	</div>
	
	{{ form.as_p }}
	<!-- <input type="text" name="username" class="input-block-level" placeholder="Username">
	<input type="password" name="password" class="input-block-level" placeholder="Password">
	<input type="password" name="password_comfirm" class="input-block-level" placeholder="Password Comfirm"> -->
	
	<button class="btn btn-primary" type="submit">Submit</button>
</form>
{% endblock %}