A Pen by Teguh Badru Salam on CodePen.
Last active
November 26, 2019 07:02
-
-
Save Teguh010/f0198297ea9af3a6ea632f4a03d5e76a to your computer and use it in GitHub Desktop.
quasar Vue.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| new Vue({ | |
| el: '#app', | |
| data: function () { | |
| return { | |
| email: '', | |
| password: '' | |
| } | |
| } | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://unpkg.com/[email protected]/material-icons/material-icons.css" rel="stylesheet" /> | |
| <link href="https://unpkg.com/quasar-framework@latest/dist/umd/quasar.mat.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment