عارض أكواد HTML الفوري
والأسرع للمطورين العرب.

بساطة، سرعة، ودعم لأحدث معايير الويب. بيئة عمل نظيفة خالية من التشتت لتركيز كامل على الكود.

مساحة إعلانية (خدمات تقنية)

تواصل معنا للإعلان هنا

Live Editor

HTML Input

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* خلفية متدرجة زاهية */
    background: linear-gradient(45deg, #FF9A9E 0%, #FECFEF 99%, #FECFEF 100%);
    overflow: hidden;
  }
  
  .glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 50px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    transform: translateY(0);
    transition: transform 0.3s ease;
  }

.glass-card:hover {
    transform: translateY(-5px);
  }

.badge {
    background: #ff6b6b;
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
  }

h1 {
    font-size: 2.5rem;
    margin: 10px 0;
    color: #333;
    font-weight: 800;
    background: -webkit-linear-gradient(#333, #555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

p {
    color: #666;
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 30px;
  }

.btn-shine {
    background: linear-gradient(90deg, #00d2ff 0%, #3a7bd5 100%);
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.4);
    transition: all 0.3s ease;
  }

.btn-shine:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 210, 255, 0.6);
  }
</style>
</head>
<body>
  <div class="glass-card">
    <span class="badge">من نحن</span>
    <h1>فريق الإبداع</h1>
    <p>
      نحن مجموعة من المطورين والمصممين الشغوفين ببناء أدوات الويب الحديثة. 
      نؤمن بأن الكود هو الفن الجديد، ونسعى لتمكين المبدعين العرب من خلال توفير بيئة تطوير سلسة، سريعة، وملهمة.
    </p>
    <button class="btn-shine" onclick="alert('شكراً لاهتمامك!')">تواصل معنا</button>
  </div>
</body>
</html>

Preview

[شريط إعلاني غير مشتت للانتباه]

مكتبة الأكواد الجاهزة

قوالب جاهزة للنسخ والاستخدام لتسريع عملية التطوير.

قائمة تنقل (Navbar)

شريط علوي بسيط متجاوب مع الشاشات.

<nav style="display:flex; justify-content:space-between;">...

أزرار CSS حديثة

مجموعة أزرار بتأثيرات Hover جذابة.

<button class="btn">Click Me</button>...

نموذج اتصال (Form)

حقول الإدخال الأساسية مع تنسيق نظيف.

<form><input type="text" placeholder="Name">...

حول HTML.com.ly

نحن فريق من المطورين العرب نؤمن بأن الأدوات البسيطة هي الأكثر فعالية. أنشأنا هذه المنصة لتوفير بيئة تجريب سريعة (Sandboxing) دون الحاجة لإعداد بيئات تطوير معقدة.

سواء كنت طالباً يتعلم البرمجة لأول مرة، أو محترفاً يحتاج لاختبار مقتطف كود سريعاً، فإن هذه الأداة صممت لك.

نوصي بـ:

هل تبحث عن استضافة قوية لموقعك بعد الانتهاء من تصميمه؟

احصل على خصم خاص من Hostinger (رابط إعلاني)

تواصل معنا

للاستفسارات التجارية أو الإبلاغ عن مشاكل.

عارض أكواد HTML الفوري والأسرع للمطورين العرب.