title: Flexbox login page
body: <p>Well i am not a great designer but i am loving this flexbox.
  I am making a small login form demo with flexbox using angular 5 material.
  I wish to divide my login form into 2 parts.
  I am trying to make it responsive fully .
  here is what i am looking for : <a href="https://i.stack.imgur.com/D0noo.jpg" rel="nofollow noreferrer">my login image</a></p>
  
  <p>So far i have done only this:</p>
  
  <p><strong>login.component.html</strong></p>
  
  <pre><code>&lt;div class="login-container"&gt;
    &lt;mat-card class="mat-elevation-z12"&gt;
      &lt;mat-card-content&gt;
  
      &lt;/mat-card-content&gt;
    &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>login.component.scss</strong></p>
  
  <pre><code>.login-container {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0px;
    background: #3f51b5;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  
    mat-card {
      height: 500px;
      width: 900px;
    }
  
    mat-card-content {
  
    }
  }
  </code></pre>
  
  <p>Can anybody tell me how I divide this form into 2 parts with the image on the left side block and username/password field on right side of the block?</p>
  
  <p>At the same time how do I make it responsive?</p>
  
  <p>I am not looking for full design but any help would be much appreciated.</p>