├── README.md
├── branding
    ├── Pie in the Sky logo.png
    ├── clouds.png
    ├── color schemes.png
    ├── flickr creative commons
    │   ├── apple-pie.jpg
    │   ├── boston-creme.jpg
    │   ├── cherry-alamode.jpg
    │   ├── cherry-pie.jpg
    │   ├── coconut-creme.jpg
    │   ├── copyright.rtf
    │   ├── gone-pie.jpg
    │   ├── keylime-pie.jpg
    │   ├── lemon-meringue.jpg
    │   ├── merilee.jpg
    │   ├── mincemeat.jpg
    │   ├── mini-pies.jpg
    │   ├── mom-pie.jpg
    │   ├── peace-pie.jpg
    │   ├── peach-pie.jpg
    │   ├── pi-day.jpg
    │   ├── pie-coffee.jpg
    │   ├── pie-slice-buffet.jpg
    │   ├── pumpkin-pie.jpg
    │   └── whole-pie-buffet.jpg
    ├── fonts.pdf
    ├── sitecomp.png
    └── web copy.docx
├── day-1-flexbox
    ├── 1-intro-floats
    │   ├── begin
    │   │   ├── css
    │   │   │   ├── floats.css
    │   │   │   └── normalize.css
    │   │   ├── floats.html
    │   │   └── img
    │   │   │   ├── boston-cream.jpg
    │   │   │   ├── coconut-cream.jpg
    │   │   │   ├── keylime-pie.jpg
    │   │   │   └── pumpkin-pie.jpg
    │   ├── end
    │   │   ├── css
    │   │   │   ├── floats.css
    │   │   │   └── normalize.css
    │   │   ├── floats.html
    │   │   └── img
    │   │   │   ├── boston-cream.jpg
    │   │   │   ├── coconut-cream.jpg
    │   │   │   ├── keylime-pie.jpg
    │   │   │   └── pumpkin-pie.jpg
    │   └── instructions.txt
    ├── 2-flexbox-intro
    │   ├── Flexbox Properties.txt
    │   ├── boxes.html
    │   ├── css
    │   │   └── boxes.css
    │   ├── flexbox notes.txt
    │   └── instructions.txt
    ├── 3-flexbox-grid
    │   ├── begin
    │   │   ├── css
    │   │   │   ├── flexbox.css
    │   │   │   └── normalize.css
    │   │   ├── flexbox.html
    │   │   └── img
    │   │   │   ├── boston-cream.jpg
    │   │   │   ├── coconut-cream.jpg
    │   │   │   ├── keylime-pie.jpg
    │   │   │   └── pumpkin-pie.jpg
    │   ├── bootstrap-4.0.0-beta-dist.zip
    │   ├── end
    │   │   ├── css
    │   │   │   ├── flexbox.css
    │   │   │   └── normalize.css
    │   │   ├── flexbox.html
    │   │   └── img
    │   │   │   ├── boston-cream.jpg
    │   │   │   ├── coconut-cream.jpg
    │   │   │   ├── keylime-pie.jpg
    │   │   │   └── pumpkin-pie.jpg
    │   ├── flexboxgrid-6.3.1.zip
    │   └── instructions.txt
    ├── 4-pie-flexbox
    │   ├── begin
    │   │   ├── css
    │   │   │   └── styles.css
    │   │   ├── history.html
    │   │   └── img
    │   │   │   ├── clouds.png
    │   │   │   ├── fb5.png
    │   │   │   ├── insta4.png
    │   │   │   ├── logo.png
    │   │   │   ├── merilee.jpg
    │   │   │   ├── pi-day.jpg
    │   │   │   ├── pin2.png
    │   │   │   ├── scallop.png
    │   │   │   ├── sitecomp_02.png
    │   │   │   ├── tumblr3.png
    │   │   │   └── twitter1.png
    │   ├── end
    │   │   ├── css
    │   │   │   └── styles.css
    │   │   ├── history.html
    │   │   └── img
    │   │   │   ├── clouds.png
    │   │   │   ├── fb5.png
    │   │   │   ├── insta4.png
    │   │   │   ├── logo.png
    │   │   │   ├── merilee.jpg
    │   │   │   ├── pi-day.jpg
    │   │   │   ├── pin2.png
    │   │   │   ├── scallop.png
    │   │   │   ├── sitecomp_02.png
    │   │   │   ├── tumblr3.png
    │   │   │   └── twitter1.png
    │   └── instructions.txt
    ├── 5-image-gallery
    │   ├── begin
    │   │   ├── gallery.css
    │   │   ├── gallery.html
    │   │   └── gallery
    │   │   │   ├── apple-pie.jpg
    │   │   │   ├── boston-creme.jpg
    │   │   │   ├── cherry-alamode.jpg
    │   │   │   ├── cherry-pie.jpg
    │   │   │   ├── coconut-creme.jpg
    │   │   │   ├── gone-pie.jpg
    │   │   │   ├── keylime-pie.jpg
    │   │   │   ├── lemon-meringue.jpg
    │   │   │   ├── mincemeat.jpg
    │   │   │   ├── mini-pies.jpg
    │   │   │   ├── mom-pie.jpg
    │   │   │   ├── peace-pie.jpg
    │   │   │   ├── peach-pie.jpg
    │   │   │   ├── pie-coffee.jpg
    │   │   │   ├── pie-slice-buffet.jpg
    │   │   │   ├── pumpkin-pie.jpg
    │   │   │   └── whole-pie-buffet.jpg
    │   ├── end
    │   │   ├── gallery-2.css
    │   │   ├── gallery.css
    │   │   ├── gallery.html
    │   │   └── gallery
    │   │   │   ├── apple-pie.jpg
    │   │   │   ├── boston-creme.jpg
    │   │   │   ├── cherry-alamode.jpg
    │   │   │   ├── cherry-pie.jpg
    │   │   │   ├── coconut-creme.jpg
    │   │   │   ├── gone-pie.jpg
    │   │   │   ├── keylime-pie.jpg
    │   │   │   ├── lemon-meringue.jpg
    │   │   │   ├── mincemeat.jpg
    │   │   │   ├── mini-pies.jpg
    │   │   │   ├── mom-pie.jpg
    │   │   │   ├── peace-pie.jpg
    │   │   │   ├── peach-pie.jpg
    │   │   │   ├── pie-coffee.jpg
    │   │   │   ├── pie-slice-buffet.jpg
    │   │   │   ├── pumpkin-pie.jpg
    │   │   │   └── whole-pie-buffet.jpg
    │   └── instructions.txt
    ├── 6-responsive-images
    │   ├── begin
    │   │   ├── image-exercise.html
    │   │   └── img
    │   │   │   ├── mom-1200.jpg
    │   │   │   ├── mom-300.jpg
    │   │   │   ├── mom-767.jpg
    │   │   │   ├── peace-pie-150.jpg
    │   │   │   ├── peace-pie-500.jpg
    │   │   │   └── peace-pie-original.jpg
    │   ├── end
    │   │   ├── image-exercise.html
    │   │   ├── img
    │   │   │   ├── mom-1200.jpg
    │   │   │   ├── mom-300.jpg
    │   │   │   ├── mom-767.jpg
    │   │   │   ├── peace-pie-150.jpg
    │   │   │   ├── peace-pie-500.jpg
    │   │   │   └── peace-pie-original.jpg
    │   │   ├── picturefill.min.js
    │   │   └── style.css
    │   └── instructions.txt
    └── 7-wrapup
    │   ├── begin
    │       ├── css
    │       │   └── styles.css
    │       ├── history.html
    │       ├── img
    │       │   ├── clouds.png
    │       │   ├── fb5.png
    │       │   ├── insta4.png
    │       │   ├── logo.png
    │       │   ├── merilee.jpg
    │       │   ├── pi-day.jpg
    │       │   ├── pin2.png
    │       │   ├── scallop.png
    │       │   ├── sitecomp_02.png
    │       │   ├── tumblr3.png
    │       │   └── twitter1.png
    │       └── merilee-original.jpg
    │   ├── end
    │       ├── css
    │       │   └── styles.css
    │       ├── gallery.html
    │       ├── gallery
    │       │   ├── apple-pie.jpg
    │       │   ├── boston-creme.jpg
    │       │   ├── cherry-alamode.jpg
    │       │   ├── cherry-pie.jpg
    │       │   ├── coconut-creme.jpg
    │       │   ├── gone-pie.jpg
    │       │   ├── keylime-pie.jpg
    │       │   ├── lemon-meringue.jpg
    │       │   ├── mincemeat.jpg
    │       │   ├── mini-pies.jpg
    │       │   ├── mom-pie.jpg
    │       │   ├── peace-pie.jpg
    │       │   ├── peach-pie.jpg
    │       │   ├── pie-coffee.jpg
    │       │   ├── pie-slice-buffet.jpg
    │       │   ├── pumpkin-pie.jpg
    │       │   └── whole-pie-buffet.jpg
    │       ├── history.html
    │       ├── img
    │       │   ├── clouds.png
    │       │   ├── fb5.png
    │       │   ├── header-1200.jpg
    │       │   ├── header-850.jpg
    │       │   ├── insta4.png
    │       │   ├── logo.png
    │       │   ├── merilee-175.jpg
    │       │   ├── merilee-250.jpg
    │       │   ├── merilee-400.jpg
    │       │   ├── pi-day.jpg
    │       │   ├── pin2.png
    │       │   ├── scallop.png
    │       │   ├── sitecomp_02.png
    │       │   ├── tumblr3.png
    │       │   └── twitter1.png
    │       ├── index.html
    │       └── picturefill.min.js
    │   └── instructions.txt
├── day-2-grid
    ├── 08-grid-intro
    │   ├── Grid Properties.txt
    │   ├── basic.css
    │   ├── grid.css
    │   ├── grid.html
    │   ├── img
    │   │   ├── 1.jpg
    │   │   ├── 2.jpg
    │   │   ├── 3.jpg
    │   │   ├── 4.jpg
    │   │   ├── 5.jpg
    │   │   └── 6.jpg
    │   ├── instructions.txt
    │   ├── reordering.css
    │   └── reordering.html
    ├── 09-mondrian-painting-demo
    │   ├── begin
    │   │   ├── index.html
    │   │   └── painting.css
    │   ├── end
    │   │   ├── index.html
    │   │   └── painting.css
    │   ├── instructions.txt
    │   ├── painting-reverse.png
    │   └── painting.png
    ├── 10-mondrian-you-try-it
    │   ├── begin
    │   │   ├── mondrian2.png
    │   │   ├── youtryit.css
    │   │   └── youtryit.html
    │   ├── end
    │   │   ├── mondrian2.png
    │   │   ├── youtryit.css
    │   │   └── youtryit.html
    │   └── instructions.txt
    ├── 11-grid-grid
    │   ├── begin
    │   │   ├── css
    │   │   │   ├── grid.css
    │   │   │   └── normalize.css
    │   │   ├── grid.html
    │   │   └── img
    │   │   │   ├── boston-cream.jpg
    │   │   │   ├── coconut-cream.jpg
    │   │   │   ├── keylime-pie.jpg
    │   │   │   └── pumpkin-pie.jpg
    │   ├── end
    │   │   ├── css
    │   │   │   ├── grid.css
    │   │   │   └── normalize.css
    │   │   ├── grid.html
    │   │   └── img
    │   │   │   ├── boston-cream.jpg
    │   │   │   ├── coconut-cream.jpg
    │   │   │   ├── keylime-pie.jpg
    │   │   │   └── pumpkin-pie.jpg
    │   └── instructions.txt
    ├── 12-grid-area
    │   ├── begin
    │   │   ├── grid-area.css
    │   │   └── grid-area.html
    │   ├── end
    │   │   ├── grid-area.css
    │   │   └── grid-area.html
    │   └── instructions.txt
    ├── 13-grid-nesting
    │   ├── begin
    │   │   ├── nesting.css
    │   │   └── nesting.html
    │   ├── end
    │   │   ├── nesting.css
    │   │   └── nesting.html
    │   └── instructions.txt
    ├── 14-grid-offsets
    │   ├── begin
    │   │   ├── offsets.css
    │   │   └── offsets.html
    │   ├── end
    │   │   ├── offsets.css
    │   │   └── offsets.html
    │   └── instructions.txt
    ├── 15-pie-grid-you-try-it
    │   ├── begin
    │   │   ├── css
    │   │   │   └── styles.css
    │   │   ├── history.html
    │   │   └── img
    │   │   │   ├── clouds.png
    │   │   │   ├── fb5.png
    │   │   │   ├── insta4.png
    │   │   │   ├── logo.png
    │   │   │   ├── merilee.jpg
    │   │   │   ├── pi-day.jpg
    │   │   │   ├── pin2.png
    │   │   │   ├── scallop.png
    │   │   │   ├── sitecomp_02.png
    │   │   │   ├── tumblr3.png
    │   │   │   └── twitter1.png
    │   ├── end
    │   │   ├── css
    │   │   │   └── styles.css
    │   │   ├── history.html
    │   │   └── img
    │   │   │   ├── clouds.png
    │   │   │   ├── fb5.png
    │   │   │   ├── insta4.png
    │   │   │   ├── logo.png
    │   │   │   ├── merilee.jpg
    │   │   │   ├── pi-day.jpg
    │   │   │   ├── pin2.png
    │   │   │   ├── scallop.png
    │   │   │   ├── sitecomp_02.png
    │   │   │   ├── tumblr3.png
    │   │   │   └── twitter1.png
    │   └── instructions.txt
    ├── 16-grid-fallbacks
    │   ├── fallback url.txt
    │   └── instructions.txt
    ├── 17-grid-and-flexbox
    │   ├── begin
    │   │   ├── flexbox gallery
    │   │   │   ├── gallery-2.css
    │   │   │   ├── gallery.css
    │   │   │   ├── gallery.html
    │   │   │   └── gallery
    │   │   │   │   ├── apple-pie.jpg
    │   │   │   │   ├── boston-creme.jpg
    │   │   │   │   ├── cherry-alamode.jpg
    │   │   │   │   ├── cherry-pie.jpg
    │   │   │   │   ├── coconut-creme.jpg
    │   │   │   │   ├── gone-pie.jpg
    │   │   │   │   ├── keylime-pie.jpg
    │   │   │   │   ├── lemon-meringue.jpg
    │   │   │   │   ├── mincemeat.jpg
    │   │   │   │   ├── mini-pies.jpg
    │   │   │   │   ├── mom-pie.jpg
    │   │   │   │   ├── peace-pie.jpg
    │   │   │   │   ├── peach-pie.jpg
    │   │   │   │   ├── pie-coffee.jpg
    │   │   │   │   ├── pie-slice-buffet.jpg
    │   │   │   │   ├── pumpkin-pie.jpg
    │   │   │   │   └── whole-pie-buffet.jpg
    │   │   └── pie in the sky as grid
    │   │   │   ├── css
    │   │   │       └── styles.css
    │   │   │   ├── history.html
    │   │   │   └── img
    │   │   │       ├── clouds.png
    │   │   │       ├── fb5.png
    │   │   │       ├── insta4.png
    │   │   │       ├── logo.png
    │   │   │       ├── merilee.jpg
    │   │   │       ├── pi-day.jpg
    │   │   │       ├── pin2.png
    │   │   │       ├── scallop.png
    │   │   │       ├── sitecomp_02.png
    │   │   │       ├── tumblr3.png
    │   │   │       └── twitter1.png
    │   ├── end
    │   │   ├── css
    │   │   │   └── styles.css
    │   │   ├── gallery.html
    │   │   ├── gallery
    │   │   │   ├── apple-pie.jpg
    │   │   │   ├── boston-creme.jpg
    │   │   │   ├── cherry-alamode.jpg
    │   │   │   ├── cherry-pie.jpg
    │   │   │   ├── coconut-creme.jpg
    │   │   │   ├── gone-pie.jpg
    │   │   │   ├── keylime-pie.jpg
    │   │   │   ├── lemon-meringue.jpg
    │   │   │   ├── mincemeat.jpg
    │   │   │   ├── mini-pies.jpg
    │   │   │   ├── mom-pie.jpg
    │   │   │   ├── peace-pie.jpg
    │   │   │   ├── peach-pie.jpg
    │   │   │   ├── pie-coffee.jpg
    │   │   │   ├── pie-slice-buffet.jpg
    │   │   │   ├── pumpkin-pie.jpg
    │   │   │   └── whole-pie-buffet.jpg
    │   │   ├── history.html
    │   │   └── img
    │   │   │   ├── clouds.png
    │   │   │   ├── fb5.png
    │   │   │   ├── insta4.png
    │   │   │   ├── logo.png
    │   │   │   ├── merilee.jpg
    │   │   │   ├── pi-day.jpg
    │   │   │   ├── pin2.png
    │   │   │   ├── scallop.png
    │   │   │   ├── sitecomp_02.png
    │   │   │   ├── tumblr3.png
    │   │   │   └── twitter1.png
    │   └── instructions.txt
    └── 18-practice
    │   ├── end
    │       ├── catering.html
    │       ├── contact.html
    │       ├── css
    │       │   └── styles.css
    │       ├── gallery.html
    │       ├── gallery
    │       │   ├── apple-pie.jpg
    │       │   ├── boston-creme.jpg
    │       │   ├── cherry-alamode.jpg
    │       │   ├── cherry-pie.jpg
    │       │   ├── coconut-creme.jpg
    │       │   ├── gone-pie.jpg
    │       │   ├── keylime-pie.jpg
    │       │   ├── lemon-meringue.jpg
    │       │   ├── mincemeat.jpg
    │       │   ├── mini-pies.jpg
    │       │   ├── mom-pie.jpg
    │       │   ├── peace-pie.jpg
    │       │   ├── peach-pie.jpg
    │       │   ├── pie-coffee.jpg
    │       │   ├── pie-slice-buffet.jpg
    │       │   ├── pumpkin-pie.jpg
    │       │   └── whole-pie-buffet.jpg
    │       ├── history.html
    │       ├── img
    │       │   ├── clouds.png
    │       │   ├── fb5.png
    │       │   ├── header-1200.jpg
    │       │   ├── header-850.jpg
    │       │   ├── insta4.png
    │       │   ├── logo.png
    │       │   ├── merilee-175.jpg
    │       │   ├── merilee-250.jpg
    │       │   ├── merilee-400.jpg
    │       │   ├── merilee.jpg
    │       │   ├── pi-day.jpg
    │       │   ├── pin2.png
    │       │   ├── scallop.png
    │       │   ├── sitecomp_02.png
    │       │   ├── tumblr3.png
    │       │   └── twitter1.png
    │       ├── index.html
    │       └── menu.html
    │   └── instructions.txt
├── day1.pdf
├── day2.pdf
└── resources
    └── resources.txt


/README.md:
--------------------------------------------------------------------------------
1 | # Frontend Masters: CSS Grids and Flexbox in Responsive Web Design workshop files
2 | 
3 | Taught October 3-4, 2017, at Frontend Masters
4 | 
5 | Course is located here: https://frontendmasters.com/courses/css-grids-flexbox/ 
6 | 


--------------------------------------------------------------------------------
/branding/Pie in the Sky logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/Pie in the Sky logo.png


--------------------------------------------------------------------------------
/branding/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/clouds.png


--------------------------------------------------------------------------------
/branding/color schemes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/color schemes.png


--------------------------------------------------------------------------------
/branding/flickr creative commons/apple-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/apple-pie.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/boston-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/boston-creme.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/cherry-alamode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/cherry-alamode.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/cherry-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/cherry-pie.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/coconut-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/coconut-creme.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/copyright.rtf:
--------------------------------------------------------------------------------
 1 | {\rtf1\ansi\ansicpg1252\cocoartf1504\cocoasubrtf830
 2 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fswiss\fcharset0 Helvetica;}
 3 | {\colortbl;\red255\green255\blue255;\red26\green26\blue26;\red16\green60\blue192;}
 4 | {\*\expandedcolortbl;;\csgenericrgb\c10196\c10196\c10196;\csgenericrgb\c6275\c23529\c75294;}
 5 | \margl1440\margr1440\vieww10800\viewh8400\viewkind0
 6 | \deftab720
 7 | \pard\pardeftab720\partightenfactor0
 8 | 
 9 | \f0\fs26 \cf2 \expnd0\expndtw0\kerning0
10 | All images here are from Flickr under a Creative Commons license:\
11 | {\field{\*\fldinst{HYPERLINK "https://www.flickr.com/creativecommons/"}}{\fldrslt https://www.flickr.com/creativecommons/}}\
12 | \
13 | \pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0
14 | 
15 | \f1\fs24 \cf0 \kerning1\expnd0\expndtw0 Peace Pie https://www.flickr.com/photos/nataliemaynor/2769385618/\
16 | Pumpkin Pie https://www.flickr.com/photos/carbonnyc/4185675052/\
17 | Cherry Pie https://www.flickr.com/photos/sbogdanich/14282790114/in/photostream/\
18 | Apple Pie https://www.flickr.com/photos/53503060@N06/6079924588/\
19 | Cherry a la Mode https://www.flickr.com/photos/jeffreyww/5190507614/\
20 | Coconut Creme Pie https://www.flickr.com/photos/notahipster/4345671678/\
21 | Lemon Merengue https://www.flickr.com/photos/sterlic/7339730520/\
22 | Boston Creme https://www.flickr.com/photos/geishabot/3398619233/\
23 | Mincemeat https://www.flickr.com/photos/ayca13/8731640328/\
24 | Mom Pie https://www.flickr.com/photos/andrewmalone/1728501922/\
25 | Mini Pies https://www.flickr.com/photos/radarsmum67/11434840655/\
26 | Pi Day (strawberry rhubarb) https://www.flickr.com/photos/sonstroem/16817426161/\
27 | Peach Pie https://www.flickr.com/photos/jeffreyww/8232810503/\
28 | Gone Pie https://www.flickr.com/photos/forthefunofit/6845257928/\
29 | Key Lime Pie https://www.flickr.com/photos/ralphandjenny/5941648290/\
30 | Pie Slice Buffet https://www.flickr.com/photos/stevendepolo/15261575816/\
31 | Whole Pie Buffet https://www.flickr.com/photos/calamity_sal/3782074246/\
32 | Pie and Coffee https://www.flickr.com/photos/aloha75/8521539857/\
33 | Baker image: {\field{\*\fldinst{HYPERLINK "https://www.flickr.com/photos/tinfoilraccoon/3473313171"}}{\fldrslt 
34 | \f0\fs26 \cf3 \expnd0\expndtw0\kerning0
35 | \ul \ulc3 https://www.flickr.com/photos/tinfoilraccoon/3473313171}}}


--------------------------------------------------------------------------------
/branding/flickr creative commons/gone-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/gone-pie.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/keylime-pie.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/lemon-meringue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/lemon-meringue.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/merilee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/merilee.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/mincemeat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/mincemeat.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/mini-pies.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/mini-pies.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/mom-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/mom-pie.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/peace-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/peace-pie.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/peach-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/peach-pie.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/pi-day.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/pie-coffee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/pie-coffee.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/pie-slice-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/pie-slice-buffet.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/branding/flickr creative commons/whole-pie-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/flickr creative commons/whole-pie-buffet.jpg


--------------------------------------------------------------------------------
/branding/fonts.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/fonts.pdf


--------------------------------------------------------------------------------
/branding/sitecomp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/sitecomp.png


--------------------------------------------------------------------------------
/branding/web copy.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/branding/web copy.docx


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/begin/css/floats.css:
--------------------------------------------------------------------------------
 1 | /* Border box declaration 
 2 | https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
 3 | html {
 4 |   box-sizing: border-box;
 5 | }
 6 | /* inherit border-box on all elements in the universe and before and after
 7 |  */
 8 | *, 
 9 | *:before, 
10 | *:after {
11 |   box-sizing: inherit;
12 | }
13 | 
14 | body {
15 | 	font-family: Arial, Geneva, sans-serif;
16 | }
17 | a {
18 | 	color: #2772B0;
19 | }
20 | .wrapper {
21 | 	width: 97%;
22 | 	max-width: 1200px;
23 | 	margin: 0 auto;
24 | 	float: none;
25 | 	background-color: #fff;
26 | }
27 | 
28 | div img {
29 | 	width: 100%;
30 | 	max-width: 225px; 
31 | }
32 | 
33 | /* grid system -- mobile first! */
34 | 
35 | 
36 | /* Mobile Landscape Screen Sizes */
37 | @media only screen and (min-width: 480px)  {
38 | 
39 | }
40 | /* Desktop screen Sizes */
41 | @media only screen and (min-width: 768px) {
42 | 
43 | }


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/begin/floats.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Document</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link rel="stylesheet" href="css/normalize.css">
 8 | 	<link rel="stylesheet" href="css/floats.css">
 9 | </head>
10 | <body>
11 | 	<div class="wrapper">
12 | <!-- row 1, 4 individual boxes -->
13 | 		<div>
14 | 			<article>
15 | 				<h3>Boston Cream Pie</h3>
16 | 			    <img src="img/boston-cream.jpg" alt="Boston creme pie.">
17 | 			    <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
18 | 			    <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
19 | 			</article>
20 | 			<article>
21 | 		    	<h3>Coconut Cream Pie</h3>
22 | 		    	<img src="img/coconut-cream.jpg" alt="Coconut cream pie.">
23 | 		    	<p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p>
24 | 		    	<p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more &gt;&gt;</a></p>
25 | 		    </article>
26 | 		    <article>
27 | 		    	<h3>Key Lime Pie</h3>
28 | 		    	<img src="img/keylime-pie.jpg" alt="Key lime pie.">
29 | 		    	<p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p>
30 | 		    	<p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more &gt;&gt;</a></p>
31 | 		    </article>
32 | 		    <article>
33 | 		    	<h3>Pumpkin Pie</h3>
34 | 		    	<img src="img/pumpkin-pie.jpg" alt="Pumpkin pie.">
35 | 		    	<p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p>
36 | 		    	<p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more &gt;&gt;</a></p>
37 | 		    </article>
38 | 		</div>
39 | <!-- row 2, 2 boxes spanning 2 rows -->
40 | 		<div>
41 | 		    <article>
42 | 		    	<h3>Key Lime Pie</h3>
43 | 		    	<img src="img/keylime-pie.jpg" alt="Key lime pie.">
44 | 		    	<p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p>
45 | 		    	<p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more &gt;&gt;</a></p>
46 | 		    </article>
47 | 		    <article>
48 | 		    	<h3>Pumpkin Pie</h3>
49 | 		    	<img src="img/pumpkin-pie.jpg" alt="Pumpkin pie.">
50 | 		    	<p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p>
51 | 		    	<p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more &gt;&gt;</a></p>
52 | 		    </article>
53 | 		</div>
54 | 
55 | <!-- row 4: narrow left column, wide right/content column -->
56 | 		<div>
57 | 			<article>
58 | 				<h3>Boston Cream Pie</h3>
59 | 			    <img src="img/boston-cream.jpg" alt="Boston creme pie.">
60 | 			    <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
61 | 			    <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
62 | 			</article>
63 | 			<article>
64 | 		    	<h3>Coconut Cream Pie</h3>
65 | 		    	<img src="img/coconut-cream.jpg" alt="Coconut cream pie.">
66 | 		    	<p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p>
67 | 		    	<p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more &gt;&gt;</a></p>
68 | 		    </article>
69 | 		</div>
70 | <!-- row 4: one column -->
71 | 		<div>
72 | 			<article>
73 | 				<h3>Boston Cream Pie</h3>
74 | 			    <img src="img/boston-cream.jpg" alt="Boston creme pie.">
75 | 			    <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
76 | 			    <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
77 | 			</article>
78 | 		</div>
79 | 	</div>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/begin/img/boston-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/1-intro-floats/begin/img/boston-cream.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/begin/img/coconut-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/1-intro-floats/begin/img/coconut-cream.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/begin/img/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/1-intro-floats/begin/img/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/begin/img/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/1-intro-floats/begin/img/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/end/css/floats.css:
--------------------------------------------------------------------------------
 1 | /* Border box declaration 
 2 | https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
 3 | html {
 4 |   box-sizing: border-box;
 5 | }
 6 | /* inherit border-box on all elements in the universe and before and after
 7 |  */
 8 | *, 
 9 | *:before, 
10 | *:after {
11 |   box-sizing: inherit;
12 | }
13 | 
14 | body {
15 | 	font-family: Arial, Geneva, sans-serif;
16 | }
17 | a {
18 | 	color: #2772B0;
19 | }
20 | .wrapper {
21 | 	width: 97%;
22 | 	max-width: 1200px;
23 | 	margin: 0 auto;
24 | 	float: none;
25 | 	background-color: #fff;
26 | }
27 | 
28 | div img {
29 | 	width: 100%;
30 | 	max-width: 250px; 
31 | }
32 | /* grid system */
33 | 
34 | .row::after {
35 |     content:"";
36 |     display: table;
37 |     clear:both;
38 | } 
39 | [class*='col-'] {
40 | 	width: 92%;
41 | 	margin-left: 4%;
42 | 	margin-right: 4%;
43 | 	min-height: 1px;
44 | }
45 | 
46 | .col-1-2, 
47 | .col-1-4 {
48 | 	background-color: #ffc;
49 | }
50 | .col-2 {
51 | 	background-color: #fcf;
52 | }
53 | .col-3 {
54 | 	background-color: #cff;
55 | }
56 | .col-4 {
57 | 	background-color: #ccf;
58 | }
59 | 
60 | /* media queries */
61 | 
62 | /* Mobile Landscape Screen Sizes */
63 | @media only screen and (min-width: 480px)  {
64 | 	[class*='col-'] {
65 | 		margin-right: 0;
66 | 		min-height: 1px;
67 | 		float: left;
68 | 	}
69 | 	.col-1-2,
70 | 	.col-2 {
71 | 		width: 44%;
72 | 	}
73 | 	.col-1-4,
74 | 	.col-3,
75 | 	.col-4 {
76 | 		width: 92%;
77 | 	}
78 | 
79 | }
80 | /* Desktop screen Sizes */
81 | @media only screen and (min-width: 768px) {
82 | 	.col-1-2, 
83 | 	.col-1-4 {
84 | 		width: 20%;
85 | 	}
86 | 	.col-2 {
87 | 		width: 44%;
88 | 	}
89 | 	.col-3 {
90 | 		width: 68%;
91 | 	}
92 | 	.col-4 {
93 | 		width: 92%;
94 | 	}
95 | }


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/end/floats.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Document</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link rel="stylesheet" href="css/normalize.css">
 8 | 	<link rel="stylesheet" href="css/floats.css">
 9 | </head>
10 | <body>
11 | 	<div class="wrapper">
12 | <!-- row 1, 4 individual boxes -->
13 | 		<div class="row">
14 | 			<article class="col-1-2">
15 | 				<h3>Boston Cream Pie</h3>
16 | 			    <img src="img/boston-cream.jpg" alt="Boston creme pie.">
17 | 			    <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
18 | 			    <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
19 | 			</article>
20 | 			<article class="col-1-2">
21 | 		    	<h3>Coconut Cream Pie</h3>
22 | 		    	<img src="img/coconut-cream.jpg" alt="Coconut cream pie.">
23 | 		    	<p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p>
24 | 		    	<p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more &gt;&gt;</a></p>
25 | 		    </article>
26 | 		    <article class="col-1-2">
27 | 		    	<h3>Key Lime Pie</h3>
28 | 		    	<img src="img/keylime-pie.jpg" alt="Key lime pie.">
29 | 		    	<p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p>
30 | 		    	<p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more &gt;&gt;</a></p>
31 | 		    </article>
32 | 		    <article class="col-1-2">
33 | 		    	<h3>Pumpkin Pie</h3>
34 | 		    	<img src="img/pumpkin-pie.jpg" alt="Pumpkin pie.">
35 | 		    	<p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p>
36 | 		    	<p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more &gt;&gt;</a></p>
37 | 		    </article>
38 | 		</div>
39 | <!-- row 2, 2 boxes spanning 2 rows -->
40 | 		<div class="row">
41 | 		    <article class="col-2">
42 | 		    	<h3>Key Lime Pie</h3>
43 | 		    	<img src="img/keylime-pie.jpg" alt="Key lime pie.">
44 | 		    	<p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p>
45 | 		    	<p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more &gt;&gt;</a></p>
46 | 		    </article>
47 | 		    <article class="col-2">
48 | 		    	<h3>Pumpkin Pie</h3>
49 | 		    	<img src="img/pumpkin-pie.jpg" alt="Pumpkin pie.">
50 | 		    	<p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p>
51 | 		    	<p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more &gt;&gt;</a></p>
52 | 		    </article>
53 | 		</div>
54 | <!-- row 3: narrow left column, wide right/content column -->
55 | 		<div class="row">
56 | 			<article class="col-1-4">
57 | 				<h3>Boston Cream Pie</h3>
58 | 			    <img src="img/boston-cream.jpg" alt="Boston creme pie.">
59 | 			    <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
60 | 			    <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
61 | 			</article>
62 | 			<article class="col-3">
63 | 		    	<h3>Coconut Cream Pie</h3>
64 | 		    	<img src="img/coconut-cream.jpg" alt="Coconut cream pie.">
65 | 		    	<p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p>
66 | 		    	<p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more &gt;&gt;</a></p>
67 | 		    </article>
68 | 		</div>
69 | <!-- row 4: one column -->
70 | 		<div class="row">
71 | 			<article class="col-4">
72 | 				<h3>Boston Cream Pie</h3>
73 | 			    <img src="img/boston-cream.jpg" alt="Boston creme pie.">
74 | 			    <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
75 | 			    <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
76 | 			</article>
77 | 		</div>
78 | 	</div>
79 | </body>
80 | </html>


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/end/img/boston-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/1-intro-floats/end/img/boston-cream.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/end/img/coconut-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/1-intro-floats/end/img/coconut-cream.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/end/img/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/1-intro-floats/end/img/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/end/img/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/1-intro-floats/end/img/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/1-intro-floats/instructions.txt:
--------------------------------------------------------------------------------
 1 | 1-intro-floats Instructions
 2 | 
 3 | Look at the HTML file source. Notice the comments explaining the type of layout desired in a 4-column grid system at desktop dimensions.
 4 | 
 5 | Write the appropriate CSS to achieve the layouts specified for desktop.
 6 | 
 7 | Go farther:
 8 | 
 9 | Write the grid in mobile-first fashion.
10 | 
11 | * Styles outside the media queries are universal and work to display the site in mobile format.
12 | 
13 | * Two media queries are provided for "tablet" and "desktop" dimensions. Write styles that override the mobile layouts here. 


--------------------------------------------------------------------------------
/day-1-flexbox/2-flexbox-intro/Flexbox Properties.txt:
--------------------------------------------------------------------------------
 1 | Flexbox Properties
 2 | 
 3 | Parent (Flex Container)
 4 | 	display: flex | inline-flex;
 5 | 
 6 | 	flex-direction: row | row-reverse | column | column-reverse;
 7 | 
 8 | 	flex-wrap: wrap | nowrap | wrap-reverse;
 9 | 
10 | 	flex-flow (shorthand for flex-direction and flex-wrap)
11 | 
12 | 	justify-content (main axis): flex-start | flex-end | center | space-between | space-around | space-evenly;
13 | 
14 | 	align-items (cross axis - adjust to individual sizes): flex-start | flex-end | center | baseline | stretch;
15 | 
16 | 	align-content (cross axis - adjust to largest item): flex-start | flex-end | center | stretch | space-between | space-around;
17 | 
18 | 
19 | Children (Flex Items)
20 | 	order: <integer>;
21 | 
22 | 	flex-grow: <number>; 
23 | 
24 | 	flex-shrink: <number>; 
25 | 
26 | 	flex-basis: <length> | auto;
27 | 
28 | 	flex: shorthand for grow, shrink, and basis (default:  0 1 auto)
29 | 	
30 | 	align-self: overrides alignment set on parent
31 | 
32 | 


--------------------------------------------------------------------------------
/day-1-flexbox/2-flexbox-intro/boxes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Flexbox</title>
 6 | 	<link href="css/boxes.css" rel="stylesheet">
 7 | </head>
 8 | <body>
 9 | 	<ul>
10 | 		<li class="flex1">1 Lorem ipsum dolor sit amet.</li>
11 | 		<li class="flex1">2 Illum facere saepe nam praesentium.</li>
12 | 		<li class="flex2">3 Vero quia possimus unde sint!</li>
13 | 		<li class="flex1">4 Cupiditate, ab molestias aliquam cum.</li>
14 | 		<li class="flex2">5 Recusandae inventore distinctio reiciendis id.</li>
15 | 		<li class="flex1">6 Laboriosam iure saepe distinctio, sunt.</li>
16 | 	</ul>
17 | 			
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/day-1-flexbox/2-flexbox-intro/css/boxes.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	font-family: Arial, Helvetica, sans-serif;
 3 | }
 4 | ul {
 5 | 	list-style-type: none;
 6 | 	padding: 0;
 7 | 	margin: 0;
 8 | 	border: 1px dotted red;
 9 | }
10 | li {
11 | 	border: 1px solid #999;
12 | 	margin: 0.5em;
13 | 	padding: 0.5em;
14 | }
15 | 
16 | 
17 | 
18 | 
19 | 
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/day-1-flexbox/2-flexbox-intro/instructions.txt:
--------------------------------------------------------------------------------
1 | 2-flexbox-intro Instructions
2 | 
3 | Jen will demonstrate the basic Flexbox properties from the flexbox notes.txt document. 
4 | 
5 | Flexbox Properties.txt is a useful document to have nearby when working in Flexbox. It explains which properties apply to parents and children, along with most of their possible values.


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/begin/css/flexbox.css:
--------------------------------------------------------------------------------
 1 | /* Border box declaration 
 2 | https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
 3 | html {
 4 |   box-sizing: border-box;
 5 | }
 6 | /* inherit border-box on all elements in the universe and before and after
 7 |  */
 8 | *, 
 9 | *:before, 
10 | *:after {
11 |   box-sizing: inherit;
12 | }
13 | 
14 | body {
15 | 	font-family: Arial, Geneva, sans-serif;
16 | }
17 | a {
18 | 	color: #2772B0;
19 | }
20 | .wrapper {
21 | 	width: 97%;
22 | 	max-width: 1200px;
23 | 	margin: 0 auto;
24 | 	float: none;
25 | 	background-color: #fff;
26 | }
27 | 
28 | div img {
29 | 	width: 100%;
30 | 	max-width: 225px; 
31 | }
32 | 
33 | /* grid system -- mobile first! */
34 | 
35 | 
36 | /* Mobile Landscape Screen Sizes */
37 | @media only screen and (min-width: 480px)  {
38 | 
39 | }
40 | /* Desktop screen Sizes */
41 | @media only screen and (min-width: 768px) {
42 | 
43 | }


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/begin/flexbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Document</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link rel="stylesheet" href="css/normalize.css">
 8 | 	<link rel="stylesheet" href="css/flexbox.css">
 9 | </head>
10 | <body>
11 | 	<div class="wrapper">
12 | <!-- row 1, 4 individual boxes -->
13 | 		<div>
14 | 			<article>
15 | 				<h3>Boston Cream Pie</h3>
16 | 			    <img src="img/boston-cream.jpg" alt="Boston creme pie.">
17 | 			    <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
18 | 			    <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
19 | 			</article>
20 | 			<article>
21 | 		    	<h3>Coconut Cream Pie</h3>
22 | 		    	<img src="img/coconut-cream.jpg" alt="Coconut cream pie.">
23 | 		    	<p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p>
24 | 		    	<p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more &gt;&gt;</a></p>
25 | 		    </article>
26 | 		    <article>
27 | 		    	<h3>Key Lime Pie</h3>
28 | 		    	<img src="img/keylime-pie.jpg" alt="Key lime pie.">
29 | 		    	<p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p>
30 | 		    	<p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more &gt;&gt;</a></p>
31 | 		    </article>
32 | 		    <article>
33 | 		    	<h3>Pumpkin Pie</h3>
34 | 		    	<img src="img/pumpkin-pie.jpg" alt="Pumpkin pie.">
35 | 		    	<p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p>
36 | 		    	<p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more &gt;&gt;</a></p>
37 | 		    </article>
38 | 		</div>
39 | <!-- row 2, 2 boxes spanning 2 rows -->
40 | 		<div>
41 | 		    <article>
42 | 		    	<h3>Key Lime Pie</h3>
43 | 		    	<img src="img/keylime-pie.jpg" alt="Key lime pie.">
44 | 		    	<p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p>
45 | 		    	<p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more &gt;&gt;</a></p>
46 | 		    </article>
47 | 		    <article>
48 | 		    	<h3>Pumpkin Pie</h3>
49 | 		    	<img src="img/pumpkin-pie.jpg" alt="Pumpkin pie.">
50 | 		    	<p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p>
51 | 		    	<p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more &gt;&gt;</a></p>
52 | 		    </article>
53 | 		</div>
54 | 
55 | <!-- row 4: narrow left column, wide right/content column -->
56 | 		<div>
57 | 			<article>
58 | 				<h3>Boston Cream Pie</h3>
59 | 			    <img src="img/boston-cream.jpg" alt="Boston creme pie.">
60 | 			    <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
61 | 			    <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
62 | 			</article>
63 | 			<article>
64 | 		    	<h3>Coconut Cream Pie</h3>
65 | 		    	<img src="img/coconut-cream.jpg" alt="Coconut cream pie.">
66 | 		    	<p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p>
67 | 		    	<p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more &gt;&gt;</a></p>
68 | 		    </article>
69 | 		</div>
70 | <!-- row 4: one column -->
71 | 		<div>
72 | 			<article>
73 | 				<h3>Boston Cream Pie</h3>
74 | 			    <img src="img/boston-cream.jpg" alt="Boston creme pie.">
75 | 			    <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
76 | 			    <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
77 | 			</article>
78 | 		</div>
79 | 	</div>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/begin/img/boston-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/begin/img/boston-cream.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/begin/img/coconut-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/begin/img/coconut-cream.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/begin/img/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/begin/img/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/begin/img/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/begin/img/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/bootstrap-4.0.0-beta-dist.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/bootstrap-4.0.0-beta-dist.zip


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/end/css/flexbox.css:
--------------------------------------------------------------------------------
  1 | /* Border box declaration 
  2 | https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  3 | html {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* inherit border-box on all elements in the universe and before and after
  7 |  */
  8 | *, 
  9 | *:before, 
 10 | *:after {
 11 |   box-sizing: inherit;
 12 | }
 13 | 
 14 | body {
 15 | 	font-family: Arial, Geneva, sans-serif;
 16 | }
 17 | a {
 18 | 	color: #2772B0;
 19 | }
 20 | .wrapper {
 21 | 	width: 97%;
 22 | 	max-width: 1200px;
 23 | 	margin: 0 auto;
 24 | 	float: none;
 25 | 	background-color: #fff;
 26 | }
 27 | /* hack to make images flexible in our prototype */
 28 | div img {
 29 | 	width: 100%;
 30 | 	max-width: 250px; 
 31 | }
 32 | /* grid system */
 33 | .row {
 34 | 	display: flex;
 35 | 	flex-flow: row wrap;
 36 | 	flex: 0 1 auto;
 37 | }
 38 | [class*="col-"] {
 39 | 	flex: 0 0 92%;
 40 | 	margin: 0 4%;
 41 | }
 42 | .col-1-2,
 43 | .col-1-4 {
 44 | 	background-color: #ffc;
 45 | }
 46 | .col-2,
 47 | .col-2-4 {
 48 | 	background-color: #ccf;
 49 | }
 50 | .col-3 {
 51 | 	background-color: #fcf;
 52 | }
 53 | .col-4 {
 54 | 	background-color: #cff;
 55 | }
 56 | 
 57 | /* global alignment options */
 58 | .reverse {
 59 | 	flex-direction: row-reverse;
 60 | }
 61 | 
 62 | /* Mobile Landscape Screen Sizes */
 63 | @media only screen and (min-width: 480px)  {
 64 | 	[class*='col-']{
 65 | 		margin-left: 4%;
 66 | 		margin-right: 0%;
 67 | 	}
 68 | 	.col-1-2,
 69 | 	.col-2 {
 70 | 		flex: 0 0 44%; 
 71 | 	}
 72 | 	.col-1-4,
 73 | 	.col-3,
 74 | 	.col-4,
 75 | 	.col-2-4 {
 76 | 		flex: 0 0 92%;
 77 | 	}
 78 | 	.reverse [class*='col-'] {
 79 | 		margin-left: 0%;
 80 | 		margin-right: 4%;
 81 | 	}
 82 | 
 83 | 
 84 | }
 85 | /* Desktop screen Sizes */
 86 | @media only screen and (min-width: 768px) {
 87 | 	.col-1-2,
 88 | 	.col-1-4 {
 89 | 		flex: 0 0 20%;
 90 | 	}
 91 | 	.col-2,
 92 | 	.col-2-4 {
 93 | 		flex: 0 0 44%;
 94 | 	}
 95 | 	.col-3 {
 96 | 		flex: 0 0 68%;
 97 | 	}
 98 | 	.col-4 {
 99 | 		flex: 0 0 92%;
100 | 	}
101 | 	.order-first {
102 | 		order: 1;
103 | 	}	
104 | 	.order-second {
105 | 		order: 2;
106 | 	}
107 | 	.order-third {
108 | 		order: 3;
109 | 	}
110 | 	.order-fourth {
111 | 		order: 4;
112 | 	}
113 | }
114 | 
115 | 


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/end/img/boston-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/end/img/boston-cream.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/end/img/coconut-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/end/img/coconut-cream.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/end/img/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/end/img/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/end/img/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/end/img/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/flexboxgrid-6.3.1.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/3-flexbox-grid/flexboxgrid-6.3.1.zip


--------------------------------------------------------------------------------
/day-1-flexbox/3-flexbox-grid/instructions.txt:
--------------------------------------------------------------------------------
1 | 3-flexbox-grid Instructions
2 | 
3 | First, we'll examine the Flexbox Grid (www.flexboxgrid.com) and Bootstrap 4's grid system to see their concepts for making Flexbox work as a grid.
4 | 
5 | Next, we'll work with the files in the "begin" folder to create a 4-column grid system. The end result will be visually like the float grid system written earlier, only written with Flexbox. 
6 | 
7 | We'll also write some code for reversing the rows and reordering boxes within a row.


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/history.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | <link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | <link href="css/styles.css" rel="stylesheet" type="text/css">
 9 | </head>
10 | 
11 | <body>
12 | <div class="wrapper">
13 | 	<header class="row">
14 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
15 | 	</header>
16 | 	<nav class="row">
17 | 		<ul>
18 | 			<li><a href="#">Home</a></li>
19 | 			<li><a href="#">Menu</a></li>
20 | 			<li><a href="#">Catering</a></li>
21 | 			<li><a href="#">Pie Gallery</a></li>
22 | 			<li><a href="#">About</a></li>
23 | 			<li><a href="#">Contact</a></li>
24 | 		</ul>
25 | 	</nav>
26 | 	<div class="row">
27 | 		<article class="col-3">
28 | 			<h2>History</h2>
29 | 			<p><img src="img/merilee.jpg" alt="Merilee Wilbur, with her favorite rolling pin." class="rounded floatright">Sometimes great things come from humble beginnings. For Merilee Wilbur, that beginning came in the form of a request from her 8-year-old son, Jake, who needed a snack to take to his chess club meeting. Merilee flipped through her recipe box and pulled out her grandmother's recipe for Chess Pie. Perfect!</p>
30 | 
31 | 			<p>The pie was such a hit with the kids - and their coach - that Merilee started getting requests to bake pies for other occasions: school events, birthdays, even a Pi Day celebration at the local library. Pie in the Sky Bakery was born.</p>
32 | 
33 | 			<p>She got so many orders that her fledgling business soon outgrew her family's kitchen. In 2006, she rented her current location at 34 Main Street, where she and her team of bakers have served up fresh, delicious pies ever since.</p>
34 | 		</article>
35 | 		<div class="col-1">
36 | 			<aside class="sidebar-primary">
37 | 				<h3>Testimonials</h3>
38 | 				<blockquote>
39 | 					<p>Merilee sure knows how to bake! Not a week goes by that I don't stop in for a slice of her cherry pie. They truly are just like Mother used to make.</p>
40 | 					<cite>Elton Higbee (age 94)</cite>
41 | 				</blockquote>
42 | 			</aside>
43 | 			<aside class="sidebar-secondary">
44 | 				<h3>Pie of the Month</h3>
45 | 				<img src="img/pi-day.jpg" alt="Pi Day Pie with Strawberry filling."></aside>
46 | 		</div>
47 | 	</div>
48 | 	<footer class="row">
49 | 		<p>Copyright 2015, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
50 | 		<p>
51 | 			<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
52 | 			<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
53 | 			<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
54 | 			<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
55 | 			<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
56 | 		</p>
57 | 	</footer>
58 | 
59 | </div>
60 | </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/clouds.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/fb5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/fb5.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/insta4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/insta4.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/logo.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/merilee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/merilee.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/pi-day.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/pin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/pin2.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/scallop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/scallop.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/sitecomp_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/sitecomp_02.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/tumblr3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/tumblr3.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/begin/img/twitter1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/begin/img/twitter1.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/history.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | <link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | <link href="css/styles.css" rel="stylesheet" type="text/css">
 9 | </head>
10 | 
11 | <body>
12 | <div class="wrapper">
13 | 	<header class="row">
14 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
15 | 	</header>
16 | 	<nav class="row">
17 | 		<ul class="full-width">
18 | 			<li><a href="#">Home</a></li>
19 | 			<li><a href="#">Menu</a></li>
20 | 			<li><a href="#">Catering</a></li>
21 | 			<li><a href="#">Pie Gallery</a></li>
22 | 			<li><a href="#">About</a></li>
23 | 			<li><a href="#">Contact</a></li>
24 | 		</ul>
25 | 	</nav>
26 | 	<div class="row">
27 | 		<article class="col-3">
28 | 			<h2>History</h2>
29 | 			<p><img src="img/merilee.jpg" alt="Merilee Wilbur, with her favorite rolling pin." class="rounded floatright">Sometimes great things come from humble beginnings. For Merilee Wilbur, that beginning came in the form of a request from her 8-year-old son, Jake, who needed a snack to take to his chess club meeting. Merilee flipped through her recipe box and pulled out her grandmother's recipe for Chess Pie. Perfect!</p>
30 | 
31 | 			<p>The pie was such a hit with the kids - and their coach - that Merilee started getting requests to bake pies for other occasions: school events, birthdays, even a Pi Day celebration at the local library. Pie in the Sky Bakery was born.</p>
32 | 
33 | 			<p>She got so many orders that her fledgling business soon outgrew her family's kitchen. In 2006, she rented her current location at 34 Main Street, where she and her team of bakers have served up fresh, delicious pies ever since.</p>
34 | 		</article>
35 | 		<div class="col-1-4 row">
36 | 			<aside class="sidebar-primary">
37 | 				<h3>Testimonials</h3>
38 | 				<blockquote>
39 | 					<p>Merilee sure knows how to bake! Not a week goes by that I don't stop in for a slice of her cherry pie. They truly are just like Mother used to make.</p>
40 | 					<cite>Elton Higbee (age 94)</cite>
41 | 				</blockquote>
42 | 			</aside>
43 | 			<aside class="sidebar-secondary">
44 | 				<h3>Pie of the Month</h3>
45 | 				<img src="img/pi-day.jpg" alt="Pi Day Pie with Strawberry filling.">
46 | 			</aside>
47 | 		</div>
48 | 	</div>
49 | 	<footer class="row">
50 | 		<div class="col-4">
51 | 			<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
52 | 			<p>
53 | 				<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
54 | 				<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
55 | 				<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
56 | 				<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
57 | 				<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
58 | 			</p>
59 | 		</div>
60 | 	</footer>
61 | 
62 | </div>
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/clouds.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/fb5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/fb5.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/insta4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/insta4.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/logo.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/merilee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/merilee.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/pi-day.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/pin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/pin2.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/scallop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/scallop.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/sitecomp_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/sitecomp_02.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/tumblr3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/tumblr3.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/end/img/twitter1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/4-pie-flexbox/end/img/twitter1.png


--------------------------------------------------------------------------------
/day-1-flexbox/4-pie-flexbox/instructions.txt:
--------------------------------------------------------------------------------
 1 | 4-pie-flexbox Instructions
 2 | 
 3 | Provided is the History page of the Pie in the Sky Bakery website. This page was laid out using a 4-column floated grid system.
 4 | 
 5 | Recreate this page using a Flexbox-based grid system. Use the system developed in 3-flexbox-grid and apply it to this design.
 6 | 
 7 | Change any HTML and CSS as required. Feel free to tweak styling as you see fit.
 8 | 
 9 | If you have extra time:
10 | 
11 | Code more pages in the Pie in the Sky website. Look in the "branding" folder for colors, images, and copy.


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | *, 
 5 | *:before, 
 6 | *:after {
 7 |   box-sizing: inherit;
 8 | }
 9 | body {
10 | 	font-family: Arial, Helvetica, sans-serif;
11 | }
12 | ul {
13 | 	margin: 0;
14 | 	padding: 0;
15 | 	list-style-type: none;
16 | }
17 | @media (min-width: 550px) {
18 | }
19 | @media (min-width: 850px) { 
20 | }


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>Document</title>
  6 | 	<link href="gallery.css" rel="stylesheet">
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | </head>
  9 | <body>
 10 | 	<ul>
 11 | 		<li>
 12 | 			<figure>
 13 | 				<img src="gallery/apple-pie.jpg" alt="Apple pie.">
 14 | 				<figcaption>Apple pie, featuring apples from the latest harvest.</figcaption>
 15 | 			</figure>
 16 | 		</li>
 17 | 		<li>
 18 | 			<figure>
 19 | 				<img src="gallery/boston-creme.jpg" alt="Boston cream pie.">
 20 | 				<figcaption>Boston cream pie is the best!</figcaption>
 21 | 			</figure>
 22 | 		</li>
 23 | 		<li>
 24 | 			<figure>
 25 | 				<img src="gallery/cherry-alamode.jpg" alt="Cherry pie with ice cream.">
 26 | 				<figcaption>Mmm... cherry pie and ice cream hits the spot!</figcaption>
 27 | 			</figure>
 28 | 		</li>
 29 | 		<li>
 30 | 			<figure>
 31 | 				<img src="gallery/cherry-pie.jpg" alt="Cherry pie.">
 32 | 				<figcaption>Cherry pie is available for a short season!</figcaption>
 33 | 			</figure>
 34 | 		</li>
 35 | 		<li>
 36 | 			<figure>
 37 | 				<img src="gallery/coconut-creme.jpg" alt="Coconut creme pie.">
 38 | 				<figcaption>Coconut cream pie will transport you to the islands.</figcaption>
 39 | 			</figure>
 40 | 		</li>
 41 | 		<li>
 42 | 			<figure>
 43 | 				<img src="gallery/gone-pie.jpg" alt="Pie is all gone.">
 44 | 				<figcaption>Hurry before the pie is all gone!</figcaption>
 45 | 			</figure>
 46 | 		</li>
 47 | 		<li>
 48 | 			<figure>
 49 | 				<img src="gallery/keylime-pie.jpg" alt="Key lime pie.">
 50 | 				<figcaption>Key lime pie, featuring the smaller, sweeter limes of the Florida Keys.</figcaption>
 51 | 			</figure>
 52 | 		</li>
 53 | 		<li>
 54 | 			<figure>
 55 | 				<img src="gallery/lemon-meringue.jpg" alt="Lemon meringue pie.">
 56 | 				<figcaption>Lemon meringue pie, best consumed the day it's made.</figcaption>
 57 | 			</figure>
 58 | 		</li>
 59 | 		<li>
 60 | 			<figure>
 61 | 				<img src="gallery/mincemeat.jpg" alt="Mincemeat pie.">
 62 | 				<figcaption>Mincemeat pie for your traditional Thanksgiving table.</figcaption>
 63 | 			</figure>
 64 | 		</li>
 65 | 		<li>
 66 | 			<figure>
 67 | 				<img src="gallery/mini-pies.jpg" alt="Mini pies.">
 68 | 				<figcaption>Mini-pies... you can eat more than one!</figcaption>
 69 | 			</figure>
 70 | 		</li>
 71 | 		<li>
 72 | 			<figure>
 73 | 				<img src="gallery/mom-pie.jpg" alt="Mom pie.">
 74 | 				<figcaption>We make the best pies for Mother's Day!</figcaption>
 75 | 			</figure>
 76 | 		</li>
 77 | 		<li>
 78 | 			<figure>
 79 | 				<img src="gallery/peace-pie.jpg" alt="Peace pie, made of blueberries and raspberries.">
 80 | 				<figcaption>Our Peace Pie is made of summer's best blueberries and raspberries.</figcaption>
 81 | 			</figure>
 82 | 		</li>
 83 | 		<li>
 84 | 			<figure>
 85 | 				<img src="gallery/peach-pie.jpg" alt="Peach pie.">
 86 | 				<figcaption>Peach pie, a piece of Southern heaven.</figcaption>
 87 | 			</figure>
 88 | 		</li>
 89 | 		<li>
 90 | 			<figure>
 91 | 				<img src="gallery/pie-coffee.jpg" alt="Pie and coffee.">
 92 | 				<figcaption>What could be better than Merilee's pie and a hot cup of coffee?</figcaption>
 93 | 			</figure>
 94 | 		</li>
 95 | 		<li>
 96 | 			<figure>
 97 | 				<img src="gallery/pie-slice-buffet.jpg" alt="Buffet of pie slices.">
 98 | 				<figcaption>Heaven includes a buffet of pie options!</figcaption>
 99 | 			</figure>
100 | 		</li>
101 | 		<li>
102 | 			<figure>
103 | 				<img src="gallery/pumpkin-pie.jpg" alt="Pumpkin pie.">
104 | 				<figcaption>Pumpkin pie, a best-seller for Thanksgiving!</figcaption>
105 | 			</figure>
106 | 		</li>
107 | 		<li>
108 | 			<figure>
109 | 				<img src="gallery/whole-pie-buffet.jpg" alt="Whole pie buffet.">
110 | 				<figcaption>When slices aren't enough, offer a buffet of whole pies!</figcaption>
111 | 			</figure>
112 | 		</li>
113 | 	</ul>
114 | </body>
115 | </html>


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/apple-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/apple-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/boston-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/boston-creme.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/cherry-alamode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/cherry-alamode.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/cherry-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/cherry-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/coconut-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/coconut-creme.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/gone-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/gone-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/lemon-meringue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/lemon-meringue.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/mincemeat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/mincemeat.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/mini-pies.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/mini-pies.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/mom-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/mom-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/peace-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/peace-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/peach-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/peach-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/pie-coffee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/pie-coffee.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/pie-slice-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/pie-slice-buffet.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/begin/gallery/whole-pie-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/begin/gallery/whole-pie-buffet.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery-2.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | *, 
 5 | *:before, 
 6 | *:after {
 7 |   box-sizing: inherit;
 8 | }
 9 | body {
10 | 	font-family: Arial, Helvetica, sans-serif;
11 | }
12 | ul {
13 | 	margin: 0;
14 | 	padding: 0;
15 | 	list-style-type: none;
16 | 	display: flex;
17 | 	flex-flow: row wrap;
18 | }
19 | li {
20 | 	flex: 0 0 100%;
21 | }
22 | img { 
23 |   width: 100%; 
24 | }
25 | @media (min-width: 605px) {
26 | 	li {
27 | 		flex: 0 0 50%;
28 | 	}
29 | }
30 | @media (min-width: 910px) { 
31 | 	li {
32 | 		flex: 0 0 33%;
33 | 	}
34 | }


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | *, 
 5 | *:before, 
 6 | *:after {
 7 |   box-sizing: inherit;
 8 | }
 9 | body {
10 | 	font-family: Arial, Helvetica, sans-serif;
11 | }
12 | ul {
13 | 	margin: 0;
14 | 	padding: 0;
15 | 	list-style-type: none;
16 | 	display: flex;
17 | 	flex-flow: row wrap;
18 | }
19 | li {
20 | 	flex: auto;
21 | }
22 | img { 
23 |   width: 100%; 
24 | }
25 | 


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>Document</title>
  6 | 	<link href="gallery.css" rel="stylesheet">
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | </head>
  9 | <body>
 10 | 	<ul>
 11 | 		<li>
 12 | 			<figure>
 13 | 				<img src="gallery/apple-pie.jpg" alt="Apple pie.">
 14 | 				<figcaption>Apple pie, featuring apples from the latest harvest.</figcaption>
 15 | 			</figure>
 16 | 		</li>
 17 | 		<li>
 18 | 			<figure>
 19 | 				<img src="gallery/boston-creme.jpg" alt="Boston cream pie.">
 20 | 				<figcaption>Boston cream pie is the best!</figcaption>
 21 | 			</figure>
 22 | 		</li>
 23 | 		<li>
 24 | 			<figure>
 25 | 				<img src="gallery/cherry-alamode.jpg" alt="Cherry pie with ice cream.">
 26 | 				<figcaption>Mmm... cherry pie and ice cream hits the spot!</figcaption>
 27 | 			</figure>
 28 | 		</li>
 29 | 		<li>
 30 | 			<figure>
 31 | 				<img src="gallery/cherry-pie.jpg" alt="Cherry pie.">
 32 | 				<figcaption>Cherry pie is available for a short season!</figcaption>
 33 | 			</figure>
 34 | 		</li>
 35 | 		<li>
 36 | 			<figure>
 37 | 				<img src="gallery/coconut-creme.jpg" alt="Coconut creme pie.">
 38 | 				<figcaption>Coconut cream pie will transport you to the islands.</figcaption>
 39 | 			</figure>
 40 | 		</li>
 41 | 		<li>
 42 | 			<figure>
 43 | 				<img src="gallery/gone-pie.jpg" alt="Pie is all gone.">
 44 | 				<figcaption>Hurry before the pie is all gone!</figcaption>
 45 | 			</figure>
 46 | 		</li>
 47 | 		<li>
 48 | 			<figure>
 49 | 				<img src="gallery/keylime-pie.jpg" alt="Key lime pie.">
 50 | 				<figcaption>Key lime pie, featuring the smaller, sweeter limes of the Florida Keys.</figcaption>
 51 | 			</figure>
 52 | 		</li>
 53 | 		<li>
 54 | 			<figure>
 55 | 				<img src="gallery/lemon-meringue.jpg" alt="Lemon meringue pie.">
 56 | 				<figcaption>Lemon meringue pie, best consumed the day it's made.</figcaption>
 57 | 			</figure>
 58 | 		</li>
 59 | 		<li>
 60 | 			<figure>
 61 | 				<img src="gallery/mincemeat.jpg" alt="Mincemeat pie.">
 62 | 				<figcaption>Mincemeat pie for your traditional Thanksgiving table.</figcaption>
 63 | 			</figure>
 64 | 		</li>
 65 | 		<li>
 66 | 			<figure>
 67 | 				<img src="gallery/mini-pies.jpg" alt="Mini pies.">
 68 | 				<figcaption>Mini-pies... you can eat more than one!</figcaption>
 69 | 			</figure>
 70 | 		</li>
 71 | 		<li>
 72 | 			<figure>
 73 | 				<img src="gallery/mom-pie.jpg" alt="Mom pie.">
 74 | 				<figcaption>We make the best pies for Mother's Day!</figcaption>
 75 | 			</figure>
 76 | 		</li>
 77 | 		<li>
 78 | 			<figure>
 79 | 				<img src="gallery/peace-pie.jpg" alt="Peace pie, made of blueberries and raspberries.">
 80 | 				<figcaption>Our Peace Pie is made of summer's best blueberries and raspberries.</figcaption>
 81 | 			</figure>
 82 | 		</li>
 83 | 		<li>
 84 | 			<figure>
 85 | 				<img src="gallery/peach-pie.jpg" alt="Peach pie.">
 86 | 				<figcaption>Peach pie, a piece of Southern heaven.</figcaption>
 87 | 			</figure>
 88 | 		</li>
 89 | 		<li>
 90 | 			<figure>
 91 | 				<img src="gallery/pie-coffee.jpg" alt="Pie and coffee.">
 92 | 				<figcaption>What could be better than Merilee's pie and a hot cup of coffee?</figcaption>
 93 | 			</figure>
 94 | 		</li>
 95 | 		<li>
 96 | 			<figure>
 97 | 				<img src="gallery/pie-slice-buffet.jpg" alt="Buffet of pie slices.">
 98 | 				<figcaption>Heaven includes a buffet of pie options!</figcaption>
 99 | 			</figure>
100 | 		</li>
101 | 		<li>
102 | 			<figure>
103 | 				<img src="gallery/pumpkin-pie.jpg" alt="Pumpkin pie.">
104 | 				<figcaption>Pumpkin pie, a best-seller for Thanksgiving!</figcaption>
105 | 			</figure>
106 | 		</li>
107 | 		<li>
108 | 			<figure>
109 | 				<img src="gallery/whole-pie-buffet.jpg" alt="Whole pie buffet.">
110 | 				<figcaption>When slices aren't enough, offer a buffet of whole pies!</figcaption>
111 | 			</figure>
112 | 		</li>
113 | 	</ul>
114 | </body>
115 | </html>


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/apple-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/apple-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/boston-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/boston-creme.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/cherry-alamode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/cherry-alamode.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/cherry-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/cherry-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/coconut-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/coconut-creme.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/gone-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/gone-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/lemon-meringue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/lemon-meringue.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/mincemeat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/mincemeat.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/mini-pies.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/mini-pies.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/mom-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/mom-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/peace-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/peace-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/peach-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/peach-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/pie-coffee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/pie-coffee.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/pie-slice-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/pie-slice-buffet.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/end/gallery/whole-pie-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/5-image-gallery/end/gallery/whole-pie-buffet.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/5-image-gallery/instructions.txt:
--------------------------------------------------------------------------------
 1 | 5-image-gallery Instructions
 2 | 
 3 | Starting files are a series of images with captions, marked up as figures.
 4 | 
 5 | Display these on the page as an image gallery using Flexbox. 
 6 | 
 7 | Pretend you do not know how many images you will display. This is a real-world problem -- you may have a server sending you many images, or a few images, which must be displayed on a page to look good.
 8 | 
 9 | Test your result by adding more images (copy and paste the code present a few times) or removing images (delete some of the images) and make sure the page still looks good.
10 | 
11 | Hint: this is NOT a grid-based problem. This is how Flexbox was actually meant to be used -- a series of items, displayed on a page.
12 | 
13 | There are two possible solutions I identified. Both are technically correct. You can choose which you like based on your design preferences. Perhaps you can find other solutions?


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/begin/image-exercise.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Document</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- visit http://scottjehl.github.io/picturefill/ for picturefill source -->
 9 | 	<div class="bkgdimg"></div>
10 | 	<div>
11 | 		<img src="img/peace-pie-original.jpg" alt="The original giant peace pie">
12 | 	</div>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/begin/img/mom-1200.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/begin/img/mom-1200.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/begin/img/mom-300.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/begin/img/mom-300.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/begin/img/mom-767.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/begin/img/mom-767.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/begin/img/peace-pie-150.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/begin/img/peace-pie-150.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/begin/img/peace-pie-500.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/begin/img/peace-pie-500.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/begin/img/peace-pie-original.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/begin/img/peace-pie-original.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/end/image-exercise.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Document</title>
 6 | 	<script>
 7 |     	// Picture element HTML5 shiv
 8 |     	document.createElement( "picture" );
 9 |   	</script>
10 |   	<script src="picturefill.min.js"></script>
11 |   	<link href="style.css" rel="stylesheet">
12 | </head>
13 | <body>
14 | 	<!-- visit http://scottjehl.github.io/picturefill/ for picturefill source -->
15 | 	<div class="bkgdimg"></div>
16 | 
17 | 	<picture>
18 | 		  <source srcset="img/peace-pie-original.jpg" media="(min-width: 1200px)">
19 | 		  <source srcset="img/peace-pie-500.jpg" media="(min-width: 800px)">
20 | 		  <img src="img/peace-pie-150.jpg" alt="My amazing peace pie at the appropriate dimension!">
21 | 	</picture>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/end/img/mom-1200.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/end/img/mom-1200.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/end/img/mom-300.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/end/img/mom-300.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/end/img/mom-767.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/end/img/mom-767.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/end/img/peace-pie-150.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/end/img/peace-pie-150.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/end/img/peace-pie-500.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/end/img/peace-pie-500.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/end/img/peace-pie-original.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/6-responsive-images/end/img/peace-pie-original.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/end/style.css:
--------------------------------------------------------------------------------
 1 | .bkgdimg {
 2 | 	background: url(img/mom-300.jpg) no-repeat;
 3 | 	height: 50px;
 4 | }
 5 | 
 6 | @media (min-width: 500px) {
 7 | 	.bkgdimg {
 8 | 		background: url(img/mom-767.jpg) no-repeat;
 9 | 		height: 128px;
10 | 	}
11 | }
12 | @media (min-width: 1000px) { 
13 | 	.bkgdimg {
14 | 		background: url(img/mom-1200.jpg) no-repeat;
15 | 		height: 200px;
16 | 	}
17 | }


--------------------------------------------------------------------------------
/day-1-flexbox/6-responsive-images/instructions.txt:
--------------------------------------------------------------------------------
1 | 6-responsive-images Instructions
2 | 
3 | This exercise takes one image, in three different sizes in the img folder, and displays them on an HTML page using the <picture> tag and the Picturefill polyfill.
4 | 
5 | We will also examine responsive background images, using tips from Tim Kadlec. In this way, we can have different sizes of background images via media query, with only one image loading, rather than downloading several options and displaying one.
6 | 
7 | Media query asset downloading results 
8 | http://timkadlec.com/2012/04/media-query-asset-downloading-results/


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/history.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | <link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | <link href="css/styles.css" rel="stylesheet" type="text/css">
 9 | </head>
10 | 
11 | <body>
12 | <div class="wrapper">
13 | 	<header class="row">
14 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
15 | 	</header>
16 | 	<nav class="row">
17 | 		<ul class="full-width">
18 | 			<li><a href="#">Home</a></li>
19 | 			<li><a href="#">Menu</a></li>
20 | 			<li><a href="#">Catering</a></li>
21 | 			<li><a href="#">Pie Gallery</a></li>
22 | 			<li><a href="#">About</a></li>
23 | 			<li><a href="#">Contact</a></li>
24 | 		</ul>
25 | 	</nav>
26 | 	<div class="row">
27 | 		<article class="col-3">
28 | 			<h2>History</h2>
29 | 			<p><img src="img/merilee.jpg" alt="Merilee Wilbur, with her favorite rolling pin." class="rounded floatright">Sometimes great things come from humble beginnings. For Merilee Wilbur, that beginning came in the form of a request from her 8-year-old son, Jake, who needed a snack to take to his chess club meeting. Merilee flipped through her recipe box and pulled out her grandmother's recipe for Chess Pie. Perfect!</p>
30 | 
31 | 			<p>The pie was such a hit with the kids - and their coach - that Merilee started getting requests to bake pies for other occasions: school events, birthdays, even a Pi Day celebration at the local library. Pie in the Sky Bakery was born.</p>
32 | 
33 | 			<p>She got so many orders that her fledgling business soon outgrew her family's kitchen. In 2006, she rented her current location at 34 Main Street, where she and her team of bakers have served up fresh, delicious pies ever since.</p>
34 | 		</article>
35 | 		<div class="col-1-4 row">
36 | 			<aside class="sidebar-primary">
37 | 				<h3>Testimonials</h3>
38 | 				<blockquote>
39 | 					<p>Merilee sure knows how to bake! Not a week goes by that I don't stop in for a slice of her cherry pie. They truly are just like Mother used to make.</p>
40 | 					<cite>Elton Higbee (age 94)</cite>
41 | 				</blockquote>
42 | 			</aside>
43 | 			<aside class="sidebar-secondary">
44 | 				<h3>Pie of the Month</h3>
45 | 				<img src="img/pi-day.jpg" alt="Pi Day Pie with Strawberry filling.">
46 | 			</aside>
47 | 		</div>
48 | 	</div>
49 | 	<footer class="row">
50 | 		<div class="col-4">
51 | 			<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
52 | 			<p>
53 | 				<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
54 | 				<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
55 | 				<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
56 | 				<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
57 | 				<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
58 | 			</p>
59 | 		</div>
60 | 	</footer>
61 | 
62 | </div>
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/clouds.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/fb5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/fb5.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/insta4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/insta4.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/logo.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/merilee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/merilee.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/pi-day.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/pin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/pin2.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/scallop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/scallop.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/sitecomp_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/sitecomp_02.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/tumblr3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/tumblr3.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/img/twitter1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/img/twitter1.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/begin/merilee-original.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/begin/merilee-original.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/apple-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/apple-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/boston-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/boston-creme.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/cherry-alamode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/cherry-alamode.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/cherry-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/cherry-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/coconut-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/coconut-creme.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/gone-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/gone-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/lemon-meringue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/lemon-meringue.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/mincemeat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/mincemeat.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/mini-pies.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/mini-pies.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/mom-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/mom-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/peace-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/peace-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/peach-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/peach-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/pie-coffee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/pie-coffee.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/pie-slice-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/pie-slice-buffet.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/gallery/whole-pie-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/gallery/whole-pie-buffet.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/history.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | 	<link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | 	<link href="css/styles.css" rel="stylesheet" type="text/css">
 9 | 	<script>
10 |     	// Picture element HTML5 shiv
11 |     	document.createElement( "picture" );
12 |   	</script>
13 |   	<script src="picturefill.min.js"></script>
14 | </head>
15 | 
16 | <body>
17 | <div class="wrapper">
18 | 	<header class="row">
19 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
20 | 	</header>
21 | 	<nav class="row">
22 | 		<ul class="full-width">
23 | 			<li><a href="index.html">Home</a></li>
24 | 			<li><a href="#">Menu</a></li>
25 | 			<li><a href="#">Catering</a></li>
26 | 			<li><a href="gallery.html">Pie Gallery</a></li>
27 | 			<li><a href="history.html">History</a></li>
28 | 			<li><a href="#">Contact</a></li>
29 | 		</ul>
30 | 	</nav>
31 | 	<div class="row">
32 | 		<article class="col-3">
33 | 			<h2>History</h2>
34 | 			<picture class="floatright">
35 | 				  <source srcset="img/merilee-400.jpg" media="(min-width: 850px)">
36 | 				  <source srcset="img/merilee-250.jpg" media="(min-width: 550px)">
37 | 				  <img srcset="img/merilee-175.jpg" alt="Merilee Wilbur, owner of Pie in the Sky.">
38 | 			</picture>
39 | 			<p>Sometimes great things come from humble beginnings. For Merilee Wilbur, that beginning came in the form of a request from her 8-year-old son, Jake, who needed a snack to take to his chess club meeting. Merilee flipped through her recipe box and pulled out her grandmother's recipe for Chess Pie. Perfect!</p>
40 | 
41 | 			<p>The pie was such a hit with the kids - and their coach - that Merilee started getting requests to bake pies for other occasions: school events, birthdays, even a Pi Day celebration at the local library. Pie in the Sky Bakery was born.</p>
42 | 
43 | 			<p>She got so many orders that her fledgling business soon outgrew her family's kitchen. In 2006, she rented her current location at 34 Main Street, where she and her team of bakers have served up fresh, delicious pies ever since.</p>
44 | 		</article>
45 | 		<div class="col-1-4 row">
46 | 			<aside class="sidebar-primary">
47 | 				<h3>Testimonials</h3>
48 | 				<blockquote>
49 | 					<p>Merilee sure knows how to bake! Not a week goes by that I don't stop in for a slice of her cherry pie. They truly are just like Mother used to make.</p>
50 | 					<cite>Elton Higbee (age 94)</cite>
51 | 				</blockquote>
52 | 			</aside>
53 | 			<aside class="sidebar-secondary">
54 | 				<h3>Pie of the Month</h3>
55 | 				<img src="img/pi-day.jpg" alt="Pi Day Pie with Strawberry filling.">
56 | 			</aside>
57 | 		</div>
58 | 	</div>
59 | 	<footer class="row">
60 | 		<div class="col-4">
61 | 			<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
62 | 			<p>
63 | 				<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
64 | 				<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
65 | 				<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
66 | 				<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
67 | 				<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
68 | 			</p>
69 | 		</div>
70 | 	</footer>
71 | 
72 | </div>
73 | </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/clouds.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/fb5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/fb5.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/header-1200.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/header-1200.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/header-850.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/header-850.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/insta4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/insta4.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/logo.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/merilee-175.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/merilee-175.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/merilee-250.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/merilee-250.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/merilee-400.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/merilee-400.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/pi-day.jpg


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/pin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/pin2.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/scallop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/scallop.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/sitecomp_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/sitecomp_02.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/tumblr3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/tumblr3.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/img/twitter1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-1-flexbox/7-wrapup/end/img/twitter1.png


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/end/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | 	<link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | 	<link href="css/styles.css" rel="stylesheet" type="text/css">
 9 | 	<script>
10 |     	// Picture element HTML5 shiv
11 |     	document.createElement( "picture" );
12 |   	</script>
13 |   	<script src="picturefill.min.js"></script>
14 | </head>
15 | 
16 | <body>
17 | <div class="wrapper">
18 | 	<header class="row">
19 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
20 | 	</header>
21 | 	<nav class="row">
22 | 		<ul class="full-width">
23 | 			<li><a href="index.html">Home</a></li>
24 | 			<li><a href="#">Menu</a></li>
25 | 			<li><a href="#">Catering</a></li>
26 | 			<li><a href="gallery.html">Pie Gallery</a></li>
27 | 			<li><a href="history.html">History</a></li>
28 | 			<li><a href="#">Contact</a></li>
29 | 		</ul>
30 | 	</nav>
31 | 	<div class="heading"></div>
32 | 	<div class="row">
33 | 		<main class="col-4">
34 | 			<h2>Homemade Pies for Every Celebration</h2>
35 | 			<p>Pie in the Sky Bakery is your source for fresh, home-baked pies for every occasion. Our pies are made with only the freshest fruits and other wholesome fillings. We make our crusts with vegetable shortening and no trans-fats, so you can enjoy high quality and delicious taste in every bite.</p>
36 | 		</main>
37 | 		<div class="row">
38 | 			<article class="col-1-4">
39 | 				<h3>Testimonial</h3>
40 | 				<blockquote>
41 | 					<p>Thank you, Merilee, for all your help in making my daughter's birthday party a success. Her allergies make it difficult to find safe choices for her. You made it so easy! Everyone loved the gluten-free Apple Crumb pie, and of course, the Chess Pie.</p>
42 | 					<cite>Sharon Leroy</cite>
43 | 				</blockquote>
44 | 				<p><a href="#" class="button">More gluten-free pies</a></p>
45 | 			</article>
46 | 			<article class="col-1-4">
47 | 				<h3>Mother's Day</h3>
48 | 				<img src="gallery/mom-pie.jpg" alt="Mother's day pies!" class="responsive">
49 | 				<p>Don't wait to reserve your Mother's Day pie, complete with "Mom" on the crust!</p>
50 | 				<p><a href="#" class="button">Order now!</a></p>
51 | 			</article>
52 | 			<article class="col-1-4">
53 | 				<h3>Menu</h3>
54 | 				<img src="gallery/pie-coffee.jpg" alt="Pie and coffee rules!" class="responsive">
55 | 				<p>Join us for a slice of pie, with or without ice cream, and coffee at our Main Street location.</p>
56 | 				<p><a href="#" class="button">Eat more pie!</a></p>
57 | 			</article>
58 | 			<article class="col-1-4">
59 | 				<h3>Donations</h3>
60 | 				<blockquote>
61 | 					<p>We are grateful to Merilee and everyone at Pie in the Sky Bakery for donating 20 pies to Relay for Life. They were delicious and very much appreciated by all. </p>
62 | 					<cite>Darlene Huston, Chairperson</cite>
63 | 				</blockquote>
64 | 				<p><a href="#" class="button">Let us donate to your cause!</a></p>
65 | 			</article>
66 | 		</div>
67 | 	</div>
68 | 	<footer class="row">
69 | 		<div class="col-4">
70 | 			<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
71 | 			<p>
72 | 				<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
73 | 				<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
74 | 				<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
75 | 				<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
76 | 				<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
77 | 			</p>
78 | 		</div>
79 | 	</footer>
80 | 
81 | </div>
82 | </body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/day-1-flexbox/7-wrapup/instructions.txt:
--------------------------------------------------------------------------------
 1 | 7-wrapup Instructions
 2 | 
 3 | With the material you have learned today, create more pages for the Pie in the Sky Bakery website.
 4 | 
 5 | * Integrate a responsive image on the History page. A large-format photo of Merilee is provided.
 6 | 
 7 | * Integrate a responsive background image on one page of the site. (I chose to do this on the home page, as seen in the "end" folder.)
 8 | 
 9 | * Copy the image gallery we created in chapter 5 into a Pie in the Sky-branded page.
10 | 
11 | If you have extra time, feel free to code additional pages. There are colors, images, and copy in the "branding" folder.


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/basic.css:
--------------------------------------------------------------------------------
  1 | /* basic styles used through all forms of layout */
  2 | /* Paul Irish's border-box declaration */
  3 | html {
  4 |   box-sizing: border-box;
  5 | }
  6 | *, *:before, *:after {
  7 |   box-sizing: inherit;
  8 | }
  9 | 
 10 | body {
 11 | 	font-family: Arial, Helvetica, sans-serif;
 12 | 	background-color: #025373;
 13 | 	color: white;
 14 | 	margin: 0;
 15 | 	padding: 0;
 16 | }
 17 | header,
 18 | footer,
 19 | aside, 
 20 | section, 
 21 | article {
 22 | 	padding: 1em;
 23 | 	border-radius: 1rem;
 24 | }
 25 | footer {
 26 | 	text-align: center;
 27 | }
 28 | header,
 29 | footer {
 30 | 	background-color: #5BA9D9;
 31 | }
 32 | aside, 
 33 | section {
 34 | 	background-color: #3B82BF;
 35 | }
 36 | 
 37 | article {
 38 | 	background-color: #F2C335;
 39 | 	color: #333;
 40 | }
 41 | button {
 42 | 	background-color: #E6480F;
 43 | 	border: none;
 44 | 	border-radius: 1em;
 45 | 	font-size: 1.3em;
 46 | 	font-weight: bold;
 47 | 	padding: 0.5em;
 48 | }
 49 | button:hover {
 50 | 	color: white;
 51 | 	background-color: #F26938;
 52 | }
 53 | section aside {
 54 | 	background-color: #F26938;
 55 | }
 56 | section aside a {
 57 | 	color: white;
 58 | 	text-decoration: none;
 59 | 	background-color: #F2C335;
 60 | 	border-radius: 1em;
 61 | 	font-size: 1em;
 62 | 	font-weight: bold;
 63 | 	padding: 0.5em; 
 64 | 	margin-top: 1em;
 65 | 	display: inline-block;
 66 | }
 67 | section aside a:hover {
 68 | 	color: #333;
 69 | 	background-color: #F5D166; 
 70 | }
 71 | aside ul {
 72 | 	list-style-type: none;
 73 | 	padding: 0;
 74 | 	margin: 0;
 75 | }
 76 | aside ul a {
 77 | 	color: #F5D166;
 78 | 	text-decoration: none;
 79 | 	font-weight: bold;
 80 | 	display: block;
 81 | 	margin-bottom: 1em;
 82 | }
 83 | aside ul a:hover {
 84 | 	color: #F2C335;
 85 | }
 86 | blockquote {
 87 | 	margin: 0;
 88 | 	padding: 0;
 89 | }
 90 | blockquote p {
 91 | 	font-size: 2em;
 92 | 	font-family: Georgia, serif;
 93 | 	font-style: italic;
 94 | }
 95 | blockquote cite::before {
 96 | 	content: "\2014\00a0";
 97 | }
 98 | /* image hack to make images "responsive". Yes, not the best or the right way to do things, but it's quick! */
 99 | img {
100 | 	width: 100%;
101 | 	max-width: 100%;
102 | 	border-radius: 1em;
103 | }


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/grid.css:
--------------------------------------------------------------------------------
 1 | /* this stylesheet deals with layout by grid */
 2 | .wrapper {
 3 | 	display: grid;
 4 | 	grid-gap: 10px;
 5 | 	margin: 1%;
 6 | }
 7 | .row {
 8 | 	display: flex;
 9 | 	flex: 0 1 auto;
10 | 	flex-flow: row wrap;
11 | 	justify-content: center;
12 | 	margin-top: 1%;
13 | }
14 | 
15 | .row > div {
16 | 	margin-right: 0.5%;
17 | }
18 | 
19 | /* Large devices */
20 | @media (min-width: 880px) { 
21 | 	header {
22 | 		grid-column: 1 / 10;
23 | 	}
24 | 	section {
25 | 		grid-column: 2 / 10;
26 | 		grid-row: 2 / 3; 
27 | 	}
28 | 	aside {
29 | 		grid-column: 1 / 2;
30 | 		grid-row: 2 / 3; 
31 | 	}
32 | 	footer {
33 | 		grid-column: 1 / 10;
34 | 	}
35 | 
36 | }
37 | 
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/grid.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Grid</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link href="basic.css" rel="stylesheet">
 8 | 	<link href="grid.css" rel="stylesheet">
 9 | </head>
10 | <body>
11 | 	<div class="wrapper">
12 | 			<header>
13 | 				<h1>My Fine Website</h1>
14 | 			</header>
15 | 			<section>
16 | 				<article>
17 | 					<h2>Introductory Blurb</h2>
18 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor facere, fugiat nobis consequuntur fugit dolorem molestiae. Rem error dolor veniam quibusdam sapiente, debitis repudiandae cumque in aliquid. Corrupti optio unde, illum impedit ipsum, eveniet aliquam recusandae dolor consectetur, mollitia, culpa aperiam nesciunt quae aut voluptatem modi vero ex dolores. Modi.</p>
19 | 					<button>Call To Action</button>
20 | 				</article>
21 | 				<div class="row">
22 | 					<div><img src="img/5.jpg" alt="Palau de Musica Catalana, Barcelona, Spain"></div>
23 | 					<div><img src="img/1.jpg" alt="Palau de Musica Catalana, Barcelona, Spain"></div>
24 | 					<div><img src="img/3.jpg" alt="Palau de Musica Catalana, Barcelona, Spain"></div>
25 | 					<div><img src="img/6.jpg" alt="Palau de Musica Catalana, Barcelona, Spain"></div>
26 | 					<div><img src="img/4.jpg" alt="Palau de Musica Catalana, Barcelona, Spain"></div>
27 | 					<div><img src="img/2.jpg" alt="Palau de Musica Catalana, Barcelona, Spain"></div>
28 | 				</div>
29 | 			</section>
30 | 			<aside>
31 | 				<h3>Quick Links</h3>
32 | 				<ul>
33 | 					<li><a href="#">Thing One</a></li>
34 | 					<li><a href="#">Thing Two</a></li>
35 | 					<li><a href="#">Thing Three</a></li>
36 | 					<li><a href="#">Thing Four</a></li>
37 | 				</ul>
38 | 				<blockquote>
39 | 					<p>An inspirational quote to inspire you and stuff!</p>
40 | 					<cite>Someone Famous</cite>
41 | 				</blockquote>
42 | 			</aside>
43 | 			<footer>
44 | 				<p>A fine footer by <a href="http://www.jenkramer.org" target="_blank">Jen Kramer</a></p>
45 | 			</footer>
46 | 	</div>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/08-grid-intro/img/1.jpg


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/08-grid-intro/img/2.jpg


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/08-grid-intro/img/3.jpg


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/08-grid-intro/img/4.jpg


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/08-grid-intro/img/5.jpg


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/08-grid-intro/img/6.jpg


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/instructions.txt:
--------------------------------------------------------------------------------
1 | 8-grid-intro Instructions
2 | 
3 | Jen will talk about Grid via the Powerpoint slides to get started.
4 | 
5 | She will show some reordering of Grid with reordering.html and .css.
6 | 
7 | Use the file Grid Properties.txt as a reference through the day. Parent and child grid properties are identified, along with common values. Not all Grid properties will be covered.


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/reordering.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 | 	display: grid;
 3 | 	grid-gap: 10px;
 4 | 	font-family: Arial, sans-serif;
 5 | }
 6 | .wrapper > * {
 7 | 	padding: 1em;
 8 | 	border-radius: 1em;
 9 | }
10 | header {
11 | 	background-color: blue;
12 | 	color: white;
13 | }
14 | article {
15 | 	background-color: green;
16 | 	color: white;
17 | }
18 | aside {
19 | 	background-color: yellow;
20 | }
21 | @media (min-width: 650px) { 
22 | 	header {
23 | 		grid-column: 1 / 2;
24 | 		grid-row: 2 / 3;
25 | 	}
26 | 	article {
27 | 		grid-column: 1 / 2;
28 | 		grid-row: 1 / 2;
29 | 	}
30 | 	aside {
31 | 		grid-column: 2 / 3;
32 | 		grid-row: 1 / 3;
33 | 	}
34 | }
35 | @media (min-width: 1000px) { 
36 | 	header {
37 | 		grid-column: 2 / 3;
38 | 		grid-row: 1 / 2;
39 | 	}
40 | 	article {
41 | 		grid-column: 2 / 3;
42 | 		grid-row: 2 / 3;
43 | 	}
44 | 	aside {
45 | 		grid-column: 1 / 2;
46 | 		grid-row: 1 / 3;
47 | 	}
48 | }


--------------------------------------------------------------------------------
/day-2-grid/08-grid-intro/reordering.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Reordering</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link href="reordering.css" rel="stylesheet">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<header>
12 | 			<h1>My Fine Header</h1>
13 | 		</header>
14 | 		<article>
15 | 			<h2>Article Title</h2>
16 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
17 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
18 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
19 | 		</article>
20 | 		<aside>
21 | 			<h3>My Aside</h3>
22 | 			<blockquote>
23 | 				A fine quote!
24 | 			</blockquote>
25 | 		</aside>
26 | 	</div>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/day-2-grid/09-mondrian-painting-demo/begin/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Mondrian painting</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link href="painting.css" rel="stylesheet">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<div class="a">a</div>
12 | 		<div class="b">b</div>
13 | 		<div class="c">c</div>
14 | 		<div class="d">d</div>
15 | 		<div class="e">e</div>
16 | 		<div class="f">f</div>
17 | 		<div class="g">g</div>
18 | 	</div>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/day-2-grid/09-mondrian-painting-demo/begin/painting.css:
--------------------------------------------------------------------------------
 1 | /* Based on "Composition II in Red, Blue, and Yellow," by Piet Mondrian (1930): https://en.wikipedia.org/wiki/Piet_Mondrian */
 2 | .wrapper {
 3 |   width: 600px;
 4 |   height: 600px;
 5 |   background: url(painting.png) no-repeat;
 6 |  
 7 | }
 8 | div {
 9 | 	border: 1px solid black;
10 | 	background-color: white;
11 | 	opacity: 0.5;
12 | }
13 | .a {
14 | 
15 | }
16 | .b {
17 | 
18 | }
19 | .c {
20 | 
21 | }
22 | .d {
23 | 
24 | }
25 | .e {
26 | 
27 | }
28 | .f {
29 | 
30 | }
31 | .g {
32 | 	
33 | }
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 


--------------------------------------------------------------------------------
/day-2-grid/09-mondrian-painting-demo/end/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Mondrian painting</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link href="painting.css" rel="stylesheet">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<div class="a">a</div>
12 | 		<div class="b">b</div>
13 | 		<div class="c">c</div>
14 | 		<div class="d">d</div>
15 | 		<div class="e">e</div>
16 | 		<div class="f">f</div>
17 | 		<div class="g">g</div>
18 | 	</div>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/day-2-grid/09-mondrian-painting-demo/end/painting.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 | 	width: 600px;
 3 | 	height: 600px;
 4 | 	display: grid;
 5 | 	grid-template-rows: 0.34fr 0.42fr 0.12fr 0.12fr; /* 170px 210px 61px 61px */
 6 | 	grid-template-columns: 0.23fr 0.69fr 0.08fr; /* 124px 376px 42px*/
 7 | 	grid-gap: 30px 20px; 
 8 | 	background-color: black;
 9 | }
10 | 
11 | div {
12 | 	border: 1px solid black;
13 | 	background-color: white;
14 | }
15 | .a {
16 | 	grid-row: 1/2;
17 | 	grid-column: 1/2;
18 | 
19 | }
20 | .b {
21 | 	grid-row: 2/3;
22 | 	grid-column: 1/2;
23 | }
24 | .c {
25 | 	grid-row: 1/3;
26 | 	grid-column: 2/4;
27 | 	background-color: red;
28 | }
29 | .d {
30 | 	grid-row: 3/5;
31 | 	grid-column: 1/2;
32 | 	background-color: blue;
33 | 	color: white;
34 | }
35 | .e {
36 | 	grid-row: 3/5;
37 | 	grid-column: 2/3;
38 | }
39 | .f {
40 | 	grid-row: 3/4;
41 | 	grid-column: 3/4;
42 | }
43 | .g {
44 | 	grid-row: 4/5;
45 | 	grid-column: 3/4;
46 | 	background-color: yellow;
47 | }
48 | @media (min-device-width: 750px) and (max-device-width: 950px)  {
49 |   	.wrapper {
50 | 		grid-template-rows: 0.12fr 0.12fr 0.42fr 0.34fr; /* 61px 61px 210px 170px */
51 | 		grid-template-columns: 0.08fr 0.69fr 0.23fr; /* 42px 376px 124px*/
52 | 		grid-gap: 30px 20px; 
53 | 		background-color: green;
54 | 	}
55 | 	.a {
56 | 		grid-row: 4/5;
57 | 		grid-column: 3/4;
58 | 	}
59 | 	.b {
60 | 		grid-row: 3/4;
61 | 		grid-column: 3/4;
62 | 	}
63 | 	.c {
64 | 		grid-row: 3/5;
65 | 		grid-column: 1/3;
66 | 	}
67 | 	.d {
68 | 		grid-row: 1/3;
69 | 		grid-column: 3/4;
70 | 		background-color: blue;
71 | 	}
72 | 	.e {
73 | 		grid-row: 1/3;
74 | 		grid-column: 2/3;
75 | 	}
76 | 	.f {
77 | 		grid-row: 2/3;
78 | 		grid-column: 1/2;
79 | 	}
80 | 	.g {
81 | 		grid-row: 1/2;
82 | 		grid-column: 1/2;
83 | 	}
84 | }
85 | @media (max-device-width: 749px)  {
86 | 	.wrapper {
87 | 	  display: block;
88 | 	  background-color: orange;
89 | 	}
90 | }


--------------------------------------------------------------------------------
/day-2-grid/09-mondrian-painting-demo/instructions.txt:
--------------------------------------------------------------------------------
1 | 9-mondrian-painting-demo Instructions
2 | 
3 | Jen will walk through an interactive demo in which you'll reconstruct a painting by Piet Mondrian in CSS Grid. Copy the painting as closely as possible, given what you know about CSS Grid.
4 | 
5 | Note: You will not be 100% perfect -- the painting isn't 100% perfect! But you will be very close.
6 | 
7 | If you have more time:
8 | 
9 | Write a media query so that when the screen is small, you flip the painting upside down.


--------------------------------------------------------------------------------
/day-2-grid/09-mondrian-painting-demo/painting-reverse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/09-mondrian-painting-demo/painting-reverse.png


--------------------------------------------------------------------------------
/day-2-grid/09-mondrian-painting-demo/painting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/09-mondrian-painting-demo/painting.png


--------------------------------------------------------------------------------
/day-2-grid/10-mondrian-you-try-it/begin/mondrian2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/10-mondrian-you-try-it/begin/mondrian2.png


--------------------------------------------------------------------------------
/day-2-grid/10-mondrian-you-try-it/begin/youtryit.css:
--------------------------------------------------------------------------------
 1 | /* Based on "Composition II in Red, Blue, and Yellow," by Piet Mondrian (1930): https://en.wikipedia.org/wiki/Piet_Mondrian */
 2 | .wrapper {
 3 |   width: 633px;
 4 |   height: 458px;
 5 |   background: url(mondrian2.png) no-repeat;
 6 |  
 7 | }
 8 | div {
 9 | 	border: 1px solid black;
10 | 	background-color: white;
11 | 	opacity: 0.5;
12 | }
13 | .a {
14 | 
15 | }
16 | .b {
17 | 
18 | }
19 | .c {
20 | 
21 | }
22 | .d {
23 | 
24 | }
25 | .e {
26 | 
27 | }
28 | .f {
29 | 
30 | }
31 | .g {
32 | 	
33 | }
34 | .h {
35 | 	
36 | }
37 | .i {
38 | 	
39 | }
40 | .j {
41 | 	
42 | }
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 
52 | 
53 | 


--------------------------------------------------------------------------------
/day-2-grid/10-mondrian-you-try-it/begin/youtryit.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Mondrian painting</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link href="youtryit.css" rel="stylesheet">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<div class="a">a</div>
12 | 		<div class="b">b</div>
13 | 		<div class="c">c</div>
14 | 		<div class="d">d</div>
15 | 		<div class="e">e</div>
16 | 		<div class="f">f</div>
17 | 		<div class="g">g</div>
18 | 		<div class="h">h</div>
19 | 		<div class="i">i</div>
20 | 		<div class="j">j</div>
21 | 	</div>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/day-2-grid/10-mondrian-you-try-it/end/mondrian2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/10-mondrian-you-try-it/end/mondrian2.png


--------------------------------------------------------------------------------
/day-2-grid/10-mondrian-you-try-it/end/youtryit.css:
--------------------------------------------------------------------------------
 1 | /* Based on "Composition II in Red, Blue, and Yellow," by Piet Mondrian (1930): https://en.wikipedia.org/wiki/Piet_Mondrian */
 2 | .wrapper {
 3 | 	width: 633px;
 4 | 	height: 458px;
 5 | 	font-size: 3em;
 6 | 	font-family: Arial, helvetica, sans-serif;
 7 |   	display: grid;
 8 | 	grid-template-rows: 70px 17px 60px 54px 86px 147px;
 9 | 	grid-template-columns: 304px 92px 153px 68px;
10 | 	grid-gap: 5px; 
11 | 	background-color: black;
12 | }
13 | div {
14 | 	border: 1px solid black;
15 | 	background-color: white;
16 | }
17 | .a {
18 | 	grid-column: 1/2;
19 | 	grid-row:1/6;
20 | 	background-color: #D00819;
21 | }
22 | .b {
23 | 	grid-column: 2/3;
24 | 	grid-row: 1/3;
25 | 	background-color: #FED231;
26 | }
27 | .c {
28 | 	grid-column: 3/4;
29 | 	grid-row: 1/4;
30 | }
31 | .d {
32 | 	grid-column: 4/5;
33 | 	grid-row: 1/2;
34 | 	background-color: #D00819;
35 | }
36 | .e {
37 | 	grid-column: 2/3;
38 | 	grid-row: 3/6;
39 | }
40 | .f {
41 | 	grid-column: 3/4;
42 | 	grid-row: 4/5;
43 | 	background-color: #34497A;
44 | }
45 | .g {
46 | 	grid-column: 4/5;
47 | 	grid-row: 2/5;
48 | }
49 | .h {
50 | 	grid-column: 1/2;
51 | 	grid-row: 6/7;
52 | }
53 | .i {	
54 | 	grid-column: 2/3;
55 | 	grid-row: 6/7;
56 | 	background-color: #34497A;
57 | }
58 | .j {
59 | 	grid-column: 3/5;
60 | 	grid-row: 5/7;
61 | 	background-color: #FED231;
62 | }
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 | 
72 | 


--------------------------------------------------------------------------------
/day-2-grid/10-mondrian-you-try-it/end/youtryit.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Mondrian painting</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link href="youtryit.css" rel="stylesheet">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<div class="a">a</div>
12 | 		<div class="b">b</div>
13 | 		<div class="c">c</div>
14 | 		<div class="d">d</div>
15 | 		<div class="e">e</div>
16 | 		<div class="f">f</div>
17 | 		<div class="g">g</div>
18 | 		<div class="h">h</div>
19 | 		<div class="i">i</div>
20 | 		<div class="j">j</div>
21 | 	</div>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/day-2-grid/10-mondrian-you-try-it/instructions.txt:
--------------------------------------------------------------------------------
 1 | 10-mondrian-you-try-it Instructions
 2 | 
 3 | Now that you've built one Mondrian work of art, try for a second on your own. The broad steps you'll need to follow include:
 4 | 
 5 | 1. Determine how many rows and columns the painting has.
 6 | 
 7 | 2. Determine the approximate size of each box, in pixels. (Use a browser measuring tool to do this.)
 8 | 
 9 | 3. Write the Grid code and get the boxes to the approximate layout desired.
10 | 
11 | 4. Now add the extra code that will call out sizes for each row and column on the page.
12 | 
13 | 5. Add background colors to finish.


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/begin/css/grid.css:
--------------------------------------------------------------------------------
  1 | /* Border box declaration 
  2 | https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  3 | html {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* inherit border-box on all elements in the universe and before and after
  7 |  */
  8 | *, 
  9 | *:before, 
 10 | *:after {
 11 |   box-sizing: inherit;
 12 | }
 13 | 
 14 | body {
 15 | 	font-family: Arial, Geneva, sans-serif;
 16 | }
 17 | a {
 18 | 	color: #2772B0;
 19 | }
 20 | .wrapper {
 21 | 	width: 97%;
 22 | 	max-width: 1200px;
 23 | 	margin: 0 auto;
 24 | 	float: none;
 25 | 	background-color: #fff;
 26 | }
 27 | /* hack to make images flexible in our prototype */
 28 | div img {
 29 | 	width: 100%;
 30 | 	max-width: 250px; 
 31 | }
 32 | /* grid system */
 33 | .row {
 34 | 	display: flex;
 35 | 	flex-flow: row wrap;
 36 | 	flex: 0 1 auto;
 37 | }
 38 | [class*="col-"] {
 39 | 	flex: 0 0 92%;
 40 | 	margin: 0 4%;
 41 | }
 42 | .col-1-2,
 43 | .col-1-4 {
 44 | 	background-color: #ffc;
 45 | }
 46 | .col-2,
 47 | .col-2-4 {
 48 | 	background-color: #ccf;
 49 | }
 50 | .col-3 {
 51 | 	background-color: #fcf;
 52 | }
 53 | .col-4 {
 54 | 	background-color: #cff;
 55 | }
 56 | 
 57 | /* global alignment options */
 58 | .reverse {
 59 | 	flex-direction: row-reverse;
 60 | }
 61 | 
 62 | /* Mobile Landscape Screen Sizes */
 63 | @media only screen and (min-width: 480px)  {
 64 | 	[class*='col-']{
 65 | 		margin-left: 4%;
 66 | 		margin-right: 0%;
 67 | 	}
 68 | 	.col-1-2,
 69 | 	.col-2 {
 70 | 		flex: 0 0 44%; 
 71 | 	}
 72 | 	.col-1-4,
 73 | 	.col-3,
 74 | 	.col-4,
 75 | 	.col-2-4 {
 76 | 		flex: 0 0 92%;
 77 | 	}
 78 | 	.reverse [class*='col-'] {
 79 | 		margin-left: 0%;
 80 | 		margin-right: 4%;
 81 | 	}
 82 | 
 83 | 
 84 | }
 85 | /* Desktop screen Sizes */
 86 | @media only screen and (min-width: 768px) {
 87 | 	.col-1-2,
 88 | 	.col-1-4 {
 89 | 		flex: 0 0 20%;
 90 | 	}
 91 | 	.col-2,
 92 | 	.col-2-4 {
 93 | 		flex: 0 0 44%;
 94 | 	}
 95 | 	.col-3 {
 96 | 		flex: 0 0 68%;
 97 | 	}
 98 | 	.col-4 {
 99 | 		flex: 0 0 92%;
100 | 	}
101 | 	.order-first {
102 | 		order: 1;
103 | 	}	
104 | 	.order-second {
105 | 		order: 2;
106 | 	}
107 | 	.order-third {
108 | 		order: 3;
109 | 	}
110 | 	.order-fourth {
111 | 		order: 4;
112 | 	}
113 | }
114 | 
115 | 


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/begin/img/boston-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/11-grid-grid/begin/img/boston-cream.jpg


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/begin/img/coconut-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/11-grid-grid/begin/img/coconut-cream.jpg


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/begin/img/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/11-grid-grid/begin/img/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/begin/img/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/11-grid-grid/begin/img/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/end/css/grid.css:
--------------------------------------------------------------------------------
  1 | /* Border box declaration 
  2 | https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  3 | html {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* inherit border-box on all elements in the universe and before and after
  7 |  */
  8 | *, 
  9 | *:before, 
 10 | *:after {
 11 |   box-sizing: inherit;
 12 | }
 13 | 
 14 | body {
 15 | 	font-family: Arial, Geneva, sans-serif;
 16 | }
 17 | a {
 18 | 	color: #2772B0;
 19 | }
 20 | /* hack to make images flexible in our prototype */
 21 | div img {
 22 | 	width: 100%;
 23 | 	max-width: 250px; 
 24 | }
 25 | /* grid system */
 26 | .wrapper {
 27 | 	width: 97%;
 28 | 	max-width: 1200px;
 29 | 	background-color: #fff;
 30 | 	margin: 2%;
 31 | 	display: grid;
 32 | 	grid-gap: 10px;
 33 | }
 34 | article {
 35 | 	background-color: #ffc;
 36 | }
 37 | .r2c1,
 38 | .r2c3,
 39 | .r5c2 {
 40 | 	background-color: #ccf;
 41 | }
 42 | .r3c2 {
 43 | 	background-color: #fcf;
 44 | }
 45 | .r4c1 {
 46 | 	background-color: #cff;
 47 | }
 48 | 
 49 | /* global alignment options */
 50 | .reverse {
 51 | }
 52 | 
 53 | /* Mobile Landscape Screen Sizes */
 54 | @media only screen and (min-width: 480px)  {
 55 | 	.wrapper {
 56 | 		grid-template-columns: repeat(4, 1fr);
 57 | 		grid-template-rows: repeat(5, auto); 
 58 | 	}
 59 | 	.r1c1 {
 60 | 		grid-column: 1/3;
 61 | 	}
 62 | 	.r1c2 {
 63 | 		grid-column: 3/5;
 64 | 	}
 65 | 	.r1c3 {
 66 | 		grid-column: 1/3;
 67 | 	}
 68 | 	.r1c4 {
 69 | 		grid-column: 3/5;
 70 | 	}
 71 | 	.r2c1 {
 72 | 		grid-column: 1/3;
 73 | 	}
 74 | 	.r2c3 {
 75 | 		grid-column: 3/5;
 76 | 	}
 77 | 	.r3c1 {
 78 | 		grid-column: 1/5;
 79 | 	}
 80 | 	.r3c2 {
 81 | 		grid-column: 1/5;
 82 | 	}
 83 | 	.r4c1 {
 84 | 		grid-column: 1/5;
 85 | 	}
 86 | 	.r5c1 {
 87 | 		grid-column: 1/3;
 88 | 		grid-row: 8/9;
 89 | 	}
 90 | 	.r5c2 {
 91 | 		grid-column: 1/5;
 92 | 		grid-row: 7/8;
 93 | 	} 
 94 | 	.r5c4 {
 95 | 		grid-column: 3/5;
 96 | 		grid-row: 8/9;
 97 | 	}
 98 | }
 99 | /* Desktop screen Sizes */
100 | @media only screen and (min-width: 768px) {
101 | 	.r1c1 {
102 | 		grid-column: 1/2;
103 | 	}
104 | 	.r1c2 {
105 | 		grid-column: 2/3;
106 | 	}
107 | 	.r1c3 {
108 | 		grid-column: 3/4;
109 | 	}
110 | 	.r1c4 {
111 | 		grid-column: 4/5;
112 | 	}
113 | 	.r2c1 {
114 | 		grid-column: 1/3;
115 | 	}
116 | 	.r2c3 {
117 | 		grid-column: 3/5;
118 | 	}
119 | 	.r3c1 {
120 | 		grid-column: 1/2;
121 | 	}
122 | 	.r3c2 {
123 | 		grid-column: 2/5;
124 | 	}
125 | 	.r4c1 {
126 | 		grid-column: 1/5;
127 | 	}
128 | 	.r5c1 {
129 | 		grid-column: 1/2;
130 | 		grid-row: 5/6;
131 | 	}
132 | 	.r5c2 {
133 | 		grid-column: 2/4;
134 | 		grid-row: 5/6;
135 | 	} 
136 | 	.r5c4 {
137 | 		grid-column: 4/5;
138 | 		grid-row: 5/6;
139 | 	}
140 | }
141 | 
142 | 


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/end/img/boston-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/11-grid-grid/end/img/boston-cream.jpg


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/end/img/coconut-cream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/11-grid-grid/end/img/coconut-cream.jpg


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/end/img/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/11-grid-grid/end/img/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/end/img/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/11-grid-grid/end/img/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/11-grid-grid/instructions.txt:
--------------------------------------------------------------------------------
1 | 11-grid-grid Instructions
2 | 
3 | Let's revisit the pie grid page for a third time, building it with CSS Grid this time.
4 | 
5 | Follow instructions in the HTML for layouts, or look back at floats or Flexbox to see our results previously.


--------------------------------------------------------------------------------
/day-2-grid/12-grid-area/begin/grid-area.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 | 	display: grid;
 3 | 	grid-gap: 10px;
 4 | 	font-family: Arial, sans-serif;
 5 | }
 6 | .wrapper > * {
 7 | 	padding: 1em;
 8 | 	border-radius: 1em;
 9 | }
