Lesson #1

I do not know the syntax 
for box-shadow by heart

@laurenpittenger

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

box-shadow: ??;

box-shadow: horizontal vertical blur spread color; 

Lesson #2

Know the basics

@laurenpittenger

Lesson #3

Looking it up is 
resourceful, not cheating

@laurenpittenger

Lesson #4

Learn what to ask (Google)

@laurenpittenger

Lesson #5

How to make a single div owl

@laurenpittenger

(100 lessons in 1)

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

div

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

div:before

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

The basic body

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

The beak

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

The beak

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

Layered linear gradient backgrounds

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

The eyes

Element Layers

• div:before
  • content
  • box shadow
    (first on top, last on bottom)
• div
  • background images
  • background color

Further Exploration

• Shorthand background property to keep
  owl's body background color grey?
• Add feet to the :after element?