Footer is not aligning to the bottom of the page

I have a HTML. And i want to add the Footer to it but it is not aligning to it’s bottom.

@import url(https://fonts.googleapis.com/css?family=Gudea:400,700);
@import url(https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Balsamiq+Sans:[email protected];700&family=Mochiy+Pop+P+One&display=swap);
:root {
  --dark-one: #333;
  --dark-two: #7a7a7a;
  --main-color: #784cfb;
  --light-one: #fff;
  --light-two: #f9fafb;
  --light-three: #f6f7fb;
  --color_one: #ee1d52;
  --color_two: #69c9d0;
  --color_three: rgba(2, 0, 36, 1);
  --gradient: linear-gradient(90deg, var(--color_three) 0%, var(--color_one) 35%, var(--color_three) 100%)
}

body {
  perspective: 800px;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: "Gudea", sans-serif;
  background: #ea5c54;
  background: -moz-linear-gradient(-45deg, #ea5c54 0%, #bb6dec 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ea5c54), color-stop(100%, #bb6dec));
  background: -webkit-linear-gradient(-45deg, #ea5c54 0%, #bb6dec 100%);
  background: -o-linear-gradient(-45deg, #ea5c54 0%, #bb6dec 100%);
  background: -ms-linear-gradient(-45deg, #ea5c54 0%, #bb6dec 100%);
  background: linear-gradient(135deg, #ea5c54 0%, #bb6dec 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EA5C54 ', endColorstr='#bb6dec', GradientType=1);
}

body ::-webkit-input-placeholder {
  color: #4e546d
}

body .authent {
  display: none;
  background: #35394a;
  background: -moz-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #35394a), color-stop(100%, #1f222e));
  background: -webkit-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  background: -o-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  background: -ms-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  background: linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#35394a', endColorstr='#1f222e', GradientType=1);
  position: absolute;
  left: 0;
  right: 90px;
  margin: auto;
  width: 100px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding: 20px 70px;
  top: 200px;
  bottom: 0;
  height: 70px;
  opacity: 0
}

body .authent p {
  text-align: center;
  color: white
}

body .success {
  display: none;
  color: #d5d8e2;
  margin: 40px auto;
  align-items: center;
  text-align: center
}

body .success p {
  font-size: 14px
}

body p {
  color: #5b5e6f;
  font-size: 10px;
  text-align: left
}

body .testtwo {
  left: -320px!important
}

body .test {
  box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  top: -100px!important;
  transform: rotateX(70deg) scale(0.8)!important;
  opacity: 0.6!important;
  filter: blur(1px)
}

body .login {
  opacity: 1;
  z-index: -1;
  top: 20px;
  height: 300px;
  width: 240px;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
  transition-property: transform, opacity, box-shadow, top, left;
  transition-duration: 0.5s;
  transform-origin: 161px 100%;
  transform: rotateX(0deg);
  position: relative;
  border-top: 2px solid #d8312a;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  padding: 100px 40px 40px 40px;
  background: #35394a;
  background: -moz-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #35394a), color-stop(100%, #1f222e));
  background: -webkit-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  background: -o-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  background: -ms-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  background: linear-gradient(45deg, #35394a 0%, #1f222e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#35394a', endColorstr='#1f222e', GradientType=1)
}

body .login .validation {
  position: absolute;
  z-index: 1;
  right: 10px;
  top: 6px;
  opacity: 0
}

body .login .disclaimer {
  position: absolute;
  bottom: 20px;
  left: 35px;
  width: 250px
}

body .login_title {
  color: #afb1be;
  height: 60px;
  text-align: left;
  font-size: 16px
}

body .login_fields {
  height: 208px;
  position: absolute;
  left: 0
}

body .login_fields .icon {
  position: absolute;
  z-index: 1;
  left: 36px;
  top: 8px;
  opacity: 0.5
}

body .login_fields input[type="password"] {
  color: #dc6180!important
}

body .login_fields input[type="text"],
body .login_fields input[type="password"] {
  color: #afb1be;
  width: 190px;
  margin-top: -2px;
  background: #32364a;
  left: 0;
  padding: 10px 65px;
  border-top: 2px solid #393d52;
  border-bottom: 2px solid #393d52;
  border-right: none;
  border-left: none;
  outline: none;
  font-family: "Gudea", sans-serif;
  box-shadow: none
}

body .login_fields__user,
body .login_fields__password {
  position: relative
}

body .login_fields__submit {
  position: relative;
  top: 35px;
  left: 0;
  width: 80%;
  right: 0;
  margin: auto
}

body .login_fields__submit .forgot {
  float: right;
  font-size: 10px;
  margin-top: 11px;
  text-decoration: underline
}

body .login_fields__submit .forgot a {
  color: #606479
}

body .login_fields__submit input {
  border-radius: 50px;
  background: transparent;
  padding: 10px 50px;
  border: 2px solid #dc6180;
  color: #dc6180;
  text-transform: uppercase;
  font-size: 11px;
  transition-property: background, color;
  transition-duration: 0.2s
}

body .login_fields__submit input:focus {
  box-shadow: none;
  outline: none
}

body .login_fields__submit input:hover {
  color: white;
  background: #dc6180;
  cursor: pointer;
  transition-property: background, color;
  transition-duration: 0.2s
}

.love {
  position: absolute;
  right: 20px;
  bottom: 0px;
  font-size: 11px;
  font-weight: normal
}

.love p {
  color: white;
  font-weight: normal;
  font-family: "Open Sans", sans-serif
}

.love a {
  color: white;
  font-weight: 700;
  text-decoration: none
}

.love img {
  position: relative;
  top: 3px;
  margin: 0px 4px;
  width: 10px
}

.brand {
  position: absolute;
  left: 20px;
  bottom: 14px
}

.brand img {
  width: 30px
}

h1 {
  position: relative;
  text-align: center;
  color: #353535;
  font-size: 50px;
  font-family: "Cormorant Garamond", serif
}

p {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: 18px;
  color: #676767
}

.frame {
  width: 90%;
  margin: 40px auto;
  text-align: center
}

.thumb_img {
  max-width: 110%;
  margin-left: -14px;
  margin-top: -54px
}

button {
  margin: 20px
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none
}

.btn {
  border: none;
  background: rgb(251, 33, 117);
  background: linear-gradient(0deg, rgba(251, 33, 117, 1) 0%, rgba(234, 76, 137, 1) 100%);
  color: #fff;
  overflow: hidden;
  margin: auto;
  margin-top: 10px
}

.btn:hover {
  text-decoration: none;
  color: #fff
}

.btn:before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 3s ease-in-out infinite
}

.btn:hover {
  opacity: 0.7
}

.btn:active {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2), inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2)
}

@-webkit-keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0
  }
}

#context-menu {
  position: absolute;
  height: auto;
  display: block;
  top: 10%;
  left: 40%;
  border-radius: 5px;
  width: 200px
}

ul {
  list-style-type: none
}

li.menu-items {
  height: 50px;
  margin-top: 7px;
  background-color: #fff;
  box-shadow: 0 2px 20px 2px #22222225;
  width: 100%;
  border-radius: 4px;
  font-size: 20px;
  color: #444;
  line-height: 50px;
  vertical-align: middle;
  padding-left: 15px;
  cursor: pointer;
  transition: all 0.1s ease-in;
  transform-origin: top left;
  transform: rotateY(90deg) rotateX(45deg)
}

li.menu-items:nth-child(1) {
  transition: transform 0.25s 0s cubic-bezier(0, 0.36, 0.95, -0.2), background-color 0.15s ease-in
}

li.menu-items:nth-child(2) {
  transition: transform 0.25s 0.15s cubic-bezier(0, 0.36, 0.95, -0.2), background-color 0.15s ease-in
}

li.menu-items:nth-child(3) {
  transition: transform 0.25s 0.3s cubic-bezier(0, 0.36, 0.95, -0.2), background-color 0.15s ease-in
}

li.menu-items:nth-child(4) {
  transition: transform 0.25s 0.45s cubic-bezier(0, 0.36, 0.95, -0.2), background-color 0.15s ease-in
}

li.menu-items:hover {
  background-color: coral;
  color: #fff;
  transform: perspective(10px)
}

a img {
  border: 0
}

h1 {
  font: bold 32px Helvetica, Arial, Sans-Serif;
  letter-spacing: -1px;
  margin: 50px 0 20px 0
}

p {
  margin: 0 0 20px 0
}

.close-icon:hover {
  background: #efefef
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

#header {
  font-family: "Poppins", sans-serif
}

#header a {
  text-decoration: none
}

#header ul {
  list-style: none
}

#header img {
  width: 100%
}

#header .container {
  position: relative;
  z-index: 5;
  max-width: 92rem;
  padding: 0 4rem;
  margin: 0 auto
}

.stop-scrolling {
  height: 150%;
  overflow: hidden
}

#header .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-content: center
}

#header .text {
  font-size: 1.25rem;
  color: var(--dark-two);
  line-height: 1.6
}

.column-1 {
  margin-right: 1.5rem
}

.column-2 {
  margin-left: 1.5rem
}

#header .image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.z-index {
  position: relative;
  z-index: 2
}

#header .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0
}

#header .overlay .shape {
  width: initial;
  opacity: 0.13;
  position: absolute
}

#header .overlay.overlay-lg .shape {
  height: 55px
}

#header .overlay.overlay-lg .shape.wave {
  height: initial;
  width: 88px
}

#header .overlay.overlay-lg .shape.xshape {
  height: 38px
}

#header .overlay.overlay-sm .shape {
  filter: brightness(0) invert(1);
  opacity: 0.15;
  height: 40px
}

#header .overlay.overlay-sm .shape.wave {
  height: initial;
  width: 70px
}

#header .overlay.overlay-sm .shape.xshape {
  height: 30px
}

#header .points {
  opacity: 0.3;
  position: absolute
}