10 | header {
11 | 	background-color: blue;
12 | 	color: white;
13 | }
14 | article {
15 | 	background-color: green;
16 | 	color: white;
17 | }
18 | aside {
19 | 	background-color: yellow;
20 | }
21 | @media (min-width: 650px) { 
22 | 	header {
23 | 		grid-column: 1 / 2;
24 | 		grid-row: 2 / 3;
25 | 	}
26 | 	article {
27 | 		grid-column: 1 / 2;
28 | 		grid-row: 1 / 2;
29 | 	}
30 | 	aside {
31 | 		grid-column: 2 / 3;
32 | 		grid-row: 1 / 3;
33 | 	}
34 | }
35 | @media (min-width: 1000px) { 
36 | 	header {
37 | 		grid-column: 2 / 3;
38 | 		grid-row: 1 / 2;
39 | 	}
40 | 	article {
41 | 		grid-column: 2 / 3;
42 | 		grid-row: 2 / 3;
43 | 	}
44 | 	aside {
45 | 		grid-column: 1 / 2;
46 | 		grid-row: 1 / 3;
47 | 	}
48 | }


--------------------------------------------------------------------------------
/day-2-grid/12-grid-area/begin/grid-area.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Grid area</title>
 6 | 	<link href="grid-area.css" rel="stylesheet">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<header>
12 | 			<h1>My Fine Header</h1>
13 | 		</header>
14 | 		<article>
15 | 			<h2>Article Title</h2>
16 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
17 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
18 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
19 | 		</article>
20 | 		<aside>
21 | 			<h3>My Aside</h3>
22 | 			<blockquote>
23 | 				A fine quote!
24 | 			</blockquote>
25 | 		</aside>
26 | 	</div>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/day-2-grid/12-grid-area/end/grid-area.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 | 	display: grid;
 3 | 	grid-gap: 10px;
 4 | 	font-family: Arial, sans-serif;
 5 | 	grid-template-columns: auto;
 6 | 	grid-template-rows: auto;
 7 | 	grid-template-areas: 
 8 |     	"header"
 9 |     	"article"
10 |     	"sidebar";
11 | }
12 | .wrapper > * {
13 | 	padding: 1em;
14 | 	border-radius: 1em;
15 | }
16 | header {
17 | 	background-color: blue;
18 | 	color: white;
19 | 	grid-area: header;
20 | }
21 | article {
22 | 	background-color: green;
23 | 	color: white;
24 | 	grid-area: article;
25 | }
26 | aside {
27 | 	background-color: yellow;
28 | 	grid-area: sidebar;
29 | 
30 | }
31 | @media (min-width: 650px) { 
32 | 	.wrapper{
33 | 		grid-template-columns: 1fr 3fr;
34 | 		grid-template-rows: auto;
35 | 		grid-template-areas: 
36 | 		    "article article article sidebar"
37 | 		    "header header header header";
38 | 	}
39 | }
40 | @media (min-width: 1000px) { 
41 | 	.wrapper {
42 | 		grid-template-areas: 
43 | 			    "header header header header"
44 | 			    "sidebar . article article";
45 | 	}
46 | }


--------------------------------------------------------------------------------
/day-2-grid/12-grid-area/end/grid-area.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Grid area</title>
 6 | 	<link href="grid-area.css" rel="stylesheet">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<header>
12 | 			<h1>My Fine Header</h1>
13 | 		</header>
14 | 		<article>
15 | 			<h2>Article Title</h2>
16 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
17 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
18 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
19 | 		</article>
20 | 		<aside>
21 | 			<h3>My Aside</h3>
22 | 			<blockquote>
23 | 				A fine quote!
24 | 			</blockquote>
25 | 		</aside>
26 | 	</div>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/day-2-grid/12-grid-area/instructions.txt:
--------------------------------------------------------------------------------
1 | 12-grid-area Instructions
2 | 
3 | The next few exercises are short, quick, and more instructional than real-world.
4 | 
5 | In this exercise, we'll learn the grid-area syntax. We have been creating grids using grid-columns and grid-rows. Now we'll name an area, then call for a layout using those named areas. 


--------------------------------------------------------------------------------
/day-2-grid/13-grid-nesting/begin/nesting.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 | 	display: grid;
 3 | 	grid-gap: 10px;
 4 | 	font-family: Arial, sans-serif;
 5 | }
 6 | .wrapper > * {
 7 | 	padding: 1em;
 8 | 	border-radius: 1em;
 9 | }
