Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dari Fini | صباغة احترافية</title>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:'Cairo',sans-serif;
background:#f5f5f5;
direction:rtl;
}
/* HEADER */
header{
background:#0e2238;
color:white;
display:flex;
justify-content:space-between;
padding:15px 30px;
align-items:center;
position:sticky;
top:0;
}
.logo{
font-size:22px;
font-weight:bold;
color:#ff7a00;
}
nav a{
color:white;
margin:0 10px;
text-decoration:none;
transition:0.3s;
}
nav a:hover{
color:#ff7a00;
}
/* HERO */
.hero{
height:100vh;
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('https://images.unsplash.com/photo-1581578731548-c64695cc6952');
background-size:cover;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}
.hero h1{
font-size:42px;
margin-bottom:10px;
}
.hero span{
color:#ff7a00;
}
.btn{
background:#ff7a00;
padding:12px 30px;
color:white;
border-radius:30px;
text-decoration:none;
transition:0.3s;
}
.btn:hover{
transform:scale(1.05);
}
/* SERVICES */
.section{
padding:70px 20px;
text-align:center;
}
.services{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
}
.card{
background:white;
padding:25px;
width:260px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
transition:0.3s;
}
.card:hover{
transform:translateY(-10px);
}
/* PORTFOLIO */
.portfolio{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:15px;
}
.portfolio img{
width:100%;
border-radius:15px;
transition:0.3s;
}
.portfolio img:hover{
transform:scale(1.05);
}
/* CONTACT */
.contact{
background:#1f3a5f;
color:white;
padding:50px 20px;
}
form{
max-width:400px;
margin:auto;
}
input, textarea{
width:100%;
padding:12px;
margin:10px 0;
border:none;
border-radius:8px;
}
button{
background:#ff7a00;
color:white;
padding:12px;
border:none;
width:100%;
border-radius:8px;
cursor:pointer;
}
/* FOOTER */
footer{
background:#0e2238;
color:white;
text-align:center;
padding:15px;
}
/* WHATSAPP */
.whatsapp{
position:fixed;
bottom:20px;
left:20px;
background:#25D366;
color:white;
padding:15px;
border-radius:50%;
text-decoration:none;
}
/* RESPONSIVE */
@media(max-width:768px){
.hero h1{
font-size:28px;
}
}
</style>
</head>
<body>
<header>
<div class="logo">Dari Fini 🎨</div>
<nav>
<a href="#">الرئيسية</a>
<a href="#services">الخدمات</a>
<a href="#portfolio">أعمالنا</a>
<a href="#contact">تواصل</a>
</nav>
</header>
<section class="hero">
<div>
<h1><span>Dari Fini</span><br>خلي دارك تولي فيني ✨</h1>
<p>صباغة احترافية فـ الدار البيضاء وبوسكورة</p>
<br>
<a href="#contact" class="btn">طلب Devis</a>
</div>
</section>
<section id="services" class="section">
<h2>خدماتنا</h2>
<div class="services">
<div class="card">
<h3>صباغة المنازل</h3>
<p>جودة عالية وتشطيب نقي</p>
</div>
<div class="card">
<h3>صباغة المحلات</h3>
<p>ديزاين يجبد الزبناء</p>
</div>
<div class="card">
<h3>ديكور الجدران</h3>
<p>effet / tadelakt</p>
</div>
</div>
</section>
<section id="portfolio" class="section">
<h2>أعمالنا</h2>
<div class="portfolio">
<img src="https://images.unsplash.com/photo-1505691938895-1758d7feb511">
<img src="https://images.unsplash.com/photo-1507089947367-19c1da9775ae">
<img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb">
</div>
</section>
<section id="contact" class="contact">
<h2>طلب Devis مجاني</h2>
<form onsubmit="sendToWhatsApp(event)">
<input type="text" id="name" placeholder="الاسم" required>
<input type="tel" id="phone" placeholder="رقم الهاتف" required>
<textarea id="message" placeholder="شنو بغيتي تدير؟"></textarea>
<button type="submit">إرسال</button>
</form>
<p style="margin-top:20px;">📞 +212 783-129924</p>
<p>📍 Casablanca - Bouskoura</p>
</section>
<footer>
<p>Dari Fini © 2026</p>
</footer>
<a class="whatsapp" href="https://wa.me/212783129924">💬</a>
<script>
function sendToWhatsApp(e){
e.preventDefault();
let name=document.getElementById("name").value;
let phone=document.getElementById("phone").value;
let message=document.getElementById("message").value;
let url="https://wa.me/212783129924?text="
+"الاسم: "+name+"%0a"
+"الهاتف: "+phone+"%0a"
+"الطلب: "+message;
window.open(url,'_blank');
}
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
8
Requests
4
Domains
5458KB
Transfer Size
5457KB
Content Size
150.0ms
Dom Content Loaded
804.0ms
First Paint
508.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...