made footer sticky to bottom

Logan1x · Jan 29, 2021 · 0ecabea · 0ecabea
1 parent 4bc4dd0
commit 0ecabea
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -1,8 +1,13 @@
 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
+*{
+  position: relative;
+}
+
 body {
     font-family: 'Poppins', sans-serif;
-    height: 100%;
     background-color: #ffba08;
+    height: 100%;
+
 }
 
 h1{
@@ -55,6 +60,11 @@ input[type=submit]:hover {
     color : #ffba08;
     background-color: #343a40 ;
 }
+
+.extra-margin{
+  margin-bottom: 50px;
+}
+
 .error{
     color: red;
 }
@@ -63,9 +73,11 @@ input[type=submit]:hover {
 .footer{
   background: black;
   color:#ffba08;
-  height: 150px;
-  position: relative;
-
+  /* height: 150px; */
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
 }
 
 

diff --git a/templates/404.html b/templates/404.html
@@ -85,7 +85,7 @@
 
 
 <body>
-    <nav class="navbar navbar-expand-lg">
+    <!-- <nav class="navbar navbar-expand-lg">
         <div class="container-fluid">
             <a class="nav-link" id="companylogo" href="#">Logo</a>
             <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -105,7 +105,7 @@
                 </ul>
             </div>
         </div>
-    </nav>
+    </nav> -->
     <div class="page-wrap d-flex flex-row align-items-center">
         <div class="container">
             <div class="row justify-content-center">

diff --git a/templates/index.html b/templates/index.html
@@ -34,8 +34,8 @@ <h3 class="text-break" id="myInput">{{ seq }}</h3>
         <button class="btn m-2 mb-3" data-clipboard-target="#myInput">Copy Sequence</button>
         <P>Generated Random Reversed compliement sequence is :</P>
         <h3 class="text-break" id="myInput1">{{ rev_seq }}</h3>
-        <button class="btn m-2" data-clipboard-target="#myInput1">Copy Reversed Sequence</button>
-
+        <button class="btn m-2 extra-margin" data-clipboard-target="#myInput1">Copy Reversed Sequence</button>
+        <div class="extra-margin"></div>
     {% endif %}