diff --git a/exercises/01-inline-styles/index.html b/exercises/01-inline-styles/index.html index 75056c8..52a2b27 100644 --- a/exercises/01-inline-styles/index.html +++ b/exercises/01-inline-styles/index.html @@ -5,7 +5,7 @@ - +
diff --git a/exercises/02-style-tag/index.html b/exercises/02-style-tag/index.html index d88e76d..c896899 100644 --- a/exercises/02-style-tag/index.html +++ b/exercises/02-style-tag/index.html @@ -1 +1,7 @@ + +Click me to open google.com diff --git a/exercises/02.1-add-a-style-tag/index.html b/exercises/02.1-add-a-style-tag/index.html index dbdd26d..fde1188 100644 --- a/exercises/02.1-add-a-style-tag/index.html +++ b/exercises/02.1-add-a-style-tag/index.html @@ -1,4 +1,9 @@ +

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 to code at a young age prepares them for the future. Coding helps children with communication, creativity, diff --git a/exercises/02.2-rbga-colors/index.html b/exercises/02.2-rbga-colors/index.html index 3966113..a2a88d0 100644 --- a/exercises/02.2-rbga-colors/index.html +++ b/exercises/02.2-rbga-colors/index.html @@ -4,7 +4,7 @@ diff --git a/exercises/02.3-your-second-style/index.html b/exercises/02.3-your-second-style/index.html index 998d973..03e672a 100644 --- a/exercises/02.3-your-second-style/index.html +++ b/exercises/02.3-your-second-style/index.html @@ -3,6 +3,9 @@ diff --git a/exercises/03-separate-stylesheet/styles.css b/exercises/03-separate-stylesheet/styles.css index fb551ff..3ac5621 100644 --- a/exercises/03-separate-stylesheet/styles.css +++ b/exercises/03-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/03.1-background/styles.css b/exercises/03.1-background/styles.css index afdf956..a2c6b30 100644 --- a/exercises/03.1-background/styles.css +++ b/exercises/03.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: repeat; } diff --git a/exercises/04-list-styling/index.html b/exercises/04-list-styling/index.html index 2eb502e..7b663ff 100644 --- a/exercises/04-list-styling/index.html +++ b/exercises/04-list-styling/index.html @@ -40,4 +40,4 @@

Web-developer drinks

- \ No newline at end of file + diff --git a/exercises/04-list-styling/styles.css b/exercises/04-list-styling/styles.css index 124c517..a4ca162 100644 --- a/exercises/04-list-styling/styles.css +++ b/exercises/04-list-styling/styles.css @@ -11,4 +11,10 @@ body { background-color: white; padding: 120px; width: 300px; -} \ No newline at end of file +} + +ul { + list-style-type: circle; + margin: 0; + padding: 0; +} diff --git a/exercises/05-class-selector/index.html b/exercises/05-class-selector/index.html index 0366272..b922358 100644 --- a/exercises/05-class-selector/index.html +++ b/exercises/05-class-selector/index.html @@ -6,7 +6,7 @@ -

Hello!

-

World!

+

Hello!

+

World!

diff --git a/exercises/05.1-combined-rules/styles.css b/exercises/05.1-combined-rules/styles.css index 6313a1b..44514e4 100644 --- a/exercises/05.1-combined-rules/styles.css +++ b/exercises/05.1-combined-rules/styles.css @@ -1,14 +1,16 @@ .myBox { width: 50px; height: 50px; + + padding: 10px 190px 50px 30px; + + /* Al definir las proporciones en una misma regla "padding" + se nombran en el siguiente orden: top, rigth,bottom, left padding-top: 10px; padding-left: 30px; padding-right: 190px; - padding-bottom: 50px; + padding-bottom: 50px; */ + + background: 100px / contain rgb(189, 189, 189) url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true) no-repeat; - 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-size: contain; } diff --git a/exercises/05.2-apply-several-classes/index.html b/exercises/05.2-apply-several-classes/index.html index 3a29381..95de441 100644 --- a/exercises/05.2-apply-several-classes/index.html +++ b/exercises/05.2-apply-several-classes/index.html @@ -6,6 +6,6 @@ -
9
+
9
diff --git a/exercises/05.3-id-selector/index.html b/exercises/05.3-id-selector/index.html index 0acb4a2..05c6515 100644 --- a/exercises/05.3-id-selector/index.html +++ b/exercises/05.3-id-selector/index.html @@ -2,12 +2,10 @@ - - 05.3 ID selector - + 05.3 ID selector - I should look like a button + I should look like a button diff --git a/exercises/05.3-id-selector/solution.hide.html b/exercises/05.3-id-selector/solution.hide.html index 2e7928b..05c6515 100644 --- a/exercises/05.3-id-selector/solution.hide.html +++ b/exercises/05.3-id-selector/solution.hide.html @@ -2,9 +2,7 @@ - - 05.3 ID selector - + 05.3 ID selector diff --git a/exercises/06-specificity/styles.css b/exercises/06-specificity/styles.css index 1255fbb..fabc575 100644 --- a/exercises/06-specificity/styles.css +++ b/exercises/06-specificity/styles.css @@ -6,3 +6,7 @@ li + #thirditem { background: yellow; } /**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/ + +#thirditem { + background: green !important; +} diff --git a/exercises/07-practicing-rules/styles.css b/exercises/07-practicing-rules/styles.css index 9a7fae8..85bd3ba 100644 --- a/exercises/07-practicing-rules/styles.css +++ b/exercises/07-practicing-rules/styles.css @@ -1 +1,27 @@ /* add your styles here */ +body { + background-image: url("../../.learn/assets/background-vertical.jpg?raw=true"); + background-repeat: repeat-y; + font-family: "Times New Roman"; + padding-left: 20px; +} + +h1 { + font-family: "Courier"; + color: red; +} + +h2 { + text-decoration: underline; +} + +#id1 { + background-color: rgba(255, 255, 255, 0.5); + padding: 5px; +} + +a:hover { + color: green; + text-decoration: none; +} + diff --git a/exercises/08-very-specific-rules/styles.css b/exercises/08-very-specific-rules/styles.css index 164b694..194beba 100644 --- a/exercises/08-very-specific-rules/styles.css +++ b/exercises/08-very-specific-rules/styles.css @@ -1,4 +1,14 @@ /** Insert your code here **/ +ul li { + color: red !important; +} +ol li:nth-child(2) { + background-color: green; +} + +table tr:nth-child(odd) { + background-color: yellow; +} /********** READ-ONLY BLOCK ****** You CANNOT UPDATE anything from here on, diff --git a/exercises/09-rounded-image/styles.css b/exercises/09-rounded-image/styles.css index 6200694..3a3b849 100644 --- a/exercises/09-rounded-image/styles.css +++ b/exercises/09-rounded-image/styles.css @@ -3,4 +3,11 @@ body { } .rounded { border-radius: 100%; + width: 100px; + height: 100px; +} + +img { + object-fit: cover; + object-position: top; }
Hello