10 | header {
11 | 	background-color: blue;
12 | 	color: white;
13 | }
14 | article {
15 | 	background-color: green;
16 | 	color: white;
17 | }
18 | aside {
19 | 	background-color: yellow;
20 | }
21 | article aside {
22 | 	background-color: white;
23 | 	color: black;
24 | 	padding: 0.5em;
25 | 	border-radius: 0.5em;
26 | }
27 | @media (min-width: 650px) { 
28 | 	header {
29 | 		grid-column: 1 / 2;
30 | 		grid-row: 2 / 3;
31 | 	}
32 | 	article {
33 | 		grid-column: 1 / 2;
34 | 		grid-row: 1 / 2;
35 | 	}
36 | 	aside {
37 | 		grid-column: 2 / 3;
38 | 		grid-row: 1 / 3;
39 | 	}
40 | }
41 | @media (min-width: 1000px) { 
42 | 	header {
43 | 		grid-column: 2 / 3;
44 | 		grid-row: 1 / 2;
45 | 	}
46 | 	article {
47 | 		grid-column: 2 / 3;
48 | 		grid-row: 2 / 3;
49 | 	}
50 | 	aside {
51 | 		grid-column: 1 / 2;
52 | 		grid-row: 1 / 3;
53 | 	}
54 | }


--------------------------------------------------------------------------------
/day-2-grid/13-grid-nesting/begin/nesting.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Nesting</title>
 6 | 	<link href="nesting.css" rel="stylesheet">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<header>
12 | 			<h1>My Fine Header</h1>
13 | 		</header>
14 | 		<article>
15 | 			<h2>Article Title</h2>
16 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
17 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
18 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
19 | 			<div class="nested">
20 | 				<aside>
21 | 					<h3>Aside #1</h3>
22 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
23 | 				</aside>
24 | 				<aside>
25 | 					<h3>Aside #2</h3>
26 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
27 | 				</aside>
28 | 				<aside>
29 | 					<h3>Aside #3</h3>
30 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
31 | 				</aside>
32 | 			</div>
33 | 		</article>
34 | 		<aside>
35 | 			<h3>My Aside</h3>
36 | 			<blockquote>
37 | 				A fine quote!
38 | 			</blockquote>
39 | 		</aside>
40 | 	</div>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/day-2-grid/13-grid-nesting/end/nesting.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 | 	display: grid;
 3 | 	grid-gap: 10px;
 4 | 	font-family: Arial, sans-serif;
 5 | }
 6 | .wrapper > * {
 7 | 	padding: 1em;
 8 | 	border-radius: 1em;
 9 | }
10 | header {
11 | 	background-color: blue;
12 | 	color: white;
13 | }
14 | article {
15 | 	background-color: green;
16 | 	color: white;
17 | }
18 | aside {
19 | 	background-color: yellow;
20 | }
21 | article aside {
22 | 	background-color: white;
23 | 	color: black;
24 | 	padding: 0.5em;
25 | 	border-radius: 0.5em;
26 | }
27 | .nested {
28 | 	display: grid;
29 | 	grid-template-columns: auto;
30 | 	grid-gap: 1em;
31 | }
32 | 
33 | @media (min-width: 650px) { 
34 | 	header {
35 | 		grid-column: 1 / 2;
36 | 		grid-row: 2 / 3;
37 | 	}
38 | 	article {
39 | 		grid-column: 1 / 2;
40 | 		grid-row: 1 / 2;
41 | 	}
42 | 	.sidebar {
43 | 		grid-column: 2 / 3;
44 | 		grid-row: 1 / 3;
45 | 	}
46 | 	.nested {
47 | 		grid-template-columns: repeat(3, 1fr);
48 | 	}
49 | }
50 | @media (min-width: 1000px) { 
51 | 	header {
52 | 		grid-column: 2 / 3;
53 | 		grid-row: 1 / 2;
54 | 	}
55 | 	article {
56 | 		grid-column: 2 / 3;
57 | 		grid-row: 2 / 3;
58 | 	}
59 | 	.sidebar {
60 | 		grid-column: 1 / 2;
61 | 		grid-row: 1 / 3;
62 | 	}
63 | 
64 | 
65 | }


--------------------------------------------------------------------------------
/day-2-grid/13-grid-nesting/end/nesting.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Nesting</title>
 6 | 	<link href="nesting.css" rel="stylesheet">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<header>
12 | 			<h1>My Fine Header</h1>
13 | 		</header>
14 | 		<article>
15 | 			<h2>Article Title</h2>
16 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
17 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
18 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
19 | 			<div class="nested">
20 | 				<aside>
21 | 					<h3>Aside #1</h3>
22 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
23 | 				</aside>
24 | 				<aside>
25 | 					<h3>Aside #2</h3>
26 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
27 | 				</aside>
28 | 				<aside>
29 | 					<h3>Aside #3</h3>
30 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
31 | 				</aside>
32 | 			</div>
33 | 		</article>
34 | 		<aside class="sidebar">
35 | 			<h3>My Aside</h3>
36 | 			<blockquote>
37 | 				A fine quote!
38 | 			</blockquote>
39 | 		</aside>
40 | 	</div>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/day-2-grid/13-grid-nesting/instructions.txt:
--------------------------------------------------------------------------------
1 | 13-grid-nesting Instructions
2 | 
3 | In this exercise, I've added a series of articles inside of the main article. Write a nested grid to display these on the page at different media queries.


