5-CSS Main

Video

Steps

1. The main section is the next part of the CSS to cover.

2. Add the following code:

   section #main {
    /*background-color: #FCFBE6;*/
    background-color: rgba(252,251,243,0.7);
    margin: 0 0 2.0em;
    padding: 1.5em  0 2.0em 1.5em;
    display: inline-block;
    border-radius: 2em;
    box-shadow: 1px 1px 5px #777;/* offset-x | offset-y | blur-radius | color */
   }
   section div.panel{
    float: left;
    position: relative;
    width: 250px;
    margin: 0 0.5em 2.0em 0.5em;
    padding: 1.0em;
    background-color: #fff;
    border: #ccc solid 1px;
    border-radius: 0.6em;
   }
   section div.panel img.cheeseType {
    width: 100%;
   }

3. Again, go in and play around with the code.

4. The app should now look like this:

   

5. It's looking better but wait... What's the footer doing way up in between the main section and the sidebar? That's silly, it doesn't belong there! Luckily, that's our next task.