Github and Website Workshop/three-column-section

Welcome to Challenge 9 of the Github and Website Workshop - creating a section with three cells

Text is often organized in columns to create the illusion of sub-sections

(insert image here)

The goal of this challenge is to create a section with three cells.

HTML
Like the navigation bar, we want the content to appear on the same line (instead of being stacked on top of each other).

Therefore, we will utilize “display: inline-block”

 will house the entire section

   will house the row the contains the three cells

   will house an individual cell

   will house the text for an individual cell
 * We will use    to create padding between the cells

Challenge: why can’t we simply use <div class=”an-item”></tt> ? Hint: we are setting the width of each cell to be 33% (⅓ of 100%), what would padding do to the width?

Reference code: <section id="fun-facts"> Fun Facts Text here Text here Text here

CSS

div.three-items { display: block; text-align: center; width: 100%; }

div.an-item { display: inline-block; width: 33%; }

Challenge: creating padding between the cells Hint: use div#item-text to do so

Challenge: add images above the text in each cell and make them circular Hint: define a class in and use “border-radius: 50%” in the CSS

Save the changes and reload index.html When you’re satisfied, commit and push the changes

Save the changes and reload index.html. When you’re satisfied, commit and push the changes.