From 4543a0b2571209d15fe8a8aa7b3f5715b458fe8b Mon Sep 17 00:00:00 2001 From: Yetsibeth Nieto Date: Fri, 26 Nov 2021 03:23:39 +0000 Subject: [PATCH] pretrabajo 1 --- .learn/resets/01-Hello-World/index.html | 1 + .learn/resets/01.1-The-Style-Tag/index.html | 6 ++ .../resets/01.2-Your-First-Style/index.html | 14 ++++ .../resets/01.3-Your-Second-Style/index.html | 11 +++ .../resets/02-Separate-Stylesheet/index.html | 9 ++ .learn/resets/02.1-Background/index.html | 10 +++ .learn/resets/03-Inline-Styles/index.html | 17 ++++ .learn/resets/04-Class-Selector/index.html | 14 ++++ .learn/resets/04.1-Combined-Rules/index.html | 13 +++ .../04.2-Apply-several-classes/index.html | 13 +++ .learn/resets/04.3-id-Selector/index.html | 13 +++ .learn/resets/05-Specificity/index.html | 18 ++++ .learn/resets/06-Practicing-Rules/index.html | 34 ++++++++ .../resets/07-Very-Specific-Rules/index.html | 82 +++++++++++++++++++ .learn/resets/08-Rounded-Image/index.html | 13 +++ .learn/resets/09-Anchor-Styles/index.html | 13 +++ exercises/01-Hello-World/index.html | 9 +- exercises/01.1-The-Style-Tag/index.html | 6 +- exercises/01.2-Your-First-Style/index.html | 2 +- exercises/01.3-Your-Second-Style/index.html | 5 +- exercises/02-Separate-Stylesheet/styles.css | 3 + exercises/02.1-Background/styles.css | 4 +- exercises/03-Inline-Styles/index.html | 2 +- exercises/04-Class-Selector/index.html | 8 +- exercises/04.1-Combined-Rules/index.html | 4 +- exercises/04.1-Combined-Rules/styles.css | 12 +-- .../04.2-Apply-several-classes/index.html | 6 +- exercises/04.3-id-Selector/index.html | 6 +- exercises/04.3-id-Selector/styles.css | 6 +- exercises/05-Specificity/styles.css | 10 ++- exercises/06-Practicing-Rules/index.html | 6 +- exercises/06-Practicing-Rules/styles.css | 28 ++++++- exercises/07-Very-Specific-Rules/index.html | 2 +- exercises/07-Very-Specific-Rules/styles.css | 11 ++- exercises/08-Rounded-Image/index.html | 7 +- exercises/08-Rounded-Image/styles.css | 4 + 36 files changed, 376 insertions(+), 46 deletions(-) create mode 100644 .learn/resets/01-Hello-World/index.html create mode 100644 .learn/resets/01.1-The-Style-Tag/index.html create mode 100644 .learn/resets/01.2-Your-First-Style/index.html create mode 100644 .learn/resets/01.3-Your-Second-Style/index.html create mode 100644 .learn/resets/02-Separate-Stylesheet/index.html create mode 100644 .learn/resets/02.1-Background/index.html create mode 100644 .learn/resets/03-Inline-Styles/index.html create mode 100644 .learn/resets/04-Class-Selector/index.html create mode 100644 .learn/resets/04.1-Combined-Rules/index.html create mode 100644 .learn/resets/04.2-Apply-several-classes/index.html create mode 100644 .learn/resets/04.3-id-Selector/index.html create mode 100644 .learn/resets/05-Specificity/index.html create mode 100644 .learn/resets/06-Practicing-Rules/index.html create mode 100644 .learn/resets/07-Very-Specific-Rules/index.html create mode 100644 .learn/resets/08-Rounded-Image/index.html create mode 100644 .learn/resets/09-Anchor-Styles/index.html diff --git a/.learn/resets/01-Hello-World/index.html b/.learn/resets/01-Hello-World/index.html new file mode 100644 index 00000000..03ae0584 --- /dev/null +++ b/.learn/resets/01-Hello-World/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/.learn/resets/01.1-The-Style-Tag/index.html b/.learn/resets/01.1-The-Style-Tag/index.html new file mode 100644 index 00000000..1c51e8e0 --- /dev/null +++ b/.learn/resets/01.1-The-Style-Tag/index.html @@ -0,0 +1,6 @@ + +

+ Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology + around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity, + math,writing, and confidence. +

