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”
<section id="fun-facts"> will house the entire section
<div class=”three-items”> will house the row the contains the three cells
<div class=”an-item”> will house an individual cell
<div class=”item-text”> will house the text for an individual cell
- We will use <div class=”item-text”> to create padding between the cells
Challenge: why can’t we simply use <tt><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
</section>
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 <img> 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.