moved folders around and added janken
This commit is contained in:
521
main-web/client/src/web.module.scss
Normal file
521
main-web/client/src/web.module.scss
Normal file
@@ -0,0 +1,521 @@
|
||||
@font-face {
|
||||
font-family: 'IndieFlower';
|
||||
src: url('./static/font/indieflower.ttf') format('truetype'); }
|
||||
|
||||
.header {
|
||||
background-image: url('./static/img/bgbg.png');
|
||||
background-repeat: none;
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
}
|
||||
.buynow {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 235px;
|
||||
height: 99px;
|
||||
background-image: url('./static/img/buynow.png');
|
||||
z-index: 1;
|
||||
&> a {
|
||||
display:block;
|
||||
width: 235px;
|
||||
height: 99px;
|
||||
}
|
||||
&:hover {
|
||||
animation: bounce 1s;
|
||||
}
|
||||
}
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/bgimage.png');
|
||||
background-repeat: none;
|
||||
width: 1366px;
|
||||
height: 401px;
|
||||
animation: upAndDown 10s linear infinite;
|
||||
transition: background-image 0.5s ease-in-out;
|
||||
&:hover {
|
||||
transition: background-image 0.5s ease-in-out;
|
||||
background-image: url('./static/img/bgimagenight.png');
|
||||
}
|
||||
}
|
||||
.logoHeader {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 577px;
|
||||
height: 401px;
|
||||
background-image: url('./static/img/cat_fb_logo.png');
|
||||
background-repeat: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logoSwitch {
|
||||
position: absolute;
|
||||
top: 310px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 415px;
|
||||
height: 64px;
|
||||
background-image: url('./static/img/faito_crab.png');
|
||||
background-repeat: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.contents {
|
||||
flex-grow: 1;
|
||||
padding: 30px;
|
||||
}
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background-image: url('./static/img/background.png');
|
||||
background-repeat: none;
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
color: white;
|
||||
bottom: 0;
|
||||
}
|
||||
.footerText {
|
||||
float: left;
|
||||
display: block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
& > p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.twitch {
|
||||
float: right;
|
||||
width: 113px;
|
||||
height: 70px;
|
||||
background-image: url('./static/img/twitch.png');
|
||||
background-size: 142px 70px;
|
||||
margin: 0 20px;
|
||||
background-repeat: none;
|
||||
background-size: contain;
|
||||
&> a {
|
||||
display:block;
|
||||
width: 113px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
.twitchHome {
|
||||
width: 113px;
|
||||
height: 70px;
|
||||
background-image: url('./static/img/twitch.png');
|
||||
background-size: 142px 70px;
|
||||
margin: auto;
|
||||
background-repeat: none;
|
||||
background-size: contain;
|
||||
&> a {
|
||||
display:block;
|
||||
width: 113px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
.twitter {
|
||||
float: right;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 20px;
|
||||
background-image: url('./static/img/twitter.png');
|
||||
background-size: contain;
|
||||
&> a {
|
||||
display:block;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
.youtube {
|
||||
float: right;
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
margin: 0 20px;
|
||||
background-image: url('./static/img/youtube.png');
|
||||
background-size: contain;
|
||||
&> a {
|
||||
display:block;
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.waveContainer {
|
||||
position: absolute;
|
||||
top: 260px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
z-index: 0;
|
||||
}
|
||||
.waves {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: -7px;
|
||||
|
||||
min-height: 100px;
|
||||
max-height: 200px;
|
||||
}
|
||||
.firstWave {
|
||||
animation: moveforever 25s cubic-bezier(.55, .5, .45, .5) infinite;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
.secondWave {
|
||||
animation: moveforever 25s cubic-bezier(.55, .5, .45, .5) infinite;
|
||||
animation-delay: -4s;
|
||||
animation-duration: 5s;
|
||||
}
|
||||
@keyframes moveforever {
|
||||
0% {
|
||||
transform: translate3d(-90px, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(85px, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 20%, 60%, 100% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: translateY(-20px);
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&>ul {
|
||||
list-style-type: none;
|
||||
&>li {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
&>a {
|
||||
background-color: black;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-family: 'IndieFlower';
|
||||
color: white;
|
||||
&:hover {
|
||||
transform: rotate(-10deg);
|
||||
font-weight: bold;
|
||||
color: pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.characterBlock {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
width: 980px;
|
||||
height: 314px;
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
background-image: url('./static/img/playerbg.png');
|
||||
background-repeat: none;
|
||||
font-family: 'M PLUS Rounded 1c';
|
||||
&:nth-child(odd) {
|
||||
animation: slideInFromLeft 1s forwards;
|
||||
}
|
||||
&:nth-child(even) {
|
||||
animation: slideInFromRight 1s forwards;
|
||||
}
|
||||
}
|
||||
@keyframes slideInFromLeft {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInFromRight {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes upAndDown {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.buynow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin characterImage($url) {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
margin: 0 20px 0 0;
|
||||
background-image: url($url);
|
||||
background-size: contain;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
.character-blue_cap {
|
||||
@include characterImage('./static/img/00_bluecap_1204.png');
|
||||
}
|
||||
.character-red_cap {
|
||||
@include characterImage('./static/img/00_redcap_1204.png');
|
||||
}
|
||||
.character-vincent_shirt {
|
||||
@include characterImage('./static/img/01_vincent_1204.png');
|
||||
}
|
||||
.character-vincent_sheep {
|
||||
@include characterImage('./static/img/01_sheep_vincent_1204.png');
|
||||
}
|
||||
.character-katherine {
|
||||
@include characterImage('./static/img/02_katherine_1204.png');
|
||||
}
|
||||
.character-catherine {
|
||||
@include characterImage('./static/img/03_catherine_1204.png');
|
||||
}
|
||||
.character-rin {
|
||||
@include characterImage('./static/img/04_rin_1204.png');
|
||||
}
|
||||
.character-orlando {
|
||||
@include characterImage('./static/img/05_orlando_1204.png');
|
||||
}
|
||||
.character-johny {
|
||||
@include characterImage('./static/img/06_jonny_1204.png');
|
||||
}
|
||||
.character-tobby {
|
||||
@include characterImage('./static/img/07_tobby_1204.png');
|
||||
}
|
||||
.character-erica {
|
||||
@include characterImage('./static/img/08_erika_1204.png');
|
||||
}
|
||||
.character-master {
|
||||
@include characterImage('./static/img/09_master_1204.png');
|
||||
}
|
||||
.character-joker {
|
||||
@include characterImage('./static/img/13_joker_1204.png');
|
||||
}
|
||||
|
||||
.titlePlayer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.titlePlayerBlock {
|
||||
padding: 5px 10px;
|
||||
background-color: white;
|
||||
transform: rotate(-5deg);
|
||||
color: black;
|
||||
font-family: 'M PLUS Rounded 1c';
|
||||
}
|
||||
|
||||
.aboutNoticeBlock {
|
||||
position: relative;
|
||||
width: 980px;
|
||||
height: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 50px;
|
||||
background-image: url('./static/img/playerbg.png');
|
||||
background-repeat: none;
|
||||
background-size: 980px 800px;
|
||||
font-family: 'M PLUS Rounded 1c';
|
||||
}
|
||||
|
||||
.sheepAbout {
|
||||
position: relative;
|
||||
width: 207px;
|
||||
height: 350px;
|
||||
float: left;
|
||||
margin-top: 70px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: url('./static/img/title_sheep.png');
|
||||
background-repeat: none;
|
||||
}
|
||||
.guideBody {
|
||||
position: relative;
|
||||
margin: 20px auto;
|
||||
width: 980px;
|
||||
}
|
||||
.centerVideo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aboutContactBox {
|
||||
position: relative;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin: 20px;
|
||||
background-image: url('./static/img/letterbox.png');
|
||||
background-size: 128px 128px;
|
||||
background-repeat: none;
|
||||
& > a {
|
||||
display: block;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
}
|
||||
.contactBox {
|
||||
position: relative;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin: 20px auto;
|
||||
background-image: url('./static/img/letterbox.png');
|
||||
background-size: 128px 128px;
|
||||
background-repeat: none;
|
||||
& > a {
|
||||
display: block;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
.mainBody {
|
||||
position: flex;
|
||||
margin: 20px auto;
|
||||
width: 980px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.chalice {
|
||||
width: 400px;
|
||||
height: 340px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/chalice.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
.players {
|
||||
width: 900px;
|
||||
height: 606px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/players.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
.scoreboardImage {
|
||||
width: 567px;
|
||||
height: 485px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/scoreboard.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
.titleImageStrayShip0 {
|
||||
width: 808px;
|
||||
height: 119px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/straysheepcup0.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
.rule {
|
||||
width: 900px;
|
||||
height: 637px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/rule.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
|
||||
.padding {
|
||||
width: 900px;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
}
|
||||
.players0801 {
|
||||
width: 899px;
|
||||
height: 696px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/0801.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
|
||||
.players0802 {
|
||||
width: 900px;
|
||||
height: 710px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/0802.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
.players0808 {
|
||||
width: 900px;
|
||||
height: 710px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/0808.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
.players0809 {
|
||||
width: 900px;
|
||||
height: 696px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/0809.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
.players0815 {
|
||||
width: 900px;
|
||||
height: 696px;
|
||||
margin: auto;
|
||||
background-image: url('./static/img/0815.png');
|
||||
background-size: contain;
|
||||
background-repeat: none;
|
||||
}
|
||||
Reference in New Issue
Block a user