#header .section {
  padding: 7rem 0;
  overflow: hidden
}

.section-header {
  text-align: center;
  margin-bottom: 1.5rem
}

#header .title {
  position: relative;
  display: inline-block;
  padding-bottom: 1rem;
  line-height: 1;
  font-size: 2.8rem;
  margin-bottom: 0.6rem
}

#header .title:before {
  content: attr(data-title);
  display: block;
  margin-bottom: 0.4rem;
  color: var(--main-color);
  font-size: 1.15rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px
}

#header .title:after {
  content: "";
  position: absolute;
  width: 90px;
  height: 5px;
  border-radius: 3px;
  background-color: var(--main-color);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%)
}

#header .section-header .text {
  max-width: 600px;
  margin: 0 auto
}

#header .title-sm {
  color: var(--dark-one);
  font-weight: 600;
  font-size: 1.6rem
}

#header .points-sq {
  width: 210px
}

#header .btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  background-color: var(--main-color);
  color: var(--light-one);
  border-radius: 2rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  font-weight: 500;
  transition: 0.3s
}

#header .btn:hover {
  background-color: #6b44e0
}

#header .btn.small {
  padding: 0.7rem 1.8rem;
  font-size: 1rem
}

header {
  width: 100%;
  background-color: var(--light-three);
  overflow: hidden;
  position: relative
}

#header nav {
  width: 100%;
  position: relative;
  z-index: 50
}

#header nav .container {
  display: flex;
  justify-content: space-between;
  height: 4.5rem;
  align-items: center
}

#header .logo {
  width: 65px;
  display: flex;
  align-items: center
}

.links ul {
  display: flex
}

.links a {
  display: inline-block;
  padding: 0.9rem 1.2rem;
  color: var(--dark-one);
  font-size: 1.05rem;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  transition: 0.3s
}

.links a.active {
  background-color: var(--main-color);
  color: var(--light-one);
  border-radius: 2rem;
  font-size: 1rem;
  padding: 0.9rem 2.1rem;
  margin-left: 1rem
}

.links a:hover {
  color: var(--main-color)
}

.links a.active:hover {
  color: var(--light-one);
  background-color: #6b44e0
}

.hamburger-menu {
  width: 2.7rem;
  height: 3rem;
  z-index: 100;
  position: relative;
  display: none;
  align-items: center;
  justify-content: flex-end
}

.hamburger-menu .bar {
  position: relative;
  width: 2.1rem;
  height: 3px;
  border-radius: 3px;
  background-color: var(--dark-one);
  transition: 0.5s
}

.bar:before,
.bar:after {
  content: "";
  position: absolute;
  width: 2.1rem;
  height: 3px;
  border-radius: 3px;
  background-color: var(--dark-one);
  transition: 0.5s
}

.bar:before {
  transform: translateY(-9px)
}

.bar:after {
  transform: translateY(9px)
}

nav.open .hamburger-menu .bar {
  background-color: transparent;
  transform: rotate(360deg)
}

nav.open .hamburger-menu .bar:before {
  transform: translateY(0) rotate(45deg);
  background-color: var(--light-one)
}

nav.open .hamburger-menu .bar:after {
  transform: translateY(0) rotate(-45deg);
  background-color: var(--light-one)
}

nav.open .links {
  transform: translateX(0)
}

.header-content .container.grid-2 {
  grid-template-columns: 2.5fr 3.5fr;
  min-height: calc(100vh - 6rem);
  padding-bottom: 2.5rem;
  text-align: left
}

.header-title {
  font-size: 3.8rem;
  line-height: 0.8;
  color: var(--dark-one)
}

.header-content .text {
  margin: 2.15rem 0
}

.header-content .image .img-element {
  max-width: 750px
}

header .points1 {
  width: 420px;
  bottom: -75px;
  left: -150px
}

header .points2 {
  width: 70%;
  top: 65%;
  left: 71%
}

