frontend-bootcamp/step1-02/exercise/index.html

<html>
  <body>
    <div
      class="codepen"
      data-theme-id="36294"
      data-prefill
      data-editable="true"
      data-height="100%"
      data-theme-id="1"
      data-default-tab="html,result"
    >
      <pre data-lang="css">
/* 1. */

/* 2. */

/* 3. */

/* 4. */

/* 5. */

/* 6. */

/* Bonus */
      </pre>
      <pre data-lang="html">
&lt;!-- Without changing the below markup apply the styles asked for in the markup. Do not apply styles that a tag doesn't ask for -->

&lt;section&gt;
  &lt;h2&gt;1. Text Color: Red&lt;/h2&gt;
  &lt;div&gt;2. Color Green (hint: Sibling Selector)&lt;/div&gt;
  &lt;main&gt;
    &lt;ul class=&quot;myList&quot;&gt;
      &lt;li&gt;
        3. Border Green
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class=&quot;myClass&quot;&gt;4. Background Green&lt;/div&gt;
    &lt;div class=&quot;myClass otherClass&quot;&gt;
      5. Background Green &amp; Color White
      (Hint Qualified Selector)
    &lt;/div&gt;
    &lt;div id=&quot;myId&quot; class=&quot;otherClass&quot;&gt;6. Background Yellow&lt;/div&gt;
  &lt;/main&gt;
  &lt;ul&gt;
    &lt;li&gt;
      Don't Style Me
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div&gt;Bonus: Border Pink&lt;/div&gt;
&lt;/section&gt;
      </pre>
    </div>

    <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
  </body>
</html>