HTML and CSS Reference
In-Depth Information
.promo-btn {
display: inline-block;
width: 208px;
padding: 13px 0;
background-color: #6c0733;
box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
font-size: 20px;
color: #fefefe;
}
Remember that the
.promo-btn
class applies to both buttons, working as a base rule set.
The second button also has a class of
.more-btn
, which allows us to add other styles that
are unique to the second button.
Styling the Footer Section
We have a few other formatting improvements we want to make to our page, in particular in
the footer and the sidebar. You'll recall that in
Chapter 2
, we took care of the layout of both
the footer and the section in the sidebar called “Most Popular,” and we started to fix the styles
in the “Yummy Tweets” section earlier in this chapter. We'll now clean up the look of the text
in those sections.
Let's run through the additions to the different parts of the footer. First, we want to remove all
the list bullets from the unordered lists in all the footer sections, and fix some of the margins
and padding to match the design. We'll do this by adding to an existing declaration block, and
adding a new declaration block to target the
<ul>
elements in the footer:
footer {
background-color: rgb(66, 3, 30);
padding-top: 10px;
padding-bottom: 50px;
}
...
footer ul {
list-style: none;
