Creating a teddy bear using CSS | HTML & CSS

 Hello, learner In this article, we are going to create a teddy bear using CSS. In the earlier past post, we have created Creating a Flower using CSS | HTML & CSS Now it is time to create a teddy bear.


In this program, we create a teddy bear using HTML and CSS. As you see in the above image it is the output of the below code. In the HTML section we have to create a div head inside head we have to create a div eye, div mouth, div eye. and div ear after that we have to create div body inside that we have to create div stomach, div legs, and div hand. Now in the CSS section, we have to eyes design ears design, and all others.

Creating a teddy bear using CSS [Source code]

To create a Creating a teddy bear using CSS you have to create two HTML and CSS files named index.html and style.css in the same folder and you have to link the CSS file to HTML. after that paste the HTML code in index.html and paste the CSS code in style.css that’s all after pasting the code. 

At first, you have to create an HTML file named index.html and paste the below code on it and save it. Remember to give a .html extension to the HTML file.


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="Stylesheet" href="style.css">

    <title>Flower</title>

</head>

<body>

<div class="teddy">

  <div class="head">

    <div class="ear1">

      <div class="ear-m1"></div>

    </div>

    <div class="ear2">

      <div class="ear-m2"></div>

    </div>

    <div class="eye1">

      <div class="w"></div>

    </div>

    <div class="eye2">

      <div class="w"></div>

    </div>

    <div class="mouth-nose">

      <div class="nose"></div>

      <div class="mouth"> </div>

    </div>

  </div>

  <div class="body">

    <div class="stomach"></div>

    <div class="hand1">

      <div class="h"></div>

    </div>

    <div class="hand2">

      <div class="h"></div>

    </div>

    <div class="leg1">

      <div class="l"></div>

    </div>

    <div class="leg2">

      <div class="l"></div>

    </div>

  </div>

</div>

</body>

</html>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

.teddy {

  margin-top: 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  filter: drop-shadow(5px 10px 15px #8338068a);

}


.head {

  position: relative;

  width: 85px;

  height: 80px;

  background-color: #9e5418;

  border-radius: 50px;

  margin-bottom: -8px;

}


.ear1 {

  position: absolute;

  top: -5px;

  left: -5px;

  background-color: #9e5418;

  width: 40px;

  height: 40px;

  border-radius: 50%;

}


.ear2 {

  position: absolute;

  top: -5px;

  right: -5px;

  background-color: #9e5418;

  width: 40px;

  height: 40px;

  border-radius: 50%;

}


.ear-m1 {

  background-color: #ffbe88;

  width: 22px;

  border-radius: 11px 11px 0 0;

  height: 11px;

  margin-top: 8px;

  margin-left: 4px;

  transform: rotate(-40deg);

  box-shadow: inset 6px -1px 10px 0px #9e5418be;

}


.ear-m2 {

  background-color: #ffbe88;

  width: 22px;

  border-radius: 11px 11px 0 0;

  height: 11px;

  margin-top: 8px;

  margin-left: 14px;

  transform: rotate(40deg);

  box-shadow: inset 6px -1px 10px 0px #9e5418be;

}


.eye1 {

  position: absolute;

  top: 20px;

  left: 18px;

  background-color: rgb(0, 0, 0);

  width: 16px;

  height: 16px;

  border-radius: 50%;

}


.eye2 {

  position: absolute;

  top: 20px;

  right: 18px;

  background-color: rgb(0, 0, 0);

  width: 16px;

  height: 16px;

  border-radius: 50%;

}


.w {

  background-color: rgb(255, 255, 255);

  width: 6px;

  height: 6px;

  margin: 4px;

  border-radius: 50%;

}


.mouth-nose {

  position: absolute;

  bottom: 8px;

  right: 25px;

  width: 33px;

  height: 33px;

  border-radius: 50%;

  background-color: rgb(255, 255, 255);

  filter: drop-shadow(0 0 2px #000000af);

}


.nose {

  background-color: #3f1d00;

  width: 16px;

  margin: 3px 0 0 8px;

  height: 16px;

  border-radius: 50%;

}


.mouth {

  width: 12px;

  margin: auto;

  height: 6px;

  border-bottom: 2px #3f1d00 solid;

  border-radius: 50%;

}


.body {

  position: relative;

  background: #9e5418;

  width: 100px;

  height: 125px;

  border-radius: 45%;

}


.stomach {

  background: #eacdbb;

  width: 56px;

  height: 85px;

  margin: 22px;

  border-radius: 45%;

  box-shadow: inset 2px -2px 10px 0px #9e5418be;

}


.hand1 {

  position: absolute;

  left: -40px;

  top: 12px;

  background-color: #9e5418;

  width: 65px;

  height: 30px;

  border-radius: 20px 0 0 20px;

  transform: rotate(-12deg);

  transform-origin: bottom right;

}


.hand2 {

  position: absolute;

  right: -40px;

  top: 12px;

  background-color: #9e5418;

  width: 65px;

  height: 30px;

  border-radius: 0 20px 20px 0;

  transform: rotate(-20deg);

  transform-origin: top left;

  animation: hi 1s linear infinite;

}


@keyframes hi {

  0% {

    transform: rotate(-15deg);

  }

  50% {

    transform: rotate(-40deg);

  }

  100% {

    transform: rotate(-15deg);

  }

}


.hand1 .h {

  background: #eacdbb;

  width: 20px;

  height: 20px;

  margin: 5px;

  border-radius: 50%;

  box-shadow: inset 6px -1px 10px 0px #9e5418be;

}


.hand2 .h {

  background: #eacdbb;

  width: 20px;

  height: 20px;

  margin: 5px;

  margin-left: 40px;

  border-radius: 50%;

  box-shadow: inset 6px -1px 10px 0px #9e5418be;

}


.leg1 {

  position: absolute;

  left: -30px;

  bottom: 6px;

  background-color: #9e5418;

  width: 55px;

  height: 35px;

  border-radius: 20px 0 0 20px;

  transform: rotate(-30deg);

  transform-origin: bottom right;

}


.leg2 {

  position: absolute;

  right: -30px;

  bottom: 6px;

  background-color: #9e5418;

  width: 55px;

  height: 35px;

  border-radius: 0 20px 20px 0;

  transform: rotate(30deg);

  transform-origin: bottom left;

}


.leg1 .l {

  background: #eacdbb;

  width: 25px;

  height: 25px;

  margin: 5px;

  border-radius: 50%;

  box-shadow: inset 6px -1px 10px 0px #9e5418be;

}


.leg2 .l {

  background: #eacdbb;

  width: 25px;

  height: 25px;

  margin: 5px;

  margin-left: 25px;

  border-radius: 50%;

  box-shadow: inset 6px -1px 10px 0px #9e5418be;

That’s all after after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

 

Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.