HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
//- 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');
});
}
Also see: Tab Triggers