diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_IV/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_IV/index.html new file mode 100644 index 000000000..c2f46ea9c --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_IV/index.html @@ -0,0 +1,34 @@ + + + + Expense table + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DATEEXPENSESEXTRA ANNOTATIONS
1/5/19GroceriesMight come back before the end of the month
10/5/19School suppliesNone
24/5/19Eletricity BillNext one's due in June.
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/audio/Glitter_sound_effect.mp3 b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/audio/Glitter_sound_effect.mp3 new file mode 100644 index 000000000..855b80bd1 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/audio/Glitter_sound_effect.mp3 differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/images/kitten.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/images/kitten.jpg new file mode 100644 index 000000000..a61a23a06 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/images/kitten.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/images/the_duck_song.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/images/the_duck_song.jpg new file mode 100644 index 000000000..603b5ea3a Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/images/the_duck_song.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/index.html new file mode 100644 index 000000000..24c5faa40 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/index.html @@ -0,0 +1,23 @@ + + + + Image, video and sound + + +

Hello there! Here's an image:

+
+ kitten +
A black, white and grey kitten.
+
+

Also, here's a sound track

+ +

Finally, a video. Enjoy!

+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/video/The_Duck_Song.mp4 b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/video/The_Duck_Song.mp4 new file mode 100644 index 000000000..f826a6dcf Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_V/video/The_Duck_Song.mp4 differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_VI/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_VI/index.html new file mode 100644 index 000000000..7962955a2 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercise_VI/index.html @@ -0,0 +1,44 @@ + + + + Forms + + +

Sign up:

+
+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +

+ +
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercises I_II_III/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercises I_II_III/index.html new file mode 100644 index 000000000..2c22bbdbe --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/1_The_Basics_HTML/Exercises I_II_III/index.html @@ -0,0 +1,16 @@ + + + + My todo list + + +

My todo list.

+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_II/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_II/index.html new file mode 100644 index 000000000..c556bbd03 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_II/index.html @@ -0,0 +1,50 @@ + + + + + + + Forms + + + +

Sign up:

+
+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +

+ +
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_IV/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_IV/index.html new file mode 100644 index 000000000..4931e44ed --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_IV/index.html @@ -0,0 +1,36 @@ + + + + + + Expense table + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DATEEXPENSESEXTRA ANNOTATIONS
1/5/19GroceriesMight come back before the end of the month
10/5/19School suppliesNone
24/5/19Eletricity BillNext one's due in June.
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/audio/Glitter_sound_effect.mp3 b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/audio/Glitter_sound_effect.mp3 new file mode 100644 index 000000000..855b80bd1 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/audio/Glitter_sound_effect.mp3 differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/images/kitten.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/images/kitten.jpg new file mode 100644 index 000000000..a61a23a06 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/images/kitten.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/images/the_duck_song.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/images/the_duck_song.jpg new file mode 100644 index 000000000..603b5ea3a Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/images/the_duck_song.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/index.html new file mode 100644 index 000000000..d4e92eecd --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/index.html @@ -0,0 +1,25 @@ + + + + + + Image, video and sound + + +

Hello there! Here's an image:

+
+ kitten +
A black, white and grey kitten.
+
+

Also, here's a sound track

+ +

Finally, a video. Enjoy!

+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/video/The_Duck_Song.mp4 b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/video/The_Duck_Song.mp4 new file mode 100644 index 000000000..f826a6dcf Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_V/video/The_Duck_Song.mp4 differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_VI/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_VI/index.html new file mode 100644 index 000000000..49dbed334 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercise_VI/index.html @@ -0,0 +1,46 @@ + + + + + + Forms + + +

Sign up:

+
+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +

+ +
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercises I_II_III/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercises I_II_III/index.html new file mode 100644 index 000000000..9c2cd4de7 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_III/Exercises I_II_III/index.html @@ -0,0 +1,18 @@ + + + + + + My todo list + + +

My todo list.

+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/EXERCISE_IV.txt b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/EXERCISE_IV.txt new file mode 100644 index 000000000..7eab95b48 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/EXERCISE_IV.txt @@ -0,0 +1,2 @@ +IV) Considering that the viewport tag is composed of many important elements, without such tag, the efectivity of all those elements will be lost. This means that, for example, without the ' content= width=device-width ' part, we would not be able to count on a set width for the page depending on the screens we visualize it from. Therefore, removing this tag would greatly affect our capability for visualizing the site in diferent mobile devices and different-sized screens. + diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_IV/EXC_IV.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_IV/EXC_IV.html new file mode 100644 index 000000000..9c587f75f --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_IV/EXC_IV.html @@ -0,0 +1,37 @@ + + + + + + + Expense table + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DATEEXPENSESEXTRA ANNOTATIONS
1/5/19GroceriesMight come back before the end of the month
10/5/19School suppliesNone
24/5/19Eletricity BillNext one's due in June.
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/EXC_V.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/EXC_V.html new file mode 100644 index 000000000..419a5e196 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/EXC_V.html @@ -0,0 +1,26 @@ + + + + + + + Image, video and sound + + +

Hello there! Here's an image:

+
+ kitten +
A black, white and grey kitten.
+
+

Also, here's a sound track

+ +

Finally, a video. Enjoy!

+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/audio/Glitter_sound_effect.mp3 b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/audio/Glitter_sound_effect.mp3 new file mode 100644 index 000000000..855b80bd1 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/audio/Glitter_sound_effect.mp3 differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/images/kitten.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/images/kitten.jpg new file mode 100644 index 000000000..a61a23a06 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/images/kitten.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/images/the_duck_song.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/images/the_duck_song.jpg new file mode 100644 index 000000000..603b5ea3a Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/images/the_duck_song.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/video/The_Duck_Song.mp4 b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/video/The_Duck_Song.mp4 new file mode 100644 index 000000000..f826a6dcf Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_V/video/The_Duck_Song.mp4 differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_VI/EXC_VI.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_VI/EXC_VI.html new file mode 100644 index 000000000..69258fce8 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercise_VI/EXC_VI.html @@ -0,0 +1,47 @@ + + + + + + + Forms + + +

Sign up:

+
+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +

+ +
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercises I_II_III/EXC_I_II_II.html b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercises I_II_III/EXC_I_II_II.html new file mode 100644 index 000000000..d71f8cb8f --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_IV/Exercises I_II_III/EXC_I_II_II.html @@ -0,0 +1,19 @@ + + + + + + + My todo list + + +

My todo list.

