Update static/home.css

static/home.css

@@ -1,6 +1,7 @@
 .home-container {
   width: 100%;
   display: flex;
+  z-index: 100;
   overflow: auto;
   min-height: 100vh;
   align-items: center;
@@ -45,10 +46,12 @@
   left: 0px;
   width: 100%;
   height: 100vh;
-  display: none;
+  display: flex;
   padding: 32px;
   z-index: 100;
   position: fixed;
+  transform: translateY(-100%);
+  transition: 0.5s;
   flex-direction: column;
   justify-content: space-between;
   background-color: #fff;
@@ -73,31 +76,10 @@
   align-items: center;
   justify-content: center;
 }
-.home-icon02 {
+.home-icon2 {
   width: var(--dl-size-size-xsmall);
   height: var(--dl-size-size-xsmall);
 }
-.home-nav1 {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-}
-.home-text {
-  margin-bottom: var(--dl-space-space-unit);
-}
-.home-text01 {
-  margin-bottom: var(--dl-space-space-unit);
-}
-.home-text02 {
-  margin-bottom: var(--dl-space-space-unit);
-}
-.home-text03 {
-  margin-bottom: var(--dl-space-space-unit);
-}
-.home-text04 {
-  margin-bottom: var(--dl-space-space-unit);
-}
 .home-container02 {
   flex: 0 0 auto;
   width: auto;
@@ -109,69 +91,93 @@
 .home-login1 {
   margin-right: var(--dl-space-space-twounits);
 }
-.home-icon-group {
+.home-container03 {
+  height: 104px;
   display: flex;
+  align-items: center;
+  flex-direction: column;
 }
-.home-icon04 {
-  width: var(--dl-size-size-xsmall);
-  height: var(--dl-size-size-xsmall);
-  margin-right: var(--dl-space-space-twounits);
+.home-text {
+  width: 517px;
 }
-.home-icon06 {
-  width: var(--dl-size-size-xsmall);
-  height: var(--dl-size-size-xsmall);
-  margin-right: var(--dl-space-space-twounits);
+.home-container04 {
+  flex: 0 0 auto;
+  width: auto;
+  height: auto;
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  justify-content: center;
 }
-.home-icon08 {
-  width: var(--dl-size-size-xsmall);
-  height: var(--dl-size-size-xsmall);
+.home-video {
+  top: 13vh;
+  left: -32vw;
+  width: auto;
+  height: var(--dl-size-size-xxlarge);
+  z-index: 100;
+  position: absolute;
+  transform: rotate(90deg);
 }
-.home-text05 {
-  width: 517px;
+.home-container05 {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.home-container06 {
+  flex: 0 0 auto;
+  width: auto;
+  height: 519px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
 }
 .home-form {
   width: 490px;
-  height: 519px;
+  height: 481px;
   display: flex;
   z-index: 100;
   margin-top: var(--dl-space-space-oneandhalfunits);
   margin-bottom: 0px;
   background-color: #D9D9D9;
 }
-.home-container03 {
+.home-container07 {
   flex: 0 0 auto;
-  width: 180px;
+  width: 162px;
   height: auto;
   display: flex;
   flex-direction: column;
 }
-.home-container04 {
+.home-container08 {
   flex: 0 0 auto;
   width: 180px;
   height: 144px;
   display: flex;
-  padding-right: var(--dl-space-space-unit);
+  align-self: center;
+  padding-right: 0px;
   flex-direction: column;
 }
-.home-text07 {
+.home-text02 {
   height: var(--dl-size-size-small);
+  align-self: center;
   margin-top: var(--dl-space-space-unit);
   margin-left: var(--dl-space-space-threeunits);
   margin-right: var(--dl-space-space-threeunits);
 }
 .home-textinput {
-  width: 164px;
-  height: 33px;
-  padding-left: var(--dl-space-space-unit);
+  width: var(--dl-size-size-large);
+  height: auto;
+  margin-left: var(--dl-space-space-unit);
+  padding-left: 1rem;
 }
-.home-container05 {
+.home-container09 {
   flex: 0 0 auto;
   width: auto;
   height: 144px;
   display: flex;
+  align-self: center;
   flex-direction: column;
 }
-.home-text08 {
+.home-text03 {
   height: var(--dl-size-size-small);
   align-self: center;
   margin-top: var(--dl-space-space-unit);
@@ -184,62 +190,67 @@
   margin-left: var(--dl-space-space-halfunit);
   padding-left: 1rem;
 }
-.home-container06 {
+.home-container10 {
   flex: 0 0 auto;
   width: auto;
   height: 144px;
   display: flex;
+  position: relative;
+  align-self: center;
   flex-direction: column;
 }
-.home-text09 {
-  height: var(--dl-size-size-small);
+.home-text04 {
+  height: auto;
   align-self: center;
   margin-top: var(--dl-space-space-unit);
   margin-left: 0px;
 }
 .home-textinput2 {
   width: var(--dl-size-size-large);
-  height: 33px;
+  height: auto;
   align-self: stretch;
-  margin-top: 0px;
+  margin-top: var(--dl-space-space-twounits);
   margin-left: var(--dl-space-space-halfunit);
   padding-left: 1rem;
 }
-.home-container07 {
+.home-container11 {
   flex: 0 0 auto;
   width: auto;
   height: auto;
   display: flex;
   flex-direction: column;
 }
-.home-container08 {
+.home-container12 {
   flex: 0 0 auto;
   width: auto;
   height: 144px;
   display: flex;
+  align-self: center;
+  align-items: center;
   flex-direction: column;
 }
-.home-text10 {
+.home-text05 {
   height: var(--dl-size-size-small);
   align-self: center;
   margin-top: var(--dl-space-space-unit);
-  margin-left: var(--dl-space-space-halfunit);
+  margin-left: 0px;
 }
 .home-textinput3 {
   width: var(--dl-size-size-large);
-  height: 33px;
-  align-self: stretch;
+  height: auto;
   padding-left: var(--dl-space-space-halfunit);
 }
-.home-container09 {
+.home-container13 {
   flex: 0 0 auto;
   width: auto;
   height: 138px;
   display: flex;
+  align-self: center;
   flex-direction: column;
 }
-.home-text11 {
+.home-text06 {
   height: var(--dl-size-size-small);
+  align-self: center;
   margin-top: var(--dl-space-space-unit);
   margin-left: var(--dl-space-space-halfunit);
 }
@@ -249,49 +260,44 @@
   margin-left: 0px;
   padding-left: 1rem;
 }
-.home-container10 {
+.home-container14 {
   flex: 0 0 auto;
   width: auto;
   height: 144px;
   display: flex;
+  align-self: center;
   flex-direction: column;
 }
-.home-text12 {
+.home-text07 {
   height: var(--dl-size-size-small);
   align-self: center;
   margin-top: var(--dl-space-space-unit);
   margin-left: 0px;
   padding-top: var(--dl-space-space-halfunit);
 }
-.result {
-  height: var(--dl-size-size-small);
-  align-self: center;
-  margin-top: 20px;
-  margin-left: 30px;
-  padding-top: var(--dl-space-space-halfunit);
-}
 .home-textinput5 {
   width: var(--dl-size-size-large);
-  height: 33px;
+  height: auto;
   align-self: stretch;
   margin-top: var(--dl-space-space-halfunit);
   padding-left: 1rem;
 }
-.home-container11 {
+.home-container15 {
   flex: 0 0 auto;
   width: auto;
   height: auto;
   display: flex;
   flex-direction: column;
 }
-.home-container12 {
+.home-container16 {
   flex: 0 0 auto;
   width: auto;
   height: 144px;
   display: flex;
+  align-self: center;
   flex-direction: column;
 }
-.home-text13 {
+.home-text08 {
   height: var(--dl-size-size-small);
   align-self: center;
   margin-top: var(--dl-space-space-unit);
@@ -299,19 +305,19 @@
 }
 .home-textinput6 {
   width: var(--dl-size-size-large);
-  height: 33px;
-  align-self: stretch;
+  height: auto;
   margin-left: var(--dl-space-space-halfunit);
   padding-left: 1rem;
 }
-.home-container13 {
+.home-container17 {
   flex: 0 0 auto;
   width: auto;
   height: 144px;
   display: flex;
+  align-self: center;
   flex-direction: column;
 }
-.home-text14 {
+.home-text09 {
   height: var(--dl-size-size-small);
   align-self: center;
   margin-top: var(--dl-space-space-unit);
@@ -329,9 +335,13 @@
   width: var(--dl-size-size-large);
   align-self: center;
   margin-top: var(--dl-space-space-twounits);
+  transition: 0.3s;
   background-color: var(--dl-color-danger-500);
 }
-.home-text15 {
+.home-button:active {
+  background-color: var(--dl-color-danger-700);
+}
+.home-text10 {
   width: auto;
   text-align: center;
 }
@@ -340,9 +350,24 @@
   width: var(--dl-size-size-large);
   align-self: center;
   margin-top: var(--dl-space-space-oneandhalfunits);
+  transition: 0.3s;
   padding-right: 1rem;
   background-color: var(--dl-color-primary-100);
 }
+.home-button1:active {
+  background-color: var(--dl-color-primary-300);
+}
+.home-container18 {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+@media(max-width: 991px) {
+  .home-video {
+    top: 13vh;
+    left: -25rem;
+  }
+}
 @media(max-width: 767px) {
   .home-navbar-interactive {
     padding-left: var(--dl-space-space-twounits);
@@ -354,6 +379,9 @@
   .home-burger-menu {
     display: flex;
   }
+  .home-video {
+    display: none;
+  }
 }
 @media(max-width: 479px) {
   .home-navbar-interactive {
@@ -362,4 +390,22 @@
   .home-mobile-menu {
     padding: 16px;
   }
-}
+  .home-video {
+    display: none;
+  }
+  .home-form {
+    width: auto;
+  }
+  .home-container07 {
+    width: auto;
+  }
+  .home-container08 {
+    width: auto;
+  }
+  .home-button {
+    width: auto;
+  }
+  .home-button1 {
+    width: auto;
+  }
+}