Create a new project named colostomo-home-page
.
Reproduce this webpage: Colostomo Inc. Home Page. Ignore the large white margin around the edge of the PDF—your version of the Colostomo Inc. Home Page should go right to the edge of the browser’s viewport.
The <title>
of the webpage is: Colostomo Inc.
How to make a block go all the way to the edge of the viewport (or any container):
- Set a
margin
to a negative value (e.g.,-1em
) - Set the
padding
to a positive value equal to the negative value (e.g.,1em
)
To find out the colors, use a color picker (see Recommended Software).
Use font stacks with 3 fonts:
- The first should come from the collection at Google Fonts, but loaded from a
fonts
folder in your newcolostomo-home-page
project. To locally load Google Fonts, use the technique outlined at Serving Google Fonts From Your Own Server, Correctly. - The second should be a common font found on most computers. Microsoft’s Core Fonts for the Web, covered in the CSS: Typography slides, would be a good choice.
- The third should be a generic font family.
For font sizing, use the method that is discussed in the font-size
section of CSS - Typography (slides PDF & notes): px
, then rem
, then em
—in the right locations.