+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_IV.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_IV.png new file mode 100644 index 000000000..1a4b9684d Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_IV.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_I_II_III.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_I_II_III.png new file mode 100644 index 000000000..058275e1c Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_I_II_III.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_VI.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_VI.png new file mode 100644 index 000000000..d46f0a8ff Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_VI.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_v.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_v.png new file mode 100644 index 000000000..a8dee6655 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/2_Doctypes_and_Metatags/Exercise_V/exc_v.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_tesing_excV.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_tesing_excV.png new file mode 100644 index 000000000..73938e6cd Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_tesing_excV.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_testing_excIV.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_testing_excIV.png new file mode 100644 index 000000000..94118d562 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_testing_excIV.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_testing_excVI.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_testing_excVI.png new file mode 100644 index 000000000..8ae9ee97a Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_testing_excVI.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_testing_exc_I_II_III.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_testing_exc_I_II_III.png new file mode 100644 index 000000000..348cb46ba Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/chromeVox_testing_exc_I_II_III.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_IV.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_IV.png new file mode 100644 index 000000000..86c19c6aa Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_IV.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_I_II_III.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_I_II_III.png new file mode 100644 index 000000000..46404b4b1 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_I_II_III.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_V.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_V.png new file mode 100644 index 000000000..9dd93ddd0 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_V.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_VI.png b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_VI.png new file mode 100644 index 000000000..5bfdc6c08 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/1.HTML/3_Accesibility/exc_VI.png differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.1_Basics/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.1_Basics/index.html new file mode 100644 index 000000000..aa866b3e9 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.1_Basics/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + 2.1: Basics + + +
+

Section 2.1: The Basics.

+ +
+

This is the header section

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nesciunt temporibus consequuntur rem? Molestias, eius. Fugiat incidunt fugit non architecto numquam obcaecati debitis corrupti repellendus sint nulla. Molestiae, aperiam adipisci? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum officiis numquam rerum, doloremque repellendus unde delectus corporis amet explicabo quaerat dolore mollitia recusandae aut possimus. Iusto laudantium deserunt neque! Adipisci! +

+
+

Footer

