Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
bagaimana cara menjadikan borderbottom animasi input ini menjadi responsive ?
tolong dong
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
/* Full-width input fields */
/*input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}*/
/* Add a background color when the inputs get focus */
/*input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}*/
/* Set a style for all buttons */
button {
background-color: black;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
width: 50%;
box-shadow: 0px 0px 2px 2px rgba(255, 255, 153, 0.2), 0px 0px 4px 4px rgba(255, 255, 51, 0.2);
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
/* z-index: 1; */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
padding-top: 50px;
}
/* Modal Content/Box */
.modal-content {
/* background-color: #fefefe;*/
margin: 5% auto 15% auto; /*5% from the top, 15% from the bottom and centered */
/*border: 1px solid #888;*/
width: 60%; /*Could be more or less, depending on screen size*/
box-shadow: 0 0px 5px 5px rgba(0, 0, 0, 0.2), 0 0px 15px 15px rgba(0, 0, 0, 0.19);
background: #595959;
}
.input{
width: 90%;
/* text-align: center;
border: 0;*/
transition: 2s;
outline: none;
color: white;
}
.input .text{
border: 0;
outline: none;
width: 100%;
height: 27px;
text-align: center;
border-bottom: 1.5px solid #bfbfbf;
background: transparent;
color: white;
}
.input .pass{
border: 0;
outline: none;
width: 100%;
height: 27px;
text-align: center;
border-bottom: 1.5px solid #bfbfbf;
background: transparent;
color: white;
}
.text:focus+.borderfocus1{
transform: scale(1);
}
.pass:focus+.borderfocus2{
transform: scale(1);
}
.borderfocus1 {
background-color: yellow;
height: 2.5px;
margin-top: 16.7%;
margin-left: -68%;
position: absolute;
top: 128px;
transform: scale(0, 1);
transition: all 0.5s linear;
width: 68%;
}
.borderfocus2 {
background-color: yellow;
height: 2.7px;
margin-top: 25.9%;
margin-left: -68%;
position: absolute;
top: 128px;
transform: scale(0, 1);
transition: all 0.5s linear;
width: 68%;
}
/* Style the horizontal ruler */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.submit {
border-radius: 5px;
border: 0;
color: #ffff00;
border: 1px solid #ffff00;
background: transparent;
padding: 2% 2% 2% 2%;
}
.submit:hover {
border-radius: 5px;
border: 0;
color: #ffff00;
border: 1px solid #ffff00;
background: transparent;
padding: 2% 2% 2% 2%;
box-shadow: 0px 0px 2px 2px rgba(255, 255, 153, 0.2), 0px 0px 4px 4px rgba(255, 255, 51, 0.2);
outline: none;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
h1{
text-align: center;
color: yellow;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
/*@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
} */*/
</style>
</head>
<body>
<h2>Modal Signup Form</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Sign Up</button>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<center>
<h1>Sekolahku</h1><br><br>
<div class="input">
<input type="text" name="user" placeholder="Username.." required class="text">
<span class="borderfocus1"></span><br><br><br>
</div>
<div class="input">
<input type="password" name="pass" placeholder="Password.." required class="pass">
<span class="borderfocus2"></span><br><br><br><br>
</div>
<div class="clearfix">
<!-- <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> -->
<button type="submit" class="submit">Sign Up</button>
</div>
</center>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
0
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban