From a513f5cd34ae6479692f5be7d0f91c6245e9ed61 Mon Sep 17 00:00:00 2001 From: Renzo988238 <162946191+Renzo988238@users.noreply.github.com> Date: Fri, 22 Mar 2024 16:35:38 +0000 Subject: [PATCH] CSS ejericicos --- .learn/resets/01-Style-tag/index.html | 1 + .learn/resets/01.1-Add-a-style-tag/index.html | 6 ++ .learn/resets/01.2-RGBA-colors/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/04-Class-Selector/index.html | 12 +++ .learn/resets/04.1-Combined-Rules/index.html | 11 +++ .../04.2-Apply-several-classes/index.html | 11 +++ .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 +++ .learn/resets/10-Your-Own-Font/index.html | 14 ++++ .../resets/11-Font-Awesome-Icons/index.html | 15 ++++ .../12-Relative-Length-EM-REM/index.html | 22 +++++ .../resets/13-Anchor-Like-Button/index.html | 12 +++ exercises/00.1-Inline-Styles/index.html | 11 ++- .../00.1-Inline-Styles/solution.hide.html | 2 +- exercises/01-Style-tag/index.html | 6 ++ exercises/01.1-Add-a-style-tag/index.html | 11 ++- .../01.1-Add-a-style-tag/solution.hide.html | 4 +- exercises/01.2-RGBA-colors/index.html | 3 +- exercises/01.3-Your-Second-Style/index.html | 3 + exercises/02-Separate-Stylesheet/styles.css | 7 +- exercises/02.1-Background/styles.css | 4 +- exercises/03-list-styling/index.html | 2 +- exercises/03-list-styling/styles.css | 11 ++- exercises/04-Class-Selector/index.html | 4 +- exercises/04.1-Combined-Rules/styles.css | 13 +-- .../04.2-Apply-several-classes/index.html | 2 +- exercises/04.3-id-Selector/index.html | 6 +- exercises/04.3-id-Selector/solution.hide.html | 4 +- exercises/05-Specificity/styles.css | 4 + exercises/06-Practicing-Rules/styles.css | 24 ++++++ exercises/07-Very-Specific-Rules/styles.css | 14 +++- exercises/08-Rounded-Image/styles.css | 4 + exercises/09-Anchor-Styles/styles.css | 3 +- exercises/10-Your-Own-Font/index.html | 7 +- exercises/11-Font-Awesome-Icons/index.html | 2 + .../12-Relative-Length-EM-REM/index.html | 2 +- .../solution.hide.css | 6 +- .../12-Relative-Length-EM-REM/styles.css | 7 ++ exercises/13-Anchor-Like-Button/styles.css | 3 +- 45 files changed, 431 insertions(+), 46 deletions(-) create mode 100644 .learn/resets/01-Style-tag/index.html create mode 100644 .learn/resets/01.1-Add-a-style-tag/index.html create mode 100644 .learn/resets/01.2-RGBA-colors/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/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/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 create mode 100644 .learn/resets/10-Your-Own-Font/index.html create mode 100644 .learn/resets/11-Font-Awesome-Icons/index.html create mode 100644 .learn/resets/12-Relative-Length-EM-REM/index.html create mode 100644 .learn/resets/13-Anchor-Like-Button/index.html diff --git a/.learn/resets/01-Style-tag/index.html b/.learn/resets/01-Style-tag/index.html new file mode 100644 index 00000000..93d4ce1c --- /dev/null +++ b/.learn/resets/01-Style-tag/index.html @@ -0,0 +1 @@ + diff --git a/.learn/resets/01.1-Add-a-style-tag/index.html b/.learn/resets/01.1-Add-a-style-tag/index.html new file mode 100644 index 00000000..1c51e8e0 --- /dev/null +++ b/.learn/resets/01.1-Add-a-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-RGBA-colors/index.html b/.learn/resets/01.2-RGBA-colors/index.html new file mode 100644 index 00000000..39661132 --- /dev/null +++ b/.learn/resets/01.2-RGBA-colors/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..cf841f1e --- /dev/null +++ b/.learn/resets/02.1-Background/index.html @@ -0,0 +1,10 @@ + + + + + 02 Background + + + My background should be an image with the size "contain" + + diff --git a/.learn/resets/04-Class-Selector/index.html b/.learn/resets/04-Class-Selector/index.html new file mode 100644 index 00000000..45709afb --- /dev/null +++ b/.learn/resets/04-Class-Selector/index.html @@ -0,0 +1,12 @@ + + + + + 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..1525b6cf --- /dev/null +++ b/.learn/resets/04.1-Combined-Rules/index.html @@ -0,0 +1,11 @@ + + + + + 04.1 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..3a293815 --- /dev/null +++ b/.learn/resets/04.2-Apply-several-classes/index.html @@ -0,0 +1,11 @@ + + + + + 04.2 Apply several classes + + + +
9
+ + diff --git a/.learn/resets/05-Specificity/index.html b/.learn/resets/05-Specificity/index.html new file mode 100644 index 00000000..154a071a --- /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..8c0b2b50 --- /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 paragraph the 3 most common signs that you should look into yourself to recognize if you are learning. +

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

3 reasons you love what you are learning

+ +

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

+
+ + 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..09fef243 --- /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 paragraph the 3 most common signs that you should look into yourself to recognize if you are learning. +

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

3 reasons you know love what you are learning

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AgeGender
12Male
22Female
11Male
21Male
22Female
10Male
13Female
13Male
10Male
11Male
11Male
+ + 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..30e00691 --- /dev/null +++ b/.learn/resets/09-Anchor-Styles/index.html @@ -0,0 +1,13 @@ + + + + + + + 09 Anchor Styles + + + + Click me + + 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..b4005187 --- /dev/null +++ b/.learn/resets/10-Your-Own-Font/index.html @@ -0,0 +1,14 @@ + + + + + + + + + 10 Your Own Font + + +

My unique font

+ + 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..1401d5da --- /dev/null +++ b/.learn/resets/11-Font-Awesome-Icons/index.html @@ -0,0 +1,15 @@ + + + + + + + + 11 Font Awesome + + + + + 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..f4d745fd --- /dev/null +++ b/.learn/resets/12-Relative-Length-EM-REM/index.html @@ -0,0 +1,22 @@ + + + + + + + 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/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/exercises/00.1-Inline-Styles/index.html b/exercises/00.1-Inline-Styles/index.html index fff0fe4b..0db80845 100644 --- a/exercises/00.1-Inline-Styles/index.html +++ b/exercises/00.1-Inline-Styles/index.html @@ -1 +1,10 @@ - + + + + 03 Inline Styles + + + +

"¡¡¡HOLA MUNDO!!!".

+ + diff --git a/exercises/00.1-Inline-Styles/solution.hide.html b/exercises/00.1-Inline-Styles/solution.hide.html index 2a6bc7d9..903a7833 100644 --- a/exercises/00.1-Inline-Styles/solution.hide.html +++ b/exercises/00.1-Inline-Styles/solution.hide.html @@ -5,6 +5,6 @@ -

HELLO WORLD!!!

+

HELLO WORLD!!!

diff --git a/exercises/01-Style-tag/index.html b/exercises/01-Style-tag/index.html index 93d4ce1c..4433221d 100644 --- a/exercises/01-Style-tag/index.html +++ b/exercises/01-Style-tag/index.html @@ -1 +1,7 @@ + + Click me to open google.com diff --git a/exercises/01.1-Add-a-style-tag/index.html b/exercises/01.1-Add-a-style-tag/index.html index 1c51e8e0..290c8893 100644 --- a/exercises/01.1-Add-a-style-tag/index.html +++ b/exercises/01.1-Add-a-style-tag/index.html @@ -1,6 +1,11 @@ - + +

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. + 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.1-Add-a-style-tag/solution.hide.html b/exercises/01.1-Add-a-style-tag/solution.hide.html index 85bac8dd..e5725942 100644 --- a/exercises/01.1-Add-a-style-tag/solution.hide.html +++ b/exercises/01.1-Add-a-style-tag/solution.hide.html @@ -7,6 +7,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. + 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-RGBA-colors/index.html b/exercises/01.2-RGBA-colors/index.html index 39661132..0c344403 100644 --- a/exercises/01.2-RGBA-colors/index.html +++ b/exercises/01.2-RGBA-colors/index.html @@ -3,8 +3,7 @@ diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html index 998d973a..9b239409 100644 --- a/exercises/01.3-Your-Second-Style/index.html +++ b/exercises/01.3-Your-Second-Style/index.html @@ -3,6 +3,9 @@ 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..a2c6b305 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: repeat; } diff --git a/exercises/03-list-styling/index.html b/exercises/03-list-styling/index.html index f2da1ba2..0af7b4c5 100644 --- a/exercises/03-list-styling/index.html +++ b/exercises/03-list-styling/index.html @@ -40,4 +40,4 @@

Web-developer drinks

- \ No newline at end of file + diff --git a/exercises/03-list-styling/styles.css b/exercises/03-list-styling/styles.css index 124c5174..5465ff08 100644 --- a/exercises/03-list-styling/styles.css +++ b/exercises/03-list-styling/styles.css @@ -11,4 +11,13 @@ body { background-color: white; padding: 120px; width: 300px; -} \ No newline at end of file +} + +.dev-drinks { + list-style-type: none; + padding-left: 0; +} + +.dev-drinks li { + margin-bottom: 10px; +} diff --git a/exercises/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html index 45709afb..60e1d67f 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/04-Class-Selector/index.html @@ -6,7 +6,7 @@ -

Hello!

-

World!

+

Hello!

+

World!

diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css index 6313a1bc..fb1bc3ee 100644 --- a/exercises/04.1-Combined-Rules/styles.css +++ b/exercises/04.1-Combined-Rules/styles.css @@ -1,14 +1,9 @@ .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-size: contain; + 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 / contain; } diff --git a/exercises/04.2-Apply-several-classes/index.html b/exercises/04.2-Apply-several-classes/index.html index 3a293815..95de441b 100644 --- a/exercises/04.2-Apply-several-classes/index.html +++ b/exercises/04.2-Apply-several-classes/index.html @@ -6,6 +6,6 @@ -
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/solution.hide.html b/exercises/04.3-id-Selector/solution.hide.html index a7964559..c98c7cc3 100644 --- a/exercises/04.3-id-Selector/solution.hide.html +++ b/exercises/04.3-id-Selector/solution.hide.html @@ -2,9 +2,7 @@ - - 04.3 ID selector - + 04.3 ID selector diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css index 1255fbbc..fabc5750 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-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/06-Practicing-Rules/styles.css b/exercises/06-Practicing-Rules/styles.css index 9a7fae86..4026152e 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1,25 @@ /* add your styles here */ +body { + background: url("../../.learn/assets/background-vertical.jpg?raw=true") repeat-y; + font-family: "Times New Roman"; + padding-left: 20px; +} + +#id1 { + background: rgba(255, 255, 255, 0.2); + padding: 5px; +} + +h1 { + font-family: "Courier"; + color: red; +} + +h2 { + text-decoration: underline; +} + +a:hover { + color: green; + text-decoration: none; +} diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 164b694b..232aa480 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,6 +1,18 @@ /** Insert your code here **/ -/********** READ-ONLY BLOCK ****** +ul li { + color: red !important; +} + +ol li:nth-child(2) { + background-color: green; +} + +tr:nth-child(odd) { + background: yellow; +} + +/*********** READ-ONLY BLOCK ****** You CANNOT UPDATE anything from here on, only add lines of code on top of these lines **/ diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..86a38c22 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -2,5 +2,9 @@ body { background: #bdbdbd; } .rounded { + object-fit: cover; + object-position: top; + width: 250px; + height: 250px; border-radius: 100%; } diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 895dc3d6..8c12ea5b 100644 --- a/exercises/09-Anchor-Styles/styles.css +++ b/exercises/09-Anchor-Styles/styles.css @@ -1,4 +1,3 @@ - .threeDimension { display: block; border: 1px solid; @@ -13,5 +12,5 @@ a.threeDimension:active { /* your code here*/ - + border-color: #000 #aaa #aaa #000; } diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html index b4005187..f07e3b38 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -3,9 +3,14 @@ - + + + 10 Your Own Font diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index 1401d5da..431e6b22 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/11-Font-Awesome-Icons/index.html @@ -10,6 +10,8 @@ diff --git a/exercises/12-Relative-Length-EM-REM/index.html b/exercises/12-Relative-Length-EM-REM/index.html index f4d745fd..dd84e5cb 100644 --- a/exercises/12-Relative-Length-EM-REM/index.html +++ b/exercises/12-Relative-Length-EM-REM/index.html @@ -12,7 +12,7 @@

First h2 heading

First h3 heading

Here is some nice fake content

- +

Second h2 heading

Second h3 heading

diff --git a/exercises/12-Relative-Length-EM-REM/solution.hide.css b/exercises/12-Relative-Length-EM-REM/solution.hide.css index eeb04334..c524cf3e 100644 --- a/exercises/12-Relative-Length-EM-REM/solution.hide.css +++ b/exercises/12-Relative-Length-EM-REM/solution.hide.css @@ -6,10 +6,10 @@ } /* YOUR CODE BELOW THIS LINE */ -h2{ +h2 { font-size: 0.8em; } -h3{ +h3 { font-size: 0.8rem; -} \ No newline at end of file +} diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css index bfba63b9..c524cf3e 100644 --- a/exercises/12-Relative-Length-EM-REM/styles.css +++ b/exercises/12-Relative-Length-EM-REM/styles.css @@ -6,3 +6,10 @@ } /* YOUR CODE BELOW THIS LINE */ +h2 { + font-size: 0.8em; +} + +h3 { + font-size: 0.8rem; +} diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index 76fd5b9c..5d117169 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,10 +1,9 @@ .orange-btn { display: inline-block; /* your code below */ - } .orange-btn:hover { /* YOUR CODE HERE FOR THE HOVER STATE */ - + background: darkorange; }