└── 01_Responsive_Web_Design_Certification_300_hours
    ├── 2_Basic_CSS
        ├── 01_Introduction_to_Basic_CSS
        │   └── README.md
        ├── 26_Style_the_HTML_Body_Element
        │   └── style-the-html-body-element.html
        ├── 33_Use_Hex_Code_for_Specific_Colors
        │   └── use-hex-code-for-specific-colors.html
        ├── 36_Use_RGB_values_to_Color_Elements
        │   └── use-rgb-values-to-color-elements.html
        ├── 27_Inherit_Styles_from_the_Body_Element
        │   └── inherit-styles-from-the-body-element.html
        ├── 28_Prioritize_One_Style_Over_Another
        │   └── prioritize-one-style-over-another.html
        ├── 42_Improve_Compatibility_with_Browser_Fallbacks
        │   └── improve-compatibility-with-browser-fallbacks.html
        ├── 29_Override_Styles_in_Subsequent_CSS
        │   └── override-styles-in-subsequent-css.html
        ├── 30_Override_Class_Declarations_by_Styling_ID_Attributes
        │   └── override-class-declarations-by-styling-id-attributes.html
        ├── 35_Use_Abbreviated_Hex_Code
        │   └── use-abbreviated-hex-code.html
        ├── 31_Override_Class_Declarations_with_Inline_Styles
        │   └── override-class-declarations-with-inline-styles.html
        ├── 32_Override_All_Other_Styles_by_using_Important
        │   └── override-all-other-styles-by-using-important.html
        ├── 34_Use_Hex_Code_to_Mix_Colors
        │   └── use-hex-code-to-mix-colors.html
        ├── 37_Use_RGB_to_Mix_Colors
        │   └── use-rgb-to-mix-colors.html
        ├── 17_Adjust_the_Padding_of_an_Element
        │   └── adjust-the-padding-of-an-element.html
        ├── 19_Add_a_Negative_Margin_to_an_Element
        │   └── add-a-negative-margin-to-an-element.html
        ├── 25_Understand_Absolute_versus_Relative_Units
        │   └── understand-absolute-versus-relative-units.html
        ├── 18_Adjust_the_Margin_of_an_Element
        │   └── adjust-the-margin-of-an-element.html
        ├── 23_Use_Clockwise_Notation_to_Specify_the_Margin_of_an_Element
        │   └── use-clockwise-notation-to-specify-the-margin-of-an-element.html
        ├── 22_Use_Clockwise_Notation_to_Specify_the_Padding_of_an_Element
        │   └── use-clockwise-notation-to-specify-the-padding-of-an-element.html
        ├── 21_Add_Different_Margins_to_Each_Side_of_an_Element
        │   └── add-different-margins-to-each-side-of-an-element.html
        ├── 20_Add_Different_Padding_to_Each_Side_of_an_Element
        │   └── add-different-padding-to-each-side-of-an-element.html
        ├── 02_Change_the_Color_of_Text
        │   └── change-the-color-of-text.html
        ├── 03_Use_CSS_Selectors_to_Style_Elements
        │   └── use-css-selectors-to-style-elements.html
        ├── 04_Use_a_CSS_Class_to_Style_an_Element
        │   └── use-a-css-class-to-style-an-element.html
        ├── 05_Style_Multiple_Elements_with_a_CSS_Class
        │   └── style-multiple-elements-with-a-css-class.html
        ├── 06_Change_the_Font_Size_of_an_Element
        │   └── change-the-font-size-of-an-element.html
        ├── 07_Set_the_Font_Family_of_an_Element
        │   └── set-the-font-family-of-an-element.html
        ├── 08_Import_a_Google_Font
        │   └── import-a-google-font.html
        ├── 09_Specify_How_Fonts_Should_Degrade
        │   └── specify-how-fonts-should-degrade.html
        ├── 10_Size_Your_Images
        │   └── size-your-images.html
        ├── 11_Add_Borders_Around_Your_Elements
        │   └── add-borders-around-your-elements.html
        ├── 12_Add_Rounded_Corners_with_border-radius
        │   └── add-rounded-corners-with-border-radius.html
        ├── 13_Make_Circular_Images_with_a_border-radius
        │   └── make-circular-images-with-a-border-radius.html
        ├── 15_Set_the_id_of_an_Element
        │   └── set-the-id-of-an-element.html
        ├── 14_Give_a_Background_Color_to_a_div_Element
        │   └── give-a-background-color-to-a-div-element.html
        ├── 16_Use_an_id_Attribute_to_Style_an_Element
        │   └── use-an-id-attribute-to-style-an-element.html
        ├── 24_Use_Attribute_Selectors_to_Style_Elements
        │   └── use-attribute-selectors-to-style-elements.html
        ├── 39_Create_a_custom_CSS_Variable
        │   └── create-a-custom-css-variable.html
        ├── 43_Inherit_CSS_Variables
        │   └── inherit-css-variables.html
        ├── 38_Use_CSS_Variables_to_change_several_elements_at_once
        │   └── use-css-variables-to-change-several-elements-at-once.html
        ├── 40_Use_a_custom_CSS_Variable
        │   └── use-a-custom-css-variable.html
        ├── 44_Change_a_variable_for_a_specific_area
        │   └── change-a-variable-for-a-specific-area.html
        ├── 41_Attach_a_Fallback_value_to_a_CSS_Variable
        │   └── attach-a-fallback-value-to-a-css-variable.html
        └── 45_Use_a_media_query_to_change_a_variable
        │   └── use-a-media-query-to-change-a-variable.html
    ├── 3_Applied_Visual_Design
        ├── 01_Introduction_to_the_Applied_Visual_Design_Challenges
        │   └── Todo.txt
        ├── 02_Create_Visual_Balance_Using_the_text-align_Property
        │   └── Todo.txt
        └── 03_Adjust_the_Width_of_an_Element_Using_the_width_Property
        │   └── Todo.txt
    └── 1_Basic_HTML_and_HTML5
        ├── 01_Say_Hello_to_HTML_Elements
            └── say-hello-to-html-elements.html
        ├── 02_Headline_with_the_h2_Element
            └── headline-with-the-h2-element.html
        ├── 03_Inform_with_the_Paragraph_Element
            └── inform-with-the-paragraph-element.html
        ├── 27_Declare_the_Doctype_of_an_HTML_Document
            └── declare-the-doctype-of-an-html-document.html
        ├── 07_Delete_HTML_Elements
            └── delete-html-elements.html
        ├── 05_Uncomment_HTML
            └── uncomment-html.html
        ├── 06_Comment_out_HTML
            └── comment-out-html.html
        ├── 04_Fill_in_the_Blank_with_Placeholder_Text
            └── fill-in-the-blank-with-placeholder-text.html
        ├── 08_Introduction_to_HTML5_Elements
            └── introduction-to-html5-elements.html
        ├── 09_Add_Images_to_Your_Website
            └── add-images-to-your-website.html
        ├── 16_Create_an_Ordered_List
            └── create-an-ordered-list.html
        ├── 10_Link_to_External_Pages_with_Anchor_Elements
            └── link-to-external-pages-with-anchor-elements.html
        ├── 14_Turn_an_Image_into_a_Link
            └── turn-an-image-into-a-link.html
        ├── 17_Create_a_Text_Field
            └── create-a-text-field.html
        ├── 13_Make_Dead_Links_Using_the_Hash_Symbol
            └── make-dead-links-using-the-hash-symbol.html
        ├── 12_Nest_an_Anchor_Element_within_a_Paragraph
            └── nest-an-anchor-element-within-a-paragraph.html
        ├── 18_Add_Placeholder_Text_to_a_Text_Field
            └── add-placeholder-text-to-a-text-field.html
        ├── 15_Create_a_Bulleted_Unordered_List
            └── create-a-bulleted-unordered-list.html
        ├── 19_Create_a_Form_Element
            └── create-a-form-element.html
        ├── 20_Add_a_Submit_Button_to_a_Form
            └── add-a-submit-button-to-a-form.html
        ├── 21_Use_HTML5_to_Require_a_Field
            └── use-html-to-require-a-field.html
        ├── 22_Create_a_Set_of_Radio_Buttons
            └── create-a-set-of-radio-buttons.html
        ├── 28_Define_the_Head_and_Body_of_an_HTML_Document
            └── define-the-head-and-body-of-an-html-document.html
        ├── 23_Create_a_Set_of_Checkboxes
            └── create-a-set-of-checkboxes.html
        ├── 25_Check_Radio_Buttons_and_Checkboxes_by_Default
            └── check-radio-buttons-and-checkboxes-by-default.html
        ├── 24_Use_the_value_attribute_with_Radio_Buttons_and_Checkboxes
            └── use-the-value-attribute-with-radio-buttons-and-checkboxes.html
        ├── 26_Nest_Many_Elements_within_a_Single_div_Element
            └── nest-many-elements-within-a-single-div-element.html
        └── 11_Link_to_Internal_Sections_of_a_Page_with_Anchor_Elements
            └── link-to-internal-sections-of-a-page-with-anchor-elements.html


/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/01_Introduction_to_Basic_CSS/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/3_Applied_Visual_Design/01_Introduction_to_the_Applied_Visual_Design_Challenges/Todo.txt:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/3_Applied_Visual_Design/02_Create_Visual_Balance_Using_the_text-align_Property/Todo.txt:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/3_Applied_Visual_Design/03_Adjust_the_Width_of_an_Element_Using_the_width_Property/Todo.txt:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/01_Say_Hello_to_HTML_Elements/say-hello-to-html-elements.html:
--------------------------------------------------------------------------------
1 | <h1>Hello World</h1>
2 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/02_Headline_with_the_h2_Element/headline-with-the-h2-element.html:
--------------------------------------------------------------------------------
1 | <h1>Hello World</h1>
2 | <h2>CatPhotoApp</h2>
3 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/26_Style_the_HTML_Body_Element/style-the-html-body-element.html:
--------------------------------------------------------------------------------
1 | <style>
2 |     body {
3 |         background-color: black;
4 |     }
5 | </style>
6 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/33_Use_Hex_Code_for_Specific_Colors/use-hex-code-for-specific-colors.html:
--------------------------------------------------------------------------------
1 | <style>
2 |     body {
3 |         background-color: #000000;
4 |     }
5 | </style>
6 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/03_Inform_with_the_Paragraph_Element/inform-with-the-paragraph-element.html:
--------------------------------------------------------------------------------
1 | <h1>Hello World</h1>
2 | <h2>CatPhotoApp</h2>
3 | <p>Hello Paragraph</p>
4 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/27_Declare_the_Doctype_of_an_HTML_Document/declare-the-doctype-of-an-html-document.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 |   <h1>Some text</h1>
4 | </html>
5 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/36_Use_RGB_values_to_Color_Elements/use-rgb-values-to-color-elements.html:
--------------------------------------------------------------------------------
1 | <style>
2 |     body {
3 |         background-color: rgb(0, 0, 0);
4 |     }
5 | </style>
6 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/07_Delete_HTML_Elements/delete-html-elements.html:
--------------------------------------------------------------------------------
1 | <h2>CatPhotoApp</h2>
2 | 
3 | <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
4 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/05_Uncomment_HTML/uncomment-html.html:
--------------------------------------------------------------------------------
1 | <h1>Hello World</h1>
2 | 
3 | <h2>CatPhotoApp</h2>
4 | 
5 | <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
6 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/27_Inherit_Styles_from_the_Body_Element/inherit-styles-from-the-body-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         background-color: black;
 4 |         color: green;
 5 |         font-family: monospace;
 6 |     }
 7 | </style>
 8 | 
 9 | <h1>Hello World</h1>
10 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/06_Comment_out_HTML/comment-out-html.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   <h1>Hello World</h1>
 3 | -->
 4 | 
 5 | <h2>CatPhotoApp</h2>
 6 | 
 7 | <!--
 8 | <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 9 | -->
10 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/28_Prioritize_One_Style_Over_Another/prioritize-one-style-over-another.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         background-color: black;
 4 |         font-family: monospace;
 5 |         color: green;
 6 |     }
 7 | 
 8 |     .pink-text {
 9 |         color: pink;
10 |     }
11 | </style>
12 | <h1 class="pink-text">Hello World!</h1>
13 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/04_Fill_in_the_Blank_with_Placeholder_Text/fill-in-the-blank-with-placeholder-text.html:
--------------------------------------------------------------------------------
1 | <h1>Hello World</h1>
2 | 
3 | <h2>CatPhotoApp</h2>
4 | 
5 | <p>Hello Paragraph</p>
6 | <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
7 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/42_Improve_Compatibility_with_Browser_Fallbacks/improve-compatibility-with-browser-fallbacks.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     :root {
 3 |         --red-color: red;
 4 |     }
 5 | 
 6 |     .red-box {
 7 |         background: red;
 8 |         background: var(--red-color);
 9 |         height: 200px;
10 |         width: 200px;
11 |     }
12 | </style>
13 | <div class="red-box"></div>
14 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/29_Override_Styles_in_Subsequent_CSS/override-styles-in-subsequent-css.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         background-color: black;
 4 |         font-family: monospace;
 5 |         color: green;
 6 |     }
 7 | 
 8 |     .pink-text {
 9 |         color: pink;
10 |     }
11 | 
12 |     .blue-text {
13 |         color: blue;
14 |     }
15 | </style>
16 | <h1 class="pink-text blue-text">Hello World!</h1>
17 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/08_Introduction_to_HTML5_Elements/introduction-to-html5-elements.html:
--------------------------------------------------------------------------------
1 | <h2>CatPhotoApp</h2>
2 | <main>
3 |   <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
4 |   <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
5 | </main>
6 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/30_Override_Class_Declarations_by_Styling_ID_Attributes/override-class-declarations-by-styling-id-attributes.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         background-color: black;
 4 |         font-family: monospace;
 5 |         color: green;
 6 |     }
 7 | 
 8 |     .pink-text {
 9 |         color: pink;
10 |     }
11 | 
12 |     .blue-text {
13 |         color: blue;
14 |     }
15 | 
16 |     #orange-text {
17 |         color: orange;
18 |     }
19 | </style>
20 | <h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>
21 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/35_Use_Abbreviated_Hex_Code/use-abbreviated-hex-code.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .red-text {
 3 |         color: #F00;
 4 |     }
 5 | 
 6 |     .fuchsia-text {
 7 |         color: #F0F;
 8 |     }
 9 | 
10 |     .cyan-text {
11 |         color: #0FF;
12 |     }
13 | 
14 |     .green-text {
15 |         color: #0F0;
16 |     }
17 | </style>
18 | 
19 | <h1 class="red-text">I am red!</h1>
20 | 
21 | <h1 class="fuchsia-text">I am fuchsia!</h1>
22 | 
23 | <h1 class="cyan-text">I am cyan!</h1>
24 | 
25 | <h1 class="green-text">I am green!</h1>
26 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/31_Override_Class_Declarations_with_Inline_Styles/override-class-declarations-with-inline-styles.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         background-color: black;
 4 |         font-family: monospace;
 5 |         color: green;
 6 |     }
 7 | 
 8 |     #orange-text {
 9 |         color: orange;
10 |     }
11 | 
12 |     .pink-text {
13 |         color: pink;
14 |     }
15 | 
16 |     .blue-text {
17 |         color: blue;
18 |     }
19 | </style>
20 | <h1 id="orange-text" class="pink-text blue-text" style="color: white;">Hello World!</h1>
21 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/09_Add_Images_to_Your_Website/add-images-to-your-website.html:
--------------------------------------------------------------------------------
1 | <h2>CatPhotoApp</h2>
2 | <main>
3 |   <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A business cat wearing a necktie.">
4 |   <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
5 |   <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
6 | </main>


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/32_Override_All_Other_Styles_by_using_Important/override-all-other-styles-by-using-important.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         background-color: black;
 4 |         font-family: monospace;
 5 |         color: green;
 6 |     }
 7 | 
 8 |     #orange-text {
 9 |         color: orange;
10 |     }
11 | 
12 |     .pink-text {
13 |         color: pink !important;
14 |     }
15 | 
16 |     .blue-text {
17 |         color: blue;
18 |     }
19 | </style>
20 | <h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
21 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/34_Use_Hex_Code_to_Mix_Colors/use-hex-code-to-mix-colors.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .red-text {
 3 |         color: #FF0000;
 4 |     }
 5 | 
 6 |     .green-text {
 7 |         color: #00FF00;
 8 |     }
 9 | 
10 |     .dodger-blue-text {
11 |         color: #1E90FF;
12 |     }
13 | 
14 |     .orange-text {
15 |         color: #FFA500;
16 |     }
17 | </style>
18 | 
19 | <h1 class="red-text">I am red!</h1>
20 | 
21 | <h1 class="green-text">I am green!</h1>
22 | 
23 | <h1 class="dodger-blue-text">I am dodger blue!</h1>
24 | 
25 | <h1 class="orange-text">I am orange!</h1>
26 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/37_Use_RGB_to_Mix_Colors/use-rgb-to-mix-colors.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .red-text {
 3 |         color: rgb(255, 0, 0);
 4 |     }
 5 | 
 6 |     .orchid-text {
 7 |         color: rgb(218, 112, 214);
 8 |     }
 9 | 
10 |     .sienna-text {
11 |         color:  rgb(160, 82, 45);
12 |     }
13 | 
14 |     .blue-text {
15 |         color:  rgb(0, 0, 255);
16 |     }
17 | </style>
18 | 
19 | <h1 class="red-text">I am red!</h1>
20 | 
21 | <h1 class="orchid-text">I am orchid!</h1>
22 | 
23 | <h1 class="sienna-text">I am sienna!</h1>
24 | 
25 | <h1 class="blue-text">I am blue!</h1>
26 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/16_Create_an_Ordered_List/create-an-ordered-list.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>some</li>
16 |     <li>other</li>
17 |     <li>things</li>
18 |   </ol>
19 | 
20 | </main>
21 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/10_Link_to_External_Pages_with_Anchor_Elements/link-to-external-pages-with-anchor-elements.html:
--------------------------------------------------------------------------------
1 | <h2>CatPhotoApp</h2>
2 | <main>
3 |   <a href="https://www.freecatphotoapp.com">cat photos</a>
4 |   <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
5 | 
6 |   <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
7 |   <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
8 | </main>


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/14_Turn_an_Image_into_a_Link/turn-an-image-into-a-link.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 8 |   <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
 9 | </main>
10 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/17_Create_a_Text_Field/create-a-text-field.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>flea treatment</li>
16 |     <li>thunder</li>
17 |     <li>other cats</li>
18 |   </ol>
19 | 
20 |   <input type="text">
21 | </main>
22 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/13_Make_Dead_Links_Using_the_Hash_Symbol/make-dead-links-using-the-hash-symbol.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
 4 | 
 5 |   <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
 6 | 
 7 |   <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 8 |   <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
 9 | </main>
10 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/12_Nest_an_Anchor_Element_within_a_Paragraph/nest-an-anchor-element-within-a-paragraph.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 | 
 4 |   <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
 5 | 
 6 |   <p>View more <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a></p>
 7 |   <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
 8 |   <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
 9 | </main>
10 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/18_Add_Placeholder_Text_to_a_Text_Field/add-placeholder-text-to-a-text-field.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>flea treatment</li>
16 |     <li>thunder</li>
17 |     <li>other cats</li>
18 |   </ol>
19 |   <input type="text" placeholder="cat photo URL">
20 | </main>
21 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/15_Create_a_Bulleted_Unordered_List/create-a-bulleted-unordered-list.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 8 |   <ul>
 9 |     <li>milk</li>
10 |     <li>cheese</li>
11 |     <li>fish</li>
12 |   </ul>
13 |   <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
14 | </main>
15 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/19_Create_a_Form_Element/create-a-form-element.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>flea treatment</li>
16 |     <li>thunder</li>
17 |     <li>other cats</li>
18 |   </ol>
19 |   <form action="https://www.freecatphotoapp.com/submit-cat-photo">
20 |     <input type="text" placeholder="cat photo URL">
21 |   </form>
22 | </main>
23 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/20_Add_a_Submit_Button_to_a_Form/add-a-submit-button-to-a-form.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>flea treatment</li>
16 |     <li>thunder</li>
17 |     <li>other cats</li>
18 |   </ol>
19 |   <form action="https://www.freecatphotoapp.com/submit-cat-photo">
20 |     <input type="text" placeholder="cat photo URL">
21 |     <button type="submit">Submit</button>
22 |   </form>
23 | </main>
24 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/21_Use_HTML5_to_Require_a_Field/use-html-to-require-a-field.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>flea treatment</li>
16 |     <li>thunder</li>
17 |     <li>other cats</li>
18 |   </ol>
19 |   <form action="https://www.freecatphotoapp.com/submit-cat-photo">
20 |     <input type="text" required placeholder="cat photo URL">
21 |     <button type="submit">Submit</button>
22 |   </form>
23 | </main>
24 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/17_Adjust_the_Padding_of_an_Element/adjust-the-padding-of-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .injected-text {
 3 |         margin-bottom: -25px;
 4 |         text-align: center;
 5 |     }
 6 | 
 7 |     .box {
 8 |         border-style: solid;
 9 |         border-color: black;
10 |         border-width: 5px;
11 |         text-align: center;
12 |     }
13 | 
14 |     .yellow-box {
15 |         background-color: yellow;
16 |         padding: 10px;
17 |     }
18 | 
19 |     .red-box {
20 |         background-color: crimson;
21 |         color: #fff;
22 |         padding: 20px;
23 |     }
24 | 
25 |     .blue-box {
26 |         background-color: blue;
27 |         color: #fff;
28 |         padding: 20px;
29 |     }
30 | </style>
31 | <h5 class="injected-text">margin</h5>
32 | 
33 | <div class="box yellow-box">
34 |     <h5 class="box red-box">padding</h5>
35 |     <h5 class="box blue-box">padding</h5>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/19_Add_a_Negative_Margin_to_an_Element/add-a-negative-margin-to-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .injected-text {
 3 |         margin-bottom: -25px;
 4 |         text-align: center;
 5 |     }
 6 | 
 7 |     .box {
 8 |         border-style: solid;
 9 |         border-color: black;
10 |         border-width: 5px;
11 |         text-align: center;
12 |     }
13 | 
14 |     .yellow-box {
15 |         background-color: yellow;
16 |         padding: 10px;
17 |     }
18 | 
19 |     .red-box {
20 |         background-color: crimson;
21 |         color: #fff;
22 |         padding: 20px;
23 |         margin: -15px;
24 |     }
25 | 
26 |     .blue-box {
27 |         background-color: blue;
28 |         color: #fff;
29 |         padding: 20px;
30 |         margin: -15px;
31 |     }
32 | </style>
33 | 
34 | <div class="box yellow-box">
35 |     <h5 class="box red-box">padding</h5>
36 |     <h5 class="box blue-box">padding</h5>
37 | </div>
38 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/25_Understand_Absolute_versus_Relative_Units/understand-absolute-versus-relative-units.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .injected-text {
 3 |         margin-bottom: -25px;
 4 |         text-align: center;
 5 |     }
 6 | 
 7 |     .box {
 8 |         border-style: solid;
 9 |         border-color: black;
10 |         border-width: 5px;
11 |         text-align: center;
12 |     }
13 | 
14 |     .yellow-box {
15 |         background-color: yellow;
16 |         padding: 20px 40px 20px 40px;
17 |     }
18 | 
19 |     .red-box {
20 |         background-color: red;
21 |         margin: 20px 40px 20px 40px;
22 |         padding: 1.5em;
23 | 
24 |     }
25 | 
26 |     .green-box {
27 |         background-color: green;
28 |         margin: 20px 40px 20px 40px;
29 |     }
30 | </style>
31 | <h5 class="injected-text">margin</h5>
32 | 
33 | <div class="box yellow-box">
34 |     <h5 class="box red-box">padding</h5>
35 |     <h5 class="box green-box">padding</h5>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/18_Adjust_the_Margin_of_an_Element/adjust-the-margin-of-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .injected-text {
 3 |         margin-bottom: -25px;
 4 |         text-align: center;
 5 |     }
 6 | 
 7 |     .box {
 8 |         border-style: solid;
 9 |         border-color: black;
10 |         border-width: 5px;
11 |         text-align: center;
12 |     }
13 | 
14 |     .yellow-box {
15 |         background-color: yellow;
16 |         padding: 10px;
17 |     }
18 | 
19 |     .red-box {
20 |         background-color: crimson;
21 |         color: #fff;
22 |         padding: 20px;
23 |         margin: 20px;
24 |     }
25 | 
26 |     .blue-box {
27 |         background-color: blue;
28 |         color: #fff;
29 |         padding: 20px;
30 |         margin: 20px;
31 |     }
32 | </style>
33 | <h5 class="injected-text">margin</h5>
34 | 
35 | <div class="box yellow-box">
36 |     <h5 class="box red-box">padding</h5>
37 |     <h5 class="box blue-box">padding</h5>
38 | </div>
39 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/23_Use_Clockwise_Notation_to_Specify_the_Margin_of_an_Element/use-clockwise-notation-to-specify-the-margin-of-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .injected-text {
 3 |         margin-bottom: -25px;
 4 |         text-align: center;
 5 |     }
 6 | 
 7 |     .box {
 8 |         border-style: solid;
 9 |         border-color: black;
10 |         border-width: 5px;
11 |         text-align: center;
12 |     }
13 | 
14 |     .yellow-box {
15 |         background-color: yellow;
16 |         padding: 20px 40px 20px 40px;
17 |     }
18 | 
19 |     .red-box {
20 |         background-color: crimson;
21 |         color: #fff;
22 |         margin: 20px 40px 20px 40px;
23 |     }
24 | 
25 |     .blue-box {
26 |         background-color: blue;
27 |         color: #fff;
28 |         margin: 40px 20px 20px 40px;
29 |     }
30 | </style>
31 | <h5 class="injected-text">margin</h5>
32 | 
33 | <div class="box yellow-box">
34 |     <h5 class="box red-box">padding</h5>
35 |     <h5 class="box blue-box">padding</h5>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/22_Use_Clockwise_Notation_to_Specify_the_Padding_of_an_Element/use-clockwise-notation-to-specify-the-padding-of-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .injected-text {
 3 |         margin-bottom: -25px;
 4 |         text-align: center;
 5 |     }
 6 | 
 7 |     .box {
 8 |         border-style: solid;
 9 |         border-color: black;
10 |         border-width: 5px;
11 |         text-align: center;
12 |     }
13 | 
14 |     .yellow-box {
15 |         background-color: yellow;
16 |         padding: 20px 40px 20px 40px;
17 |     }
18 | 
19 |     .red-box {
20 |         background-color: crimson;
21 |         color: #fff;
22 |         padding: 20px 40px 20px 40px;
23 |     }
24 | 
25 |     .blue-box {
26 |         background-color: blue;
27 |         color: #fff;
28 |         padding: 40px 20px 20px 40px;
29 |     }
30 | </style>
31 | <h5 class="injected-text">margin</h5>
32 | 
33 | <div class="box yellow-box">
34 |     <h5 class="box red-box">padding</h5>
35 |     <h5 class="box blue-box">padding</h5>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/22_Create_a_Set_of_Radio_Buttons/create-a-set-of-radio-buttons.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>flea treatment</li>
16 |     <li>thunder</li>
17 |     <li>other cats</li>
18 |   </ol>
19 |   <form action="https://www.freecatphotoapp.com/submit-cat-photo">
20 |     <input type="text" placeholder="cat photo URL" required>
21 |     <button type="submit">Submit</button>
22 |     <label> 
23 |       <input type="radio" name="indoor-outdoor">indoor
24 |     </label>
25 |     <label> 
26 |       <input type="radio" name="indoor-outdoor">outdoor
27 |     </label>
28 |   </form>
29 | </main>
30 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/21_Add_Different_Margins_to_Each_Side_of_an_Element/add-different-margins-to-each-side-of-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .injected-text {
 3 |         margin-bottom: -25px;
 4 |         text-align: center;
 5 |     }
 6 | 
 7 |     .box {
 8 |         border-style: solid;
 9 |         border-color: black;
10 |         border-width: 5px;
11 |         text-align: center;
12 |     }
13 | 
14 |     .yellow-box {
15 |         background-color: yellow;
16 |         padding: 10px;
17 |     }
18 | 
19 |     .red-box {
20 |         background-color: crimson;
21 |         color: #fff;
22 |         margin-top: 40px;
23 |         margin-right: 20px;
24 |         margin-bottom: 20px;
25 |         margin-left: 40px;
26 |     }
27 | 
28 |     .blue-box {
29 |         background-color: blue;
30 |         color: #fff;
31 |         margin-top: 40px;
32 |         margin-right: 20px;
33 |         margin-bottom: 20px;
34 |         margin-left: 40px;
35 |     }
36 | </style>
37 | <h5 class="injected-text">margin</h5>
38 | 
39 | <div class="box yellow-box">
40 |     <h5 class="box red-box">padding</h5>
41 |     <h5 class="box blue-box">padding</h5>
42 | </div>
43 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/20_Add_Different_Padding_to_Each_Side_of_an_Element/add-different-padding-to-each-side-of-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .injected-text {
 3 |         margin-bottom: -25px;
 4 |         text-align: center;
 5 |     }
 6 | 
 7 |     .box {
 8 |         border-style: solid;
 9 |         border-color: black;
10 |         border-width: 5px;
11 |         text-align: center;
12 |     }
13 | 
14 |     .yellow-box {
15 |         background-color: yellow;
16 |         padding: 10px;
17 |     }
18 | 
19 |     .red-box {
20 |         background-color: crimson;
21 |         color: #fff;
22 |         padding-top: 40px;
23 |         padding-right: 20px;
24 |         padding-bottom: 20px;
25 |         padding-left: 40px;
26 |     }
27 | 
28 |     .blue-box {
29 |         background-color: blue;
30 |         color: #fff;
31 |         padding-top: 40px;
32 |         padding-right: 20px;
33 |         padding-bottom: 20px;
34 |         padding-left: 40px;
35 |     }
36 | </style>
37 | <h5 class="injected-text">margin</h5>
38 | 
39 | <div class="box yellow-box">
40 |     <h5 class="box red-box">padding</h5>
41 |     <h5 class="box blue-box">padding</h5>
42 | </div>
43 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/28_Define_the_Head_and_Body_of_an_HTML_Document/define-the-head-and-body-of-an-html-document.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>The best page ever</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1>The best page ever</h1>
 8 |     <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/23_Create_a_Set_of_Checkboxes/create-a-set-of-checkboxes.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>flea treatment</li>
