Creating the second page
Any time you're working with vanilla HTML, the easiest thing to do is copy your index.html
file, change the name of it for your second page, and delete all the content you don't need.
In this case, that means deleting everything from after the hero section, all the way down to the footer.
This time, we have three sections that follow the hero. With the first one being able to rely on what we've already created:
<!-- header + hero -->
<section class="background-accent section">
<div class="wrapper">
<div class="equal-columns">
<!-- where to look -->
</div>
</div>
</section>
<section class="section">
<div class="wrapper">
<!-- interactive guide -->
</div>
</section>
<section class="background-extra-dark section" data-padding="compact">
<div class="wrapper" data-width="wide">
<!-- faq -->
</div>
</section>