Bulma

<!-- تحميل Bulma -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

<!-- Hero Section -->
<section class="hero is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">مرحباً بالعالم</h1>
      <h2 class="subtitle">وصف فرعي</h2>
    </div>
  </div>
</section>

<!-- Card -->
<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="image.jpg" alt="صورة">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="avatar.jpg" alt="صورة شخصية">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">أحمد محمد</p>
        <p class="subtitle is-6">@ahmed</p>
      </div>
    </div>
    <div class="content">
      محتوى البطاقة هنا
      <br>
      <time datetime="2024-1-1">1 يناير</time>
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">حفظ</a>
    <a href="#" class="card-footer-item">تعديل</a>
    <a href="#" class="card-footer-item">حذف</a>
  </footer>
</div>

<!-- Columns (Grid) -->
<div class="columns">
  <div class="column is-4">
    <div class="box">العمود 1</div>
  </div>
  <div class="column is-4">
    <div class="box">العمود 2</div>
  </div>
  <div class="column is-4">
    <div class="box">العمود 3</div>
  </div>
</div>

<!-- Buttons -->
<button class="button is-primary">زر أساسي</button>
<button class="button is-link">زر رابط</button>
<button class="button is-info">زر معلومات</button>
<button class="button is-success">زر نجاح</button>
<button class="button is-warning">زر تحذير</button>
<button class="button is-danger">زر خطر</button>

<button class="button is-primary is-large">زر كبير</button>
<button class="button is-primary is-outlined">مخطط</button>
<button class="button is-primary is-loading">جاري التحميل</button>

<!-- Modal (لازم JavaScript) -->
<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">عنوان</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <p>محتوى النافذة</p>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">حفظ</button>
      <button class="button">إلغاء</button>
    </footer>
  </div>
</div>

<script>
// JavaScript للتحكم بـModal
document.querySelectorAll('.modal-background, .delete').forEach(el => {
  el.addEventListener('click', () => {
    el.closest('.modal').classList.remove('is-active');
  });
});
</script>