مشاهده و تمرین روی کد ها

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
.column {
    float: right;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}
.menu li:hover {
    background-color: #0099cc;
}
p,div {direction:rtl;}

</style>
</head>
<body>

<div class="header">
  <h1>آرمانشهر</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>پرواز ها</li>
      <li> شهر رویاها</li>
      <li>جزیره زیبا</li>
      <li>غذاهای لذیذ</li>
    </ul>
  </div>

  <div class="column content">
    <h1>آرمانشهر</h1>
    <p>این یک متن تزئینی در مورد یک شهر خیالی است که زمانی فیلسوفی فکر می کرد می توان ان را بنا نهاد. ما در این قسمت این متن را نوشته ایم تا نتایج کد ها را ببینیم. </p>
    <p>درباره قالب بندی وب و صفحات واکنش گرا در درس های آینده خواهید آموخت.</p>
  </div>
</div>

<div class="footer">
  <p>تمامی حقوق محفوظ است</p>
</div>

</body>
</html>

نمونه ای از قالب بندی یک صفحه وب