After completing the lesson (CSS Transforms by Building a Penguin), I tried to recreate the project on my own. I wasn’t able to center the penguin in such a way that even if I decrease the viewport width the penguin would have stayed in the centre because I reset margin every time I work with CSS.
So, in the end I created a special div just for centering the penguin (div’s class name is ‘for-centering’). It gave me the result that I wanted but now I am wondering whether it is a correct way of doing so. Like is it allowed to center things like this? Especially considering accessibility and stuff. Or even in general is it good practise to create a div only for centering something? Please let me know!
Here’s the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Flappy Penguin</title>
</head>
<body>
<!-- <div class="sky"></div> -->
<div class="mountain front"></div>
<div class="mountain back"></div>
<div class="sun"></div>
<div class="for-centering">
<div class="penguin">
<div class="penguin-head">
<div class="face left"></div>
<div class="face right"></div>
<div class="chin"></div>
<div class="eye left">
<div class="eye-lid"></div>
</div>
<div class="eye right">
<div class="eye-lid"></div>
</div>
<div class="lip upper"></div>
<div class="lip lower"></div>
<div class="blush left"></div>
<div class="blush right"></div>
</div>
<div class="penguin-body">
<div class="neck"></div>
<div class="shirt">I 💜<br>CSS</div>
<div class="arm left"></div>
<div class="arm right"></div>
<div class="foot left"></div>
<div class="foot right"></div>
</div>
</div>
</div>
<div class="ground"></div>
</body>
</html>
Here’s the CSS:
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* SKY */
body {
width: 100vw;
height: 100vh;
background: linear-gradient(45deg, rgb(130, 207, 238), white);
/* z-index: -1; */
overflow: hidden;
}
/* GROUND */
.ground {
width: 100%;
height: 50%;
background: linear-gradient(90deg, rgb(88, 175, 235), rgb(181, 251, 252));
/* background-color: red; */
position: absolute;
bottom: 0;
}
/* SUN */
.sun {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: rgb(253, 247, 49);
position: absolute;
top: -75px;
right: -75px;
}
/* MOUNTAINS */
.mountain {
width: 400px;
height: 400px;
position: absolute;
}
.mountain.front {
top: 60px;
left: -200px;
transform: skew(45deg);
background: linear-gradient(90deg, rgb(87, 187, 251), rgb(201, 240, 229));
}
.mountain.back {
top: 380px;
left: 50px;
transform: skew(-45deg, 45deg);
background: linear-gradient(0deg, rgb(87, 187, 251) 60%, rgb(201, 240, 229));
z-index: -1;
}
/* PENGUIN */
.for-centering {
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
}
.penguin {
width: 300px;
height: 300px;
position: absolute;
z-index: 1;
transition: 1s ease-in-out;
}
.penguin * {
position: absolute;
}
/* PENGUIN HEAD */
.penguin-head {
width: 50%;
height: 50%;
/* border-radius: 50%; */
border-radius: 100% 100% 90% 90%;
background: linear-gradient(45deg, rgb(114, 113, 113) , rgb(226, 225, 225));
top: 10%;
left: 25%;
z-index: 1;
}
.face {
width: 60%;
height: 70%;
border-radius: 70%;
background-color: white;
top: 17%;
}
.face.left {
left: 4%;
}
.face.right {
right: 4%;
}
.chin {
width: 80%;
height: 48%;
background-color: white;
border-radius: 0% 0% 100% 100%;
top: 45%;
left: 10%;
}
.eye {
width: 17%;
height: 17%;
background-color: black;
top: 40%;
border-radius: 50%;
}
.eye.left {
left: 22%;
}
.eye.right {
right: 22%;
}
.eye-lid {
width: 130%;
height: 100%;
background-color: white;
top: 20%;
left: -14%;
border-radius: 50%;
}
.lip {
height: 9%;
background-color: orange;
border-radius: 50%;
}
.lip.upper {
top: 58%;
width: 20%;
left: 40%;
}
.lip.lower {
top: 62%;
left: 42.5%;
width: 15%;
}
.blush {
width: 15%;
height: 9%;
background-color: pink;
top: 65%;
border-radius: 50%;
}
.blush.left {
left: 17%;
transform: rotate(-7deg);
}
.blush.right {
right: 17%;
transform: rotate(7deg);
}
/* PENGUIN BODY */
.penguin-body {
width: 55%;
height: 50%;
border-radius: 80% 80% 100% 100%;
background: linear-gradient(45deg, gray 0%, rgb(237, 237, 237) 25%, white 75%);
top: 50%;
left: 22%;
/* z-index: 0; */
}
.neck {
width: 60%;
height: 60%;
background-color: rgb(160, 160, 160);
border-radius: 0% 0% 100% 100%;
top: -15%;
left: 21%;
}
.shirt {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.5em;
color: rgb(106, 105, 105);
top: 50%;
left: 37%;
}
.foot {
width: 25%;
height: 15%;
background-color: orange;
border-radius: 50%;
bottom: -10%;
z-index: -1;
}
.foot.left {
left: 20%;
transform: rotate(-10deg);
}
.foot.right {
right: 20%;
transform: rotate(10deg);
}
.arm {
width: 60%;
height: 35%;
background: linear-gradient(15deg, rgb(114, 113, 113), rgb(226, 225, 225));
z-index: -1;
border-radius: 30% 10% 10% 100%;
}
.arm.left {
top: 10%;
left: -35%;
transform: rotate(45deg);
transform-origin: 100% 0%;
animation: wave 3s infinite linear;
/* animation-delay: 5s; */
}
.arm.right {
top: 20%;
right: -25%;
transform: scaleX(-1) rotate(-45deg);
}
/* ANIMATION */
@keyframes wave {
0% {
transform: rotate(45deg);
}
10% {
transform: rotate(25deg);
}
20% {
transform: rotate(45deg);
}
30% {
transform: rotate(25deg);
}
40% {
transform: rotate(45deg);
}
}
/* TRANSITION */
.penguin:active {
transform: scale(1.5);
cursor: not-allowed;
}