16 |     <li>thunder</li>
17 |     <li>other cats</li>
18 |   </ol>
19 |   <form action="https://www.freecatphotoapp.com/submit-cat-photo">
20 |     <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
21 |     <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
22 |     <input type="text" placeholder="cat photo URL" required>
23 |     <button type="submit">Submit</button>
24 |     <label for="loving"><input id="loving" type="checkbox" name="personality">Cute</label>
25 |     <label for="loving"><input id="loving" type="checkbox" name="personality">Fun</label>
26 |     <label for="loving"><input id="loving" type="checkbox" name="personality">Joy</label>
27 |   </form>
28 | </main>
29 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/02_Change_the_Color_of_Text/change-the-color-of-text.html:
--------------------------------------------------------------------------------
 1 | <h2 style="color: red;">CatPhotoApp</h2>
 2 | <main>
 3 |     <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |     <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
 6 |             alt="A cute orange cat lying on its back."></a>
 7 | 
 8 |     <div>
 9 |         <p>Things cats love:</p>
10 |         <ul>
11 |             <li>cat nip</li>
12 |             <li>laser pointers</li>
13 |             <li>lasagna</li>
14 |         </ul>
15 |         <p>Top 3 things cats hate:</p>
16 |         <ol>
17 |             <li>flea treatment</li>
18 |             <li>thunder</li>
19 |             <li>other cats</li>
20 |         </ol>
21 |     </div>
22 | 
23 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
24 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
25 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
26 |         <label><input type="checkbox" name="personality" checked> Loving</label>
27 |         <label><input type="checkbox" name="personality"> Lazy</label>
28 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
29 |         <input type="text" placeholder="cat photo URL" required>
30 |         <button type="submit">Submit</button>
31 |     </form>
32 | </main>
33 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/25_Check_Radio_Buttons_and_Checkboxes_by_Default/check-radio-buttons-and-checkboxes-by-default.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>flea treatment</li>
16 |     <li>thunder</li>
17 |     <li>other cats</li>
18 |   </ol>
19 |   <form action="https://www.freecatphotoapp.com/submit-cat-photo">
20 |     <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
21 |     <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
22 |     <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
23 |     <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
24 |     <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
25 |     <input type="text" placeholder="cat photo URL" required>
26 |     <button type="submit">Submit</button>
27 |   </form>
28 | </main>
29 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/24_Use_the_value_attribute_with_Radio_Buttons_and_Checkboxes/use-the-value-attribute-with-radio-buttons-and-checkboxes.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 | 
 7 |   <p>Things cats love:</p>
 8 |   <ul>
 9 |     <li>cat nip</li>
10 |     <li>laser pointers</li>
11 |     <li>lasagna</li>
12 |   </ul>
13 |   <p>Top 3 things cats hate:</p>
14 |   <ol>
15 |     <li>flea treatment</li>
16 |     <li>thunder</li>
17 |     <li>other cats</li>
18 |   </ol>
19 |   <form action="https://www.freecatphotoapp.com/submit-cat-photo">
20 |     <label for="indoor"><input id="indoor" value="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
21 |     <label for="outdoor"><input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
22 |     <label for="loving"><input id="loving" value="loving" type="checkbox" name="personality"> Loving</label>
23 |     <label for="lazy"><input id="lazy" value="lazy" type="checkbox" name="personality"> Lazy</label>
24 |     <label for="energetic"><input id="energetic" value="energetic" type="checkbox" name="personality"> Energetic</label><br>
25 |     <input type="text" placeholder="cat photo URL" required>
26 |     <button type="submit">Submit</button>
27 |   </form>
28 | </main>
29 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/03_Use_CSS_Selectors_to_Style_Elements/use-css-selectors-to-style-elements.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     h2 {
 3 |         color: blue;
 4 |     }
 5 | </style>
 6 | 
 7 | <h2>CatPhotoApp</h2>
 8 | <main>
 9 |     <p>Click here to view more <a href="#">cat photos</a>.</p>
10 | 
11 |     <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
12 |             alt="A cute orange cat lying on its back."></a>
13 | 
14 |     <div>
15 |         <p>Things cats love:</p>
16 |         <ul>
17 |             <li>cat nip</li>
18 |             <li>laser pointers</li>
19 |             <li>lasagna</li>
20 |         </ul>
21 |         <p>Top 3 things cats hate:</p>
22 |         <ol>
23 |             <li>flea treatment</li>
24 |             <li>thunder</li>
25 |             <li>other cats</li>
26 |         </ol>
27 |     </div>
28 | 
29 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
30 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
31 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
32 |         <label><input type="checkbox" name="personality" checked> Loving</label>
33 |         <label><input type="checkbox" name="personality"> Lazy</label>
34 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
35 |         <input type="text" placeholder="cat photo URL" required>
36 |         <button type="submit">Submit</button>
37 |     </form>
38 | </main>
39 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/04_Use_a_CSS_Class_to_Style_an_Element/use-a-css-class-to-style-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .red-text {
 3 |         color: red;
 4 |     }
 5 | </style>
 6 | 
 7 | <h2 class="red-text">CatPhotoApp</h2>
 8 | <main>
 9 |     <p>Click here to view more <a href="#">cat photos</a>.</p>
10 | 
11 |     <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
12 |             alt="A cute orange cat lying on its back."></a>
13 | 
14 |     <div>
15 |         <p>Things cats love:</p>
16 |         <ul>
17 |             <li>cat nip</li>
18 |             <li>laser pointers</li>
19 |             <li>lasagna</li>
20 |         </ul>
21 |         <p>Top 3 things cats hate:</p>
22 |         <ol>
23 |             <li>flea treatment</li>
24 |             <li>thunder</li>
25 |             <li>other cats</li>
26 |         </ol>
27 |     </div>
28 | 
29 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
30 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
31 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
32 |         <label><input type="checkbox" name="personality" checked> Loving</label>
33 |         <label><input type="checkbox" name="personality"> Lazy</label>
34 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
35 |         <input type="text" placeholder="cat photo URL" required>
36 |         <button type="submit">Submit</button>
37 |     </form>
38 | </main>
39 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/26_Nest_Many_Elements_within_a_Single_div_Element/nest-many-elements-within-a-single-div-element.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 |   <p>Click here to view more <a href="#">cat photos</a>.</p>
 4 | 
 5 |   <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 6 |   <div>
 7 |     <p>Things cats love:</p>
 8 |     <ul>
 9 |       <li>cat nip</li>
10 |       <li>laser pointers</li>
11 |       <li>lasagna</li>
12 |     </ul>
13 |     <p>Top 3 things cats hate:</p>
14 |     <ol>
15 |       <li>flea treatment</li>
16 |       <li>thunder</li>
17 |       <li>other cats</li>
18 |     </ol>
19 |   </div>
20 |   <form action="https://www.freecatphotoapp.com/submit-cat-photo">
21 |     <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
22 |     <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
23 |     <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
24 |     <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
25 |     <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
26 |     <input type="text" placeholder="cat photo URL" required>
27 |     <button type="submit">Submit</button>
28 |   </form>
29 | </main>
30 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/05_Style_Multiple_Elements_with_a_CSS_Class/style-multiple-elements-with-a-css-class.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .red-text {
 3 |         color: red;
 4 |     }
 5 | </style>
 6 | 
 7 | <h2 class="red-text">CatPhotoApp</h2>
 8 | <main>
 9 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