+
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.1_Basics/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.1_Basics/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.1_Basics/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.1_Basics/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.1_Basics/styles/style.css new file mode 100644 index 000000000..128c757ee --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.1_Basics/styles/style.css @@ -0,0 +1,75 @@ +* { + color : #5a5858; +} +.container { + width : 100%; +} +.header { + width : 100%; + height : 10%; + margin-bottom : 1%; + background-color : #a5a4a4; +} +.header h1 { + text-align : center; +} +.navigation { + position : absolute; + width : 20%; + height : 70%; + background-color : #baa88b; +} +.navigation ul { + padding : 30%; +} +.navigation ul li { + margin : 20%; + list-style-type : none; +} +.navigation ul li a { + color : grey; + text-decoration : none; +} +.sidebar { + position : absolute; + right : 0%; + width : 20%; + height : 70%; + background-color : #baa88b; +} +.sidebar h3 { + text-align : center; +} +.sidebar p { + padding : 5%; + text-align : center; +} +.content { + position : absolute; + right : 20%; + width : 60%; + height : 70%; + background-color : #d8ccb8; +} +.mid-sect-header h2 { + text-align : center; +} +.mid-sect-article p { + padding : 10%; + margin : 1%; + background-color : #e2c79e; + text-align : center; +} +.mid-sect-footer { + margin : 2%; + background-color : #a5a4a4; + text-align : center; +} +.footer { + position : absolute; + bottom : 0; + width : 100%; + height : 60px; + background-color : #a5a4a4; + text-align : center; +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/.vscode/settings.json b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/index.html new file mode 100644 index 000000000..e949dab0e --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + 2.2 + + +
+

Section 2.2: Selectors and Properties.

+ +
+

This is the header section

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nesciunt temporibus consequuntur rem? Molestias, eius. Fugiat incidunt fugit non architecto numquam obcaecati debitis corrupti repellendus sint nulla. Molestiae, aperiam adipisci? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum officiis numquam rerum, doloremque repellendus unde delectus corporis amet explicabo quaerat dolore mollitia recusandae aut possimus. Iusto laudantium deserunt neque! Adipisci! +

+
+

Footer

+
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/styles/style.css new file mode 100644 index 000000000..eef46c5ed --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.2_Selectors_and_properties/styles/style.css @@ -0,0 +1,77 @@ +* { + font-family : "Palatino Linotype", "Times New Roman"; + font-size : 14px; + color : #5a5858; +} +.container { + width : 100%; +} +.header { + width : 100%; + height : 10%; + margin-bottom : 1%; + background-color : #a5a4a4; +} +.header h1 { + text-align : center; +} +.navigation { + position : absolute; + width : 20%; + height : 70%; + background-color : #baa88b; +} +.navigation ul { + padding : 30%; +} +.navigation ul li { + margin : 20%; + list-style-type : none; +} +.navigation ul li a { + text-decoration : none; + color : rgb(128, 128, 128); +} +.sidebar { + position : absolute; + right : 0%; + width : 20%; + height : 70%; + background-color : #baa88b; +} +.sidebar h3 { + text-align : center; +} +.sidebar p { + padding : 5%; + text-align : center; +} +.content { + position : absolute; + right : 20%; + width : 60%; + height : 70%; + background-color : #d8ccb8; +} +.mid-sect-header h2 { + text-align : center; +} +.mid-sect-article p { + padding : 10%; + margin : 1%; + background-color : #e2c79e; + text-align : center; +} +.mid-sect-footer { + margin : 2%; + background-color : #a5a4a4; + text-align : center; +} +.footer { + position : absolute; + bottom : 0; + width : 100%; + height : 60px; + background-color : #a5a4a4; + text-align : center; +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/.vscode/settings.json b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/.vscode/settings.json new file mode 100644 index 000000000..f673a71b7 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/EXERCISE 2.3) 7).txt b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/EXERCISE 2.3) 7).txt new file mode 100644 index 000000000..b978e59ed --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/EXERCISE 2.3) 7).txt @@ -0,0 +1,8 @@ +Whenever we're using inline styles, the only way we have to override them is to use the !important declaration. For example: +HTML --> +

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+ +CSS--> + .oh-no-inline-styles { + background-color : green!important; + } diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/index.html new file mode 100644 index 000000000..7861af016 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + 2.3 + + +
+

Section 2.3: Specificity.

+ +
+

This is the header section

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nesciunt temporibus consequuntur rem? Molestias, eius. Fugiat incidunt fugit non architecto numquam obcaecati debitis corrupti repellendus sint nulla. Molestiae, aperiam adipisci? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum officiis numquam rerum, doloremque repellendus unde delectus corporis amet explicabo quaerat dolore mollitia recusandae aut possimus. Iusto laudantium deserunt neque! Adipisci! +

+
+

Footer

+
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/styles/style.css new file mode 100644 index 000000000..934c508bf --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.3_Specificity/styles/style.css @@ -0,0 +1,104 @@ +* { + font-family : "Palatino Linotype", "Times New Roman"; + font-size : 14px; + font-weight : bold; /* EXC 6) In this case, considering that there aren't any font-weight declarations in any of the + classes defined earlier (header, footer, content, navigation and their correspondent font sizes), it's possible to apply + 'font-weight : bold;' without inconvenience. If, however, the classes mentioned earlier had any sort of font-weight applied to them, + then this global font-weight wouldn't have any effect, unless we append the !important declaration to it, so that it can win over + other declarations, no matter how specific.*/ + color : #5a5858; +} +.container { + width : 100%; +} +.header { + width : 100%; + height : 10%; + margin-bottom : 1%; + background-color : #a5a4a4; + background-color : #ff00ff; /* EXC 4) Due to the fact that this new background color comes last in order, the header + will actually be magenta. This will be the case of all other classes ending in -r*/ +} +.header h1 { + font-size : 46px; /*EXC 3) Here, the new font-size overrides the general one (14px) + due to the fact that I'm using a class and a descendant selector, increasing the specificity*/ + text-align : center; +} +.navigation { + position : absolute; + width : 20%; + height : 70%; + background-color : #baa88b; + background-color : #0000ff; /* EXC 5) The original background color is overrun by the new one (blue)*/ +} +.navigation ul { + padding : 30%; +} +.navigation ul li { + margin : 20%; + list-style-type : none; +} +.navigation ul li a { + text-decoration : none; + color : grey; + font-size : 12px; /* EXC 3) In this case, the use of classes and descendant selectors allow the original + font-size(14px) to be overrun by a new one (12px)*/ +} +.sidebar { + position : absolute; + right : 0%; + width : 20%; + height : 70%; + background-color : #baa88b; + background-color : #ff00ff; /* EXC 4) */ +} +.sidebar h3 { + text-align : center; +} +.sidebar p { + padding : 5%; + font-size : 10px; /* EXC 3) The original size (14px) is overrun due to the greater specificity attained through + the use of descendant selectors*/ + text-align : center; +} +.content { + /* EXC 3) In this case, it wouldn't be necessary to update the font-size, since it's the same as + the one initially established for all elements.*/ + position : absolute; + right : 20%; + width : 60%; + height : 70%; + background-color : #d8ccb8; +} +.mid-sect-article { + background-color : #e2c79e; + background-color : #0000ff; /* EXC 5) */ +} +.mid-sect-header h2 { + text-align : center; +} +.mid-sect-article p { + padding : 10%; + margin : 1%; + text-align : center; +} +.mid-sect-footer { + margin : 2%; + background-color : #a5a4a4; + background-color : #ff00ff; /* EXC 4) */ + text-align : center; +} +.footer { + position : absolute; + bottom : 0; + width : 100%; + height : 60px; + background-color : #a5a4a4; + background-color : #ff00ff; /* EXC 4) Here, the second background-color option (magenta) is declared AFTER the first one. + Therefore, it's last in terms of order, and so the footer will become magenta.*/ +} +.footer p { + font-size : 10px; /* EXC 3) Here, the new font-size overrides the general one (14px) + due to the fact that I'm using a class and a descendant selector, increasing the specificity (same as in the case of the header)*/ + text-align : center; +} diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/.vscode/settings.json b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/.vscode/settings.json new file mode 100644 index 000000000..155422b0a --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5503 +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.1_Display_Property/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.1_Display_Property/index.html new file mode 100644 index 000000000..a6d4bae9d --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.1_Display_Property/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + 2.5.1 + + +

Section 2.5.1 : The Display Property

+
+ +
+

Content header

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nesciunt temporibus consequuntur rem? Molestias, eius. Fugiat incidunt fugit non architecto numquam obcaecati debitis corrupti repellendus sint nulla. Molestiae, aperiam adipisci? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum officiis numquam rerum, doloremque repellendus unde delectus corporis amet explicabo quaerat dolore mollitia recusandae aut possimus. Iusto laudantium deserunt neque! Adipisci! +

+
+

Middle section footer

+
+ +
+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.1_Display_Property/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.1_Display_Property/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.1_Display_Property/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.1_Display_Property/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.1_Display_Property/styles/style.css new file mode 100644 index 000000000..7fbfc5e5d --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.1_Display_Property/styles/style.css @@ -0,0 +1,96 @@ +* { + box-sizing : border-box; + font-family : "Palatino Linotype","Times New Roman"; + color : #000000; +} + +.container { + display : flex; + height : 80vh; + width : 100vw; +} + +.col-sm { + flex : 1; + margin : 1%; +} +.col { + flex : 3; +} +.col-md { + flex : 1.5; + margin : 1%; +} +.header { + display : flex; + flex-direction : column; + height : 50px; + margin-bottom : 1%; + background-color : #808080; +} +.header p { + margin : 0; + margin : 1%; + text-align : center; +} +.navigation { + background-color : #808080; +} +.navigation ul { + padding : 0; +} +.navigation ul li { + margin-top : 8%; + text-align : center; + list-style-type : none; +} +.navigation ul li a { + text-decoration : none; +} +.content { + background-color : rgb(105, 105, 105); +} +.content header { + width : 56vw; + height : 5vh; + margin : 1%; + background-color : #808080; +} +.content header p { + padding : 1%; + text-align : center; +} +.mid-article { + height : 65vh; + margin : 1%; + background-color : rgb(149, 177, 229); +} +.mid-article p { + padding : 3%; + text-align : center; +} +.content footer { + height : 5%; + width : 100%; + background-color : rgb(169, 175, 228); +} +.content footer p { + margin : 0; + padding : 1%; + text-align : center; +} +.sidebar{ + background-color: #778899; +} +.sidebar h3, p { + text-align : center; +} +.footer { + height : 50px; + margin-top : 1%; + background-color : #808080; +} +footer p { + padding : 1%; + text-align : center; +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/.vscode/settings.json b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/auriculares.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/auriculares.jpg new file mode 100644 index 000000000..c86d4188e Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/auriculares.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/cat.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/cat.jpg new file mode 100644 index 000000000..33da23be2 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/cat.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/sakura.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/sakura.jpg new file mode 100644 index 000000000..ff0ae4317 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/sakura.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/succ.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/succ.jpg new file mode 100644 index 000000000..1d09a41c3 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/succ.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/water.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/water.jpg new file mode 100644 index 000000000..2735ff73d Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/water.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/wheel.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/wheel.jpg new file mode 100644 index 000000000..967cb5a5b Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/images/wheel.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/index.html new file mode 100644 index 000000000..db06d60a7 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + 2.5.2 + + +
+

Showcase

+

Incredible types is a curated collection and showcase of understanding typography and design + from around the world. We currently have 354 pieces of inspirational design in our showcase, from 365 creatives and + studios from 46 different countries. Follow us on Twitter, Facebook and Pinterest or subscribe to our RSS feed.

+
+
+
+
+ A pair of earbuds. + auriculares +
+
+ Succulent. + succulent +
+
+ A drop of water. + water drop +
+
+ A sakura flower. + sakura +
+
+ Rims closeup. + rims +
+
+ A cat. + cat +
+
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/styles/style.css new file mode 100644 index 000000000..f30cac01d --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.5_Layout/2.5.2_Layout_systems/styles/style.css @@ -0,0 +1,54 @@ + +* { + box-sizing : border-box; + font-family : Arial,"Times New Roman"; +} +.upper-section { + display : grid; + grid-template-columns : 2fr 10fr; +} +.wrapper { + display : grid; + grid-template-columns : 4fr 4fr 4fr; + grid-gap : 10px; +} +.wrapper div { + background-color :#ffffff; +} +.section2 p { + padding : 15px; +} +.section1 p { + padding : 10px; +} +.hover-box { + display : none; + position : absolute; + width: 32.9%; + height : 10%; + padding : 5px; + opacity : 0.7; + z-index : 1; + background-color: #ffffff; + text-align : center; +} +.box1 img, +.box2 img, +.box3 img, +.box4 img, +.box5 img, +.box6 img{ + width : 100%; + height : 100%; +} +.box1:hover .hover-box, +.box2:hover .hover-box, +.box3:hover .hover-box, +.box4:hover .hover-box, +.box5:hover .hover-box, +.box6:hover .hover-box { + display : block; +} +.box3 { + height : 90%; +} diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/.vscode/settings.json b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/.vscode/settings.json new file mode 100644 index 000000000..a0de46ff5 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5504 +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/index.html new file mode 100644 index 000000000..aa866b3e9 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + 2.1: Basics + + +
+

Section 2.1: The Basics.

+ +
+

This is the header section

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nesciunt temporibus consequuntur rem? Molestias, eius. Fugiat incidunt fugit non architecto numquam obcaecati debitis corrupti repellendus sint nulla. Molestiae, aperiam adipisci? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum officiis numquam rerum, doloremque repellendus unde delectus corporis amet explicabo quaerat dolore mollitia recusandae aut possimus. Iusto laudantium deserunt neque! Adipisci! +

+
+

Footer

+
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/styles/style.css new file mode 100644 index 000000000..95c2df484 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.1_Basics_Responsive/styles/style.css @@ -0,0 +1,219 @@ + +* { + color : #5a5858; +} + +.container { + width : 100%; + height : 100% +} +.header { + width : 100%; + height : 10%; + margin-bottom : 1%; + background-color : #a5a4a4; +} +.header h1 { + text-align : center; +} +.navigation { + position : absolute; + width : 20%; + height : 70%; + background-color : #baa88b; +} +.navigation ul { + padding : 30%; +} +.navigation ul li { + margin : 20%; + list-style-type : none; +} +.navigation ul li a { + text-decoration : none; + color : #808080; +} +.sidebar { + position : absolute; + right : 0%; + width : 20%; + height : 70%; + background-color : #baa88b; +} +.sidebar h3 { + text-align : center; +} +.sidebar p { + padding : 5%; + text-align : center; +} +.content { + position : absolute; + right : 20%; + width : 60%; + height : 70%; + background-color : #d8ccb8; +} +.mid-sect-header h2 { + text-align : center; +} +.mid-sect-article p { + padding : 10%; + margin : 1%; + background-color : #e2c79e; + text-align : center; +} +.mid-sect-footer { + margin : 2%; + text-align : center; + background-color : #a5a4a4; +} +.footer { + position : absolute; + bottom : 3%; + width : 100%; + height : 60px; + background-color : #a5a4a4; + text-align : center; +} + +/*Mobile screens 640px or less */ +@media only screen and (max-width : 640px) { + * { + margin : 0; + } + .header { + width : 94vw; + height : 10vh; + margin-left : 3%; + } + .header h1 { + padding-top : 4%; + font-size : 20px; + } + .navigation { + width : 29vw; + height : 58vh; + margin-top : 1%; + margin-left : 3%; + margin-right : 1%; + } + .sidebar { + top : 73%; + left : 2.5%; + width : 90vw; + height : 20vh; + margin-left : 1.5%; + overflow : scroll; + } + .sidebar h3 { + padding : 1%; + } + .sidebar p { + padding : 5%; + } + .content { + right : 4%; + margin-top : 1%; + width : 60vw; + height : 58vh; + } + .mid-sect-article { + height : 35vh; + padding : 1%; + margin : 3%; + background-color : #e2c79e; + overflow : scroll; + } + .mid-sect-article p { + padding : 10%; + margin : 1%; + } + .mid-sect-footer { + position : absolute; + bottom : 1%; + left : 5%; + width : 55vw; + margin : 0; + } + .footer { + bottom : 0; + width : 100vw; + height : 5vh; + } + .footer p { + margin : 0; + margin-top : 2%; + text-align : center; + } +} + /*Mobile screens : more than 375px and less than 650px*/ +@media only screen and (min-width: 375px) and (max-width : 650px) { + * { + margin : 0; + } + .header { + width : 93vw; + height : 10vh; + margin-left : 4%; + } + .header h1 { + padding-top : 4%; + font-size : 20px; + } + .navigation { + width : 29vw; + height : 55vh; + left : 2%; + margin-top : 1%; + margin-right : 1% + } + .sidebar { + width : 90vw; + height : 24vh; + top : 69%; + left : 2.5%; + margin-left : 3%; + overflow : scroll; + } + .sidebar h3 { + padding : 1%; + } + .sidebar p { + padding : 5%; + } + .content { + width : 60vw; + height : 55vh; + right : 4%; + margin-top : 1%; + } + .mid-sect-article { + height : 43vh; + padding : 1%; + margin : 3%; + background-color : #e2c79e; + overflow : scroll; + } + .mid-sect-article p { + padding : 10%; + margin : 1%; + } + .mid-sect-footer { + position : absolute; + bottom : 1%; + left : 5%; + width : 55vw; + margin : 0; + } + .footer { + bottom : 0; + width : 100vw; + height : 5vh; + } + .footer p { + margin : 0; + margin-top : 2%; + text-align : center; + } +} diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/.vscode/settings.json b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/.vscode/settings.json new file mode 100644 index 000000000..f673a71b7 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/index.html new file mode 100644 index 000000000..e949dab0e --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + 2.2 + + +
+

Section 2.2: Selectors and Properties.

+ +
+

This is the header section

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nesciunt temporibus consequuntur rem? Molestias, eius. Fugiat incidunt fugit non architecto numquam obcaecati debitis corrupti repellendus sint nulla. Molestiae, aperiam adipisci? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum officiis numquam rerum, doloremque repellendus unde delectus corporis amet explicabo quaerat dolore mollitia recusandae aut possimus. Iusto laudantium deserunt neque! Adipisci! +

+
+

Footer

+
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/styles/style.css new file mode 100644 index 000000000..28ea150b6 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.2_Selectors_and_properties_Responsive/styles/style.css @@ -0,0 +1,211 @@ + +* { + font-family : "Palatino Linotype", "Times New Roman"; + font-size : 14px; + color : #5a5858; +} +.container { + width : 100%; + height : 100%; +} +.header { + width : 100%; + height : 10%; + margin-bottom : 1%; + background-color : #a5a4a4; +} +.header h1 { + text-align : center; +} +.navigation { + position : absolute; + width : 20%; + height : 70%; + background-color : #baa88b; +} +.navigation ul { + padding : 30%; +} +.navigation ul li { + margin : 20%; + list-style-type : none; +} +.navigation ul li a { + text-decoration : none; + color : #808080; +} +.sidebar { + position : absolute; + right : 0%; + width : 20%; + height : 70%; + background-color : #baa88b; +} +.sidebar h3 { + text-align : center; +} +.sidebar p { + padding : 5%; + text-align : center; +} +.content { + position : absolute; + right : 20%; + width : 60%; + height : 70%; + background-color : #d8ccb8; +} +.mid-sect-header h2 { + text-align : center; +} +.mid-sect-article p { + padding : 10%; + margin : 1%; + background-color : #e2c79e; + text-align : center; +} +.mid-sect-footer { + margin : 2%; + background-color : #a5a4a4; + text-align : center; +} +.footer { + position : absolute; + bottom : 3%; + width : 100%; + height : 60px; + background-color : #a5a4a4; + text-align : center; +} + + /*Mobile screens 640px or less */ + @media only screen and (max-width : 640px) { + + .header { + width : 93vw; + height : 10vh; + margin-left : 4%; + } + .header h1 { + padding : 2%; + font-size : 20px; + } + .navigation { + left : 3%; + width : 29vw; + height : 58vh; + margin-top : 1%; + margin-right : 1%; + } + .sidebar { + top : 73%; + left : 2.5%; + width : 90vw; + height : 20vh; + margin-left : 1.5%; + overflow : scroll; + } + .sidebar h3 { + padding : 1%; + } + .content { + right : 4%; + margin-top : 1%; + width : 60vw; + height : 58vh; + } + .mid-sect-article { + height : 35vh; + padding : 1%; + margin : 3%; + overflow : scroll; + } + .mid-sect-article p { + padding : 10%; + margin : 1%; + text-align : center; + } + .mid-sect-footer { + position : absolute; + bottom : 1%; + left : 5%; + width : 55vw; + margin : 0; + } + .footer { + bottom : 0; + width : 100vw; + height : 5vh; + } + .footer p { + margin : 0; + margin-top : 2%; + text-align : center; + } +} +/*Mobile screens : more than 375px and less than 650px*/ +@media only screen and (min-width: 375px) and (max-width : 650px) { + + .header { + width : 95vw; + height : 10vh; + margin-left: 3%; + } + .header h1 { + padding : 3%; + padding-top : 4%; + font-size : 20px; + } + .navigation { + width : 29vw; + height : 55vh; + left : 3%; + margin-top : 1%; + margin-right : 1%; + } + .sidebar { + top : 69%; + left : 2.5%; + width : 92vw; + height : 24vh; + overflow : scroll; + } + .sidebar h3 { + padding : 1%; + } + .content { + right : 3%; + margin-top : 1%; + width : 62vw; + height : 55vh; + } + .mid-sect-article { + height : 43vh; + padding : 1%; + margin : 3%; + overflow : scroll; + } + .mid-sect-article p { + padding : 10%; + margin : 1%; + text-align : center; + } + .mid-sect-footer{ + position : absolute; + bottom : 1%; + left : 5%; + width : 55vw; + margin : 0; + } + .footer { + bottom : 0; + width : 100vw; + height : 5vh; + } + .footer p { + margin : 0; + margin-top : 2%; + text-align : center; + } +} + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/.vscode/settings.json b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/index.html new file mode 100644 index 000000000..7861af016 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + 2.3 + + +
+

Section 2.3: Specificity.

+ +
+

This is the header section

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nesciunt temporibus consequuntur rem? Molestias, eius. Fugiat incidunt fugit non architecto numquam obcaecati debitis corrupti repellendus sint nulla. Molestiae, aperiam adipisci? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum officiis numquam rerum, doloremque repellendus unde delectus corporis amet explicabo quaerat dolore mollitia recusandae aut possimus. Iusto laudantium deserunt neque! Adipisci! +

+
+

Footer

+
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/styles/style.css new file mode 100644 index 000000000..59c28c634 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.3_Specificity_Responsive/styles/style.css @@ -0,0 +1,219 @@ +* { + font-family : "Palatino Linotype", "Times New Roman"; + font-size : 14px; + font-weight : bold; + color : #5a5858; +} +.container{ + width : 100%; + height : 100%; +} +.header { + width : 100%; + height : 10%; + margin-bottom : 1%; + background-color : #a5a4a4; + background-color : #ff00ff; +} +.header h1 { + font-size : 46px; + text-align : center; +} +.navigation { + position : absolute; + width : 20%; + height : 70%; + margin-bottom : 1%; + background-color : #baa88b; + background-color : #0000ff; +} +.navigation ul { + padding : 30%; +} +.navigation ul li { + margin : 20%; + list-style-type : none; +} +.navigation ul li a { + font-size : 12px; + text-decoration : none; + color : grey; +} +.sidebar { + position : absolute; + right : 0%; + width : 20%; + height : 70%; + background-color : #baa88b; + background-color : #ff00ff; +} +.sidebar h3 { + text-align : center; +} +.sidebar p { + padding : 5%; + font-size : 10px; + text-align : center; +} +.content { + position : absolute; + right : 20%; + width : 60%; + height : 70%; + background-color : #d3d3d3; +} +.mid-sect-article { + background-color : #e2c79e; + background-color : #0000ff; +} +.mid-sect-header h2 { + text-align : center; +} +.mid-sect-article p { + padding : 10%; + margin : 1%; + background-color : #e2c79e; + text-align : center; +} +.mid-sect-footer { + margin : 2%; + background-color : #a5a4a4; + background-color : magenta; + text-align : center; +} +.footer { + position : absolute; + bottom : 3%; + width : 100%; + height : 60px; + background-color : #a5a4a4; + background-color : magenta; +} +.footer p { + font-size : 10px; + text-align : center; +} + +/*Mobile screens 640px or less */ +@media only screen and (max-width : 640px) { + + .header { + width : 93vw; + height : 10vh; + margin-left : 3%; + } + .header h1 { + padding-top : 4%; + font-size : 20px; /*Becuase it would be too big for a mobile resolution, + the font size is different from the one in the original exercise*/ + } + .navigation { + left : 3%; + width : 25vw; + height : 58vh; + margin-top : 1%; + margin-right : 1%; + } + .sidebar { + top : 73%; + left : 2.5%; + width : 93vw; + height : 20vh; + overflow : scroll; + } + .sidebar h3 { + padding : 1%; + } + .content { + right : 4%; + margin-top : 1%; + width : 64vw; + height : 58vh; + } + .mid-sect-article { + height : 40vh; + padding : 1%; + margin : 3%; + overflow : scroll; + } + .mid-sect-footer { + position : absolute; + bottom : 6%; + left : 5%; + padding-bottom : 4%; + width : 55vw; + height : 5vh; + margin : 0; + } + .footer { + bottom : 0; + width : 100vw; + height : 5vh; + text-align : center; + } + .footer p { + margin : 0; + margin-top : 2%; + } +} + /*Mobile screens : more than 375px and less than 650px*/ +@media only screen and (min-width: 375px) and (max-width : 650px) { + + .header { + width : 95vw; + height : 10vh; + margin-left: 3%; + } + .header h1 { + padding-top : 4%; + font-size : 20px; + } + .navigation { + left : 3%; + width : 29vw; + height : 55vh; + margin-top : 1%; + margin-right : 1%; + } + .sidebar { + top : 69%; + left : 2.5%; + width : 94vw; + height : 24vh; + overflow : scroll; + } + .sidebar h3 { + padding : 1%; + } + .content { + width : 62vw; + height : 55vh; + right : 3%; + margin-top : 1%; + } + .mid-sect-article { + height : 43vh; + padding : 1%; + margin : 3%; + overflow : scroll; + } + .mid-sect-footer{ + position : absolute; + bottom : 1%; + left : 5%; + width : 55vw; + height : 3.5vh; + padding-bottom : 3%; + margin : 0; + } + .footer { + bottom : 0; + width : 100vw; + height : 5vh; + text-align : center; + } + .footer p { + margin : 0; + margin-top : 2%; + } +} diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.1_Display_Property_Responsive/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.1_Display_Property_Responsive/index.html new file mode 100644 index 000000000..a54724d84 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.1_Display_Property_Responsive/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + 2.5.1 + + +

Section 2.5.1 : The Display Property

+
+ +
+

Content header

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nesciunt temporibus consequuntur rem? Molestias, eius. Fugiat incidunt fugit non architecto numquam obcaecati debitis corrupti repellendus sint nulla. Molestiae, aperiam adipisci? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum officiis numquam rerum, doloremque repellendus unde delectus corporis amet explicabo quaerat dolore mollitia recusandae aut possimus. Iusto laudantium deserunt neque! Adipisci! +

+
+

Middle section footer

+
+ +
+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.1_Display_Property_Responsive/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.1_Display_Property_Responsive/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.1_Display_Property_Responsive/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.1_Display_Property_Responsive/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.1_Display_Property_Responsive/styles/style.css new file mode 100644 index 000000000..3fdeb3516 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.1_Display_Property_Responsive/styles/style.css @@ -0,0 +1,162 @@ +* { + box-sizing : border-box; + font-family : "Palatino Linotype","Times New Roman"; + color : #000000; +} + +.container { + display : flex; + height : 80vh; + width : 100vw; +} + +.col-sm { + flex : 1; + margin : 1%; +} +.col { + flex : 3; +} +.col-md { + flex : 1.5; + margin : 1%; +} +.header { + display : flex; + flex-direction : column; + height : 50px; + margin-bottom : 1%; + background-color : #808080; +} +.header p { + margin : 0; + margin : 1%; + text-align : center; +} +.navigation { + background-color : #808080; +} +.navigation ul { + padding : 0; +} +.navigation ul li { + margin-top : 8%; + text-align : center; + list-style-type : none; +} +.navigation ul li a { + text-decoration : none; +} +.content { + background-color : rgb(105, 105, 105); +} +.content header { + width : 51vw; + height : 5vh; + margin : 1%; + background-color : #808080; +} +.content header p { + text-align : center; +} +.mid-article{ + margin : 1%; + height: 65vh; + background-color: rgb(149, 177, 229); +} +.mid-article p { + text-align : center; +} +.content footer { + background-color : rgb(169, 175, 228); + margin : 1%; +} +.content footer p { + margin : 0; + text-align : center; +} +.sidebar{ + background-color : #778899; +} +.sidebar h3, p { + text-align : center; +} +.footer { + height: 50px; + margin-top : 1%; + background-color : #808080; +} +footer p { + text-align : center; +} + +/*Mobile screens 640px or less */ +@media only screen and (max-width : 640px) { + .col { + flex : 5; + } + .container { + flex-direction : column; + } + .header { + display : flex; + flex-direction : column; + height : 50px; + margin-bottom : 1%; + background-color : #808080; + } + .header p { + margin : 0; + margin-top : 3%; + text-align : center; + } + .navigation { + margin-bottom : 2%; + } + .navigation ul { + padding : 10%; + margin : 1%; + text-align : center; + } + .navigation ul li { + display : inline-block; + margin : 1%; + } + .navigation ul li a { + text-decoration : none; + } + .content header { + width : 95vw; + margin-left : 3%; + margin-bottom : 4%; + font-size : 1.5em; + } + .mid-article { + height : 25vh; + } + .mid-article p { + margin : 0; + height : 20vh; + overflow : scroll; + font-size : 1em; + } + .sidebar { + height : 20vh; + margin-top : 2%; + } + .sidebar h3 { + margin : 0; + font-size : 1em; + } + .sidebar p { + height : 10vh; + overflow : scroll; + font-size : 0.8em; + } + .footer { + display : flex; + flex-direction: column; + margin-top : 4%; + } + +} diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/auriculares.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/auriculares.jpg new file mode 100644 index 000000000..c86d4188e Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/auriculares.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/cat.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/cat.jpg new file mode 100644 index 000000000..33da23be2 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/cat.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/sakura.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/sakura.jpg new file mode 100644 index 000000000..ff0ae4317 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/sakura.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/succ.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/succ.jpg new file mode 100644 index 000000000..1d09a41c3 Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/succ.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/water.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/water.jpg new file mode 100644 index 000000000..2735ff73d Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/water.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/wheel.jpg b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/wheel.jpg new file mode 100644 index 000000000..967cb5a5b Binary files /dev/null and b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/images/wheel.jpg differ diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/index.html b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/index.html new file mode 100644 index 000000000..db06d60a7 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + 2.5.2 + + +
+

Showcase

+

Incredible types is a curated collection and showcase of understanding typography and design + from around the world. We currently have 354 pieces of inspirational design in our showcase, from 365 creatives and + studios from 46 different countries. Follow us on Twitter, Facebook and Pinterest or subscribe to our RSS feed.

+
+
+
+
+ A pair of earbuds. + auriculares +
+
+ Succulent. + succulent +
+
+ A drop of water. + water drop +
+
+ A sakura flower. + sakura +
+
+ Rims closeup. + rims +
+
+ A cat. + cat +
+
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/styles/normalize.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/styles/style.css b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/styles/style.css new file mode 100644 index 000000000..5d963dda6 --- /dev/null +++ b/00-HTML-CSS-basics/Basics of HTML and CSS/2.CSS/2.6_Media_Queries/2.5.2_Layout_systems_Responsive/styles/style.css @@ -0,0 +1,86 @@ +* { + box-sizing : border-box; + font-family : Arial,"Times New Roman"; +} +.upper-section { + display : grid; + grid-template-columns : 2fr 10fr; +} +.wrapper { + display : grid; + grid-template-columns : 4fr 4fr 4fr; + grid-gap : 10px; +} +.wrapper div { + background-color : #ffffff; +} +.section2 p { + padding : 15px; +} +.section1 p { + padding : 10px; +} +.hover-box { + display : none; + position : absolute; + width : 32.9%; + height : 10%; + padding : 5px; + opacity : 0.7; + z-index : 1; + background-color: #ffffff; + text-align : center; +} +.box1:hover .hover-box, +.box2:hover .hover-box, +.box3:hover .hover-box, +.box4:hover .hover-box, +.box5:hover .hover-box, +.box6:hover .hover-box{ + display : block; +} +.box1 img, +.box2 img, +.box3 img, +.box4 img, +.box5 img, +.box6 img{ + width : 100%; + height : 100%; +} +.box3 { + height : 90%; +} +/*Mobile screens 640px or less */ +@media only screen and (max-width : 640px) { + .upper-section { + grid-template-columns : 1fr 11fr; + } + .wrapper { + grid-template-columns : 6fr 6fr; + grid-gap : 5px; + } + .section2 p { + font-size : 0.9em; + } + .hover-box { + width : 49.5%; + height : 7%; + } +} +/*Mobile screens : more than 375px and less than 650px*/ +@media only screen and (min-width: 375px) and (max-width : 650px) { + + .upper-section { + grid-template-columns : 1fr 11fr; + } + .wrapper { + grid-template-columns : 6fr 6fr; + grid-template-rows : 45% 45% 45%; + grid-gap : 5px; + } + .hover-box { + width : 49.4%; + height : 7%; + } +} diff --git a/01-JS-DOM-APIs/exercise_1_Index_Page/index.html b/01-JS-DOM-APIs/exercise_1_Index_Page/index.html new file mode 100644 index 000000000..2d82d05e2 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_1_Index_Page/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + Exercise 1 + + +
+

Page header

+
+

Title header 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+

Title header 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus + accusamus odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+

Hello world!

+
+ +
+ + + \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_1_Index_Page/scripts/main.js b/01-JS-DOM-APIs/exercise_1_Index_Page/scripts/main.js new file mode 100644 index 000000000..398903088 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_1_Index_Page/scripts/main.js @@ -0,0 +1,7 @@ +'use strict'; +window.addEventListener('DOMContentLoaded', (event) => { + var hidden_section = document.querySelector('.hidden-section'); + hidden_section.classList.add('hidden-section-show'); +}); + + diff --git a/01-JS-DOM-APIs/exercise_1_Index_Page/styles/normalize.css b/01-JS-DOM-APIs/exercise_1_Index_Page/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_1_Index_Page/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_1_Index_Page/styles/styles.css b/01-JS-DOM-APIs/exercise_1_Index_Page/styles/styles.css new file mode 100644 index 000000000..420eedc0c --- /dev/null +++ b/01-JS-DOM-APIs/exercise_1_Index_Page/styles/styles.css @@ -0,0 +1,56 @@ +body { + background-color : rgb(166, 166, 245); +} +.wrapper { + display : grid; + grid-template-columns: 3fr 3fr 3fr 3fr; + grid-template-rows: 50px 300px 200px 50px; + grid-template-areas : 'header header header header' + 'section-one section-one section-two section-two' + 'hidden-section hidden-section hidden-section hidden-section' + 'footer footer footer footer'; + grid-gap : 10px; +} +.header { + grid-area : header; + background-color : rgba(67, 67, 129, 0.76); +} +.header h1 { + margin : 0%; + padding : 5px; + text-align : center; +} +.section1 { + grid-area : section-one; + background-color : rgba(67, 67, 129, 0.76); +} +.section1 h2, p { + padding : 1%; + text-align : center; +} +.section2 { + grid-area : section-two; + background-color : rgba(67, 67, 129, 0.76); +} +.section2 h2, p { + padding : 1%; + text-align : center; +} +.hidden-section { + grid-area : hidden-section; + padding : 4%; + opacity : 0; + transition : opacity; + transition-duration : .90s; + transition-timing-function : ease-in-out; + background-color : rgba(67, 67, 129, 0.76); + text-align : center; +} +.hidden-section-show { + opacity : 1; +} +.footer { + grid-area : footer; + background-color : rgba(67, 67, 129, 0.76); + text-align : center; +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_2_Adding_Events/index.html b/01-JS-DOM-APIs/exercise_2_Adding_Events/index.html new file mode 100644 index 000000000..1e9667f90 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_2_Adding_Events/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + Exercise 1 + + +
+

Page header

+
+

Title header 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+

Title header 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus + accusamus odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+

Hello world!

+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_2_Adding_Events/scripts/main.js b/01-JS-DOM-APIs/exercise_2_Adding_Events/scripts/main.js new file mode 100644 index 000000000..d899e39cf --- /dev/null +++ b/01-JS-DOM-APIs/exercise_2_Adding_Events/scripts/main.js @@ -0,0 +1,15 @@ +'use strict'; +window.addEventListener('DOMContentLoaded', (event) => { + var hidden_section = document.querySelector('.hidden-section'); + var button = document.querySelector('.alert-button').addEventListener('click', alertFunction); + var config = { + 'url' : 'http://api.icndb.com/jokes/random' + }; + + hidden_section.classList.add('hidden-section-show'); + + function alertFunction(){ + alert('Hi there! :)'); + } + +}); \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_2_Adding_Events/styles/normalize.css b/01-JS-DOM-APIs/exercise_2_Adding_Events/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_2_Adding_Events/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_2_Adding_Events/styles/styles.css b/01-JS-DOM-APIs/exercise_2_Adding_Events/styles/styles.css new file mode 100644 index 000000000..4f517d3a7 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_2_Adding_Events/styles/styles.css @@ -0,0 +1,63 @@ +body { + background-color : rgb(166, 166, 245); +} +.wrapper { + display : grid; + grid-template-columns: 3fr 3fr 3fr 3fr; + grid-template-rows: 50px 300px 200px 50px 50px; + grid-template-areas : 'header header header header' + 'section-one section-one section-two section-two' + 'hidden-section hidden-section hidden-section hidden-section' + 'button button button button' + 'footer footer footer footer'; + grid-gap : 10px; +} +.header { + grid-area : header; + background-color : rgba(67, 67, 129, 0.76); +} +.header h1 { + margin : 0%; + padding : 5px; + text-align : center; +} +.section1 { + grid-area : section-one; + background-color : rgba(67, 67, 129, 0.76); +} +.section1 h2, p { + padding : 1%; + text-align : center; +} +.section2 { + grid-area : section-two; + background-color : rgba(67, 67, 129, 0.76); +} +.section2 h2, p { + padding : 1%; + text-align : center; +} +.hidden-section { + grid-area : hidden-section; + padding : 4%; + opacity : 0; + transition : opacity; + transition-duration : .90s; + transition-timing-function : ease-in-out; + background-color : rgba(67, 67, 129, 0.76); + text-align : center; +} +.hidden-section-show { + opacity : 1; +} +.button { + grid-area : button; + width : 100px; + height : 30px; + margin : 0 auto; +} +.footer { + grid-area : footer; + background-color : rgba(67, 67, 129, 0.76); + text-align : center; +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_3_DataFetching/index.html b/01-JS-DOM-APIs/exercise_3_DataFetching/index.html new file mode 100644 index 000000000..1e9667f90 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_3_DataFetching/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + Exercise 1 + + +
+

Page header

+
+

Title header 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+

Title header 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus + accusamus odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+

Hello world!

+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_3_DataFetching/scripts/main.js b/01-JS-DOM-APIs/exercise_3_DataFetching/scripts/main.js new file mode 100644 index 000000000..1aba85c91 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_3_DataFetching/scripts/main.js @@ -0,0 +1,41 @@ +'use strict'; +window.addEventListener('DOMContentLoaded', (event) => { + var hidden_section = document.querySelector('.hidden-section'); + //Joke API + var button = document.querySelector('.alert-button').addEventListener('click', getJoke); + //Reusable code + //var button = document.querySelector('.alert-button').addEventListener('click', reusableFunction); + + var config = { + 'url' : 'http://apti.icndb.com/jokes/random' + }; + + hidden_section.classList.add('hidden-section-show'); + + function getJoke(){ + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + hidden_section.innerHTML = JSON.parse(xhttp.responseText).value.joke; + } + }; + xhttp.open("GET", 'http://api.icndb.com/jokes/random', true); + xhttp.send(); + } + + function reusableFunction(config){ + fetch(config.url) + .then(function(response){ + return response.json(); + }) + .then(function(response){ + console.log(response); + }) + .catch(function(error){ + hidden_section.classList.add('error-section'); + hidden_section.innerHTML = 'A server error has occurred.'; + }) + } + + +}); \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_3_DataFetching/styles/normalize.css b/01-JS-DOM-APIs/exercise_3_DataFetching/styles/normalize.css new file mode 100644 index 000000000..045f5e914 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_3_DataFetching/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_3_DataFetching/styles/styles.css b/01-JS-DOM-APIs/exercise_3_DataFetching/styles/styles.css new file mode 100644 index 000000000..dec61362f --- /dev/null +++ b/01-JS-DOM-APIs/exercise_3_DataFetching/styles/styles.css @@ -0,0 +1,67 @@ +body { + background-color : rgb(166, 166, 245); +} +.wrapper { + display : grid; + grid-template-columns: 3fr 3fr 3fr 3fr; + grid-template-rows: 50px 300px 200px 50px 50px; + grid-template-areas : 'header header header header' + 'section-one section-one section-two section-two' + 'hidden-section hidden-section hidden-section hidden-section' + 'button button button button' + 'footer footer footer footer'; + grid-gap : 10px; +} +.header { + grid-area : header; + background-color : rgba(67, 67, 129, 0.76); +} +.header h1 { + margin : 0%; + padding : 5px; + text-align : center; +} +.section1 { + grid-area : section-one; + background-color : rgba(67, 67, 129, 0.76); +} +.section1 h2, p { + padding : 1%; + text-align : center; +} +.section2 { + grid-area : section-two; + background-color : rgba(67, 67, 129, 0.76); +} +.section2 h2, p { + padding : 1%; + text-align : center; +} +.hidden-section { + grid-area : hidden-section; + padding : 4%; + opacity : 0; + transition : opacity; + transition-duration : .90s; + transition-timing-function : ease-in-out; + background-color : rgba(67, 67, 129, 0.76); + text-align : center; +} +.hidden-section-show { + opacity : 1; +} +.error-section{ + background-color : rgb(241, 6, 6); + opacity: 0.8; +} +.button { + grid-area : button; + width : 100px; + height : 30px; + margin : 0 auto; +} +.footer { + grid-area : footer; + background-color : rgba(67, 67, 129, 0.76); + text-align : center; +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_4_DataFetchingWithParameters/index.html b/01-JS-DOM-APIs/exercise_4_DataFetchingWithParameters/index.html new file mode 100644 index 000000000..10c82dc71 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_4_DataFetchingWithParameters/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + Exercise 1 + + +
+

Page header

+
+

Title header 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+

Title header 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus + accusamus odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+
+ + + +
+

Repositories list:

+ +
+
+

Hello world!

+
+
+ +
+ +
+ + \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_4_DataFetchingWithParameters/scripts/main.js b/01-JS-DOM-APIs/exercise_4_DataFetchingWithParameters/scripts/main.js new file mode 100644 index 000000000..a4794f638 --- /dev/null +++ b/01-JS-DOM-APIs/exercise_4_DataFetchingWithParameters/scripts/main.js @@ -0,0 +1,62 @@ +'use strict'; +window.addEventListener('DOMContentLoaded', (event) => { + var hidden_section = document.querySelector('.hidden-section'); + var button = document.querySelector('.alert-button').addEventListener('click', getData); + var button_input = document.querySelector('.button-input').addEventListener('click', filterItems); + hidden_section.classList.add('hidden-section-show'); + + function getData(){ + var xhttp = new XMLHttpRequest(); + var search_bar = document.querySelector('.search-bar'); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + var response = JSON.parse(xhttp.responseText); + console.log(response); + for(var i = 0; i + + + + + + + + + Exercise 1 + + +
+

Page header

+
+

Title header 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+

Title header 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus accusamus + odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facilis vero ducimus + accusamus odio culpa odit sit nesciunt, cumque ut porro, laborum non earum minus iure placeat quasi! Quia, + repellendus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id nisi ipsam obcaecati tenetur autem, + atque adipisci,delectus officiis hic error sed numquam assumenda iure corrupti consequuntur maxime ipsa! Nisi, + delectus. +

+
+
+ + + + + + + + + +
User ID Username
+
+

Main website footer ©

+
+ + + \ No newline at end of file diff --git a/01-JS-DOM-APIs/exercise_6_DOM_Manipulation/scripts/main.js b/01-JS-DOM-APIs/exercise_6_DOM_Manipulation/scripts/main.js new file mode 100644 index 000000000..e215055fe --- /dev/null +++ b/01-JS-DOM-APIs/exercise_6_DOM_Manipulation/scripts/main.js @@ -0,0 +1,36 @@ +'use strict'; +window.addEventListener('DOMContentLoaded', (event) => { + var hidden_section = document.querySelector('.hidden-section'); + var users = [ + [1, 'Peter'], + [2, 'Bob_93'], + [3, 'Susan'], + [4, 'Edward'], + [5, 'John'], + [6, 'Anonymous_User'] + ]; + + hidden_section.classList.add('hidden-section-show'); + + function print2DArray(users){ + var table_body = document.getElementsByTagName('tbody')[0]; + + for(var i = 0; i