|
@@ -1,3 +1,39 @@
|
|
|
|
+@keyframes zoom {
|
|
|
|
+ from {
|
|
|
|
+ transform: scale(0.5);
|
|
|
|
+ }
|
|
|
|
+ to {
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+@-webkit-keyframes scroll {
|
|
|
|
+ 0% {
|
|
|
|
+ -webkit-transform: translate(0, 0);
|
|
|
|
+ transform: translate(0, 0);
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ -webkit-transform: translate(-100%, 0);
|
|
|
|
+ transform: translate(-100%, 0);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+@-moz-keyframes scroll {
|
|
|
|
+ 0% {
|
|
|
|
+ -moz-transform: translate(0, 0);
|
|
|
|
+ transform: translate(0, 0);
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ -moz-transform: translate(-100%, 0);
|
|
|
|
+ transform: translate(-100%, 0);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+@keyframes scroll {
|
|
|
|
+ 0% {
|
|
|
|
+ transform: translate(0, 0);
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ transform: translate(-100%, 0);
|
|
|
|
+ }
|
|
|
|
+}
|
|
.App {
|
|
.App {
|
|
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
@@ -238,34 +274,7 @@ main {
|
|
transition: 0.3s;
|
|
transition: 0.3s;
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
}
|
|
}
|
|
-.InputForm {
|
|
|
|
- position: fixed;
|
|
|
|
- color: black;
|
|
|
|
- flex-direction: column;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- float: right;
|
|
|
|
- background: rgb(58, 100, 180);
|
|
|
|
- background: linear-gradient(
|
|
|
|
- 90deg,
|
|
|
|
- rgba(58, 100, 180, 1) 0%,
|
|
|
|
- rgba(92, 168, 221, 1) 51%,
|
|
|
|
- rgba(29, 253, 182, 1) 100%
|
|
|
|
- );
|
|
|
|
- transition: 0.3s;
|
|
|
|
- right: 0;
|
|
|
|
-}
|
|
|
|
-.LoginPage {
|
|
|
|
- margin: 150px;
|
|
|
|
-}
|
|
|
|
-.LoginForm {
|
|
|
|
- margin: 100px;
|
|
|
|
- padding: 20px 0px;
|
|
|
|
- background: rgba(58, 100, 180, 1);
|
|
|
|
- border-radius: 15px;
|
|
|
|
- text-align: center;
|
|
|
|
- box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
|
|
-}
|
|
|
|
|
|
+
|
|
.NextArrow {
|
|
.NextArrow {
|
|
font-size: 50px;
|
|
font-size: 50px;
|
|
color: #41607d;
|
|
color: #41607d;
|
|
@@ -308,11 +317,70 @@ main {
|
|
margin-right: auto;
|
|
margin-right: auto;
|
|
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
}
|
|
}
|
|
-.Form {
|
|
|
|
|
|
+.LoginForm {
|
|
|
|
+ margin: 100px;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ background: rgba(58, 100, 180, 1);
|
|
|
|
+ border-radius: 15px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
- background: rgb(142, 199, 239);
|
|
|
|
- border-radius: 10px;
|
|
|
|
|
|
+ p {
|
|
|
|
+ font-size: large;
|
|
|
|
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
|
|
|
|
+ sans-serif;
|
|
|
|
+ }
|
|
|
|
+ .LoginForm-Form {
|
|
|
|
+ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
|
|
+ background: rgb(142, 199, 239);
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ margin: 40px;
|
|
|
|
+ padding: 20px;
|
|
|
|
+
|
|
|
|
+ Button {
|
|
|
|
+ margin: 10px 0px;
|
|
|
|
+ padding: 0px 10px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+ p {
|
|
|
|
+ color: #0c3d67;
|
|
|
|
+ margin: 0;
|
|
|
|
+ padding: 0;
|
|
|
|
+ font-size: medium;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.InputForm {
|
|
|
|
+ position: fixed;
|
|
|
|
+ color: black;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ float: right;
|
|
|
|
+ background: rgb(58, 100, 180);
|
|
|
|
+ background: linear-gradient(
|
|
|
|
+ 90deg,
|
|
|
|
+ rgba(58, 100, 180, 1) 0%,
|
|
|
|
+ rgba(92, 168, 221, 1) 51%,
|
|
|
|
+ rgba(29, 253, 182, 1) 100%
|
|
|
|
+ );
|
|
|
|
+ transition: 0.3s;
|
|
|
|
+ // right: 0;
|
|
|
|
+ text-align: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+
|
|
|
|
+ img {
|
|
|
|
+ margin-top: 200px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+
|
|
.LikeStyle {
|
|
.LikeStyle {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
padding: 3px;
|
|
padding: 3px;
|
|
@@ -321,7 +389,7 @@ main {
|
|
font-size: xx-large;
|
|
font-size: xx-large;
|
|
margin-right: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
-.Filled {
|
|
|
|
|
|
+.SmileBtnFilled {
|
|
font-size: xx-large;
|
|
font-size: xx-large;
|
|
margin-right: 15px;
|
|
margin-right: 15px;
|
|
color: #108ee9;
|
|
color: #108ee9;
|
|
@@ -406,3 +474,102 @@ main {
|
|
margin-left: 10px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+/* Responsive */
|
|
|
|
+/* 992px - 1200px */
|
|
|
|
+@media screen and (max-width: 1200px) {
|
|
|
|
+ .LoginForm {
|
|
|
|
+ p {
|
|
|
|
+ font-size: xx-large;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .InputForm {
|
|
|
|
+ // width: 960px;
|
|
|
|
+ img {
|
|
|
|
+ // width: 50%;
|
|
|
|
+ // height: 50%;
|
|
|
|
+ }
|
|
|
|
+ Title {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ section {
|
|
|
|
+ display: flex;
|
|
|
|
+ // flex-direction: row;
|
|
|
|
+ // width: 100%;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .LoginForm-Form {
|
|
|
|
+ // width: 90%;
|
|
|
|
+ // width: 960px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+// .wrapper{
|
|
|
|
+// flex-direction: column;
|
|
|
|
+// }
|
|
|
|
+// .offer{
|
|
|
|
+// width: 90%;
|
|
|
|
+// }
|
|
|
|
+// .intro{
|
|
|
|
+// width: auto;
|
|
|
|
+// }
|
|
|
|
+// .travel{
|
|
|
|
+// display: block;
|
|
|
|
+// width: 549px;
|
|
|
|
+// }
|
|
|
|
+// .bonuses{
|
|
|
|
+// flex-direction: column;
|
|
|
|
+// }
|
|
|
|
+// .bonus{
|
|
|
|
+// width: auto;
|
|
|
|
+// margin-bottom: 25px;
|
|
|
|
+// }
|
|
|
|
+// .title{
|
|
|
|
+// width: auto;
|
|
|
|
+// }
|
|
|
|
+// .logo{
|
|
|
|
+// margin-bottom: 40px;
|
|
|
|
+// }
|
|
|
|
+// }
|
|
|
|
+// /* 768px - 992px */
|
|
|
|
+// @media screen and (max-width: 992px)
|
|
|
|
+// {
|
|
|
|
+// .container{
|
|
|
|
+// width: 720px;
|
|
|
|
+// }
|
|
|
|
+// .btn{
|
|
|
|
+// display: block;
|
|
|
|
+// align-items:center;
|
|
|
|
+// margin: auto;
|
|
|
|
+// }
|
|
|
|
+// }
|
|
|
|
+// /*576px-768px*/
|
|
|
|
+// @media screen and (max-width: 768px)
|
|
|
|
+// {
|
|
|
|
+
|
|
|
|
+// .container{
|
|
|
|
+// width: 540px;
|
|
|
|
+// }
|
|
|
|
+// .travel{
|
|
|
|
+// width: 100%;
|
|
|
|
+// }
|
|
|
|
+// .input{
|
|
|
|
+// width: 80%;
|
|
|
|
+// }
|
|
|
|
+// .btn{
|
|
|
|
+// width: 80%;
|
|
|
|
+// }
|
|
|
|
+// }
|
|
|
|
+// /*320px-576px*/
|
|
|
|
+// @media screen and (max-width: 576px)
|
|
|
|
+// {
|
|
|
|
+// .container{
|
|
|
|
+// width: 90%;
|
|
|
|
+// }
|
|
|
|
+
|
|
|
|
+// .input{
|
|
|
|
+// font-size: 12px;
|
|
|
|
+// }
|
|
|
|
+
|
|
|
|
+// }
|