Untitled
unknown
plain_text
a year ago
13 kB
5
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <style> .box { position: relative; top: 0; opacity: 1; float: left; padding: 60px 50px 40px 50px; width: 100%; background: #fff; border-radius: 10px; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); z-index: 5; &.back { transform: scale(0.95); -webkit-transform: scale(0.95); -ms-transform: scale(0.95); top: -20px; opacity: 0.8; z-index: -1; } &:before { content: ""; width: 100%; height: 30px; border-radius: 10px; position: absolute; top: -10px; background: rgba(255, 255, 255, 0.6); left: 0; transform: scale(0.95); -webkit-transform: scale(0.95); -ms-transform: scale(0.95); z-index: -1; } } .overbox .title { color: #fff; &:before { background: #fff; } } .title { width: 100%; float: left; line-height: 46px; font-size: 34px; font-weight: 700; letter-spacing: 2px; color: #ed2553; position: relative; &:before { content: ""; width: 5px; height: 100%; position: absolute; top: 0; left: -50px; background: #ed2553; } } .input { transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); label, input, .spin { transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } } .button { transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); button .button.login button i.fa { transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } } .material-button .shape { &:before, &:after { transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } } .button.login button { transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } .material-button, .alt-2, .material-button .shape, .alt-2 .shape, .box { transition: 400ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: 400ms cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: 400ms cubic-bezier(0.4, 0, 0.2, 1); } .input { width: 100%; float: left; label, input, .spin { width: 100%; float: left; } } .button { width: 100%; float: left; button { width: 100%; float: left; } } .input, .button { margin-top: 30px; height: 70px; } .input { position: relative; input { position: relative; } } .button { position: relative; button { position: relative; } } .input { input { height: 60px; top: 10px; border: none; background: transparent; font-family: "Roboto", sans-serif; font-size: 24px; color: rgba(0, 0, 0, 0.8); font-weight: 300; } label { font-family: "Roboto", sans-serif; font-size: 24px; color: rgba(0, 0, 0, 0.8); font-weight: 300; } } .button button { font-family: "Roboto", sans-serif; font-size: 24px; color: rgba(0, 0, 0, 0.8); font-weight: 300; } .input { &:before, .spin { width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; } &:before { content: ""; background: rgba(0, 0, 0, 0.1); z-index: 3; } .spin { background: #ed2553; z-index: 4; width: 0; } } .overbox .input { .spin { background: rgba(255, 255, 255, 1); } &:before { background: rgba(255, 255, 255, 0.5); } } .input label { position: absolute; top: 10px; left: 0; z-index: 2; cursor: pointer; line-height: 60px; } .button { &.login { width: 60%; left: 20%; button { width: 100%; line-height: 64px; left: 0%; background-color: transparent; border: 3px solid rgba(0, 0, 0, 0.1); font-weight: 900; font-size: 18px; color: rgba(0, 0, 0, 0.2); } } button { width: 100%; line-height: 64px; left: 0%; background-color: transparent; border: 3px solid rgba(0, 0, 0, 0.1); font-weight: 900; font-size: 18px; color: rgba(0, 0, 0, 0.2); } &.login { margin-top: 30px; } margin-top: 20px; button { background-color: #fff; color: #ed2553; border: none; } &.login button { &.active { border: 3px solid transparent; color: #fff !important; span { opacity: 0; transform: scale(0); -webkit-transform: scale(0); -ms-transform: scale(0); } i.fa { opacity: 1; transform: scale(1) rotate(-0deg); -webkit-transform: scale(1) rotate(-0deg); -ms-transform: scale(1) rotate(-0deg); } } i.fa { width: 100%; height: 100%; position: absolute; top: 0; left: 0; line-height: 60px; transform: scale(0) rotate(-45deg); -webkit-transform: scale(0) rotate(-45deg); -ms-transform: scale(0) rotate(-45deg); } &:hover { color: #ed2553; border-color: #ed2553; } } margin: 40px 0; overflow: hidden; z-index: 2; button { cursor: pointer; position: relative; z-index: 2; } } .pass-forgot { width: 100%; float: left; text-align: center; color: rgba(0, 0, 0, 0.4); font-size: 18px; } .click-efect { position: absolute; top: 0; left: 0; background: #ed2553; border-radius: 50%; } .overbox { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: inherit; border-radius: 10px; padding: 60px 50px 40px 50px; .title, .button, .input { z-index: 111; position: relative; color: #fff !important; display: none; } .title { width: 80%; } .input { margin-top: 20px; input, label { color: #fff; } } .material-button, .alt-2 { display: block; .shape { display: block; } } } .material-button, .alt-2 { width: 140px; height: 140px; border-radius: 50%; background: #ed2553; position: absolute; top: 40px; right: -70px; cursor: pointer; z-index: 100; transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); } .material-button .shape, .alt-2 .shape { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .material-button .shape:before, .alt-2 .shape:before, .material-button .shape:after, .alt-2 .shape:after { content: ""; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(360deg); -webkit-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); } .material-button .shape:before, .alt-2 .shape:before { width: 25px; height: 4px; } .material-button .shape:after, .alt-2 .shape:after { height: 25px; width: 4px; } .material-button.active, .alt-2.active { top: 50%; right: 50%; transform: translate(50%, -50%) rotate(0deg); -webkit-transform: translate(50%, -50%) rotate(0deg); -ms-transform: translate(50%, -50%) rotate(0deg); } body { background-color: black; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; font-family: "Roboto", sans-serif; overflow: hidden; } html { overflow: hidden; } .materialContainer { width: 100%; max-width: 460px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; list-style-type: none; outline: none; &:after, &::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; list-style-type: none; outline: none; } } </style> <div class="materialContainer"> <div class="box"> <div class="title">LOGIN</div> <div class="input"> <label for="name"></label> <input type="text" name="name" id="name" /> <span class="spin"></span> </div> <div class="input"> <label for="pass"></label> <input type="password" name="pass" id="pass" /> <span class="spin"></span> </div> <div class="button login"> <button onclick="location.href = '/index.html';"><span>GO</span> <i class="fa fa-check"></i></button> </div> <a href="/signup.html" class="pass-forgot">sign up</a> </div> <div class="overbox"> <div class="material-button alt-2"><span class="shape"></span></div> <div class="title">REGISTER</div> <div class="input"> <label for="regname">Username</label> <input type="text" name="regname" id="regname" /> <span class="spin"></span> </div> <div class="input"> <label for="regpass">Password</label> <input type="password" name="regpass" id="regpass" /> <span class="spin"></span> </div> <div class="input"> <label for="reregpass">Repeat Password</label> <input type="password" name="reregpass" id="reregpass" /> <span class="spin"></span> </div> <div class="button"> <button><span>NEXT</span></button> </div> </div> </div> <script src="js/script.js"></script> </body> </html>
Editor is loading...
Leave a Comment