Skip to content

Instantly share code, notes, and snippets.

@davidjenner

davidjenner/animal-quiz.markdown

Created November 23, 2020 17:27
Show Gist options
  • Save davidjenner/09b8a53ce3c694e954fd678048a69156 to your computer and use it in GitHub Desktop.
Save davidjenner/09b8a53ce3c694e954fd678048a69156 to your computer and use it in GitHub Desktop.
Download ZIP
Animal Quiz
Raw
index.html
<!--
close via SSH on Github
https://gist.github.com/603628a1beb2cd4981801a41ca06a692.git
-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<!-- main - right & answer - left -->
<div class="main">
<!-- The animal to the left -->
<div class="animal">
<div class="cat body bodySlant earsBasic">
<div class="face"></div>
<div class="features"></div>
</div>
<div class="sheep body">
<div class="face"></div>
<div class="features"></div>
</div>
<div class="dog body bodySlant earsBasic">
<div class="face"></div>
<div class="features"></div>
</div>
</div>
<!-- The answer to the right -->
<div class="answer">
<!-- Right Answer -->
<div class="answer1">
<button onclick="playAudio()" class="rightSound" id="rightanswer">Meoooooow!</button>
</div>
<!-- Wrong Answer -->
<div class="answer2">
<button onclick="playAudio()" class="playSound" id ="wronganswer">Woof Woof!</button>
</div>
<button class="playSound"></button>
</div>
</div>
<!-- The selection along the bottom -->
<div class="selection">
<button class="catbtn">Cat</button>
<button class="sheepbtn">Sheep</button>
<button class="dogbtn">Dog</button>
</div>
Raw
script.js
//https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-change-img-src-on-click
//Play Audio -https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play
$(document).ready(function(){
$(".catbtn").click(function(){
$(".sheep body").hide();
});
$(".sheep body").click(function(){
$("p").show();
});
});
$(document).ready(function(){
$(".catbtn").click(function(){
// Change src attribute of image
$(this).attr("src", "/examples/images/card-front.jpg");
});
});
// Play Audio for wrong answer
var x = document.getElementById("#myAudio");
function playAudio() {
x.play();
}
$(document).ready(function() {
var obj = document.createElement("audio");
obj.src = "https://bigsoundbank.com/UPLOAD/ogg/0019.ogg";
obj.volume = 0.1;
obj.autoPlay = false;
obj.preLoad = true;
obj.controls = true;
$(".rightSound").click(function() {
obj.rightanswer();
// obj.pause();
});
});
$(document).ready(function() {
var obj = document.createElement("audio");
obj.src = "https://bigsoundbank.com/UPLOAD/ogg/0019.ogg";
obj.volume = 0.1;
obj.autoPlay = false;
obj.preLoad = true;
obj.controls = true;
$(".playSound").click(function() {
obj.play();
// obj.pause();
});
});
Raw
style.scss
//https://keithjgrant.com/posts/2017/07/transitioning-gradients/
*{
font-family: 'Fredoka One', cursive;
font-size: 20pt;
color: #fff;
}
button{
background-image: linear-gradient(
to right,
hsl(211, 100%, 50%),
hsl(179, 100%, 30%)
);
transition: background-image 0.5s linear;
border-color: #fff;
border-radius: 40px;
margin: 10px;
}
button:hover{
background-image: linear-gradient(
to right,
#bad455,
hsl(179, 100%, 30%)
);
transition: background-image 2.5s linear;
transition: 4s;
}
.rightanswer:hover{
background-image: linear-gradient(
to right,
#bad455,
#bad455
);
transition: background-image 2.5s linear;
transition: 4s;
}
#wronganswer:hover{
background-image: linear-gradient(
to right,
hsl(344, 100%, 50%),
hsl(31, 100%, 40%)
);
transition: background-image 2.5s linear;
transition: 4s;
}
.main{
float: clear;
}
.animal{
float: left;
border: 0px solid red;
width: 50%;
height: 300px;
}
.answer{
float: right;
border: 0px solid blue;
width: 45%;
height: 300px;
}
.answer1btn, .answer2btn, #rightanswer, #wronganswer{
padding: 40px 80px 40px 80px;
border-radious: 60px;
}
.selection{
border: 0px solid green;
position: absolute;
top: 320px;
width: 100%;
height: 100px;
}
.catbtn, .sheepbtn, .dogbtn{
padding: 40px 80px 40px 80px;
border-radious: 60px;
}
// all animals have this default setup for body, face and features elements
// saves setting it up each time
.body {
width: 90px;
height: 100px;
&, &:before, &:after {
position: absolute;
}
&:before, &:after {
content: '';
}
}
.face,
.features {
&, &:before, &:after {
position: absolute;
}
&:before, &:after {
content: '';
}
}
// Specific styles
$defaultBodyColor: #e6ac4c;
//Slanted Body
.bodySlant {
background-color: $defaultBodyColor;
border-radius: 4px;
transform-origin: 50% 100%;
transform: perspective(300px) rotateX(20deg);
}
.earsBasic {
// A basic style for Ears
&:before,
&:after {
width: 0;
height: 0;
top: -25px;
border-top: 28px solid transparent;
border-bottom: 20px solid transparent;
}
&:before {
border-left: 20px solid $defaultBodyColor;
left: 0;
}
&:after {
border-right: 20px solid $defaultBodyColor;
right: 0;
}
}
// Styling for the Cat
// uses bodySlant and earsBasic as a base
.cat {
top: 60px;
left: 50px;
.face {
// Eyes
top: 22px;
left: 20px;
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
box-shadow: 44px 0 #000;
animation: blink 8s infinite linear;
// Mouth
&:before,
&:after {
top: 14px;
left: 6px;
z-index: 5;
width: 16px;
height: 20px;
border-radius: 50% / 40%;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid transparent;
border-top: 2px solid transparent;
box-shadow: 0px 0px #000;
}
//Rotated to make other side of mouth
&:after {
left: 24px;
transform: rotateY(180deg);
}
}
.features {
//Whiskers
top: 44px;
left: 11px;
width: 20px;
height: 1px;
background-color: #000;
box-shadow: 0 5px #000,
48px 0 #000,
48px 5px #000;
//nose
&:after {
left: 30px;
top: -6px;
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
box-shadow: 2px 0 #000,
1px 1px #000;
animation: yawn 8s infinite linear;
}
&:before {
//Tail
top: 10px;
left: 74px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 5px solid $defaultBodyColor;
border-left: 0;
border-top: 0;
}
}
}
@keyframes blink {
32% { height: 6px; }
38% { height: 1px; }
42% { height: 1px; }
48% { height: 6px; }
}
@keyframes yawn {
32% {
box-shadow: 2px 0 #000,
1px 1px #000,
0px 16px transparent,
2px 16px transparent,
1px 18px transparent;
}
35% {
box-shadow: 2px 0 #000,
1px 1px #000,
0px 16px #650000,
2px 16px #650000,
1px 18px transparent;
}
38% {
box-shadow: 2px 0 #000,
1px 1px #000,
0px 16px #650000,
2px 16px #650000,
1px 18px #650000;
}
42% {
box-shadow: 2px 0 #000,
1px 1px #000,
0px 16px #650000,
2px 16px #650000,
1px 18px #650000;
}
45% {
box-shadow: 2px 0 #000,
1px 1px #000,
0px 16px #650000,
2px 16px #650000,
1px 18px transparent;
}
48% {
box-shadow: 2px 0 #000,
1px 1px #000,
0px 16px transparent,
2px 16px transparent,
1px 18px transparent;
}
}
// Sheep
// Doesn’t use the base body, he’s cooler than that…
$sheepBodyColor: #dbdbdb;
$sheepShadowColor: #b4b4b4;
.sheep {
//Body
top: 90px;
left: 250px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: $sheepBodyColor;
box-shadow:
40px 0 $sheepBodyColor,
-40px 0 $sheepBodyColor,
41px 0 $sheepShadowColor,
-41px 0 $sheepShadowColor,
-23px -25px $sheepBodyColor,
-24px -26px $sheepShadowColor,
9px -28px $sheepBodyColor,
8px -29px $sheepShadowColor,
28px -25px $sheepBodyColor,
28px -26px $sheepShadowColor,
-23px 15px $sheepBodyColor,
-24px 16px $sheepShadowColor,
23px 15px $sheepBodyColor,
24px 16px $sheepShadowColor,
-1px 18px $sheepBodyColor;
// Head
&:before {
left: 4px;
top: 0;
width: 40px;
height: 70px;
background-color: #000;
transform: perspective(300px) rotateX(-60deg);
border-radius: 4px 4px 40% 40%;
}
//Not used atm
&:after {
}
.face {
// Eyes
top: 25px;
left: 16px;
width: 4px;
height: 4px;
z-index: 5;
background-color: #fff;
border-radius: 50%;
box-shadow: 12px 0 #fff;
// Ears
&:before,
&:after {
top: -25px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-radius: 8px;
transform: perspective(300px) rotateX(-60deg);
}
&:before {
border-left: 15px solid #000;
left: -14px;
}
&:after {
border-right: 15px solid #000;
right: -26px;
}
}
.features {
// Grass
&:after {
top: 54px;
left: -8px;
width: 6px;
height: 20px;
border-radius: 50% 50% 0 0 / 100%;
background-color: green;
box-shadow: 5px 2px green,
10px 0 green,
15px 2px green,
20px 0 green,
25px 2px green,
30px 0 green,
35px 2px green,
40px 0 green,
45px 2px green,
50px 0 green,
55px 2px green,
60px 0 green;
}
}
} //end of sheep
// dog
$dogBodyColor : #a3701d;
.dog {
left: 400px;
top: 60px;
background-color: $dogBodyColor;
// Ears
&:before {
top: -28px;
left: 0;
width: 0;
height: 0;
border-left: 30px solid $dogBodyColor;
border-radius: 30% 0 0 / 40% 40% 0 0;
border-top: 28px solid transparent;
border-bottom: 20px solid transparent;
}
&:after {
right: 0;
z-index: -5;
border-right: 30px solid #a3701d;
border-radius: 0 15px 0 0;
}
.face {
//eyes and nose
top: 22%;
left: 22%;
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
box-shadow: 44px 0 #000,
19px 15px #000,
21px 15px #000,
23px 15px #000,
25px 15px #000,
22px 18px #000;
// Mouth
&:before,
&:after {
top: 14px;
left: 6px;
width: 16px;
height: 20px;
border-radius: 50% / 40%;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid transparent;
border-top: 2px solid transparent;
box-shadow: 0px 0px #000;
}
&:after {
left: 24px;
transform: rotateY(180deg);
}
}
.features {
// Patch over right eye
right: 6px;
top: 5px;
z-index: -1;
width: 30px;
height: 35px;
background-color: #d6d6d6;
border-radius: 50% 40% 40% 50% / 30% 30% 30% 30%;
//tongue
&:after {
top: 51px;
right: 34px;
width: 10px;
height: 10px;
background-color: #df4f4f;
border-radius: 0 0 50% 50%;
animation: tongue 1s infinite ease-in;
}
//tail
&:before {
top: 35px;
right: -35px;
z-index: -1;
width: 40px;
height: 40px;
border-radius: 50%;
border: 5px solid #a3701d;
border-left: 0;
border-top: 0;
box-shadow: 3px 0 #f1f1f1,
6px 5px #a3701d,
9px 5px #f1f1f1,
10px 12px #a3701d;
animation: wag 5s infinite ease-in-out;
}
}
}
@keyframes tongue {
0% { height: 10px; }
50% { height: 13px; }
}
@keyframes wag {
10% { top: 25px; right: -30px; transform: rotate(-20deg); }
20% { top: 35px; right: -35px; transform: rotate(0); }
30% { top: 25px; right: -30px; transform: rotate(-20deg); }
40% { top: 35px; right: -35px; transform: rotate(0); }
50% { top: 30px; right: -32px; transform: rotate(-10deg); }
60% { top: 35px; right: -35px; transform: rotate(0); }
}
// Bear Styling
// Uses slanted body styling
$bearBodyColor: #5a3d0d;
$bearPatchesColor: #d0ba96;
$bearEyeColor: #2f1f05;
.bear {
top: 40px;
left: 590px;
height: 120px;
background-color: $bearBodyColor;
&.alt {
left: 60px;
top: 230px;
width: 70px;
height: 70px;
border-radius: 50% / 45% 45% 35% 35%;
box-shadow:
//body section and patch
0 54px 0 -12px $bearPatchesColor,
0 54px 0 2px $bearBodyColor,
//ears
-18px -23px 0 -25px $bearPatchesColor,
18px -23px 0 -25px $bearPatchesColor,
-18px -23px 0 -20px $bearBodyColor,
18px -23px 0 -20px $bearBodyColor,
//legs
-17px 84px 0 -22px $bearBodyColor,
17px 84px 0 -22px $bearBodyColor;
&:before {
//paws
left: -16px;
top: 56px;
width: 30px;
height: 25px;
background-color: $bearBodyColor;
border-radius: 50% / 40%;
box-shadow:
-1px 0 $bearPatchesColor,
//right paw
72px 0 $bearBodyColor,
73px 0 $bearPatchesColor;
}
&:after {
display: none;
}
.face {
left: 20px;
}
.features {
display: none;
}
}
//ears
&:before {
top: -22px;
left: 0;
width: 35px;
height: 26px;
background-color: $bearBodyColor;
border-radius: 50% 50% 0 0 / 70%;
box-shadow: 55px 0 $bearBodyColor;
}
//paws
&:after {
top: 50px;
left: -12px;
width: 14px;
height: 15px;
background-color: $bearPatchesColor;
border-radius: 40%;
box-shadow:
//right paw
100px 0 $bearPatchesColor,
97px 0px 0px 8px $bearBodyColor,
//left paw
3px 0px 0px 8px $bearBodyColor,
18px 65px $bearPatchesColor,
18px 65px 0px 6px $bearBodyColor,
82px 65px $bearPatchesColor,
82px 65px 0px 6px $bearBodyColor;
animation: wave 8s infinite linear;
}
.face {
//Background nose spot
top: 24px;
left: 30px;
width: 30px;
height: 30px;
background-color: $bearPatchesColor;
border: 0;
border-radius: 50%;
&:before {
// Eyes and nose
top: 5px;
left: 11px;
z-index: 5;
width: 8px;
height: 8px;
background-color: $bearEyeColor;
border-radius: 50%;
box-shadow:
-3px 0 $bearEyeColor,
-2px 0 $bearEyeColor,
2px 0 $bearEyeColor,
3px 0 $bearEyeColor,
0 3px $bearEyeColor,
//eyes
-12px -12px $bearEyeColor,
12px -12px $bearEyeColor,
// 19px 18px $bearEyeColor,
// 21px 18px $bearEyeColor,
// 23px 18px $bearEyeColor,
// 25px 18px $bearEyeColor,
// 22px 21px $bearEyeColor
}
&:after {
//mouth
left: 12px;
top: 11px;
width: 10px;
height: 10px;
border-bottom: 3px solid #000;
border-radius: 40%;
transform: rotate(-30deg);
}
}
// Belly patch
.features {
top: 65px;
left: 23px;
width: 45px;
height: 45px;
background-color: $bearPatchesColor;
border-radius: 40%;
&:before {
//ear patches
top: -77px;
left: -12px;
width: 14px;
height: 8px;
background-color: $bearPatchesColor;
border-radius: 50% 50% 0 0 / 70%;
box-shadow: 55px 0 $bearPatchesColor;
}
&:after {
}
}
}
@keyframes wave {
50% {
box-shadow:
//right paw
100px 0 $bearPatchesColor,
97px 0px 0px 8px $bearBodyColor,
//left paw
3px 0px 0px 8px $bearBodyColor,
18px 65px $bearPatchesColor,
18px 65px 0px 6px $bearBodyColor,
82px 65px $bearPatchesColor,
82px 65px 0px 6px $bearBodyColor;
}
55% {
box-shadow:
//right paw
99px -6px $bearPatchesColor,
96px -6px 0px 8px $bearBodyColor,
//left paw
3px 0px 0px 8px $bearBodyColor,
18px 65px $bearPatchesColor,
18px 65px 0px 6px $bearBodyColor,
82px 65px $bearPatchesColor,
82px 65px 0px 6px $bearBodyColor;
}
60% {
box-shadow:
//right paw
100px 0 $bearPatchesColor,
97px 0 0px 8px $bearBodyColor,
//left paw
3px 0px 0px 8px $bearBodyColor,
18px 65px $bearPatchesColor,
18px 65px 0px 6px $bearBodyColor,
82px 65px $bearPatchesColor,
82px 65px 0px 6px $bearBodyColor;
}
65% {
box-shadow:
//right paw
99px -6px $bearPatchesColor,
96px -6px 0px 8px $bearBodyColor,
//left paw
3px 0px 0px 8px $bearBodyColor,
18px 65px $bearPatchesColor,
18px 65px 0px 6px $bearBodyColor,
82px 65px $bearPatchesColor,
82px 65px 0px 6px $bearBodyColor;
}
70% {
box-shadow:
//right paw
100px 0 $bearPatchesColor,
97px 0 0px 8px $bearBodyColor,
//left paw
3px 0px 0px 8px $bearBodyColor,
18px 65px $bearPatchesColor,
18px 65px 0px 6px $bearBodyColor,
82px 65px $bearPatchesColor,
82px 65px 0px 6px $bearBodyColor;
}
}
// lion
$lionBodyColor: #df8f2b;
$lionManeColor: #b2701e;
.lion {
top: 230px;
left: 240px;
//head outline
width: 70px;
height: 70px;
background-color: $lionBodyColor;
border-radius: 50% / 45% 45% 35% 35%;
box-shadow:
//mane
-13px -29px 0 -15px $lionManeColor,
-29px -8px 0 -15px $lionManeColor,
-23px 19px 0 -15px $lionManeColor,
0px 30px 0 -15px $lionManeColor,
23px 18px 0 -15px $lionManeColor,
27px -8px 0 -15px $lionManeColor,
13px -27px 0 -15px $lionManeColor,
//legs
-17px 84px 0 -22px $lionBodyColor,
17px 84px 0 -22px $lionBodyColor,
//body section
0 54px $lionBodyColor;
&:before {
//paws
left: -14px;
top: 72px;
width: 25px;
height: 25px;
background-color: $lionBodyColor;
border-radius: 50% / 40%;
box-shadow: -1px 0 $lionManeColor,
//right paw
72px 0 $lionBodyColor,
73px 0 $lionManeColor;
}
&:after {
//tail
top: 75px;
right: -20px;
z-index: -1;
width: 40px;
height: 40px;
border-radius: 50%;
border-bottom: 5px solid $lionBodyColor;
border-left: 0;
border-right: 0;
box-shadow:
16px 3px 0 -13px $lionManeColor,
17px 3px 0 -13px #f1f1f1,
19px 5px 0 -13px $lionManeColor;
}
.face {
top: 36px;
left: 32px;
width: 6px;
height: 7px;
background-color: #000;
border-radius: 50%;
box-shadow:
//nose
-3px 0 #000,
3px 0 #000,
0 2px #000,
//eyes
-10px -14px #000,
10px -14px #000;
// Mouth
&:before,
&:after {
top: 0;
left: -16px;
width: 16px;
height: 20px;
border-radius: 50% / 40%;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid transparent;
border-top: 2px solid transparent;
box-shadow: 0px 0px #000;
}
&:after {
left: 2px;
transform: rotateY(180deg);
}
}
}
//elephant
$elephantBodyColor: #b2ada6;
$elephantWrinkleColor: #78736d;
.elephant {
top: 230px;
left: 410px;
//head outline
width: 70px;
height: 70px;
background-color: $elephantBodyColor;
border-radius: 50%/ 45% 45% 35% 35%;
box-shadow:
//legs
-17px 84px 0 -22px $elephantBodyColor,
17px 84px 0 -22px $elephantBodyColor,
-17px 85px 0 -22px $elephantWrinkleColor,
17px 85px 0 -22px $elephantWrinkleColor,
//body section
0 54px 0 0 $elephantBodyColor;
&:before {
//paws
left: -10px;
top: 62px;
z-index: 5;
width: 25px;
height: 25px;
background-color: $elephantBodyColor;
border-radius: 50% / 40%;
box-shadow: -1px 0 $elephantWrinkleColor,
//right paw
65px 0 $elephantBodyColor,
66px 0 $elephantWrinkleColor,
//mouth
32px -22px 0 -3px $elephantBodyColor,
36px -18px 0 -5px #000;
}
&:after {
//trunk
top: 34px;
left: 18px;
z-index: 6;
width: 16px;
height: 36px;
//border-radius: 20% 50% 30% 10% / 50% 50% 50% 50%;
border: 2px solid $elephantWrinkleColor;
border-top: 0;
border-radius: 30% 20% 30% 60% / 50% 50% 80% 10%;
background-color: $elephantBodyColor;
transform: rotate(25deg);
animation: trunk 6s infinite linear;
}
.face {
top: 6px;
left: -17px;
//ears
width: 45px;
height: 52px;
border-radius: 90% 90% 50% 50% / 80% 80% 30% 30%;
background-color: $elephantBodyColor;
box-shadow:
-1px -1px $elephantWrinkleColor,
61px 0 $elephantBodyColor,
62px -1px $elephantWrinkleColor;
&:after {
//eyes
top: 20px;
left: 38px;
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
box-shadow: 20px 0 #000;
}
&:before {
//tail
top: 65px;
right: -63px;
z-index: -1;
width: 40px;
height: 40px;
border-radius: 50%;
border-bottom: 5px solid $elephantBodyColor;
border-left: 0;
border-right: 0;
box-shadow:
16px 3px 0 -13px $elephantWrinkleColor,
17px 3px 0 -13px #f1f1f1,
19px 5px 0 -13px $elephantWrinkleColor;
}
}
}
@keyframes trunk {
0% {
box-shadow: 0px 0 10px -6px transparent,
0px 0 10px -6px transparent;
left: 18px;
transform: rotate(25deg);
}
7.5% {
box-shadow: 0px 0 10px -6px transparent,
0px 25px 10px -6px #2a48db;
left: 14px;
transform: rotate(40deg);
}
15% {
box-shadow: 0px 25px 10px -6px #2a48db,
0px 45px 10px -6px #2a48db;
left: 8px;
transform: rotate(55deg);
}
22.5% {
box-shadow: -10px 50px 10px -6px transparent,
-10px 70px 10px -6px #2a48db;
left: 14px;
transform: rotate(40deg);
}
30% {
box-shadow: 0px 50px 10px -6px transparent,
-20px 95px 10px -6px transparent;
left: 18px;
transform: rotate(25deg);
}
}
// monkey
$monkeyBodyColor: #694a16;
$monkeyPatchesColor: #d0ba96;
$monkeyEyeColor: #2f1f05;
.monkey {
top: 245px;
left: 760px;
width: 62px;
height: 67px;
border-radius: 50% / 45% 45% 55% 55%;
background-color: $monkeyBodyColor;
box-shadow:
//body section and patch
0 48px 0 -15px $monkeyPatchesColor,
0 48px 0 -6px $monkeyBodyColor,
//ears
-30px -3px 0 -24px $monkeyPatchesColor,
29px -3px 0 -24px $monkeyPatchesColor,
-29px -3px 0 -18px $monkeyBodyColor,
29px -3px 0 -18px $monkeyBodyColor,
//legs
-10px 76px 0 -23px $monkeyBodyColor,
10px 76px 0 -23px $monkeyBodyColor
;
&:before {
display: none;
//paws
left: -16px;
top: 56px;
width: 30px;
height: 15px;
background-color: $monkeyBodyColor;
border-radius: 50% / 40%;
box-shadow:
-1px 0 $monkeyPatchesColor,
//right paw
72px 0 $monkeyBodyColor,
73px 0 $monkeyPatchesColor;
}
.face {
//Background nose spot
top: 29px;
left: 8px;
width: 46px;
height: 31px;
background-color: $monkeyPatchesColor;
border: 0;
border-radius: 48%;
box-shadow:
//feet
17px 77px 0 -11px $monkeyPatchesColor,
-16px 77px 0 -11px $monkeyPatchesColor,
//arms
-26px 21px 0 -9px $monkeyBodyColor,
26px 21px 0 -9px $monkeyBodyColor
;
&:before {
// Eyes and nose
top: 6px;
left: 17px;
z-index: 5;
width: 4px;
height: 4px;
background-color: $monkeyEyeColor;
border-radius: 50%;
box-shadow:
7px 0 $monkeyEyeColor,
// -1px 0 $monkeyEyeColor,
// 1px 0 $monkeyEyeColor,
// 0 1px $monkeyEyeColor,
//fingers
-36px 25px 0 1px $monkeyPatchesColor,
-37px 25px 0 1px $monkeyBodyColor,
-36px 29px 0 1px $monkeyPatchesColor,
-37px 29px 0 2px $monkeyBodyColor,
43px 25px 0 1px $monkeyPatchesColor,
44px 25px 0 1px $monkeyBodyColor,
43px 29px 0 1px $monkeyPatchesColor,
44px 29px 0 2px $monkeyBodyColor,
//eyes
-5px -12px 0 1px $monkeyEyeColor,
-6px -12px 0 7px $monkeyPatchesColor,
13px -12px 0 1px $monkeyEyeColor,
14px -12px 0 7px $monkeyPatchesColor;
}
&:after {
//mouth
left: 12px;
top: 10px;
width: 22px;
height: 12px;
border-bottom: 3px solid #000;
border-radius: 50%;
}
}
}
// penguin
//
$penguinBodyColor: #1f173a;
$penguinPatchesColor: #fff;
$penguinFlipperColor: #f9761c;
.penguin {
top: 240px;
left: 600px;
width: 55px;
height: 55px;
background-color: $penguinBodyColor;
border-radius: 50% / 75% 75% 35% 35%;
box-shadow:
//body section and patch
0 50px 0 -6px $penguinPatchesColor,
0 55px 0 -5px $penguinPatchesColor,
0 62px 0 -5px $penguinPatchesColor,
0 50px 0 2px $penguinBodyColor,
0 55px 0 4px $penguinBodyColor,
0 62px 0 5px $penguinBodyColor,
//flippers
//left
-8px 55px 0 -3px $penguinPatchesColor,
-13px 51px 0 -2px $penguinBodyColor,
//right
8px 55px 0 -3px $penguinPatchesColor,
13px 51px 0 -2px $penguinBodyColor,
//legs
-15px 85px 0 -14px $penguinFlipperColor,
15px 85px 0 -14px $penguinFlipperColor;
&:after {
//face background
top: 12px;
left: 8px;
width: 25px;
height: 34px;
background-color: #fff;
border-radius: 50%;
box-shadow:
15px 0 #fff,
7px 13px #fff,
16px 6px #fff,
-2px 6px #fff
;
}
.face {
// Nose
top: 34px;
left: 17px;
width: 0;
height: 0;
z-index: 5;
//background-color: $penguinFlipperColor;
border-top: 9px solid $penguinFlipperColor;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-radius: 50%;
&:before {
// Eyes
top: -20px;
left: -8px;
z-index: 5;
width: 6px;
height: 8px;
background-color: #000;
border-radius: 50%;
box-shadow:
10px 0 #000;
}
}
}
.footerLink {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 10px 5px;
font-size: 12px;
color: #fff;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px 0 0 0;
text-decoration: none;
transition: 300ms;
opacity: 0.3;
&:hover {
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment