Here is my NFT smoking cat!!
Guys, can someone tell me how to paste my cat here please? Thanks
HTML
<html lang="en">
<head>
<title>Smoking cat</title>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="cat">
<div class="ears">
<div class="ear left_ear"></div>
<div class="ear right_ear"></div>
<div class="ear innerleft_ear"></div>
<div class="ear innerright_ear"></div>
</div>
<div id="body_face">
<div class="hair"></div>
<div class="hair_strand1"></div>
<div class="hair_strand2"></div>
<div class="hair_starnd3"></div>
<div class="hair_starnd4"></div>
<div class="hair_strand5"></div>
<div class="speech_bubble">
<p>oops! I think i just got caught smoking!! </p>
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
</div>
<div class="eyes">
<div class="eye">
<div class="pupils"></div>
</div>
<div class="eye">
<div class="pupils"></div>
</div>
<div class="nose"></div>
<div class="nose_line"></div>
<div class="whiskers_right1"></div>
<div class="whiskers_right2"></div>
<div class="whiskers_right3"></div>
<div class="whiskers_left1"></div>
<div class="whiskers_left2"></div>
<div class="whiskers_left3"></div>
</div>
<div class="mouth"></div>
<div class="cigar"></div>
<div class="cigar_tip"></div>
<div class="smoke"></div>
<div class="body">
<div class="paw">
<div class="paw_1"></div>
<div class="paw_2"></div>
<div class="paw_3"></div>
<div class="paw_4"></div>
<div class="claw_right_paw1"></div>
<div class="claw_right_paw2"></div>
<div class="claw_right_paw3"></div>
<div class="claw_left_paw1"></div>
<div class="claw_left_paw2"></div>
<div class="claw_left_paw3"></div>
<div class="tail"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
**CSS**
p {
color: yellow;
text-align: center;
}
#body_face {
background-color: rgb(43, 220, 226);
width: 200px;
height: 200px;
border-radius: 50%;
}
.hair {
border-radius: 200% 0% 200% 0%;
background-color: gray;
width: 5px;
height: 30px;
position: absolute;
top: 5px;
left: 137px;
transform: rotate(120deg);
}
.hair_strand1 {
border-radius: 200% 0% 200% 0%;
background-color: gray;
width: 5px;
height: 30px;
position: absolute;
top: 5px;
left: 127px;
transform: rotate(120deg);
}
.hair_strand2 {
border-radius: 200% 0% 200% 0%;
background-color: gray;
width: 5px;
height: 30px;
position: absolute;
top: 5px;
left: 117px;
transform: rotate(120deg);
}
.hair_starnd3 {
border-radius: 200% 0% 200% 0%;
background-color: gray;
width: 5px;
height: 30px;
position: absolute;
top: 5px;
left: 97px;
transform: rotate(230deg);
}
.hair_starnd4 {
border-radius: 200% 0% 200% 0%;
background-color: gray;
width: 5px;
height: 30px;
position: absolute;
top: 5px;
left: 87px;
transform: rotate(230deg);
}
.hair_strand5 {
border-radius: 200% 0% 200% 0%;
background-color: gray;
width: 5px;
height: 30px;
position: absolute;
top: 5px;
left: 77px;
transform: rotate(230deg);
}
/* position: flex = positioned normal */
/* top:30px = 30px from the top */
/* display: flex = in a row form */
.eyes {
position: relative;
top: 30px;
display: flex;
}
/* width and height can be adjusted to any suited shape */
/* position: relative positions elements to it’s normal position. Top, bottom, left, right can now be applied. */
/* margin:25 spaces out the eyes */
.eye {
background-color: white;
border-radius: 50px;
width: 45px;
height:45px;
margin: 25px;
position: relative;
}
/* position absolute = relative to the parent. Adjust using’top’ and ‘left’ */
.pupils {
background-color: black;
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 5px;
left:5px;
}
/*.ears is the container for both of the ears */
.ears {
position: relative;
}
/* position absolute is positioned to it’s nearest ancestor */
.ear {
border-radius: 90% 0% 90% 0%;
background-color: rgb(43, 220, 226);
width: 100px;
height: 100px;
position: absolute;
}
/* transform: scale(1,-1) flips an object */
.left_ear {
transform: scale(1,-1) rotate(0deg);
left: 0;
}
.innerleft_ear {
transform: scale(1,-1) rotate(0deg);
left:0;
border-radius: 100% 0% 100% 0%;
background-color: azure;
width: 50px;
height: 40px;
position:absolute;
}
.right_ear {
left: 100px;
}
.innerright_ear {
left: 150px;
border-radius: 100% 0% 100% 0;
background-color: azure;
width: 50px;
height: 40px;
position: absolute;
}
.nose {
background-color: black;
width: 10px;
height: 10px;
border-radius: 30%;
position: absolute;
top: 80px;
left: 46%;
}
.nose_line {
border-radius: 200% 0% 200% 0%;
background-color: black;
width: 2px;
height: 20px;
position: absolute;
top: 90px;
left: 48%;
transform: rotate(175deg);
}
.whiskers_right1 {
border-radius: 200% 0% 200% 0%;
background-color: rgb(224, 212, 212);
width: 5px;
height: 50px;
position: absolute;
top: 80px;
left: 120px;
transform: rotate(120deg);
}
.whiskers_right2 {
border-radius: 200% 0% 200% 0%;
background-color: rgb(224, 212, 212);
width: 5px;
height: 50px;
position: absolute;
top: 60px;
left: 130px;
transform: rotate(80deg);
}
.whiskers_right3 {
border-radius: 200% 0% 200% 0%;
background-color: rgb(224, 212, 212);
width: 5px;
height: 50px;
position: absolute;
top: 70px;
left: 130px;
transform: rotate(90deg);
}
.whiskers_left1 {
border-radius: 200% 0% 200% 0%;
background-color: rgb(224, 212, 212);
width: 5px;
height: 50px;
position: absolute;
top: 85px;
right: 126px;
transform: scale(1,-1) rotate(-50deg);
}
.whiskers_left2 {
border-radius: 200% 0% 200% 0%;
background-color: rgb(224, 212, 212);
width: 5px;
height: 50px;
position: absolute;
top: 70px;
right: 135px;
transform: scale(1,-1) rotate(-94deg);
}
.whiskers_left3 {
border-radius: 200% 0% 200% 0%;
background-color: rgb(224, 212, 212);
width: 5px;
height: 50px;
position: absolute;
top: 60px;
right: 135px;
transform: scale(1,-1) rotate(-105deg);
}
.mouth {
background-color: gray;
width: 30px;
height: 10px;
border-radius: 30%;
position: absolute;
top: 145px;
left: 90px;
}
.cigar {
border-radius: 200% 0% 200% 0%;
background-color: rgb(18, 27, 1);
width: 10px;
height: 35px;
position: absolute;
top: 148px;
left: 118px;
transform: scale(1,-1) rotate(200deg);
}
.cigar_tip {
border-radius: 205% 0% 200% 0%;
background-color: red;
width: 6px;
height: 5px;
position: absolute;
top: 177px;
left: 129px;
transform: scale(1,-1) rotate(160deg);
}
.speech_bubble {
width: 150px;
height: 75px;
border-radius: 25%;
background-color: black;
position: absolute;
top: 15px;
left: 350px;
}
.bubble1 {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 55px;
right: 270px;
}
.bubble2 {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 40px;
right: 230px;
}
.bubble3 {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 25px;
right: 180px;
}
.body {
width: 400px;
height: 250px;
background-color:rgb(43, 220, 226);
border-radius: 50%;
}
.paw_1 {
width: 50px;
height: 30px;
border-radius: 50%;
background-color: azure;
position: absolute;
top: 277px;
left: 32px;
transform: rotate(40deg);
}
.paw_2 {
width: 50px;
height: 30px;
border-radius: 50%;
background-color: azure;
position: absolute;
top: 305px;
left: 80px;
transform: rotate(25deg);
}
.claw_right_paw1 {
border-radius: 200% 0% 200% 0%;
background-color: black;
width: 5px;
height: 5px;
position: absolute;
top: 315px;
left: 83px;
}
.claw_right_paw2 {
border-radius: 200% 0% 200% 0%;
background-color: black;
width: 5px;
height: 5px;
position: absolute;
top: 324px;
left: 92px;
}
.claw_right_paw3 {
border-radius: 200% 0% 200% 0%;
background-color: black;
width: 5px;
height: 5px;
position: absolute;
top: 330px;
left: 103px;
}
.claw_left_paw1 {
border-radius: 200% 0% 200% 0%;
background-color: black;
width: 5px;
height: 5px;
position: absolute;
top: 287px;
left: 38px;
}
.claw_left_paw2 {
border-radius: 200% 0% 200% 0%;
background-color: black;
width: 5px;
height: 5px;
position: absolute;
top: 304px;
left: 55px;
}
.claw_left_paw3 {
border-radius: 200% 0% 200% 0%;
background-color: black;
width: 5px;
height: 5px;
position: absolute;
top: 295px;
left: 45px;
}
.tail {
border-radius: 100% 0% 200% 0%;
background-color: rgb(43, 220, 226);
width: 25px;
height: 230px;
position: absolute;
top: 190px;
left: 400px;
transform: rotate(-94deg);
