Creating a cute Puppy Dog 🐶 using HTML & CSS | Amazing Css Trick

HT Technical September 10, 2023

Creating a cute Puppy Dog 🐶 using HTML & CSS | Amazing Css Trick



       	
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Dog</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main>
<div class="dog">

    <div class="y-1"></div>
    <div class="y-2"></div>

    <div class="eye-1">
      <div class="m"></div>
    </div>

    <div class="eye-2">
      <div class="m"></div>
    </div>

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

    <div class="m-1"></div>
    <div class="m-2"></div>

    <div class="face"></div>

    <div class="body"></div>

    <div class="leg-1">
      <span>JJJ</span>
    </div>
    <div class="leg-2">
      <span>JJJ</span>
    </div>

    <div class="tail"></div>

  </div>
</main>
</body>
</html>



       	
*{
   margin: 0;
   padding: 0;
   
}
main{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100vh;
}
.dog {
  width: 250px;
  height: 250px;
  position: relative;
  margin: auto;
}

.body {
  position: absolute;
  left: 30px;
  bottom: 25px;
  z-index: 2;

  width: 190px;
  height: 170px;
  background: radial-gradient(circle, #a43707, #b4430b, #c45010, #d35d14, #e36a18);
  border-radius: 50%;
}

.face {
  position: absolute;
  left: 40px;
  bottom: 60px;
  z-index: 3;
  width: 170px;
  height: 140px;
  background: radial-gradient(circle, #a43707, #b4430b, #c45010, #d35d14, #e36a18);
  border-radius: 50%;

  filter: drop-shadow(0 15px 10px #7d2f08);
}

.leg-1,
.leg-2 {
  position: absolute;
  bottom: 0px;
  z-index: 1;
  width: 40px;
  height: 60px;
  background: radial-gradient(circle, #a43707, #b4430b, #c45010, #d35d14, #e36a18);
  border-radius: 12px;

  font-family: sans-serif;
  line-height: 0.6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #4b1a01;
}

.leg-1 {
  left: 60px;
}

.leg-2 {
  right: 60px;
}

.eye-1,
.eye-2 {
  position: absolute;
  top: 90px;
  z-index: 4;

  width: 30px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 50%;
}

.eye-1 {
  left: 80px;
}
.eye-2 {
  right: 80px;
}

.m {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  margin: 8px;
}
.nose {
  position: absolute;
  top: 130px;
  left: 110px;
  z-index: 5;
  width: 30px;
  height: 25px;
  background-color: #000;
  border-radius: 50%;
}

.m-1,
.m-2 {
  position: absolute;
  top: 140px;
  z-index: 4;
  width: 28px;
  height: 28px;
  background: #e4742f;
  border-radius: 50%;
}

.m-1 {
  left: 122px;
}
.m-2 {
  right: 122px; 

}

.y-1,
.y-2 {
  position: absolute;
  top: 40px;
  z-index: 5;
  width: 35px;
  height: 100px;
  background: radial-gradient(circle, #a43707, #b4430b, #c45010, #d35d14, #e36a18);
  filter: drop-shadow(0 10px 10px #923100);
}

.y-1 {
  left: 40px;
  border-radius: 80px 0 80px 0;
  transform: rotate(25deg);
}
.y-2 {
  right: 40px;
  border-radius: 0 80px 0 80px;
  transform: rotate(-25deg);
}

.tail {
  position: absolute;
  left: 115px;
  top: 15px;
  z-index: 0;
  transform: rotate(20deg);
  width: 30px;
  height: 70px;
  border-left: 20px solid #d36019;
  border-radius: 50%;
  animation: anim 1s linear infinite;
  transform-origin: bottom left;
}

@keyframes anim {
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

Post a Comment

0 Comments