Ogólnie jestem początkujący w tym temacie i prosiłbym o pomoc żeby ktoś mi wyjaśnił co zrobić żeby było poprawnie
robiłem sobie panel logowania w html i css od tego pana https://www.youtube.com/watch?v=9JYOWKmFWzw&t=0s
zrobiłem wszystko dokładnie tak samo jak osoba z tego filmiku. i większość rzeczy jest, ale nie wiem co zrobić żeby ramka była do góry i napis login nad tym. obraz poniżej 
Jeśli chodzi o kod w którym jest napisane także załączam :
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
background: #151515;
}
.login-form {
position: relative;
width: 100%;
max-width: 380px;
height: auto;
background: #1b1b1b;
padding: 300px 200px 80px;
box-sizing: border-box;
border: 1px solid black;
border-radius: 5px;
box-shadow: inset 0 0 1px #272727;
}
.text {
text-align: center;
font-size: 30px;
color: #c7c7c7;
margin-bottom: 2rem;
font-weight: 600;
letter-spacing: 2px;
}
form {
margin-top: 40px;
}
form .field {
margin-top: 20px;
display: flex;
}
.field .fas {
height: 50px;
width: 60px;
color: #868686;
font-size: 20px;
line-height: 50px;
border: 1px solid #444;
border-right: none;
border-radius: 5px;
background: linear-gradient(#333,#222);
}
.field input,form button {
height: 50px;
width: 100%;
outline: none;
font-size: 19px;
color: #868686;
padding: 0 15px;
border-radius: 5px;
border: 1px solid #444;
caret-color: #339933;
background: linear-gradient(#333,#222);
}
input:focus{
color: #339933;
box-shadow: 0 0 5px rgba(0,255,0,.2),
inset 0 0 5px rgba(0,255,0,.1);
background: linear-gradient(#333933,#222922);
animation: glow .8s ease-out infinite alternate;
}
@keyframes glow {
100%{
border-color: #339933;
box-shadow: 0 0 5px rgba(0,255,0,.2)
inset 0 0 5px rgba(0,0,0,.1)
}
}
button {
margin-top: 30px;
border-radius: 5px!important;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
}
button:hover{
color: #339933;
border: 1px solid #339933;
box-shadow: 0 0 5px rgba(0,255,0,.3),
0 0 10px rgba(0,255,0,.2),
0 0 15px rgba(0,255,0,.2),
0 2px 0 black;
}
.link {
margin-top: 25px;
color: #868686;
}
.link a{
color: #339933;
text-decoration: none;
}
.link a:hover{
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Glowing login</title>
<link rel="stylesheet" href="testcss.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="login-form"></div>
<div class="text">LOGIN</div>
<form>
<div class="field">
<div class="fas fa-envelope"></div>
<input type="text" placeholder="Email or Phone">
</div>
<div class="field">
<div class="fas fa-lock"></div>
<input type="password" placeholder="Password">
</div>
<button>LOGIN</button>
<div class="link">
Not a member?
<a href="#">Signup now</a>
</div>
</form>
</div>
</body>
</html>