diff --git a/.learn/resets/01.2-Your-First-Style/index.html b/.learn/resets/01.2-Your-First-Style/index.html new file mode 100644 index 00000000..39661132 --- /dev/null +++ b/.learn/resets/01.2-Your-First-Style/index.html @@ -0,0 +1,14 @@ + + + + + + + Hello! I am an anchor in red, change my color to yellow + + diff --git a/.learn/resets/01.3-Your-Second-Style/index.html b/.learn/resets/01.3-Your-Second-Style/index.html new file mode 100644 index 00000000..998d973a --- /dev/null +++ b/.learn/resets/01.3-Your-Second-Style/index.html @@ -0,0 +1,11 @@ + + + + + + + Hello! My background should be blue! + + diff --git a/.learn/resets/02-Separate-Stylesheet/index.html b/.learn/resets/02-Separate-Stylesheet/index.html new file mode 100644 index 00000000..a7be7a61 --- /dev/null +++ b/.learn/resets/02-Separate-Stylesheet/index.html @@ -0,0 +1,9 @@ + + + + + + + My background should be blue. + + diff --git a/.learn/resets/02.1-Background/index.html b/.learn/resets/02.1-Background/index.html new file mode 100644 index 00000000..ce03ce24 --- /dev/null +++ b/.learn/resets/02.1-Background/index.html @@ -0,0 +1,10 @@ + + + + + 02 Background + + + My background should be an image with th size "contain" + + diff --git a/.learn/resets/03-Inline-Styles/index.html b/.learn/resets/03-Inline-Styles/index.html new file mode 100644 index 00000000..ab36cc54 --- /dev/null +++ b/.learn/resets/03-Inline-Styles/index.html @@ -0,0 +1,17 @@ + + + + 03 Inline Styles + + + + + + + + + + +
Hello
My brother
+ + diff --git a/.learn/resets/04-Class-Selector/index.html b/.learn/resets/04-Class-Selector/index.html new file mode 100644 index 00000000..e3abd1bd --- /dev/null +++ b/.learn/resets/04-Class-Selector/index.html @@ -0,0 +1,14 @@ + + + + + + 04 Class selector + + + + +

Hello!

+

World!

+ + diff --git a/.learn/resets/04.1-Combined-Rules/index.html b/.learn/resets/04.1-Combined-Rules/index.html new file mode 100644 index 00000000..2af5a24c --- /dev/null +++ b/.learn/resets/04.1-Combined-Rules/index.html @@ -0,0 +1,13 @@ + + + + + + 04 Combined Rules + + + + +
Hello!
+ + diff --git a/.learn/resets/04.2-Apply-several-classes/index.html b/.learn/resets/04.2-Apply-several-classes/index.html new file mode 100644 index 00000000..a64723af --- /dev/null +++ b/.learn/resets/04.2-Apply-several-classes/index.html @@ -0,0 +1,13 @@ + + + + + + 04 Class selector + + + + +
9
+ + diff --git a/.learn/resets/04.3-id-Selector/index.html b/.learn/resets/04.3-id-Selector/index.html new file mode 100644 index 00000000..5b9a773d --- /dev/null +++ b/.learn/resets/04.3-id-Selector/index.html @@ -0,0 +1,13 @@ + + + + + + 04.3 ID selector + + + + + I should look like a button + + diff --git a/.learn/resets/05-Specificity/index.html b/.learn/resets/05-Specificity/index.html new file mode 100644 index 00000000..3d68946c --- /dev/null +++ b/.learn/resets/05-Specificity/index.html @@ -0,0 +1,18 @@ + + + + + + + 05 Specificity + + + + + diff --git a/.learn/resets/06-Practicing-Rules/index.html b/.learn/resets/06-Practicing-Rules/index.html new file mode 100644 index 00000000..4119acb5 --- /dev/null +++ b/.learn/resets/06-Practicing-Rules/index.html @@ -0,0 +1,34 @@ + + + + + + + 06 Practicing Rules + + + +

The learning essay

+

3 reasons you know you are learning

+

+ We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning. +

+
    +
  1. You are able to complete the exercises by yourself.
  2. +
  3. You understand what the teacher is talking about
  4. +
  5. Your are able to have conversations about the topic
  6. +
+

3 reasons you know love what you are learning

+ +

+ If you can't sleep, what better than watching videos of cats? + click here +

