خودتان امتحان کنید

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: "Lucida Sans", sans-serif;
  font-size: 17px;
}

video {
  width: 100%;
  height: auto;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header'
    'menu'
    'main'
    'facts'
    'footer';
  background-color: white;
  gap: 10px;  
}

.header {
  grid-area: header;
  background-color: purple;
  text-align: center;
  color: #ffffff;
}

.header > h1 {
  font-size: 40px;
}

.menu {
  grid-area: menu;
  }
  
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}
  
.content {
  grid-area: main;
}

.content > h1 {
  font-size: 30px;
  margin-bottom: 7px;
}

.content > p {
  margin-bottom: 7px;
}

.facts {
  grid-area: facts;
  border: 1px solid #0099cc;
  background-color: beige;
  padding: 10px;
}

.facts > h2 {
  font-size: 20px;
}

.facts li {
  margin-bottom: 5px;
}

.footer {
  grid-area: footer;
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
}

@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 3 / span 6;}
  .footer {grid-area: 4 / span 6;}
}

@media (min-width: 768px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 2 / span 1;}
  .footer {grid-area: 3 / span 6;}
}
</style>
</head>
<body>

<div class="header"><h1>مولانا</h1></div>

<div class="menu">
  <ul>
    <li>مثنوی معنوی</li>
    <li>دیوان شمس</li>
    <li>فیه ما فیه</li>
    <li>مجالس سبعه</li>
  </ul>
</div>

<div class="content">
  <h1>مولانا</h1>
  <p>مولانا جلال الدین محمد بلخی مشهور به مولوی شاعر بزرگ قرن هفتم هجری قمری است.</p>
  <p>وی در سال ۶۰۴ هجری قمری در بلخ زاده شد. پدر وی بهاءالدین که از علما و صوفیان بزرگ زمان خود بود به سبب رنجشی که بین او و سلطان محمد خوارزمشاه پدید آمده بود از بلخ بیرون آمد و بعد از مدتی سیر و سیاحت به قونیه رفت.</p>
  <p>مولانا بعد از فوت پدر تحت تعلیمات برهان الدین محقق ترمذی قرار گرفت.</p>
  <video width="400" controls>
    <source src="other/mov_bbb.mp4" type="video/mp4">
    <source src="other/mov_bbb.ogg" type="video/ogg">
    مرورگر شما از ویدیوهای اچ تی ام ال 5 پشتیبانی نمی کند.
  </video>
</div>

<div class="facts">
  <h2>بهترین آثار مولانا:</h2>
  <ul>
    <li>مثنوی معنوی</li>
    <li>دیوان شمس</li>
  </ul>
</div>

<div class="footer"><p>پنجره ی مرورگر خود را تغییر اندازه دهید تا نتیجه را مشاهده کنید.</p></div>
  
</div>

</body>
</html>