.container
.scores
.score
.title
p 1UP
.value
p 2800
.score
.title
p HI-SCORE
.value
p 280000
.score
.title
p Daily CSS Images
.value
p 12 (HAMBURGER)
.score
.title.pepper
p Pepper
.value
p 5
.game
.row
.flex
.ladder
.bump-large
.bun-top
.ladder
.hotdog.one
.split-ladder
.ladder
.bump-large
.bun-top
.lettuce
.ladder
.row
.flex
.bump
.bump-large
.lettuce
.ladder
.bump
.bump
.bump
.ladder
.egg
.bump-large
.ladder
.row
.flex
.bump
.bump-large
.beef.one
.ladder
.bump
.bump
.mrpepper
.hat
.face
.body
span.arm.left
span.arm.right
.legs
.bump
.ladder
.bump-large
.beef.two
.row
.flex
.ladder
.bump-large
.bun-bottom
.ladder
.bump
.ladder
.bump
.ladder
.bump-large
.bun-bottom
.ladder
.hotdog.two
body {
font-family: monospace;
font-size: 24px;
background: black;
}
.container {
overflow: hidden;
width: 780px;
margin: auto;
}
.game {
width: 100%;
margin: 10% auto 0 auto;
}
.scores {
display: flex;
justify-content: space-between;
}
.title {
color: red;
}
.score {
text-align: right;
color: white;
& p {
margin: 0;
padding: 0;
}
}
.pepper {
color: #00fb05;
}
.row {
position: relative;
height: 120px;
border: 10px royalblue solid;
border-right: none;
border-bottom: none;
border-left: none;
&:nth-child(4) {
border-bottom: 10px royalblue solid;
}
}
.flex {
display: flex;
width: 100%;
height: 100%;
}
.ladder {
position: relative;
width: 7%;
height: 100%;
margin-top: -10px;
border-top: 10px cyan solid;
border-bottom: 10px cyan solid;
background-color: white;
background-image: repeating-linear-gradient(
to bottom,
rgb(0, 0, 0) 0%,
rgb(0, 0, 0) 1%,
rgba(0, 0, 0, 0) 2%,
rgba(0, 0, 0, 0) 3%,
rgb(0, 0, 0) 4%
);
}
.split-ladder {
position: relative;
width: 7%;
height: 100%;
border-right: 55px black solid;
border-left: 55px black solid;
background-color: white;
background-image: repeating-linear-gradient(
to bottom,
rgb(0, 0, 0) 0%,
rgb(0, 0, 0) 1%,
rgba(0, 0, 0, 0) 2%,
rgba(0, 0, 0, 0) 3%,
rgb(0, 0, 0) 4%
);
}
.bump-large {
position: relative;
width: 25%;
height: 100%;
background-color: black;
}
.bump {
position: relative;
width: 7%;
height: 100%;
background-color: black;
}
.bump-slim {
position: relative;
width: 4%;
height: 100%;
background-color: black;
}
.bun-top {
position: absolute;
top: -40px;
width: 100%;
height: 40px;
border-radius: 100% 100% 0 0;
background-color: wheat;
background-image: linear-gradient(
to top,
rgb(245, 212, 96) 55%,
rgb(245, 122, 40) 100%
);
}
.bun-bottom {
position: absolute;
bottom: -15px;
width: 100%;
height: 30px;
border-radius: 0 0 40% 40%;
background-color: wheat;
background-image: linear-gradient(
to bottom,
rgb(245, 212, 96) 80%,
rgb(245, 122, 40) 100%
);
}
.beef {
position: absolute;
z-index: 5;
bottom: -10px;
width: 100%;
height: 40px;
border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
background-color: brown;
background-image: linear-gradient(
to bottom,
rgb(108, 67, 29) 0%,
rgb(152, 80, 25) 50%,
rgb(108, 67, 29) 100%
);
}
.beef.one {
animation: fall 3s 1s 1 forwards;
}
.beef.two {
animation: fall2 3s 6.5s 1 forwards;
}
.lettuce {
position: absolute;
z-index: 10;
bottom: -10px;
width: 100%;
height: 20px;
border: 4px darkgreen solid;
border-radius: 100%;
background-color: #00c400;
&:after {
position: absolute;
z-index: 9;
display: inline-block;
width: 100%;
height: 50%;
content: "";
transform: rotate(-7deg);
border: 3px darkgreen dashed;
border-radius: 50%;
background-color: #00c400;
}
&:before {
position: absolute;
z-index: 9;
left: 10%;
display: inline-block;
width: 90%;
height: 50%;
content: "";
transform: rotate(7deg);
border: 3px darkgreen dashed;
border-radius: 25%;
background-color: #00c400;
}
}
.hotdog {
position: relative;
z-index: 30;
width: 50%;
height: 75%;
margin: auto;
transform: translateY(50%);
&:before {
position: absolute;
top: 0;
left: 25%;
display: inline-block;
width: 50%;
height: 50%;
content: "";
transform: rotate(-23deg);
border: 1px solid black;
border-right: none;
border-bottom: none;
border-radius: 60% 60% 100% 70%;
background-color: #980602;
background-color: #980602;
}
&:after {
position: absolute;
bottom: 15%;
left: 17%;
display: inline-block;
width: 57%;
height: 50%;
content: "";
transform: rotate(25deg);
border: 1px solid black;
border-top: none;
border-right: black;
border-left: black;
border-radius: 60% 60% 70% 60%;
background-color: #980602;
background-color: #980602;
}
&.one {
animation: move 8s infinite;
animation-direction: reverse;
}
&.two {
animation: move-squash 8s 1s 1 forwards;
}
}
.egg {
position: absolute;
z-index: 20;
top: 22%;
left: 25%;
width: 50%;
width: 150%;
height: 75%;
height: 75%;
animation: left-right 15s infinite;
border-radius: 78% 81% 100% 75%;
background-color: white;
&:after {
position: absolute;
bottom: 18%;
left: 27%;
display: inline-block;
width: 50%;
height: 50%;
content: "";
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
border-radius: 60% 60% 70% 60%;
background-color: yellow;
}
}
.mrpepper {
position: absolute;
z-index: 20;
bottom: 15%;
left: 12%;
width: 75%;
height: 33%;
animation: left-right 8s 1 forwards;
background-color: white;
& .hat {
position: relative;
z-index: 40;
left: 0;
width: 100%;
height: 33%;
text-align: center;
background-color: white;
&:after {
font-size: 0.5em;
display: block;
content: "P";
transform: translateY(-5%);
color: red;
}
&:before {
position: absolute;
top: 0;
left: -10%;
width: 120%;
height: 50%;
content: "";
border-radius: 20%;
background-color: white;
}
}
& .face {
position: relative;
left: 0;
width: 100%;
height: 55%;
border-radius: 100%;
background-color: rgb(255, 118, 80);
&:after {
position: absolute;
top: 33%;
left: 25%;
display: block;
width: 12%;
height: 25%;
content: "";
background-color: orange;
}
&:before {
position: absolute;
top: 33%;
right: 25%;
display: block;
width: 12%;
height: 25%;
content: "";
background-color: orange;
}
}
& .body {
position: relative;
left: 10%;
width: 80%;
height: 33%;
background-color: white;
& .arm {
position: absolute;
width: 50%;
height: 50%;
background-color: white;
}
&:after {
position: absolute;
top: 33%;
left: 25%;
display: block;
width: 12%;
height: 25%;
content: "";
background-color: orange;
}
&:before {
position: absolute;
top: 33%;
right: 25%;
display: block;
width: 12%;
height: 25%;
content: "";
background-color: orange;
}
}
& .legs {
position: relative;
left: 12%;
width: 75%;
height: 20%;
background-color: red;
&:after {
position: absolute;
top: 50%;
left: 5%;
display: block;
width: 25%;
height: 100%;
content: "";
background-color: green;
}
&:before {
position: absolute;
top: 50%;
right: 5%;
display: block;
width: 25%;
height: 100%;
content: "";
background-color: green;
}
}
}
.left {
left: -50%;
transform: rotate(-45deg);
border-radius: 50% 10% 10% 50%;
}
.right {
right: -50%;
transform: rotate(45deg);
border-radius: 10% 50% 50% 10%;
}
@keyframes move {
0% {
transform: translate(0, 50%);
}
25% {
transform: translate(0, -100%);
}
50% {
transform: translate(-900%, -100%);
}
75% {
transform: translate(-900%, 50%);
}
100% {
transform: translate(0, 50%);
}
}
@keyframes move-squash {
0% {
height: 75%;
transform: translate(0, 50%);
}
25% {
height: 75%;
transform: translate(0, -100%);
}
50% {
height: 75%;
transform: translate(-900%, -100%);
}
75% {
height: 75%;
transform: translate(-900%, 50%);
}
90% {
transform: translate(-450%, 50%);
opacity: 1;
}
100% {
transform: translate(-450%, 50%);
opacity: 0;
}
}
@keyframes left-right {
0% {
transform: translateX(500%);
}
50% {
transform: translateX(-1000%);
}
100% {
transform: translateX(500%);
}
}
@keyframes fall {
10% {
transform: translate(0) rotate(5deg);
}
50% {
transform: translate(0, 100%) rotate(0);
}
100% {
transform: translateY(250%);
}
}
@keyframes fall2 {
10% {
transform: translate(0) rotate(-5deg);
}
50% {
transform: translate(0, 100%) rotate(0);
}
100% {
transform: translateY(250%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.