10 | 
11 |     <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
12 |             alt="A cute orange cat lying on its back."></a>
13 | 
14 |     <div>
15 |         <p>Things cats love:</p>
16 |         <ul>
17 |             <li>cat nip</li>
18 |             <li>laser pointers</li>
19 |             <li>lasagna</li>
20 |         </ul>
21 |         <p>Top 3 things cats hate:</p>
22 |         <ol>
23 |             <li>flea treatment</li>
24 |             <li>thunder</li>
25 |             <li>other cats</li>
26 |         </ol>
27 |     </div>
28 | 
29 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
30 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
31 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
32 |         <label><input type="checkbox" name="personality" checked> Loving</label>
33 |         <label><input type="checkbox" name="personality"> Lazy</label>
34 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
35 |         <input type="text" placeholder="cat photo URL" required>
36 |         <button type="submit">Submit</button>
37 |     </form>
38 | </main>
39 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/06_Change_the_Font_Size_of_an_Element/change-the-font-size-of-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .red-text {
 3 |         color: red;
 4 |     }
 5 | 
 6 |     p {
 7 |         font-size: 16px;
 8 |     }
 9 | </style>
10 | 
11 | <h2 class="red-text">CatPhotoApp</h2>
12 | <main>
13 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
14 | 
15 |     <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
16 |             alt="A cute orange cat lying on its back."></a>
17 | 
18 |     <div>
19 |         <p>Things cats love:</p>
20 |         <ul>
21 |             <li>cat nip</li>
22 |             <li>laser pointers</li>
23 |             <li>lasagna</li>
24 |         </ul>
25 |         <p>Top 3 things cats hate:</p>
26 |         <ol>
27 |             <li>flea treatment</li>
28 |             <li>thunder</li>
29 |             <li>other cats</li>
30 |         </ol>
31 |     </div>
32 | 
33 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
34 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
35 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
36 |         <label><input type="checkbox" name="personality" checked> Loving</label>
37 |         <label><input type="checkbox" name="personality"> Lazy</label>
38 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
39 |         <input type="text" placeholder="cat photo URL" required>
40 |         <button type="submit">Submit</button>
41 |     </form>
42 | </main>
43 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/07_Set_the_Font_Family_of_an_Element/set-the-font-family-of-an-element.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .red-text {
 3 |         color: red;
 4 |     }
 5 | 
 6 |     p {
 7 |         font-size: 16px;
 8 |         font-family: monospace;
 9 |     }
10 | </style>
11 | 
12 | <h2 class="red-text">CatPhotoApp</h2>
13 | <main>
14 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
15 | 
16 |     <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
17 |             alt="A cute orange cat lying on its back."></a>
18 | 
19 |     <div>
20 |         <p>Things cats love:</p>
21 |         <ul>
22 |             <li>cat nip</li>
23 |             <li>laser pointers</li>
24 |             <li>lasagna</li>
25 |         </ul>
26 |         <p>Top 3 things cats hate:</p>
27 |         <ol>
28 |             <li>flea treatment</li>
29 |             <li>thunder</li>
30 |             <li>other cats</li>
31 |         </ol>
32 |     </div>
33 | 
34 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
35 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
36 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
37 |         <label><input type="checkbox" name="personality" checked> Loving</label>
38 |         <label><input type="checkbox" name="personality"> Lazy</label>
39 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
40 |         <input type="text" placeholder="cat photo URL" required>
41 |         <button type="submit">Submit</button>
42 |     </form>
43 | </main>
44 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/08_Import_a_Google_Font/import-a-google-font.html:
--------------------------------------------------------------------------------
 1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 | 
 3 | <style>
 4 |     .red-text {
 5 |         color: red;
 6 |     }
 7 | 
 8 |     p {
 9 |         font-size: 16px;
10 |         font-family: monospace;
11 |     }
12 | 
13 |     h2 {
14 |         font-family: 'Lobster';
15 |     }
16 | </style>
17 | 
18 | <h2 class="red-text">CatPhotoApp</h2>
19 | 
20 | <main>
21 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
22 | 
23 |     <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
24 |             alt="A cute orange cat lying on its back."></a>
25 | 
26 |     <div>
27 |         <p>Things cats love:</p>
28 |         <ul>
29 |             <li>cat nip</li>
30 |             <li>laser pointers</li>
31 |             <li>lasagna</li>
32 |         </ul>
33 |         <p>Top 3 things cats hate:</p>
34 |         <ol>
35 |             <li>flea treatment</li>
36 |             <li>thunder</li>
37 |             <li>other cats</li>
38 |         </ol>
39 |     </div>
40 | 
41 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
42 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
43 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
44 |         <label><input type="checkbox" name="personality" checked> Loving</label>
45 |         <label><input type="checkbox" name="personality"> Lazy</label>
46 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
47 |         <input type="text" placeholder="cat photo URL" required>
48 |         <button type="submit">Submit</button>
49 |     </form>
50 | </main>
51 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/09_Specify_How_Fonts_Should_Degrade/specify-how-fonts-should-degrade.html:
--------------------------------------------------------------------------------
 1 | <!-- <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> -->
 2 | <style>
 3 |     .red-text {
 4 |         color: red;
 5 |     }
 6 | 
 7 |     h2 {
 8 |         font-family: Lobster, monospace;
 9 |     }
10 | 
11 |     p {
12 |         font-size: 16px;
13 |         font-family: monospace;
14 |     }
15 | </style>
16 | 
17 | <h2 class="red-text">CatPhotoApp</h2>
18 | <main>
19 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
20 | 
21 |     <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
22 |             alt="A cute orange cat lying on its back."></a>
23 | 
24 |     <div>
25 |         <p>Things cats love:</p>
26 |         <ul>
27 |             <li>cat nip</li>
28 |             <li>laser pointers</li>
29 |             <li>lasagna</li>
30 |         </ul>
31 |         <p>Top 3 things cats hate:</p>
32 |         <ol>
33 |             <li>flea treatment</li>
34 |             <li>thunder</li>
35 |             <li>other cats</li>
36 |         </ol>
37 |     </div>
38 | 
39 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
40 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
41 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
42 |         <label><input type="checkbox" name="personality" checked> Loving</label>
43 |         <label><input type="checkbox" name="personality"> Lazy</label>
44 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
45 |         <input type="text" placeholder="cat photo URL" required>
46 |         <button type="submit">Submit</button>
47 |     </form>
48 | </main>
49 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/10_Size_Your_Images/size-your-images.html:
--------------------------------------------------------------------------------
 1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 | <style>
 3 |     .red-text {
 4 |         color: red;
 5 |     }
 6 | 
 7 |     h2 {
 8 |         font-family: Lobster, monospace;
 9 |     }
10 | 
11 |     p {
12 |         font-size: 16px;
13 |         font-family: monospace;
14 |     }
15 | 
16 |     .smaller-image {
17 |         width: 100px;
18 |     }
19 | </style>
20 | 
21 | <h2 class="red-text">CatPhotoApp</h2>
22 | <main>
23 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
24 | 
25 |     <a href="#"><img class="smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
26 |             alt="A cute orange cat lying on its back."></a>
27 | 
28 |     <div>
29 |         <p>Things cats love:</p>
30 |         <ul>
31 |             <li>cat nip</li>
32 |             <li>laser pointers</li>
33 |             <li>lasagna</li>
34 |         </ul>
35 |         <p>Top 3 things cats hate:</p>
36 |         <ol>
37 |             <li>flea treatment</li>
38 |             <li>thunder</li>
39 |             <li>other cats</li>
40 |         </ol>
41 |     </div>
42 | 
43 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
44 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
45 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
46 |         <label><input type="checkbox" name="personality" checked> Loving</label>
47 |         <label><input type="checkbox" name="personality"> Lazy</label>
48 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
49 |         <input type="text" placeholder="cat photo URL" required>
50 |         <button type="submit">Submit</button>
51 |     </form>
52 | </main>
53 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/11_Add_Borders_Around_Your_Elements/add-borders-around-your-elements.html:
--------------------------------------------------------------------------------
 1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 | <style>
 3 |     .red-text {
 4 |         color: red;
 5 |     }
 6 | 
 7 |     h2 {
 8 |         font-family: Lobster, monospace;
 9 |     }
10 | 
11 |     p {
12 |         font-size: 16px;
13 |         font-family: monospace;
14 |     }
15 | 
16 |     .smaller-image {
17 |         width: 100px;
18 |     }
19 | 
20 |     .thick-green-border {
21 |         border: 10px solid green;
22 |     }
23 | </style>
24 | 
25 | <h2 class="red-text">CatPhotoApp</h2>
26 | <main>
27 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
28 | 
29 |     <a href="#"><img class="smaller-image thick-green-border"
30 |             src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
31 |             alt="A cute orange cat lying on its back."></a>
32 | 
33 |     <div>
34 |         <p>Things cats love:</p>
35 |         <ul>
36 |             <li>cat nip</li>
37 |             <li>laser pointers</li>
38 |             <li>lasagna</li>
39 |         </ul>
40 |         <p>Top 3 things cats hate:</p>
41 |         <ol>
42 |             <li>flea treatment</li>
43 |             <li>thunder</li>
44 |             <li>other cats</li>
45 |         </ol>
46 |     </div>
47 | 
48 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
49 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
50 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
51 |         <label><input type="checkbox" name="personality" checked> Loving</label>
52 |         <label><input type="checkbox" name="personality"> Lazy</label>
53 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
54 |         <input type="text" placeholder="cat photo URL" required>
55 |         <button type="submit">Submit</button>
56 |     </form>
57 | </main>
58 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/1_Basic_HTML_and_HTML5/11_Link_to_Internal_Sections_of_a_Page_with_Anchor_Elements/link-to-internal-sections-of-a-page-with-anchor-elements.html:
--------------------------------------------------------------------------------
 1 | <h2>CatPhotoApp</h2>
 2 | <main>
 3 | 
 4 |   <a href="#footer">Jump to Bottom</a>
 5 | 
 6 |   <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
 7 | 
 8 |   <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 9 |   <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
10 |   <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
11 |   <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
12 | 
13 | </main>
14 | 
15 | <footer id="footer">Copyright Cat Photo App</footer>
16 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/12_Add_Rounded_Corners_with_border-radius/add-rounded-corners-with-border-radius.html:
--------------------------------------------------------------------------------
 1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 | <style>
 3 |     .red-text {
 4 |         color: red;
 5 |     }
 6 | 
 7 |     h2 {
 8 |         font-family: Lobster, monospace;
 9 |     }
10 | 
11 |     p {
12 |         font-size: 16px;
13 |         font-family: monospace;
14 |     }
15 | 
16 |     .thick-green-border {
17 |         border-color: green;
18 |         border-width: 10px;
19 |         border-style: solid;
20 |         border-radius: 10px;
21 |     }
22 | 
23 |     .smaller-image {
24 |         width: 100px;
25 |     }
26 | </style>
27 | 
28 | <h2 class="red-text">CatPhotoApp</h2>
29 | <main>
30 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
31 | 
32 |     <a href="#"><img class="smaller-image thick-green-border"
33 |             src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
34 |             alt="A cute orange cat lying on its back."></a>
35 | 
36 |     <div>
37 |         <p>Things cats love:</p>
38 |         <ul>
39 |             <li>cat nip</li>
40 |             <li>laser pointers</li>
41 |             <li>lasagna</li>
42 |         </ul>
43 |         <p>Top 3 things cats hate:</p>
44 |         <ol>
45 |             <li>flea treatment</li>
46 |             <li>thunder</li>
47 |             <li>other cats</li>
48 |         </ol>
49 |     </div>
50 | 
51 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
52 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
53 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
54 |         <label><input type="checkbox" name="personality" checked> Loving</label>
55 |         <label><input type="checkbox" name="personality"> Lazy</label>
56 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
57 |         <input type="text" placeholder="cat photo URL" required>
58 |         <button type="submit">Submit</button>
59 |     </form>
60 | </main>
61 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/13_Make_Circular_Images_with_a_border-radius/make-circular-images-with-a-border-radius.html:
--------------------------------------------------------------------------------
 1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 | <style>
 3 |     .red-text {
 4 |         color: red;
 5 |     }
 6 | 
 7 |     h2 {
 8 |         font-family: Lobster, monospace;
 9 |     }
10 | 
11 |     p {
12 |         font-size: 16px;
13 |         font-family: monospace;
14 |     }
15 | 
16 |     .thick-green-border {
17 |         border-color: green;
18 |         border-width: 10px;
19 |         border-style: solid;
20 |         border-radius: 50%;
21 |     }
22 | 
23 |     .smaller-image {
24 |         width: 100px;
25 |     }
26 | </style>
27 | 
28 | <h2 class="red-text">CatPhotoApp</h2>
29 | <main>
30 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
31 | 
32 |     <a href="#"><img class="smaller-image thick-green-border"
33 |             src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
34 |             alt="A cute orange cat lying on its back."></a>
35 | 
36 |     <div>
37 |         <p>Things cats love:</p>
38 |         <ul>
39 |             <li>cat nip</li>
40 |             <li>laser pointers</li>
41 |             <li>lasagna</li>
42 |         </ul>
43 |         <p>Top 3 things cats hate:</p>
44 |         <ol>
45 |             <li>flea treatment</li>
46 |             <li>thunder</li>
47 |             <li>other cats</li>
48 |         </ol>
49 |     </div>
50 | 
51 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
52 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
53 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
54 |         <label><input type="checkbox" name="personality" checked> Loving</label>
55 |         <label><input type="checkbox" name="personality"> Lazy</label>
56 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
57 |         <input type="text" placeholder="cat photo URL" required>
58 |         <button type="submit">Submit</button>
59 |     </form>
60 | </main>
61 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/15_Set_the_id_of_an_Element/set-the-id-of-an-element.html:
--------------------------------------------------------------------------------
 1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 | <style>
 3 |     .red-text {
 4 |         color: red;
 5 |     }
 6 | 
 7 |     h2 {
 8 |         font-family: Lobster, monospace;
 9 |     }
