Here is my code
HTML
<!DOCTYPE html>
Netflix
.Web-container {
background-image: url(Netflix.png);
display: flex;
flex-direction: column;
min-height: 100vh;
background-size: cover;
font-family: Netflix Sans,Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif;
font-size: 16px;
font-weight: normal;
}
body {
font-family: Netflix Sans,Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif;
font-size: 16px;;
}
body head {
font-size: 50;
font-weight: 900;
}
h1 {
font-size: 30px;
font-weight: 900;
color: white;
}
.Form {
width:500px;
margin: 0 auto;
background-color:rgba(14, 9, 10, .75);
}
Form {
width: 300px;
height: 550px;
padding: 50px;
border-radius: 5px;
background-color: inherit;
position: absolute;
left: 37%;
top: 20%;
}
input[type="Email"], input[type="Password"], input[type="Submit"]{
width: 300px;
height: 15px;
padding-top: 15px;
padding-bottom: 30px;
color: gray;
border-radius: 5px;
font-size: 20px;
margin-bottom: 15px;
}
button {
margin-top: 0px;
width: 300px;
height: 35px;
padding-top: 0px;
color: white;
background-color: darkred;
box-sizing: border-box;
border-radius: 5px;
font-size: 18;
}
.sub-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.signin {
font-size: 16;
}
button:hover {
opacity: o.6;
cursor: pointer;
color: #cb583b;
}
Remember {
float: right;
color: gray;
}
p a {
float: right;
color: white;
text-decoration: none;
}
p {
color: gray;
}
.hidden-label{
position: absolute;
overflow: hidden;
height: 0;
width: 0;
}
input[type="checkbox"]{
color: gray;
accent-color: gray;
}
.site-footer {
background-color: dimgray;
grid-row: 2/3;
}
<h1>NETFLIX</h1>
<h1> Sign In</h1>
<!-- Input area -->
<div class="Main-container">
<div>
<label for="Email" class="hidden-label">Email</label>
<input type="Email" name="Email or Phone number" value="Email" placeholder="Email or Phone number"required>
</div>
<div>
<label for="Password" class="hidden-label"> Password </label>
<input type="Password" name="Password" value="Password" placeholder="Password" required>
</div>
</div>
<br>
<!-- input area ends -->
<div class="signin">
<button type="submit"> Login</button>
</div>
<br>
<div>
<label>
<input type="checkbox" checked="checked" name="checkbox"> Remember me
</label>
<a href="#" id="Remember">Need help?</a>
</div>
<div>
<p>New to Netflix? <a href="#">Sign up now.</a> </p>
<p class="p">
This page is protected by Google reCAPTCHA to ensure you're not a bot.<a href="#" id="Learn"> Learn more </a>
</p>
</div>
</form>
</div>
</main>
<footer class="site-footer"> HELLO
</footer>
The Results
The GRAY BELT ON HEADER SUPPOSED TO BE AT THE BOTTOM, NOW APPEARING ON HEADER. HELP PLS
Top comments (0)