<!DOCTYPE html>
<html lang="tr">
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.cat {
position: relative;
width: 200px;
height: 150px;
background-color: #333; /* Kedi rengi */
border-radius: 100px 100px 60px 60px;
}
/* Kulaklar */
.ear {
position: absolute;
top: -20px;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 50px solid #333;
}
.ear.left { left: 20px; transform: rotate(-15deg); }
.ear.right { right: 20px; transform: rotate(15deg); }
/* Gözler */
.eye {
position: absolute;
top: 60px;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
}
.eye::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
top: 5px;
left: 5px;
}
.eye.left { left: 50px; }
.eye.right { right: 50px; }
/* Burun */
.nose {
position: absolute;
top: 90px;
left: 90px;
width: 20px;
height: 10px;
background-color: #ff9999;
border-radius: 50%;
}
/* Bıyıklar */
.whisker {
position: absolute;
width: 50px;
height: 2px;
background-color: #999;
top: 100px;
}
.whisker.left { left: -30px; transform: rotate(10deg); }
.whisker.right { right: -30px; transform: rotate(-10deg); }
</style>
</head>
<body>
<div class="cat">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="nose"></div>
<div class="whisker left"></div>
<div class="whisker right"></div>
</div>
</body>
</html>
Yorumlar
Yorum Gönder