├── .gitignore
├── 000_temp
├── 01.jpg
├── 02.jpg
├── index.html
├── main.css
├── other.html
└── raf.svg
├── 001_workflow-example
└── index.html
├── 002_live-preview
├── css
│ └── selectors_circles_example.css
└── selectors_circles_example.html
├── 003_html-css-javascript
├── assets
│ ├── css
│ │ ├── css_reset.css
│ │ └── main.css
│ └── images
│ │ ├── arrows_gray_50.png
│ │ ├── favicon.ico
│ │ ├── g_s_03_five.jpg
│ │ └── g_s_03_five_small.jpg
└── index.html
├── 004_tags_attributes
└── index.html
├── 005_html-comments
└── index.html
├── 006_h1_p
├── 01
│ └── index.html
├── 02-p
│ └── index.html
├── 03_h1_p
│ └── example-h1.html
└── 04_h1-h6
│ └── six-headings.html
├── 007_lists
├── 01_ul
│ └── index.html
├── 02_ol
│ └── index.html
├── 03_reversed
│ └── index.html
├── 04_value-attribute
│ └── index.html
├── 05_dl
│ └── index.html
├── 06_nesting-lists
│ └── index.html
├── 07_list-style-type
│ ├── 01
│ │ └── index.html
│ └── 02_custom
│ │ ├── index.html
│ │ ├── source-files
│ │ └── taxi-sm.ai
│ │ └── taxi-sm.svg
└── 08_hortizontal
│ ├── 01
│ ├── index.html
│ ├── source-files
│ │ └── taxi-sm.ai
│ └── taxi-sm.svg
│ └── 02
│ ├── index.html
│ └── main.css
├── 008_a
├── 01
│ └── index.html
└── 02
│ └── index.html
├── 009_img
├── 01
│ ├── img
│ │ └── firefox-icon.png
│ └── index.html
└── 02
│ ├── index.html
│ └── pic
│ └── bekind.jpg
├── 010_link_css-stylesheet
├── img
│ └── firefox-icon.png
└── index.html
├── 011_relative-absolute-urls
├── index.html
├── pic
│ └── anatomy-of-an-html-element.png
└── users
│ └── profile.html
├── 012_emmet
└── index.html
├── 013_solution
└── index.html
├── 014_css
├── 01_external
│ ├── css
│ │ └── main.css
│ ├── img
│ │ └── firefox-icon.png
│ └── index.html
├── 02_internal
│ ├── img
│ │ └── firefox-icon.png
│ └── index.html
├── 03_inline
│ ├── img
│ │ └── firefox-icon.png
│ └── index.html
└── 04_at-import
│ ├── css
│ ├── main.css
│ └── otras.css
│ ├── img
│ └── firefox-icon.png
│ └── index.html
├── 015_css-resets
├── 00_without
│ └── six-headings.html
├── 01_reset-meyer
│ ├── reset-meyer-edited.css
│ ├── reset-meyer.css
│ └── six-headings.html
├── 02_reset-normalize
│ ├── reset-normalize.css
│ └── six-headings.html
└── 03_reset-sanitize
│ ├── reset-sanitize.css
│ └── six-headings.html
├── 016_css-selectors
├── 01_tag
│ ├── 01_single-selector
│ │ ├── css
│ │ │ └── main.css
│ │ ├── img
│ │ │ └── firefox-icon.png
│ │ └── index.html
│ ├── 02_multiple-declarations
│ │ ├── css
│ │ │ └── main.css
│ │ ├── img
│ │ │ └── firefox-icon.png
│ │ └── index.html
│ └── 03_multiple-selectors
│ │ ├── css
│ │ └── main.css
│ │ ├── img
│ │ └── firefox-icon.png
│ │ └── index.html
├── 02_id
│ ├── 01_correct
│ │ ├── css
│ │ │ └── main.css
│ │ ├── img
│ │ │ └── firefox-icon.png
│ │ └── index.html
│ └── 02_incorrect
│ │ ├── css
│ │ └── main.css
│ │ ├── img
│ │ └── firefox-icon.png
│ │ └── index.html
├── 03_class
│ ├── css
│ │ └── main.css
│ ├── img
│ │ └── firefox-icon.png
│ └── index.html
├── 04_attribute
│ ├── css
│ │ └── main.css
│ ├── img
│ │ └── firefox-icon.png
│ └── index.html
└── 05_pseudo-class
│ ├── css
│ └── main.css
│ ├── img
│ └── firefox-icon.png
│ └── index.html
├── 017_css-comments
├── css
│ └── main.css
├── img
│ └── firefox-icon.png
└── index.html
├── 018_google-fonts
├── 01
│ └── index.html
└── 02_center
│ └── index.html
├── 019_box-model
├── 01_padding
│ ├── css
│ │ └── main.css
│ └── index.html
└── 02_border
│ ├── css
│ └── main.css
│ └── index.html
├── 020_border-radius
├── 01_single-div
│ ├── css
│ │ └── main.css
│ └── index.html
├── 02_many-divs
│ ├── css
│ │ └── main.css
│ └── index.html
├── 03_display-inline-block
│ ├── css
│ │ └── main.css
│ └── index.html
├── 04_TRBL
│ ├── css
│ │ └── main.css
│ └── index.html
└── 05_circles
│ ├── css
│ └── main.css
│ └── index.html
├── 021_mozilla
├── css
│ └── main.css
├── img-display.html
├── img
│ ├── firefox-icon.png
│ └── sml.png
└── index.html
├── 022_solution
├── css
│ ├── main.css
│ └── reset.css
├── index.html
└── pic
│ └── surf.jpg
├── 023_outline
└── index.html
├── 024_structure
└── index.html
├── 025_film-review-jurassic_articles-sections
└── index.html
├── 026_hands-on-solutions
├── 01
│ └── index.html
├── 02
│ └── index.html
├── 03
│ └── index.html
└── 04
│ └── index.html
├── 027_exercise-solutions
├── 01
│ └── index.html
└── 02
│ └── index.html
├── 028_outline
├── 01_notes
│ └── README.md
├── 02_bourdain-example
│ ├── 01_already-saw-this
│ │ └── index.html
│ ├── 02_step-one_headings-only
│ │ └── index.html
│ └── 03_step-two_add-other-tags
│ │ └── index.html
├── 03_explicit-sections
│ └── index.html
├── 04_explicit-sections-with-headings
│ └── index.html
├── 05_implicit-sections
│ └── index.html
├── 06_implicit-sections-experimentation
│ └── index.html
├── 07_exercises
│ ├── 01
│ │ └── index.html
│ ├── 02
│ │ └── index.html
│ ├── 03
│ │ └── index.html
│ ├── 04
│ │ └── index.html
│ ├── 05
│ │ └── index.html
│ └── 06
│ │ └── index.html
├── 09_sectioning-roots
│ └── index.html
├── 10_exercise
│ └── index.html
└── 11_examples
│ ├── 01_bourdain_saw-this-already
│ └── index.html
│ ├── 02_animals
│ └── index.html
│ ├── 03_fruit
│ └── index.html
│ ├── 04_our-course
│ └── index.html
│ └── 05_any-content
│ └── index.html
├── 029_box-model_reminder
├── box-model.gif
└── index.html
├── 030_box-sizing_border-box
├── index.html
└── main.css
├── 031_border-radius
├── 01
│ ├── index.html
│ └── main.css
├── 02
│ ├── index.html
│ └── main.css
├── 03
│ ├── index.html
│ └── main.css
└── 04
│ ├── index.html
│ └── main.css
├── 032_margin_zero_auto
├── 01
│ ├── index.html
│ └── main.css
└── 02
│ ├── index.html
│ └── main.css
├── 033_display
├── index.html
├── main.css
└── reset-meyer.css
├── 034_display_block
├── index.html
└── main.css
├── 035_display_inline
├── index.html
└── main.css
├── 036_display_inline-block
├── index.html
└── main.css
├── 037_display_none
├── index.html
└── main.css
├── 038_display_challenge
├── README.txt
└── main.css
├── 039_display_solution
├── index.html
└── main.css
├── 040_display_common-use_menu
├── 01
│ ├── index.html
│ └── main.css
└── 02
│ ├── index.html
│ └── main.css
├── 041_display_inline-block
├── index.html
└── main.css
├── 042_display_inline-block_layout-example_taco
├── index.html
└── main.css
├── 043_position-fixed
├── 01
│ ├── index.html
│ └── main.css
└── 02
│ ├── index.html
│ └── main.css
├── 044_position-relative
├── 01
│ ├── index.html
│ └── main.css
├── 02
│ ├── index.html
│ └── main.css
└── 03
│ ├── index.html
│ └── main.css
├── 045_position-absolute
├── index.html
└── main.css
├── 046_position_layout-example_taco
├── index.html
└── main.css
├── 047_float_img
├── 01
│ ├── index.html
│ ├── main.css
│ └── surf.jpeg
├── 02_overflow
│ ├── index.html
│ ├── main.css
│ └── surf.jpeg
└── 03_overflow-auto
│ ├── index.html
│ ├── main.css
│ └── surf.jpeg
├── 048_float_clear
├── 01_not-cleared
│ ├── index.html
│ └── main.css
├── 02_not-cleared
│ ├── index.html
│ └── main.css
├── 03_clear-both
│ ├── index.html
│ └── main.css
└── 04_clear-both
│ ├── index.html
│ └── main.css
├── 049_float_layout-example
├── index.html
└── main.css
├── 050_float_layout-example
├── index.html
└── main.css
├── 051_float_layout-example_taco
├── 01
│ ├── index.html
│ └── main.css
├── 02_adds-an-article
│ ├── index.html
│ └── main.css
└── 03_clear-both
│ ├── index.html
│ └── main.css
├── 052_position_challenges-and-solutions
├── 01_challenges
│ └── README.txt
└── 02_solutions
│ ├── 01_fixed
│ ├── index.html
│ ├── main.css
│ └── reset-meyer.css
│ ├── 02_relative
│ ├── index.html
│ └── main.css
│ ├── 03_absolute
│ ├── index.html
│ └── main.css
│ └── 04_layout
│ ├── index.html
│ └── main.css
├── 053_float_challenges-and-solutions
├── 01_challenges
│ └── README.txt
└── 02_solutions
│ ├── 01
│ ├── index.html
│ ├── main.css
│ └── surf.jpeg
│ ├── 02
│ ├── index.html
│ ├── main.css
│ └── surf.jpeg
│ ├── 03
│ ├── index.html
│ ├── main.css
│ └── surf.jpeg
│ ├── 04
│ ├── index.html
│ └── main.css
│ └── 05
│ ├── index.html
│ └── main.css
├── 054_flex-box_container
├── 01
│ ├── index.html
│ └── main.css
├── 02_flex-wrap_no-wrap
│ ├── index.html
│ └── main.css
├── 03_flex-wrap_wrap
│ ├── index.html
│ └── main.css
├── 04_flex-wrap_wrap-reverse
│ ├── index.html
│ └── main.css
├── 05_flex-direction_row
│ ├── index.html
│ └── main.css
├── 06_flex-direction_row-reverse
│ ├── index.html
│ └── main.css
├── 07_flex-direction_column
│ ├── index.html
│ └── main.css
├── 08_flex-direction_column-reverse
│ ├── index.html
│ └── main.css
├── 09_flex-flow
│ ├── index.html
│ └── main.css
├── 10_justifiy-content_flex-start
│ ├── index.html
│ └── main.css
├── 11_justifiy-content_flex-end
│ ├── index.html
│ └── main.css
├── 12_justifiy-content_center
│ ├── index.html
│ └── main.css
├── 13_justifiy-content_space-between
│ ├── index.html
│ └── main.css
├── 14_justifiy-content_space-around
│ ├── index.html
│ └── main.css
├── 15_justifiy-content_flex-start
│ ├── index.html
│ └── main.css
├── 16_justifiy-content_flex-end
│ ├── index.html
│ └── main.css
├── 17_justifiy-content_center
│ ├── index.html
│ └── main.css
├── 18_justifiy-content_space-between
│ ├── index.html
│ └── main.css
├── 19_justifiy-content_space-around
│ ├── index.html
│ └── main.css
├── 20_align-items_flex-start
│ ├── index.html
│ └── main.css
├── 21_align-items_flex-end
│ ├── index.html
│ └── main.css
├── 22_align-items_center
│ ├── index.html
│ └── main.css
├── 23_align-items_stretch
│ ├── index.html
│ └── main.css
├── 24_align-items_baseline
│ ├── index.html
│ └── main.css
├── 25_align-items_flex-start
│ ├── index.html
│ └── main.css
├── 26_align-items_flex-end
│ ├── index.html
│ └── main.css
├── 27_align-items_center
│ ├── index.html
│ └── main.css
├── 28_align-items_stretch
│ ├── index.html
│ └── main.css
├── 29_align-items_baseline_DOES-NOT-WORK
│ ├── index.html
│ └── main.css
├── 30_align-content_flex-start
│ ├── index.html
│ └── main.css
├── 31_align-content_flex-end
│ ├── index.html
│ └── main.css
├── 32_align-content_center
│ ├── index.html
│ └── main.css
├── 33_align-content_stretch
│ ├── index.html
│ └── main.css
├── 34_align-content_space-between
│ ├── index.html
│ └── main.css
├── 35_align-content_space-around
│ ├── index.html
│ └── main.css
├── 36_align-content_flex-start
│ ├── index.html
│ └── main.css
├── 37_align-content_flex-end
│ ├── index.html
│ └── main.css
├── 38_align-content_center
│ ├── index.html
│ └── main.css
├── 39_align-content_stretch
│ ├── index.html
│ └── main.css
├── 40_align-content_space-between
│ ├── index.html
│ └── main.css
└── 41_align-content_space-around
│ ├── index.html
│ └── main.css
├── 055_flex-box_items
├── 01_align-self
│ ├── 01_align-self_flex-end
│ │ ├── index.html
│ │ └── main.css
│ ├── 02_align-self_baseline
│ │ ├── index.html
│ │ └── main.css
│ └── 03_align-self_stretch
│ │ ├── index.html
│ │ └── main.css
├── 02_order
│ ├── 01_no-order
│ │ ├── index.html
│ │ └── main.css
│ ├── 02_order
│ │ ├── index.html
│ │ └── main.css
│ ├── 03_another-way_column-reverse
│ │ ├── index.html
│ │ └── main.css
│ ├── 04_order
│ │ ├── index.html
│ │ └── main.css
│ └── 05_order
│ │ ├── index.html
│ │ └── main.css
├── 03_flex-grow
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ ├── 02
│ │ ├── index.html
│ │ └── main.css
│ ├── 03
│ │ ├── index.html
│ │ └── main.css
│ └── 04_experiment
│ │ ├── index.html
│ │ └── main.css
├── 04_flex-shrink
│ └── 01
│ │ ├── index.html
│ │ └── main.css
├── 05_flex-basis
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ ├── 02
│ │ ├── index.html
│ │ └── main.css
│ └── 03
│ │ ├── index.html
│ │ └── main.css
└── 06_flex
│ ├── 01
│ ├── index.html
│ └── main.css
│ └── 02
│ ├── index.html
│ ├── main.css
│ └── reset-meyer.css
├── 056_flexbox_challenges-and-solutions
├── 01_challenges
│ └── README.txt
└── 02_solutions
│ ├── 01_eight-pages
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ ├── 02
│ │ ├── index.html
│ │ └── main.css
│ ├── 03
│ │ ├── index.html
│ │ └── main.css
│ ├── 04
│ │ ├── index.html
│ │ └── main.css
│ ├── 05
│ │ ├── index.html
│ │ └── main.css
│ ├── 06
│ │ ├── index.html
│ │ └── main.css
│ ├── 07
│ │ ├── index.html
│ │ └── main.css
│ └── 08
│ │ ├── index.html
│ │ └── main.css
│ └── 02_six-pages
│ ├── 01_align-self
│ ├── index.html
│ └── main.css
│ ├── 02_order
│ ├── index.html
│ └── main.css
│ ├── 03_flex-grow
│ ├── index.html
│ └── main.css
│ ├── 04_flex-basis
│ ├── index.html
│ └── main.css
│ ├── 05_flex-shrink
│ ├── index.html
│ └── main.css
│ └── 06_flex
│ ├── index.html
│ └── main.css
├── 057_media-queries
├── 01_min-width
│ ├── index.html
│ └── main.css
├── 02_max-width
│ ├── index.html
│ └── main.css
├── 03_print
│ ├── index.html
│ └── main.css
├── 04_screen_min-width
│ ├── index.html
│ └── main.css
├── 05_min-width
│ ├── index.html
│ ├── main.css
│ ├── mq_600-899.css
│ └── mq_900-plus.css
├── 06_max-width
│ ├── index.html
│ ├── main.css
│ └── mq_900-less.css
├── 07_print
│ ├── index.html
│ ├── main.css
│ └── mq_print.css
├── 08_screen_min-width
│ ├── index.html
│ ├── main.css
│ └── mq_screen_min-width.css
├── 09_taco-menu-example
│ ├── 01_media-query-in-the-stylesheet
│ │ ├── index.html
│ │ └── main.css
│ └── 02_media-query-in-the-link-to-the-stylesheet
│ │ ├── README.txt
│ │ ├── index.html
│ │ ├── main-599-less.css
│ │ ├── main-600-plus.css
│ │ └── main-print.css
└── 10_readme
│ ├── 01-attributes.txt
│ ├── 02_attributes-not-to-use.txt
│ ├── 03-best-practices.txt
│ └── 04-sources.txt
├── 058_font-boosting
├── 01_no-font-boosting
│ ├── index.html
│ └── main.css
├── 02_font-boosting
│ ├── index.html
│ └── main.css
├── 03_font-boosting
│ ├── index.html
│ └── main.css
├── 04_font-boosting
│ └── index.html
├── 05_font-boosting
│ ├── checker.png
│ ├── index.html
│ └── main.css
├── 06_font-boosting-disabled
│ ├── checker.png
│ ├── index.html
│ └── main.css
└── source.txt
├── 059_meta-viewport
├── 01_examples
│ ├── 01_meta-viewport_not-set
│ │ ├── index.html
│ │ └── main.css
│ ├── 02_meta-viewport_width
│ │ ├── index.html
│ │ └── main.css
│ ├── 03_meta-viewport_width_scale-1
│ │ ├── index.html
│ │ └── main.css
│ └── 04_meta-viewport_width_scale-2
│ │ ├── index.html
│ │ └── main.css
├── 02_google-examples
│ ├── 01_meta-viewport_not-set
│ │ ├── checker.png
│ │ ├── index.html
│ │ └── main.css
│ ├── 02_meta-viewport_set
│ │ ├── checker.png
│ │ ├── index.html
│ │ └── main.css
│ └── source.txt
├── 03_image-examples
│ ├── 01_image-too-big
│ │ ├── 01_meta-viewport_not-set
│ │ │ ├── index.html
│ │ │ ├── main.css
│ │ │ └── sunset.jpg
│ │ └── 02_meta-viewport_set
│ │ │ ├── index.html
│ │ │ ├── main.css
│ │ │ └── sunset.jpg
│ ├── 02_image-still-too-big
│ │ ├── 01_meta-viewport_not-set
│ │ │ ├── index.html
│ │ │ ├── main.css
│ │ │ └── sunset.jpg
│ │ └── 02_meta-viewport_set
│ │ │ ├── index.html
│ │ │ ├── main.css
│ │ │ └── sunset.jpg
│ └── 03_image-responsive
│ │ ├── 01_meta-viewport_not-set
│ │ ├── index.html
│ │ ├── main.css
│ │ └── sunset.jpg
│ │ └── 02_meta-viewport_set
│ │ ├── index.html
│ │ ├── main.css
│ │ └── sunset.jpg
├── 04_block-level-element-examples
│ ├── 01_div-too-big
│ │ ├── 01_meta-viewport_not-set
│ │ │ ├── index.html
│ │ │ └── main.css
│ │ └── 02_meta-viewport_set
│ │ │ ├── index.html
│ │ │ └── main.css
│ ├── 02_div-still-too-big
│ │ ├── 01_meta-viewport_not-set
│ │ │ ├── index.html
│ │ │ └── main.css
│ │ └── 02_meta-viewport_set
│ │ │ ├── index.html
│ │ │ └── main.css
│ └── 03_div-responsive
│ │ ├── 01_meta-viewport_not-set
│ │ ├── index.html
│ │ └── main.css
│ │ └── 02_meta-viewport_set
│ │ ├── index.html
│ │ └── main.css
├── 05_reading-list
│ └── reading-list.txt
└── 06_best-practices
│ └── best-practices.txt
├── 060_units-of-measurement
├── 01_readme
│ └── units-of-measurement.txt
├── 02_em_relative-to-parent
│ ├── index.html
│ └── main.css
├── 03_rem_relative-to-root
│ ├── index.html
│ └── main.css
├── 04_global_local
│ ├── index.html
│ └── main.css
├── 05_percent_relative-to-parent
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ ├── 02
│ │ ├── index.html
│ │ └── main.css
│ └── 03
│ │ ├── index.html
│ │ └── main.css
├── 06_px_absolute
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ └── 02
│ │ ├── index.html
│ │ └── main.css
├── 07_vh_relative
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ ├── 02
│ │ ├── index.html
│ │ └── main.css
│ ├── 03
│ │ ├── index.html
│ │ ├── main.css
│ │ └── sunset.jpg
│ └── 04
│ │ ├── index.html
│ │ ├── main.css
│ │ └── sunset.jpg
├── 08_vw_relative
│ └── index.html
├── 09_readme
│ └── README.txt
├── 10_good-practice
│ ├── index.html
│ └── main.css
└── 11_bad-practice
│ ├── index.html
│ └── main.css
├── 061_google-responsive-flexbox-examples
├── 01_readme
│ ├── source.txt
│ └── take-aways.txt
├── 02_mostly-fluid
│ ├── index.html
│ ├── layout.css
│ ├── sites-using-this-pattern.txt
│ └── style.css
├── 03_column-drop
│ ├── index.html
│ ├── layout.css
│ ├── sites-using-this-pattern.txt
│ └── style.css
├── 04_layout-shifter
│ ├── index.html
│ ├── layout.css
│ ├── reset-meyer.css
│ ├── sites-using-this-pattern.txt
│ └── style.css
├── 05_tiny-tweaks
│ ├── index.html
│ ├── layout.css
│ ├── sites-using-this-pattern.txt
│ └── style.css
└── 06_off-canvas
│ ├── 01_javascript_sucks
│ └── index.html
│ └── 02_solution
│ ├── client-side.js
│ ├── index.html
│ ├── layout.css
│ ├── sites-using-this-pattern.txt
│ └── style.css
├── 062_other-flexbox-examples
├── 01_flex-box_menu
│ ├── 01_original
│ │ ├── index.html
│ │ └── main.css
│ ├── 02_refactor
│ │ ├── index.html
│ │ ├── layout.css
│ │ └── style.css
│ └── 03_refactor
│ │ ├── index.html
│ │ ├── layout.css
│ │ └── style.css
├── 02_flex-box_vertical-center
│ ├── index.html
│ └── main.css
├── 03_flex-box_layout-example_taco
│ ├── index.html
│ └── main.css
├── 04_flex-box_layout_holy-grail
│ ├── 01_original
│ │ ├── index.html
│ │ ├── layout.css
│ │ └── style.css
│ ├── 02_refactor
│ │ ├── index.html
│ │ ├── layout.css
│ │ └── style.css
│ └── 03_refactor
│ │ ├── index.html
│ │ ├── layout.css
│ │ └── style.css
└── 05_flex-box_layout_holy-grail
│ ├── 01
│ ├── index.html
│ ├── layout.css
│ ├── main.css
│ └── style.css
│ ├── 02_refactor
│ ├── index.html
│ ├── layout.css
│ └── style.css
│ └── 03_refactor
│ ├── index.html
│ ├── layout.css
│ └── style.css
├── 063_media-query_challenge-and-solution
├── 01
│ ├── 01_challenge
│ │ ├── challenge-description.txt
│ │ ├── index.html
│ │ ├── main.css
│ │ └── sunset.jpg
│ └── 02_solution
│ │ ├── challenge-description.txt
│ │ ├── index.html
│ │ ├── main.css
│ │ └── sunset.jpg
└── 02
│ ├── 01_challenge
│ ├── challenge-description.txt
│ ├── index.html
│ ├── main.css
│ └── sunset.jpg
│ └── 02_solution
│ ├── challenge-description.txt
│ ├── index.html
│ ├── main.css
│ ├── mq-600-900.css
│ ├── mq-901-plus.css
│ ├── mq-print.css
│ └── sunset.jpg
├── 064_responsive-flexbox-patterns_challenges-and-solutions
├── 01_challenge
│ └── readme.txt
└── 02_solutions
│ ├── 01_mostly-fluid
│ ├── 01_before
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ ├── 02_meta-viewport
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ └── 03_disable-font-boosting
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ ├── 02_column-drop
│ ├── 01_before
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ ├── 02_meta-viewport
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ └── 03_disable-font-boosting
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ ├── 03_layout-shifter
│ ├── 01_before
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── reset-meyer.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ ├── 02_meta-viewport
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── reset-meyer.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ └── 03_disable-font-boosting
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── reset-meyer.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ ├── 04_tiny-tweaks
│ ├── 01_before
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ ├── 02_meta-viewport
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ └── 03_disable-font-boosting
│ │ ├── index.html
│ │ ├── layout.css
│ │ ├── sites-using-this-pattern.txt
│ │ └── style.css
│ └── 05_off-canvas
│ ├── 01_before
│ ├── client-side.js
│ ├── index.html
│ ├── layout.css
│ ├── sites-using-this-pattern.txt
│ └── style.css
│ ├── 02_meta-viewport
│ ├── client-side.js
│ ├── index.html
│ ├── layout.css
│ ├── sites-using-this-pattern.txt
│ └── style.css
│ └── 03_disable-font-boosting
│ ├── client-side.js
│ ├── index.html
│ ├── layout.css
│ ├── sites-using-this-pattern.txt
│ └── style.css
├── 065_background
├── 01_background-color
│ ├── 01
│ │ ├── index.html
│ │ └── styles.css
│ └── 02_background
│ │ ├── index.html
│ │ └── styles.css
└── 02_background-image
│ ├── 01
│ ├── 01.png
│ ├── index.html
│ └── styles.css
│ ├── 02_repeat
│ ├── 01.png
│ ├── index.html
│ └── styles.css
│ ├── 03_size
│ ├── 01_length
│ │ ├── 01.png
│ │ ├── index.html
│ │ └── styles.css
│ ├── 02_percentage
│ │ ├── 01.png
│ │ ├── index.html
│ │ └── styles.css
│ ├── 03_auto
│ │ ├── 01.png
│ │ ├── index.html
│ │ └── styles.css
│ ├── 04_contain
│ │ ├── 01
│ │ │ ├── 01.png
│ │ │ ├── index.html
│ │ │ └── styles.css
│ │ └── 02
│ │ │ ├── 01.png
│ │ │ ├── index.html
│ │ │ └── styles.css
│ └── 05_cover
│ │ ├── 01
│ │ ├── 01.png
│ │ ├── index.html
│ │ └── styles.css
│ │ ├── 02
│ │ ├── 01.png
│ │ ├── index.html
│ │ └── styles.css
│ │ └── 03
│ │ ├── 01.png
│ │ ├── index.html
│ │ └── styles.css
│ ├── 04_position
│ ├── 01
│ │ ├── 01.png
│ │ ├── index.html
│ │ └── styles.css
│ ├── 02
│ │ ├── 01.png
│ │ ├── index.html
│ │ └── styles.css
│ └── 03
│ │ ├── 01.png
│ │ ├── index.html
│ │ └── styles.css
│ └── 05_origin
│ └── 01
│ ├── 01.png
│ ├── index.html
│ └── main.css
├── 066_refactor-challenge_background-img
├── 01_original
│ ├── img
│ │ └── fog.jpg
│ ├── index.html
│ └── style.css
├── 02_refactored_inline-block_rgba
│ ├── css
│ │ ├── main.css
│ │ └── reset.css
│ ├── index.html
│ └── pic
│ │ └── fog.jpg
└── 03_refactored_flexbox
│ ├── css
│ ├── main.css
│ └── reset.css
│ ├── index.html
│ └── pic
│ └── fog.jpg
├── 067_full-page-background
├── 01_full-page-background
│ ├── credit.txt
│ ├── css
│ │ └── main.css
│ ├── img
│ │ └── background-photo.jpg
│ └── index.html
├── 02_add-text
│ ├── css
│ │ ├── main.css
│ │ └── style.css
│ ├── img
│ │ └── background-photo.jpg
│ └── index.html
├── 03_style-text
│ ├── css
│ │ ├── main.css
│ │ └── style.css
│ ├── img
│ │ └── background-photo.jpg
│ └── index.html
└── 04_mobile
│ ├── css
│ ├── main.css
│ └── style.css
│ ├── img
│ ├── background-photo-mobile-devices.jpg
│ └── background-photo.jpg
│ └── index.html
├── 068_font-awesome
├── font-awesome-4.5.0
│ ├── css
│ │ ├── font-awesome.css
│ │ └── font-awesome.min.css
│ ├── fonts
│ │ ├── FontAwesome.otf
│ │ ├── fontawesome-webfont.eot
│ │ ├── fontawesome-webfont.svg
│ │ ├── fontawesome-webfont.ttf
│ │ ├── fontawesome-webfont.woff
│ │ └── fontawesome-webfont.woff2
│ ├── less
│ │ ├── animated.less
│ │ ├── bordered-pulled.less
│ │ ├── core.less
│ │ ├── fixed-width.less
│ │ ├── font-awesome.less
│ │ ├── icons.less
│ │ ├── larger.less
│ │ ├── list.less
│ │ ├── mixins.less
│ │ ├── path.less
│ │ ├── rotated-flipped.less
│ │ ├── stacked.less
│ │ └── variables.less
│ └── scss
│ │ ├── _animated.scss
│ │ ├── _bordered-pulled.scss
│ │ ├── _core.scss
│ │ ├── _fixed-width.scss
│ │ ├── _icons.scss
│ │ ├── _larger.scss
│ │ ├── _list.scss
│ │ ├── _mixins.scss
│ │ ├── _path.scss
│ │ ├── _rotated-flipped.scss
│ │ ├── _stacked.scss
│ │ ├── _variables.scss
│ │ └── font-awesome.scss
├── index.html
├── instructions.txt
└── main.css
├── 069_full-page-background_continued
├── 01_nav
│ ├── css
│ │ ├── main.css
│ │ └── style.css
│ ├── img
│ │ ├── background-photo-mobile-devices.jpg
│ │ └── background-photo.jpg
│ └── index.html
├── 02_flex-box
│ ├── css
│ │ ├── main.css
│ │ └── style.css
│ ├── img
│ │ ├── background-photo-mobile-devices.jpg
│ │ └── background-photo.jpg
│ └── index.html
├── 03_font-awesome
│ ├── css
│ │ ├── font-awesome.min.css
│ │ ├── main.css
│ │ └── style.css
│ ├── img
│ │ ├── background-photo-mobile-devices.jpg
│ │ └── background-photo.jpg
│ └── index.html
├── 04_remove-div-color
│ ├── css
│ │ ├── font-awesome.min.css
│ │ ├── main.css
│ │ └── style.css
│ ├── img
│ │ ├── background-photo-mobile-devices.jpg
│ │ └── background-photo.jpg
│ └── index.html
├── 05_responsive_media-query
│ ├── css
│ │ ├── font-awesome.min.css
│ │ ├── main.css
│ │ ├── mq_505-less.css
│ │ ├── mq_506-plus.css
│ │ └── style.css
│ ├── img
│ │ ├── background-photo-mobile-devices.jpg
│ │ └── background-photo.jpg
│ └── index.html
├── 06_mobile-nav
│ ├── css
│ │ ├── font-awesome.min.css
│ │ ├── main.css
│ │ ├── mq_505-less.css
│ │ ├── mq_505-less_mobile-nav.css
│ │ ├── mq_506-plus.css
│ │ └── style.css
│ ├── img
│ │ ├── background-photo-mobile-devices.jpg
│ │ └── background-photo.jpg
│ └── index.html
└── 07_refactor
│ ├── css
│ ├── font-awesome.min.css
│ ├── main.css
│ ├── mq_505-less.css
│ ├── mq_505-less_mobile-nav.css
│ ├── mq_506-plus.css
│ └── style.css
│ ├── img
│ ├── background-photo-mobile-devices.jpg
│ └── background-photo.jpg
│ ├── index.html
│ └── refactor-changes.txt
├── 070_svg
├── 01_about-svg
│ └── index.html
├── 02_about-fonts
│ ├── 01_cross-browser-support.png
│ └── index.html
├── 03_about_illustrator
│ ├── decimal-places.png
│ └── instructions.html
├── 04_basic-shapes
│ └── index.html
├── 05_paths
│ ├── 01_move-to
│ │ └── index.html
│ ├── 02_horizontal-line_vert-line_line-to
│ │ └── index.html
│ ├── 03_z-close-path
│ │ └── index.html
│ ├── 04_relative-commands
│ │ └── index.html
│ └── 05_cubic-bezier
│ │ └── index.html
├── 06_fill_stroke
│ ├── 01
│ │ └── index.html
│ ├── 02
│ │ └── index.html
│ ├── 03
│ │ └── index.html
│ └── 04
│ │ └── index.html
├── 07_viewBox
│ ├── 01
│ │ └── index.html
│ └── 02_play-with-it
│ │ └── index.html
├── 08_html-document-flow
│ ├── 01_svg-is-inline-element
│ │ └── index.html
│ ├── 02_display-block
│ │ └── index.html
│ └── 03_float
│ │ └── index.html
├── 09_css
│ ├── 01_inline
│ │ ├── 01
│ │ │ └── index.html
│ │ └── 02
│ │ │ └── index.html
│ ├── 02_embedded
│ │ ├── 01_mdn-example
│ │ │ └── index.html
│ │ ├── 02_refactor
│ │ │ └── index.html
│ │ ├── 03_refactor
│ │ │ └── index.html
│ │ └── 04_binoculars
│ │ │ └── index.html
│ ├── 03_external
│ │ ├── 01_square
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ └── 02_binoculars
│ │ │ ├── index.html
│ │ │ └── style.css
│ └── 04_svg-img
│ │ ├── 01_no-svg-css
│ │ ├── 01_square
│ │ │ ├── index.html
│ │ │ ├── square.svg
│ │ │ └── style.css
│ │ └── 02_binoculars
│ │ │ ├── binoculars.svg
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ └── 02_img-css-width
│ │ ├── 01_square
│ │ ├── index.html
│ │ ├── square.svg
│ │ └── style.css
│ │ └── 02_binoculars
│ │ ├── binoculars.svg
│ │ ├── index.html
│ │ └── style.css
├── 10_font-awesome_to_svg
│ ├── 01
│ │ ├── 01_binoc-uncleaned.svg
│ │ ├── 02_binoc-cleaning.svg
│ │ ├── 03_binoc-cleaned.svg
│ │ ├── index.html
│ │ └── main.css
│ └── 02_challenge-and-solution
│ │ ├── index.html
│ │ ├── instructions.txt
│ │ ├── just-svgs.svg
│ │ └── main.css
├── 11_readme
│ ├── a-great-article.txt
│ └── icons.svg
├── 12_symbol_external-svg
│ ├── private
│ │ └── graphics
│ │ │ └── svg-originals
│ │ │ ├── icons.svg
│ │ │ └── readme.txt
│ └── public
│ │ ├── icons.svg
│ │ └── index.html
├── 13_aria
│ ├── 01_readme
│ │ └── readme.txt
│ ├── 02_anchor-element_with-text
│ │ ├── private
│ │ │ └── graphics
│ │ │ │ └── svg-originals
│ │ │ │ └── newspaper.svg
│ │ └── public
│ │ │ ├── icons.svg
│ │ │ ├── index.html
│ │ │ └── main.css
│ ├── 03_anchor-element_without-text
│ │ ├── private
│ │ │ └── graphics
│ │ │ │ └── svg-originals
│ │ │ │ └── newspaper.svg
│ │ └── public
│ │ │ ├── icons.svg
│ │ │ ├── index.html
│ │ │ └── main.css
│ └── 04_svg-element-not-interactive
│ │ ├── private
│ │ └── graphics
│ │ │ └── svg-originals
│ │ │ └── newspaper.svg
│ │ └── public
│ │ ├── icons.svg
│ │ ├── index.html
│ │ └── main.css
├── 14_symbol_inline-svg
│ ├── 01_readme
│ │ ├── best-practice.png
│ │ ├── comparison-table.png
│ │ └── readme.txt
│ └── 02_inline-svg
│ │ ├── private
│ │ └── graphics
│ │ │ └── svg-originals
│ │ │ └── readme.txt
│ │ └── public
│ │ └── index.html
├── 15_css
│ ├── 01_icon
│ │ ├── index.html
│ │ └── main.css
│ ├── 02_icon
│ │ ├── index.html
│ │ └── main.css
│ └── 03_star
│ │ ├── index.html
│ │ ├── main.css
│ │ ├── star-0.svg
│ │ ├── star-100.svg
│ │ └── star-50.svg
├── 16_two-fill-colors-per-icon
│ ├── index.html
│ └── main.css
├── 17_leave-room-for-strokes
│ ├── index.html
│ └── main.css
├── 18_use-percentages-for-stroke-width
│ ├── index.html
│ └── main.css
└── 19_include-in-head
│ ├── example.png
│ └── index.html
├── 071_full-page-background_continued
├── 01_just-the-svg
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ └── 02
│ │ ├── index.html
│ │ └── main.css
└── 02_font-awesome-svgs
│ ├── css
│ ├── font-awesome.min.css
│ ├── main.css
│ ├── mq_505-less.css
│ ├── mq_505-less_mobile-nav.css
│ ├── mq_506-plus.css
│ └── style.css
│ ├── img
│ ├── background-photo-mobile-devices.jpg
│ ├── background-photo.jpg
│ ├── book.svg
│ ├── cog.svg
│ ├── home.svg
│ └── pencil.svg
│ └── index.html
├── 072_favicon
├── 01_readme
│ ├── apple.png
│ ├── files.png
│ ├── html.png
│ ├── index.html
│ └── main.css
└── 02_example
│ ├── 01_create-a-file
│ ├── instructions.txt
│ ├── logo.ai
│ └── logo.png
│ ├── 02_fav-icon-generate-it
│ ├── android-chrome-144x144.png
│ ├── android-chrome-192x192.png
│ ├── android-chrome-36x36.png
│ ├── android-chrome-48x48.png
│ ├── android-chrome-72x72.png
│ ├── android-chrome-96x96.png
│ ├── apple-touch-icon-114x114.png
│ ├── apple-touch-icon-120x120.png
│ ├── apple-touch-icon-144x144.png
│ ├── apple-touch-icon-152x152.png
│ ├── apple-touch-icon-180x180.png
│ ├── apple-touch-icon-57x57.png
│ ├── apple-touch-icon-60x60.png
│ ├── apple-touch-icon-72x72.png
│ ├── apple-touch-icon-76x76.png
│ ├── apple-touch-icon-precomposed.png
│ ├── apple-touch-icon.png
│ ├── browserconfig.xml
│ ├── favicon-16x16.png
│ ├── favicon-194x194.png
│ ├── favicon-32x32.png
│ ├── favicon-96x96.png
│ ├── favicon.ico
│ ├── manifest.json
│ ├── mstile-144x144.png
│ ├── mstile-150x150.png
│ ├── mstile-310x150.png
│ ├── mstile-310x310.png
│ ├── mstile-70x70.png
│ └── safari-pinned-tab.svg
│ └── 03_add-it-to-your-code
│ ├── favicon
│ ├── android-chrome-144x144.png
│ ├── android-chrome-192x192.png
│ ├── android-chrome-36x36.png
│ ├── android-chrome-48x48.png
│ ├── android-chrome-72x72.png
│ ├── android-chrome-96x96.png
│ ├── apple-touch-icon-114x114.png
│ ├── apple-touch-icon-120x120.png
│ ├── apple-touch-icon-144x144.png
│ ├── apple-touch-icon-152x152.png
│ ├── apple-touch-icon-180x180.png
│ ├── apple-touch-icon-57x57.png
│ ├── apple-touch-icon-60x60.png
│ ├── apple-touch-icon-72x72.png
│ ├── apple-touch-icon-76x76.png
│ ├── apple-touch-icon-precomposed.png
│ ├── apple-touch-icon.png
│ ├── browserconfig.xml
│ ├── favicon-16x16.png
│ ├── favicon-194x194.png
│ ├── favicon-32x32.png
│ ├── favicon-96x96.png
│ ├── favicon.ico
│ ├── manifest.json
│ ├── mstile-144x144.png
│ ├── mstile-150x150.png
│ ├── mstile-310x150.png
│ ├── mstile-310x310.png
│ ├── mstile-70x70.png
│ └── safari-pinned-tab.svg
│ └── index.html
├── 073_greater-commons
├── 01_original
│ ├── assets
│ │ ├── css
│ │ │ ├── css_reset.css
│ │ │ └── main.css
│ │ └── images
│ │ │ ├── arrows_gray_50.png
│ │ │ ├── favicon.ico
│ │ │ ├── g_s_03_five.jpg
│ │ │ └── g_s_03_five_small.jpg
│ └── index.html
└── 02_refactor
│ ├── css
│ ├── main.css
│ ├── mq_480-less.css
│ ├── mq_481-plus.css
│ ├── put-back-somewhere.css
│ └── style.css
│ ├── fav
│ ├── android-chrome-144x144.png
│ ├── android-chrome-192x192.png
│ ├── android-chrome-36x36.png
│ ├── android-chrome-48x48.png
│ ├── android-chrome-72x72.png
│ ├── android-chrome-96x96.png
│ ├── apple-touch-icon-114x114.png
│ ├── apple-touch-icon-120x120.png
│ ├── apple-touch-icon-144x144.png
│ ├── apple-touch-icon-152x152.png
│ ├── apple-touch-icon-180x180.png
│ ├── apple-touch-icon-57x57.png
│ ├── apple-touch-icon-60x60.png
│ ├── apple-touch-icon-72x72.png
│ ├── apple-touch-icon-76x76.png
│ ├── apple-touch-icon-precomposed.png
│ ├── apple-touch-icon.png
│ ├── browserconfig.xml
│ ├── favicon-16x16.png
│ ├── favicon-194x194.png
│ ├── favicon-32x32.png
│ ├── favicon-96x96.png
│ ├── favicon.ico
│ ├── manifest.json
│ ├── mstile-144x144.png
│ ├── mstile-150x150.png
│ ├── mstile-310x150.png
│ ├── mstile-310x310.png
│ ├── mstile-70x70.png
│ └── safari-pinned-tab.svg
│ ├── images
│ ├── g_s_03_five.jpg
│ └── g_s_03_five_small.jpg
│ ├── index.html
│ └── src-files
│ ├── logo.png
│ ├── logo.svg
│ └── logogrn.png
├── 074_lbr-homage
├── 01_above-the-fold
│ ├── credit.txt
│ ├── css
│ │ ├── main.css
│ │ ├── mq_500-less_images.css
│ │ ├── mq_501-plus.css
│ │ └── mq_900-plus.css
│ ├── img
│ │ ├── adventure-lg.jpg
│ │ ├── adventure-sm.jpg
│ │ ├── adventure.jpg
│ │ ├── hawaii-lg-30.jpg
│ │ ├── hawaii-lg.jpg
│ │ ├── hawaii-sm-07.jpg
│ │ ├── hawaii-sm-30.jpg
│ │ └── wing.jpg
│ └── index.html
└── 02_below-the-fold
│ ├── credit.txt
│ ├── css
│ ├── main.css
│ ├── mq_500-less_images.css
│ ├── mq_501-plus.css
│ └── mq_900-plus.css
│ ├── img
│ ├── adventure-lg.jpg
│ ├── adventure-sm.jpg
│ └── adventure.jpg
│ ├── index.html
│ └── photos
│ ├── 0.jpg
│ ├── 10.jpg
│ ├── 11.jpg
│ ├── 12.jpg
│ ├── 13.jpg
│ ├── 14.jpg
│ ├── 15.jpg
│ ├── 16.jpg
│ ├── 17.jpg
│ ├── 18.jpg
│ ├── 19.jpg
│ ├── 2.jpg
│ ├── 20.jpg
│ ├── 21.jpg
│ ├── 22.jpg
│ ├── 23.jpg
│ ├── 24.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ ├── 5.jpg
│ ├── 6.jpg
│ ├── 7.jpg
│ └── 8.jpg
├── 075_fresno-radon
├── 01_original
│ ├── assets
│ │ ├── css
│ │ │ ├── css_reset.css
│ │ │ └── main.css
│ │ └── images
│ │ │ ├── fam.jpg
│ │ │ ├── fam_blur.jpg
│ │ │ ├── fam_blur_under_600_web_medium.jpg
│ │ │ ├── fam_smaller_medium_web.jpg
│ │ │ ├── favicon.ico
│ │ │ ├── radon_house.jpg
│ │ │ ├── us_16_9_smaller_web_30.jpg
│ │ │ └── us_left_web_30.jpg
│ └── index.html
└── 02_refactor_TODO
│ ├── assets
│ ├── css
│ │ ├── css_reset.css
│ │ └── main.css
│ └── images
│ │ ├── fam.jpg
│ │ ├── fam_blur.jpg
│ │ ├── fam_blur_under_600_web_medium.jpg
│ │ ├── fam_smaller_medium_web.jpg
│ │ ├── favicon.ico
│ │ ├── radon_house.jpg
│ │ ├── us_16_9_smaller_web_30.jpg
│ │ └── us_left_web_30.jpg
│ └── index.html
├── 076_here-is-some-x-content
└── index.html
├── 077_challenge_above-the-fold
├── 01_challenge
│ └── instructions.txt
└── 02_solution
│ ├── bird.jpg
│ ├── index.html
│ └── main.css
├── 078_challenge_center-text
├── 01_challenge
│ └── instructions.txt
└── 02_solution
│ ├── bird.jpg
│ ├── index.html
│ └── main.css
├── 079_challenge_below-the-fold
├── 01_challenge
│ └── instructions.txt
└── 02_solution
│ ├── bird.jpg
│ ├── index.html
│ └── main.css
├── 080_challenge_fixed-header
├── 01_challenge
│ └── instructions.txt
└── 02_solution
│ ├── bird.jpg
│ ├── index.html
│ └── main.css
├── 081_challenge_header-content
├── 01_challenge
│ └── instructions.txt
└── 02_solution
│ ├── bird.jpg
│ ├── index.html
│ └── main.css
├── 082_challenge_above-the-fold-svg
├── 01_challenge
│ ├── instructions.txt
│ └── tree.svg
└── 02_solution
│ ├── 01
│ ├── index.html
│ ├── main.css
│ └── tree.svg
│ └── 02
│ ├── index.html
│ ├── main.css
│ └── tree.svg
├── 083_transitions
├── 01_css-hover
│ └── index.html
└── 02_js-example
│ └── index.html
├── 084_animation
├── 01_readme
│ ├── readme.md
│ └── transition-vs-animation.md
├── 02_no-animation
│ ├── index.html
│ ├── main.css
│ └── source-files
│ │ ├── circle-notch.ai
│ │ └── circle-notch.svg
├── 03_animation
│ ├── index.html
│ └── main.css
├── 04_animation-direction
│ ├── index.html
│ └── main.css
├── 05_animation-timing-function
│ ├── index.html
│ └── main.css
├── 06_challenge
│ ├── 01_instructions
│ │ ├── index.html
│ │ ├── instructions.txt
│ │ └── main.css
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 07_challenge
│ ├── 01_instructions
│ │ └── instructions.txt
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 08_animation-fill-mode
│ ├── 01_without
│ │ ├── index.html
│ │ └── main.css
│ └── 02_with
│ │ ├── index.html
│ │ └── main.css
├── 09_animation-play-state
│ ├── index.html
│ └── main.css
├── 10_animation-delay
│ ├── index.html
│ └── main.css
└── 11_transform-rotate-360
│ ├── 01_img
│ ├── 01_rotate-180
│ │ ├── dog.jpeg
│ │ ├── index.html
│ │ └── main.css
│ └── 02_rotate-360
│ │ ├── dog.jpeg
│ │ ├── index.html
│ │ └── main.css
│ └── 02_svg
│ ├── index.html
│ ├── main.css
│ └── source-files
│ └── circle-notch.svg
├── 085_flexbox-challenges
├── 01_readme
│ └── instructions.txt
├── 02_stepper-input
│ ├── 01_instructions
│ │ ├── img.png
│ │ └── index.html
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 03_tabs
│ ├── 01_instructions
│ │ ├── img.png
│ │ └── index.html
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 04_header
│ ├── 01_instructions
│ │ ├── img.png
│ │ └── index.html
│ └── 02_solution
│ │ ├── index.html
│ │ ├── main.css
│ │ └── source-files
│ │ ├── inbox.ai
│ │ └── inbox.svg
├── 05_footer
│ ├── 01_instructions
│ │ ├── img.png
│ │ └── index.html
│ └── 02_solution
│ │ ├── index.html
│ │ ├── main.css
│ │ └── source-files
│ │ ├── spinner.ai
│ │ └── spinner.svg
├── 06_side-bar
│ ├── 01_instructions
│ │ ├── img.png
│ │ └── index.html
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 07_centered-prompt
│ ├── 01_instructions
│ │ ├── img.png
│ │ └── index.html
│ └── 02_solution
│ │ ├── index.html
│ │ ├── main.css
│ │ └── source-files
│ │ ├── smile.ai
│ │ └── smile.svg
├── 08_centered-icon
│ ├── 01_instructions
│ │ ├── img.png
│ │ └── index.html
│ └── 02_solution
│ │ ├── index.html
│ │ ├── main.css
│ │ └── source-files
│ │ ├── phone.ai
│ │ └── phone.svg
├── 09_featured-list
│ ├── 01_instructions
│ │ ├── img.png
│ │ └── index.html
│ └── 02_solution
│ │ ├── index.html
│ │ ├── main.css
│ │ └── source-files
│ │ ├── calendar.ai
│ │ ├── calendar.svg
│ │ ├── envelope.ai
│ │ ├── envelope.svg
│ │ ├── tachometer.ai
│ │ └── tachometer.svg
├── 10_card
│ ├── 01_instructions
│ │ ├── img.png
│ │ └── index.html
│ └── 02_solution
│ │ ├── index.html
│ │ ├── main.css
│ │ └── source-files
│ │ ├── flask.ai
│ │ └── flask.svg
└── 11_card-group
│ ├── 01_instructions
│ ├── img.png
│ └── index.html
│ └── 02_solution
│ ├── 01_step-01
│ ├── index.html
│ └── main.css
│ ├── 02_step-02
│ ├── index.html
│ ├── main.css
│ └── source-files
│ │ ├── bolt.ai
│ │ ├── bolt.svg
│ │ ├── thumbs-up.ai
│ │ ├── thumbs-up.svg
│ │ ├── trophy.ai
│ │ └── trophy.svg
│ └── xxxxx
│ ├── index.html
│ ├── main.css
│ └── source-files
│ ├── bolt.ai
│ ├── bolt.svg
│ ├── thumbs-up.ai
│ ├── thumbs-up.svg
│ ├── trophy.ai
│ └── trophy.svg
├── 086_css-selectors-revisited
├── 00_img
│ ├── 01.jpeg
│ ├── 02.jpeg
│ ├── 03.jpeg
│ ├── 04.jpeg
│ ├── 05.jpeg
│ ├── 05.jpg
│ └── readme.txt
├── 00_readme.md
├── 01_id.html
├── 02_class.html
├── 03_element.html
├── 04_mutliple-elements.html
├── 05_elements-inside-element.html
├── 06_immediate-children.html
├── 07_immediate-siblings.html
├── 08_all-siblings.html
├── 09_attribute.html
├── 10_attribute-value.html
├── 11_containing.html
├── 12_begins-with.html
├── 13_ends-with.html
├── 15_link-active.html
├── 16_link-visited.html
├── 17_link-unvisited.html
├── 18_hover.html
├── 19_first-child.html
├── 20_last-child.html
├── 21_first-of-type.html
├── 22_last-of-type.html
├── 23_nth-child-even.html
├── 24_nth-child-odd.html
├── 25_zebra-striping.html
├── 26_nth-child.html
├── 27_nth-last-child.html
├── 28_nth-child_an-plus-b.html
├── 29_first-letter.html
├── 30_first-line.html
├── 31_input-required.html
└── 31_main.css
├── 087_css-specificity
├── 01_intro
│ ├── img.png
│ ├── index.html
│ └── main.css
├── 02_challenge
│ ├── 01_challenge
│ │ ├── index.html
│ │ └── main.css
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 03_challenge
│ ├── 01_challenge
│ │ ├── index.html
│ │ └── main.css
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 04_challenge
│ ├── 01_challenge
│ │ ├── index.html
│ │ └── main.css
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 05_challenge_order-matters
│ ├── 01_challenge
│ │ ├── index.html
│ │ └── main.css
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 06_challenge_order-matters
│ ├── 01_challenge
│ │ ├── index.html
│ │ └── main.css
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 07_challenge_order-matters
│ ├── 01_challenge
│ │ ├── index.html
│ │ └── main.css
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
├── 08_challenge
│ ├── 01_challenge
│ │ ├── index.html
│ │ └── main.css
│ └── 02_solution
│ │ ├── index.html
│ │ └── main.css
└── 09_challenge
│ ├── 01_challenge
│ ├── index.html
│ └── main.css
│ └── 02_solution
│ ├── index.html
│ └── main.css
├── 088_font-properties
├── 01_color.html
├── 02_font-family.html
├── 03_google-fonts.html
├── 04_font-size.html
├── 05_font-style.html
├── 06_font-variant.html
├── 07_font-weight.html
├── 08_line-height.html
├── 09_line-height.html
└── 10_font-kerning.html
├── 089_text-properties
├── 01_text-align.html
├── 02_text-decoration.html
├── 03_text-decoration.html
├── 04_text-indent.html
├── 05_text-transform.html
├── 06_letter-spacing.html
├── 07_word-spacing.html
└── 08_text-rendering.html
├── 090_text-shadow
├── 01_readme
│ └── readme.md
└── 02
│ ├── index.html
│ └── main.css
├── 091_box-shadow
├── 01_readme
│ └── readme.md
└── 02
│ ├── index.html
│ └── main.css
├── 092_transform
├── index.html
└── main.css
├── 093_html-entities
└── 01_list-of-entities
│ └── index.html
├── 094_quotation_citation
├── 01_quotation.html
├── 02_quotation-cite.html
├── 03_blockquote-cite.html
├── 04_citation.html
└── 05_blockquote-cite_citation.html
├── 095_backgrounds-gradients
├── 01_background-color
│ └── index.html
├── 02_background-image
│ ├── dharma.png
│ ├── index.html
│ └── main.css
├── 03_background-repeat
│ ├── dharma.png
│ ├── index.html
│ └── main.css
├── 04_background-position
│ ├── dharma.png
│ ├── index.html
│ └── main.css
├── 05_background-position
│ ├── img.png
│ ├── index.html
│ └── main.css
├── 06_background-shorthand
│ ├── dharma.png
│ ├── index.html
│ └── main.css
├── 07_bar
│ ├── 01
│ │ ├── index.html
│ │ ├── main.css
│ │ └── source-files
│ │ │ ├── check.ai
│ │ │ └── check.svg
│ └── 02
│ │ ├── index.html
│ │ └── main.css
├── 08_background_gradient
│ ├── index.html
│ └── main.css
└── 09_background-size
│ ├── 01
│ ├── 01.jpeg
│ ├── index.html
│ └── main.css
│ ├── 02_cover
│ ├── 01.jpeg
│ ├── index.html
│ └── main.css
│ └── 03_contain
│ ├── 01.jpeg
│ ├── index.html
│ └── main.css
├── 096_audio
├── 00_files
│ ├── Newish_Disco.mp3
│ └── license
│ │ └── newish-disco.png
├── 01
│ ├── index.html
│ └── main.css
└── 02_javascript-controls
│ ├── 01
│ ├── index.html
│ └── main.css
│ └── 02
│ ├── index.html
│ └── main.css
├── 097_video
├── 00_files
│ ├── me.mp4
│ ├── me.ogv
│ └── me.webm
├── 01
│ ├── index.html
│ └── main.css
├── 02_poster
│ ├── happy.jpg
│ ├── index.html
│ └── main.css
└── 03_background
│ ├── index.html
│ └── main.css
├── 098_forms
├── 01_input-text
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ └── 02_placeholder
│ │ ├── index.html
│ │ └── main.css
├── 02_input-submit
│ ├── index.html
│ └── main.css
├── 03_input_required
│ ├── index.html
│ └── main.css
├── 04_text-area
│ ├── index.html
│ └── main.css
├── 05_input-checkbox
│ ├── index.html
│ └── main.css
├── 06_input-radio
│ ├── index.html
│ └── main.css
├── 07_select
│ ├── index.html
│ └── main.css
├── 08_input-hidden
│ ├── index.html
│ └── main.css
├── 09_input-file
│ ├── 01_do-not-style_input-file
│ │ ├── index.html
│ │ └── main.css
│ ├── 02_do-not-do-this_pseudo-element
│ │ ├── index.html
│ │ └── main.css
│ ├── 03_do-not-do-this_JS
│ │ ├── index.html
│ │ ├── main.css
│ │ ├── main.js
│ │ └── source-files
│ │ │ ├── upload.ai
│ │ │ └── upload.svg
│ ├── 04_label
│ │ ├── index.html
│ │ └── main.css
│ └── 05_position_relative_absolute
│ │ ├── credit.txt
│ │ ├── index.html
│ │ └── main.css
├── 10_fieldset
│ ├── index.html
│ └── main.css
├── 11_fieldset_legend
│ ├── index.html
│ └── main.css
├── 12_input-search
│ ├── index.html
│ └── main.css
├── 13_input-email
│ ├── index.html
│ └── main.css
├── 14_input-telephone
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ └── 02_a-href-tel-sms
│ │ ├── index.html
│ │ └── main.css
├── 15_input-url
│ ├── index.html
│ └── main.css
├── 16_input-range
│ ├── index.html
│ └── main.css
├── 17_input-date
│ ├── 01
│ │ ├── index.html
│ │ └── main.css
│ └── 02
│ │ ├── index.html
│ │ └── main.css
├── 18_input-time
│ ├── index.html
│ └── main.css
└── 19_login-example
│ ├── index.html
│ └── main.css
└── 099_columns
├── index.html
├── lincoln.jpg
└── main.css
/000_temp/01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/000_temp/01.jpg
--------------------------------------------------------------------------------
/000_temp/02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/000_temp/02.jpg
--------------------------------------------------------------------------------
/001_workflow-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | An Anatomy of An HTML Element
10 |
11 | Anatomy
6 |
7 |
8 |
9 | Hello World!
10 |
11 |
12 |
--------------------------------------------------------------------------------
/005_html-comments/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hello World!
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/006_h1_p/04_h1-h6/six-headings.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | heading 1
10 | heading 2
11 | heading 3
12 | heading 4
13 | heading 5
14 | heading 6
15 |
16 |
17 |
--------------------------------------------------------------------------------
/007_lists/07_list-style-type/02_custom/source-files/taxi-sm.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/007_lists/07_list-style-type/02_custom/source-files/taxi-sm.ai
--------------------------------------------------------------------------------
/007_lists/08_hortizontal/01/source-files/taxi-sm.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/007_lists/08_hortizontal/01/source-files/taxi-sm.ai
--------------------------------------------------------------------------------
/008_a/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | google
10 |
11 |
12 |
--------------------------------------------------------------------------------
/009_img/01/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/009_img/01/img/firefox-icon.png
--------------------------------------------------------------------------------
/009_img/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/014_css/01_external/css/main.css:
--------------------------------------------------------------------------------
1 | p {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/014_css/01_external/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/014_css/01_external/img/firefox-icon.png
--------------------------------------------------------------------------------
/014_css/02_internal/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/014_css/02_internal/img/firefox-icon.png
--------------------------------------------------------------------------------
/014_css/03_inline/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/014_css/03_inline/img/firefox-icon.png
--------------------------------------------------------------------------------
/014_css/04_at-import/css/main.css:
--------------------------------------------------------------------------------
1 | @import "otras.css";
--------------------------------------------------------------------------------
/014_css/04_at-import/css/otras.css:
--------------------------------------------------------------------------------
1 | p {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/014_css/04_at-import/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/014_css/04_at-import/img/firefox-icon.png
--------------------------------------------------------------------------------
/015_css-resets/00_without/six-headings.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | heading 1
10 | heading 2
11 | heading 3
12 | heading 4
13 | heading 5
14 | heading 6
15 |
16 |
17 |
--------------------------------------------------------------------------------
/016_css-selectors/01_tag/01_single-selector/css/main.css:
--------------------------------------------------------------------------------
1 | p {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/016_css-selectors/01_tag/01_single-selector/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/016_css-selectors/01_tag/01_single-selector/img/firefox-icon.png
--------------------------------------------------------------------------------
/016_css-selectors/01_tag/02_multiple-declarations/css/main.css:
--------------------------------------------------------------------------------
1 | p {
2 | color: red;
3 | width: 500px;
4 | border: 1px solid black;
5 | }
--------------------------------------------------------------------------------
/016_css-selectors/01_tag/02_multiple-declarations/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/016_css-selectors/01_tag/02_multiple-declarations/img/firefox-icon.png
--------------------------------------------------------------------------------
/016_css-selectors/01_tag/03_multiple-selectors/css/main.css:
--------------------------------------------------------------------------------
1 | p,li,h1 {
2 | color: red;
3 | width: 500px;
4 | border: 1px solid black;
5 | }
--------------------------------------------------------------------------------
/016_css-selectors/01_tag/03_multiple-selectors/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/016_css-selectors/01_tag/03_multiple-selectors/img/firefox-icon.png
--------------------------------------------------------------------------------
/016_css-selectors/02_id/01_correct/css/main.css:
--------------------------------------------------------------------------------
1 | #promote {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/016_css-selectors/02_id/01_correct/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/016_css-selectors/02_id/01_correct/img/firefox-icon.png
--------------------------------------------------------------------------------
/016_css-selectors/02_id/02_incorrect/css/main.css:
--------------------------------------------------------------------------------
1 | #promote {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/016_css-selectors/02_id/02_incorrect/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/016_css-selectors/02_id/02_incorrect/img/firefox-icon.png
--------------------------------------------------------------------------------
/016_css-selectors/03_class/css/main.css:
--------------------------------------------------------------------------------
1 | .emphasize {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/016_css-selectors/03_class/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/016_css-selectors/03_class/img/firefox-icon.png
--------------------------------------------------------------------------------
/016_css-selectors/04_attribute/css/main.css:
--------------------------------------------------------------------------------
1 | p[contenteditable] {
2 | color: red;
3 | border: 1px dashed black;
4 | }
--------------------------------------------------------------------------------
/016_css-selectors/04_attribute/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/016_css-selectors/04_attribute/img/firefox-icon.png
--------------------------------------------------------------------------------
/016_css-selectors/05_pseudo-class/css/main.css:
--------------------------------------------------------------------------------
1 | a:hover {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/016_css-selectors/05_pseudo-class/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/016_css-selectors/05_pseudo-class/img/firefox-icon.png
--------------------------------------------------------------------------------
/017_css-comments/css/main.css:
--------------------------------------------------------------------------------
1 | a:hover {
2 | color: red;
3 | }
4 |
5 | /*
6 | All material is licensed under the Apache License Version 2.0, January 2004
7 | http://www.apache.org/licenses/LICENSE-2.0
8 | */
9 |
--------------------------------------------------------------------------------
/017_css-comments/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/017_css-comments/img/firefox-icon.png
--------------------------------------------------------------------------------
/019_box-model/01_padding/css/main.css:
--------------------------------------------------------------------------------
1 | p {
2 | border: 1px solid black;
3 | }
4 |
5 | div {
6 | border: 2px solid #000;
7 | width: 500px;
8 | margin: 20px auto;
9 | }
10 |
11 | .pad-me {
12 | padding: 50px;
13 | }
14 |
15 | .bb {
16 | box-sizing: border-box;
17 | }
--------------------------------------------------------------------------------
/019_box-model/02_border/css/main.css:
--------------------------------------------------------------------------------
1 | p {
2 | border: 1px solid black;
3 | }
4 |
5 | div {
6 | border: 2px solid #000;
7 | width: 500px;
8 | margin: 20px auto;
9 | }
10 |
11 | .border-me {
12 | border: 30px solid black;
13 | }
14 |
15 | .bb {
16 | box-sizing: border-box;
17 | }
--------------------------------------------------------------------------------
/020_border-radius/01_single-div/css/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-size: 48px;
3 | }
4 |
5 | div {
6 | width: 100px;
7 | height: 100px;
8 | margin: 0 auto;
9 | border: 2px solid black;
10 | }
11 |
12 | #rounded {
13 | border-radius: 50%;
14 | }
--------------------------------------------------------------------------------
/021_mozilla/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/021_mozilla/img/firefox-icon.png
--------------------------------------------------------------------------------
/021_mozilla/img/sml.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/021_mozilla/img/sml.png
--------------------------------------------------------------------------------
/022_solution/pic/surf.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/022_solution/pic/surf.jpg
--------------------------------------------------------------------------------
/026_hands-on-solutions/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | my nav
11 |
12 | my article
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/028_outline/03_explicit-sections/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | explicit nav
11 | explicit article
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/029_box-model_reminder/box-model.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/029_box-model_reminder/box-model.gif
--------------------------------------------------------------------------------
/029_box-model_reminder/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 | source: www.w3schools.com
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/030_box-sizing_border-box/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | border: 3px solid #00FF00;
3 | }
4 |
5 | .simple {
6 | width: 500px;
7 | margin: 20px auto;
8 | }
9 |
10 | .fancy {
11 | width: 500px;
12 | margin: 20px auto;
13 | padding: 50px;
14 | border-width: 10px;
15 | }
16 |
17 | .after {
18 | box-sizing: border-box;
19 | }
--------------------------------------------------------------------------------
/031_border-radius/01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
--------------------------------------------------------------------------------
/031_border-radius/01/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 200px;
3 | height: 200px;
4 | margin: 0 auto;
5 | border: 10px solid red;
6 | background-color: tomato;
7 | border-radius: 100%;
8 | /*border-radius: 10% 100%;*/
9 | /*border-radius: 10% 100% 100% 25%;*/
10 | /*
11 | TRBL
12 | TB RL
13 | T R B L
14 | */
15 | }
--------------------------------------------------------------------------------
/031_border-radius/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/031_border-radius/02/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 200px;
3 | height: 200px;
4 | margin: 0 auto;
5 | border: 10px solid red;
6 | background-color: tomato;
7 | /*border-radius: 100%;*/
8 | border-radius: 10% 100%;
9 | /*border-radius: 10% 100% 100% 25%;*/
10 | /*
11 | TRBL
12 | TB RL
13 | T R B L
14 | */
15 | }
--------------------------------------------------------------------------------
/031_border-radius/03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/031_border-radius/03/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 200px;
3 | height: 200px;
4 | margin: 0 auto;
5 | border: 10px solid red;
6 | background-color: tomato;
7 | /*border-radius: 100%;*/
8 | /*border-radius: 10% 100%;*/
9 | border-radius: 10% 100% 100% 25%;
10 | /*
11 | TRBL
12 | TB RL
13 | T R B L
14 | */
15 | }
--------------------------------------------------------------------------------
/031_border-radius/04/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/031_border-radius/04/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 200px;
3 | height: 200px;
4 | margin: 0 auto;
5 | border: 10px solid red;
6 | background-color: tomato;
7 | /*border-radius: 100%;*/
8 | /*border-radius: 10% 100%;*/
9 | border-radius: 20% 0 0 0 ;
10 | /*
11 | TRBL
12 | TB RL
13 | T R B L
14 | */
15 | }
--------------------------------------------------------------------------------
/032_margin_zero_auto/01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Result
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/032_margin_zero_auto/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Result
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/033_display/main.css:
--------------------------------------------------------------------------------
1 | p, div {
2 | border: 1px solid #000;
3 | padding: 10px;
4 | margin: 10px;
5 | /*display: block;*/
6 | }
7 |
8 | span {
9 | color: red;
10 | /*display: inline;*/
11 | }
--------------------------------------------------------------------------------
/034_display_block/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Result
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/035_display_inline/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Result
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/036_display_inline-block/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Result
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/037_display_none/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Result
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/038_display_challenge/README.txt:
--------------------------------------------------------------------------------
1 | Using the stylesheet in this directory, create a page filled with divs styled by that style sheet.
2 |
3 | You will need to add one additional declaration to your stylesheet:
4 |
5 | change the default display property of divs (block) to a setting which allows the divs to be displayed one after another horizontally.
--------------------------------------------------------------------------------
/038_display_challenge/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | height: 50px;
3 | width: 100px;
4 | border: 2px solid black;
5 | border-radius: 50px;
6 | }
7 |
8 | .one {
9 | background-color: #FF0000;
10 | }
11 |
12 | .two {
13 | background-color: #0000FF;
14 | }
15 |
16 | .three {
17 | background-color: #FFD700;
18 | }
19 |
20 | .four {
21 | background-color: #308014;
22 | }
--------------------------------------------------------------------------------
/040_display_common-use_menu/01/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | border: 1px dashed blue;
3 | }
4 |
5 | ul {
6 | list-style-type: none;
7 | }
8 |
9 | li {
10 | /*border: 2px solid red;*/
11 | border-radius: 50px;
12 | }
--------------------------------------------------------------------------------
/041_display_inline-block/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | border: 1px solid red;
3 | background-color: darkgray;
4 | text-align: center;
5 | }
6 |
7 | .box2 {
8 | display: inline-block;
9 | width: 200px;
10 | height: 100px;
11 | margin: 1em;
12 | }
--------------------------------------------------------------------------------
/043_position-fixed/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Result
6 |
7 |
8 | info
9 |
10 |
11 |
--------------------------------------------------------------------------------
/044_position-relative/01/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | border: 2px solid red;
3 | }
4 |
5 | div {
6 | height: 100px;
7 | width: 100px;
8 | background-color: blue;
9 | color: #fff;
10 | }
11 |
12 | #relative {
13 | position: relative;
14 | top: 20px;
15 | left: 20px;
16 | background-color: green;
17 | }
--------------------------------------------------------------------------------
/044_position-relative/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 | RELATIVE
10 |
11 |
12 |
--------------------------------------------------------------------------------
/044_position-relative/02/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | border: 2px solid red;
3 | }
4 |
5 | div {
6 | height: 100px;
7 | width: 100px;
8 | background-color: blue;
9 | color: #fff;
10 | }
11 |
12 | #relative {
13 | position: relative;
14 | right: 10px;
15 | background-color: green;
16 | }
--------------------------------------------------------------------------------
/044_position-relative/03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 | RELATIVE
10 |
11 |
12 |
--------------------------------------------------------------------------------
/044_position-relative/03/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | border: 2px solid red;
3 | }
4 |
5 | div {
6 | height: 100px;
7 | width: 100px;
8 | background-color: blue;
9 | color: #fff;
10 | }
11 |
12 | #relative {
13 | position: relative;
14 | }
--------------------------------------------------------------------------------
/045_position-absolute/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | RELATIVE
10 |
ABSOLUTE
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/052_position_challenges-and-solutions/02_solutions/01_fixed/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 100%;
3 | height: 40px;
4 | border: 4px solid red;
5 | background-color: tomato;
6 | position: fixed;
7 | bottom: 0;
8 | }
--------------------------------------------------------------------------------
/052_position_challenges-and-solutions/02_solutions/02_relative/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/052_position_challenges-and-solutions/02_solutions/03_absolute/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | RELATIVE
11 |
ABSOLUTE
12 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/055_flex-box_items/03_flex-grow/01/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | }
4 |
5 | div {
6 | border: 2px solid black;
7 | height: 100px;
8 | }
9 |
10 | .flex1 {
11 | flex-grow: 1;
12 | }
13 |
14 | .flex2 {
15 | flex-grow: 2;
16 | }
--------------------------------------------------------------------------------
/055_flex-box_items/03_flex-grow/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/055_flex-box_items/03_flex-grow/02/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | }
4 |
5 | div {
6 | border: 2px solid black;
7 | height: 100px;
8 | flex-grow: 1;
9 | }
--------------------------------------------------------------------------------
/055_flex-box_items/03_flex-grow/03/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | }
4 |
5 | div {
6 | border: 2px solid black;
7 | height: 100px;
8 | }
9 |
10 | .flex1 {
11 | flex-grow: 1;
12 | }
13 |
14 | .flex2 {
15 | flex-grow: 2;
16 | }
--------------------------------------------------------------------------------
/055_flex-box_items/03_flex-grow/04_experiment/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/055_flex-box_items/03_flex-grow/04_experiment/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | flex-wrap: wrap;
4 | }
5 |
6 | div {
7 | border: 2px solid black;
8 | height: 100px;
9 | }
10 |
11 | .flex1 {
12 | flex-grow: 1;
13 | }
14 |
15 | .flex2 {
16 | flex-grow: 2;
17 | /*width: 100%;*/
18 | }
19 |
20 | /*
21 | What if ...
22 | flex-wrap: wrap
23 | width: 100%
24 | */
--------------------------------------------------------------------------------
/055_flex-box_items/04_flex-shrink/01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/055_flex-box_items/05_flex-basis/01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/055_flex-box_items/05_flex-basis/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/055_flex-box_items/05_flex-basis/02/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | }
4 |
5 | div {
6 | border: 2px solid black;
7 | height: 100px;
8 | flex-basis: 33%;
9 | }
10 |
11 | .flex1 {
12 | flex-grow: 1;
13 | }
14 |
15 | .flex2 {
16 | flex-grow: 2;
17 | }
--------------------------------------------------------------------------------
/055_flex-box_items/05_flex-basis/03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/055_flex-box_items/06_flex/01/main.css:
--------------------------------------------------------------------------------
1 | .container {
2 | border: 5px solid red;
3 | display: flex;
4 | }
5 |
6 | .item {
7 | width: 300px;
8 | height: 100px;
9 | margin: 1em;
10 | border: 1px solid red;
11 | background-color: darkgray;
12 | text-align: center;
13 | flex: 1 1 auto;
14 | /* flex-grow, flex-shrink, flex-basis */
15 | }
--------------------------------------------------------------------------------
/056_flexbox_challenges-and-solutions/01_challenges/README.txt:
--------------------------------------------------------------------------------
1 | Create eight pages which rearrange this code by changing the properties of the flex container. Upload your code to Github.
2 |
3 | Create six pages with each page demonstrating one of the properties which can be set on a flex item. Upload your code to Github.
4 |
--------------------------------------------------------------------------------
/056_flexbox_challenges-and-solutions/02_solutions/01_eight-pages/02/main.css:
--------------------------------------------------------------------------------
1 | .container {
2 | border: 5px solid red;
3 | display: flex;
4 | flex-direction: column;
5 | flex-wrap: nowrap;
6 | }
7 |
8 | .item {
9 | width: 200px;
10 | height: 100px;
11 | margin: 1em;
12 | border: 1px solid red;
13 | background-color: darkgray;
14 | text-align: center;
15 | }
--------------------------------------------------------------------------------
/057_media-queries/01_min-width/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | min-width: 900px
11 | I am red at 900px or MORE
12 |
13 |
14 |
--------------------------------------------------------------------------------
/057_media-queries/01_min-width/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-size: 32px;
3 | }
4 |
5 | @media (min-width: 900px) {
6 |
7 | h1 {
8 | color: red;
9 | }
10 |
11 | }
--------------------------------------------------------------------------------
/057_media-queries/02_max-width/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | max-width: 900px
11 | I am red at 900px or LESS
12 |
13 |
14 |
--------------------------------------------------------------------------------
/057_media-queries/02_max-width/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-size: 32px;
3 | }
4 |
5 | @media (max-width: 900px) {
6 |
7 | h1 {
8 | color: red;
9 | }
10 |
11 | }
--------------------------------------------------------------------------------
/057_media-queries/03_print/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | @media print
11 | I have a dashed border when printed
12 |
13 |
14 |
--------------------------------------------------------------------------------
/057_media-queries/03_print/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-size: 32px;
3 | }
4 |
5 | @media print {
6 |
7 | h1 {
8 | border: 4px dashed gray;
9 | }
10 |
11 | }
--------------------------------------------------------------------------------
/057_media-queries/04_screen_min-width/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | min-width: 900px
11 | I am red at 900px or MORE
12 |
13 |
14 |
--------------------------------------------------------------------------------
/057_media-queries/04_screen_min-width/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-size: 32px;
3 | }
4 |
5 | @media screen and (min-width: 900px) {
6 |
7 | h1 {
8 | color: red;
9 | }
10 |
11 | }
--------------------------------------------------------------------------------
/057_media-queries/05_min-width/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: blue;
3 | font-size: 32px;
4 | }
--------------------------------------------------------------------------------
/057_media-queries/05_min-width/mq_600-899.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: green;
3 | }
--------------------------------------------------------------------------------
/057_media-queries/05_min-width/mq_900-plus.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/057_media-queries/06_max-width/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-size: 32px;
3 | }
--------------------------------------------------------------------------------
/057_media-queries/06_max-width/mq_900-less.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/057_media-queries/07_print/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | @media print
12 | I have a dashed border when printed
13 |
14 |
15 |
--------------------------------------------------------------------------------
/057_media-queries/07_print/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-size: 32px;
3 | }
--------------------------------------------------------------------------------
/057_media-queries/07_print/mq_print.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | border: 4px dashed gray;
3 | }
--------------------------------------------------------------------------------
/057_media-queries/08_screen_min-width/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-size: 32px;
3 | }
--------------------------------------------------------------------------------
/057_media-queries/08_screen_min-width/mq_screen_min-width.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/057_media-queries/09_taco-menu-example/02_media-query-in-the-link-to-the-stylesheet/README.txt:
--------------------------------------------------------------------------------
1 | Title
6 | Title
6 | This Is Hawaii
11 |
12 |
13 |
--------------------------------------------------------------------------------
/060_units-of-measurement/07_vh_relative/04/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: url(sunset.jpg) no-repeat top center fixed;
3 | background-size: cover;
4 | /* flex */
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 | /* height */
9 | height: 98vh;
10 | }
11 |
12 | h1 {
13 | color: white;
14 | font-size: 7rem;
15 | }
--------------------------------------------------------------------------------
/060_units-of-measurement/07_vh_relative/04/sunset.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/060_units-of-measurement/07_vh_relative/04/sunset.jpg
--------------------------------------------------------------------------------
/060_units-of-measurement/10_good-practice/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/060_units-of-measurement/10_good-practice/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 100%;
3 | height: 100px;
4 | background-color: tomato;
5 | border-radius: 5px;
6 | }
--------------------------------------------------------------------------------
/060_units-of-measurement/11_bad-practice/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/060_units-of-measurement/11_bad-practice/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 900px;
3 | height: 100px;
4 | background-color: tomato;
5 | border-radius: 5px;
6 | margin: 0 auto;
7 | }
--------------------------------------------------------------------------------
/061_google-responsive-flexbox-examples/01_readme/take-aways.txt:
--------------------------------------------------------------------------------
1 | Design:
2 | Build mobile first
3 |
4 | Use:
5 | display: flex;
6 | flex-flow: row wrap;
7 |
8 | Each row:
9 | What you want on each row adds up to 100%
--------------------------------------------------------------------------------
/061_google-responsive-flexbox-examples/02_mostly-fluid/sites-using-this-pattern.txt:
--------------------------------------------------------------------------------
1 | http://mediaqueri.es/ala/
2 |
3 | http://mediaqueri.es/
4 |
5 | http://simplebits.com/
6 |
7 |
8 | note:
9 | sites change all the time
10 | these sites have changed since this was posted
--------------------------------------------------------------------------------
/061_google-responsive-flexbox-examples/02_mostly-fluid/style.css:
--------------------------------------------------------------------------------
1 | .c1 {
2 | background-color: #003476;
3 | }
4 |
5 | .c2 {
6 | background-color: #0062d2;
7 | }
8 |
9 | .c3 {
10 | background-color: #b4d2f7;
11 | }
12 |
13 | .c4 {
14 | background-color: #d5dfef;
15 | }
16 |
17 | .c5 {
18 | background-color: #dfe1e5;
19 | }
--------------------------------------------------------------------------------
/061_google-responsive-flexbox-examples/03_column-drop/sites-using-this-pattern.txt:
--------------------------------------------------------------------------------
1 | https://modernizr.com/
2 |
3 | http://weenudge.com/
4 |
5 |
6 | note:
7 | sites change all the time
8 | these sites have changed since this was posted
--------------------------------------------------------------------------------
/061_google-responsive-flexbox-examples/03_column-drop/style.css:
--------------------------------------------------------------------------------
1 | .c1 {
2 | color: #fff;
3 | background-color: #003476;
4 | }
5 |
6 | .c2 {
7 | color: #fff;
8 | background-color: #0062d2;
9 | }
10 |
11 | .c3 {
12 | color: #fff;
13 | background-color: #b4d2f7;
14 | }
--------------------------------------------------------------------------------
/061_google-responsive-flexbox-examples/04_layout-shifter/sites-using-this-pattern.txt:
--------------------------------------------------------------------------------
1 | http://foodsense.is/
2 |
3 | http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
4 |
5 | http://www.anderssonwise.com/
6 |
7 |
8 | note:
9 | sites change all the time
10 | these sites have changed since this was posted
--------------------------------------------------------------------------------
/061_google-responsive-flexbox-examples/05_tiny-tweaks/sites-using-this-pattern.txt:
--------------------------------------------------------------------------------
1 | http://shinydemos.com/
2 |
3 | http://gingerwhale.com/
4 |
5 | http://futurefriendlyweb.com/
6 |
7 | note:
8 | sites change all the time
9 | these sites have changed since this was posted
--------------------------------------------------------------------------------
/061_google-responsive-flexbox-examples/05_tiny-tweaks/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | color: whitesmoke;
3 | background-color: #003476;
4 | }
--------------------------------------------------------------------------------
/061_google-responsive-flexbox-examples/06_off-canvas/02_solution/sites-using-this-pattern.txt:
--------------------------------------------------------------------------------
1 | http://www.html5rocks.com/
2 |
3 | https://www.google.com/nexus/
4 |
5 | https://www.google.com
6 |
7 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/off-canvas?hl=en
8 |
9 | note:
10 | sites change all the time
11 | these sites have changed since this was posted
--------------------------------------------------------------------------------
/062_other-flexbox-examples/02_flex-box_vertical-center/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | Title
6 | Title
6 | Title
6 | Hello
11 |
12 |
13 |
--------------------------------------------------------------------------------
/065_background/01_background-color/01/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: red;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | height: 700px;
7 | }
8 |
9 | h1 {
10 | color: whitesmoke;
11 | font-size: 20rem;
12 | }
--------------------------------------------------------------------------------
/065_background/01_background-color/02_background/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | Hello
11 |
12 |
13 |
--------------------------------------------------------------------------------
/065_background/01_background-color/02_background/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: red;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | height: 700px;
7 | }
8 |
9 | h1 {
10 | color: whitesmoke;
11 | font-size: 20rem;
12 | }
--------------------------------------------------------------------------------
/065_background/02_background-image/01/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/065_background/02_background-image/01/01.png
--------------------------------------------------------------------------------
/065_background/02_background-image/01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | Title
6 | Title
6 | Title
6 | Title
6 | Title
6 | Title
6 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/065_background/02_background-image/03_size/04_contain/02/styles.css:
--------------------------------------------------------------------------------
1 | div {
2 | height: 400px;
3 | width: 1400px;
4 | border: 20px groove orange;
5 | background-image: url("01.png");
6 | background-repeat: no-repeat;
7 | background-size: contain;
8 | }
--------------------------------------------------------------------------------
/065_background/02_background-image/03_size/05_cover/01/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/065_background/02_background-image/03_size/05_cover/01/01.png
--------------------------------------------------------------------------------
/065_background/02_background-image/03_size/05_cover/01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | Title
6 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/065_background/02_background-image/03_size/05_cover/02/styles.css:
--------------------------------------------------------------------------------
1 | div {
2 | height: 400px;
3 | width: 400px;
4 | border: 20px groove orange;
5 | background-image: url("01.png");
6 | background-repeat: no-repeat;
7 | background-size: cover;
8 | }
--------------------------------------------------------------------------------
/065_background/02_background-image/03_size/05_cover/03/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/065_background/02_background-image/03_size/05_cover/03/01.png
--------------------------------------------------------------------------------
/065_background/02_background-image/03_size/05_cover/03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/065_background/02_background-image/03_size/05_cover/03/styles.css:
--------------------------------------------------------------------------------
1 | div {
2 | height: 2350px;
3 | width: 400px;
4 | border: 20px groove orange;
5 | background-image: url("01.png");
6 | background-repeat: no-repeat;
7 | background-size: cover;
8 | }
--------------------------------------------------------------------------------
/065_background/02_background-image/04_position/01/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/065_background/02_background-image/04_position/01/01.png
--------------------------------------------------------------------------------
/065_background/02_background-image/04_position/01/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-image: url("01.png");
3 | background-repeat: no-repeat;
4 | background-position: center;
5 | }
--------------------------------------------------------------------------------
/065_background/02_background-image/04_position/02/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/065_background/02_background-image/04_position/02/01.png
--------------------------------------------------------------------------------
/065_background/02_background-image/04_position/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/065_background/02_background-image/04_position/02/styles.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 600px;
3 | height: 600px;
4 | border: 20px ridge orange;
5 | background-image: url("01.png");
6 | background-repeat: no-repeat;
7 | background-position: center;
8 | }
--------------------------------------------------------------------------------
/065_background/02_background-image/04_position/03/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/065_background/02_background-image/04_position/03/01.png
--------------------------------------------------------------------------------
/065_background/02_background-image/04_position/03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | 300px 10px
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/065_background/02_background-image/04_position/03/styles.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 600px;
3 | height: 600px;
4 | border: 20px ridge orange;
5 | background-image: url("01.png");
6 | background-repeat: no-repeat;
7 | background-position: 300px 10px;
8 | }
--------------------------------------------------------------------------------
/065_background/02_background-image/05_origin/01/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/065_background/02_background-image/05_origin/01/01.png
--------------------------------------------------------------------------------
/065_background/02_background-image/05_origin/01/main.css:
--------------------------------------------------------------------------------
1 | div {
2 | width: 600px;
3 | height: 600px;
4 | border: 50px solid rgba(0,0,0,1);
5 | background-image: url(01.png);
6 | background-repeat: no-repeat;
7 | background-size: contain;
8 | background-origin: content-box;
9 | padding: 40px;
10 | color: white;
11 | background-color: #3A5FCD;
12 | }
--------------------------------------------------------------------------------
/066_refactor-challenge_background-img/01_original/img/fog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/066_refactor-challenge_background-img/01_original/img/fog.jpg
--------------------------------------------------------------------------------
/066_refactor-challenge_background-img/02_refactored_inline-block_rgba/pic/fog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/066_refactor-challenge_background-img/02_refactored_inline-block_rgba/pic/fog.jpg
--------------------------------------------------------------------------------
/066_refactor-challenge_background-img/03_refactored_flexbox/pic/fog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/066_refactor-challenge_background-img/03_refactored_flexbox/pic/fog.jpg
--------------------------------------------------------------------------------
/067_full-page-background/01_full-page-background/img/background-photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/067_full-page-background/01_full-page-background/img/background-photo.jpg
--------------------------------------------------------------------------------
/067_full-page-background/01_full-page-background/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Responsive Full Background Image
6 | Title
6 |
6 |
7 |
--------------------------------------------------------------------------------
/070_svg/09_css/04_svg-img/01_no-svg-css/01_square/style.css:
--------------------------------------------------------------------------------
1 | #MyRect {
2 | stroke: black;
3 | fill: red;
4 | }
5 |
6 | #MyRect:hover {
7 | stroke: black;
8 | fill: blue;
9 | }
--------------------------------------------------------------------------------
/070_svg/09_css/04_svg-img/01_no-svg-css/02_binoculars/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | Title
6 |
6 |
7 |
--------------------------------------------------------------------------------
/070_svg/09_css/04_svg-img/02_img-css-width/01_square/style.css:
--------------------------------------------------------------------------------
1 | #img-bino {
2 | width: 400px;
3 | color: red;
4 | }
--------------------------------------------------------------------------------
/070_svg/09_css/04_svg-img/02_img-css-width/02_binoculars/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | Title
6 | Title
6 |
7 |
8 |
9 | Title
6 | Title
6 |
11 | Jonathon Livingston Seagull
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/079_challenge_below-the-fold/01_challenge/instructions.txt:
--------------------------------------------------------------------------------
1 | Using the webpage you created in the previous challenge, add content "below the fold".
--------------------------------------------------------------------------------
/079_challenge_below-the-fold/02_solution/bird.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/079_challenge_below-the-fold/02_solution/bird.jpg
--------------------------------------------------------------------------------
/080_challenge_fixed-header/02_solution/bird.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/080_challenge_fixed-header/02_solution/bird.jpg
--------------------------------------------------------------------------------
/081_challenge_header-content/01_challenge/instructions.txt:
--------------------------------------------------------------------------------
1 | Using the webpage you created in the previous challenge, add two red boxes to the header area to the top of the page which remains fixed as we scroll the page.
2 |
3 | Put one red box on the left and one on the right.
4 |
5 | In a future challenege, we will add more content to this header area, but don't add any more content to it now.
--------------------------------------------------------------------------------
/081_challenge_header-content/02_solution/bird.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/081_challenge_header-content/02_solution/bird.jpg
--------------------------------------------------------------------------------
/082_challenge_above-the-fold-svg/01_challenge/instructions.txt:
--------------------------------------------------------------------------------
1 | Create a webpage that has a full page SVG image.
2 |
3 | This SVG image should always be shown "above the fold". What this means is that, regardless of the size of the browser viewport, the image always takes up the full viewport height. Any other content on the webpage will appear "below the fold".
4 |
--------------------------------------------------------------------------------
/084_animation/02_no-animation/source-files/circle-notch.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/084_animation/02_no-animation/source-files/circle-notch.ai
--------------------------------------------------------------------------------
/084_animation/06_challenge/01_instructions/instructions.txt:
--------------------------------------------------------------------------------
1 | Move the notched circle from the left side of the screen to the right side of the screen, and back, infinitely.
2 |
3 | The starting files are in this folder.
--------------------------------------------------------------------------------
/084_animation/07_challenge/01_instructions/instructions.txt:
--------------------------------------------------------------------------------
1 | Make text grow in size, then shrink, infinitely.
--------------------------------------------------------------------------------
/084_animation/07_challenge/02_solution/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | What's Up?
11 |
12 |
13 |
--------------------------------------------------------------------------------
/084_animation/08_animation-fill-mode/01_without/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | What's Up?
11 |
12 |
13 |
--------------------------------------------------------------------------------
/084_animation/08_animation-fill-mode/02_with/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | What's Up?
11 |
12 |
13 |
--------------------------------------------------------------------------------
/084_animation/09_animation-play-state/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | Change 'animation-play-state' to 'running' to see this animation.
11 |
12 | What's Up?
13 |
14 |
15 |
--------------------------------------------------------------------------------
/084_animation/10_animation-delay/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | What's Up?
11 |
12 |
13 |
--------------------------------------------------------------------------------
/084_animation/11_transform-rotate-360/01_img/01_rotate-180/dog.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/084_animation/11_transform-rotate-360/01_img/01_rotate-180/dog.jpeg
--------------------------------------------------------------------------------
/084_animation/11_transform-rotate-360/01_img/01_rotate-180/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | Title
6 | Title
6 |
7 |
8 |
9 |
10 | Create this using flexbox:
11 |
12 | Title
6 |
7 |
12 |
13 |
14 |
15 |
16 | something
17 |
18 |
19 |
--------------------------------------------------------------------------------
/089_text-properties/05_text-transform.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
7 |
12 |
13 |
14 |
15 |
16 | something
17 |
18 |
19 |
--------------------------------------------------------------------------------
/090_text-shadow/01_readme/readme.md:
--------------------------------------------------------------------------------
1 | # text-shadow
2 |
3 | The text-shadow property adds shadows to text.
4 |
5 |
6 | It accepts a comma-separated list: x, y, blur radius, color
7 |
8 | ```css
9 | /* offset-x | offset-y | blur-radius | color */
10 | text-shadow: 1px 1px 2px black;
11 | ```
--------------------------------------------------------------------------------
/090_text-shadow/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | A
11 |
12 |
13 |
--------------------------------------------------------------------------------
/091_box-shadow/02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/092_transform/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/094_quotation_citation/01_quotation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
7 |
8 |
9 | James Bond once said, Shaken, not stirred.
10 |
11 |
12 |
--------------------------------------------------------------------------------
/094_quotation_citation/04_citation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
7 |
8 |
9 | I really like the book West With The Night
10 |
11 |
12 |
--------------------------------------------------------------------------------
/095_backgrounds-gradients/02_background-image/dharma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/095_backgrounds-gradients/02_background-image/dharma.png
--------------------------------------------------------------------------------
/095_backgrounds-gradients/02_background-image/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 | Title
6 | Title
6 | Title
6 | Title
6 | Title
6 |
11 | Your submission has been received!
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/095_backgrounds-gradients/07_bar/01/source-files/check.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/095_backgrounds-gradients/07_bar/01/source-files/check.ai
--------------------------------------------------------------------------------
/095_backgrounds-gradients/09_background-size/01/01.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/095_backgrounds-gradients/09_background-size/01/01.jpeg
--------------------------------------------------------------------------------
/095_backgrounds-gradients/09_background-size/01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/095_backgrounds-gradients/09_background-size/02_cover/01.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/095_backgrounds-gradients/09_background-size/02_cover/01.jpeg
--------------------------------------------------------------------------------
/095_backgrounds-gradients/09_background-size/02_cover/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/095_backgrounds-gradients/09_background-size/03_contain/01.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/095_backgrounds-gradients/09_background-size/03_contain/01.jpeg
--------------------------------------------------------------------------------
/095_backgrounds-gradients/09_background-size/03_contain/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/096_audio/00_files/Newish_Disco.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/096_audio/00_files/Newish_Disco.mp3
--------------------------------------------------------------------------------
/096_audio/00_files/license/newish-disco.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/096_audio/00_files/license/newish-disco.png
--------------------------------------------------------------------------------
/096_audio/01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Title
6 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/096_audio/01/main.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | padding: 0;
3 | margin: 0;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | }
--------------------------------------------------------------------------------
/096_audio/02_javascript-controls/01/main.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | padding: 0;
3 | margin: 0;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | }
--------------------------------------------------------------------------------
/097_video/00_files/me.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/097_video/00_files/me.mp4
--------------------------------------------------------------------------------
/097_video/00_files/me.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/097_video/00_files/me.ogv
--------------------------------------------------------------------------------
/097_video/00_files/me.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/097_video/00_files/me.webm
--------------------------------------------------------------------------------
/097_video/01/main.css:
--------------------------------------------------------------------------------
1 | html, body, video {
2 | padding: 0;
3 | margin: 0;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | }
--------------------------------------------------------------------------------
/097_video/02_poster/happy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/097_video/02_poster/happy.jpg
--------------------------------------------------------------------------------
/097_video/02_poster/main.css:
--------------------------------------------------------------------------------
1 | html, body, video {
2 | padding: 0;
3 | margin: 0;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | }
--------------------------------------------------------------------------------
/098_forms/09_input-file/03_do-not-do-this_JS/main.js:
--------------------------------------------------------------------------------
1 | var up = document.querySelector("#upfile");
2 | var btn = document.querySelector("#upsvg");
3 | btn.addEventListener("click", function(){
4 | up.click();
5 | });
--------------------------------------------------------------------------------
/098_forms/09_input-file/03_do-not-do-this_JS/source-files/upload.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/098_forms/09_input-file/03_do-not-do-this_JS/source-files/upload.ai
--------------------------------------------------------------------------------
/098_forms/09_input-file/05_position_relative_absolute/credit.txt:
--------------------------------------------------------------------------------
1 | Thank you to ...
2 |
3 | http://damien.antipa.at/blog/2014/02/26/how-to-style-a-html-file-input/
4 |
5 | ... for the inspiration.
--------------------------------------------------------------------------------
/099_columns/lincoln.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/099_columns/lincoln.jpg
--------------------------------------------------------------------------------
11 | 
12 |
13 |
14 |
--------------------------------------------------------------------------------
/003_html-css-javascript/assets/images/arrows_gray_50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/003_html-css-javascript/assets/images/arrows_gray_50.png
--------------------------------------------------------------------------------
/003_html-css-javascript/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/003_html-css-javascript/assets/images/favicon.ico
--------------------------------------------------------------------------------
/003_html-css-javascript/assets/images/g_s_03_five.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/003_html-css-javascript/assets/images/g_s_03_five.jpg
--------------------------------------------------------------------------------
/003_html-css-javascript/assets/images/g_s_03_five_small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/003_html-css-javascript/assets/images/g_s_03_five_small.jpg
--------------------------------------------------------------------------------
/004_tags_attributes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
10 |
11 |
12 |
--------------------------------------------------------------------------------
/009_img/02/pic/bekind.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/009_img/02/pic/bekind.jpg
--------------------------------------------------------------------------------
/010_link_css-stylesheet/img/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/010_link_css-stylesheet/img/firefox-icon.png
--------------------------------------------------------------------------------
/011_relative-absolute-urls/pic/anatomy-of-an-html-element.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/011_relative-absolute-urls/pic/anatomy-of-an-html-element.png
--------------------------------------------------------------------------------
/011_relative-absolute-urls/users/profile.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
10 |
11 |
12 |
--------------------------------------------------------------------------------
/012_emmet/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
11 |
12 |
13 |
--------------------------------------------------------------------------------
/060_units-of-measurement/07_vh_relative/03/main.css:
--------------------------------------------------------------------------------
1 | html, body, img {
2 | padding: 0;
3 | border: 0;
4 | margin: 0;
5 | }
6 |
7 | img {
8 | height: 99vh;
9 | width: 99vw;
10 | /*width: 99vmin;*/
11 | /*width: 100%;*/
12 | /*max-width: 100%;*/
13 | }
--------------------------------------------------------------------------------
/060_units-of-measurement/07_vh_relative/03/sunset.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/060_units-of-measurement/07_vh_relative/03/sunset.jpg
--------------------------------------------------------------------------------
/060_units-of-measurement/07_vh_relative/04/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
11 |
12 |
13 |
--------------------------------------------------------------------------------
/070_svg/09_css/04_svg-img/01_no-svg-css/01_square/square.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/070_svg/09_css/04_svg-img/01_no-svg-css/01_square/style.css:
--------------------------------------------------------------------------------
1 | #MyRect {
2 | stroke: black;
3 | fill: red;
4 | }
5 |
6 | #MyRect:hover {
7 | stroke: black;
8 | fill: blue;
9 | }
--------------------------------------------------------------------------------
/070_svg/09_css/04_svg-img/01_no-svg-css/02_binoculars/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
11 |
12 |
13 |
--------------------------------------------------------------------------------
/070_svg/09_css/04_svg-img/01_no-svg-css/02_binoculars/style.css:
--------------------------------------------------------------------------------
1 | #MyBinos {
2 | stroke: black;
3 | fill: red;
4 | }
5 |
6 | #MyBinos:hover {
7 | stroke: black;
8 | fill: blue;
9 | }
--------------------------------------------------------------------------------
/070_svg/09_css/04_svg-img/02_img-css-width/01_square/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
11 |
12 |
13 |
--------------------------------------------------------------------------------
/070_svg/10_font-awesome_to_svg/01/main.css:
--------------------------------------------------------------------------------
1 | img {
2 | color: red;
3 | width: 700px;
4 | display: block;
5 | margin: 0 auto;
6 | }
--------------------------------------------------------------------------------
/070_svg/10_font-awesome_to_svg/02_challenge-and-solution/main.css:
--------------------------------------------------------------------------------
1 | svg {
2 | margin: 40px;
3 | }
4 |
5 | #MyRinger {
6 | fill: red;
7 | stroke: orange;
8 | stroke-width: .1px;
9 | }
10 |
11 |
12 | #MyRinger:hover {
13 | fill: orange;
14 | stroke: red;
15 | stroke-width: .1px;
16 | }
--------------------------------------------------------------------------------
/070_svg/11_readme/a-great-article.txt:
--------------------------------------------------------------------------------
1 | read this article:
2 |
3 | http://fvsch.com/code/svg-icons/how-to/
--------------------------------------------------------------------------------
/070_svg/12_symbol_external-svg/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
11 |
12 |
13 |
--------------------------------------------------------------------------------
/084_animation/11_transform-rotate-360/01_img/02_rotate-360/dog.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/084_animation/11_transform-rotate-360/01_img/02_rotate-360/dog.jpeg
--------------------------------------------------------------------------------
/084_animation/11_transform-rotate-360/01_img/02_rotate-360/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
13 |
14 |
15 |
--------------------------------------------------------------------------------
/085_flexbox-challenges/03_tabs/01_instructions/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/03_tabs/01_instructions/img.png
--------------------------------------------------------------------------------
/085_flexbox-challenges/04_header/01_instructions/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/04_header/01_instructions/img.png
--------------------------------------------------------------------------------
/085_flexbox-challenges/04_header/02_solution/source-files/inbox.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/04_header/02_solution/source-files/inbox.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/05_footer/01_instructions/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/05_footer/01_instructions/img.png
--------------------------------------------------------------------------------
/085_flexbox-challenges/05_footer/02_solution/source-files/spinner.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/05_footer/02_solution/source-files/spinner.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/06_side-bar/01_instructions/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/06_side-bar/01_instructions/img.png
--------------------------------------------------------------------------------
/085_flexbox-challenges/07_centered-prompt/01_instructions/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/07_centered-prompt/01_instructions/img.png
--------------------------------------------------------------------------------
/085_flexbox-challenges/07_centered-prompt/02_solution/source-files/smile.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/07_centered-prompt/02_solution/source-files/smile.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/08_centered-icon/01_instructions/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/08_centered-icon/01_instructions/img.png
--------------------------------------------------------------------------------
/085_flexbox-challenges/08_centered-icon/02_solution/source-files/phone.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/08_centered-icon/02_solution/source-files/phone.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/09_featured-list/01_instructions/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/09_featured-list/01_instructions/img.png
--------------------------------------------------------------------------------
/085_flexbox-challenges/09_featured-list/02_solution/source-files/calendar.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/09_featured-list/02_solution/source-files/calendar.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/09_featured-list/02_solution/source-files/envelope.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/09_featured-list/02_solution/source-files/envelope.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/09_featured-list/02_solution/source-files/tachometer.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/09_featured-list/02_solution/source-files/tachometer.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/10_card/01_instructions/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/10_card/01_instructions/img.png
--------------------------------------------------------------------------------
/085_flexbox-challenges/10_card/02_solution/source-files/flask.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/10_card/02_solution/source-files/flask.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/11_card-group/01_instructions/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/11_card-group/01_instructions/img.png
--------------------------------------------------------------------------------
/085_flexbox-challenges/11_card-group/02_solution/02_step-02/source-files/bolt.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/11_card-group/02_solution/02_step-02/source-files/bolt.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/11_card-group/02_solution/02_step-02/source-files/thumbs-up.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/11_card-group/02_solution/02_step-02/source-files/thumbs-up.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/11_card-group/02_solution/02_step-02/source-files/trophy.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/11_card-group/02_solution/02_step-02/source-files/trophy.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/11_card-group/02_solution/xxxxx/source-files/bolt.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/11_card-group/02_solution/xxxxx/source-files/bolt.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/11_card-group/02_solution/xxxxx/source-files/thumbs-up.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/11_card-group/02_solution/xxxxx/source-files/thumbs-up.ai
--------------------------------------------------------------------------------
/085_flexbox-challenges/11_card-group/02_solution/xxxxx/source-files/trophy.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/085_flexbox-challenges/11_card-group/02_solution/xxxxx/source-files/trophy.ai
--------------------------------------------------------------------------------
/086_css-selectors-revisited/00_img/01.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/086_css-selectors-revisited/00_img/01.jpeg
--------------------------------------------------------------------------------
/086_css-selectors-revisited/00_img/02.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/086_css-selectors-revisited/00_img/02.jpeg
--------------------------------------------------------------------------------
/086_css-selectors-revisited/00_img/03.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/086_css-selectors-revisited/00_img/03.jpeg
--------------------------------------------------------------------------------
/086_css-selectors-revisited/00_img/04.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/086_css-selectors-revisited/00_img/04.jpeg
--------------------------------------------------------------------------------
/086_css-selectors-revisited/00_img/05.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/086_css-selectors-revisited/00_img/05.jpeg
--------------------------------------------------------------------------------
/086_css-selectors-revisited/00_img/05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/086_css-selectors-revisited/00_img/05.jpg
--------------------------------------------------------------------------------
/086_css-selectors-revisited/00_img/readme.txt:
--------------------------------------------------------------------------------
1 | images for some of the files that follow
--------------------------------------------------------------------------------
/086_css-selectors-revisited/00_readme.md:
--------------------------------------------------------------------------------
1 | [A summary of css selectors can be found here: http://www.w3schools.com/cssref/css_selectors.asp](http://www.w3schools.com/cssref/css_selectors.asp)
--------------------------------------------------------------------------------
/087_css-specificity/01_intro/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoesToEleven/html-css/7e189368f7daeef07f542e0432cd731c29eacf40/087_css-specificity/01_intro/img.png
--------------------------------------------------------------------------------
/089_text-properties/02_text-decoration.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |