diff --git a/.learn/resets/01-Hello-World/index.html b/.learn/resets/01-Hello-World/index.html new file mode 100644 index 00000000..03ae0584 --- /dev/null +++ b/.learn/resets/01-Hello-World/index.html @@ -0,0 +1 @@ + \ No newline at end of file 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..2dec7923 --- /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.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/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.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.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.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/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/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. +
  2. You understand what the teacher is talking about
    3. +
  3. Your 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 +

+ + \ 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. +
  2. You understand what the teacher is talking about
    3. +
  3. Your 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
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/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..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/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/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..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/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/01-Hello-World/index.html b/exercises/01-Hello-World/index.html index 03ae0584..76f58afc 100644 --- a/exercises/01-Hello-World/index.html +++ b/exercises/01-Hello-World/index.html @@ -1 +1,16 @@ - \ No newline at end of file + + + + + Hello-World + + + + 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..9bc69762 100644 --- a/exercises/01.1-The-Style-Tag/index.html +++ b/exercises/01.1-The-Style-Tag/index.html @@ -1,6 +1,19 @@ - -

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

+ + + + + Your First Style + + + +

+ 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 2dec7923..3907bb3c 100644 --- a/exercises/01.2-Your-First-Style/index.html +++ b/exercises/01.2-Your-First-Style/index.html @@ -4,7 +4,7 @@ diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html index 998d973a..1b87ed9d 100644 --- a/exercises/01.3-Your-Second-Style/index.html +++ b/exercises/01.3-Your-Second-Style/index.html @@ -2,7 +2,9 @@ diff --git a/exercises/02-Separate-Stylesheet/styles.css b/exercises/02-Separate-Stylesheet/styles.css index 780be166..d7cf32a7 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-color: 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..4d7e5373 100644 --- a/exercises/03-Inline-Styles/index.html +++ b/exercises/03-Inline-Styles/index.html @@ -14,4 +14,9 @@ + diff --git a/exercises/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html index e3abd1bd..87e01cb8 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/04-Class-Selector/index.html @@ -2,13 +2,11 @@ - - 04 Class selector - + 04 Class selector -

Hello!

-

World!

+

Hello!

+

World!

diff --git a/exercises/04-Class-Selector/styles.css b/exercises/04-Class-Selector/styles.css index ffec43c5..9d03d623 100644 --- a/exercises/04-Class-Selector/styles.css +++ b/exercises/04-Class-Selector/styles.css @@ -1,3 +1,3 @@ -.b-blue { +p.p { background: blue; } diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/04.1-Combined-Rules/index.html index 2af5a24c..50078b73 100644 --- a/exercises/04.1-Combined-Rules/index.html +++ b/exercises/04.1-Combined-Rules/index.html @@ -2,9 +2,7 @@ - - 04 Combined Rules - + 04 Combined Rules diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css index 6313a1bc..7b86ad80 100644 --- a/exercises/04.1-Combined-Rules/styles.css +++ b/exercises/04.1-Combined-Rules/styles.css @@ -1,14 +1,10 @@ .myBox { width: 50px; height: 50px; - padding-top: 10px; - padding-left: 30px; - padding-right: 190px; - padding-bottom: 50px; + padding: 10px 30px 190px 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: rgb(189, 189, 189) + url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true) + 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..20b473e9 100644 --- a/exercises/04.2-Apply-several-classes/index.html +++ b/exercises/04.2-Apply-several-classes/index.html @@ -2,12 +2,10 @@ - - 04 Class selector - + 04 Class selector -
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/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/styles.css b/exercises/05-Specificity/styles.css index db471c2b..13374f70 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,11 @@ -ul li{ +ul li { background: blue; } -#thirditem{ +#thirditem { background: yellow; -} +} /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file +#thirditem { + background: green !important; +} diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index 4119acb5..db2eb563 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -21,9 +21,7 @@

3 reasons you know you are learning

3 reasons you know love what you are learning

@@ -31,4 +29,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..8136331e 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1,16 @@ -/* add your styles here */ \ No newline at end of file +h1 { + font-family: courier; + color: red; +} +body { + font: Times New Roman; + padding-left: 20px; + background: url(../../.learn/assets/background-vertical.jpg?raw=true); +} +#id1 { + background: rgba(255, 255, 255, 0.2); + padding: 5px; +} +a:hover { + color: green; +} diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/07-Very-Specific-Rules/index.html index 9c691446..232042a6 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. -
  2. You understand what the teacher is talking about
    3. +
  3. You understand what the teacher is talking about
  4. 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 300d0677..da8f4f74 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,5 +1,13 @@ /** Insert your code here **/ - +ul { + color: red !important; +} +ol li.li { + 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 this lines diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..1db24b7b 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -3,4 +3,7 @@ body { } .rounded { border-radius: 100%; + object-fit: cover; + object-position: 100% 100%; + } diff --git a/exercises/09-Anchor-Styles/index.html b/exercises/09-Anchor-Styles/index.html index 984ca01e..30e00691 100644 --- a/exercises/09-Anchor-Styles/index.html +++ b/exercises/09-Anchor-Styles/index.html @@ -6,7 +6,7 @@ 09 Anchor Styles - + Click me diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 7eaa9bea..f977060d 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; @@ -11,6 +10,5 @@ } a.threeDimension:active { - /* your code here*/ - -} \ No newline at end of file + 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 a0e7f25a..231dc7a7 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -1,15 +1,14 @@ - - - - + + + + + - - - 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..8c506479 100644 --- a/exercises/10-Your-Own-Font/styles.css +++ b/exercises/10-Your-Own-Font/styles.css @@ -1,3 +1,3 @@ -.myTitle { - /*your code here*/ +#myTitle { + font-family: Smooch, serif; } diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index 1401d5da..326c1cb3 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/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css index bfba63b9..fb83a97b 100644 --- a/exercises/12-Relative-Length-EM-REM/styles.css +++ b/exercises/12-Relative-Length-EM-REM/styles.css @@ -6,3 +6,15 @@ } /* YOUR CODE BELOW THIS LINE */ +#my-first-div h2 { + font-size: 0.8em; +} +#my-second-div h2 { + font-size: 0.8em; +} +#my-first-div h3 { + font-size: 0.8rem; +} +#my-second-div h3 { + font-size: 0.8rem; +} diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index 93996cbd..90f0507a 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,7 +1,11 @@ .orange-btn { - /*your code here*/ + padding: 10px; + border-radius: 4px; + background-color: orange; + text-decoration: none; + color: white; } .orange-btn:hover { - /*YOUR CODE HERE FOR THE HOVER STATE*/ + background-color: darkorange; }