From 767df721be2b3b9c302785d82c83c0506a6fbeef Mon Sep 17 00:00:00 2001 From: Esther Rosales Date: Sat, 22 May 2021 03:16:45 +0000 Subject: [PATCH] nueva actualizacion --- .learn/resets/01-Hello-World/index.html | 0 .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 + .../resets/02-Separate-Stylesheet/styles.css | 4 + .learn/resets/02.1-Background/index.html | 10 + .learn/resets/02.1-Background/styles.css | 5 + .learn/resets/03-Inline-Styles/index.html | 17 ++ .learn/resets/04-Class-Selector/index.html | 14 + .learn/resets/04-Class-Selector/styles.css | 3 + .learn/resets/04.1-Combined-Rules/index.html | 13 + .learn/resets/04.1-Combined-Rules/styles.css | 14 + .../04.2-Apply-several-classes/index.html | 13 + .../04.2-Apply-several-classes/styles.css | 26 ++ .learn/resets/04.3-id-Selector/index.html | 13 + .learn/resets/04.3-id-Selector/styles.css | 5 + .learn/resets/05-Specificity/index.html | 18 ++ .learn/resets/05-Specificity/styles.css | 9 + .learn/resets/06-Practicing-Rules/index.html | 34 +++ .learn/resets/06-Practicing-Rules/styles.css | 1 + .../resets/07-Very-Specific-Rules/index.html | 82 ++++++ .../resets/07-Very-Specific-Rules/styles.css | 15 + .learn/resets/08-Rounded-Image/index.html | 13 + .learn/resets/08-Rounded-Image/styles.css | 6 + .learn/resets/09-Anchor-Styles/index.html | 13 + .learn/resets/09-Anchor-Styles/styles.css | 16 ++ .learn/resets/10-Your-Own-Font/index.html | 15 + .learn/resets/10-Your-Own-Font/styles.css | 3 + .../resets/11-Font-Awesome-Icons/index.html | 14 + .../resets/11-Font-Awesome-Icons/styles.css | 3 + .../12-Relative-Length-EM-REM/index.html | 21 ++ .../12-Relative-Length-EM-REM/styles.css | 8 + .../resets/13-Anchor-Like-Button/index.html | 12 + .../resets/13-Anchor-Like-Button/styles.css | 7 + bc.json | 261 +++++++++++++++++- exercises/01-Hello-World/index.html | 17 +- exercises/01.1-The-Style-Tag/index.html | 26 +- exercises/01.2-Your-First-Style/index.html | 5 +- exercises/01.3-Your-Second-Style/index.html | 5 +- exercises/02-Separate-Stylesheet/styles.css | 7 +- exercises/02.1-Background/styles.css | 4 +- exercises/03-Inline-Styles/index.html | 2 +- exercises/04-Class-Selector/index.html | 6 +- exercises/04.1-Combined-Rules/styles.css | 14 +- .../04.2-Apply-several-classes/index.html | 2 +- .../04.2-Apply-several-classes/styles.css | 4 +- exercises/04.3-id-Selector/index.html | 2 +- exercises/04.3-id-Selector/styles.css | 6 +- exercises/05-Specificity/index.html | 5 +- exercises/05-Specificity/styles.css | 7 +- exercises/06-Practicing-Rules/index.html | 4 +- exercises/06-Practicing-Rules/styles.css | 29 +- exercises/07-Very-Specific-Rules/index.html | 2 +- exercises/07-Very-Specific-Rules/styles.css | 10 +- exercises/08-Rounded-Image/README.es.md | 7 +- exercises/08-Rounded-Image/index.html | 5 +- exercises/08-Rounded-Image/styles.css | 14 +- exercises/09-Anchor-Styles/styles.css | 3 +- exercises/10-Your-Own-Font/index.html | 22 +- exercises/10-Your-Own-Font/styles.css | 3 +- exercises/11-Font-Awesome-Icons/index.html | 29 +- .../12-Relative-Length-EM-REM/styles.css | 6 + exercises/13-Anchor-Like-Button/index.html | 2 +- exercises/13-Anchor-Like-Button/styles.css | 13 + 65 files changed, 913 insertions(+), 76 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-Separate-Stylesheet/styles.css create mode 100644 .learn/resets/02.1-Background/index.html create mode 100644 .learn/resets/02.1-Background/styles.css 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-Class-Selector/styles.css create mode 100644 .learn/resets/04.1-Combined-Rules/index.html create mode 100644 .learn/resets/04.1-Combined-Rules/styles.css create mode 100644 .learn/resets/04.2-Apply-several-classes/index.html create mode 100644 .learn/resets/04.2-Apply-several-classes/styles.css create mode 100644 .learn/resets/04.3-id-Selector/index.html create mode 100644 .learn/resets/04.3-id-Selector/styles.css create mode 100644 .learn/resets/05-Specificity/index.html create mode 100644 .learn/resets/05-Specificity/styles.css create mode 100644 .learn/resets/06-Practicing-Rules/index.html create mode 100644 .learn/resets/06-Practicing-Rules/styles.css create mode 100644 .learn/resets/07-Very-Specific-Rules/index.html create mode 100644 .learn/resets/07-Very-Specific-Rules/styles.css create mode 100644 .learn/resets/08-Rounded-Image/index.html create mode 100644 .learn/resets/08-Rounded-Image/styles.css create mode 100644 .learn/resets/09-Anchor-Styles/index.html create mode 100644 .learn/resets/09-Anchor-Styles/styles.css create mode 100644 .learn/resets/10-Your-Own-Font/index.html create mode 100644 .learn/resets/10-Your-Own-Font/styles.css create mode 100644 .learn/resets/11-Font-Awesome-Icons/index.html create mode 100644 .learn/resets/11-Font-Awesome-Icons/styles.css create mode 100644 .learn/resets/12-Relative-Length-EM-REM/index.html create mode 100644 .learn/resets/12-Relative-Length-EM-REM/styles.css create mode 100644 .learn/resets/13-Anchor-Like-Button/index.html create mode 100644 .learn/resets/13-Anchor-Like-Button/styles.css diff --git a/.learn/resets/01-Hello-World/index.html b/.learn/resets/01-Hello-World/index.html new file mode 100644 index 00000000..e69de29b 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-Separate-Stylesheet/styles.css b/.learn/resets/02-Separate-Stylesheet/styles.css new file mode 100644 index 00000000..780be166 --- /dev/null +++ b/.learn/resets/02-Separate-Stylesheet/styles.css @@ -0,0 +1,4 @@ +/* your styles here: + 1. Select the body tag. + 2. Add the background rule equal to 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/02.1-Background/styles.css b/.learn/resets/02.1-Background/styles.css new file mode 100644 index 00000000..afdf956f --- /dev/null +++ b/.learn/resets/02.1-Background/styles.css @@ -0,0 +1,5 @@ +body { + background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg); + background-size: cover; + background-repeat: no-repeat; +} 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-Class-Selector/styles.css b/.learn/resets/04-Class-Selector/styles.css new file mode 100644 index 00000000..ffec43c5 --- /dev/null +++ b/.learn/resets/04-Class-Selector/styles.css @@ -0,0 +1,3 @@ +.b-blue { + background: blue; +} 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.1-Combined-Rules/styles.css b/.learn/resets/04.1-Combined-Rules/styles.css new file mode 100644 index 00000000..3c54a57d --- /dev/null +++ b/.learn/resets/04.1-Combined-Rules/styles.css @@ -0,0 +1,14 @@ +.myBox { + width: 50px; + height: 50px; + padding-top: 10px; + padding-left: 30px; + padding-right: 190px; + padding-bottom: 50px; + + background: rgb(189, 189, 189); + background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg); + background-position-x: 100px; + background-repeat: no-repeat; + background-size: contain; +} 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.2-Apply-several-classes/styles.css b/.learn/resets/04.2-Apply-several-classes/styles.css new file mode 100644 index 00000000..efacee56 --- /dev/null +++ b/.learn/resets/04.2-Apply-several-classes/styles.css @@ -0,0 +1,26 @@ +.card { + display: inline-block; + width: 50px; + height: 80px; + position: relative; + border: 1px solid black; + text-align: center; + line-height: 80px; + border-radius: 5px; +} +.card:after { + font-size: 70%; + font-weight: bold; +} + +.spades, +.spades:after { + content: "♤"; + color: black; +} + +.heart, +.heart:after { + content: "♡"; + color: red; +} 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/04.3-id-Selector/styles.css b/.learn/resets/04.3-id-Selector/styles.css new file mode 100644 index 00000000..e020d28b --- /dev/null +++ b/.learn/resets/04.3-id-Selector/styles.css @@ -0,0 +1,5 @@ +#button1 { + background: #BDBDBD; + border: #5E5E5E; + border-radius: 5px; +} 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/05-Specificity/styles.css b/.learn/resets/05-Specificity/styles.css new file mode 100644 index 00000000..db471c2b --- /dev/null +++ b/.learn/resets/05-Specificity/styles.css @@ -0,0 +1,9 @@ +ul li{ + background: blue; +} + +#thirditem{ + background: yellow; +} +/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ + \ No newline at end of file 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/06-Practicing-Rules/styles.css b/.learn/resets/06-Practicing-Rules/styles.css new file mode 100644 index 00000000..d89b1a47 --- /dev/null +++ b/.learn/resets/06-Practicing-Rules/styles.css @@ -0,0 +1 @@ +/* add your styles 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/07-Very-Specific-Rules/styles.css b/.learn/resets/07-Very-Specific-Rules/styles.css new file mode 100644 index 00000000..defdb77a --- /dev/null +++ b/.learn/resets/07-Very-Specific-Rules/styles.css @@ -0,0 +1,15 @@ +/** Insert your code here **/ + +/*********** READ ONLY BLOCK ****** +You CAN NOT UPDATE anything from here on, +only add lines of code on top of this lines +**/ + +body { + color: blue; +} + +ul li, +ol li { + color: green; +} diff --git a/.learn/resets/08-Rounded-Image/index.html b/.learn/resets/08-Rounded-Image/index.html new file mode 100644 index 00000000..f8637953 --- /dev/null +++ b/.learn/resets/08-Rounded-Image/index.html @@ -0,0 +1,13 @@ + + + + + + + 08 Rounded Image + + + + + + diff --git a/.learn/resets/08-Rounded-Image/styles.css b/.learn/resets/08-Rounded-Image/styles.css new file mode 100644 index 00000000..62006948 --- /dev/null +++ b/.learn/resets/08-Rounded-Image/styles.css @@ -0,0 +1,6 @@ +body { + background: #bdbdbd; +} +.rounded { + border-radius: 100%; +} 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/.learn/resets/09-Anchor-Styles/styles.css b/.learn/resets/09-Anchor-Styles/styles.css new file mode 100644 index 00000000..7eaa9bea --- /dev/null +++ b/.learn/resets/09-Anchor-Styles/styles.css @@ -0,0 +1,16 @@ + +.threeDimension { + display: block; + border: 1px solid; + border-color: #aaa #000 #000 #aaa; + width: 8em; + background: #fc0; + text-decoration: none; + text-align: center; + color: black; +} + +a.threeDimension:active { + /* your code here*/ + +} \ No newline at end of file diff --git a/.learn/resets/10-Your-Own-Font/index.html b/.learn/resets/10-Your-Own-Font/index.html new file mode 100644 index 00000000..a0e7f25a --- /dev/null +++ b/.learn/resets/10-Your-Own-Font/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + 10 Your Own Font + + +

My unique font

+ + diff --git a/.learn/resets/10-Your-Own-Font/styles.css b/.learn/resets/10-Your-Own-Font/styles.css new file mode 100644 index 00000000..de7160fd --- /dev/null +++ b/.learn/resets/10-Your-Own-Font/styles.css @@ -0,0 +1,3 @@ +.myTitle { + /*your code here*/ +} diff --git a/.learn/resets/11-Font-Awesome-Icons/index.html b/.learn/resets/11-Font-Awesome-Icons/index.html new file mode 100644 index 00000000..a619ff63 --- /dev/null +++ b/.learn/resets/11-Font-Awesome-Icons/index.html @@ -0,0 +1,14 @@ + + + + + + + 11 Font Awesome + + + + + diff --git a/.learn/resets/11-Font-Awesome-Icons/styles.css b/.learn/resets/11-Font-Awesome-Icons/styles.css new file mode 100644 index 00000000..b22aedca --- /dev/null +++ b/.learn/resets/11-Font-Awesome-Icons/styles.css @@ -0,0 +1,3 @@ +li { + list-style: none; +} diff --git a/.learn/resets/12-Relative-Length-EM-REM/index.html b/.learn/resets/12-Relative-Length-EM-REM/index.html new file mode 100644 index 00000000..60a98594 --- /dev/null +++ b/.learn/resets/12-Relative-Length-EM-REM/index.html @@ -0,0 +1,21 @@ + + + + + + + 12 Relative Length EM REM + + +
+

First h2 heading

+

First h3 heading

+

Here is some nice fake content

+
+
+

Second h2 heading

+

Second h3 heading

+

More fake content but now in the second container

+
+ + diff --git a/.learn/resets/12-Relative-Length-EM-REM/styles.css b/.learn/resets/12-Relative-Length-EM-REM/styles.css new file mode 100644 index 00000000..bfba63b9 --- /dev/null +++ b/.learn/resets/12-Relative-Length-EM-REM/styles.css @@ -0,0 +1,8 @@ +#my-first-div { + font-size: 15px; +} +#the-second-one { + font-size: 25px; +} + +/* YOUR CODE BELOW THIS LINE */ diff --git a/.learn/resets/13-Anchor-Like-Button/index.html b/.learn/resets/13-Anchor-Like-Button/index.html new file mode 100644 index 00000000..aaaa7740 --- /dev/null +++ b/.learn/resets/13-Anchor-Like-Button/index.html @@ -0,0 +1,12 @@ + + + + + + + 13 Anchor Like Button + + + Beautiful Button + + diff --git a/.learn/resets/13-Anchor-Like-Button/styles.css b/.learn/resets/13-Anchor-Like-Button/styles.css new file mode 100644 index 00000000..93996cbd --- /dev/null +++ b/.learn/resets/13-Anchor-Like-Button/styles.css @@ -0,0 +1,7 @@ +.orange-btn { + /*your code here*/ +} + +.orange-btn:hover { + /*YOUR CODE HERE FOR THE HOVER STATE*/ +} diff --git a/bc.json b/bc.json index fc7f686a..61a922bb 100644 --- a/bc.json +++ b/bc.json @@ -1,5 +1,28 @@ { + "port": 3000, + "address": "https://e29c261c-84fc-4ace-ad40-7a70ececeac8.ws-us07.gitpod.io", + "editor": "gitpod", + "configPath": { + "config": "bc.json", + "base": ".learn", + "exercises": "./exercises", + "output": ".learn/dist" + }, + "outputPath": "./.learn/dist", + "publicPath": "/preview", + "grading": "isolated", + "ignoreRegex": {}, + "webpack_template": null, + "disable_grading": true, + "onCompilerSuccess": "open-browser", "language": "css", + "compiler": "webpack", + "tester": "jest", + "actions": [ + "build", + "test", + "reset" + ], "preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", "repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", "title": "Learn CSS Interactively", @@ -8,5 +31,239 @@ "duration": 8, "difficulty": "easy", "video-solutions": true, - "graded": true -} + "graded": true, + "session": 3161632857892380000, + "exercises": [ + { + "slug": "00-Welcome", + "title": "00-Welcome", + "done": false, + "path": "exercises/00-Welcome", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "01-Hello-World", + "title": "01-Hello-World", + "done": false, + "path": "exercises/01-Hello-World", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "01.1-The-Style-Tag", + "title": "01.1-The-Style-Tag", + "done": false, + "path": "exercises/01.1-The-Style-Tag", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "01.2-Your-First-Style", + "title": "01.2-Your-First-Style", + "done": false, + "path": "exercises/01.2-Your-First-Style", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "01.3-Your-Second-Style", + "title": "01.3-Your-Second-Style", + "done": false, + "path": "exercises/01.3-Your-Second-Style", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "02-Separate-Stylesheet", + "title": "02-Separate-Stylesheet", + "done": false, + "path": "exercises/02-Separate-Stylesheet", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "02.1-Background", + "title": "02.1-Background", + "done": false, + "path": "exercises/02.1-Background", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "03-Inline-Styles", + "title": "03-Inline-Styles", + "done": false, + "path": "exercises/03-Inline-Styles", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "04-Class-Selector", + "title": "04-Class-Selector", + "done": false, + "path": "exercises/04-Class-Selector", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "04.1-Combined-Rules", + "title": "04.1-Combined-Rules", + "done": false, + "path": "exercises/04.1-Combined-Rules", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "04.2-Apply-several-classes", + "title": "04.2-Apply-several-classes", + "done": false, + "path": "exercises/04.2-Apply-several-classes", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "04.3-id-Selector", + "title": "04.3-id-Selector", + "done": false, + "path": "exercises/04.3-id-Selector", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "05-Specificity", + "title": "05-Specificity", + "done": false, + "path": "exercises/05-Specificity", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "06-Practicing-Rules", + "title": "06-Practicing-Rules", + "done": false, + "path": "exercises/06-Practicing-Rules", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "07-Very-Specific-Rules", + "title": "07-Very-Specific-Rules", + "done": false, + "path": "exercises/07-Very-Specific-Rules", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "08-Rounded-Image", + "title": "08-Rounded-Image", + "done": false, + "path": "exercises/08-Rounded-Image", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "09-Anchor-Styles", + "title": "09-Anchor-Styles", + "done": false, + "path": "exercises/09-Anchor-Styles", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "10-Your-Own-Font", + "title": "10-Your-Own-Font", + "done": false, + "path": "exercises/10-Your-Own-Font", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "11-Font-Awesome-Icons", + "title": "11-Font-Awesome-Icons", + "done": false, + "path": "exercises/11-Font-Awesome-Icons", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "12-Relative-Length-EM-REM", + "title": "12-Relative-Length-EM-REM", + "done": false, + "path": "exercises/12-Relative-Length-EM-REM", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "13-Anchor-Like-Button", + "title": "13-Anchor-Like-Button", + "done": false, + "path": "exercises/13-Anchor-Like-Button", + "translations": [ + "es", + "us" + ], + "graded": true + } + ] +} \ No newline at end of file diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html index 03ae0584..b5f457f0 100644 --- a/exercises/01-Hello-World/index.html +++ b/exercises/01-Hello-World/index.html @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + Document + + + + 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..61e1056f 100644 --- a/exercises/01.1-The-Style-Tag/index.html +++ b/exercises/01.1-The-Style-Tag/index.html @@ -1,6 +1,20 @@ - -

- 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. -

+ + + + + + Document + + + +

+ 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/exercises/01.2-Your-First-Style/index.html b/exercises/01.2-Your-First-Style/index.html index 39661132..01409559 100644 --- a/exercises/01.2-Your-First-Style/index.html +++ b/exercises/01.2-Your-First-Style/index.html @@ -3,12 +3,11 @@ - Hello! I am an anchor in red, change my color to yellow + Hello! I am an anchor in yellow, change my color to yellow diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html index 998d973a..2b5cfeaf 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..eedeb9d0 100644 --- a/exercises/02-Separate-Stylesheet/styles.css +++ b/exercises/02-Separate-Stylesheet/styles.css @@ -1,4 +1,3 @@ -/* your styles here: - 1. Select the body tag. - 2. Add the background rule equal to blue. - */ +body { + background: 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..182eb8d5 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..2b1c9615 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/04-Class-Selector/index.html @@ -7,8 +7,8 @@ - -

Hello!

-

World!

+ +

Hello!

+

World!

diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css index 3c54a57d..1201a106 100644 --- a/exercises/04.1-Combined-Rules/styles.css +++ b/exercises/04.1-Combined-Rules/styles.css @@ -1,14 +1,20 @@ .myBox { + /*Esto es un comentario*/ width: 50px; height: 50px; - padding-top: 10px; + + /*padding-top: 10px; padding-left: 30px; padding-right: 190px; - padding-bottom: 50px; + padding-bottom: 50px;*/ + + padding: 10px 190px 30px 50px; - background: rgb(189, 189, 189); + /*background: rgb(189, 189, 189); background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg); background-position-x: 100px; - background-repeat: no-repeat; + background-repeat: no-repeat;*/ + + background: rgb(189, 189, 189) url(https://assets.breatheco.de/apis/img/funny/baby.jpg) 100px no-repeat; 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..7c820ec4 100644 --- a/exercises/04.2-Apply-several-classes/index.html +++ b/exercises/04.2-Apply-several-classes/index.html @@ -8,6 +8,6 @@ -
9
+
9
diff --git a/exercises/04.2-Apply-several-classes/styles.css b/exercises/04.2-Apply-several-classes/styles.css index efacee56..56df88eb 100644 --- a/exercises/04.2-Apply-several-classes/styles.css +++ b/exercises/04.2-Apply-several-classes/styles.css @@ -15,12 +15,12 @@ .spades, .spades:after { - content: "♤"; + content: "\2665"; color: black; } .heart, .heart:after { - content: "♡"; + content: "\2661"; color: red; } diff --git a/exercises/04.3-id-Selector/index.html b/exercises/04.3-id-Selector/index.html index 5b9a773d..a7964559 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/04.3-id-Selector/index.html @@ -8,6 +8,6 @@ - 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/index.html b/exercises/05-Specificity/index.html index 3d68946c..74ef3115 100644 --- a/exercises/05-Specificity/index.html +++ b/exercises/05-Specificity/index.html @@ -10,7 +10,10 @@ diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css index db471c2b..c4e96d25 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,8 @@ -ul li{ +ul li { background: blue; } -#thirditem{ +#thirditem { background: yellow; -} +} /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index 4119acb5..66337745 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -8,7 +8,7 @@ -

The learning essay

+

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. @@ -31,4 +31,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..23952afb 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1,28 @@ -/* add your styles here */ \ No newline at end of file +body { + background-image: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true); + background-size: contain; + background-repeat: inherit; + font-family: Times New Roman; + + padding-left: 20px; +} + +h1 { + font-family: Courier; + color: red; + text-aling: center; +} + +h2 { + text-decoration: underline; +} + +#id1 { + background-color: white; + padding: 5px 5px 5px 5px; + opacity: 0.2; +} +a { + 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..b2a5fa03 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..4cf431a0 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,3 +1,10 @@ +ul li { + color: red; +} +tr:nth-child(odd) { + background-color: yellow; +} + /** Insert your code here **/ /*********** READ ONLY BLOCK ****** @@ -6,10 +13,9 @@ only add lines of code on top of this lines **/ body { - color: blue; + color: yellow; } -ul li, ol li { color: green; } diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index f15c8f37..98d140a0 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -8,9 +8,8 @@ La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de ## 📝 Instrucciones: -1. En lugar de hacerlo, el enfoque correcto será crear un div cuadrado (es decir: con igual ancho y alto), asignar la imagen como fondo y luego aplicar un borde-radius a ese div. +Adicionalmente a border-radius tenemos que tambien utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). -2. Si la imagen termina siendo más grande que el div (o con diferentes proporciones), podemos ajustar -el background-position o background-size para elegir - qué parte de la imagen queremos mostrar dentro del círculo. +Si la es mas grande que el div y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`. +En este articulo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/) diff --git a/exercises/08-Rounded-Image/index.html b/exercises/08-Rounded-Image/index.html index f8637953..33ba0c75 100644 --- a/exercises/08-Rounded-Image/index.html +++ b/exercises/08-Rounded-Image/index.html @@ -8,6 +8,9 @@ - +
+
+
+ diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..319474b3 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -1,6 +1,18 @@ body { - background: #bdbdbd; + background: #000000; } .rounded { border-radius: 100%; } + +.Cuadrado { + background-color: #bdbdbd; + + position: absolute; + height: 350px; + width: 400px; + left: 50%; + top: 50%; + margin-top: -100px; + margin-left: -150px; +} diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 7eaa9bea..735cdb73 100644 --- a/exercises/09-Anchor-Styles/styles.css +++ b/exercises/09-Anchor-Styles/styles.css @@ -11,6 +11,7 @@ } a.threeDimension:active { - /* your code here*/ + /* your code here*/ + border-COLOR:#000 #000 #000 #000; } \ No newline at end of file diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html index a0e7f25a..947c545e 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -1,15 +1,15 @@ - - - - + + + + - - - 10 Your Own Font - - -

My unique font

- + + + 10 Your Own Font + + +

My unique font

+ diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/10-Your-Own-Font/styles.css index de7160fd..4badd80c 100644 --- a/exercises/10-Your-Own-Font/styles.css +++ b/exercises/10-Your-Own-Font/styles.css @@ -1,3 +1,4 @@ .myTitle { - /*your code here*/ + /*your code here*/ + font-family: POTTAONE; } diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index a619ff63..6afe417e 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/11-Font-Awesome-Icons/index.html @@ -1,14 +1,21 @@ - - - - - 11 Font Awesome - - - - + + + + + + + 11 Font Awesome + + + + diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css index bfba63b9..c22b8990 100644 --- a/exercises/12-Relative-Length-EM-REM/styles.css +++ b/exercises/12-Relative-Length-EM-REM/styles.css @@ -4,5 +4,11 @@ #the-second-one { font-size: 25px; } +h2 { + font-size: 0.8; +} +h3 { + font-size: 0.8; +} /* YOUR CODE BELOW THIS LINE */ diff --git a/exercises/13-Anchor-Like-Button/index.html b/exercises/13-Anchor-Like-Button/index.html index aaaa7740..3a93b618 100644 --- a/exercises/13-Anchor-Like-Button/index.html +++ b/exercises/13-Anchor-Like-Button/index.html @@ -7,6 +7,6 @@ 13 Anchor Like Button - Beautiful Button + Beautiful Button diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index 93996cbd..526c7c3a 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,7 +1,20 @@ .orange-btn { /*your code here*/ + padding-bottom: 10px; + border-radius: 4px; + + display: block; + + border-color: #aaa #000 #000 #aaa; + width: 8em; + background: #fc0; + text-decoration: none; + text-align: center; + color: white; + } .orange-btn:hover { /*YOUR CODE HERE FOR THE HOVER STATE*/ + background: #000; }
Hello