Konu Sahibi
ALemci44
User
Öncelikle konuyu yannış yere açtıysam özürdiliyorum.
Formum için yaptıgım kandil mesajını sizinle paylaşmak istedim.
Admin panele girin
iletişim yolları
Uyarı yönrticisi
sağ üst kısımda uyarı ekle sekmesine dokunun
Açılan sayfada uyarı seçeneklerinde başlığa KANDİL MESAJI YAZIN
mesaj bölümüne vereceğim html yi kopyalayıp yapıştırın kendinize göre yazıları değiştirin.
Resim ekle bölümünden resim yok seçeneğini seçin
Görünüm tarzı birincil
Görünürlük asla gizleme
Uyarı türü blok
uyarı etkin seçeneğini seçin
Bunları kendinize göre ayarlaya bilirsiniz.
Örnek olarak www.kucukkoyluler.com sitesine baka bilirsiniz
Formum için yaptıgım kandil mesajını sizinle paylaşmak istedim.
Admin panele girin
iletişim yolları
Uyarı yönrticisi
sağ üst kısımda uyarı ekle sekmesine dokunun
Açılan sayfada uyarı seçeneklerinde başlığa KANDİL MESAJI YAZIN
mesaj bölümüne vereceğim html yi kopyalayıp yapıştırın kendinize göre yazıları değiştirin.
Resim ekle bölümünden resim yok seçeneğini seçin
Görünüm tarzı birincil
Görünürlük asla gizleme
Uyarı türü blok
uyarı etkin seçeneğini seçin
Bunları kendinize göre ayarlaya bilirsiniz.
Örnek olarak www.kucukkoyluler.com sitesine baka bilirsiniz
Kod:
<div style="
position:relative;
background:linear-gradient(180deg,#1fa866,#0b5f3b);
border:1px solid #000;
padding:12px 12px 14px;
text-align:center;
border-radius:10px;
overflow:hidden;
">
<!-- AY -->
<div style="
position:absolute;
top:-30px;
right:14px;
font-size:24px;
animation:ayDogus 6s infinite ease-in-out;
">🌙</div>
<!-- YILDIZLAR (AYRI AYRI) -->
<span class="yildiz" style="left:10%; animation-delay:0s;">✦</span>
<span class="yildiz" style="left:25%; animation-delay:1s;">✧</span>
<span class="yildiz" style="left:40%; animation-delay:2s;">✦</span>
<span class="yildiz" style="left:55%; animation-delay:0.5s;">✧</span>
<span class="yildiz" style="left:70%; animation-delay:1.5s;">✦</span>
<span class="yildiz" style="left:85%; animation-delay:2.5s;">✧</span>
<!-- ÜST ALAN -->
<div style="
display:flex;
justify-content:center;
align-items:center;
gap:14px;
margin-bottom:6px;
">
<!-- KÂBE -->
<div style="
font-size:30px;
animation:kabeParla 3s infinite ease-in-out;
">
🕋
</div>
<!-- CAMİ + MİNARE -->
<div style="
font-size:26px;
color:#eafff5;
text-shadow:0 0 12px #7CFFB2;
position:relative;
">
🕌
<span style="
position:absolute;
right:-8px;
bottom:-6px;
font-size:18px;
">▮</span>
</div>
</div>
<!-- METİN -->
<div style="
color:#eafff5;
font-size:16px;
font-weight:bold;
margin-bottom:4px;
text-shadow:0 0 8px #7CFFB2;
">
Berat Kandilimiz Mübarek Olsun
</div>
<div style="
color:#ffffff;
font-size:13px;
line-height:1.4;
">
Küçükköylüler camiamızın ve<br>
tüm İslam âleminin kandili mübarek olsun.
</div>
<style>
.yildiz{
position:absolute;
top:-20px;
font-size:14px;
color:rgba(255,255,255,0.9);
animation:yagmur 3.5s infinite linear;
pointer-events:none;
}
@keyframes yagmur{
0%{ transform:translateY(0); opacity:0; }
15%{ opacity:1; }
100%{ transform:translateY(150px); opacity:0; }
}
@keyframes ayDogus{
0%{ top:50px; opacity:0; }
50%{ top:14px; opacity:1; }
100%{ top:50px; opacity:0; }
}
@keyframes kabeParla{
0%{ text-shadow:0 0 6px #f1c40f; }
50%{ text-shadow:0 0 18px #f1c40f; }
100%{ text-shadow:0 0 6px #f1c40f; }
}
</style>
</div>
