A Pen by Aviraj Khare on CodePen.
Created
November 8, 2024 04:57
-
-
Save avirajkhare00/3af53aa6dfd8c65fc284aba1399072a4 to your computer and use it in GitHub Desktop.
skudo
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
| <body> | |
| <div class="container-fluid"> | |
| <div class="gradient-sides"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-area"> | |
| <div class="brand-name"> | |
| SKUDO | |
| </div> | |
| <div class="brand-description"> | |
| Create your account and get verified to avail exciting offers. | |
| </div> | |
| <button type="button" class="login-with-google-btn"> | |
| Sign up with Google | |
| </button> | |
| <hr /> | |
| <form> | |
| <div class="mb-3"> | |
| <label for="name" class="form-label">Name</label> | |
| <input type="text" class="form-control" id="name" placeholder="John Doe"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="email" class="form-label">Email address</label> | |
| <input type="email" class="form-control" id="email" placeholder="[email protected]"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="password" class="form-label">Password</label> | |
| <input type="password" class="form-control" id="password" placeholder="******"> | |
| </div> | |
| <button class="btn btn-primary mx-auto d-block">Signup</button> | |
| </form> | |
| <div class="brand-description"> | |
| No account. <a href="#">Create an account</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-image: url('https://i.imgur.com/hdrXnlj.jpeg'); | |
| } | |
| button { | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| .form-area { | |
| border-radius: 10px; | |
| background-color: white; | |
| margin-top: 40px; | |
| padding: 20px 20px 20px 20px; | |
| } | |
| .brand-name { | |
| text-align: center; | |
| font-size: 26px; | |
| } | |
| .brand-description{ | |
| text-align: center; | |
| font-size: 14px; | |
| } | |
| .gradient-sides { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100vh; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .gradient-sides .left { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 200px; | |
| height: 100%; | |
| animation: animate-left 6s infinite; | |
| } | |
| .gradient-sides .right { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 200px; | |
| height: 100%; | |
| animation: animate-right 6s infinite; | |
| } | |
| @keyframes animate-left { | |
| 0% { | |
| background: linear-gradient(to right, #ff69b4, transparent); | |
| } | |
| 50% { | |
| background: linear-gradient(to right, #ff69b4, rgba(255, 255, 255, 0.5)); | |
| } | |
| 100% { | |
| background: linear-gradient(to right, #ff69b4, transparent); | |
| } | |
| } | |
| @keyframes animate-right { | |
| 0% { | |
| background: linear-gradient(to left, #ff69b4, transparent); | |
| } | |
| 50% { | |
| background: linear-gradient(to left, #ff69b4, rgba(255, 255, 255, 0.5)); | |
| } | |
| 100% { | |
| background: linear-gradient(to left, #ff69b4, transparent); | |
| } | |
| } | |
| .login-with-google-btn { | |
| transition: background-color .3s, box-shadow .3s; | |
| padding: 12px 16px 12px 42px; | |
| border: none; | |
| border-radius: 3px; | |
| box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25); | |
| color: #757575; | |
| font-size: 14px; | |
| font-weight: 500; | |
| font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif; | |
| background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=); | |
| background-color: white; | |
| background-repeat: no-repeat; | |
| background-position: 12px 11px; | |
| &:hover { | |
| box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25); | |
| } | |
| &:active { | |
| background-color: #eeeeee; | |
| } | |
| &:focus { | |
| outline: none; | |
| box-shadow: | |
| 0 -1px 0 rgba(0, 0, 0, .04), | |
| 0 2px 4px rgba(0, 0, 0, .25), | |
| 0 0 0 3px #c8dafc; | |
| } | |
| &:disabled { | |
| filter: grayscale(100%); | |
| background-color: #ebebeb; | |
| box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25); | |
| cursor: not-allowed; | |
| } | |
| } |
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://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment