The aim of this puzzle: Create h2
and p
HTML elements.
Walkthrough of the solution: The starter HTML has 5 elements: an h1
, h2
, p
, h2
, p
. The goal is to add another h2
and p
at the bottom of the page.
Right above the end </body>
tag, add a new h2
element by adding <h2></h2>
. Between those start and end tags, add some text. For example: Sub Heading. Then, add a new p
element by adding <p></p>
. Between those start and end tags, add some text. For example: The paragraph tag creates a block of text. This is an example of what that looks like.
Sample code solution:
(Tap below to reveal)
HTML
<html>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>The paragraph tag creates a block of text. This is an example of what that looks like. </p>
<h2 id="second-h2">Sub Heading</h2>
<p>The paragraph tag creates a block of text. This is an example of what that looks like. </p>
<h2>Sub Heading</h2>
<p>The paragraph tag creates a block of text. This is an example of what that looks like. </p>
</body>
</html>
CSS
body {
font-family: Helvetica, Arial, sans-serif;
background-color: rgb(244, 247, 250);
}
h1 {
font-size: 32px;
margin: 0;
padding: 0 0 16px 0;
font-weight: 600;
color: rgb(74, 144, 226);
}
h2 {
font-size: 24px;
margin: 0;
padding: 16px 0 8px 0;
color: rgb(30, 80, 105);
}
p {
font-size: 16px;
margin: 0 0 8px 0;
padding: 0;
line-height: 1.4;
color: rgb(30, 75, 95);
}
#second-h2 {
color: rgb(106, 76, 147);
}
HTML Concepts: <h2>
, <p>