Putting it All Together
that may not be fully supported by some versions of Internet Explorer. You
can improve your experience by enabling JavaScript.</p>
</noscript>
<![endif]-->
<section class="main">
...
</section>
<section class="extra">
...
</section>
</div>
<footer id="site-info">
<nav id="nav-info">
<ul>
<li><a href="/help">Help</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/shipping">Shipping</a></li>
<li><a href="/villains">Villain Policy</a></li>
</ul>
</nav>
<p class="slogan">Proud purveyors of practical paraphernalia for the
contemporary costumed crime-fighter</p>
<p class="copyright">Copyright © 2011–2012 Power Outfitters</p>
</footer>
</body>
</html>
Fleshing Out the Home Page
Before we dive into designing the Power Outfitters site with CSS, let’s fill in some content so we’ll have
something more to work with. We’re only working on the home page for now, but we can establish some
patterns that might carry through to other pages on the site. The choices you make in marking up different
types of content—which elements to use, in what order, and what classes and IDs to assign (if any)—are
just as much part of the design process as your choices of colors and fonts. Think it through; consider how
the content will be read and used, how that content might change and adapt to varying needs, and how
you’ll style it later.
Our home page begins simply enough with a title and short introduction—an h1 and some paragraphs.
Nothing too fancy here, and you’ve already seen it a dozen times in this book. The one addition we’re
making here is a class for the page title:
