I cant stick the footer to the bottom of view-port. What is wrong in my code.

Coding_Maniac — Sat, 24 Feb 2024 09:37:02 +0000

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

DEV Community: Coding_Maniac

I cant stick the footer to the bottom of view-port. What is wrong in my code.

Remember {