{% extends 'base.html' %}


{% block content %}

<style>
    .logincard{
        margin-top:10%;
    }
    nav, .footer-copyright{
        display:none;
    }
    .bgimg{
        /* background-image: url("https://www.colima.tecnm.mx/img/noticias/Portada1.JPG"); */
        background-image: url("https://ornalisis.ornacol.com/media/images/backgroundlogin.jpeg");
        background-color: lightgrey;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:100%;
        -webkit-filter: blur(4px);   
        filter: blur(4px);
        z-index:-10;
        position:absolute;
    }

    .floating-mobile{
      display: none;
    }

    @media screen and (max-width: 600px) {
        .logincard{
          width: 100%;
        }
        .container{
          width: 100% !important;
        }
        .logincard{
          margin-top:0;

        }
        .btn-floating.halfway-fab{
          position: initial;
        }
        .card-content{
          height: 100vh;
        }
        .card{
          position: absolute;
          margin: 0;
        }
        .col{
          padding: 0 !important;
        }
        .floating-desktop{
          display: none;
        }
        .floating-mobile{
          display: block;
        }
    }

</style>

<div class="bgimg"></div>


<div class="container animated fadeIn">
 <div class="row logincard">
    <div class="col s12 m6 offset-m3 offset-l3">
      <div class="card z-depth-2">
        <div class="card-image">
            <!-- <img src="/media/images/ornacolmono.jpg" height ="450px"> -->
          <form method="post">
        </div>
        <div class="card-content">
            <center><h4><b><i class="material-icons " style="font-size: 25px">trending_up</i> ORNALISIS + BI-ORNALISIS</b></h4>
              <h5>Análisis de datos</h5>
              <img src="/media/images/data_analisis.png" width="100%" height="230px">
              <span class="card-title">Iniciar sesión</span>
             
            </center>

              {% csrf_token %}
              {{ form.as_p }}

            <!-- <a>¿Has olvidado la contraseña?</a> -->
            <br/><br/>
         <button type="submit" class="btn-floating btn-large halfway-fab waves-effect waves-light green floating-desktop">
            <i class="material-icons">forward</i> 
          </button>
          <center><button type="submit" class="btn waves-effect waves-light green floating-mobile">
            Inciar sesión
          </button></center>
        </div>
        </form>
      </div>
    </div>
  </div>
</div>


{% endblock content %}