updat

css/index.css

@@ -16,7 +16,7 @@ a {
     text-decoration: none;
     color: #5f72bd;
     font-weight: bold;
-    opacity: 0.7
+    opacity: 0.8
 }
 a:hover {
     opacity: 1
@@ -28,6 +28,19 @@ form {
     text-align: right;
     padding-bottom: 20px;
 }
+::-webkit-input-placeholder {
+  color: rgba(0, 0, 0, 0.2);
+  font-style: italic;
+}
+:-ms-input-placeholder {
+  color: rgba(0, 0, 0, 0.2);
+  font-style: italic;
+}
+::placeholder {
+  color: rgba(0, 0, 0, 0.2);
+  font-style: italic;
+}
+
 pre {
     color: #55cc66;
     background: #001800!important;
@@ -72,14 +85,40 @@ pre::-webkit-scrollbar-thumb {
 .margin {
     margin: 0 auto
 }
+.bg-intro {
+background: #5f72bd;
+height: 90%;
+}
 .intro {
     height: 100%;
     color: #fff;
     text-align: center;
     background: #5f72bd;
-    background: -webkit-linear-gradient(left, #5f72bd, #9b23ea);
-    background: linear-gradient(to right, #5f72bd, #9b23ea);
-}
+    background-color: #5f72bd;
+    background: url(../img/bg-teste.svg);
+    background-size: cover;
+    background-repeat: repeat;
+    background-position: bottom;
+    -webkit-animation-name: anima;
+            animation-name: anima;
+    -webkit-animation-duration: 2s;
+            animation-duration: 2s;
+    -webkit-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+    -webkit-animation-direction: alternate;
+            animation-direction: alternate;
+    -webkit-animation-timing-function: linear;
+            animation-timing-function: linear;
+}
+@-webkit-keyframes anima {
+      0% {background-position: bottom;}
+      100% {background-position: center;}
+}
+@keyframes anima {
+      0% {background-position: bottom;}
+      100% {background-position: center;}
+}
+
 .flex {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -94,14 +133,16 @@ pre::-webkit-scrollbar-thumb {
 }
 .box {
     width: 500px;
-    max-width: 90%
+    max-width: 90%;
+padding-top: 0px;
 }
 .ex {
     padding-top: 20px;
 }
 footer {
     padding-top: 50px;
-    padding-bottom: 30px
+    padding-bottom: 30px;
+    font-size: 20px;
 }
 .bg {
     background: #fff;
@@ -117,8 +158,7 @@ footer {
     padding-top: 10px
 }
 .container-form {
-    margin-top: 10px;
-    margin-bottom: 20px;
+    margin: 30px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -141,7 +181,9 @@ footer {
     margin-top: 0;
     padding-bottom: 10px;
 }
-.box-form input {
+.box-form textarea,
+.box-form input,
+.box-form select {
     width: 100%;
     height: 30px;
     font-size: 14px;
@@ -150,25 +192,37 @@ footer {
     -webkit-transition: 2s;
     transition: 2s;
     color: rgba(0, 0, 0, 0.5);
-    ;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 .box-form input:focus {
     border-bottom: 1px solid #5f72bd;
 }
+.cl {
+width: 50px!important;
+}
+.clr {
+width: 100px!important;
+}
 .box-form label {
     font-weight: 700;
     color: rgba(0, 0, 0, 0.5);
     font-size: 20px
 }
 .box-form span {
-    color: #5f72bd
+    color: rgba(0, 0, 0, .5);
+    font-size: 12px;
+}
+.text-center {
+  text-align:
 }
 .box-form-button {
-    background: -webkit-linear-gradient(left, #5f72bd, #9b23ea);
-    background: linear-gradient(to right, #5f72bd, #9b23ea);
+  background: #5f72bd;
     color: #fff;
-    width: 100%;
+    min-width: 100px;
+    padding-left: 20px;
+    padding-right: 20px;
+    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+    margin: 0 auto;
     border: none;
     height: 50px;
     font-size: 20px;
@@ -178,14 +232,36 @@ footer {
     transition: 1s;
     cursor: pointer;
 }
+
 .counter {
     font-size: 14px;
-    opacity: 0.8
+    opacity: 0.8;
 }
 .box-form-button[disabled] {
     opacity: 0.6;
     cursor: not-allowed;
 }
+.ttt {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+}
+.flex1 {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1
+}
+.carac {
+  width: 100%;
+  text-align: right;
+}
+.box-form label i {
+color: #cc5555;
+margin-left: -3px;;
+}
 .btn {
     background: #5f72bd;
     color: #fff;
@@ -202,14 +278,14 @@ footer {
     cursor: pointer;
 }
 .btn-remover {
-    background: #cc5555
+    background: #cc5555 !important
 }
 .btn-remover:hover {
-    background: #ad4848
+    background: #ad4848 !important
 }
 .logo {
-    width: 300px;
-    ;
+    width: 100%;
+    max-width: 90%;
 }
 .t h2 {
     color: #5f72bd;
@@ -228,11 +304,34 @@ footer {
     color: rgba(0, 0, 0, 0.6);
     font-size: 14px
 }
+.lolo {
+  color: #FFDD67
+}
+.gt {
+  min-height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #5f72bd;
+  color: #fff;
+  transition: 1s
+}
+.git {
+  max-width: 90%;
+  transition: 1s;
+  text-align: center;
+}
+.gt:hover .git {
+  transform: scale(1.2, 1.2);
+}
 @media only screen and (max-width: 400px) {
     .some {
         display: none
     }
     pre {
         width: 80%
     }
+    .container-form {
+      margin: 10px
+    }
 }