Panda Bear Cub #dailycssimages

Developer
Veronika
Size
2,318 Kb
Views
14,168
  1. Panda Bear Cub #dailycssimages Previews
  2. Panda Bear Cub #dailycssimages HTML Codes
  3. Panda Bear Cub #dailycssimages CSS Codes

How do I make an panda bear cub #dailycssimages?

My bear cub css image for day 1 of the Daily CSS Images Challenge. What is a panda bear cub #dailycssimages? How do you make a panda bear cub #dailycssimages? This script and codes were developed by Veronika on 30 November 2022, Wednesday.

Panda Bear Cub #dailycssimages Previews
IQ Test

Panda Bear Cub #dailycssimages - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Panda Bear Cub #dailycssimages</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="head"> <div class="ear ear-left"> <div class="inner-ear"></div> </div> <div class="ear ear-right"> <div class="inner-ear"></div> </div> <div class="face"> <div class="eye-wrapper eye-wrapper-left"> <div class="eye eye-left"> <div class="pupile"> </div> </div> </div> <div class="eye-wrapper eye-wrapper-right"> <div class="eye eye-right"> <div class="pupile"></div> </div> </div> <div class="nose"></div> </div> </div> <div class="body"> <div class="body-copy"></div> <div class="arm arm-left"></div> <div class="arm arm-right"></div> <div class="leg leg-right"></div> <div class="foot foot-right"></div> <div class="leg leg-left"></div> <div class="foot foot-left"></div> </div>
</div>
</body>
</html>

Panda Bear Cub #dailycssimages - Script Codes CSS Codes

body { background-color: rgb(101, 210, 205);
}
.container { position: relative; margin: 0 auto; width: 500px; height: 500px;
}
.head { position: absolute; top: 15%; left: 30%; height: 25%; width: 30%; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); z-index: 3;
}
.face { position: absolute; border: 6px solid rgb(58, 58, 58); height: 100%; width: 100%; border-radius: 50%; background-color: #fff;
}
.ear { position: absolute; height: 30%; width: 30%; border-radius: 45%; background-color: rgb(58, 58, 58);
}
.ear-left { left: 0; -webkit-transform: rotate(-40deg); transform: rotate(-40deg);
}
.ear-right { left: 80%; -webkit-transform: rotate(40deg); transform: rotate(40deg);
}
.inner-ear { position: absolute; height: 70%; width: 55%; background-color: rgb(244, 177, 195); border-radius: 50%; top: 25%; left: 24%;
}
.eye-wrapper { position: absolute; top: 20%; height: 45%; width: 37%; background-color: rgb(58, 58, 58); border-radius: 50%;
}
.eye-wrapper-left { -webkit-transform: rotate(20deg); transform: rotate(20deg); left: 5%;
}
.eye-wrapper-right { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); left: 60%;
}
.eye { position: absolute; top: 22%; height: 55%; width: 70%; border-radius: 50%; background-color: rgb(245, 218, 25);
}
.eye-left { left: 20%;
}
.eye-right { -webkit-transform: rotate(40deg); transform: rotate(40deg); left: 18%;
}
.pupile { position: absolute; height: 70%; width: 70%; border-radius: 50%; left: 15%; top: 10%; background-color: rgb(58, 58, 58);
}
.pupile::before { position: absolute; content: ''; left: 25%; top: 0; display: block; width: 40%; height: 45%; background-color: white; border-radius: 50%;
}
.pupile::after { position: absolute; content: ''; left: 25%; top: 90%; display: block; width: 20%; height: 30%; background-color: white; border-radius: 50%;
}
.nose { position: absolute; top: 55%; left: 45%; height: 10%; width: 15%; background-color: rgb(58, 58, 58); border-radius: 50%;
}
.nose::before { position: absolute; top: 90%; left: 45%; content: ''; height: 100%; width: 4px; border-radius: 30%; background-color: rgb(58, 58, 58);
}
.body { position: absolute; top: 31%; left: 28%; height: 35%; width: 35%;
}
.body-copy { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; border: 5px solid rgb(58, 58, 58); border-radius: 50%; z-index: 2;
}
.arm { position: absolute; height: 86%; width: 30%; background-color: rgb(58, 58, 58); border-radius: 48%;
}
.arm-left { top: 17%; left: 77%; -webkit-transform: rotate(-13deg); transform: rotate(-13deg); z-index: 2;
}
.arm-right { top: 10%; left: -10%; -webkit-transform: rotate(35deg); transform: rotate(35deg); z-index: 1;
}
.leg { position: absolute; height: 65%; width: 35%; background-color: rgb(58, 58, 58); border-radius: 40%;
}
.leg-left { top: 60%; left: 43%; -webkit-transform: rotate(78deg); transform: rotate(78deg); z-index: 3;
}
.leg-right { top: 50%; left: -5%; -webkit-transform: rotate(80deg); transform: rotate(80deg); z-index: 1;
}
.foot { position: absolute; height: 50%; width: 30%; background-color: rgb(58, 58, 58); border-radius: 45%; z-index: 4;
}
.foot-right { top: 62%; left: 26%; -webkit-transform: rotate(-5deg); transform: rotate(-5deg);
}
.foot-left { top: 52%; left: -22%; -webkit-transform: rotate(-5deg); transform: rotate(-5deg);
}
.foot::after { position: absolute; content: ''; height: 70%; width: 60%; border-radius: 50%; left: 10%; top: 18%; background-color: rgb(244, 177, 195);
}
.foot-left::after { height: 70%; width: 40%; left: 7%; top: 18%;
}
Panda Bear Cub #dailycssimages - Script Codes
Panda Bear Cub #dailycssimages - Script Codes
Home Page Home
Developer Veronika
Username ivhed
Uploaded November 30, 2022
Rating 3
Size 2,318 Kb
Views 14,168
Do you need developer help for Panda Bear Cub #dailycssimages?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Veronika (ivhed) Script Codes
Name
Background blend mode
CSS Course - Build-a-Kitty Workshop
FreeCodeCamp - Javascript Calculator
FreeCodeCamp - Local Weather
CSS Course - Fluid layout
FreeCodeCamp - Twitch.tv
Space Game Button
FreeCodeCamp - Markdown Previewer
CSS Filter Blur
FreeCodeCamp - Wikipedia Viewer
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!