Baby bear
How do I make an baby bear?
What is a baby bear? How do you make a baby bear? This script and codes were developed by Nummo on 18 December 2022, Sunday.
Baby bear - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>baby bear</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <!-- Begin Image --> <!-- Invisible Box--> <div class="box"> <!-- Circular Head--> <div class="head"> <!-- Circular Head Copy --> <div class="head-copy"></div> <!-- Left Ear ~ Light brown--> <div class="ear-left"> <!-- Inner ear ~ off white --> <div class="inner-ear"></div> </div> <!-- Right Ear ~ Light brown--> <div class="ear-right"> <!-- Inner Ear ~ off white--> <div class="inner-ear"></div> </div> <!-- Left Outer Eye ~ White --> <div class="eye-left"> <!-- Pupil ~ red-brown --> <div class="pupil"> </div> </div> <!-- Right Outer Eye ~ White --> <div class="eye-right"> <!-- Pupil ~ red-brown --> <div class="pupil"> </div> </div> <!-- Nose ~ Brown --> <div class="nose"> </div> <!-- Mouth pink --> <div class="mouth"> </div> <!-- End Head --> </div> <!-- End Invisible Box --> </div>
</body>
</body>
</html>
Baby bear - Script Codes CSS Codes
body{ background: #e89c10;
}
.box { position: relative; margin: auto; margin-top: 15%; width: 600px; height: 600px; background:none;
}
.head { position: absolute; /*margin: auto; */ top:16.5%; left: 25%; width: 50%; height: 57%; background: #8e8470; border-radius: 50%;
}
.head-copy { position: absolute; /*margin: auto; top:16.5%; left: 25%;*/ width: 100%; height: 100%; position: absoulte; background: #8e8470; border-radius: 50%; z-index: 2;
}
.ear-left { position: absolute; width: 40%; height: 35%; left: -10%; top: 5%; background: #8e8470; border-radius:50%; z-index: 1;
}
.ear-right { position: absolute; width: 40%; height: 35%; right: -10%; top: 5%; background: #8e8470; border-radius:50%; z-index: 1;
}
.inner-ear { position: absolute; width: 80%; height: 80%; left: 10%; top: 10%; background: #fcf5e8; border-radius:50%;
}
.eye-left{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; left: 21%; border-radius: 50%; z-index: 3;
}
.eye-right{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; right: 21%; border-radius: 50%; z-index: 3;
}
.pupil{ position: absolute; width: 30%; height: 35%; top: 35%; left: 36%; border-radius: 50%; background: brown;
}
.nose{ position: absolute; background: #BE845F; width: 20%; height: 20%; left: 37%; top: 45%; border-radius: 50px; z-index: 4;
}
.mouth { position: absolute; background: pink; width: 17%; height: 10%; left: 40%; top: 70%; border-radius: 50px; z-index: 4;
}
Developer | Nummo |
Username | nen |
Uploaded | December 18, 2022 |
Rating | 3 |
Size | 1,964 Kb |
Views | 6,072 |
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!
Name | Size |
Taco | 1,676 Kb |
Moving bubbles 2 | 2,121 Kb |
Personal Portfolio Webpage - Nummo | 2,713 Kb |
Tribute Page - Flora Nwapa | 2,862 Kb |
Pen jar | 1,139 Kb |
Elephant | 2,145 Kb |
Tiger | 2,188 Kb |
Ruler | 2,012 Kb |
Moving pulse bubble | 2,288 Kb |
Moving bubbles | 1,833 Kb |
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!
Name | Username | Size |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Sinclair Research Computers | MattCowley | 3,068 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
Lecture 1 | Law | 0 Kb |
Layout 11 | Altynai | 1,690 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!