Editing: login_style.css
Kembali
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Jost&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600&family=Playball&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300&display=swap"); * { margin: 0; padding: 0; } .taka { float:right; width:30px; height:30px; margin-right:4px; margin-top:4px; cursor: pointer; background-color:transparent; } .coverleten { position: absolute; width: 100%; height: 20%; left: 1px; top: -20px; } .login_box { width: 600px; height: 550px; position: absolute; top: 10%; left: 28%; translate: (-50%, -50%); background:#999; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3); font-family: "Jost", sans-serif; border-radius: 25px; } .login_form img { height: 100px; width: 370px; display: block; margin:auto; margin-top: 5%; } .login_form_h2 { color: #f1f1f1; text-align: center; margin-top: 6%; font-size: 40px; margin-bottom: 5px; } .login_error { color: #d61a3c; margin-bottom: 17px; font-size: 25px; text-align: center; } .login_success { color: #97dc21; margin-bottom: 17px; font-size: 25px; text-align: center; } .login_form input[type="text"], input[type="password"] { text-align: left; margin: auto; border: 0; display: block; background: none; text-align: center; border: 2px solid #f1f1f1; width: 50%; padding: 14px 10px; outline: none; border-radius: 24px; transition: 0.23s; color: #f1f1f1; font-size: 20px; } .login_form input[type="text"]:focus, input[type="password"]:focus { width: 55%; border-color: white; background-color: #f1f1f1; color: black; } .login_form input[type="text"]:focus { font-size: 25px; } .login_form input::placeholder { font-family: "Libre Baskerville", serif; font-size: 10px; } .login_form label { margin-left: 20%; font-size: 20px; margin-top: 5%; padding: 20px; } .login_form input[type="submit"] { margin-top: 40px; margin-left: 43%; display: inline-block; border: solid 1px black; background: black; padding: 20px; margin-left: 320; margin-top: 40; text-decoration: none; font-family: "Nunito", sans-serif; font-size: 20px; color: #f1f1f1; border: 2px solid #f1f1f1; border-radius: 40px; outline: none; cursor: pointer; } .login_form input[type="submit"]:hover { background: #f1f1f1; color: black; } .boxletra{ size:10px; } @media only screen and (max-width: 768px) { .login_box { width:100%; height: 100%; position:fixed; top: 0px; left:0px; translate: (-50%, -50%); background:#06C; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3); font-family: "Jost", sans-serif; color: #f1f1f1; border-radius: 10px; } .coverleten { width:80px; height:20px; } .login_form img { margin:auto; margin-top: 1%; height: 50%; width: 50%; display: block; } .login_form_h2{ color: #f1f1f1; text-align: center; margin-top: 1%; font-size: 20px; } .login_form input[type="submit"] { display: inline-block; border: solid 1px black; padding: 20px; text-decoration: none; font-family: "Nunito", sans-serif; font-size: 18px; color: #f1f1f1; border: 2px solid #f1f1f1; border-radius: 20px; outline: none; } .login_form input[type="text"], input[type="password"] { text-align: left; margin: auto; border: 0; display: block; background: none; text-align: center; border: 2px solid #f1f1f1; width: 50%; padding: 14px 10px; outline: none; border-radius: 16px; transition: 0.23s; color: #f1f1f1; font-size: 16px; } .login_form label { margin-left: 20%; font-size: 16px; margin-top: 2%; padding: 16px; } }
SIMPAN PERUBAHAN