I want to draw square just be the background, but my problem is contain.
When I draw square on top of my web. my old code(login form) will break.
I think it about contain, but I don't know how to fix it.
my result
I want
Problem
Thank you for help.
html,
body {
height: 100%;
font: 30px "2005_iannnnnCPU";
}
body {
margin: 0;
padding: 0;
background: #000;
}
.grid-container {
display: grid;
height: 100%;
color: #fff;
justify-items: center;
align-items: center;
}
/*
.square {
height: 50px;
width: 50px;
background-color: #fff;
}
*/
.contain {
display: grid;
padding: 15px;
width: 60%;
height: 23%;
border: 3px solid #fff;
color: #fff;
}
.grid-items {
margin: 1% 1%;
}
.ans {
margin: 1% 1%;
font: 20px "2005_iannnnnCPU";
letter-spacing: 2px;
}
input[type=text] {
background-color: none;
background: transparent;
border: 2px solid #555;
color: #fff;
}
input[type=text]:focus {
border: 2px solid #fff;
}
textarea:focus,
input:focus {
outline: none;
}
.button {
border: none;
color: white;
padding: 2% 2%;
margin: 6% 6%;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
}
.login {
background-color: #000;
font: 30px "2005_iannnnnCPU";
color: #fff;
border: 2px solid #fff;
width: 50%;
-ms-transform: translateX(40%);
transform: translateX(40%);
}
.login:focus {
background-color: white;
color: black;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neglected Moment</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid-container">
<div class="contain">
<label class="grid-items">Username</label>
<input type="text" class="ans" id="ans-user" name="ans-user"></input>
<label class="grid-items">Password</label>
<input type="text" class="ans" id="ans-pass" name="ans-pass"></input>
<button class="button login">login</button>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire