Merge pull request #4 from ayaanqasmi/main

Improved UI

css/main.css

@@ -346,6 +346,7 @@ p {
   font-weight: 400;
   font-family: "Raleway", sans-serif;
   transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  z-index: 100;
 }
 
 .navtop__link:hover {
@@ -366,20 +367,37 @@ p {
   }
 }
 
-@media only screen and (max-width: 420px) {
+@media only screen and (max-width: 450px) {
   .navtop {
     padding-top: 1rem;
     padding-bottom: 1rem;
   }
-  .navtop__brand {
-    max-width: 80px;
-  }
+
   .navtop__menu-item {
     margin-left: 1.6rem;
   }
   .navtop__link {
     font-size: 0.8em;
   }
+  .navtop__brandlink{
+    font-size: 0.2em;
+  }
+  .navtop__menu-item {
+    margin-left: 1rem;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.nod {
+  animation: nodding 1200ms infinite ease-in-out;
+  display: inline-block;
 }
 
 /* Main Content Styles */
@@ -392,7 +410,7 @@ p {
 .intro2 {
   padding-top: 1em;
   padding-bottom: 12em;
-  min-height: 90vh;
+  height: 90vh;
   background: #0f0c29;
   background: -webkit-linear-gradient(to right, #0f0c29, #24243e, #302b63, #24243e, #0f0c29);
   background: linear-gradient(to right, #0f0c29, #24243e, #302b63, #24243e, #0f0c29);
@@ -420,6 +438,9 @@ p {
   font-size: 4em;
   line-height: 1.2em;
   font-weight: 700;
+
+  animation: fade-in 1500ms 200ms backwards ;
+
 }
 
 .intro__paragraph {
@@ -428,6 +449,9 @@ p {
   max-width: 580px;
   text-align: center;
   font-size: 1.5em;
+
+  animation: fade-in 1500ms 600ms backwards ;
+
 }
 
 .intro__action {
@@ -436,7 +460,10 @@ p {
   align-items: center;
   margin-top: 1.8rem;
 }
-
+.intro__action--animation{
+
+  animation: fade-in 1500ms 1000ms backwards ;
+}
 .intro__button {
   padding: 0.8em 1.8em;
   border: 2px solid #17c3b2;
@@ -646,6 +673,14 @@ input:valid ~ label {
 }
 .features__list {
   text-align: center;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+  margin: 2rem;
+  padding: 2rem;
+  border-radius: 1em;
+  transition: all 300ms ease;
+}
+.features__list:hover{
+  scale:1.03
 }
 .features__list > .image-wrapper > img {
   height: 80px;
@@ -721,6 +756,8 @@ input:valid ~ label {
   font-family: "Raleway", sans-serif;
   color: white;
   margin-top: 2rem;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
   font-size: 3em;
   max-width: 480px;
 }
@@ -1354,6 +1391,7 @@ h1 {
   width: 100%;
 }
 
+
 .accordion:not(:target):hover {
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
 }
@@ -1491,11 +1529,13 @@ main :last-child,
   overflow: hidden;
   position: relative;
   white-space: nowrap;
+
 }
 
 .scroller__inner {
   display: inline-flex;
   animation: scroll var(--_animation-duration, 30s) linear infinite;
+  padding: 2rem;
 }
 
 .scroller__inner img {
@@ -1525,6 +1565,25 @@ main :last-child,
 
 .company-design-area {
   padding: 100px 0px;
+  background: #0f0c29; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to right,
+    #0f0c29,
+    #24243e,
+    #302b63,
+    #24243e,
+    #0f0c29
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to right,
+    #0f0c29,
+    #24243e,
+    #302b63,
+    #24243e,
+    #0f0c29
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background-size: 300% 300%;
+  animation: gradient 15s ease infinite;
 }
 
 .company-design-area h2 {

css/signup.css

@@ -24,6 +24,9 @@ body{
 h1{
     color: white;
 }
+.cyan{
+  color: #00f7ff;
+}
 .login-box {
     position: absolute;
     top: 50%;