//- Canvas
.canvas._ribby
//-- Menu
.menu
.menu__item._ribby
.menu__item._nonsense
.menu__item._know
.menu__item._garden
.menu__item._fury
.menu__item._finish
.menu__item._casino
//-- Burger
label.burger
input.burger__input(type='checkbox')
svg.strokeWrap(viewBox="30 30 40 40" xmlns='http://www.w3.org/2000/svg')
path.strokeWrap__stroke._first(d='M0 40h62c13 0 6 28-4 18L35 35')
path.strokeWrap__stroke._second(d='M0 50h70')
path.strokeWrap__stroke._third(d='M0 60h62c13 0 6-28-4-18L35 65')
//-- Ribby
mixin triangleMix()
.sideBlock__triangle
.sideBlock__tAngle
.sideBlock__bAngle
.container.ribby
.wrap
.sideCard
.sideCard__rhombus
.sideCard__content
.sideCard__letter C
.sideCard__letter H
.sideCard__img
.card
.box
header.header.clearfix
.sideBox
.sideBox__inside._cuphead
.sideBlock
+triangleMix()
.sideBlock__article
mixin gridMix(letter, padding)
.grid
.grid__btn(class=`_p${padding}`)
span.grid__letter= letter
+gridMix('R')
+gridMix('I', '16')
+gridMix('B')
+gridMix('B')
+gridMix('Y')
+triangleMix()
.sideBox
.sideBox__inside._cuphead._reverse
main.main
.presentBlock.clearfix
.gradientBox
.characterBlock
.characterBlock__rope._1
.characterBlock__rope._2
.characterBlock__rope._3
.characterBlock__article
.characterBlock__quoteWrap
h1.characterBlock__quote We had a battle of the soul
.characterBlock__img._ribbyGif
.gradientBox
.characterInfo
.sideBox
.sideBox__inside._tube
.sideBlock
h1.sideBlock__title DISASTER
.sideBox
.sideBox__inside._tube._reverse
footer.footer
.sideBox
.sideBox__inside
h1.sideBox__title 0,3
p.sideBox__text LITER
.sideBlock
+triangleMix()
.sideBlock__article
h1.sideBlock__title
span Little
| tadpole <br/> battle
span Soul
+triangleMix()
.sideBox
.sideBox__inside
h1.sideBox__title 4,7
p.sideBox__text PROZENT
.sideCard
.sideCard__rhombus
.sideCard__content
.sideCard__letter C
.sideCard__letter H
.sideCard__img._reverse
//-- Nonsense
.container.nonsense
.wrap
.sideCard
.sideCard__img._reverse
.sideCard__titleWrap
h1.sideCard__title Clamping
.card
.box
header.header.clearfix
.gradientBox
.sideBlock__article
h1.sideBlock__title make
.gradientBox._reverse
main.main
.main__titleWrap
h1.main__title nonsense
.characterBlock.clearfix
.characterBlock__side
.characterBlock__sideImg
.characterBlock__sideImg
.characterBlock__square
.squareWall
.squareFloor
.squareImg
.squareShadow
.characterBlock__side._reverse
.characterBlock__sideImg
.characterBlock__sideImg
.characterInfo.clearfix
.sideBox
.sideBox__img._reverse
.sideBlock
h1.sideBlock__title great
.sideBox
.sideBox__img
footer.footer.clearfix
.gradientBox
.sideBlock__article
h1.sideBlock__title again
.gradientBox._reverse
.sideCard
.sideCard__img
.sideCard__titleWrap
h1.sideCard__title Clamping
//-- Know
.container.know
.wrap
.sideCard
.sideCard__img
.sideCard__titleWrap
h1.sideCard__title headache
.card
.box
header.header
h1.header__title everyone
h1.header__title know
main.main
.main__cautionWrap
h1.main__caution zombies
h1.main__caution instantly
.main__character
.main__circle
h1.main__circleTitle NEW
footer.footer
.footer__title
span.purple about
.sideBlock__article
mixin gridMix(letter, padding)
.grid
.grid__btn(class=`_p${padding}`)
span.grid__letter= letter
+gridMix('H')
+gridMix('Y')
+gridMix('P')
+gridMix('N')
+gridMix('O')
+gridMix('S')
+gridMix('I', '16')
+gridMix('S')
.footer__title
span.pink for
span.orange.swampy reasonable
.footer__title
span.blue vegetables
.sideCard
.sideCard__img
.sideCard__titleWrap
h1.sideCard__title headache
//- Garden
.container.garden
.wrap
.sideCard
.sideCard__img
.sideCard__titleWrap
h1.sideCard__title escape
.card
.box
header.header
h1.header__title ALWAYS
main.main
.presentBlock.clearfix
.gradientBox
.characterBlock
- var list = ['potato', 'potato', 'onion', 'onion']
each item in list
.characterBlock__square(class=`_${item}`)
.characterBlock__circle
.circleWall
.circleFloor
.circleImg
.gradientBox
footer.footer
.sideBox._reverse
.sideBlock
.sideBlock__article
.sideBlock__titleWrap
h1.sideBlock__title run from
.sideBlock__titleWrap
h1.sideBlock__title garden
.sideBlock__gradient
.sideBox
.sideCard
.sideCard__img._reverse
.sideCard__titleWrap
h1.sideCard__title escape
//-- Fury
.container.fury
.wrap
.sideCard
.sideCard__img._reverse
.sideCard__titleWrap
h1.sideCard__title allergy
.card
.box
header.header
.header__titleWrap
h1.header__title Floral Fury
main.main
.presentBlock.clearfix
.gradientBox
.characterBlock
- for (var x = 0; x < 4; x++)
.characterBlock__square
.characterBlock__circle
.circleWall
.circleFloor
.circleImg
.gradientBox._reverse
.characterInfo.clearfix
.characterInfo__gradient
.characterInfo__gradient._reverse
.characterInfo__triangleWrap
.characterInfo__triangle
.characterInfo__circle
.characterInfo__article
h1.characterInfo__title 24
h1.characterInfo__title seven
.characterInfo__img._cil
.characterInfo__img._cir._reverse
footer.footer.clearfix
- var list = ['Blue', 'Girl', 'Red', 'Flower']
each item in list
.footer__circle(class=`_cup${item}`)
.sideCard
.sideCard__img
.sideCard__titleWrap
h1.sideCard__title allergy
//-- Finish
mixin sideBoxMix(reverse)
.sideBox
.sideBox__angle(class=`_${reverse}`)
.sideBox__square
.container.finish
.wrap
.sideCard
.sideCard__img._reverse
.sideCard__titleWrap
h1.sideCard__title Nightmare
.card
.box
header.header.clearfix
+sideBoxMix()
.sideBlock
.sideBlock__article
h1.sideBlock__title MY
+sideBoxMix('reverse')
main.main
.gradientBox
.presentBlock
.presentBlock__titleWrap
h1.presentBlock__commas._reverse "
h1.presentBlock__title FINISH
h1.presentBlock__commas "
.characterBlock.clearfix
.characterBlock__side._reverse
.characterBlock__sideImg
.characterBlock__sideImg
.characterBlock__img
.characterBlock__side
.characterBlock__sideImg
.characterBlock__sideImg
.characterInfo
.sideBox
.sideBox__img._reverse
.sideBlock
h1.sideBlock__title
span.high
span.orange SAMEDI
span.blue 12
| .
span.purple MAI <br/>
| ARBOET
span.purple ALL
span.blue NIGHT <br/>
span.high
span.blue RUE
span.orange LAK
span.purple ,
| PARIS
.sideBox
.sideBox__img
.gradientBox._reverse
footer.footer.clearfix
+sideBoxMix()
.sideBlock
+sideBoxMix('reverse')
.sideCard
.sideCard__img
.sideCard__titleWrap
h1.sideCard__title Nightmare
//- Casino
.container.casino
<iframe class="casinoFrame" src="https://kerthin.github.io/cuphead-templateSait/casino.html" scrolling="auto"></iframe>
//- Social links
.social
ul.socialList
li.socialList__item
a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
li.socialList__item
a.socialList__link(href="https://codepen.io/Astap" target="_blank")
svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
line(x1="12" y1="22" x2="12" y2="15.5")
polyline(points="22 8.5 12 15.5 2 8.5")
polyline(points="2 15.5 12 8.5 22 15.5")
line(x1="12" y1="2" x2="12" y2="8.5")
li.socialList__item
a.socialList__link(href="https://twitter.com/BelichenkoRoden" target="_blank")
svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
path(d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z")* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
::-webkit-scrollbar {
width: 0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
@import url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/edf2f2804372735acaed7858f0c28b889db4a4d0/dist/css/fontLinks.css');
._reverse {
transform: scaleX(-1);
}
._bg_black {
background-color: #000;
}
._bg_red {
background-color: #de162a;
}
.canvas {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #f1eee2;
transition: 1s;
@mixin treeChoseNameMix($treeName) {
&._#{$treeName} {
.#{$treeName} {
display: block;
}
}
}
@include treeChoseNameMix(ribby);
@include treeChoseNameMix(nonsense);
@include treeChoseNameMix(know);
@include treeChoseNameMix(garden);
@include treeChoseNameMix(fury);
@include treeChoseNameMix(finish);
@include treeChoseNameMix(casino);
.ribby,
.nonsense,
.know,
.garden,
.fury,
.finish,
.casino {
display: none;
}
&.popup {
transform: scale(.9);
}
}
// Menu
.menu {
position: fixed;
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
height: 100%;
top: -100%;
background-color: #f1eee2;
overflow: scroll;
transition: 1s;
z-index: 10;
&.popup {
top: 0;
transition-delay: .2s;
}
.menu__item {
float: left;
margin-bottom: 10px;
margin-right: 10px;
width: 450px;
height: 450px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
transition: .3s;
&:hover {
transform: scale(.9);
}
&:active {
transform: scale(.85);
}
&.active {
background-color: #e0dabf;
}
@mixin menuItemBgMix($itemBg) {
&._#{$itemBg} {
background-image: url(https://rawcdn.githack.com/Kerthin/cuphead-templateSait/a1357c221bb01ee24ab484ed4b93312b7c0948bf/app/image/static/codepenMenu/#{$itemBg}.png);
}
}
@include menuItemBgMix(ribby);
@include menuItemBgMix(nonsense);
@include menuItemBgMix(know);
@include menuItemBgMix(garden);
@include menuItemBgMix(fury);
@include menuItemBgMix(finish);
@include menuItemBgMix(casino);
}
}
@media screen and (max-width: 480px) {
.menu__item {
margin-right: 0;
width: 260px;
height: 260px;
}
}
@media screen and (max-width: 370px) {
.menu__item {
width: 220px;
height: 220px;
}
}
// Burger
.burger {
position: absolute;
right: 5px;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 11;
.burger__input {
display: none;
outline: none;
&.checked {
+ .strokeWrap {
._first,
._third {
--length: 22.627416998;
--offset: -94.1149185097;
}
._second {
--length: 0;
--offset: -50;
}
}
}
}
.strokeWrap__stroke {
fill: none;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
--length: 24;
--offset: -38;
stroke-dasharray: var(--length) var(--total-length);
stroke-dashoffset: var(--offset);
transition: all .8s cubic-bezier(.645, .045, .355, 1);
&._first,
&._third {
--total-length: 126.64183044433594;
}
&._second {
--total-length: 70;
}
}
}
//
.wrap {
position: relative;
width: 100%;
height: 100vh;
background-color: #f0966d;
}
.sideCard {
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-5%);
width: 300px;
height: 300px;
}
.sideCard:first-child {
left: 5%;
}
.sideCard__img {
width: 100%;
height: 80%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sideCard__titleWrap {
width: 100%;
height: 20%;
}
.sideCard__title {
text-align: center;
text-transform: uppercase;
color: #fbf2e4;
}
.card {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
box-shadow: 0 24px 28px rgba(0,0,0,0.95), 0 5px 5px rgba(0,0,0,0.22);
z-index: 2;
overflow: auto;
}
// Ribby
._ribbyGif {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/38147226b7f4f4950895e0ad75d7ad0bde720965/app/image/gif/ribby/Imageproxy_(4).gif');
}
._cuphead {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/38147226b7f4f4950895e0ad75d7ad0bde720965/app/image/static/ribby/cuphead__angle.png');
}
._tube {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/38147226b7f4f4950895e0ad75d7ad0bde720965/app/image/static/ribby/tube_yellow.png');
}
.container.ribby {
.wrap {
background-color: #ff9baa;
}
.sideCard:last-child {
right: 2.5%;
}
.sideCard__rhombus {
position: relative;
margin-top: 45px;
margin-left: 45px;
width: 200px;
height: 200px;
border: 5px solid #ffc014;
transform: rotate(45deg);
}
.sideCard__content {
position: absolute;
top: calc(50% - 5px);
left: calc(50% - 5px);
transform: translateY(-50%) translateX(-50%);
width: 250px;
height: 250px;
.sideCard__letter {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid;
background-color: #fbf2e4;
text-align: center;
font-family: sans-serif;
font-size: 25px;
font-weight: 900;
&:nth-child(1) {
left: 0;
}
&:nth-child(2) {
right: 0;
}
}
.sideCard__img {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/38147226b7f4f4950895e0ad75d7ad0bde720965/app/image/static/ribby/cupheadScared.png');
}
}
.card {
padding: 45px 30px;
width: 925px;
height: 965px;
background-color: #ffc014;
.box {
width: 100%;
height: 100%;
.header,
.main,
.footer {
position: relative;
}
.header {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
.main {
width: 100%;
height: calc(100% - 220px);
margin-bottom: 10px;
}
.footer {
width: 100%;
height: 100px;
.sideBlock__article {
padding: 15px 0;
border-radius: 50px;
background-color: #ffc014;
}
.sideBlock__title {
text-transform: uppercase;
font-size: 40px;
line-height: 30px;
color: #eb5631;
&::before,
&::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
content: "";
width: 10px;
height: 10px;
background-color: #eb5631;
border-radius: 50%;
margin-bottom: 8px;
}
&::before {
left: 50px;
}
&::after {
right: 50px;
}
span {
font-family: 'Bimbo';
font-size: 30px;
text-transform: capitalize;
}
}
}
}
}
.sideBox {
float: left;
width: 100px;
height: 100%;
border: 5px solid;
&:first-child {
margin-right: 10px;
}
&__inside {
width: 100%;
height: 100%;
border: 3px solid #ff9baa;
background-color: #eb5631;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.sideBox__title,
.sideBox__text {
font-family: 'Swampy';
color: #fbf2e4;
text-align: center;
font-weight: 900;
}
.sideBox__title {
font-size: 50px;
}
.sideBox__text {
font-size: 18px;
}
}
}
.sideBlock {
position: relative;
float: left;
width: calc(100% - 220px);
height: 100%;
margin-right: 10px;
border: 5px solid;
background-color: #eb5631;
&__triangle {
position: absolute;
border-top: 45px solid transparent;
border-left: 130px solid #000;
border-bottom: 45px solid transparent;
z-index: 1;
&:last-child {
right: 0;
transform: scaleX(-1);
}
.sideBlock__tAngle {
position: absolute;
top: 100%;
left: 104%;
transform: translateY(-106%) translateX(-120%);
border-bottom: 37.5px solid #ff9baa;
border-right: 107px solid transparent;
}
.sideBlock__bAngle {
position: absolute;
top: 4%;
left: 110%;
transform: translateY(6%) translateX(-120%);
border-top: 37.5px solid #fbf2e4;
border-right: 107px solid transparent;
}
}
&__article {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 425px;
height: calc(100% + 10px);
border: 5px solid;
background-color: #ff9baa;
}
&__title {
font-family: 'Swampy';
text-align: center;
font-weight: 900;
font-size: 140px;
}
}
.grid {
float: left;
margin-left: -15px;
width: 90px;
height: 90px;
&:first-child {
margin-left: 15px;
}
&__btn {
width: 60%;
height: 60%;
background-color: #fbf2e4;
border: 4px solid #000;
line-height: 48px;
margin: 10% 26%;
padding: 0 7px;
position: relative;
transition: all 0.05s ease-in;
&::before,
&::after {
border: 4px solid #000;
content: '';
position: absolute;
transition: all 0.05s ease-in;
}
&::before {
background-color: #f5d152;
}
&::after {
background-color: #eb5631;
}
&::before {
width: 20%;
height: calc(100% + 2px);
border-right: 0;
border-bottom-width: 2px;
transform: skew(0deg, -45deg) translateX(-4px);
transform-origin: top right;
top: -8px;
right: 99%;
}
&::after {
width: calc(100% + 1px);
height: 20%;
border-top: 0;
border-left-width: 3px;
transform: skew(-45deg, 0deg) translateY(4px);
transform-origin: top right;
top: 100%;
right: -8px;
}
&._p16 {
padding: 0 16px;
}
.grid__letter {
font-family: sans-serif;
font-size: 45px;
font-weight: 900;
}
}
}
.presentBlock {
width: 100%;
height: 468px;
.gradientBox {
float: left;
width: 100px;
height: 100%;
border: 5px solid;
border-bottom: 0;
background: repeating-linear-gradient(125deg, #eb5631, #eb5631 30px, #fbf2e4 30px, #fbf2e4 66.3px);
animation: animationGradient 4s linear infinite;
&:first-child {
margin-right: 10px;
}
&:last-child {
transform: scaleX(-1);
}
}
.characterBlock {
position: relative;
float: left;
width: calc(100% - 220px);
height: calc(100% - 10px);
margin-right: 10px;
border: 5px solid;
overflow: hidden;
&__rope {
position: absolute;
left: -77.5px;
width: 800px;
height: 300px;
border-radius: 50%;
border: 5px solid #fbf2e4;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
&:nth-child(1) {
bottom: -190px;
}
&:nth-child(2) {
bottom: -150px;
}
&:nth-child(3) {
bottom: -110px;
}
}
&__article {
position: absolute;
top: 20px;
padding: 10px 0;
width: 100%;
height: 75px;
border: 5px solid #000;
border-left: 0;
border-right: 0;
.characterBlock__quoteWrap {
width: 100%;
height: 100%;
background-color: #eb5631;
.characterBlock__quote {
font-family: 'Swampy';
color: #fbf2e4;
text-align: center;
font-weight: 900;
font-size: 40px;
text-transform: uppercase;
word-spacing: -10px;
&::before,
&::after {
display: inline-block;
content: "";
width: 10px;
height: 10px;
background-color: #fbf2e4;
border-radius: 50%;
margin-bottom: 8px;
}
&::before {
margin-right: 12px;
}
&::after {
margin-left: 12px;
}
}
}
}
&__img {
position: absolute;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
}
.characterInfo {
width: 100%;
height: 187px;
.sideBox__inside {
border: 0;
}
.sideBlock {
border: 7px solid;
background-color: #ff9baa;
}
}
}
@keyframes animationGradient {
from {
background-position: 0 0;
}
to {
background-position: 0 458px;
}
}
// Media
@media screen and (orientation: landscape) and (max-height: 985px) {
.container.ribby {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (orientation: landscape) and (max-height: 790px) {
.container.ribby {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (orientation: landscape) and (max-height: 600px) {
.container.ribby {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (orientation: landscape) and (max-height: 405px) {
.container.ribby {
.card {
transform: translate(-50%, -50%) scale(.2);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.2);
}
}
}
@media screen and (max-width: 1700px) {
.container.ribby {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (max-width: 1400px) {
.container.ribby {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (max-width: 1140px) {
.container.ribby {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (max-width: 890px) {
.container.ribby {
.card {
transform: translate(-50%, -50%) scale(.3);
}
.sideCard {
display: none;
}
}
}
@media screen and (max-width: 320px) {
.container.ribby {
.card {
transform: translate(-50%, -50%) scale(.28);
}
}
}
// Nonsense Card
.container.nonsense {
.wrap {
background-color: #fff;
}
.sideCard:last-child {
right: 3.2%;
}
.sideCard__img {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/static/nonsense/croaks_side.png');
}
.sideCard__title {
font-family: 'Rounds';
font-size: 45px;
line-height: 55px;
color: #000;
}
.card {
padding: 30px 24px;
width: 925px;
height: 965px;
background-color: #f8f4e1;
.box {
width: 100%;
height: 100%;
.header,
.main,
.footer {
position: relative;
}
.header,
.footer {
width: 100%;
height: 54px;
}
.header {
margin-bottom: 14px;
}
.main {
width: 100%;
height: calc(100% - 136px);
margin-bottom: 14px;
}
}
}
.gradientBox,
.sideBlock__article {
position: relative;
float: left;
}
.gradientBox {
margin-top: 3.5px;
width: 308px;
height: 47px;
border: 5px solid;
background: repeating-linear-gradient(125deg, #ec492e, #ec492e 30px, #779d9a 30px, #779d9a 61px);
animation: animationGradientH 4s linear infinite;
}
.sideBlock__article {
position: relative;
float: left;
width: calc(100% - 616px);
height: 100%;
}
.sideBlock__title {
margin-top: -15px;
font-family: sans-serif;
font-size: 75px;
letter-spacing: -4px;
text-transform: uppercase;
text-align: center;
}
.main__titleWrap {
margin-bottom: 14px;
width: 100%;
height: 194px;
border: 14px solid #779d9a;
background-color: #000;
.main__title {
margin-top: 5px;
margin-left: -20px;
text-align: center;
font-family: 'Rounds';
font-size: 185px;
line-height: 185px;
color: #fbf2e4;
letter-spacing: -12px;
text-transform: uppercase;
}
}
.characterBlock {
margin-bottom: 14px;
width: 100%;
height: 382px;
&__side {
float: left;
width: 165px;
height: 100%;
&:first-child {
margin-right: 14px;
}
.characterBlock__sideImg {
width: 100%;
border: 5px solid;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
&:first-child {
margin-bottom: 14px;
height: 165px;
background-color: #e89eab;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/static/nonsense/ribby_lose.png')
}
&:last-child {
height: calc(100% - 179px);
background-color: #779d9a;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/static/nonsense/croaks_win.png')
}
}
}
.characterBlock__square {
position: relative;
margin-right: 14px;
float: left;
width: calc(100% - 358px);
height: 100%;
border: 5px solid;
overflow: hidden;
.squareWall {
width: 100%;
height: 250px;
background-color: #000;
background-image: linear-gradient(335deg, #ec492e 23px, transparent 23px),
linear-gradient(155deg, #ec492e 23px, transparent 23px),
linear-gradient(335deg, #ec492e 23px, transparent 23px),
linear-gradient(155deg, #ec492e 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
.squareFloor {
width: 100%;
height: 126px;
border-top: 5px solid;
background-color: #e89eab;
}
.squareImg {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/gif/nonsense/Imageproxy_(2).gif');
z-index: 1;
}
.squareShadow {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 40px;
border-radius: 50%;
background-color: #000;
}
}
}
.characterInfo {
width: 100%;
height: 165px;
.sideBox {
position: relative;
float: left;
width: 165px;
height: 100%;
border: 5px solid;
background-color: #ec492e;
:first-child {
margin-right: 14px;
}
&__img {
position: absolute;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/gif/nonsense/cuphead_mugen.gif');
z-index: 2;
}
}
.sideBlock {
float: left;
margin-right: 14px;
width: calc(100% - 358px);
height: 100%;
background: #000;
&__title {
font-family: 'Rounds';
margin-top: 5px;
margin-left: -20px;
text-align: center;
font-size: 185px;
line-height: 185px;
color: #fbf2e4;
}
}
}
}
@keyframes animationGradientH {
from {
background-position: 0 0;
}
to {
background-position: 298px 0;
}
}
@media screen and (orientation: landscape) and (max-height: 985px) {
.container.nonsense {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (orientation: landscape) and (max-height: 790px) {
.container.nonsense {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (orientation: landscape) and (max-height: 600px) {
.container.nonsense {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (orientation: landscape) and (max-height: 405px) {
.container.nonsense {
.card {
transform: translate(-50%, -50%) scale(.2);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.2);
}
}
}
@media screen and (max-width: 1700px) {
.container.nonsense {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (max-width: 1400px) {
.container.nonsense {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (max-width: 1140px) {
.container.nonsense {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (max-width: 890px) {
.container.nonsense {
.card {
transform: translate(-50%, -50%) scale(.3);
}
.sideCard {
display: none;
}
}
}
@media screen and (max-width: 320px) {
.container.nonsense {
.card {
transform: translate(-50%, -50%) scale(.28);
}
}
}
// Know Card
.container.know {
.wrap {
background-color: #e55137;
}
.sideCard:last-child {
right: 3.2%;
}
.sideCard__img {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/a59bac90b013dbc0064aac64dd6ab8c630915b15/app/image/gif/know/headache.gif');
}
.sideCard__title {
font-family: 'Rounds';
font-size: 45px;
line-height: 55px;
color: #fbf2e4;
}
.purple {
color: #8f599c;
}
.pink {
color: #de9da8;
}
.orange {
color: #e55137;
}
.blue {
color: #47aee5;
}
.swampy {
font-family: 'Swampy';
}
.card {
padding: 15px 26px;
width: 805px;
height: 959px;
background-color: #000;
.box {
width: 100%;
height: 100%;
.header,
.main,
.footer {
position: relative;
}
.header,
.footer {
width: 100%;
}
.header {
height: 266px;
}
.footer {
height: 224px;
}
.main {
position: relative;
width: 100%;
height: calc(100% - 490px);
background-color: #000;
}
}
}
.header__title {
text-align: center;
&:first-child {
font-family: 'Rounds';
font-size: 66px;
padding: 0;
text-transform: uppercase;
color: #fbf2e4;
}
&:last-child {
margin-top: -7px;
margin-left: -18px;
font-family: 'Bottle';
font-size: 200px;
line-height: 155px;
text-transform: uppercase;
color: #47aee5;
}
}
.main__cautionWrap {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 140px;
text-transform: uppercase;
.main__caution {
font-family: 'Rounds';
text-align: center;
color: #fbf2e4;
&:first-child {
font-size: 25px;
}
&:last-child {
padding-top: 3px;
font-size: 28px;
margin-top: 17px;
transform: scaleY(2);
border: 2px solid;
border-right: 0;
border-left: 0;
line-height: 28px;
}
}
}
.main__character {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 439px;
height: 439px;
border-radius: 50%;
background-color: #e55137;
background-size: contain;
background-position: center 20px;
background-repeat: no-repeat;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/a59bac90b013dbc0064aac64dd6ab8c630915b15/app/image/gif/know/hypnosis.gif');
}
.main__circle {
position: absolute;
right: 0;
width: 115px;
height: 115px;
border-radius: 50%;
background-color: #fbf2e4;
transform: rotate(-15deg);
&Title {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
border: 3px solid;
border-right: 0;
border-left: 0;
color: #000;
}
}
.footer__title {
font-family: 'Bottle';
font-size: 60px;
line-height: 46px;
text-align: center;
}
.sideBlock__article {
position: relative;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 535px;
height: 80px;
.grid {
float: left;
margin-left: -15px;
width: 80px;
height: 80px;
&:first-child {
margin-left: 0px;
}
.grid__btn {
width: 60%;
height: 60%;
background-color: #fbf2e4;
border: 4px solid #000;
line-height: 40px;
margin: 10% 26%;
padding: 0 9px;
position: relative;
transition: all 0.05s ease-in;
&::before,
&::after {
border: 4px solid #000;
content: '';
position: absolute;
transition: all 0.05s ease-in;
}
&::before {
background-color: #47aee5;
}
&::after {
background-color: #000;
}
&::before {
width: 20%;
height: calc(100% + 2px);
border-right: 0;
border-bottom-width: 2px;
transform: skew(0deg, -45deg) translateX(-4px);
transform-origin: top right;
top: -8px;
right: 99%;
}
&::after {
width: calc(100% + 1px);
height: 20%;
border-top: 0;
border-left-width: 3px;
transform: skew(-45deg, 0deg) translateY(4px);
transform-origin: top right;
top: 100%;
right: -8px;
}
&._p16 {
padding: 0 16px;
}
.grid__letter {
font-family: sans-serif;
font-size: 30px;
font-weight: 900;
}
}
}
}
}
@media screen and (orientation: landscape) and (max-height: 990px) {
.container.know {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (orientation: landscape) and (max-height: 797px) {
.container.know {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (orientation: landscape) and (max-height: 595px) {
.container.know {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (orientation: landscape) and (max-height: 400px) {
.container.know {
.card {
transform: translate(-50%, -50%) scale(.2);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.2);
}
}
}
@media screen and (max-width: 1530px) {
.container.know {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (max-width: 1280px) {
.container.know {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (max-width: 1060px) {
.container.know {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (max-width: 830px) {
.container.know {
.sideCard {
display: none;
}
}
}
@media screen and (max-width: 360px) {
.container.know {
.card {
transform: translate(-50%, -50%) scale(.35);
}
}
}
// Garden
._potato {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/static/garden/potato_72.png');
}
._onion {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/static/garden/carrots-png-two-6.png');
}
.container.garden {
.wrap {
background-color: #398387;
}
.sideCard:last-child {
right: 3.2%;
}
.sideCard__img {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/static/garden/Weepy.png');
}
.sideCard__title {
font-family: 'Bimbo';
font-size: 50px;
line-height: 50px;
}
.card {
padding: 20px 20px;
width: 925px;
height: 965px;
background-color: #fbf2e4;
.box {
width: 100%;
height: 100%;
.header {
position: relative;
background-color: #000;
.header__title {
position: absolute;
top: -30px;
left: 10px;
font-family: 'Swampy';
font-weight: 900;
font-size: 300px;
line-height: 300px;
color: #fbf2e4;
letter-spacing: -20px;
}
}
.header,
.footer {
width: 100%;
height: 235px;
}
.main {
width: 100%;
height: calc(100% - 490px);
}
.header,
.main {
margin-bottom: 10px;
}
}
}
.presentBlock {
width: 100%;
height: 100%;
.gradientBox {
float: left;
width: 100px;
height: 100%;
border: 5px solid;
background: repeating-linear-gradient(125deg, #398387, #398387 30px, #000 30px, #000 61px);
animation: animationGradient 4s linear infinite;
&:first-child {
margin-right: 10px;
}
&:last-child {
transform: scaleX(-1);
}
}
.characterBlock {
position: relative;
float: left;
width: calc(100% - 220px);
height: 100%;
margin-right: 10px;
background-color: #000;
&__square {
position: absolute;
width: 82px;
height: 82px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: red;
&:nth-child(1) {
top: 20px;
left: 20px;
background-color: #ea5d56;
}
&:nth-child(2) {
top: 20px;
right: 20px;
background-color: #ea5d56;
}
&:nth-child(3) {
bottom: 20px;
left: 20px;
background-color: #398387;
}
&:nth-child(4) {
bottom: 20px;
right: 20px;
background-color: #398387;
}
}
&__circle {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 445px;
height: 445px;
border-radius: 50%;
border: 5px solid;
overflow: hidden;
.circleWall {
width: 100%;
height: 280px;
background-color: #fef5d6;
}
.circleFloor {
width: 100%;
height: 160px;
border-top: 5px solid;
background-color: #ea5d56;
}
.circleImg {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/gif/garden/blyaaaa.gif');
}
}
}
}
.sideBox {
float: left;
width: 214px;
height: 100%;
border: 5px solid;
background-color: #ea5d56;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/static/garden/Genie.png');
&:first-child {
margin-right: 10px;
}
}
.sideBlock {
position: relative;
float: left;
width: calc(100% - 448px);
height: 100%;
margin-right: 10px;
&__article {
width: 100%;
height: 178px;
margin-bottom: 10px;
}
&__gradient {
border: 5px solid;
width: 100%;
height: 47px;
background: repeating-linear-gradient(125deg, #398387, #398387 30px, #000 30px, #000 58px);
animation: animationGradientH 4s linear infinite;
}
}
.sideBlock__titleWrap {
&:first-child {
position: relative;
width: 100%;
height: 48px;
.sideBlock__title {
color: #000;
font-size: 57px;
top: -5px;
left: 50%;
transform: translateX(-50%);
letter-spacing: -5px;
word-spacing: -15px;
}
}
&:last-child {
position: relative;
width: 100%;
height: 130px;
background-color: #000;
.sideBlock__title {
font-size: 160px;
top: -25px;
left: 50%;
transform: translateX(-50%);
letter-spacing: -20px;
}
}
.sideBlock__title {
text-align: center;
position: absolute;
font-family: 'Swampy';
text-align: center;
color: #fbf2e4;
}
}
}
@keyframes animationGradient {
from {
background-position: 0 0;
}
to {
background-position: 0 425px;
}
}
@keyframes animationGradientH {
from {
background-position: 0 0;
}
to {
background-position: 427px 0;
}
}
@media screen and (orientation: landscape) and (max-height: 985px) {
.container.garden {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (orientation: landscape) and (max-height: 790px) {
.container.garden {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (orientation: landscape) and (max-height: 600px) {
.container.garden {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (orientation: landscape) and (max-height: 405px) {
.container.garden {
.card {
transform: translate(-50%, -50%) scale(.2);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.2);
}
}
}
@media screen and (max-width: 1700px) {
.container.garden {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (max-width: 1400px) {
.container.garden {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (max-width: 1140px) {
.container.garden {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (max-width: 890px) {
.container.garden {
.card {
transform: translate(-50%, -50%) scale(.3);
}
.sideCard {
display: none;
}
}
}
@media screen and (max-width: 320px) {
.container.garden {
.card {
transform: translate(-50%, -50%) scale(.28);
}
}
}
// Fury
.container.fury {
.wrap {
background-color: #f092a3;
}
.sideCard:last-child {
right: 3.2%;
}
.sideCard__img {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/gif/fury/26193722_60x60.gif');
}
.sideCard__title {
font-family: 'Rounds';
font-size: 45px;
line-height: 55px;
color: #fbf2e4;
}
._cil {
left: 180px;
}
._cir {
right: 180px;
}
._cupBlue {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/static/fury/cuphead_blue.png');
}
._cupGirl {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/static/fury/cuphead_girl.png');
}
._cupRed {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/static/fury/cuphead_red.png');
}
._cupFlower {
background-size: 75%;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/static/fury/Idle_18.png');
}
.card {
padding: 22px 24px;
width: 820px;
height: 978px;
background-color: #ee5e29;
.box {
width: 100%;
height: 100%;
.header,
.main,
.footer {
position: relative;
}
.header,
.footer {
width: 100%;
}
.header {
margin-bottom: 10px;
height: 156px;
border: solid 5px #000;
}
.footer {
height: 156px;
}
.main {
position: relative;
margin-bottom: 10px;
width: 100%;
height: calc(100% - 332px);
}
}
}
.header__titleWrap {
width: 100%;
height: 100%;
border: solid 14px #3689c2;
background-color: #000;
.header__title {
margin-top: 14px;
padding-top: 10px;
font-family: 'Rounds';
font-size: 104px;
line-height: 90px;
text-transform: uppercase;
text-align: center;
transform: scaleY(1.3);
color: #fbf2e4;
word-spacing: 15px;
}
}
.presentBlock {
margin-bottom: 10px;
width: 100%;
height: 397px;
z-index: 999;
.gradientBox {
float: left;
width: 100px;
height: 100%;
border: 5px solid;
background: repeating-linear-gradient(125deg, #3689c2, #3689c2 30px, #000 30px, #000 55.5px);
animation: animationGradient 3s linear infinite;
&:first-child {
margin-right: 10px;
}
}
.characterBlock {
position: relative;
float: left;
width: calc(100% - 220px);
height: 100%;
margin-right: 10px;
border: 5px solid;
overflow: hidden;
background-color: #f092a3;
z-index: 1;
&__square {
position: absolute;
width: 45px;
height: 45px;
border: 5px solid #fff;
transform: rotate(-45deg);
&:nth-child(1) {
top: 25px;
left: 25px;
}
&:nth-child(2) {
top: 25px;
right: 25px;
}
&:nth-child(3) {
bottom: 25px;
left: 25px;
}
&:nth-child(4) {
bottom: 25px;
right: 25px;
}
}
.characterBlock__circle {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 397px;
height: 397px;
border-radius: 50%;
border: 5px solid;
overflow: hidden;
.circleWall {
width: 100%;
height: 280px;
background-color: #000;
background-image: linear-gradient(335deg, #fbf2e4 23px, transparent 23px),
linear-gradient(155deg, #fbf2e4 23px, transparent 23px),
linear-gradient(335deg, #fbf2e4 23px, transparent 23px),
linear-gradient(155deg, #fbf2e4 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
.circleFloor {
width: 100%;
height: 120px;
border-top: 5px solid;
background-color: #3689c2;
}
.circleImg {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/gif/fury/ce75f3_dee38d3cdbfd4a4192171e1b9646ce4f_mv2.gif');
}
}
}
}
.characterInfo {
position: relative;
width: 100%;
height: calc(100% - 407px);
&__gradient {
float: left;
width: 50%;
height: 100%;
background: repeating-linear-gradient(-125deg, #fbf2e4, #fbf2e4 30px, #000 30px, #000 55.8px);
animation: animationGradient 3s linear infinite;
}
&__triangleWrap {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-left: 386px solid transparent;
border-right: 386px solid transparent;
border-bottom: 224px solid #ee5e29;
.characterInfo__triangle {
position: absolute;
bottom: -224px;
left: 50%;
transform: translateX(-50%);
border-left: 352px solid transparent;
border-right: 352px solid transparent;
border-bottom: 205px solid #3689c2;
}
}
&__circle {
position: absolute;
top: calc(50% + 2px);
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 180px;
height: 180px;
border: 5px solid;
border-radius: 50%;
background-color: #f092a3;
.characterInfo__article {
position: absolute;
top: calc(50% + 10px);
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 90%;
.characterInfo__title {
font-size: 80px;
color: #000;
text-align: center;
font-family: "Rounds";
&:first-child {
line-height: 60px;
transform: scaleY(1.3);
}
&:last-child {
margin-top: 10px;
font-size: 40px;
border-top: 3px solid #ee5e29;
}
}
}
}
&__img {
position: absolute;
bottom: 0;
width: 90px;
height: 90px;
z-index: 2;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/gif/fury/cuphead_animClean.gif');
}
}
.footer__circle {
float: left;
margin-right: 49px;
width: 156px;
height: 156px;
border-radius: 50%;
border: 5px solid;
background-color: #f092a3;
background-size: 90%;
background-position: center;
background-repeat: no-repeat;
&:last-child {
margin-right: 0;
}
&._cupFlower {
background-size: 75%;
}
}
}
@keyframes animationGradient {
from {
background-position: 0 0;
}
to {
background-position: 0 387px;
}
}
@media screen and (orientation: landscape) and (max-height: 1000px) {
.container.fury {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (orientation: landscape) and (max-height: 810px) {
.container.fury {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (orientation: landscape) and (max-height: 620px) {
.container.fury {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (orientation: landscape) and (max-height: 420px) {
.container.fury {
.card {
transform: translate(-50%, -50%) scale(.2);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.2);
}
}
}
@media screen and (max-width: 1560px) {
.container.fury {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (max-width: 1360px) {
.container.fury {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (max-width: 1080px) {
.container.fury {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (max-width: 890px) {
.container.fury {
.sideCard {
display: none;
}
}
}
@media screen and (max-width: 370px) {
.container.fury {
.card {
transform: translate(-50%, -50%) scale(.35);
}
}
}
// Finish
.container.finish {
.wrap {
background-color: #f0966d;
}
.sideCard:last-child {
right: 3.2%;
}
.sideCard__img {
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/static/finish/kingSideBox.png');
}
.sideCard__title {
font-family: 'Rounds';
font-size: 45px;
line-height: 55px;
}
.high {
font-size: 53px;
line-height: 53px;
}
.orange {
color: #f0966d;
}
.blue {
color: #7fcae2;
}
.purple {
color: #c6a8ca;
}
.card {
padding: 27px;
width: 908px;
height: 908px;
background-color: #fbf2e4;
.box {
width: 100%;
height: 100%;
background-color: #000;
.header,
.main,
.footer {
position: relative;
}
.header,
.footer {
width: 100%;
height: 65px;
}
.main {
width: 100%;
height: calc(100% - 130px);
background-color: #7fcae2;
}
}
}
.sideBox {
position: relative;
float: left;
width: 65px;
height: 100%;
background-color: #7fcae2;
&__angle {
border-top: 65px solid #000;
border-right: 65px solid transparent;
}
&__square {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 38px;
height: 38px;
border: 2px solid;
background-color: #fff;
}
}
.sideBlock {
position: relative;
float: left;
width: calc(100% - 130px);
height: 100%;
border: 5px solid;
background: repeating-linear-gradient(125deg, #f0966d, #f0966d 30px, #000 30px, #000 58.5px);
animation: animationGradientH 4s linear infinite;
&__article {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: calc(100% + 10px);
border: 5px solid;
background-color: #c6a8ca;
.sideBlock__title {
font-family: sans-serif;
text-align: center;
font-size: 60px;
line-height: 60px;
}
}
}
.gradientBox {
float: left;
width: 65px;
height: 100%;
border: 5px solid;
background: repeating-linear-gradient(125deg, #c6a8ca, #c6a8ca 15px, #000 15px, #000 34.1px);
animation: animationGradient 4s linear infinite;
&:first-child {
margin-right: 10px;
}
}
.presentBlock {
position: relative;
float: left;
margin: 10px 10px 0 0;
width: calc(100% - 150px);
height: calc(100% - 20px);
&__titleWrap {
margin-bottom: 10px;
width: 100%;
height: 163px;
background-color: #000;
.presentBlock__commas {
position: absolute;
top: -10px;
font-family: 'Swampy';
font-size: 180px;
line-height: 180px;
color: #c6a8ca;
&:first-child {
left: 30px;
}
&:last-child {
right: 30px;
}
}
.presentBlock__title {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
font-family: 'Rounds';
font-size: 180px;
line-height: 180px;
color: #fbf2e4;
letter-spacing: -15px;
}
}
}
.characterBlock {
margin-bottom: 10px;
width: 100%;
height: 363px;
&__side {
float: left;
width: 158px;
height: 100%;
&:first-child {
margin-right: 10px;
}
.characterBlock__sideImg {
width: 100%;
border: 5px solid;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
&:first-child {
margin-bottom: 10px;
height: 158px;
background-color: #f0966d;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/static/finish/kingHead_151.png')
}
&:last-child {
height: calc(100% - 168px);
background-color: #fbf2e4;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/static/finish/fullKing_151.png')
}
}
}
&__img {
margin-right: 10px;
float: left;
width: calc(100% - 336px);
height: 100%;
border: 5px solid;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/gif/finish/king_clean2.gif');
background-color: #c6a8ca;
}
}
.characterInfo {
width: 100%;
height: 158px;
.sideBox {
position: relative;
width: 158px;
height: 100%;
border: 5px solid;
background-color: #f0966d;
&:first-child {
margin-right: 10px;
}
&__img {
position: absolute;
top: 55px;
width: 100%;
height: 100%;
background-size: cover;
background-position: -45px;
background-repeat: no-repeat;
background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/static/finish/cuphead-king-dice-png-1.png');
z-index: 2;
}
}
.sideBlock {
margin-right: 10px;
width: calc(100% - 336px);
height: 100%;
background: #000;
&__title {
font-family: 'Rounds';
text-align: center;
font-size: 41px;
line-height: 41px;
color: #fbf2e4;
}
}
}
}
@keyframes animationGradient {
from {
background-position: 0 0;
}
to {
background-position: 0 714px;
}
}
@keyframes animationGradientH {
from {
background-position: 0 0;
}
to {
background-position: 714px 0;
}
}
@media screen and (orientation: landscape) and (max-height: 938px) {
.container.finish {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (orientation: landscape) and (max-height: 757px) {
.container.finish {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (orientation: landscape) and (max-height: 574px) {
.container.finish {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (orientation: landscape) and (max-height: 393px) {
.container.finish {
.card {
transform: translate(-50%, -50%) scale(.2);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.2);
}
}
}
@media screen and (max-width: 1700px) {
.container.finish {
.card {
transform: translate(-50%, -50%) scale(.8);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.8);
}
}
}
@media screen and (max-width: 1460px) {
.container.finish {
.card {
transform: translate(-50%, -50%) scale(.6);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.6);
}
}
}
@media screen and (max-width: 1180px) {
.container.finish {
.card {
transform: translate(-50%, -50%) scale(.4);
}
.sideCard {
transform: translateY(-50%) translateX(-5%) scale(.4);
}
}
}
@media screen and (max-width: 900px) {
.container.finish {
.sideCard {
display: none;
}
}
}
@media screen and (max-width: 390px) {
.container.finish {
.card {
transform: translate(-50%, -50%) scale(.35);
}
}
}
@media screen and (max-width: 330px) {
.container.finish {
.card {
transform: translate(-50%, -50%) scale(.3);
}
}
}
// Casino
.container.casino {
height: 100%;
}
.casinoFrame {
width: 100%;
height: 100%;
}
/*____________________________________________________________
# Social links
____________________________________________________________*/
.social {
position: fixed;
bottom: 0;
left: 30px;
}
.socialList {
list-style: none;
&:after {
content: '';
display: block;
margin: 0 auto;
width: 1px;
height: 40px;
background: #749064;
}
}
.socialList__item {
margin-bottom: 10px;
width: 20px;
height: 20px;
transition: transform .2s;
&:hover {
transform: translateY(-3px);
.socialList__icon {
stroke: #7dcbd8;
}
}
}
.socialList__icon {
fill: none;
stroke: #749064;
}"use strict";
var burgerBtn = document.querySelector(".burger__input");
var menuBlock = document.querySelector(".menu");
let containerVar = document.querySelector('.canvas');
let menuItemVar = document.getElementsByClassName("menu__item");
burgerBtn.onclick = function() {
if (menuBlock.classList.contains('popup') === false) {
this.classList.add('checked');
menuBlock.classList.add('popup');
containerVar.classList.add('popup');
} else {
this.classList.remove('checked');
menuBlock.classList.remove('popup');
containerVar.classList.remove('popup');
}
}
for(let el of menuItemVar) {
el.addEventListener("click", function() {
let claas = el.classList[1];
containerVar.setAttribute('class',`${containerVar.classList[0]} ${claas}`);
let x = document.getElementsByClassName("menu__item");
Array.prototype.forEach.call(x, function(el) {
el.classList.remove("active");
menuBlock.classList.remove('popup');
burgerBtn.classList.remove('checked');
});
this.classList.add('active');
});
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.