Site Giriş Ekranı Böyle Olur

görselde koysaydınız en azından degerlendirirdik

Şu kısma oha yav. Gerçekten çok yaratıcı



.face {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 40px;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: center;
}

.eye {
width: 12px;
height: 12px;
border-top: 3px solid #161623;
border-radius: 50%;
margin-top: 5px;
}

.mouth {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 12px;
background: #161623;
border-radius: 0 0 20px 20px;
overflow: hidden;
}

.tongue {
width: 100%;
height: 60%;
background: #ff6b6b;
position: absolute;
bottom: 0;
border-radius: 10px 10px 0 0;
}

Beğenmedim üzgünüm

Yaratıcı Çıkış yapma işlemi içinde sifon olabilir :P

Hocam senin verdiğin kodu görünce, Chatgpt'den beğendiğim şekillerin still kodunu alabilir miyim diye denedim, r10.net logosunu kullandım sonuç fena değil.

<div class="face-wrap">
<div class="antenna left"></div>
<div class="antenna right"></div>

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

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


* {
box-sizing: border-box;
}

body {
background: #2f3146;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.face-wrap {
position: relative;
width: 180px;
}

.antenna {
position: absolute;
top: -40px;
width: 8px;
height: 50px;
background: #fff;
border-radius: 5px;
}

.antenna.left {
left: 45px;
transform: rotate(-20deg);
}

.antenna.right {
right: 45px;
transform: rotate(20deg);
}

/* Face */
.face {
width: 180px;
height: 160px;
background: #fff;
border-radius: 50%;
position: relative;
padding-top: 40px;
}

/* Eyes */
.eyes {
display: flex;
justify-content: space-around;
padding: 0 35px;
}

.eyes span {
width: 35px;
height: 35px;
border: 5px solid #6d6e7a;
border-radius: 50%;
}

/* Mouth */
.mouth {
position: absolute;
bottom: 30px;
left: 20px;
width: 140px;
height: 60px;
border: 5px solid #6d6e7a;
border-top: none;
border-radius: 0 0 80px 80px;
display: flex;
}

.mouth span {
flex: 1;
border-left: 4px solid #6d6e7a;
}

.mouth span:first-child {
border-left: none;
}

Çok eğlenceli olmuş eline sağlık

Mobilde bişey yok

Teşekkürler iyi forumlar

Mutluluğun kodunu yazabilir misin diye sorduklarında...