10 | 
11 |     p {
12 |         font-size: 16px;
13 |         font-family: monospace;
14 |     }
15 | 
16 |     .thick-green-border {
17 |         border-color: green;
18 |         border-width: 10px;
19 |         border-style: solid;
20 |         border-radius: 50%;
21 |     }
22 | 
23 |     .smaller-image {
24 |         width: 100px;
25 |     }
26 | 
27 |     .silver-background {
28 |         background-color: silver;
29 |     }
30 | </style>
31 | 
32 | <h2 class="red-text">CatPhotoApp</h2>
33 | <main>
34 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
35 | 
36 |     <a href="#"><img class="smaller-image thick-green-border"
37 |             src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
38 |             alt="A cute orange cat lying on its back."></a>
39 | 
40 |     <div class="silver-background">
41 |         <p>Things cats love:</p>
42 |         <ul>
43 |             <li>cat nip</li>
44 |             <li>laser pointers</li>
45 |             <li>lasagna</li>
46 |         </ul>
47 |         <p>Top 3 things cats hate:</p>
48 |         <ol>
49 |             <li>flea treatment</li>
50 |             <li>thunder</li>
51 |             <li>other cats</li>
52 |         </ol>
53 |     </div>
54 | 
55 |     <form id="cat-photo-form" action="https://freecatphotoapp.com/submit-cat-photo">
56 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
57 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
58 |         <label><input type="checkbox" name="personality" checked> Loving</label>
59 |         <label><input type="checkbox" name="personality"> Lazy</label>
60 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
61 |         <input type="text" placeholder="cat photo URL" required>
62 |         <button type="submit">Submit</button>
63 |     </form>
64 | </main>
65 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/14_Give_a_Background_Color_to_a_div_Element/give-a-background-color-to-a-div-element.html:
--------------------------------------------------------------------------------
 1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 | <style>
 3 |     .red-text {
 4 |         color: red;
 5 |     }
 6 | 
 7 |     h2 {
 8 |         font-family: Lobster, monospace;
 9 |     }
10 | 
11 |     p {
12 |         font-size: 16px;
13 |         font-family: monospace;
14 |     }
15 | 
16 |     .thick-green-border {
17 |         border-color: green;
18 |         border-width: 10px;
19 |         border-style: solid;
20 |         border-radius: 50%;
21 |     }
22 | 
23 |     .smaller-image {
24 |         width: 100px;
25 |     }
26 | 
27 |     .silver-background {
28 |         background-color: silver;
29 |     }
30 | </style>
31 | 
32 | <h2 class="red-text">CatPhotoApp</h2>
33 | <main>
34 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
35 | 
36 |     <a href="#"><img class="smaller-image thick-green-border"
37 |             src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
38 |             alt="A cute orange cat lying on its back."></a>
39 | 
40 |     <div class="silver-background">
41 |         <p>Things cats love:</p>
42 |         <ul>
43 |             <li>cat nip</li>
44 |             <li>laser pointers</li>
45 |             <li>lasagna</li>
46 |         </ul>
47 |         <p>Top 3 things cats hate:</p>
48 |         <ol>
49 |             <li>flea treatment</li>
50 |             <li>thunder</li>
51 |             <li>other cats</li>
52 |         </ol>
53 |     </div>
54 | 
55 |     <form action="https://freecatphotoapp.com/submit-cat-photo">
56 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
57 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
58 |         <label><input type="checkbox" name="personality" checked> Loving</label>
59 |         <label><input type="checkbox" name="personality"> Lazy</label>
60 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
61 |         <input type="text" placeholder="cat photo URL" required>
62 |         <button type="submit">Submit</button>
63 |     </form>
64 | </main>
65 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/16_Use_an_id_Attribute_to_Style_an_Element/use-an-id-attribute-to-style-an-element.html:
--------------------------------------------------------------------------------
 1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 | <style>
 3 |     .red-text {
 4 |         color: red;
 5 |     }
 6 | 
 7 |     h2 {
 8 |         font-family: Lobster, monospace;
 9 |     }
10 | 
11 |     p {
12 |         font-size: 16px;
13 |         font-family: monospace;
14 |     }
15 | 
16 |     #cat-photo-form {
17 |         background-color: green;
18 | 
19 |     }
20 | 
21 |     .thick-green-border {
22 |         border-color: green;
23 |         border-width: 10px;
24 |         border-style: solid;
25 |         border-radius: 50%;
26 |     }
27 | 
28 |     .smaller-image {
29 |         width: 100px;
30 |     }
31 | 
32 |     .silver-background {
33 |         background-color: silver;
34 |     }
35 | </style>
36 | 
37 | <h2 class="red-text">CatPhotoApp</h2>
38 | <main>
39 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
40 | 
41 |     <a href="#"><img class="smaller-image thick-green-border"
42 |             src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
43 |             alt="A cute orange cat lying on its back."></a>
44 | 
45 |     <div class="silver-background">
46 |         <p>Things cats love:</p>
47 |         <ul>
48 |             <li>cat nip</li>
49 |             <li>laser pointers</li>
50 |             <li>lasagna</li>
51 |         </ul>
52 |         <p>Top 3 things cats hate:</p>
53 |         <ol>
54 |             <li>flea treatment</li>
55 |             <li>thunder</li>
56 |             <li>other cats</li>
57 |         </ol>
58 |     </div>
59 | 
60 |     <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
61 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
62 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
63 |         <label><input type="checkbox" name="personality" checked> Loving</label>
64 |         <label><input type="checkbox" name="personality"> Lazy</label>
65 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
66 |         <input type="text" placeholder="cat photo URL" required>
67 |         <button type="submit">Submit</button>
68 |     </form>
69 | </main>
70 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/24_Use_Attribute_Selectors_to_Style_Elements/use-attribute-selectors-to-style-elements.html:
--------------------------------------------------------------------------------
 1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 | <style>
 3 |     .red-text {
 4 |         color: red;
 5 |     }
 6 | 
 7 |     h2 {
 8 |         font-family: Lobster, monospace;
 9 |     }