--------------------------------------------------------------------------------
/day-2-grid/14-grid-offsets/begin/offsets.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 | 	display: grid;
 3 | 	grid-gap: 10px;
 4 | 	font-family: Arial, sans-serif;
 5 | }
 6 | .wrapper > * {
 7 | 	padding: 1em;
 8 | 	border-radius: 1em;
 9 | }
10 | header {
11 | 	background-color: blue;
12 | 	color: white;
13 | }
14 | article {
15 | 	background-color: green;
16 | 	color: white;
17 | }
18 | aside {
19 | 	background-color: yellow;
20 | }
21 | article aside {
22 | 	background-color: white;
23 | 	color: black;
24 | 	padding: 0.5em;
25 | 	border-radius: 0.5em;
26 | }
27 | 
28 | @media (min-width: 650px) { 
29 | 	header {
30 | 		grid-column: 1 / 2;
31 | 		grid-row: 2 / 3;
32 | 	}
33 | 	article {
34 | 		grid-column: 1 / 2;
35 | 		grid-row: 1 / 2;
36 | 	}
37 | 	.sidebar {
38 | 		grid-column: 2 / 3;
39 | 		grid-row: 1 / 3;
40 | 	}
41 | }
42 | @media (min-width: 1000px) { 
43 | 	header {
44 | 		grid-column: 2 / 3;
45 | 		grid-row: 1 / 2;
46 | 	}
47 | 	article {
48 | 		grid-column: 2 / 3;
49 | 		grid-row: 2 / 3;
50 | 	}
51 | 	.sidebar {
52 | 		grid-column: 1 / 2;
53 | 		grid-row: 1 / 3;
54 | 	}
55 | 
56 | }


--------------------------------------------------------------------------------
/day-2-grid/14-grid-offsets/begin/offsets.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Offsets</title>
 6 | 	<link href="offsets.css" rel="stylesheet">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<header>
12 | 			<h1>My Fine Header</h1>
13 | 		</header>
14 | 		<article>
15 | 			<h2>Article Title</h2>
16 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
17 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
18 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
19 | 			<div class="nested">
20 | 				<aside>
21 | 					<h3>Aside #1</h3>
22 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
23 | 				</aside>
24 | 				<aside>
25 | 					<h3>Aside #3</h3>
26 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
27 | 				</aside>
28 | 			</div>
29 | 		</article>
30 | 		<aside class="sidebar">
31 | 			<h3>My Aside</h3>
32 | 			<blockquote>
33 | 				A fine quote!
34 | 			</blockquote>
35 | 		</aside>
36 | 	</div>
37 | </body>
38 | </html>
39 | </html>


--------------------------------------------------------------------------------
/day-2-grid/14-grid-offsets/end/offsets.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 | 	display: grid;
 3 | 	grid-gap: 10px;
 4 | 	font-family: Arial, sans-serif;
 5 | }
 6 | .wrapper > * {
 7 | 	padding: 1em;
 8 | 	border-radius: 1em;
 9 | }
10 | header {
11 | 	background-color: blue;
12 | 	color: white;
13 | }
14 | article {
15 | 	background-color: green;
16 | 	color: white;
17 | }
18 | aside {
19 | 	background-color: yellow;
20 | }
21 | article aside {
22 | 	background-color: white;
23 | 	color: black;
24 | 	padding: 0.5em;
25 | 	border-radius: 0.5em;
26 | }
27 | .nested {
28 | 	display: grid;
29 | 	grid-template-columns: auto;
30 | 	grid-gap: 1em;
31 | }
32 | 
33 | @media (min-width: 650px) { 
34 | 	header {
35 | 		grid-column: 1 / 2;
36 | 		grid-row: 2 / 3;
37 | 	}
38 | 	article {
39 | 		grid-column: 1 / 2;
40 | 		grid-row: 1 / 2;
41 | 	}
42 | 	.sidebar {
43 | 		grid-column: 2 / 3;
44 | 		grid-row: 1 / 3;
45 | 	}
46 | 	.nested {
47 | 		grid-template-columns: repeat(3, 1fr);
48 | 		grid-template-areas: 
49 | 			"aside1 ... aside3";
50 | 	}
51 | 	.nested aside:first-child {
52 | 		grid-area: aside1;
53 | 	}
54 | 	.nested  aside:last-child {
55 | 		grid-area: aside3;
56 | 	}
57 | }
58 | @media (min-width: 1000px) { 
59 | 	header {
60 | 		grid-column: 2 / 3;
61 | 		grid-row: 1 / 2;
62 | 	}
63 | 	article {
64 | 		grid-column: 2 / 3;
65 | 		grid-row: 2 / 3;
66 | 	}
67 | 	.sidebar {
68 | 		grid-column: 1 / 2;
69 | 		grid-row: 1 / 3;
70 | 	}
71 | 
72 | 
73 | }


--------------------------------------------------------------------------------
/day-2-grid/14-grid-offsets/end/offsets.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Offsets</title>
 6 | 	<link href="offsets.css" rel="stylesheet">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | </head>
 9 | <body>
10 | 	<div class="wrapper">
11 | 		<header>
12 | 			<h1>My Fine Header</h1>
13 | 		</header>
14 | 		<article>
15 | 			<h2>Article Title</h2>
16 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
17 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
18 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
19 | 			<div class="nested">
20 | 				<aside>
21 | 					<h3>Aside #1</h3>
22 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
23 | 				</aside>
24 | 				<aside>
25 | 					<h3>Aside #3</h3>
26 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic iure saepe natus, suscipit repudiandae in aliquid quod tenetur dolore!</p>
27 | 				</aside>
28 | 			</div>
29 | 		</article>
30 | 		<aside class="sidebar">
31 | 			<h3>My Aside</h3>
32 | 			<blockquote>
33 | 				A fine quote!
34 | 			</blockquote>
35 | 		</aside>
36 | 	</div>
37 | </body>
38 | </html>
39 | </html>


--------------------------------------------------------------------------------
/day-2-grid/14-grid-offsets/instructions.txt:
--------------------------------------------------------------------------------
1 | 14-grid-offsets Instructions
2 | 
3 | In this exercise, I've removed Article #2 from our lineup. Using grid-area and its layout capability, leave Article #1 and Article #3 in their original places, while leaving a hole for where Article #2 used to be.


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/history.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | <link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | <link href="css/styles.css" rel="stylesheet" type="text/css">
 9 | </head>
10 | 
11 | <body>
12 | <div class="wrapper">
13 | 	<header class="row">
14 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
15 | 	</header>
16 | 	<nav class="row">
17 | 		<ul class="full-width">
18 | 			<li><a href="#">Home</a></li>
19 | 			<li><a href="#">Menu</a></li>
20 | 			<li><a href="#">Catering</a></li>
21 | 			<li><a href="#">Pie Gallery</a></li>
22 | 			<li><a href="#">About</a></li>
23 | 			<li><a href="#">Contact</a></li>
24 | 		</ul>
25 | 	</nav>
26 | 	<div class="row">
27 | 		<article class="col-3">
28 | 			<h2>History</h2>
29 | 			<p><img src="img/merilee.jpg" alt="Merilee Wilbur, with her favorite rolling pin." class="rounded floatright">Sometimes great things come from humble beginnings. For Merilee Wilbur, that beginning came in the form of a request from her 8-year-old son, Jake, who needed a snack to take to his chess club meeting. Merilee flipped through her recipe box and pulled out her grandmother's recipe for Chess Pie. Perfect!</p>
30 | 
31 | 			<p>The pie was such a hit with the kids - and their coach - that Merilee started getting requests to bake pies for other occasions: school events, birthdays, even a Pi Day celebration at the local library. Pie in the Sky Bakery was born.</p>
32 | 
33 | 			<p>She got so many orders that her fledgling business soon outgrew her family's kitchen. In 2006, she rented her current location at 34 Main Street, where she and her team of bakers have served up fresh, delicious pies ever since.</p>
34 | 		</article>
35 | 		<div class="col-1-4 row">
36 | 			<aside class="sidebar-primary">
37 | 				<h3>Testimonials</h3>
38 | 				<blockquote>
39 | 					<p>Merilee sure knows how to bake! Not a week goes by that I don't stop in for a slice of her cherry pie. They truly are just like Mother used to make.</p>
40 | 					<cite>Elton Higbee (age 94)</cite>
41 | 				</blockquote>
42 | 			</aside>
43 | 			<aside class="sidebar-secondary">
44 | 				<h3>Pie of the Month</h3>
45 | 				<img src="img/pi-day.jpg" alt="Pi Day Pie with Strawberry filling.">
46 | 			</aside>
47 | 		</div>
48 | 	</div>
49 | 	<footer class="row">
50 | 		<div class="col-4">
51 | 			<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
52 | 			<p>
53 | 				<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
54 | 				<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
55 | 				<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
56 | 				<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
57 | 				<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
58 | 			</p>
59 | 		</div>
60 | 	</footer>
61 | 
62 | </div>
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/clouds.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/fb5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/fb5.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/insta4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/insta4.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/logo.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/merilee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/merilee.jpg


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/pi-day.jpg


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/pin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/pin2.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/scallop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/scallop.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/sitecomp_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/sitecomp_02.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/tumblr3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/tumblr3.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/begin/img/twitter1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/begin/img/twitter1.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/history.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | <link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | <link href="css/styles.css" rel="stylesheet" type="text/css">
 8 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 | <div class="wrapper">
13 | 	<header>
14 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
15 | 	</header>
16 | 	<div class="bkgdimg"></div>
17 | 	<nav>
18 | 		<ul>
19 | 			<li><a href="#">Home</a></li>
20 | 			<li><a href="#">Menu</a></li>
21 | 			<li><a href="#">Catering</a></li>
22 | 			<li><a href="#">Pie Gallery</a></li>
23 | 			<li><a href="#">About</a></li>
24 | 			<li><a href="#">Contact</a></li>
25 | 		</ul>
26 | 	</nav>
27 | 	<div class="content">
28 | 		<article class="col-3">
29 | 			<h2>History</h2>
30 | 			<p><img src="img/merilee.jpg" alt="Merilee Wilbur, with her favorite rolling pin." class="rounded floatright">Sometimes great things come from humble beginnings. For Merilee Wilbur, that beginning came in the form of a request from her 8-year-old son, Jake, who needed a snack to take to his chess club meeting. Merilee flipped through her recipe box and pulled out her grandmother's recipe for Chess Pie. Perfect!</p>
31 | 
32 | 			<p>The pie was such a hit with the kids - and their coach - that Merilee started getting requests to bake pies for other occasions: school events, birthdays, even a Pi Day celebration at the local library. Pie in the Sky Bakery was born.</p>
33 | 
34 | 			<p>She got so many orders that her fledgling business soon outgrew her family's kitchen. In 2006, she rented her current location at 34 Main Street, where she and her team of bakers have served up fresh, delicious pies ever since.</p>
35 | 		</article>
36 | 		<div class="aside">
37 | 			<aside class="sidebar-primary">
38 | 				<h3>Testimonials</h3>
39 | 				<blockquote>
40 | 					<p>Merilee sure knows how to bake! Not a week goes by that I don't stop in for a slice of her cherry pie. They truly are just like Mother used to make.</p>
41 | 					<cite>Elton Higbee (age 94)</cite>
42 | 				</blockquote>
43 | 			</aside>
44 | 			<aside class="sidebar-secondary">
45 | 				<h3>Pie of the Month</h3>
46 | 				<img src="img/pi-day.jpg" alt="Pi Day Pie with Strawberry filling.">
47 | 			</aside>
48 | 		</div>
49 | 	</div>
50 | 	<footer>
51 | 		<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
52 | 		<p>
53 | 			<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
54 | 			<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
55 | 			<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
56 | 			<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
57 | 			<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
58 | 		</p>
59 | 	</footer>
60 | </div>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/clouds.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/fb5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/fb5.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/insta4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/insta4.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/logo.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/merilee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/merilee.jpg


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/pi-day.jpg


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/pin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/pin2.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/scallop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/scallop.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/sitecomp_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/sitecomp_02.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/tumblr3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/tumblr3.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/end/img/twitter1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/15-pie-grid-you-try-it/end/img/twitter1.png


--------------------------------------------------------------------------------
/day-2-grid/15-pie-grid-you-try-it/instructions.txt:
--------------------------------------------------------------------------------
1 | 15-pie-grid-you-try-it Instructions
2 | 
3 | Given all of the new Grid principles you've just learned, now apply them to the History page.
4 | 
5 | The starting files are yesterday's work with Flexbox grid. Remove the Flexbox code and replace it with CSS Grid code instead.
6 | 
7 | You may change any HTML and CSS as required.
8 | 
9 | If you have extra time, feel free to move on to another page and code that as well.


--------------------------------------------------------------------------------
/day-2-grid/16-grid-fallbacks/fallback url.txt:
--------------------------------------------------------------------------------
1 | https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks


--------------------------------------------------------------------------------
/day-2-grid/16-grid-fallbacks/instructions.txt:
--------------------------------------------------------------------------------
1 | 16-grid-fallbacks Instructions
2 | 
3 | Rachel Andrew has provided an excellent resource for fallbacks with Grid. If you must support an older browser that is not Grid-compatible, she provides a number of ways that you can write a single code base but have the layout work on old and new browsers.
4 | 
5 | https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
6 | 
7 | In general, I don't talk about browser hacks, because every project and organization supports different browsers at different levels. I prefer to teach standards-compliant code and let you look up the hacks on your own later.
8 | 
9 | In this case, this resource is excellent, and it will give you ways to use Grid today, while taking advantage of the cascade and the @supports construct.


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery-2.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | *, 
 5 | *:before, 
 6 | *:after {
 7 |   box-sizing: inherit;
 8 | }
 9 | body {
10 | 	font-family: Arial, Helvetica, sans-serif;
11 | }
12 | ul {
13 | 	margin: 0;
14 | 	padding: 0;
15 | 	list-style-type: none;
16 | 	display: flex;
17 | 	flex-flow: row wrap;
18 | }
19 | li {
20 | 	flex: 0 0 100%;
21 | }
22 | img { 
23 |   width: 100%; 
24 | }
25 | @media (min-width: 605px) {
26 | 	li {
27 | 		flex: 0 0 50%;
28 | 	}
29 | }
30 | @media (min-width: 910px) { 
31 | 	li {
32 | 		flex: 0 0 33%;
33 | 	}
34 | }


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | *, 
 5 | *:before, 
 6 | *:after {
 7 |   box-sizing: inherit;
 8 | }
 9 | body {
10 | 	font-family: Arial, Helvetica, sans-serif;
11 | }
12 | ul {
13 | 	margin: 0;
14 | 	padding: 0;
15 | 	list-style-type: none;
16 | 	display: flex;
17 | 	flex-flow: row wrap;
18 | }
19 | li {
20 | 	flex: auto;
21 | }
22 | img { 
23 |   width: 100%; 
24 | }
25 | 


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>Document</title>
  6 | 	<link href="gallery.css" rel="stylesheet">
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | </head>
  9 | <body>
 10 | 	<ul>
 11 | 		<li>
 12 | 			<figure>
 13 | 				<img src="gallery/apple-pie.jpg" alt="Apple pie.">
 14 | 				<figcaption>Apple pie, featuring apples from the latest harvest.</figcaption>
 15 | 			</figure>
 16 | 		</li>
 17 | 		<li>
 18 | 			<figure>
 19 | 				<img src="gallery/boston-creme.jpg" alt="Boston cream pie.">
 20 | 				<figcaption>Boston cream pie is the best!</figcaption>
 21 | 			</figure>
 22 | 		</li>
 23 | 		<li>
 24 | 			<figure>
 25 | 				<img src="gallery/cherry-alamode.jpg" alt="Cherry pie with ice cream.">
 26 | 				<figcaption>Mmm... cherry pie and ice cream hits the spot!</figcaption>
 27 | 			</figure>
 28 | 		</li>
 29 | 		<li>
 30 | 			<figure>
 31 | 				<img src="gallery/cherry-pie.jpg" alt="Cherry pie.">
 32 | 				<figcaption>Cherry pie is available for a short season!</figcaption>
 33 | 			</figure>
 34 | 		</li>
 35 | 		<li>
 36 | 			<figure>
 37 | 				<img src="gallery/coconut-creme.jpg" alt="Coconut creme pie.">
 38 | 				<figcaption>Coconut cream pie will transport you to the islands.</figcaption>
 39 | 			</figure>
 40 | 		</li>
 41 | 		<li>
 42 | 			<figure>
 43 | 				<img src="gallery/gone-pie.jpg" alt="Pie is all gone.">
 44 | 				<figcaption>Hurry before the pie is all gone!</figcaption>
 45 | 			</figure>
 46 | 		</li>
 47 | 		<li>
 48 | 			<figure>
 49 | 				<img src="gallery/keylime-pie.jpg" alt="Key lime pie.">
 50 | 				<figcaption>Key lime pie, featuring the smaller, sweeter limes of the Florida Keys.</figcaption>
 51 | 			</figure>
 52 | 		</li>
 53 | 		<li>
 54 | 			<figure>
 55 | 				<img src="gallery/lemon-meringue.jpg" alt="Lemon meringue pie.">
 56 | 				<figcaption>Lemon meringue pie, best consumed the day it's made.</figcaption>
 57 | 			</figure>
 58 | 		</li>
 59 | 		<li>
 60 | 			<figure>
 61 | 				<img src="gallery/mincemeat.jpg" alt="Mincemeat pie.">
 62 | 				<figcaption>Mincemeat pie for your traditional Thanksgiving table.</figcaption>
 63 | 			</figure>
 64 | 		</li>
 65 | 		<li>
 66 | 			<figure>
 67 | 				<img src="gallery/mini-pies.jpg" alt="Mini pies.">
 68 | 				<figcaption>Mini-pies... you can eat more than one!</figcaption>
 69 | 			</figure>
 70 | 		</li>
 71 | 		<li>
 72 | 			<figure>
 73 | 				<img src="gallery/mom-pie.jpg" alt="Mom pie.">
 74 | 				<figcaption>We make the best pies for Mother's Day!</figcaption>
 75 | 			</figure>
 76 | 		</li>
 77 | 		<li>
 78 | 			<figure>
 79 | 				<img src="gallery/peace-pie.jpg" alt="Peace pie, made of blueberries and raspberries.">
 80 | 				<figcaption>Our Peace Pie is made of summer's best blueberries and raspberries.</figcaption>
 81 | 			</figure>
 82 | 		</li>
 83 | 		<li>
 84 | 			<figure>
 85 | 				<img src="gallery/peach-pie.jpg" alt="Peach pie.">
 86 | 				<figcaption>Peach pie, a piece of Southern heaven.</figcaption>
 87 | 			</figure>
 88 | 		</li>
 89 | 		<li>
 90 | 			<figure>
 91 | 				<img src="gallery/pie-coffee.jpg" alt="Pie and coffee.">
 92 | 				<figcaption>What could be better than Merilee's pie and a hot cup of coffee?</figcaption>
 93 | 			</figure>
 94 | 		</li>
 95 | 		<li>
 96 | 			<figure>
 97 | 				<img src="gallery/pie-slice-buffet.jpg" alt="Buffet of pie slices.">
 98 | 				<figcaption>Heaven includes a buffet of pie options!</figcaption>
 99 | 			</figure>
100 | 		</li>
101 | 		<li>
102 | 			<figure>
103 | 				<img src="gallery/pumpkin-pie.jpg" alt="Pumpkin pie.">
104 | 				<figcaption>Pumpkin pie, a best-seller for Thanksgiving!</figcaption>
105 | 			</figure>
106 | 		</li>
107 | 		<li>
108 | 			<figure>
109 | 				<img src="gallery/whole-pie-buffet.jpg" alt="Whole pie buffet.">
110 | 				<figcaption>When slices aren't enough, offer a buffet of whole pies!</figcaption>
111 | 			</figure>
112 | 		</li>
113 | 	</ul>
114 | </body>
115 | </html>


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/apple-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/apple-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/boston-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/boston-creme.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/cherry-alamode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/cherry-alamode.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/cherry-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/cherry-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/coconut-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/coconut-creme.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/gone-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/gone-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/lemon-meringue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/lemon-meringue.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/mincemeat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/mincemeat.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/mini-pies.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/mini-pies.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/mom-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/mom-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/peace-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/peace-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/peach-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/peach-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/pie-coffee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/pie-coffee.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/pie-slice-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/pie-slice-buffet.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/whole-pie-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/flexbox gallery/gallery/whole-pie-buffet.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/history.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | <link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | <link href="css/styles.css" rel="stylesheet" type="text/css">
 9 | </head>
