Github and Website Workshop/three-column-section

From OpenHatch wiki
Jump to navigation Jump to search

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.

GH-Website-Mockup1.png

HTML[edit]

<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

Question: why can’t we simply use <div class=”an-item”>?

  • 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[edit]

Solution code


CSS[edit]

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”

div.three-items {
   display: block; /* display block is default for divs - this is the difference between between div and span */
   text-align: center;
   width: 100%;
}
div.an-item {
   display: inline-block; /* this element is block but will be flowed with surrounding content as if it were a single inline box (kind of like span) */
   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.

Next: Challenge 10