تكليفات الدروس من [ 30 ] إلى [ 33 ]

<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="black"></div>

<div>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod, sed. Ea ipsum
  similique quasi rem, fugiat voluptatibus reiciendis nam debitis earum quo veniam
  laudantium mollitia atque! Laborum ea nam doloribus.
  <span class="top-left">1</span>
  <span class="bottom-left">2</span>
  <span class="top-right">3</span>
  <span class="bottom-right">4</span>
</div>

<ul>
  <li>
    HTML
    <ol>
      <li>Slim</li>
      <li>Pugjs</li>
      <li>HAML</li>
    </ol>
  </li>
  <li>
    CSS
    <ol>
      <li>SASS</li>
      <li>LESS</li>
      <li>PostCSS</li>
    </ol>
  </li>
  <li>
    JavaScript
    <ul>
      <li>Vuejs</li>
      <li>Sveltejs</li>
    </ul>
  </li>
</ul>