Download
& Install

Welcome!

Atom Editor: http://atom.io
Chrome Browser: https://www.google.ca/chrome

Workshop #3

Building a one-page website

CSS Part 2

Gradients and Background Images

In the Skills section, the text may be hard to read depending on the background image. We can actually use multiple background images to set a gradient on top of the image!

Declare the gradient first so it can sit on top of the image. We also want to see the image through the gradient so use rgba color values to set the alpha transparency. Separate multiple backgrounds with a comma.

CSS Float

To get block level elements to line up side by side, the stacking flow has to be broken first.

Use the float property with a value of left or right to align the element to either side. Any element after the floated element will move up beside it. Let's try it out in the example below.

Paragraph tag - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea id quasi iusto, ex cumque omnis iste eveniet mollitia corporis enim,

Download & Install