172 أسطر
3.5 KiB
HTML
172 أسطر
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>OUDELAA | قريباً</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;600&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root{
|
|
--black:#0b0b0b;
|
|
--burnt:#2a1408;
|
|
--wood:#3a2312;
|
|
--gold:#c6a24a;
|
|
--gold-soft:#e3c06a;
|
|
--cream:#f2e2c4;
|
|
}
|
|
|
|
*{margin:0;padding:0;box-sizing:border-box;}
|
|
|
|
body{
|
|
min-height:100vh;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
font-family:'Cairo', sans-serif;
|
|
text-align:center;
|
|
color:var(--cream);
|
|
overflow:hidden;
|
|
background:var(--black);
|
|
padding:20px;
|
|
}
|
|
|
|
.bg{
|
|
position:absolute; inset:0;
|
|
background:
|
|
radial-gradient(70% 60% at 50% 25%, rgba(198,162,74,.18), transparent 60%),
|
|
linear-gradient(135deg, var(--burnt) 0%, var(--wood) 45%, #120a05 70%, #000 100%);
|
|
}
|
|
|
|
.bg::after{
|
|
content:"";
|
|
position:absolute; inset:0;
|
|
background:
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
rgba(255,255,255,.03) 0px,
|
|
rgba(255,255,255,.03) 2px,
|
|
transparent 3px,
|
|
transparent 6px
|
|
);
|
|
opacity:.35;
|
|
mix-blend-mode:overlay;
|
|
}
|
|
|
|
.spot{
|
|
position:absolute;
|
|
width:60vw;
|
|
height:60vw;
|
|
max-width:600px;
|
|
max-height:600px;
|
|
background:radial-gradient(circle, rgba(227,192,106,.22), transparent 65%);
|
|
border-radius:50%;
|
|
animation:breathe 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes breathe{
|
|
0%,100%{transform:scale(1); opacity:.6;}
|
|
50%{transform:scale(1.08); opacity:.9;}
|
|
}
|
|
|
|
.container{
|
|
position:relative;
|
|
z-index:2;
|
|
padding:clamp(40px, 8vw, 120px);
|
|
animation:fadeUp 1.8s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeUp{
|
|
from{opacity:0; transform:translateY(30px);}
|
|
to{opacity:1; transform:translateY(0);}
|
|
}
|
|
|
|
.brand{
|
|
font-size:clamp(32px, 8vw, 90px);
|
|
letter-spacing:clamp(2px, 1vw, 8px);
|
|
background:linear-gradient(90deg, #9f7a2f, var(--gold-soft), #8c6422);
|
|
-webkit-background-clip:text;
|
|
color:transparent;
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
.line{
|
|
width:clamp(100px, 28vw, 180px);
|
|
height:2px;
|
|
margin:22px auto;
|
|
background:linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(198,162,74,.6) 25%,
|
|
var(--gold-soft) 50%,
|
|
rgba(198,162,74,.6) 75%,
|
|
transparent 100%
|
|
);
|
|
box-shadow:0 0 8px rgba(198,162,74,.35);
|
|
border-radius:2px;
|
|
}
|
|
|
|
/* لمعة ذهبية فوق الكلام (من أقصى اليمين إلى اليسار) */
|
|
.tagline{
|
|
position:relative;
|
|
font-size:clamp(16px, 4vw, 40px);
|
|
line-height:1.8;
|
|
font-weight:300;
|
|
padding:0 10px;
|
|
display:inline-block;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.tagline::after{
|
|
content:"";
|
|
position:absolute;
|
|
top:-8%;
|
|
right:-60%; /* تبدأ من أقصى اليمين */
|
|
width:40%; /* عرض اللمعة */
|
|
height:120%;
|
|
background:linear-gradient(
|
|
-120deg,
|
|
transparent 0%,
|
|
rgba(227,192,106,0.0) 25%,
|
|
rgba(227,192,106,0.75) 50%,
|
|
rgba(227,192,106,0.0) 75%,
|
|
transparent 100%
|
|
);
|
|
transform:skewX(25deg);
|
|
animation:goldShineRTL 6s ease-in-out infinite;
|
|
pointer-events:none;
|
|
opacity:.9;
|
|
}
|
|
|
|
@keyframes goldShineRTL{
|
|
0% { right:-60%; }
|
|
45% { right:120%; }
|
|
100% { right:120%; }
|
|
}
|
|
|
|
.sub{
|
|
margin-top:20px;
|
|
font-size:clamp(24px, 6vw, 60px);
|
|
color:var(--gold-soft);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="bg"></div>
|
|
<div class="spot"></div>
|
|
|
|
<div class="container">
|
|
<div class="brand"><b>OUDELAA</b></div>
|
|
<div class="line"></div>
|
|
|
|
<div class="tagline">
|
|
سمير جبران يقول الموسيقى سلاحنا الأجمل لحماية هويتنا
|
|
</div>
|
|
|
|
<div class="sub"><b>قريباً</b></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |