Step 1: Create Index.html File.
<!DOCTYPE html>
<html>
<head>
<title>Cow</title>
</head>
<body>
<div id="container">
<div id="head">
<div id="horn"></div>
<div id="horn1"></div>
<div id="eye">
<div id="eyeball"></div>
</div>
<div id="eye1">
<div id="eyeball1"></div>
</div>
<div id="mouth">
<div id="nose"></div>
<div id="nose1"></div>
<div id="smile"></div>
</div>
</div>
<div id="body">
<div id="stomach"></div>
</div>
<div id="leg">
<div id="legc"></div>
</div>
<div id="leg1">
<div id="legc1"></div>
</div>
<div id="leg2"></div>
<div id="toe"></div>
<div id="f"></div>
<div id="f1"></div>
<div id="leg3"></div>
<div id="toe1"></div>
<div id="tail">
<div id="tailh"></div>
<div id="tailtip"></div>
<div id="tailti"></div>
</div>
<div id="ear"></div>
<div id="ear1"></div>
<div id="shadow"></div>
<div id="shadow1"></div>
<div id="shadow2"></div>
<div id="shadow3"></div>
<div id="shadow4"></div>
<a id="a" href="https://www.sololearn.com/Profile/19143437/?ref=app">Follow Me</a>
</div>
</body>
</html>
Step 2: Create Style.css File.
body {
margin:0;
}
#container{
height:581px;
width:360px;
display:flex;
align-items:center;
justify-content:center;
text-align:center ;
position:relative ;
overflow:hidden ;
background-color:none;
}
#head{
width: 150px;
height: 200px;
background-color:#ffeae0;
position:absolute;
left:110px;
top:80px;
z-index:999;
border-radius:84% 81% 60% 49% / 89% 84% 30% 30% ;
}
#head:after{
content:"";
position:absolute;
width:20px;
height:110px;
border-radius:50%;
background-color:#ffeae0;
top:65px;
left:-3px;
transform:rotate(3deg);
}
#head:before{
content:"";
position:absolute;
width:20px;
height:110px;
border-radius:50%;
background-color:#ffeae0;
top:65px;
right:-3px;
transform:rotate(-3deg);
}
#mouth{
width: 157px;
height: 60px;
background-color:#fcaeae;
border-bottom-left-radius:45px;
border-bottom-right-radius:48px;
border-bottom: 0;
position:absolute;
left:-3.5px;
top:140px;
z-index:99;
}
#mouth:after{
content:"";
position:absolute;
width:157px;
height:40px;
background-color:#fcaeae;
border-radius:50%;
left:0;
bottom:40px;
transform:rotate(-.5deg);
}
#mouth:before{
content:"";
position:absolute;
width:100px;
height:20px;
background-color:#fcaeae;
border-radius:50%;
left:25px;
top:43.8px;
transform:rotate(1deg);
}
#eye{
height:23px;
width:18px;
background-color:black;
border-radius:50%;
position:absolute;
left:47px;
top:75px;
}
#eye1{
height:23px;
width:18px;
background-color:black;
border-radius:50%;
position:absolute;
right:47px;
top:75px;
}
#eyeball{
height:6.5px;
width:6px;
background-color:white;
border-radius:50%;
position:absolute;
top:5px;
right:2px;
}
#eyeball1{
height:6.5px;
width:6px;
background-color:white;
border-radius:50%;
position:absolute;
top:5px;
left:2px;
}
#nose{
height:15px;
width:25px;
background-color:#c26e6e;
border-radius:50%;
position:absolute;
top:2px;
left:25px;
z-index:999;
transform:rotate(10deg);
}
#nose1{
height:15px;
width:25px;
background-color:#c26e6e;
border-radius:50%;
position:absolute;
top:2px;
right:25px;
z-index:999;
transform:rotate(-10deg);
}
#smile{
height: 20px;
width: 20px;
border: 5px solid transparent;
border-top: 5px solid #c26e6e;
border-radius: 50%;
position: absolute;
top:20px;
right:40px;
z-index:999;
transform:rotate(130deg);
}
#smile:before{
content:"";
width: 5px;
height: 5px;
background-color:#c26e6e;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom: 0;
position:absolute;
top:-1px;
left:-2px;
z-index:9999;
transform:rotate(-130deg);
}
#smile:after{
content:"";
width: 5px;
height: 5px;
background-color:#c26e6e;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom: 0;
position:absolute;
top:-.5px;
right:-2px;
z-index:9999;
transform:rotate(-220deg);
}
#horn{
height:15px;
width:15px;
background-color:#ffaf03;
border-radius:52% 48% 0% 71% / 100% 100% 0% 0% ;
position:absolute ;
left:30px;
top:-2px;
transform:rotate(-35deg);
}
#horn1{
height:15px;
width:15px;
background-color:#ffaf03;
border-radius:52% 48% 0% 71% / 100% 100% 0% 0% ;
position:absolute ;
right:30px;
top:-3px;
transform:rotate(34deg);
}
#ear{
transform:rotate(8deg);
z-index:-111;
position:absolute;
top:82px;
left:82px;
}
#ear:before{
content:"";
width: 50px;
height: 70px;
background:#fcaeae;
border-radius: 100px 0px;
border:6px solid #4c4c4d;
position:absolute;
transform:rotateX(60deg);
z-index:-1;
}
#ear1{
transform:rotate(45deg);
z-index:-111;
position:absolute;
top:77px;
left:270px;
}
#ear1:before{
content:"";
width: 50px;
height: 70px;
background:#fcaeae;
border-radius: 100px 0px;
border:6px solid #4c4c4d;
position:absolute;
transform:rotateX(60deg);
z-index:0;
}
#body{
height:140px;
width:140px;
border-radius:50%;
background-color:#ffeae0;
position:relative ;
top:40px;
}
#stomach{
width:80px;
height:70px;
border-radius:75% 54% 73% 69% / 63% 54% 74% 71% ;
background-color:rgb(255, 204, 188);
position:absolute;
top:40px;
left:30px;
}
#leg{
height:120px;
width:55px;
background-color:#ffeae0;
border-radius:52% 48% 0% 71% / 100% 100% 0% 0% ;
position:absolute;
top:270px;
left:100px;
transform:rotate(5deg);
box-shadow:0px -1px 6px rgba(0, 0, 0, 0.050);
}
#leg:after{
content:"";
position:absolute;
left:27px;
top:110px;
height: 0px;
width: 20px;
border-bottom: 25px solid #4c4c4d;
border-left: 6px solid transparent;
border-right: 5px solid transparent;
transform:rotate(170deg);
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#leg:before{
content:"";
position:absolute;
left:-1.5px;
top:110px;
height: 0px;
width: 23px;
border-bottom: 27px solid #4c4c4d;
border-left: 5px solid transparent;
border-right: 6px solid transparent;
transform:rotate(185deg);
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#leg1{
height:120px;
width:55px;
background-color:#ffeae0;
border-radius:52% 48% 0% 71% / 100% 100% 0% 0% ;
position:absolute;
top:270px;
left:205px;
transform:rotate(-5deg);
box-shadow:-1px 0px 6px rgba(0, 0, 0, 0.050);
}
#leg1:after{
content:"";
position:absolute;
left:-2.5px;
top:110px;
height: 0px;
width: 20px;
border-bottom: 25px solid #4c4c4d;
border-left: 6px solid transparent;
border-right: 5px solid transparent;
transform:rotate(188deg);
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#leg1:before{
content:"";
position:absolute;
left:22px;
top:110px;
height: 0px;
width: 23.5px;
border-bottom: 26px solid #4c4c4d;
border-left: 5px solid transparent;
border-right: 6px solid transparent;
transform:rotate(175deg);
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#legc{
width:56px;
height:10px;
background-color:#ffeae0;
border-radius:50%;
position:absolute;
top:103px;
left:-.5px;
z-index:9999;
}
#legc1{
width:56px;
height:10px;
background-color:#ffeae0;
border-radius:50%;
position:absolute;
top:103px;
left:-.5px;
z-index:9999;
}
#leg2{
height:90px;
width:45px;
background-color:#ffe0d1;
border-radius:100% 100% 71% 82% / 99% 100% 82% 73% ;
position:absolute;
top:325px;
left:75px;
transform:rotate(90deg);
z-index:-11;
}
#leg2:before{
content:"";
height:80px;
width:40px;
background-color:#ffe0d1;
border-radius:100% 100% 71% 82% / 99% 100% 82% 73% ;
position:absolute;
top:5px;
right:5px;
transform:rotate(35deg);
z-index:-11;
}
#toe{
height:48px;
width:21px;
background-color:#4c4c4c;
border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
position:absolute;
top:336px;
left:50px;
transform:rotateY(20deg);
}
#toe:after{
content:"";
height:48px;
width:21px;
background-color:#4c4c4c;
border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
position:absolute;
top:px;
left:16px;
}
#toe:before{
content:"";
width: 32px;
height: 16px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
background: #4c4c4c;
position:absolute;
left:2.5px;
top:40px;
z-index:999;
}
#leg3{
height:90px;
width:45px;
background-color:#ffe0d1;
border-radius:100% 100% 71% 82% / 99% 100% 82% 73% ;
position:absolute;
top:323px;
left:233px;
transform:rotate(240deg);
z-index:-11;
}
#leg3:before{
content:"";
height:80px;
width:40px;
background-color:#ffe0d1;
border-radius:100% 100% 71% 82% / 99% 100% 82% 73% ;
position:absolute;
top:5px;
right:5px;
transform:rotate(35deg);
z-index:-11;
}
#toe1{
height:48px;
width:21px;
background-color:#4c4c4c;
border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
position:absolute;
top:336px;
left:275px;
transform:rotateY(20deg);
}
#toe1:after{
content:"";
height:48px;
width:21px;
background-color:#4c4c4c;
border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
position:absolute;
top:px;
left:16px;
}
#toe1:before{
content:"";
width: 32px;
height: 16px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
background: #4c4c4c;
position:absolute;
left:2.5px;
top:40px;
z-index:999;
}
#tail{
height: 100px;
width: 200px;
border: 10px solid transparent;
border-bottom:10px solid #ffe0d1;
border-radius: 0 50% ;
position: absolute;
top:225px;
left:55px;
z-index:-9999;
transform:rotate(10deg);
}
#tail:before{
content:"";
position:absolute;
height:15px;
width:15px;
border: 10px solid transparent;
border-bottom:10px solid #ffe0d1;
border-radius:50%;
top:57px;
left:8px;
z-index:999;
transform:rotate(89deg);
}
#tailh{
height:35px;
width:15px;
background-color:#4c4c4c;
border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
position:absolute;
top:41px;
left:2px;
transform:rotate(0deg);
z-index:999;
}
#tailh:before{
height:35px;
content:"";
width:15px;
background-color:#4c4c4c;
border-radius:100% 100% 56% 74% / 99% 100% 82% 73%;
position:absolute;
top:px;
left:5px;
transform:rotate(-10deg);
z-index:999;
}
#tailh:after{
content:"";
width: 20px;
height: 10px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
background: #4c4c4c;
position:absolute;
z-index:999;
top:28px;
left:1px;
transform:rotate(2deg);
}
#tailtip{
position:absolute;
left:3.5px;
top:33px;
height:30px;
width:14px;
border-radius:50%;
border-left:5px solid #4c4c4c;
transform:rotate(18deg);
}
#tailtip:before{
content:"";
position:absolute;
top:.1px;
left:-.8px;
height:20px;
width:5px;
border-radius:50%;
border-left:5px solid #4c4c4c;
}
#tailtip:after{
content:"";
position:absolute;
top:3px;
left:4.6px;
height:15px;
width:8px;
border-radius:50%;
border-left:5px solid #4c4c4c;
transform:rotate(-21deg);
}
#tailti{
width:25px;
height:13px;
background-color:#4c4c4c;
border-radius:50%;
position:absolute;
top:57.5px;
left:5.5px;
z-index:9999;
transform:rotate(86deg);
}
#f{
height:15px;
width:7px;
border-radius:50%;
border-left:5px solid #ffe0d1;
position:absolute;
top:335px;
left:290px;
transform:rotate(50deg);
}
#f1{
height:15px;
width:7px;
border-radius:50%;
border-right:5px solid #ffe0d1;
position:absolute;
top:335px;
left:59px;
transform:rotate(-50deg);
z-index:-11;
}
#shadow{
position:absolute;
width:60px;
height:.001px;
z-index:-111;
border-radius:50%;
top:400px;
box-shadow:0px 0px 19px 4px grey;
}
#shadow1{
position:absolute;
width:30px;
height:.001px;
z-index:-111;
border-radius:50%;
top:408px;
left:110px;
box-shadow:0px 0px 19px 5px grey;
}
#shadow2{
position:absolute;
width:30px;
height:.001px;
z-index:-111;
border-radius:50%;
top:408px;
left:220px;
box-shadow:0px 0px 19px 5px grey;
}
#shadow3{
position:absolute;
width:10px;
height:.001px;
z-index:-111;
border-radius:50%;
top:395px;
left:80px;
box-shadow:0px 0px 19px 5px grey;
}
#shadow4{
position:absolute;
width:10px;
height:.001px;
z-index:-111;
border-radius:50%;
top:395px;
left:270px;
box-shadow:0px 0px 19px 5px grey;
}
#a{
width:120px;
height:25px;
text-align:center;
border-radius:10px;
background-color:#fcaeae;
position:absolute;
top:480px;
text-decoration:none;
font-size:20px;
padding:5px;
padding-top:8px;
color:white;
text-transform: uppercase;
word-spacing:2px;
}
Step 3: Result.
To that end, I am only an email away. Contact me with any questions.
Happy coding,
By Ashwin Maurya ( SoloLearn User )
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
If any Photos/Videos/Article/Blog/Content has an issue with this upload, please contact us and we will remove it immediately. Contact E-Mail :lawtantra@gmail.com
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
0 Comments
Please do not enter any spam link in the comment box.