From 30da847a9ab410fa63628833ea5d7b531e9cd7db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Antonio=20Llorens=20Padilla?= <131461633+JoseAnt7@users.noreply.github.com> Date: Fri, 5 Jul 2024 08:59:06 +0000 Subject: [PATCH 1/3] Primeros ejercicios de CSS --- .learn/resets/01-inline-styles/index.html | 17 ++++++++ .learn/resets/02-style-tag/index.html | 1 + .learn/resets/02.1-add-a-style-tag/index.html | 6 +++ .learn/resets/02.2-rbga-colors/index.html | 14 ++++++ .../resets/02.3-your-second-style/index.html | 11 +++++ .../resets/03-separate-stylesheet/index.html | 9 ++++ .../resets/03-separate-stylesheet/styles.css | 4 ++ .learn/resets/03.1-background/index.html | 10 +++++ .learn/resets/03.1-background/styles.css | 5 +++ .learn/resets/04-list-styling/index.html | 43 +++++++++++++++++++ .learn/resets/04-list-styling/styles.css | 14 ++++++ .learn/resets/05-class-selector/index.html | 12 ++++++ .learn/resets/05-class-selector/styles.css | 3 ++ .learn/resets/05.1-combined-rules/index.html | 11 +++++ .learn/resets/05.1-combined-rules/styles.css | 14 ++++++ .../05.2-apply-several-classes/index.html | 11 +++++ .../05.2-apply-several-classes/styles.css | 25 +++++++++++ .learn/resets/05.3-id-selector/index.html | 13 ++++++ .learn/resets/05.3-id-selector/styles.css | 8 ++++ exercises/01-inline-styles/index.html | 2 +- exercises/02-style-tag/index.html | 7 ++- 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 | 4 +- exercises/03-separate-stylesheet/styles.css | 7 ++- exercises/03.1-background/styles.css | 4 +- exercises/04-list-styling/index.html | 2 +- exercises/04-list-styling/styles.css | 16 ++++++- exercises/05-class-selector/index.html | 4 +- exercises/05.1-combined-rules/styles.css | 8 ++++ .../05.2-apply-several-classes/index.html | 2 +- 31 files changed, 279 insertions(+), 15 deletions(-) create mode 100644 .learn/resets/01-inline-styles/index.html create mode 100644 .learn/resets/02-style-tag/index.html create mode 100644 .learn/resets/02.1-add-a-style-tag/index.html create mode 100644 .learn/resets/02.2-rbga-colors/index.html create mode 100644 .learn/resets/02.3-your-second-style/index.html create mode 100644 .learn/resets/03-separate-stylesheet/index.html create mode 100644 .learn/resets/03-separate-stylesheet/styles.css create mode 100644 .learn/resets/03.1-background/index.html create mode 100644 .learn/resets/03.1-background/styles.css create mode 100644 .learn/resets/04-list-styling/index.html create mode 100644 .learn/resets/04-list-styling/styles.css create mode 100644 .learn/resets/05-class-selector/index.html create mode 100644 .learn/resets/05-class-selector/styles.css create mode 100644 .learn/resets/05.1-combined-rules/index.html create mode 100644 .learn/resets/05.1-combined-rules/styles.css create mode 100644 .learn/resets/05.2-apply-several-classes/index.html create mode 100644 .learn/resets/05.2-apply-several-classes/styles.css create mode 100644 .learn/resets/05.3-id-selector/index.html create mode 100644 .learn/resets/05.3-id-selector/styles.css diff --git a/.learn/resets/01-inline-styles/index.html b/.learn/resets/01-inline-styles/index.html new file mode 100644 index 00000000..75056c8e --- /dev/null +++ b/.learn/resets/01-inline-styles/index.html @@ -0,0 +1,17 @@ + + + + 01 Inline Styles + + + + + + + + + + +
Hello
My brother
+ + diff --git a/.learn/resets/02-style-tag/index.html b/.learn/resets/02-style-tag/index.html new file mode 100644 index 00000000..d88e76dd --- /dev/null +++ b/.learn/resets/02-style-tag/index.html @@ -0,0 +1 @@ + diff --git a/.learn/resets/02.1-add-a-style-tag/index.html b/.learn/resets/02.1-add-a-style-tag/index.html new file mode 100644 index 00000000..dbdd26d8 --- /dev/null +++ b/.learn/resets/02.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 to code at a young age prepares them for the future. Coding helps children with communication, creativity, + math, writing, and confidence. +

diff --git a/.learn/resets/02.2-rbga-colors/index.html b/.learn/resets/02.2-rbga-colors/index.html new file mode 100644 index 00000000..39661132 --- /dev/null +++ b/.learn/resets/02.2-rbga-colors/index.html @@ -0,0 +1,14 @@ + + + + + + + Hello! I am an anchor in red, change my color to yellow + + diff --git a/.learn/resets/02.3-your-second-style/index.html b/.learn/resets/02.3-your-second-style/index.html new file mode 100644 index 00000000..998d973a --- /dev/null +++ b/.learn/resets/02.3-your-second-style/index.html @@ -0,0 +1,11 @@ + + + + + + + Hello! My background should be blue! + + diff --git a/.learn/resets/03-separate-stylesheet/index.html b/.learn/resets/03-separate-stylesheet/index.html new file mode 100644 index 00000000..a7be7a61 --- /dev/null +++ b/.learn/resets/03-separate-stylesheet/index.html @@ -0,0 +1,9 @@ + + + + + + + My background should be blue. + + diff --git a/.learn/resets/03-separate-stylesheet/styles.css b/.learn/resets/03-separate-stylesheet/styles.css new file mode 100644 index 00000000..fb551ff2 --- /dev/null +++ b/.learn/resets/03-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/03.1-background/index.html b/.learn/resets/03.1-background/index.html new file mode 100644 index 00000000..a1227330 --- /dev/null +++ b/.learn/resets/03.1-background/index.html @@ -0,0 +1,10 @@ + + + + + 03.1 Background + + + My background should be an image with the size "contain" + + diff --git a/.learn/resets/03.1-background/styles.css b/.learn/resets/03.1-background/styles.css new file mode 100644 index 00000000..afdf956f --- /dev/null +++ b/.learn/resets/03.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/04-list-styling/index.html b/.learn/resets/04-list-styling/index.html new file mode 100644 index 00000000..2eb502ea --- /dev/null +++ b/.learn/resets/04-list-styling/index.html @@ -0,0 +1,43 @@ + + + + + + + + 04 List styling + + + +
+

Your favorite drinks

+

Coca Cola drinks

+
    +
  1. Coca Cola
    2. +
  2. Dr. Pepper
    3. +
  3. Fanta
    4. +
+ +

Pepsi drinks

+
    +
  1. Pepsi Cola
    2. +
  2. Mountain Dew
    3. +
  3. Gatorade
    4. +
+ +

Healthy drinks

+ + +

Web-developer drinks

+ +
+ + \ No newline at end of file diff --git a/.learn/resets/04-list-styling/styles.css b/.learn/resets/04-list-styling/styles.css new file mode 100644 index 00000000..124c5174 --- /dev/null +++ b/.learn/resets/04-list-styling/styles.css @@ -0,0 +1,14 @@ +body { + height: 100vh; + background: rgb(189, 189, 189); +} + +.container { + font-family: "Comic Sans MS", "Comic Sans", cursive; + margin: 0 auto; + width: 70vw; + box-shadow: 3px 5px 20px #312f2f; + background-color: white; + padding: 120px; + width: 300px; +} \ No newline at end of file diff --git a/.learn/resets/05-class-selector/index.html b/.learn/resets/05-class-selector/index.html new file mode 100644 index 00000000..03662721 --- /dev/null +++ b/.learn/resets/05-class-selector/index.html @@ -0,0 +1,12 @@ + + + + + 05 Class selector + + + +

Hello!

+

World!

+ + diff --git a/.learn/resets/05-class-selector/styles.css b/.learn/resets/05-class-selector/styles.css new file mode 100644 index 00000000..ffec43c5 --- /dev/null +++ b/.learn/resets/05-class-selector/styles.css @@ -0,0 +1,3 @@ +.b-blue { + background: blue; +} diff --git a/.learn/resets/05.1-combined-rules/index.html b/.learn/resets/05.1-combined-rules/index.html new file mode 100644 index 00000000..bca34a30 --- /dev/null +++ b/.learn/resets/05.1-combined-rules/index.html @@ -0,0 +1,11 @@ + + + + + 05.1 Combined Rules + + + +
Hello!
+ + diff --git a/.learn/resets/05.1-combined-rules/styles.css b/.learn/resets/05.1-combined-rules/styles.css new file mode 100644 index 00000000..6313a1bc --- /dev/null +++ b/.learn/resets/05.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://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/.learn/resets/05.2-apply-several-classes/index.html b/.learn/resets/05.2-apply-several-classes/index.html new file mode 100644 index 00000000..3a293815 --- /dev/null +++ b/.learn/resets/05.2-apply-several-classes/index.html @@ -0,0 +1,11 @@ + + + + + 04.2 Apply several classes + + + +
9
+ + diff --git a/.learn/resets/05.2-apply-several-classes/styles.css b/.learn/resets/05.2-apply-several-classes/styles.css new file mode 100644 index 00000000..9995d367 --- /dev/null +++ b/.learn/resets/05.2-apply-several-classes/styles.css @@ -0,0 +1,25 @@ +.card { + width: 150px; + height: 240px; + border: 1px solid black; + text-align: center; + line-height: 240px; + border-radius: 5px; + font-size: 1.5rem; +} +.card:after { + font-size: 80%; + font-weight: bold; +} + +.spades, +.spades:after { + content: "♤"; + color: black; +} + +.heart, +.heart:after { + content: "♡"; + color: red; +} diff --git a/.learn/resets/05.3-id-selector/index.html b/.learn/resets/05.3-id-selector/index.html new file mode 100644 index 00000000..0acb4a27 --- /dev/null +++ b/.learn/resets/05.3-id-selector/index.html @@ -0,0 +1,13 @@ + + + + + + 05.3 ID selector + + + + + I should look like a button + + diff --git a/.learn/resets/05.3-id-selector/styles.css b/.learn/resets/05.3-id-selector/styles.css new file mode 100644 index 00000000..c6058338 --- /dev/null +++ b/.learn/resets/05.3-id-selector/styles.css @@ -0,0 +1,8 @@ +#button1 { + background-color: #4caf50; /* Green */ + color: white; + padding: 15px 32px; + text-align: center; + display: inline-block; + border-radius: 5px; +} diff --git a/exercises/01-inline-styles/index.html b/exercises/01-inline-styles/index.html index 75056c8e..590621a4 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..399c1113 100644 --- a/exercises/02-style-tag/index.html +++ b/exercises/02-style-tag/index.html @@ -1 +1,6 @@ - + +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..7fd59148 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..2132a21d 100644 --- a/exercises/02.3-your-second-style/index.html +++ b/exercises/02.3-your-second-style/index.html @@ -2,7 +2,9 @@ diff --git a/exercises/03-separate-stylesheet/styles.css b/exercises/03-separate-stylesheet/styles.css index fb551ff2..f7987cd3 100644 --- a/exercises/03-separate-stylesheet/styles.css +++ b/exercises/03-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-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..d987e5ea 100644 --- a/exercises/04-list-styling/styles.css +++ b/exercises/04-list-styling/styles.css @@ -11,4 +11,18 @@ body { background-color: white; padding: 120px; width: 300px; -} \ No newline at end of file +} + +.cocacola { + list-style: lower-latin; +} +.pepsi { + list-style: square; +} + +.healthy { + list-style: armenian; +} +.dev-drinks { + list-style: none; +} 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..d163785b 100644 --- a/exercises/05.1-combined-rules/styles.css +++ b/exercises/05.1-combined-rules/styles.css @@ -1,14 +1,22 @@ .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/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
From 453b1ca3cf0732b6deb7f6e7f2ba25ee14d7995b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Antonio=20Llorens=20Padilla?= <131461633+JoseAnt7@users.noreply.github.com> Date: Fri, 5 Jul 2024 10:03:41 +0000 Subject: [PATCH 2/3] rest --- .learn/resets/06-specificity/index.html | 18 ++++ .learn/resets/06-specificity/styles.css | 8 ++ .learn/resets/07-practicing-rules/index.html | 34 ++++++++ .learn/resets/07-practicing-rules/styles.css | 1 + .../resets/08-very-specific-rules/index.html | 82 +++++++++++++++++++ .../resets/08-very-specific-rules/styles.css | 15 ++++ exercises/05.3-id-selector/index.html | 2 +- exercises/06-specificity/styles.css | 4 + exercises/07-practicing-rules/styles.css | 22 +++++ 9 files changed, 185 insertions(+), 1 deletion(-) create mode 100644 .learn/resets/06-specificity/index.html create mode 100644 .learn/resets/06-specificity/styles.css create mode 100644 .learn/resets/07-practicing-rules/index.html create mode 100644 .learn/resets/07-practicing-rules/styles.css create mode 100644 .learn/resets/08-very-specific-rules/index.html create mode 100644 .learn/resets/08-very-specific-rules/styles.css diff --git a/.learn/resets/06-specificity/index.html b/.learn/resets/06-specificity/index.html new file mode 100644 index 00000000..e8a9b98d --- /dev/null +++ b/.learn/resets/06-specificity/index.html @@ -0,0 +1,18 @@ + + + + + + + 06 Specificity + + + + + diff --git a/.learn/resets/06-specificity/styles.css b/.learn/resets/06-specificity/styles.css new file mode 100644 index 00000000..1255fbbc --- /dev/null +++ b/.learn/resets/06-specificity/styles.css @@ -0,0 +1,8 @@ +ul li { + background: blue; +} + +li + #thirditem { + background: yellow; +} +/**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/ diff --git a/.learn/resets/07-practicing-rules/index.html b/.learn/resets/07-practicing-rules/index.html new file mode 100644 index 00000000..b2d40b06 --- /dev/null +++ b/.learn/resets/07-practicing-rules/index.html @@ -0,0 +1,34 @@ + + + + + + + 07 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-practicing-rules/styles.css b/.learn/resets/07-practicing-rules/styles.css new file mode 100644 index 00000000..9a7fae86 --- /dev/null +++ b/.learn/resets/07-practicing-rules/styles.css @@ -0,0 +1 @@ +/* add your styles here */ diff --git a/.learn/resets/08-very-specific-rules/index.html b/.learn/resets/08-very-specific-rules/index.html new file mode 100644 index 00000000..3909949d --- /dev/null +++ b/.learn/resets/08-very-specific-rules/index.html @@ -0,0 +1,82 @@ + + + + + + + 08 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 +

+ +
Hello
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AgeGender
12Male
22Female
11Male
21Male
22Female
10Male
13Female
13Male
10Male
11Male
11Male
+ + diff --git a/.learn/resets/08-very-specific-rules/styles.css b/.learn/resets/08-very-specific-rules/styles.css new file mode 100644 index 00000000..164b694b --- /dev/null +++ b/.learn/resets/08-very-specific-rules/styles.css @@ -0,0 +1,15 @@ +/** Insert your code here **/ + +/********** READ-ONLY BLOCK ****** +You CANNOT UPDATE anything from here on, +only add lines of code on top of these lines +**/ + +body { + color: blue; +} + +ul li, +ol li { + color: green; +} diff --git a/exercises/05.3-id-selector/index.html b/exercises/05.3-id-selector/index.html index 0acb4a27..2e7928b7 100644 --- a/exercises/05.3-id-selector/index.html +++ b/exercises/05.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/06-specificity/styles.css b/exercises/06-specificity/styles.css index 1255fbbc..922368a9 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-color: green !important; +} diff --git a/exercises/07-practicing-rules/styles.css b/exercises/07-practicing-rules/styles.css index 9a7fae86..fc9cf486 100644 --- a/exercises/07-practicing-rules/styles.css +++ b/exercises/07-practicing-rules/styles.css @@ -1 +1,23 @@ /* add your styles here */ +body { + background-image: url("../../.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; + color: red; +} +h2 { + text-decoration: underline; +} +#id1 { + background-color: rgba(0, 0, 0, 0.2); + padding: 5px; +} +a:hover { + text-decoration: none; + color: green; +} + From 9a9bf31da6a3153e128340aa6366580b95dd8ece Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Antonio=20Llorens=20Padilla?= <131461633+JoseAnt7@users.noreply.github.com> Date: Fri, 5 Jul 2024 10:45:27 +0000 Subject: [PATCH 3/3] terminado --- .learn/resets/09-rounded-image/index.html | 13 +++++++++++ .learn/resets/09-rounded-image/styles.css | 6 +++++ .learn/resets/10-anchor-styles/index.html | 13 +++++++++++ .learn/resets/10-anchor-styles/styles.css | 17 ++++++++++++++ .learn/resets/11-your-own-font/index.html | 14 ++++++++++++ .learn/resets/11-your-own-font/styles.css | 3 +++ .../resets/12-font-awesome-icons/index.html | 15 +++++++++++++ .../resets/12-font-awesome-icons/styles.css | 4 ++++ .../13-relative-length-em-rem/index.html | 22 +++++++++++++++++++ .../13-relative-length-em-rem/styles.css | 8 +++++++ .../resets/14-anchor-like-button/index.html | 12 ++++++++++ .../resets/14-anchor-like-button/styles.css | 10 +++++++++ exercises/07-practicing-rules/styles.css | 3 +-- exercises/08-very-specific-rules/styles.css | 12 ++++++++++ exercises/09-rounded-image/styles.css | 6 ++++- exercises/10-anchor-styles/styles.css | 4 +--- exercises/11-your-own-font/index.html | 1 + exercises/11-your-own-font/styles.css | 2 +- exercises/12-font-awesome-icons/index.html | 2 ++ .../13-relative-length-em-rem/index.html | 2 +- .../solution.hide.css | 6 ++--- .../13-relative-length-em-rem/styles.css | 8 +++++++ exercises/14-anchor-like-button/styles.css | 8 +++++-- 23 files changed, 178 insertions(+), 13 deletions(-) create mode 100644 .learn/resets/09-rounded-image/index.html create mode 100644 .learn/resets/09-rounded-image/styles.css create mode 100644 .learn/resets/10-anchor-styles/index.html create mode 100644 .learn/resets/10-anchor-styles/styles.css create mode 100644 .learn/resets/11-your-own-font/index.html create mode 100644 .learn/resets/11-your-own-font/styles.css create mode 100644 .learn/resets/12-font-awesome-icons/index.html create mode 100644 .learn/resets/12-font-awesome-icons/styles.css create mode 100644 .learn/resets/13-relative-length-em-rem/index.html create mode 100644 .learn/resets/13-relative-length-em-rem/styles.css create mode 100644 .learn/resets/14-anchor-like-button/index.html create mode 100644 .learn/resets/14-anchor-like-button/styles.css diff --git a/.learn/resets/09-rounded-image/index.html b/.learn/resets/09-rounded-image/index.html new file mode 100644 index 00000000..52ff462d --- /dev/null +++ b/.learn/resets/09-rounded-image/index.html @@ -0,0 +1,13 @@ + + + + + + + 09 Rounded Image + + + + + + diff --git a/.learn/resets/09-rounded-image/styles.css b/.learn/resets/09-rounded-image/styles.css new file mode 100644 index 00000000..62006948 --- /dev/null +++ b/.learn/resets/09-rounded-image/styles.css @@ -0,0 +1,6 @@ +body { + background: #bdbdbd; +} +.rounded { + border-radius: 100%; +} diff --git a/.learn/resets/10-anchor-styles/index.html b/.learn/resets/10-anchor-styles/index.html new file mode 100644 index 00000000..baf7c9ba --- /dev/null +++ b/.learn/resets/10-anchor-styles/index.html @@ -0,0 +1,13 @@ + + + + + + + 10 Anchor Styles + + + + Click me + + diff --git a/.learn/resets/10-anchor-styles/styles.css b/.learn/resets/10-anchor-styles/styles.css new file mode 100644 index 00000000..895dc3d6 --- /dev/null +++ b/.learn/resets/10-anchor-styles/styles.css @@ -0,0 +1,17 @@ + +.threeDimension { + display: block; + border: 1px solid; + border-color: #aaa #000 #000 #aaa; + width: 8em; + background: #fc0; + text-decoration: none; + text-align: center; + color: black; + font-size: 22px; +} + +a.threeDimension:active { + /* your code here*/ + +} diff --git a/.learn/resets/11-your-own-font/index.html b/.learn/resets/11-your-own-font/index.html new file mode 100644 index 00000000..971a51b4 --- /dev/null +++ b/.learn/resets/11-your-own-font/index.html @@ -0,0 +1,14 @@ + + + + + + + + + 11 Your Own Font + + +

My unique font

+ + diff --git a/.learn/resets/11-your-own-font/styles.css b/.learn/resets/11-your-own-font/styles.css new file mode 100644 index 00000000..0335a322 --- /dev/null +++ b/.learn/resets/11-your-own-font/styles.css @@ -0,0 +1,3 @@ +.myTitle { + /* Add your code below this line */ +} diff --git a/.learn/resets/12-font-awesome-icons/index.html b/.learn/resets/12-font-awesome-icons/index.html new file mode 100644 index 00000000..3495c6b5 --- /dev/null +++ b/.learn/resets/12-font-awesome-icons/index.html @@ -0,0 +1,15 @@ + + + + + + + + 12 Font Awesome + + + + + diff --git a/.learn/resets/12-font-awesome-icons/styles.css b/.learn/resets/12-font-awesome-icons/styles.css new file mode 100644 index 00000000..52fe9b9c --- /dev/null +++ b/.learn/resets/12-font-awesome-icons/styles.css @@ -0,0 +1,4 @@ +li { + font-size: 2.5rem; + list-style: none; +} diff --git a/.learn/resets/13-relative-length-em-rem/index.html b/.learn/resets/13-relative-length-em-rem/index.html new file mode 100644 index 00000000..24290996 --- /dev/null +++ b/.learn/resets/13-relative-length-em-rem/index.html @@ -0,0 +1,22 @@ + + + + + + + 13 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-relative-length-em-rem/styles.css b/.learn/resets/13-relative-length-em-rem/styles.css new file mode 100644 index 00000000..bfba63b9 --- /dev/null +++ b/.learn/resets/13-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/14-anchor-like-button/index.html b/.learn/resets/14-anchor-like-button/index.html new file mode 100644 index 00000000..853cce76 --- /dev/null +++ b/.learn/resets/14-anchor-like-button/index.html @@ -0,0 +1,12 @@ + + + + + + + 14 Anchor Like Button + + + Beautiful Button + + diff --git a/.learn/resets/14-anchor-like-button/styles.css b/.learn/resets/14-anchor-like-button/styles.css new file mode 100644 index 00000000..76fd5b9c --- /dev/null +++ b/.learn/resets/14-anchor-like-button/styles.css @@ -0,0 +1,10 @@ +.orange-btn { + display: inline-block; + /* your code below */ + +} + +.orange-btn:hover { + /* YOUR CODE HERE FOR THE HOVER STATE */ + +} diff --git a/exercises/07-practicing-rules/styles.css b/exercises/07-practicing-rules/styles.css index fc9cf486..85d036ff 100644 --- a/exercises/07-practicing-rules/styles.css +++ b/exercises/07-practicing-rules/styles.css @@ -18,6 +18,5 @@ h2 { } a:hover { text-decoration: none; - color: green; + color: green; } - diff --git a/exercises/08-very-specific-rules/styles.css b/exercises/08-very-specific-rules/styles.css index 164b694b..0cacfb05 100644 --- a/exercises/08-very-specific-rules/styles.css +++ b/exercises/08-very-specific-rules/styles.css @@ -1,5 +1,17 @@ /** Insert your code here **/ +ul li { + color: red !important; +} + +ol li:nth-child(2){ + background-color: green; +} + +tr:nth-child(odd) { + background-color: 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/09-rounded-image/styles.css b/exercises/09-rounded-image/styles.css index 62006948..c31834dd 100644 --- a/exercises/09-rounded-image/styles.css +++ b/exercises/09-rounded-image/styles.css @@ -2,5 +2,9 @@ body { background: #bdbdbd; } .rounded { - border-radius: 100%; + object-position: top; + border-radius: 0%; + width: 120px; + height: 120px; + object-fit: cover; } diff --git a/exercises/10-anchor-styles/styles.css b/exercises/10-anchor-styles/styles.css index 895dc3d6..afe05cf7 100644 --- a/exercises/10-anchor-styles/styles.css +++ b/exercises/10-anchor-styles/styles.css @@ -1,4 +1,3 @@ - .threeDimension { display: block; border: 1px solid; @@ -12,6 +11,5 @@ } a.threeDimension:active { - /* your code here*/ - + border-color: #000 #aaa #aaa #000; } diff --git a/exercises/11-your-own-font/index.html b/exercises/11-your-own-font/index.html index 971a51b4..a389170f 100644 --- a/exercises/11-your-own-font/index.html +++ b/exercises/11-your-own-font/index.html @@ -3,6 +3,7 @@ + diff --git a/exercises/11-your-own-font/styles.css b/exercises/11-your-own-font/styles.css index 0335a322..58aa5cc6 100644 --- a/exercises/11-your-own-font/styles.css +++ b/exercises/11-your-own-font/styles.css @@ -1,3 +1,3 @@ .myTitle { - /* Add your code below this line */ + font-family: "Tangerine", serif; } diff --git a/exercises/12-font-awesome-icons/index.html b/exercises/12-font-awesome-icons/index.html index 3495c6b5..59a95612 100644 --- a/exercises/12-font-awesome-icons/index.html +++ b/exercises/12-font-awesome-icons/index.html @@ -10,6 +10,8 @@ diff --git a/exercises/13-relative-length-em-rem/index.html b/exercises/13-relative-length-em-rem/index.html index 24290996..4fb16d2e 100644 --- a/exercises/13-relative-length-em-rem/index.html +++ b/exercises/13-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/13-relative-length-em-rem/solution.hide.css b/exercises/13-relative-length-em-rem/solution.hide.css index eeb04334..c524cf3e 100644 --- a/exercises/13-relative-length-em-rem/solution.hide.css +++ b/exercises/13-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/13-relative-length-em-rem/styles.css b/exercises/13-relative-length-em-rem/styles.css index bfba63b9..87e9d6f1 100644 --- a/exercises/13-relative-length-em-rem/styles.css +++ b/exercises/13-relative-length-em-rem/styles.css @@ -6,3 +6,11 @@ } /* YOUR CODE BELOW THIS LINE */ + +h2 { + font-size: 0.8em; +} + +h3 { + font-size: 0.8rem; +} diff --git a/exercises/14-anchor-like-button/styles.css b/exercises/14-anchor-like-button/styles.css index 76fd5b9c..c21cf146 100644 --- a/exercises/14-anchor-like-button/styles.css +++ b/exercises/14-anchor-like-button/styles.css @@ -1,10 +1,14 @@ .orange-btn { display: inline-block; /* your code below */ - + padding: 10px; + border-radius: 4px; + background-color: orange; } .orange-btn:hover { /* YOUR CODE HERE FOR THE HOVER STATE */ - + background-color: darkorange; + text-decoration: none; + color: white; }