header .square {
  right: 68%;
  top: 71%
}

header .triangle {
  right: 7%;
  bottom: 75%
}

header .xshape {
  right: 4%;
  bottom: 50%
}

header .half-circle1 {
  left: 50%;
  bottom: 82%
}

header .half-circle2 {
  left: 5%;
  top: 67%
}

header .wave1 {
  bottom: 75%;
  left: 20%
}

header .wave2 {
  bottom: 8%;
  right: 55%
}

header .circle {
  left: 38%;
  bottom: 63%
}

.letters {
  position: absolute;
  width: 13.5%;
  top: -5px;
  left: 15px;
  opacity: 0.06
}

@media (max-width:1280px) {
  .overlay.overlay-lg .shape {
    height: 35px
  }
  .overlay.overlay-lg .shape.wave {
    height: initial;
    width: 63px
  }
  .overlay.overlay-lg .shape.xshape {
    height: 24px
  }
  header .points1 {
    width: 270px;
    bottom: -50px;
    left: -75px
  }
  header .letters {
    width: 11%
  }
  nav .container {
    height: 4.5rem
  }
  .logo {
    width: 65px
  }
  .links a {
    font-size: 0.8rem;
    padding: 0.65rem 0.7rem
  }
  .links a.active {
    font-size: 0.7rem;
    padding: 0.7rem 1.7rem;
    margin-left: 0.6rem
  }
}

@media (max-width:425px) {
  .connection-wrapper .toast {
    width: 300px
  }
}

@media (max-width:850px) {
  .hamburger-menu {
    display: flex;
    margin-right: -2rem
  }
  #header img {
    margin-left: -3rem
  }
  .links {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    right: 0;
    background-color: #252525;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translateX(100%);
    transition: 0.5s
  }
  .links ul {
    flex-direction: column
  }
  .links a {
    color: var(--light-one)
  }
  .links a.active {
    margin-left: 0;
    margin: 0.5rem 0
  }
  .letters,
  header .half-circle2,
  header .points1,
  header .wave2 {
    display: none
  }
  header .half-circle1 {
    bottom: 55%;
    left: 23%
  }
  header .circle {
    left: 8%;
    bottom: 40%
  }
  header .wave1 {
    bottom: 87%;
    left: 75%
  }
  header .square {
    top: initial;
    bottom: 5%;
    left: 13%
  }
  header .triangle {
    right: 14%;
    bottom: 63%
  }
  header .xshape {
    left: 90%;
    top: 54%
  }
}

@media (max-width:560px) {
  .container {
    padding: 0 2rem
  }
  .overlay.overlay-lg .shape {
    height: 28px
  }
  .overlay.overlay-lg .shape.wave {
    height: initial;
    width: 52px
  }
  .overlay.overlay-lg .shape.xshape {
    height: 22px
  }
}

footer {
  bottom: 0;
  color: #14171a;
  font-family: "Balsamiq Sans", sans-serif
}

footer a,
footer a:hover {
  text-decoration: none;
  color: inherit
}

.page-footer {
  margin-top: 35px;
  border-top: 1px solid #e6e5e6
}

.primary-footer {
  padding: 36px 0!important;
  background-color: #f2f3f5;
  color: #666;
  font-size: 14px;
  line-height: 24px
}

.primary-footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none
}

.primary-footer .copyright {
  margin-bottom: 0
}

.primary-footer ul li {
  display: inline-block;
  margin-right: 16px
}

.primary-footer a {
  color: #737373;
  font-weight: 600
}

.primary-footer .dislaimer {
  border-top: 1px solid #e4e2e4;
  margin: 23px 0 0;
  padding-top: 23px;
  font-weight: 300
}

.primary-footer a {
  color: #737373;
  font-weight: 600;
  transition: color 0s ease-in-out
}

.primary-footer .dislaimer a {
  font-weight: 300;
  transition: all 0s ease
}

.primary-footer a:hover {
  text-decoration: none;
  color: var(--hover)
}

@media only screen and (max-width:767px) {
  .primary-footer .copyright {
    width: 100%;
    text-align: center;
    margin-top: 12px
  }
  .primary-footer ul {
    text-align: center;
    width: 100%
  }
}

footer .flex {
  display: flex
}

footer .flex-wrap {
  flex-wrap: wrap
}

footer .justify-content-between {
  justify-content: space-between
}

footer .align-items-center {
  align-items: center
}

footer .text-center {
  text-align: center
}

