14 changed files with 469 additions and 23 deletions
@ -0,0 +1,112 @@ |
|||
/* cyrillic-ext */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 200; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmhduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; |
|||
} |
|||
/* cyrillic */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 200; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wkxduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
|||
} |
|||
/* greek-ext */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 200; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmxduz8A.woff2) format('woff2'); |
|||
unicode-range: U+1F00-1FFF; |
|||
} |
|||
/* greek */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 200; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlBduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0370-03FF; |
|||
} |
|||
/* vietnamese */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 200; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmBduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; |
|||
} |
|||
/* latin-ext */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 200; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmRduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|||
} |
|||
/* latin */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 200; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdu.woff2) format('woff2'); |
|||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|||
} |
|||
/* cyrillic-ext */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmhduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; |
|||
} |
|||
/* cyrillic */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwkxduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
|||
} |
|||
/* greek-ext */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmxduz8A.woff2) format('woff2'); |
|||
unicode-range: U+1F00-1FFF; |
|||
} |
|||
/* greek */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlBduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0370-03FF; |
|||
} |
|||
/* vietnamese */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmBduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; |
|||
} |
|||
/* latin-ext */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmRduz8A.woff2) format('woff2'); |
|||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|||
} |
|||
/* latin */ |
|||
@font-face { |
|||
font-family: 'Source Sans Pro'; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu.woff2) format('woff2'); |
|||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|||
} |
@ -0,0 +1,120 @@ |
|||
|
|||
.bg-bubbles { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
z-index: 1; |
|||
|
|||
li { |
|||
position: absolute; |
|||
list-style: none; |
|||
display: block; |
|||
width: 40px; |
|||
height: 40px; |
|||
background-color: rgba(255, 255, 255, 0.15); |
|||
bottom: -160px; |
|||
|
|||
-webkit-animation: square 25s infinite; |
|||
animation: square 25s infinite; |
|||
|
|||
-webkit-transition-timing-function: linear; |
|||
transition-timing-function: linear; |
|||
|
|||
&:nth-child(1) { |
|||
left: 10%; |
|||
} |
|||
|
|||
&:nth-child(2) { |
|||
left: 20%; |
|||
|
|||
width: 80px; |
|||
height: 80px; |
|||
|
|||
animation-delay: 2s; |
|||
animation-duration: 17s; |
|||
} |
|||
|
|||
&:nth-child(3) { |
|||
left: 25%; |
|||
animation-delay: 4s; |
|||
} |
|||
|
|||
&:nth-child(4) { |
|||
left: 40%; |
|||
width: 60px; |
|||
height: 60px; |
|||
|
|||
animation-duration: 22s; |
|||
|
|||
background-color: rgba(255, 255, 255, 0.25); |
|||
} |
|||
|
|||
&:nth-child(5) { |
|||
left: 70%; |
|||
} |
|||
|
|||
&:nth-child(6) { |
|||
left: 80%; |
|||
width: 120px; |
|||
height: 120px; |
|||
|
|||
animation-delay: 3s; |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
&:nth-child(7) { |
|||
left: 32%; |
|||
width: 160px; |
|||
height: 160px; |
|||
|
|||
animation-delay: 7s; |
|||
} |
|||
|
|||
&:nth-child(8) { |
|||
left: 55%; |
|||
width: 20px; |
|||
height: 20px; |
|||
|
|||
animation-delay: 15s; |
|||
animation-duration: 40s; |
|||
} |
|||
|
|||
&:nth-child(9) { |
|||
left: 25%; |
|||
width: 10px; |
|||
height: 10px; |
|||
|
|||
animation-delay: 2s; |
|||
animation-duration: 40s; |
|||
background-color: rgba(255, 255, 255, 0.3); |
|||
} |
|||
|
|||
&:nth-child(10) { |
|||
left: 90%; |
|||
width: 160px; |
|||
height: 160px; |
|||
|
|||
animation-delay: 11s; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@-webkit-keyframes square { |
|||
0% { |
|||
transform: translateY(0); |
|||
} |
|||
100% { |
|||
transform: translateY(-700px) rotate(600deg); |
|||
} |
|||
} |
|||
@keyframes square { |
|||
0% { |
|||
transform: translateY(0); |
|||
} |
|||
100% { |
|||
transform: translateY(-700px) rotate(600deg); |
|||
} |
|||
} |
@ -0,0 +1,18 @@ |
|||
import React from "react" |
|||
import style from "./Bubbles.module.scss" |
|||
export default function () { |
|||
return ( |
|||
<ul className={style["bg-bubbles"]}> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
</ul> |
|||
) |
|||
} |
@ -0,0 +1,36 @@ |
|||
.ring { |
|||
position: relative; |
|||
width: 45px; |
|||
height: 45px; |
|||
margin: 0 auto; |
|||
border: 4px solid #4b9cdb; |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
.ball { |
|||
position: absolute; |
|||
top: -11px; |
|||
left: 0; |
|||
width: 16px; |
|||
height: 16px; |
|||
border-radius: 100%; |
|||
background: #4282b3; |
|||
} |
|||
|
|||
.loading .holder { |
|||
position: absolute; |
|||
width: 12px; |
|||
height: 45px; |
|||
left: 17px; |
|||
top: 0px; |
|||
animation: loadingE 1.3s linear infinite; |
|||
} |
|||
|
|||
@keyframes loadingE { |
|||
0% { |
|||
transform: rotate(0deg); |
|||
} |
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
@ -0,0 +1,14 @@ |
|||
import React from "react" |
|||
import style from "./Rainbow.module.scss" |
|||
|
|||
console.log(style) |
|||
|
|||
export default () => ( |
|||
<div className={style.loading}> |
|||
<div className={style.ring}> |
|||
<div className={style.holder}> |
|||
<div className={style.ball}></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
@ -1,10 +1,10 @@ |
|||
import React from "react" |
|||
import { NavLink } from "react-router-dom" |
|||
|
|||
export default function () { |
|||
export default function Page404() { |
|||
return ( |
|||
<div> |
|||
<NavLink to="/">404</NavLink> |
|||
<NavLink to="/">阿松大asddadsa</NavLink> |
|||
</div> |
|||
) |
|||
} |
|||
|
@ -1,3 +1,134 @@ |
|||
.login.page{ |
|||
background-color: red; |
|||
} |
|||
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300); |
|||
|
|||
$color: #53e3a6; |
|||
.login.page { |
|||
font-family: "Source Sans Pro", sans-serif; |
|||
color: white; |
|||
font-weight: 300; |
|||
|
|||
::-webkit-input-placeholder { |
|||
/* WebKit browsers */ |
|||
font-family: "Source Sans Pro", sans-serif; |
|||
color: white; |
|||
font-weight: 300; |
|||
} |
|||
:-moz-placeholder { |
|||
/* Mozilla Firefox 4 to 18 */ |
|||
font-family: "Source Sans Pro", sans-serif; |
|||
color: white; |
|||
opacity: 1; |
|||
font-weight: 300; |
|||
} |
|||
::-moz-placeholder { |
|||
/* Mozilla Firefox 19+ */ |
|||
font-family: "Source Sans Pro", sans-serif; |
|||
color: white; |
|||
opacity: 1; |
|||
font-weight: 300; |
|||
} |
|||
:-ms-input-placeholder { |
|||
/* Internet Explorer 10+ */ |
|||
font-family: "Source Sans Pro", sans-serif; |
|||
color: white; |
|||
font-weight: 300; |
|||
} |
|||
.wrapper { |
|||
background: #50a3a2; |
|||
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); |
|||
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); |
|||
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); |
|||
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); |
|||
|
|||
position: absolute; |
|||
top: 50%; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 400px; |
|||
margin-top: -200px; |
|||
overflow: hidden; |
|||
|
|||
&.form-success { |
|||
form { |
|||
opacity: 0; |
|||
pointer-events: none; |
|||
} |
|||
.container { |
|||
h1 { |
|||
transform: translateY(85px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.container { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
padding: 80px 0; |
|||
height: 400px; |
|||
text-align: center; |
|||
|
|||
h1 { |
|||
font-size: 40px; |
|||
transition-duration: 1s; |
|||
transition-timing-function: ease-in-put; |
|||
font-weight: 200; |
|||
} |
|||
} |
|||
|
|||
form { |
|||
padding: 20px 0; |
|||
position: relative; |
|||
z-index: 2; |
|||
transition: opacity 0.5s linear; |
|||
|
|||
input { |
|||
display: block; |
|||
appearance: none; |
|||
outline: 0; |
|||
border: 1px solid rgba(255, 255, 255, 0.4); |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
width: 250px; |
|||
|
|||
border-radius: 3px; |
|||
padding: 10px 15px; |
|||
margin: 0 auto 10px auto; |
|||
display: block; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
|
|||
color: white; |
|||
|
|||
transition-duration: 0.25s; |
|||
font-weight: 300; |
|||
|
|||
&:hover { |
|||
background-color: rgba(255, 255, 255, 0.4); |
|||
} |
|||
|
|||
&:focus { |
|||
background-color: white; |
|||
width: 300px; |
|||
|
|||
color: $color; |
|||
} |
|||
} |
|||
|
|||
button { |
|||
appearance: none; |
|||
outline: 0; |
|||
background-color: white; |
|||
border: 0; |
|||
padding: 10px 15px; |
|||
color: $color; |
|||
border-radius: 3px; |
|||
width: 250px; |
|||
cursor: pointer; |
|||
font-size: 18px; |
|||
transition-duration: 0.25s; |
|||
|
|||
&:hover { |
|||
background-color: rgb(245, 247, 249); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
Loading…
Reference in new issue