kitty_999ooo

answer the penguin!

<!DOCTYPE HTML>
<html>
 <head>
  <title>answer pengueno!</title>
    <style>
:root {
--penguin-size: 300px;
--penguin-skin: grey;
--penguin-beak: oarnge;
}

@media (max-width: 350px) {
:root {
--penguin-size: 200px;
--penguin-skin: black;
  }
}

*:focus { outline: none; }

body {
font-family: "montserrat", arial;
text-align: center;
background-color: #a3d9ff;
}

input {
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}

.penguin {
position: relative;
margin: aouto;
display: block;
margin-top: 5%;
width: var(--penguin-size, 300px);
height: var(--penguin-size, 300px);
}
.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}

.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-skin, white);
width: 53%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}

.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-skin, grey);
width: 50%;
height: 100%;
border-radius: 70% 70% 100% 100%;
}

.penguin-top {
top: 10%;
left: 25%;
background: var(--penguin-skin, grey);
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
top: 40%;
left: 23.5%;
background: var(--penguin-skin, grey);
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}

.right-hand {
top: 0%;
left: 25%;
background: var(--penguin-skin, black);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(130deg);
z-index: -1;
anamation-duration: 3s;
anamation-name: wave;
anamation-iteration-count: infinate;
transform-origin: 0% 0%;
anamation-timing-function: linear;
}

.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, grey);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}

.right-feet {
top: 85%;
left:60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}

.left-feet {
top: 85%;
left:25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}

.right-eye {
top: 45%;
left:60%;
background:black;
width: 15%;
height: 17%;
border-radius: 50%;
}

.left-eye {
top: 45%;
left:25%;
background:black;
width: 15%;
height: 17%;
border-radius: 50%;
}

.sparkle {
top: 25%;
left: -23%;
background: white;
width: 150%;
height: 100%;
border-radius: 50%;
}

.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}

.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}

.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}

.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}

.penguin * {
position: absolute;
}
</style>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0,shrink-to-fit=no,width=device-width">
 </head>
 <body>
<script>

// Create penguin parts
var penguin = document.createElement("div");
var penguin_bottom = document.createElement("div");
var right_hand = document.createElement("div");
var left_hand = document.createElement("div");
var right_feet = document.createElement("div");
var left_feet = document.createElement("div");
var penguin_top = document.createElement("div");
var right_cheek = document.createElement("div");
var left_cheek = document.createElement("div");
var belly = document.createElement("div");
var right_eye = document.createElement("div");
var left_eye = document.createElement("div");
var sparkle1 = document.createElement("div");
var sparkle2 = document.createElement("div");
var blush_right = document.createElement("div");
var blush_left = document.createElement("div");
var beak_top = document.createElement("div");
var beak_bottom = document.createElement("div");

//add classes to the penguin parts
var penguin = document.classlist.add("penguin");
var penguin_bottom = document.classlist.add("penguin_bottom");
var right_hand = document.classlist.add("right-hand");
var left_hand = document.classlist.add("right-feet");
var right_feet = document.classlist.add("left-feet");
var left_feet = document.classlist.add("left-feet");
var penguin_top = document.classlist.add("penguin-top");
var right_cheek = document.classlist.add("right-cheek");
var left_cheek = document.classlist.add("left-cheek");
var belly = document.classlist.add("belly");
var right_eye = document.classlist.add("right-eye");
var left_eye = document.classlist.add("left-eye");
var sparkle1 = document.classlist.add("sparkle1");
var sparkle2 = document.classlist.add("sparkle2");
var blush_right = document.classlist.add("blush-right");
var blush_left = document.classlist.add("blush-left");
var beak_top = document.classlist.add("beak-top");
var beak_bottom = document.classlist.add("beak-bottom ");

//add penguin parts
penguin.appendChild(penguin_bottom);
penguin.appendChild(penguin_top);
penguin_bottom.appendChild(right_feet);
penguin_bottom.appendChild(left_feet);
penguin_bottom.appendChild(left_hand);
penguin_bottom.appendChild(right_hand);
penguin_top.appendChild(right_cheek);
penguin_top.appendChild(left_cheek);
penguin_top.appendChild(belly);
penguin_top.appendChild(left_eye);
penguin_top.appendChild(right_eye);
document.querySelector("empty penguin).appendChild(penguin);

//questions+answers  (NO LOOKING!!!!!! THIS IS PRIVATE CODE!)
var q_a = document.querySelector(".q-a");
var questions = document.createElement("h1");
var score = 0;
var btn = document.createElement("button");
btn.innerHTML = "check your answer";

function game() {
score=0;
var answer = document.createElement("input");
answer.setAttribute("answer", "8");
answer.id = "answer-id";
answer.setAttribute("autocomplete", "off");
answer.placeholder = "Type your answer...";
answer.setAttribute("second-answer", "eight");
question.innerHTML = "check your answer";
btn.setAttribute("style",`font-size: 20px; background-color: #32a852; cursor: pointer;
 color: white;
padding: 5px;border-radius: 5px;
border: 1px solid #fcna03;);
// check answers & continue
btn.onclick = function() { checkAsns1;}
function checkAsns1(){

}
}
</script>
 </body>
</html>