From 90ac47ba53bfda32ead3b52ca2ce86f4ea41e4e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20L=C3=A1zaro=20N=C3=BA=C3=B1ez?= <59710168+Lazaroth93@users.noreply.github.com> Date: Fri, 17 Jan 2025 20:08:23 +0000 Subject: [PATCH] Resolved exercises 1 to 9 --- exercises/01-inline-styles/index.html | 2 +- exercises/02-style-tag/index.html | 6 +++++ exercises/02.1-add-a-style-tag/index.html | 5 ++++ exercises/02.2-rbga-colors/index.html | 2 +- exercises/02.3-your-second-style/index.html | 3 +++ exercises/03-separate-stylesheet/styles.css | 3 +++ exercises/03.1-background/styles.css | 4 +-- exercises/04-list-styling/index.html | 2 +- exercises/04-list-styling/styles.css | 8 +++++- exercises/05-class-selector/index.html | 4 +-- exercises/05.1-combined-rules/styles.css | 14 +++++----- .../05.2-apply-several-classes/index.html | 2 +- exercises/05.3-id-selector/index.html | 6 ++--- exercises/05.3-id-selector/solution.hide.html | 4 +-- exercises/06-specificity/styles.css | 4 +++ exercises/07-practicing-rules/styles.css | 26 +++++++++++++++++++ exercises/08-very-specific-rules/styles.css | 10 +++++++ exercises/09-rounded-image/styles.css | 7 +++++ 18 files changed, 90 insertions(+), 22 deletions(-) diff --git a/exercises/01-inline-styles/index.html b/exercises/01-inline-styles/index.html index 75056c8e..52a2b271 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 d88e76dd..c8968991 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 dbdd26d8..fde1188d 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 39661132..a2a88d04 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 998d973a..03e672a3 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 fb551ff2..3ac56212 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 afdf956f..a2c6b305 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 2eb502ea..7b663ff9 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 124c5174..a4ca162c 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 03662721..b9223582 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 6313a1bc..44514e42 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 3a293815..95de441b 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 0acb4a27..05c65159 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 2e7928b7..05c65159 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 1255fbbc..fabc5750 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 9a7fae86..85bd3bad 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 164b694b..194beba4 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 62006948..3a3b849c 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