quasar Vue.js

index.html

<div id="app">
  <div class="wrapper">
    <!--  Header  -->
    <header class="header">
      <div class="header__image">
        <svg id="svg-knuckles" viewBox="0 0 100 61" width="100px" height="100px">
        <path fill="currentColor" d="M14.461,59.2c0.825-2.102,3.405-2.551,5.278-3.441
		c1.841-0.876,4.195-1.754,5.507-3.213c4.019-4.468,1.548-13.749-3.441-14.684c-2.275-0.427-4.793,0.711-7.113,0.688
		C3.452,38.436-1.843,27.13,2.53,18.587c0.904-1.766,2.756-2.908,3.671-4.359c0.609-0.969,0.544-2.387,1.376-3.213
		c0.594-0.589,2.54-1.46,3.901-1.376c1.311,0.082,1.936,1.2,3.213,1.606c1.002,0.319,2.718,0.327,4.129,0.688
		c5.621,1.439,5.337-0.443,8.261-3.9c1.137-1.344,3.436-2.593,4.131-3.442c0.569-0.697,0.997-2.495,1.835-2.983
		c0.95-0.553,2.657-0.783,4.129-0.459c0.972,0.214,1.583,1.355,2.983,2.065c1.182,0.598,2.648,0.642,3.671,1.147
		c2.39,1.18,3.475,3.822,6.195,3.901c2.3,0.066,3.544-2.302,6.195-3.671c1.147-0.592,2.459-0.689,3.442-1.147
		c2.431-1.133,3.869-3.723,7.802-1.606c0.664,2.883,2.943,3.305,5.047,5.507c1.733,1.814,2.722,5.129,4.818,5.507
		c1.289,0.232,2.439-0.64,4.361-1.147c1.36-0.36,2.706-0.165,3.67-0.459c1.283-0.392,2.01-1.506,3.213-1.606
		c1.439-0.12,2.596,0.711,4.13,1.376c1.796,5.647,7.082,6.943,6.195,15.604c-0.54,5.286-5.258,11.822-13.309,11.932
		c-2.194,0.03-4.639-1.077-7.113-0.688c-4.968,0.779-7.886,9.253-3.9,14.226c1.673,2.087,5.565,3.388,8.719,5.048
		c0.738,0.388,2.376,1.273,2.295,2.064c-0.213,2.103-6.32,0.242-7.801,0c-17.346-2.831-38.159-2.901-55.528-0.229
		C19.69,59.367,16.656,61.035,14.461,59.2z M37.636,26.847c3.471,0.021,7.702-2.565,8.949-5.965
		c2.154-5.873-1.684-10.716-4.819-12.162c-1.406-0.648-3.864-0.898-5.507-0.688C25.429,9.416,25.522,26.772,37.636,26.847z
		 M53.927,13.08c-3.752,7.451,2.811,14.279,9.408,13.767C75.66,25.891,74.03,6.432,61.499,8.032
		C57.396,8.556,54.755,11.439,53.927,13.08z M5.512,25.7C6.546,39.031,28.42,35,23.41,21.341c-1.304-3.555-5.508-5.99-9.637-5.507
		C8.772,16.417,5.094,20.305,5.512,25.7z M76.185,26.159c1.391,11.763,20.354,9.579,18.355-2.982
		c-0.677-4.262-5.103-8.01-10.325-7.343C78.893,16.514,75.533,20.646,76.185,26.159z M43.143,30.978
		c-3.987,1.474-7.534,1.219-8.949,3.211c-2.852,4.016,1.935,12.317,3.901,13.768c4.383,3.233,19.908,2.606,23.635,0.23
		c2.04-1.302,7.011-10.172,4.129-14.227c-1.581-2.225-5.858-1.438-9.637-2.983c-3.061-1.254-4.054-3.44-7.342-2.753
		C46.626,28.695,45.774,30.004,43.143,30.978z"></path>
    </svg>
      </div>
    </header>

    <!--  Sign Up  -->
    <section class="section sign-up">
      <h3>Design is dead</h3>
      <h4>Bug bounty platform</h4>
      <form action="">
        <q-field class="field" icon="account_circle" error-label="We need a valid email">
          <q-input v-model="email" type="text" float-label="Email Address" />
        </q-field>
   
        <q-field class="field" icon="lock" error-label="We need a valid password">
          <q-input v-model="password" type="password" float-label="Password" />
        </q-field>

        <q-btn color="secondary" label="login" class="Btn">
          </q-btn>
       <p class="forgotPassword">Forgot password?</p>
      
      </form>
      
      <div class="noAccount">
        <p>Don't have an account?</p>
        <q-btn color="" label="Sign up" class="Btn Btn-signup">
          </q-btn>
      </div>
    </section>
    
  
  <div class="steps">
    <div class="step active"></div>
    <div class="step"></div>
    <div class="step"></div>
  </div>

  </div>
</div>

quasar-vue-js.markdown

quasar Vue.js

A Pen by Teguh Badru Salam on CodePen.

License.

script.js

new Vue({
  el: '#app',
  data: function () {
    return {
      email: '',
      password: ''
    }
  }
})

scripts

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/quasar-framework@latest/dist/umd/quasar.mat.umd.min.js"></script>

style.scss

// Colors
$color_ocean: #53bbb3;
$color_purple: #4b2383;
$color_grey: #f2f2f2;

// Gradients
$gradient: linear-gradient(to right bottom, #53bbb3 0%, #4b2383 100%);

// Imports
@import url("https://fonts.googleapis.com/css?family=Nunito:300");

// Resets
* {
  box-sizing: border-box;
  font-family: inherit;
}

body {
  margin: 0;
  padding-bottom: 20px;
  font-family: "Nunito", sans-serif;
}

// Global Layout
.wrapper {
  margin: 20px auto;
  width: 400px;
  height: 800px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  background: $gradient;
}

.header {
  text-align: center;
  height: 20%;
  color: white;
}
.section {
  background-color: $color_grey;
  padding: 20px;
  
  
  h3 {
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto;
    color: $color_purple;
    font-size: 1.7em;
    font-weight: 700;
  }
  h4 {
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto;
    color: $color_purple;
    font-size: 1.3em;
    font-weight: 700;
  }
// Form, input and button styles
form {
  overflow: auto;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .field {
    padding: 0 1rem;
    margin: 10px 0;
    height: 65px;
    background-color: white;
  }
  
  
.forgotPassword {
  margin: 10px auto;
  text-decoration: underline;
  cursor: pointer;
}
}

.Btn {
  height: 60px;
  margin: 20px 0 5px 0;
  padding: 10px;
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 900;
}

.noAccount {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  p {
    margin: auto;
  }
  .Btn-signup {
    color: black;
    border: 2px solid black;
  }
}
}


.steps {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  
  .step{
  height: 10px;
  width: 10px;
    margin: 0 10px;
  border-radius: 30px;
  background-color: #FFFFFF70;
    &.active {
      background-color: #FFFFFF;
    }
}
}

styles

<link href="https://unpkg.com/quasar-extras@1.0.2/material-icons/material-icons.css" rel="stylesheet" />
<link href="https://unpkg.com/quasar-framework@latest/dist/umd/quasar.mat.min.css" rel="stylesheet" />