mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
59 lines
1.3 KiB
HTML
59 lines
1.3 KiB
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">
|
|
<!-- Without changing the HTML markup, apply the styles asked for in the markup. Do not apply styles that a tag doesn't ask for. -->
|
|
|
|
<section>
|
|
<h2>1. Text Color: Red</h2>
|
|
<div>2. Color Green (hint: Sibling Selector)</div>
|
|
<main>
|
|
<ul class="myList">
|
|
<li>
|
|
3. Border Green
|
|
</li>
|
|
</ul>
|
|
<div class="myClass">4. Background Green</div>
|
|
<div class="myClass otherClass">
|
|
5. Background Green & Color White
|
|
(Hint Qualified Selector)
|
|
</div>
|
|
<div id="myId" class="otherClass">6. Background Yellow</div>
|
|
</main>
|
|
<ul>
|
|
<li>
|
|
Don't Style Me
|
|
</li>
|
|
</ul>
|
|
<div>Bonus: Border Pink</div>
|
|
</section>
|
|
</pre>
|
|
</div>
|
|
|
|
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
|
</body>
|
|
</html>
|