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..39661132 --- /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 + + + + +

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

My first item of the list
My second item of the list
My third item of the list
My forth item of the list
My fifth item of the list

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

You are able to complete the exercises by yourself.
You understand what the teacher is talking about
Your are able to have conversations about the topic

3 reasons you know love what you are learning

Time passes fast.
+ You are anxious to finish this excercise and start the next one. +
Is 12am and you don't want to go to sleep.

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

You are able to complete the exercises by yourself.
You understand what the teacher is talking about
Your are able to have conversations about the topic

3 reasons you know love what you are learning

Time passes fast.
You are anxious to finish this excercise and start the next one.
Is 12am and you don't want to go to sleep.

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Age	Gender
12 years	Male
22 years	Female
11 years	Male
21 years	Male
22 years	Female
10 years	Male
13 years	Female
13 years	Male
10 years	Male
11 years	Male
11 years	Male

+ + 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..a619ff63 --- /dev/null +++ b/.learn/resets/11-Font-Awesome-Icons/index.html @@ -0,0 +1,14 @@ + + + + + + + 11 Font Awesome + + +

Hello

+ + 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..d967d225 100644 --- a/exercises/01-Hello-World/index.html +++ b/exercises/01-Hello-World/index.html @@ -1 +1,18 @@ - \ No newline at end of file + + + + + + + Document + + + + 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..01e45874 100644 --- a/exercises/01.1-The-Style-Tag/index.html +++ b/exercises/01.1-The-Style-Tag/index.html @@ -1,6 +1,22 @@ -

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

+ + + + + + + Document + + + +

+ 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 39661132..a2a88d04 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..375cc5a3 100644 --- a/exercises/03-Inline-Styles/index.html +++ b/exercises/03-Inline-Styles/index.html @@ -5,7 +5,7 @@ - +

diff --git a/exercises/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html index e3abd1bd..60e1d67f 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.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..28b5d8f7 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 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: 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..e6270e56 100644 --- a/exercises/04.2-Apply-several-classes/index.html +++ b/exercises/04.2-Apply-several-classes/index.html @@ -2,9 +2,7 @@ - - 04 Class selector - + 04 Class selector 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/index.html b/exercises/05-Specificity/index.html index 3d68946c..34d5e0f2 100644 --- a/exercises/05-Specificity/index.html +++ b/exercises/05-Specificity/index.html @@ -10,7 +10,7 @@

My first item of the list
My second item of the list
My third item of the list
My third item of the list
My forth item of the list
My fifth item of the list

diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css index db471c2b..c4e96d25 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,8 @@ -ul li{ +ul li { background: blue; } -#thirditem{ +#thirditem { background: yellow; -} +} /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file 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

Time passes fast.
- You are anxious to finish this excercise and start the next one. -
You are anxious to finish this excercise and start the next one.
Is 12am and you don't want to go to sleep.

@@ -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..fbfe11e2 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1,24 @@ -/* add your styles here */ \ No newline at end of file +/* add your styles here */ +body { + font-family: "Times New Roman"; + padding-left: 20px; + background: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true) + repeat-y; +} +h1 { + font-family: Courier; + color: red; + vertical-align: middle; +} +h2 { + text-decoration: underline; +} +#id1 { + background: rgba(255, 255, 255, 0.5) 5px; +} +a { + text-decoration: none; +} +a:hover { + color: green; +} diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/07-Very-Specific-Rules/index.html index 9c691446..bf4eb846 100644 --- a/exercises/07-Very-Specific-Rules/index.html +++ b/exercises/07-Very-Specific-Rules/index.html @@ -14,14 +14,14 @@

3 reasons you know you are learning

You are able to complete the exercises by yourself.
You understand what the teacher is talking about
You understand what the teacher is talking about
Your are able to have conversations about the topic

3 reasons you know love what you are learning

Time passes fast.
You are anxious to finish this excercise and start the next one.
Is 12am and you don't want to go to sleep.
Time passes fast.
You are anxious to finish this excercise and start the next one.
Is 12am and you don't want to go to sleep.

If you can't sleep, what better than watching videos of cats? diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index defdb77a..2df9cd19 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,4 +1,9 @@ -/** Insert your code here **/ +.ulred { + color: red; +} +tr:nth-child(odd) { + background: yellow; +} /*********** READ ONLY BLOCK ****** You CAN NOT UPDATE anything from here on, diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..cde9b736 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -2,5 +2,9 @@ body { background: #bdbdbd; } .rounded { + width: 300px; + height: 300px; border-radius: 100%; + object-fit: cover; + object-position: top; } 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..101d281c 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; @@ -12,5 +11,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..418e6b0f 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -1,15 +1,17 @@ - - - - + + + + + + + + - - - 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..8310917d 100644 --- a/exercises/10-Your-Own-Font/styles.css +++ b/exercises/10-Your-Own-Font/styles.css @@ -1,3 +1,4 @@ .myTitle { /*your code here*/ + font-family: "Montserrat", sans-serif; } diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index a619ff63..defc6eca 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/11-Font-Awesome-Icons/index.html @@ -1,14 +1,17 @@ - - - - - 11 Font Awesome - - -

Hello

- + + + + + + 11 Font Awesome + + +

Hello
Word
Hey!

+ diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css index bfba63b9..266c3393 100644 --- a/exercises/12-Relative-Length-EM-REM/styles.css +++ b/exercises/12-Relative-Length-EM-REM/styles.css @@ -6,3 +6,9 @@ } /* 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 93996cbd..b74d9047 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,7 +1,13 @@ .orange-btn { /*your code here*/ + padding: 10px; + border-radius: 4px; + background-color: #f39c12; + text-decoration: none; + color: white; } .orange-btn:hover { /*YOUR CODE HERE FOR THE HOVER STATE*/ + background-color: darkorange; }

Hello