A Pen by Angela Delise on CodePen.
Created
October 27, 2021 15:11
-
-
Save bmamatkadyr/a94f3b33786954489370d09930403cd0 to your computer and use it in GitHub Desktop.
Sign Up Form Tutorial
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
| <head> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,700"> | |
| <!-- Code by Angela Delise | |
| https://codepen.io/angeladelise/pen/MWeLPmR --> | |
| </head> | |
| <body> | |
| <form action="" class="form"> | |
| <h1 class="form__title">Sign Up</h1> | |
| <p class="form__description">Get unlimited access to the latest design trends</p> | |
| <div class="form__group"> | |
| <input type="text" id="email" class="form__input" placeholder=" " autocomplete="off"> | |
| <label for="email" class="form__label">Email</label> | |
| </div> | |
| <div class="form__group"> | |
| <input type="password" id="password" class="form__input" placeholder=" "> | |
| <label for="password" class="form__label">Password</label> | |
| </div> | |
| <button class="form__button">Sign Up</button> | |
| </form> | |
| </body> |
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
| /* color variables */ | |
| $clr-primary: #9dedff; | |
| $clr-primary-hover: #8ad6ff; | |
| $clr-primary-dark: #7bdff6; | |
| $clr-primary-light: #c7f5ff; | |
| $clr-gray100: #f0f7f8; | |
| $clr-gray200: #cfd8dc; | |
| $clr-gray300: #a7b7be; | |
| $clr-gray400: #6b7e86; | |
| $clr-gray500: #425a65; | |
| /* border radius */ | |
| $radius: 1rem; | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: Montserrat, sans-serif; | |
| font-weight: 500; | |
| background-color: #79ceff; | |
| background-image: linear-gradient( | |
| 315deg, | |
| #79ceff 0%, | |
| #dcb5ff 67%, | |
| #ffb8f0 100% | |
| ); | |
| height: 100vh; | |
| display: grid; | |
| justify-content: center; | |
| align-items: center; | |
| color: $clr-gray500; | |
| } | |
| .form { | |
| width: 24rem; | |
| padding: 2rem; | |
| border-radius: $radius; | |
| background-color: white; | |
| &__title { | |
| margin-bottom: 0.5rem; | |
| } | |
| &__description { | |
| margin-bottom: 2rem; | |
| } | |
| &__group { | |
| position: relative; | |
| height: 3rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| &__input { | |
| width: 100%; | |
| height: 100%; | |
| border: 2px solid $clr-gray200; | |
| border-radius: 0.5rem; | |
| font-family: inherit; | |
| font-weight: inherit; | |
| color: inherit; | |
| outline: none; | |
| padding: 1.25rem; | |
| background: none; | |
| &:hover { | |
| border-color: $clr-primary; | |
| } | |
| &:focus { | |
| border-color: $clr-primary-dark; | |
| } | |
| } | |
| &__label { | |
| position: absolute; | |
| left: 1rem; | |
| top: 0.9rem; | |
| padding: 0 0.5rem; | |
| background-color: white; | |
| transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in; | |
| } | |
| &__button { | |
| display: block; | |
| margin-left: auto; | |
| padding: 0.75rem 2rem; | |
| background-color: $clr-primary; | |
| font-family: inherit; | |
| font-weight: inherit; | |
| border-radius: 0.5rem; | |
| outline: none; | |
| border: none; | |
| cursor: pointer; | |
| transition: background-color 200ms ease-in; | |
| &:hover { | |
| background-color: $clr-primary-dark; | |
| } | |
| } | |
| } | |
| /* | |
| 1. When the input is in the focus state | |
| reduce the size of the label and move upwards | |
| 2. Keep label state when content is in input field | |
| */ | |
| .form__input:focus ~ .form__label, | |
| .form__input:not(:placeholder-shown).form__input:not(:focus) ~ .form__label { | |
| top: -0.5rem; | |
| left: 0.8rem; | |
| font-size: 0.8rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment