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

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



HTML
 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

Question: 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?

Challenge: add divs to index.html following the above guidelines
Solution code

CSS
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”

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.

Next: Challenge 10