footer .position-relative {
  position: relative
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Download Now</title>
  <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="nofollow noreferrer noopener" rel="stylesheet" />
  <link href="https://unicons.iconscout.com/release/v3.0.6/css/line.css" rel="nofollow noreferrer noopener" rel="stylesheet" />
</head>

<body>
  <header id="header">

    <nav>
      <div class="container">
        <div class="logo">
          <img src="./favicon.ico" alt="" />
        </div>

        <div class="links">
          <ul>
            <li>
              <a href="/why-us" rel="nofollow noreferrer noopener">Why Us?</a>
            </li>
            <li>
              <a href="/faq" rel="nofollow noreferrer noopener">FAQs</a>
            </li>
            <li>
              <a href="/stats" rel="nofollow noreferrer noopener">Stats</a>
            </li>
            <li>
              <a href="/" rel="nofollow noreferrer noopener" class="active">Support Group</a>
            </li>
          </ul>
        </div>

        <div class="hamburger-menu">
          <div class="bar"></div>
        </div>
      </div>
    </nav>
  </header>
  <form id="download_video">
    <div class="login">
      <div class="login_title"><span>Download Videos Online</span></div>
      <input type="hidden" name="sss" value="VideoDownloader" />
      <div class="login_fields">
        <div class="login_fields__user">
          <div class="icon"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/user_icon_copy.png" /></div>
          <input type="text" id="video" name="video_url" placeholder="Video URL" />
          <div class="validation"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tick.png" /></div>
        </div>
        <div class="login_fields__submit">
          <input type="button" id="get_formats" name=jjs " value="Check Link " />
                        <div class="forgot ">
                            <a href="/supported-sites " rel="nofollow noreferrer noopener">Supported Websites</a>
                        </div>
                    </div>
                </div>
                <div class="success " id="formats ">
                    <img class="thumb_img " id="thumb_img " src="image/not-available.png " height="150 " align="middle " />
                    <br />
                    <br />
                    <label for="standard-select ">Select the preferred quality</label>
                    <select id="standard-select "></select>
                </div>
                <div class="disclaimer ">
                    <p>No Porn Allowed</p>
                </div>
            </div>
        </form>
        <div id="context-menu " style="display: none; ">
            <ul>
                <li class="menu-items ">Developer</li>
                <li class="menu-items ">Support Group</li>
                <li class="menu-items ">Reload</li>
                <li class="menu-items ">Source Code</li>
                <li class="menu-items ">Inspect</li>
            </ul>
        </div>
        <div class="authent ">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/puff.svg " />
            <p>Checking URL....</p>
        </div>
        <footer class="page-footer ">
            <div class="primary-footer position-relative ">
                <div class="container ">
                    <div class="flex flex-wrap justify-content-between align-items-center ">
                        <ul>
                            <li><a title="About " href="/about-us " rel="nofollow noreferrer noopener">About</a></li>
                            <li><a title="Privacy Policy " href="/privacy-policy " rel="nofollow noreferrer noopener">Privacy Policy</a></li>
                            <li><a title="Terms of Service " href="/terms " rel="nofollow noreferrer noopener">Terms of Service</a></li>
                            <li><a title="Contact Us " href="/contact-us " rel="nofollow noreferrer noopener">Contact Us</a></li>
                        </ul>
                        <p class="copyright ">Copyright © 2022 All rights reserved.</p>
                    </div>
                    <p class="dislaimer text-center ">
                        Disclaimer:- <a title="WeSing Downloader " href="/ " rel="nofollow noreferrer noopener">DLNow.ml</a>
                        is Not associated with Any Supported Sites in any ways and DLNow.ml does not host any of the video or audio on our servers, and all videos or audio that you download from our tool are downloaded from their respective
                        CDN servers.
                    </p>
                </div>
            </div>
        </footer>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js "></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js "></script>
        <script src="static/js/index.js "></script>
    </body>
</html>

But in it my Footer is not aligning to the bottom of the page…

I have tried setting position: absolute; but it work but it is covering the main content.

I also tried setting the bottom: 0; but it was also found not to be working.
So, kindly help me to get out of it…

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

UPDATED

I did modify some of your CSS, you can check it out here

https://jsfiddle.net/wmLvqyj4/3/

For the mobile’s screen size, it’s too small for your form but tablet and desktop’s are good

OLD ANSWER

I cannot run your CSS properly but can suggest you to do this way https://jsfiddle.net/479dnqy2/1/

Usually, a page footer is a static content, so we briefly know its height. You can set your page content’s height with this formula your content height = full page height - footer height

.page-content {
  min-height: calc(100vh - 10rem); /*10rem is the size of footer*/
}

.page-footer {
  height: 10rem; /*the fixed height of the footer*/
}

Method 2

How about this?

footer {
  position: fixed;
  bottom: 0;
}

or

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x