10 | 
11 |     p {
12 |         font-size: 16px;
13 |         font-family: monospace;
14 |     }
15 | 
16 |     .thick-green-border {
17 |         border-color: green;
18 |         border-width: 10px;
19 |         border-style: solid;
20 |         border-radius: 50%;
21 |     }
22 | 
23 |     .smaller-image {
24 |         width: 100px;
25 |     }
26 | 
27 |     .silver-background {
28 |         background-color: silver;
29 |     }
30 | 
31 |     [type='checkbox'] {
32 |         margin-top: 10px;
33 |         margin-bottom: 15px;
34 |     }
35 | </style>
36 | 
37 | <h2 class="red-text">CatPhotoApp</h2>
38 | <main>
39 |     <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
40 | 
41 |     <a href="#"><img class="smaller-image thick-green-border"
42 |             src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
43 |             alt="A cute orange cat lying on its back."></a>
44 | 
45 |     <div class="silver-background">
46 |         <p>Things cats love:</p>
47 |         <ul>
48 |             <li>cat nip</li>
49 |             <li>laser pointers</li>
50 |             <li>lasagna</li>
51 |         </ul>
52 |         <p>Top 3 things cats hate:</p>
53 |         <ol>
54 |             <li>flea treatment</li>
55 |             <li>thunder</li>
56 |             <li>other cats</li>
57 |         </ol>
58 |     </div>
59 | 
60 |     <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
61 |         <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
62 |         <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
63 |         <label><input type="checkbox" name="personality" checked> Loving</label>
64 |         <label><input type="checkbox" name="personality"> Lazy</label>
65 |         <label><input type="checkbox" name="personality"> Energetic</label><br>
66 |         <input type="text" placeholder="cat photo URL" required>
67 |         <button type="submit">Submit</button>
68 |     </form>
69 | </main>
70 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/39_Create_a_custom_CSS_Variable/create-a-custom-css-variable.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     .penguin {
  3 |         /* Only change code below this line */
  4 |         --penguin-skin: gray;
  5 |         /* Only change code above this line */
  6 |         position: relative;
  7 |         margin: auto;
  8 |         display: block;
  9 |         margin-top: 5%;
 10 |         width: 300px;
 11 |         height: 300px;
 12 |     }
 13 | 
 14 |     .penguin-top {
 15 |         top: 10%;
 16 |         left: 25%;
 17 |         background: black;
 18 |         width: 50%;
 19 |         height: 45%;
 20 |         border-radius: 70% 70% 60% 60%;
 21 |     }
 22 | 
 23 |     .penguin-bottom {
 24 |         top: 40%;
 25 |         left: 23.5%;
 26 |         background: black;
 27 |         width: 53%;
 28 |         height: 45%;
 29 |         border-radius: 70% 70% 100% 100%;
 30 |     }
 31 | 
 32 |     .right-hand {
 33 |         top: 0%;
 34 |         left: -5%;
 35 |         background: black;
 36 |         width: 30%;
 37 |         height: 60%;
 38 |         border-radius: 30% 30% 120% 30%;
 39 |         transform: rotate(45deg);
 40 |         z-index: -1;
 41 |     }
 42 | 
 43 |     .left-hand {
 44 |         top: 0%;
 45 |         left: 75%;
 46 |         background: black;
 47 |         width: 30%;
 48 |         height: 60%;
 49 |         border-radius: 30% 30% 30% 120%;
 50 |         transform: rotate(-45deg);
 51 |         z-index: -1;
 52 |     }
 53 | 
 54 |     .right-cheek {
 55 |         top: 15%;
 56 |         left: 35%;
 57 |         background: white;
 58 |         width: 60%;
 59 |         height: 70%;
 60 |         border-radius: 70% 70% 60% 60%;
 61 |     }
 62 | 
 63 |     .left-cheek {
 64 |         top: 15%;
 65 |         left: 5%;
 66 |         background: white;
 67 |         width: 60%;
 68 |         height: 70%;
 69 |         border-radius: 70% 70% 60% 60%;
 70 |     }
 71 | 
 72 |     .belly {
 73 |         top: 60%;
 74 |         left: 2.5%;
 75 |         background: white;
 76 |         width: 95%;
 77 |         height: 100%;
 78 |         border-radius: 120% 120% 100% 100%;
 79 |     }
 80 | 
 81 |     .right-feet {
 82 |         top: 85%;
 83 |         left: 60%;
 84 |         background: orange;
 85 |         width: 15%;
 86 |         height: 30%;
 87 |         border-radius: 50% 50% 50% 50%;
 88 |         transform: rotate(-80deg);
 89 |         z-index: -2222;
 90 |     }
 91 | 
 92 |     .left-feet {
 93 |         top: 85%;
 94 |         left: 25%;
 95 |         background: orange;
 96 |         width: 15%;
 97 |         height: 30%;
 98 |         border-radius: 50% 50% 50% 50%;
 99 |         transform: rotate(80deg);
100 |         z-index: -2222;
101 |     }
102 | 
103 |     .right-eye {
104 |         top: 45%;
105 |         left: 60%;
106 |         background: black;
107 |         width: 15%;
108 |         height: 17%;
109 |         border-radius: 50%;
110 |     }
111 | 
112 |     .left-eye {
113 |         top: 45%;
114 |         left: 25%;
115 |         background: black;
116 |         width: 15%;
117 |         height: 17%;
118 |         border-radius: 50%;
119 |     }
120 | 
121 |     .sparkle {
122 |         top: 25%;
123 |         left: 15%;
124 |         background: white;
125 |         width: 35%;
126 |         height: 35%;
127 |         border-radius: 50%;
128 |     }
129 | 
130 |     .blush-right {
131 |         top: 65%;
132 |         left: 15%;
133 |         background: pink;
134 |         width: 15%;
135 |         height: 10%;
136 |         border-radius: 50%;
137 |     }
138 | 
139 |     .blush-left {
140 |         top: 65%;
141 |         left: 70%;
142 |         background: pink;
143 |         width: 15%;
144 |         height: 10%;
145 |         border-radius: 50%;
146 |     }
147 | 
148 |     .beak-top {
149 |         top: 60%;
150 |         left: 40%;
151 |         background: orange;
152 |         width: 20%;
153 |         height: 10%;
154 |         border-radius: 50%;
155 |     }
156 | 
157 |     .beak-bottom {
158 |         top: 65%;
159 |         left: 42%;
160 |         background: orange;
161 |         width: 16%;
162 |         height: 10%;
163 |         border-radius: 50%;
164 |     }
165 | 
166 |     body {
167 |         background: #c6faf1;
168 |     }
169 | 
170 |     .penguin * {
171 |         position: absolute;
172 |     }
173 | </style>
174 | <div class="penguin">
175 |     <div class="penguin-bottom">
176 |         <div class="right-hand"></div>
177 |         <div class="left-hand"></div>
178 |         <div class="right-feet"></div>
179 |         <div class="left-feet"></div>
180 |     </div>
181 |     <div class="penguin-top">
182 |         <div class="right-cheek"></div>
183 |         <div class="left-cheek"></div>
184 |         <div class="belly"></div>
185 |         <div class="right-eye">
186 |             <div class="sparkle"></div>
187 |         </div>
188 |         <div class="left-eye">
189 |             <div class="sparkle"></div>
190 |         </div>
191 |         <div class="blush-right"></div>
192 |         <div class="blush-left"></div>
193 |         <div class="beak-top"></div>
194 |         <div class="beak-bottom"></div>
195 |     </div>
196 | </div>
197 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/43_Inherit_CSS_Variables/inherit-css-variables.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     :root {
  3 |         /* Only change code below this line */
  4 |         --penguin-belly: pink;
  5 |         /* Only change code above this line */
  6 |     }
  7 | 
  8 |     body {
  9 |         background: var(--penguin-belly, #c6faf1);
 10 |     }
 11 | 
 12 |     .penguin {
 13 |         --penguin-skin: gray;
 14 |         --penguin-beak: orange;
 15 |         position: relative;
 16 |         margin: auto;
 17 |         display: block;
 18 |         margin-top: 5%;
 19 |         width: 300px;
 20 |         height: 300px;
 21 |     }
 22 | 
 23 |     .right-cheek {
 24 |         top: 15%;
 25 |         left: 35%;
 26 |         background: var(--penguin-belly, white);
 27 |         width: 60%;
 28 |         height: 70%;
 29 |         border-radius: 70% 70% 60% 60%;
 30 |     }
 31 | 
 32 |     .left-cheek {
 33 |         top: 15%;
 34 |         left: 5%;
 35 |         background: var(--penguin-belly, white);
 36 |         width: 60%;
 37 |         height: 70%;
 38 |         border-radius: 70% 70% 60% 60%;
 39 |     }
 40 | 
 41 |     .belly {
 42 |         top: 60%;
 43 |         left: 2.5%;
 44 |         background: var(--penguin-belly, white);
 45 |         width: 95%;
 46 |         height: 100%;
 47 |         border-radius: 120% 120% 100% 100%;
 48 |     }
 49 | 
 50 |     .penguin-top {
 51 |         top: 10%;
 52 |         left: 25%;
 53 |         background: var(--penguin-skin, gray);
 54 |         width: 50%;
 55 |         height: 45%;
 56 |         border-radius: 70% 70% 60% 60%;
 57 |     }
 58 | 
 59 |     .penguin-bottom {
 60 |         top: 40%;
 61 |         left: 23.5%;
 62 |         background: var(--penguin-skin, gray);
 63 |         width: 53%;
 64 |         height: 45%;
 65 |         border-radius: 70% 70% 100% 100%;
 66 |     }
 67 | 
 68 |     .right-hand {
 69 |         top: 0%;
 70 |         left: -5%;
 71 |         background: var(--penguin-skin, gray);
 72 |         width: 30%;
 73 |         height: 60%;
 74 |         border-radius: 30% 30% 120% 30%;
 75 |         transform: rotate(45deg);
 76 |         z-index: -1;
 77 |     }
 78 | 
 79 |     .left-hand {
 80 |         top: 0%;
 81 |         left: 75%;
 82 |         background: var(--penguin-skin, gray);
 83 |         width: 30%;
 84 |         height: 60%;
 85 |         border-radius: 30% 30% 30% 120%;
 86 |         transform: rotate(-45deg);
 87 |         z-index: -1;
 88 |     }
 89 | 
 90 |     .right-feet {
 91 |         top: 85%;
 92 |         left: 60%;
 93 |         background: var(--penguin-beak, orange);
 94 |         width: 15%;
 95 |         height: 30%;
 96 |         border-radius: 50% 50% 50% 50%;
 97 |         transform: rotate(-80deg);
 98 |         z-index: -2222;
 99 |     }
100 | 
101 |     .left-feet {
102 |         top: 85%;
103 |         left: 25%;
104 |         background: var(--penguin-beak, orange);
105 |         width: 15%;
106 |         height: 30%;
107 |         border-radius: 50% 50% 50% 50%;
108 |         transform: rotate(80deg);
109 |         z-index: -2222;
110 |     }
111 | 
112 |     .right-eye {
113 |         top: 45%;
114 |         left: 60%;
115 |         background: black;
116 |         width: 15%;
117 |         height: 17%;
118 |         border-radius: 50%;
119 |     }
120 | 
121 |     .left-eye {
122 |         top: 45%;
123 |         left: 25%;
124 |         background: black;
125 |         width: 15%;
126 |         height: 17%;
127 |         border-radius: 50%;
128 |     }
129 | 
130 |     .sparkle {
131 |         top: 25%;
132 |         left: 15%;
133 |         background: white;
134 |         width: 35%;
135 |         height: 35%;
136 |         border-radius: 50%;
137 |     }
138 | 
139 |     .blush-right {
140 |         top: 65%;
141 |         left: 15%;
142 |         background: pink;
143 |         width: 15%;
144 |         height: 10%;
145 |         border-radius: 50%;
146 |     }
147 | 
148 |     .blush-left {
149 |         top: 65%;
150 |         left: 70%;
151 |         background: pink;
152 |         width: 15%;
153 |         height: 10%;
154 |         border-radius: 50%;
155 |     }
156 | 
157 |     .beak-top {
158 |         top: 60%;
159 |         left: 40%;
160 |         background: var(--penguin-beak, orange);
161 |         width: 20%;
162 |         height: 10%;
163 |         border-radius: 50%;
164 |     }
165 | 
166 |     .beak-bottom {
167 |         top: 65%;
168 |         left: 42%;
169 |         background: var(--penguin-beak, orange);
170 |         width: 16%;
171 |         height: 10%;
172 |         border-radius: 50%;
173 |     }
174 | 
175 |     .penguin * {
176 |         position: absolute;
177 |     }
178 | </style>
179 | <div class="penguin">
180 |     <div class="penguin-bottom">
181 |         <div class="right-hand"></div>
182 |         <div class="left-hand"></div>
183 |         <div class="right-feet"></div>
184 |         <div class="left-feet"></div>
185 |     </div>
186 |     <div class="penguin-top">
187 |         <div class="right-cheek"></div>
188 |         <div class="left-cheek"></div>
189 |         <div class="belly"></div>
190 |         <div class="right-eye">
191 |             <div class="sparkle"></div>
192 |         </div>
193 |         <div class="left-eye">
194 |             <div class="sparkle"></div>
195 |         </div>
196 |         <div class="blush-right"></div>
197 |         <div class="blush-left"></div>
198 |         <div class="beak-top"></div>
199 |         <div class="beak-bottom"></div>
200 |     </div>
201 | </div>
202 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/38_Use_CSS_Variables_to_change_several_elements_at_once/use-css-variables-to-change-several-elements-at-once.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     .penguin {
  3 | 
  4 |         /* Only change code below this line */
  5 |         --penguin-skin: gray;
  6 |         --penguin-belly: white;
  7 |         --penguin-beak: orange;
  8 |         /* Only change code above this line */
  9 | 
 10 |         position: relative;
 11 |         margin: auto;
 12 |         display: block;
 13 |         margin-top: 5%;
 14 |         width: 300px;
 15 |         height: 300px;
 16 |     }
 17 | 
 18 |     .penguin-top {
 19 |         top: 10%;
 20 |         left: 25%;
 21 |         background: var(--penguin-skin, gray);
 22 |         width: 50%;
 23 |         height: 45%;
 24 |         border-radius: 70% 70% 60% 60%;
 25 |     }
 26 | 
 27 |     .penguin-bottom {
 28 |         top: 40%;
 29 |         left: 23.5%;
 30 |         background: var(--penguin-skin, gray);
 31 |         width: 53%;
 32 |         height: 45%;
 33 |         border-radius: 70% 70% 100% 100%;
 34 |     }
 35 | 
 36 |     .right-hand {
 37 |         top: 0%;
 38 |         left: -5%;
 39 |         background: var(--penguin-skin, gray);
 40 |         width: 30%;
 41 |         height: 60%;
 42 |         border-radius: 30% 30% 120% 30%;
 43 |         transform: rotate(45deg);
 44 |         z-index: -1;
 45 |     }
 46 | 
 47 |     .left-hand {
 48 |         top: 0%;
 49 |         left: 75%;
 50 |         background: var(--penguin-skin, gray);
 51 |         width: 30%;
 52 |         height: 60%;
 53 |         border-radius: 30% 30% 30% 120%;
 54 |         transform: rotate(-45deg);
 55 |         z-index: -1;
 56 |     }
 57 | 
 58 |     .right-cheek {
 59 |         top: 15%;
 60 |         left: 35%;
 61 |         background: var(--penguin-belly, white);
 62 |         width: 60%;
 63 |         height: 70%;
 64 |         border-radius: 70% 70% 60% 60%;
 65 |     }
 66 | 
 67 |     .left-cheek {
 68 |         top: 15%;
 69 |         left: 5%;
 70 |         background: var(--penguin-belly, white);
 71 |         width: 60%;
 72 |         height: 70%;
 73 |         border-radius: 70% 70% 60% 60%;
 74 |     }
 75 | 
 76 |     .belly {
 77 |         top: 60%;
 78 |         left: 2.5%;
 79 |         background: var(--penguin-belly, white);
 80 |         width: 95%;
 81 |         height: 100%;
 82 |         border-radius: 120% 120% 100% 100%;
 83 |     }
 84 | 
 85 |     .right-feet {
 86 |         top: 85%;
 87 |         left: 60%;
 88 |         background: var(--penguin-beak, orange);
 89 |         width: 15%;
 90 |         height: 30%;
 91 |         border-radius: 50% 50% 50% 50%;
 92 |         transform: rotate(-80deg);
 93 |         z-index: -2222;
 94 |     }
 95 | 
 96 |     .left-feet {
 97 |         top: 85%;
 98 |         left: 25%;
 99 |         background: var(--penguin-beak, orange);
100 |         width: 15%;
101 |         height: 30%;
102 |         border-radius: 50% 50% 50% 50%;
103 |         transform: rotate(80deg);
104 |         z-index: -2222;
105 |     }
106 | 
107 |     .right-eye {
108 |         top: 45%;
109 |         left: 60%;
110 |         background: black;
111 |         width: 15%;
112 |         height: 17%;
113 |         border-radius: 50%;
114 |     }
115 | 
116 |     .left-eye {
117 |         top: 45%;
118 |         left: 25%;
119 |         background: black;
120 |         width: 15%;
121 |         height: 17%;
122 |         border-radius: 50%;
123 |     }
124 | 
125 |     .sparkle {
126 |         top: 25%;
127 |         left: 15%;
128 |         background: white;
129 |         width: 35%;
130 |         height: 35%;
131 |         border-radius: 50%;
132 |     }
133 | 
134 |     .blush-right {
135 |         top: 65%;
136 |         left: 15%;
137 |         background: pink;
138 |         width: 15%;
139 |         height: 10%;
140 |         border-radius: 50%;
141 |     }
142 | 
143 |     .blush-left {
144 |         top: 65%;
145 |         left: 70%;
146 |         background: pink;
147 |         width: 15%;
148 |         height: 10%;
149 |         border-radius: 50%;
150 |     }
151 | 
152 |     .beak-top {
153 |         top: 60%;
154 |         left: 40%;
155 |         background: var(--penguin-beak, orange);
156 |         width: 20%;
157 |         height: 10%;
158 |         border-radius: 50%;
159 |     }
160 | 
161 |     .beak-bottom {
162 |         top: 65%;
163 |         left: 42%;
164 |         background: var(--penguin-beak, orange);
165 |         width: 16%;
166 |         height: 10%;
167 |         border-radius: 50%;
168 |     }
169 | 
170 |     body {
171 |         background: #c6faf1;
172 |     }
173 | 
174 |     .penguin * {
175 |         position: absolute;
176 |     }
177 | </style>
178 | <div class="penguin">
179 |     <div class="penguin-bottom">
180 |         <div class="right-hand"></div>
181 |         <div class="left-hand"></div>
182 |         <div class="right-feet"></div>
183 |         <div class="left-feet"></div>
184 |     </div>
185 |     <div class="penguin-top">
186 |         <div class="right-cheek"></div>
187 |         <div class="left-cheek"></div>
188 |         <div class="belly"></div>
189 |         <div class="right-eye">
190 |             <div class="sparkle"></div>
191 |         </div>
192 |         <div class="left-eye">
193 |             <div class="sparkle"></div>
194 |         </div>
195 |         <div class="blush-right"></div>
196 |         <div class="blush-left"></div>
197 |         <div class="beak-top"></div>
198 |         <div class="beak-bottom"></div>
199 |     </div>
200 | </div>
201 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/40_Use_a_custom_CSS_Variable/use-a-custom-css-variable.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     .penguin {
  3 |         --penguin-skin: gray;
  4 |         position: relative;
  5 |         margin: auto;
  6 |         display: block;
  7 |         margin-top: 5%;
  8 |         width: 300px;
  9 |         height: 300px;
 10 |     }
 11 | 
 12 |     .penguin-top {
 13 |         top: 10%;
 14 |         left: 25%;
 15 | 
 16 |         /* Change code below this line */
 17 |         background: var(--penguin-skin);
 18 |         /* Change code above this line */
 19 | 
 20 |         width: 50%;
 21 |         height: 45%;
 22 |         border-radius: 70% 70% 60% 60%;
 23 |     }
 24 | 
 25 |     .penguin-bottom {
 26 |         top: 40%;
 27 |         left: 23.5%;
 28 | 
 29 |         /* Change code below this line */
 30 |         background: var(--penguin-skin);
 31 |         /* Change code above this line */
 32 | 
 33 |         width: 53%;
 34 |         height: 45%;
 35 |         border-radius: 70% 70% 100% 100%;
 36 |     }
 37 | 
 38 |     .right-hand {
 39 |         top: 0%;
 40 |         left: -5%;
 41 | 
 42 |         /* Change code below this line */
 43 |         background: var(--penguin-skin);
 44 |         /* Change code above this line */
 45 | 
 46 |         width: 30%;
 47 |         height: 60%;
 48 |         border-radius: 30% 30% 120% 30%;
 49 |         transform: rotate(45deg);
 50 |         z-index: -1;
 51 |     }
 52 | 
 53 |     .left-hand {
 54 |         top: 0%;
 55 |         left: 75%;
 56 | 
 57 |         /* Change code below this line */
 58 |         background: var(--penguin-skin);
 59 |         /* Change code above this line */
 60 | 
 61 |         width: 30%;
 62 |         height: 60%;
 63 |         border-radius: 30% 30% 30% 120%;
 64 |         transform: rotate(-45deg);
 65 |         z-index: -1;
 66 |     }
 67 | 
 68 |     .right-cheek {
 69 |         top: 15%;
 70 |         left: 35%;
 71 |         background: white;
 72 |         width: 60%;
 73 |         height: 70%;
 74 |         border-radius: 70% 70% 60% 60%;
 75 |     }
 76 | 
 77 |     .left-cheek {
 78 |         top: 15%;
 79 |         left: 5%;
 80 |         background: white;
 81 |         width: 60%;
 82 |         height: 70%;
 83 |         border-radius: 70% 70% 60% 60%;
 84 |     }
 85 | 
 86 |     .belly {
 87 |         top: 60%;
 88 |         left: 2.5%;
 89 |         background: white;
 90 |         width: 95%;
 91 |         height: 100%;
 92 |         border-radius: 120% 120% 100% 100%;
 93 |     }
 94 | 
 95 |     .right-feet {
 96 |         top: 85%;
 97 |         left: 60%;
 98 |         background: orange;
 99 |         width: 15%;
100 |         height: 30%;
101 |         border-radius: 50% 50% 50% 50%;
102 |         transform: rotate(-80deg);
103 |         z-index: -2222;
104 |     }
105 | 
106 |     .left-feet {
107 |         top: 85%;
108 |         left: 25%;
109 |         background: orange;
110 |         width: 15%;
111 |         height: 30%;
112 |         border-radius: 50% 50% 50% 50%;
113 |         transform: rotate(80deg);
114 |         z-index: -2222;
115 |     }
116 | 
117 |     .right-eye {
118 |         top: 45%;
119 |         left: 60%;
120 |         background: black;
121 |         width: 15%;
122 |         height: 17%;
123 |         border-radius: 50%;
124 |     }
125 | 
126 |     .left-eye {
127 |         top: 45%;
128 |         left: 25%;
129 |         background: black;
130 |         width: 15%;
131 |         height: 17%;
132 |         border-radius: 50%;
133 |     }
134 | 
135 |     .sparkle {
136 |         top: 25%;
137 |         left: 15%;
138 |         background: white;
139 |         width: 35%;
140 |         height: 35%;
141 |         border-radius: 50%;
142 |     }
143 | 
144 |     .blush-right {
145 |         top: 65%;
146 |         left: 15%;
147 |         background: pink;
148 |         width: 15%;
149 |         height: 10%;
150 |         border-radius: 50%;
151 |     }
152 | 
153 |     .blush-left {
154 |         top: 65%;
155 |         left: 70%;
156 |         background: pink;
157 |         width: 15%;
158 |         height: 10%;
159 |         border-radius: 50%;
160 |     }
161 | 
162 |     .beak-top {
163 |         top: 60%;
164 |         left: 40%;
165 |         background: orange;
166 |         width: 20%;
167 |         height: 10%;
168 |         border-radius: 50%;
169 |     }
170 | 
171 |     .beak-bottom {
172 |         top: 65%;
173 |         left: 42%;
174 |         background: orange;
175 |         width: 16%;
176 |         height: 10%;
177 |         border-radius: 50%;
178 |     }
179 | 
180 |     body {
181 |         background: #c6faf1;
182 |     }
183 | 
184 |     .penguin * {
185 |         position: absolute;
186 |     }
187 | </style>
188 | <div class="penguin">
189 |     <div class="penguin-bottom">
190 |         <div class="right-hand"></div>
191 |         <div class="left-hand"></div>
192 |         <div class="right-feet"></div>
193 |         <div class="left-feet"></div>
194 |     </div>
195 |     <div class="penguin-top">
196 |         <div class="right-cheek"></div>
197 |         <div class="left-cheek"></div>
198 |         <div class="belly"></div>
199 |         <div class="right-eye">
200 |             <div class="sparkle"></div>
201 |         </div>
202 |         <div class="left-eye">
203 |             <div class="sparkle"></div>
204 |         </div>
205 |         <div class="blush-right"></div>
206 |         <div class="blush-left"></div>
207 |         <div class="beak-top"></div>
208 |         <div class="beak-bottom"></div>
209 |     </div>
210 | </div>
211 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/44_Change_a_variable_for_a_specific_area/change-a-variable-for-a-specific-area.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     :root {
  3 |         --penguin-skin: gray;
  4 |         --penguin-belly: pink;
  5 |         --penguin-beak: orange;
  6 |     }
  7 | 
  8 |     body {
  9 |         background: var(--penguin-belly, #c6faf1);
 10 |     }
 11 | 
 12 |     .penguin {
 13 |         /* Only change code below this line */
 14 |         --penguin-belly: white;
 15 |         /* Only change code above this line */
 16 |         position: relative;
 17 |         margin: auto;
 18 |         display: block;
 19 |         margin-top: 5%;
 20 |         width: 300px;
 21 |         height: 300px;
 22 |     }
 23 | 
 24 |     .right-cheek {
 25 |         top: 15%;
 26 |         left: 35%;
 27 |         background: var(--penguin-belly, pink);
 28 |         width: 60%;
 29 |         height: 70%;
 30 |         border-radius: 70% 70% 60% 60%;
 31 |     }
 32 | 
 33 |     .left-cheek {
 34 |         top: 15%;
 35 |         left: 5%;
 36 |         background: var(--penguin-belly, pink);
 37 |         width: 60%;
 38 |         height: 70%;
 39 |         border-radius: 70% 70% 60% 60%;
 40 |     }
 41 | 
 42 |     .belly {
 43 |         top: 60%;
 44 |         left: 2.5%;
 45 |         background: var(--penguin-belly, pink);
 46 |         width: 95%;
 47 |         height: 100%;
 48 |         border-radius: 120% 120% 100% 100%;
 49 |     }
 50 | 
 51 |     .penguin-top {
 52 |         top: 10%;
 53 |         left: 25%;
 54 |         background: var(--penguin-skin, gray);
 55 |         width: 50%;
 56 |         height: 45%;
 57 |         border-radius: 70% 70% 60% 60%;
 58 |     }
 59 | 
 60 |     .penguin-bottom {
 61 |         top: 40%;
 62 |         left: 23.5%;
 63 |         background: var(--penguin-skin, gray);
 64 |         width: 53%;
 65 |         height: 45%;
 66 |         border-radius: 70% 70% 100% 100%;
 67 |     }
 68 | 
 69 |     .right-hand {
 70 |         top: 0%;
 71 |         left: -5%;
 72 |         background: var(--penguin-skin, gray);
 73 |         width: 30%;
 74 |         height: 60%;
 75 |         border-radius: 30% 30% 120% 30%;
 76 |         transform: rotate(45deg);
 77 |         z-index: -1;
 78 |     }
 79 | 
 80 |     .left-hand {
 81 |         top: 0%;
 82 |         left: 75%;
 83 |         background: var(--penguin-skin, gray);
 84 |         width: 30%;
 85 |         height: 60%;
 86 |         border-radius: 30% 30% 30% 120%;
 87 |         transform: rotate(-45deg);
 88 |         z-index: -1;
 89 |     }
 90 | 
 91 |     .right-feet {
 92 |         top: 85%;
 93 |         left: 60%;
 94 |         background: var(--penguin-beak, orange);
 95 |         width: 15%;
 96 |         height: 30%;
 97 |         border-radius: 50% 50% 50% 50%;
 98 |         transform: rotate(-80deg);
 99 |         z-index: -2222;
100 |     }
101 | 
102 |     .left-feet {
103 |         top: 85%;
104 |         left: 25%;
105 |         background: var(--penguin-beak, orange);
106 |         width: 15%;
107 |         height: 30%;
108 |         border-radius: 50% 50% 50% 50%;
109 |         transform: rotate(80deg);
110 |         z-index: -2222;
111 |     }
112 | 
113 |     .right-eye {
114 |         top: 45%;
115 |         left: 60%;
116 |         background: black;
117 |         width: 15%;
118 |         height: 17%;
119 |         border-radius: 50%;
120 |     }
121 | 
122 |     .left-eye {
123 |         top: 45%;
124 |         left: 25%;
125 |         background: black;
126 |         width: 15%;
127 |         height: 17%;
128 |         border-radius: 50%;
129 |     }
130 | 
131 |     .sparkle {
132 |         top: 25%;
133 |         left: 15%;
134 |         background: white;
135 |         width: 35%;
136 |         height: 35%;
137 |         border-radius: 50%;
138 |     }
139 | 
140 |     .blush-right {
141 |         top: 65%;
142 |         left: 15%;
143 |         background: pink;
144 |         width: 15%;
145 |         height: 10%;
146 |         border-radius: 50%;
147 |     }
148 | 
149 |     .blush-left {
150 |         top: 65%;
151 |         left: 70%;
152 |         background: pink;
153 |         width: 15%;
154 |         height: 10%;
155 |         border-radius: 50%;
156 |     }
157 | 
158 |     .beak-top {
159 |         top: 60%;
160 |         left: 40%;
161 |         background: var(--penguin-beak, orange);
162 |         width: 20%;
163 |         height: 10%;
164 |         border-radius: 50%;
165 |     }
166 | 
167 |     .beak-bottom {
168 |         top: 65%;
169 |         left: 42%;
170 |         background: var(--penguin-beak, orange);
171 |         width: 16%;
172 |         height: 10%;
173 |         border-radius: 50%;
174 |     }
175 | 
176 |     .penguin * {
177 |         position: absolute;
178 |     }
179 | </style>
180 | <div class="penguin">
181 |     <div class="penguin-bottom">
182 |         <div class="right-hand"></div>
183 |         <div class="left-hand"></div>
184 |         <div class="right-feet"></div>
185 |         <div class="left-feet"></div>
186 |     </div>
187 |     <div class="penguin-top">
188 |         <div class="right-cheek"></div>
189 |         <div class="left-cheek"></div>
190 |         <div class="belly"></div>
191 |         <div class="right-eye">
192 |             <div class="sparkle"></div>
193 |         </div>
194 |         <div class="left-eye">
195 |             <div class="sparkle"></div>
196 |         </div>
197 |         <div class="blush-right"></div>
198 |         <div class="blush-left"></div>
199 |         <div class="beak-top"></div>
200 |         <div class="beak-bottom"></div>
201 |     </div>
202 | </div>
203 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/41_Attach_a_Fallback_value_to_a_CSS_Variable/attach-a-fallback-value-to-a-css-variable.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     .penguin {
  3 |         --penguin-skin: black;
  4 |         --penguin-belly: gray;
  5 |         --penguin-beak: yellow;
  6 |         position: relative;
  7 |         margin: auto;
  8 |         display: block;
  9 |         margin-top: 5%;
 10 |         width: 300px;
 11 |         height: 300px;
 12 |     }
 13 | 
 14 |     .penguin-top {
 15 |         top: 10%;
 16 |         left: 25%;
 17 | 
 18 |         /* Change code below this line */
 19 |         background: var(--pengiun-skin, black);
 20 |         /* Change code above this line */
 21 | 
 22 |         width: 50%;
 23 |         height: 45%;
 24 |         border-radius: 70% 70% 60% 60%;
 25 |     }
 26 | 
 27 |     .penguin-bottom {
 28 |         top: 40%;
 29 |         left: 23.5%;
 30 | 
 31 |         /* Change code below this line */
 32 |         background: var(--pengiun-skin, black);
 33 |         /* Change code above this line */
 34 | 
 35 |         width: 53%;
 36 |         height: 45%;
 37 |         border-radius: 70% 70% 100% 100%;
 38 |     }
 39 | 
 40 |     .right-hand {
 41 |         top: 0%;
 42 |         left: -5%;
 43 |         background: var(--penguin-skin, black);
 44 |         width: 30%;
 45 |         height: 60%;
 46 |         border-radius: 30% 30% 120% 30%;
 47 |         transform: rotate(45deg);
 48 |         z-index: -1;
 49 |     }
 50 | 
 51 |     .left-hand {
 52 |         top: 0%;
 53 |         left: 75%;
 54 |         background: var(--penguin-skin, black);
 55 |         width: 30%;
 56 |         height: 60%;
 57 |         border-radius: 30% 30% 30% 120%;
 58 |         transform: rotate(-45deg);
 59 |         z-index: -1;
 60 |     }
 61 | 
 62 |     .right-cheek {
 63 |         top: 15%;
 64 |         left: 35%;
 65 |         background: var(--penguin-belly, white);
 66 |         width: 60%;
 67 |         height: 70%;
 68 |         border-radius: 70% 70% 60% 60%;
 69 |     }
 70 | 
 71 |     .left-cheek {
 72 |         top: 15%;
 73 |         left: 5%;
 74 |         background: var(--penguin-belly, white);
 75 |         width: 60%;
 76 |         height: 70%;
 77 |         border-radius: 70% 70% 60% 60%;
 78 |     }
 79 | 
 80 |     .belly {
 81 |         top: 60%;
 82 |         left: 2.5%;
 83 |         background: var(--penguin-belly, white);
 84 |         width: 95%;
 85 |         height: 100%;
 86 |         border-radius: 120% 120% 100% 100%;
 87 |     }
 88 | 
 89 |     .right-feet {
 90 |         top: 85%;
 91 |         left: 60%;
 92 |         background: var(--penguin-beak, orange);
 93 |         width: 15%;
 94 |         height: 30%;
 95 |         border-radius: 50% 50% 50% 50%;
 96 |         transform: rotate(-80deg);
 97 |         z-index: -2222;
 98 |     }
 99 | 
100 |     .left-feet {
101 |         top: 85%;
102 |         left: 25%;
103 |         background: var(--penguin-beak, orange);
104 |         width: 15%;
105 |         height: 30%;
106 |         border-radius: 50% 50% 50% 50%;
107 |         transform: rotate(80deg);
108 |         z-index: -2222;
109 |     }
110 | 
111 |     .right-eye {
112 |         top: 45%;
113 |         left: 60%;
114 |         background: black;
115 |         width: 15%;
116 |         height: 17%;
117 |         border-radius: 50%;
118 |     }
119 | 
120 |     .left-eye {
121 |         top: 45%;
122 |         left: 25%;
123 |         background: black;
124 |         width: 15%;
125 |         height: 17%;
126 |         border-radius: 50%;
127 |     }
128 | 
129 |     .sparkle {
130 |         top: 25%;
131 |         left: 15%;
132 |         background: white;
133 |         width: 35%;
134 |         height: 35%;
135 |         border-radius: 50%;
136 |     }
137 | 
138 |     .blush-right {
139 |         top: 65%;
140 |         left: 15%;
141 |         background: pink;
142 |         width: 15%;
143 |         height: 10%;
144 |         border-radius: 50%;
145 |     }
146 | 
147 |     .blush-left {
148 |         top: 65%;
149 |         left: 70%;
150 |         background: pink;
151 |         width: 15%;
152 |         height: 10%;
153 |         border-radius: 50%;
154 |     }
155 | 
156 |     .beak-top {
157 |         top: 60%;
158 |         left: 40%;
159 |         background: var(--penguin-beak, orange);
160 |         width: 20%;
161 |         height: 10%;
162 |         border-radius: 50%;
163 |     }
164 | 
165 |     .beak-bottom {
166 |         top: 65%;
167 |         left: 42%;
168 |         background: var(--penguin-beak, orange);
169 |         width: 16%;
170 |         height: 10%;
171 |         border-radius: 50%;
172 |     }
173 | 
174 |     body {
175 |         background: #c6faf1;
176 |     }
177 | 
178 |     .penguin * {
179 |         position: absolute;
180 |     }
181 | </style>
182 | <div class="penguin">
183 |     <div class="penguin-bottom">
184 |         <div class="right-hand"></div>
185 |         <div class="left-hand"></div>
186 |         <div class="right-feet"></div>
187 |         <div class="left-feet"></div>
188 |     </div>
189 |     <div class="penguin-top">
190 |         <div class="right-cheek"></div>
191 |         <div class="left-cheek"></div>
192 |         <div class="belly"></div>
193 |         <div class="right-eye">
194 |             <div class="sparkle"></div>
195 |         </div>
196 |         <div class="left-eye">
197 |             <div class="sparkle"></div>
198 |         </div>
199 |         <div class="blush-right"></div>
200 |         <div class="blush-left"></div>
201 |         <div class="beak-top"></div>
202 |         <div class="beak-bottom"></div>
203 |     </div>
204 | </div>
205 | 


--------------------------------------------------------------------------------
/01_Responsive_Web_Design_Certification_300_hours/2_Basic_CSS/45_Use_a_media_query_to_change_a_variable/use-a-media-query-to-change-a-variable.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     :root {
  3 |         --penguin-size: 300px;
  4 |         --penguin-skin: gray;
  5 |         --penguin-belly: white;
  6 |         --penguin-beak: orange;
  7 |     }
  8 | 
  9 |     @media (max-width: 350px) {
 10 |         :root {
 11 |             /* Only change code below this line */
 12 |             --penguin-size: 200px;
 13 |             --penguin-skin: black;
 14 |             /* Only change code above this line */
 15 |         }
 16 |     }
 17 | 
 18 |     .penguin {
 19 |         position: relative;
 20 |         margin: auto;
 21 |         display: block;
 22 |         margin-top: 5%;
 23 |         width: var(--penguin-size, 300px);
 24 |         height: var(--penguin-size, 300px);
 25 |     }
 26 | 
 27 |     .right-cheek {
 28 |         top: 15%;
 29 |         left: 35%;
 30 |         background: var(--penguin-belly, white);
 31 |         width: 60%;
 32 |         height: 70%;
 33 |         border-radius: 70% 70% 60% 60%;
 34 |     }
 35 | 
 36 |     .left-cheek {
 37 |         top: 15%;
 38 |         left: 5%;
 39 |         background: var(--penguin-belly, white);
 40 |         width: 60%;
 41 |         height: 70%;
 42 |         border-radius: 70% 70% 60% 60%;
 43 |     }
 44 | 
 45 |     .belly {
 46 |         top: 60%;
 47 |         left: 2.5%;
 48 |         background: var(--penguin-belly, white);
 49 |         width: 95%;
 50 |         height: 100%;
 51 |         border-radius: 120% 120% 100% 100%;
 52 |     }
 53 | 
 54 |     .penguin-top {
 55 |         top: 10%;
 56 |         left: 25%;
 57 |         background: var(--penguin-skin, gray);
 58 |         width: 50%;
 59 |         height: 45%;
 60 |         border-radius: 70% 70% 60% 60%;
 61 |     }
 62 | 
 63 |     .penguin-bottom {
 64 |         top: 40%;
 65 |         left: 23.5%;
 66 |         background: var(--penguin-skin, gray);
 67 |         width: 53%;
 68 |         height: 45%;
 69 |         border-radius: 70% 70% 100% 100%;
 70 |     }
 71 | 
 72 |     .right-hand {
 73 |         top: 5%;
 74 |         left: 25%;
 75 |         background: var(--penguin-skin, black);
 76 |         width: 30%;
 77 |         height: 60%;
 78 |         border-radius: 30% 30% 120% 30%;
 79 |         transform: rotate(130deg);
 80 |         z-index: -1;
 81 |         animation-duration: 3s;
 82 |         animation-name: wave;
 83 |         animation-iteration-count: infinite;
 84 |         transform-origin: 0% 0%;
 85 |         animation-timing-function: linear;
 86 |     }
 87 | 
 88 |     @keyframes wave {
 89 |         10% {
 90 |             transform: rotate(110deg);
 91 |         }
 92 | 
 93 |         20% {
 94 |             transform: rotate(130deg);
 95 |         }
 96 | 
 97 |         30% {
 98 |             transform: rotate(110deg);
 99 |         }
100 | 
101 |         40% {
102 |             transform: rotate(130deg);
103 |         }
104 |     }
105 | 
106 |     .left-hand {
107 |         top: 0%;
108 |         left: 75%;
109 |         background: var(--penguin-skin, gray);
110 |         width: 30%;
111 |         height: 60%;
112 |         border-radius: 30% 30% 30% 120%;
113 |         transform: rotate(-45deg);
114 |         z-index: -1;
115 |     }
116 | 
117 |     .right-feet {
118 |         top: 85%;
119 |         left: 60%;
120 |         background: var(--penguin-beak, orange);
121 |         width: 15%;
122 |         height: 30%;
123 |         border-radius: 50% 50% 50% 50%;
124 |         transform: rotate(-80deg);
125 |         z-index: -2222;
126 |     }
127 | 
128 |     .left-feet {
129 |         top: 85%;
130 |         left: 25%;
131 |         background: var(--penguin-beak, orange);
132 |         width: 15%;
133 |         height: 30%;
134 |         border-radius: 50% 50% 50% 50%;
135 |         transform: rotate(80deg);
136 |         z-index: -2222;
137 |     }
138 | 
139 |     .right-eye {
140 |         top: 45%;
141 |         left: 60%;
142 |         background: black;
143 |         width: 15%;
144 |         height: 17%;
145 |         border-radius: 50%;
146 |     }
147 | 
148 |     .left-eye {
149 |         top: 45%;
150 |         left: 25%;
151 |         background: black;
152 |         width: 15%;
153 |         height: 17%;
154 |         border-radius: 50%;
155 |     }
156 | 
157 |     .sparkle {
158 |         top: 25%;
159 |         left: -23%;
160 |         background: white;
161 |         width: 150%;
162 |         height: 100%;
163 |         border-radius: 50%;
164 |     }
165 | 
166 |     .blush-right {
167 |         top: 65%;
168 |         left: 15%;
169 |         background: pink;
170 |         width: 15%;
171 |         height: 10%;
172 |         border-radius: 50%;
173 |     }
174 | 
175 |     .blush-left {
176 |         top: 65%;
177 |         left: 70%;
178 |         background: pink;
179 |         width: 15%;
180 |         height: 10%;
181 |         border-radius: 50%;
182 |     }
183 | 
184 |     .beak-top {
185 |         top: 60%;
186 |         left: 40%;
187 |         background: var(--penguin-beak, orange);
188 |         width: 20%;
189 |         height: 10%;
190 |         border-radius: 50%;
191 |     }
192 | 
193 |     .beak-bottom {
194 |         top: 65%;
195 |         left: 42%;
196 |         background: var(--penguin-beak, orange);
197 |         width: 16%;
198 |         height: 10%;
199 |         border-radius: 50%;
200 |     }
201 | 
202 |     body {
203 |         background: #c6faf1;
204 |     }
205 | 
206 |     .penguin * {
207 |         position: absolute;
208 |     }
209 | </style>
210 | <div class="penguin">
211 |     <div class="penguin-bottom">
212 |         <div class="right-hand"></div>
213 |         <div class="left-hand"></div>
214 |         <div class="right-feet"></div>
215 |         <div class="left-feet"></div>
216 |     </div>
217 |     <div class="penguin-top">
218 |         <div class="right-cheek"></div>
219 |         <div class="left-cheek"></div>
220 |         <div class="belly"></div>
221 |         <div class="right-eye">
222 |             <div class="sparkle"></div>
223 |         </div>
224 |         <div class="left-eye">
225 |             <div class="sparkle"></div>
226 |         </div>
227 |         <div class="blush-right"></div>
228 |         <div class="blush-left"></div>
229 |         <div class="beak-top"></div>
230 |         <div class="beak-bottom"></div>
231 |     </div>
232 | </div>
233 | 


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