I cant stick the footer to the bottom of view-port. What is wrong in my code.
Tags: webdev
Published: 2024-02-24 09:37:02

Here is my code 
**HTML**
<!DOCTYPE html>
<div class="Web-container">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Netflix</title>
        <link rel="stylesheet" type="text/css" href="../Project netflix/INDEX.css">
        <link rel="icon" type="favicon/X-icon" href="../Project netflix/netflix_icon.png">
    </head>
<style>
.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;
}
</style>
    <main class="site-content">
         <h1>NETFLIX</h1>
            <div class="Form">
                <form action="#">
                    <div class="heading">
                        <h1> Sign In</h1>
                    </div>
                     <!-- 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>
</div>``

The Results 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul6mjlsxlqhtr2n3rn6p.png)


The GRAY BELT ON HEADER SUPPOSED TO BE AT THE BOTTOM, NOW APPEARING ON HEADER. HELP PLS