+ + \ No newline at end of file diff --git a/.learn/resets/07-Very-Specific-Rules/index.html b/.learn/resets/07-Very-Specific-Rules/index.html new file mode 100644 index 00000000..9c691446 --- /dev/null +++ b/.learn/resets/07-Very-Specific-Rules/index.html @@ -0,0 +1,82 @@ + + + + + + + 07 Very Specific Rules + + +

The learning essay

+

3 reasons you know you are learning

+

+ We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning. +

+
    +
  1. You are able to complete the exercises by yourself.
  2. +
  3. You understand what the teacher is talking about
  4. +
  5. Your are able to have conversations about the topic
  6. +
+

3 reasons you know love what you are learning

+ +

+ If you can't sleep, what better than watching videos of cats? + click here +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AgeGender
12 yearsMale
22 yearsFemale
11 yearsMale
21 yearsMale
22 yearsFemale
10 yearsMale
13 yearsFemale
13 yearsMale
10 yearsMale
11 yearsMale
11 yearsMale
+ + diff --git a/.learn/resets/08-Rounded-Image/index.html b/.learn/resets/08-Rounded-Image/index.html new file mode 100644 index 00000000..95931a07 --- /dev/null +++ b/.learn/resets/08-Rounded-Image/index.html @@ -0,0 +1,13 @@ + + + + + + + 08 Rounded Image + + + + + + diff --git a/.learn/resets/09-Anchor-Styles/index.html b/.learn/resets/09-Anchor-Styles/index.html new file mode 100644 index 00000000..984ca01e --- /dev/null +++ b/.learn/resets/09-Anchor-Styles/index.html @@ -0,0 +1,13 @@ + + + + + + + 09 Anchor Styles + + + + Click me + + diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html index 03ae0584..4a5e4325 100644 --- a/exercises/01-Hello-World/index.html +++ b/exercises/01-Hello-World/index.html @@ -1 +1,8 @@ - \ No newline at end of file + +Click me to open google.com diff --git a/exercises/01.1-The-Style-Tag/index.html b/exercises/01.1-The-Style-Tag/index.html index 1c51e8e0..f02bc162 100644 --- a/exercises/01.1-The-Style-Tag/index.html +++ b/exercises/01.1-The-Style-Tag/index.html @@ -1,4 +1,8 @@ - +

Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity, diff --git a/exercises/01.2-Your-First-Style/index.html b/exercises/01.2-Your-First-Style/index.html index 39661132..a2a88d04 100644 --- a/exercises/01.2-Your-First-Style/index.html +++ b/exercises/01.2-Your-First-Style/index.html @@ -4,7 +4,7 @@ diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html index 998d973a..917857f8 100644 --- a/exercises/01.3-Your-Second-Style/index.html +++ b/exercises/01.3-Your-Second-Style/index.html @@ -2,7 +2,10 @@ diff --git a/exercises/02-Separate-Stylesheet/styles.css b/exercises/02-Separate-Stylesheet/styles.css index 780be166..2172e465 100644 --- a/exercises/02-Separate-Stylesheet/styles.css +++ b/exercises/02-Separate-Stylesheet/styles.css @@ -2,3 +2,6 @@ 1. Select the body tag. 2. Add the background rule equal to blue. */ +body { + background-color: blue; +} diff --git a/exercises/02.1-Background/styles.css b/exercises/02.1-Background/styles.css index afdf956f..5c3a529e 100644 --- a/exercises/02.1-Background/styles.css +++ b/exercises/02.1-Background/styles.css @@ -1,5 +1,5 @@ body { background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg); - background-size: cover; - background-repeat: no-repeat; + background-size: contain; + background-repeat: inherit; } diff --git a/exercises/03-Inline-Styles/index.html b/exercises/03-Inline-Styles/index.html index ab36cc54..4753103a 100644 --- a/exercises/03-Inline-Styles/index.html +++ b/exercises/03-Inline-Styles/index.html @@ -5,7 +5,7 @@ - +
diff --git a/exercises/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html index e3abd1bd..60e1d67f 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/04-Class-Selector/index.html @@ -2,13 +2,11 @@ - - 04 Class selector - + 04 Class selector -

Hello!

-

World!

+

Hello!

+

World!

diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/04.1-Combined-Rules/index.html index 2af5a24c..50078b73 100644 --- a/exercises/04.1-Combined-Rules/index.html +++ b/exercises/04.1-Combined-Rules/index.html @@ -2,9 +2,7 @@ - - 04 Combined Rules - + 04 Combined Rules diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css index 6313a1bc..6f52a25a 100644 --- a/exercises/04.1-Combined-Rules/styles.css +++ b/exercises/04.1-Combined-Rules/styles.css @@ -1,14 +1,10 @@ .myBox { width: 50px; height: 50px; - padding-top: 10px; - padding-left: 30px; - padding-right: 190px; - padding-bottom: 50px; + padding: 10px 190px 50px 30px; - background: rgb(189, 189, 189); - background-image: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true); - background-position-x: 100px; - background-repeat: no-repeat; + background: rgb(189, 189, 189) + url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true) + no-repeat 100px; background-size: contain; } diff --git a/exercises/04.2-Apply-several-classes/index.html b/exercises/04.2-Apply-several-classes/index.html index a64723af..20b473e9 100644 --- a/exercises/04.2-Apply-several-classes/index.html +++ b/exercises/04.2-Apply-several-classes/index.html @@ -2,12 +2,10 @@ - - 04 Class selector - + 04 Class selector -
9
+
9
diff --git a/exercises/04.3-id-Selector/index.html b/exercises/04.3-id-Selector/index.html index 5b9a773d..c98c7cc3 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/04.3-id-Selector/index.html @@ -2,12 +2,10 @@ - - 04.3 ID selector - + 04.3 ID selector - I should look like a button + I should look like a button diff --git a/exercises/04.3-id-Selector/styles.css b/exercises/04.3-id-Selector/styles.css index e020d28b..2a4303b4 100644 --- a/exercises/04.3-id-Selector/styles.css +++ b/exercises/04.3-id-Selector/styles.css @@ -1,5 +1,5 @@ #button1 { - background: #BDBDBD; - border: #5E5E5E; - border-radius: 5px; + background: #bdbdbd; + border: #5e5e5e; + border-radius: 5px; } diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css index db471c2b..13374f70 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,11 @@ -ul li{ +ul li { background: blue; } -#thirditem{ +#thirditem { background: yellow; -} +} /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file +#thirditem { + background: green !important; +} diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index 4119acb5..db2eb563 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -21,9 +21,7 @@

3 reasons you know you are learning

3 reasons you know love what you are learning

@@ -31,4 +29,4 @@

3 reasons you know love what you are learning

click here

- \ No newline at end of file + diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/06-Practicing-Rules/styles.css index d89b1a47..c9e16e72 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1,27 @@ -/* add your styles here */ \ No newline at end of file +body { + background-image: url(https://3000-teal-moose-dg67kb89.ws-us17.gitpod.io/.learn/assets/background-vertical.jpg?raw=true); + background-repeat: repeat-y; + font-family: "Times New Roman", Times, serif; + padding-left: 20px; +} + +h1 { + font-family: "Courier New", Courier, monospace; + color: red; + text-align: center; +} +h2 { + text-decoration: underline; +} +#id1 { + background-color: rgba(255, 255, 255, 0.2); + padding: 5px 5px 5px 5px; +} +a { + color: blue; + text-decoration: underline; +} +a:hover { + color: green; + text-decoration: none; +} diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/07-Very-Specific-Rules/index.html index 9c691446..0d2c4abd 100644 --- a/exercises/07-Very-Specific-Rules/index.html +++ b/exercises/07-Very-Specific-Rules/index.html @@ -14,7 +14,7 @@

3 reasons you know you are learning

  1. You are able to complete the exercises by yourself.
  2. -
  3. You understand what the teacher is talking about
  4. +
  5. You understand what the teacher is talking about
  6. Your are able to have conversations about the topic

3 reasons you know love what you are learning

diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index defdb77a..bcbfda13 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,4 +1,13 @@ -/** Insert your code here **/ +ul li { + color: red !important; +} + +.color { + background-color: green; +} +tr:nth-child(odd) { + background-color: yellow; +} /*********** READ ONLY BLOCK ****** You CAN NOT UPDATE anything from here on, diff --git a/exercises/08-Rounded-Image/index.html b/exercises/08-Rounded-Image/index.html index 95931a07..df193991 100644 --- a/exercises/08-Rounded-Image/index.html +++ b/exercises/08-Rounded-Image/index.html @@ -8,6 +8,11 @@ - +
+ +
diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..d1e74169 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -3,4 +3,8 @@ body { } .rounded { border-radius: 100%; + object-position: 3% 3%; + object-fit: cover; + width: 300px; + height: 300px; }
Hello