10 | 
11 | <body>
12 | <div class="wrapper">
13 | 	<header>
14 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
15 | 	</header>
16 | 	<div class="bkgdimg"></div>
17 | 	<nav>
18 | 		<ul>
19 | 			<li><a href="#">Home</a></li>
20 | 			<li><a href="#">Menu</a></li>
21 | 			<li><a href="#">Catering</a></li>
22 | 			<li><a href="#">Pie Gallery</a></li>
23 | 			<li><a href="#">About</a></li>
24 | 			<li><a href="#">Contact</a></li>
25 | 		</ul>
26 | 	</nav>
27 | 	<div class="content">
28 | 		<article class="col-3">
29 | 			<h2>History</h2>
30 | 			<p><img src="img/merilee.jpg" alt="Merilee Wilbur, with her favorite rolling pin." class="rounded floatright">Sometimes great things come from humble beginnings. For Merilee Wilbur, that beginning came in the form of a request from her 8-year-old son, Jake, who needed a snack to take to his chess club meeting. Merilee flipped through her recipe box and pulled out her grandmother's recipe for Chess Pie. Perfect!</p>
31 | 
32 | 			<p>The pie was such a hit with the kids - and their coach - that Merilee started getting requests to bake pies for other occasions: school events, birthdays, even a Pi Day celebration at the local library. Pie in the Sky Bakery was born.</p>
33 | 
34 | 			<p>She got so many orders that her fledgling business soon outgrew her family's kitchen. In 2006, she rented her current location at 34 Main Street, where she and her team of bakers have served up fresh, delicious pies ever since.</p>
35 | 		</article>
36 | 		<div class="aside">
37 | 			<aside class="sidebar-primary">
38 | 				<h3>Testimonials</h3>
39 | 				<blockquote>
40 | 					<p>Merilee sure knows how to bake! Not a week goes by that I don't stop in for a slice of her cherry pie. They truly are just like Mother used to make.</p>
41 | 					<cite>Elton Higbee (age 94)</cite>
42 | 				</blockquote>
43 | 			</aside>
44 | 			<aside class="sidebar-secondary">
45 | 				<h3>Pie of the Month</h3>
46 | 				<img src="img/pi-day.jpg" alt="Pi Day Pie with Strawberry filling.">
47 | 			</aside>
48 | 		</div>
49 | 	</div>
50 | 	<footer>
51 | 		<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
52 | 		<p>
53 | 			<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
54 | 			<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
55 | 			<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
56 | 			<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
57 | 			<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
58 | 		</p>
59 | 	</footer>
60 | </div>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/clouds.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/fb5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/fb5.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/insta4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/insta4.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/logo.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/merilee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/merilee.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/pi-day.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/pin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/pin2.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/scallop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/scallop.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/sitecomp_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/sitecomp_02.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/tumblr3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/tumblr3.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/twitter1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/begin/pie in the sky as grid/img/twitter1.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/apple-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/apple-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/boston-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/boston-creme.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/cherry-alamode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/cherry-alamode.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/cherry-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/cherry-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/coconut-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/coconut-creme.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/gone-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/gone-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/lemon-meringue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/lemon-meringue.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/mincemeat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/mincemeat.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/mini-pies.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/mini-pies.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/mom-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/mom-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/peace-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/peace-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/peach-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/peach-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/pie-coffee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/pie-coffee.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/pie-slice-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/pie-slice-buffet.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/gallery/whole-pie-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/gallery/whole-pie-buffet.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/history.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | <link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | <link href="css/styles.css" rel="stylesheet" type="text/css">
 8 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 | <div class="wrapper">
13 | 	<header>
14 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
15 | 	</header>
16 | 	<div class="bkgdimg"></div>
17 | 	<nav>
18 | 		<ul>
19 | 			<li><a href="#">Home</a></li>
20 | 			<li><a href="#">Menu</a></li>
21 | 			<li><a href="#">Catering</a></li>
22 | 			<li><a href="#">Pie Gallery</a></li>
23 | 			<li><a href="#">About</a></li>
24 | 			<li><a href="#">Contact</a></li>
25 | 		</ul>
26 | 	</nav>
27 | 	<div class="content">
28 | 		<article class="col-3">
29 | 			<h2>History</h2>
30 | 			<p><img src="img/merilee.jpg" alt="Merilee Wilbur, with her favorite rolling pin." class="rounded floatright">Sometimes great things come from humble beginnings. For Merilee Wilbur, that beginning came in the form of a request from her 8-year-old son, Jake, who needed a snack to take to his chess club meeting. Merilee flipped through her recipe box and pulled out her grandmother's recipe for Chess Pie. Perfect!</p>
31 | 
32 | 			<p>The pie was such a hit with the kids - and their coach - that Merilee started getting requests to bake pies for other occasions: school events, birthdays, even a Pi Day celebration at the local library. Pie in the Sky Bakery was born.</p>
33 | 
34 | 			<p>She got so many orders that her fledgling business soon outgrew her family's kitchen. In 2006, she rented her current location at 34 Main Street, where she and her team of bakers have served up fresh, delicious pies ever since.</p>
35 | 		</article>
36 | 		<div class="aside">
37 | 			<aside class="sidebar-primary">
38 | 				<h3>Testimonials</h3>
39 | 				<blockquote>
40 | 					<p>Merilee sure knows how to bake! Not a week goes by that I don't stop in for a slice of her cherry pie. They truly are just like Mother used to make.</p>
41 | 					<cite>Elton Higbee (age 94)</cite>
42 | 				</blockquote>
43 | 			</aside>
44 | 			<aside class="sidebar-secondary">
45 | 				<h3>Pie of the Month</h3>
46 | 				<img src="img/pi-day.jpg" alt="Pi Day Pie with Strawberry filling.">
47 | 			</aside>
48 | 		</div>
49 | 	</div>
50 | 	<footer>
51 | 		<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
52 | 		<p>
53 | 			<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
54 | 			<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
55 | 			<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
56 | 			<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
57 | 			<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
58 | 		</p>
59 | 	</footer>
60 | </div>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/clouds.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/fb5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/fb5.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/insta4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/insta4.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/logo.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/merilee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/merilee.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/pi-day.jpg


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/pin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/pin2.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/scallop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/scallop.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/sitecomp_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/sitecomp_02.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/tumblr3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/tumblr3.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/end/img/twitter1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/17-grid-and-flexbox/end/img/twitter1.png


--------------------------------------------------------------------------------
/day-2-grid/17-grid-and-flexbox/instructions.txt:
--------------------------------------------------------------------------------
1 | 17-grid-and-flexbox Instructions
2 | 
3 | We spent an entire day working with Flexbox as a hack -- making it function as a grid. 
4 | 
5 | We completed one exercise where we used Flexbox as we should, laying out an image gallery.
6 | 
7 | In this exercise, combine yesterday's Flexbox image gallery with the Grid layout of today's web page.
8 | 
9 | This is how layouts of the future will work!


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/apple-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/apple-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/boston-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/boston-creme.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/cherry-alamode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/cherry-alamode.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/cherry-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/cherry-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/coconut-creme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/coconut-creme.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/gone-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/gone-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/keylime-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/keylime-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/lemon-meringue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/lemon-meringue.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/mincemeat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/mincemeat.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/mini-pies.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/mini-pies.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/mom-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/mom-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/peace-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/peace-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/peach-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/peach-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/pie-coffee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/pie-coffee.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/pie-slice-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/pie-slice-buffet.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/pumpkin-pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/pumpkin-pie.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/gallery/whole-pie-buffet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/gallery/whole-pie-buffet.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/history.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | <link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 7 | <link href="css/styles.css" rel="stylesheet" type="text/css">
 8 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 | <div class="wrapper">
13 | 	<header>
14 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
15 | 	</header>
16 | 	<div class="bkgdimg"></div>
17 | 	<nav>
18 | 		<ul>
19 | 			<li><a href="index.html">Home</a></li>
20 | 			<li><a href="menu.html">Menu</a></li>
21 | 			<li><a href="catering.html">Catering</a></li>
22 | 			<li><a href="gallery.html">Pie Gallery</a></li>
23 | 			<li><a href="history.html">History</a></li>
24 | 			<li><a href="contact.html">Contact</a></li>
25 | 		</ul>
26 | 	</nav>
27 | 	<div class="content">
28 | 		<article>
29 | 			<h2>History</h2>
30 | 			<p><img src="img/merilee.jpg" alt="Merilee Wilbur, with her favorite rolling pin." class="rounded floatright">Sometimes great things come from humble beginnings. For Merilee Wilbur, that beginning came in the form of a request from her 8-year-old son, Jake, who needed a snack to take to his chess club meeting. Merilee flipped through her recipe box and pulled out her grandmother's recipe for Chess Pie. Perfect!</p>
31 | 
32 | 			<p>The pie was such a hit with the kids - and their coach - that Merilee started getting requests to bake pies for other occasions: school events, birthdays, even a Pi Day celebration at the local library. Pie in the Sky Bakery was born.</p>
33 | 
34 | 			<p>She got so many orders that her fledgling business soon outgrew her family's kitchen. In 2006, she rented her current location at 34 Main Street, where she and her team of bakers have served up fresh, delicious pies ever since.</p>
35 | 		</article>
36 | 		<div class="aside">
37 | 			<aside class="sidebar-primary">
38 | 				<h3>Testimonials</h3>
39 | 				<blockquote>
40 | 					<p>Merilee sure knows how to bake! Not a week goes by that I don't stop in for a slice of her cherry pie. They truly are just like Mother used to make.</p>
41 | 					<cite>Elton Higbee (age 94)</cite>
42 | 				</blockquote>
43 | 			</aside>
44 | 			<aside class="sidebar-secondary">
45 | 				<h3>Pie of the Month</h3>
46 | 				<img src="img/pi-day.jpg" alt="Pi Day Pie with Strawberry filling.">
47 | 			</aside>
48 | 		</div>
49 | 	</div>
50 | 	<footer>
51 | 		<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
52 | 		<p>
53 | 			<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
54 | 			<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
55 | 			<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
56 | 			<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
57 | 			<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
58 | 		</p>
59 | 	</footer>
60 | </div>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/clouds.png


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/fb5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/fb5.png


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/header-1200.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/header-1200.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/header-850.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/header-850.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/insta4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/insta4.png


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/logo.png


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/merilee-175.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/merilee-175.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/merilee-250.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/merilee-250.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/merilee-400.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/merilee-400.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/merilee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/merilee.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/pi-day.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/pi-day.jpg


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/pin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/pin2.png


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/scallop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/scallop.png


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/sitecomp_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/sitecomp_02.png


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/tumblr3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/tumblr3.png


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/img/twitter1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day-2-grid/18-practice/end/img/twitter1.png


--------------------------------------------------------------------------------
/day-2-grid/18-practice/end/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Pie in the Sky Bakery, Springdale, VT</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link href='http://fonts.googleapis.com/css?family=Cabin|Niconne' rel='stylesheet' type='text/css'>
 8 | 	<link href="css/styles.css" rel="stylesheet" type="text/css">
 9 | 	<script>
10 |     	// Picture element HTML5 shiv
11 |     	document.createElement( "picture" );
12 |   	</script>
13 |   	<script src="picturefill.min.js"></script>
14 | </head>
15 | 
16 | <body>
17 | <div class="wrapper">
18 | 	<header>
19 | 		<a href="/"><img src="img/logo.png" alt="Pie in the Sky Bakery, Springdale, VT. Click for home."></a>
20 | 	</header>
21 | 	<div class="bkgdimg"></div>
22 | 	<nav>
23 | 		<ul>
24 | 			<li><a href="index.html">Home</a></li>
25 | 			<li><a href="menu.html">Menu</a></li>
26 | 			<li><a href="catering.html">Catering</a></li>
27 | 			<li><a href="gallery.html">Pie Gallery</a></li>
28 | 			<li><a href="history.html">History</a></li>
29 | 			<li><a href="contact.html">Contact</a></li>
30 | 		</ul>
31 | 	</nav>
32 | 	<div class="heading"></div>
33 | 	<div class="home">
34 | 		<main>
35 | 			<h2>Homemade Pies for Every Celebration</h2>
36 | 			<p>Pie in the Sky Bakery is your source for fresh, home-baked pies for every occasion. Our pies are made with only the freshest fruits and other wholesome fillings. We make our crusts with vegetable shortening and no trans-fats, so you can enjoy high quality and delicious taste in every bite.</p>
37 | 		</main>
38 | 		<div class="homeboxes">
39 | 			<article>
40 | 				<h3>Testimonial</h3>
41 | 				<blockquote>
42 | 					<p>Thank you, Merilee, for all your help in making my daughter's birthday party a success. Her allergies make it difficult to find safe choices for her. You made it so easy! Everyone loved the gluten-free Apple Crumb pie, and of course, the Chess Pie.</p>
43 | 					<cite>Sharon Leroy</cite>
44 | 				</blockquote>
45 | 				<p><a href="#" class="button">More gluten-free pies</a></p>
46 | 			</article>
47 | 			<article>
48 | 				<h3>Mother's Day</h3>
49 | 				<img src="gallery/mom-pie.jpg" alt="Mother's day pies!" class="responsive">
50 | 				<p>Don't wait to reserve your Mother's Day pie, complete with "Mom" on the crust!</p>
51 | 				<p><a href="#" class="button">Order now!</a></p>
52 | 			</article>
53 | 			<article>
54 | 				<h3>Menu</h3>
55 | 				<img src="gallery/pie-coffee.jpg" alt="Pie and coffee rules!" class="responsive">
56 | 				<p>Join us for a slice of pie, with or without ice cream, and coffee at our Main Street location.</p>
57 | 				<p><a href="#" class="button">Eat more pie!</a></p>
58 | 			</article>
59 | 			<article>
60 | 				<h3>Donations</h3>
61 | 				<blockquote>
62 | 					<p>We are grateful to Merilee and everyone at Pie in the Sky Bakery for donating 20 pies to Relay for Life. They were delicious and very much appreciated by all. </p>
63 | 					<cite>Darlene Huston, Chairperson</cite>
64 | 				</blockquote>
65 | 				<p><a href="#" class="button">Let us donate to your cause!</a></p>
66 | 			</article>
67 | 		</div>
68 | 	</div>
69 | 	<footer>
70 | 			<p>Copyright 2017, Pie in the Sky Bakery &#183; 34 Main Street &#183; Springdale, VT &#183; <a href="tel:802-555-7437">(802) 555-PIES</a></p>
71 | 			<p>
72 | 				<a href="http://www.twitter.com" target="_blank"><img src="img/twitter1.png" alt="Twitter."></a>
73 | 				<a href="http://www.pinterest.com" target="_blank"><img src="img/pin2.png" alt="Pinterest."></a>
74 | 				<a href="http://www.tumblr.com" target="_blank"><img src="img/tumblr3.png" alt="Tumblr."></a>
75 | 				<a href="http://www.instagram.com" target="_blank"><img src="img/insta4.png" alt="Instagram."></a>
76 | 				<a href="http://www.facebook.com" target="_blank"><img src="img/fb5.png" alt="Facebook."></a>
77 | 			</p>
78 | 	</footer>
79 | 
80 | </div>
81 | </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/day-2-grid/18-practice/instructions.txt:
--------------------------------------------------------------------------------
 1 | 18-Practice Instructions
 2 | 
 3 | Review the last two day's worth of work.
 4 | 
 5 | Finish building the remaining pages for this website.
 6 | 
 7 | * Have the nav bar link to all pages.
 8 | * Use Flexbox and Grid appropriately to complete page layouts.
 9 | * Try coding a contact form or a pie ordering form -- should the form layout be completed with Flexbox, Grid, or something else?
10 | 
11 | To get the materials for your practice, look in the "end" folders from some of the chapters and combine your work.
12 | 
13 | For new pages, look in the "branding" folder for colors, images, and copy.


--------------------------------------------------------------------------------
/day1.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day1.pdf


--------------------------------------------------------------------------------
/day2.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jen4web/fem-layout/75d22b22a0c6c545746ed40f3d00c4e8430a30ea/day2.pdf


--------------------------------------------------------------------------------
/resources/resources.txt:
--------------------------------------------------------------------------------
 1 | FLEXBOX
 2 | 
 3 | Chris Coyer's Complete Guide to Flexbox  
 4 | https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 5 | 
 6 | Smashing Magazine: Harnessing Flexbox for Today's Web Apps http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps/
 7 | 
 8 | Solved by Flexbox 
 9 | https://philipwalton.github.io/solved-by-flexbox/
10 | 
11 | Flexy Boxes playground and code generator
12 | http://the-echoplex.net/flexyboxes/
13 | 
14 | Getting started with Flexbox grid systems
15 | http://www.webdesignerdepot.com/2016/02/getting-started-with-flexbox-grid-systems/
16 | 
17 | Flexbox Froggy 
18 | http://flexboxfroggy.com/
19 | 
20 | Flexbox Defense 
21 | http://www.flexboxdefense.com/
22 | 
23 | Flexbox Grid 
24 | http://flexboxgrid.com/
25 | 
26 | Bootstrap 4's Flexbox-based grid
27 | https://getbootstrap.com/docs/4.0/layout/grid/
28 | 
29 | Zurb Foundation's XY Grid
30 | http://foundation.zurb.com/sites/docs/xy-grid.html
31 | 
32 | 
33 | RESPONSIVE IMAGES
34 | Picturefill source 
35 | http://scottjehl.github.io/picturefill/
36 | 
37 | About the <picture> tag
38 | https://www.html5rocks.com/en/tutorials/responsive/picture-element/
39 | 
40 | Tim Kadlec: Media query asset downloading results 
41 | http://timkadlec.com/2012/04/media-query-asset-downloading-results/
42 | 
43 | 
44 | CSS GRID
45 | CSS Tricks: A Complete Guide to Grid 
46 | https://css-tricks.com/snippets/css/complete-guide-grid/
47 | 
48 | Grid by Example
49 | http://gridbyexample.com/
50 | 
51 | Practical CSS Grid: Adding Grid to an Existing Design
52 | https://alistapart.com/article/practical-grid
53 | 
54 | Basic concepts of grid layout
55 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
56 | 
57 | CSS Grid Inspector (in Firefox): 
58 | https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
59 | 
60 | Grid "fallbacks" and overrides
61 | https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
62 | 
63 | Things I’ve Learned About CSS Grid Layout 
64 | https://css-tricks.com/things-ive-learned-css-grid-layout/ 
65 | 
66 | GRID PILE: Stacking CSS Grids for Impossible Layouts
67 | https://www.linkedin.com/pulse/grid-pile-stacking-css-grids-impossible-layouts-rand-hendriksen/
68 | 
69 | Breaking Down a CSS Grid Layout
70 | http://csskarma.com/blog/css-grid-layout/
71 | 
72 | A Collection of Interesting Facts about CSS Grid Layout
73 | https://css-tricks.com/collection-interesting-facts-css-grid-layout/
74 | 
75 | Is it really safe to start using CSS Grid Layout?
76 | https://rachelandrew.co.uk/archives/2017/07/04/is-it-really-safe-to-start-using-css-grid-layout/
77 | 
78 | Bootstrap to CSS Grid
79 | https://medium.com/@tallys/bootstrap-to-css-grid-87b3f5f830e4
80 | 
81 | Firefox Developer version -- Grid tools
82 | https://mozilladevelopers.github.io/playground/03-firefox-devtools
83 | 


--------------------------------------------------------------------------------