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-Separate-Stylesheet/styles.css b/.learn/resets/02-Separate-Stylesheet/styles.css new file mode 100644 index 00000000..780be166 --- /dev/null +++ b/.learn/resets/02-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/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/02.1-Background/styles.css b/.learn/resets/02.1-Background/styles.css new file mode 100644 index 00000000..afdf956f --- /dev/null +++ b/.learn/resets/02.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/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-Class-Selector/styles.css b/.learn/resets/04-Class-Selector/styles.css new file mode 100644 index 00000000..ffec43c5 --- /dev/null +++ b/.learn/resets/04-Class-Selector/styles.css @@ -0,0 +1,3 @@ +.b-blue { + background: blue; +} 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.1-Combined-Rules/styles.css b/.learn/resets/04.1-Combined-Rules/styles.css new file mode 100644 index 00000000..3c54a57d --- /dev/null +++ b/.learn/resets/04.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://assets.breatheco.de/apis/img/funny/baby.jpg); + background-position-x: 100px; + background-repeat: no-repeat; + background-size: contain; +} 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.2-Apply-several-classes/styles.css b/.learn/resets/04.2-Apply-several-classes/styles.css new file mode 100644 index 00000000..efacee56 --- /dev/null +++ b/.learn/resets/04.2-Apply-several-classes/styles.css @@ -0,0 +1,26 @@ +.card { + display: inline-block; + width: 50px; + height: 80px; + position: relative; + border: 1px solid black; + text-align: center; + line-height: 80px; + border-radius: 5px; +} +.card:after { + font-size: 70%; + font-weight: bold; +} + +.spades, +.spades:after { + content: "♤"; + color: black; +} + +.heart, +.heart:after { + content: "♡"; + color: red; +} 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/04.3-id-Selector/styles.css b/.learn/resets/04.3-id-Selector/styles.css new file mode 100644 index 00000000..e020d28b --- /dev/null +++ b/.learn/resets/04.3-id-Selector/styles.css @@ -0,0 +1,5 @@ +#button1 { + background: #BDBDBD; + border: #5E5E5E; + border-radius: 5px; +} 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/05-Specificity/styles.css b/.learn/resets/05-Specificity/styles.css new file mode 100644 index 00000000..db471c2b --- /dev/null +++ b/.learn/resets/05-Specificity/styles.css @@ -0,0 +1,9 @@ +ul li{ + background: blue; +} + +#thirditem{ + background: yellow; +} +/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ + \ No newline at end of file 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/06-Practicing-Rules/styles.css b/.learn/resets/06-Practicing-Rules/styles.css new file mode 100644 index 00000000..d89b1a47 --- /dev/null +++ b/.learn/resets/06-Practicing-Rules/styles.css @@ -0,0 +1 @@ +/* add your styles 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/07-Very-Specific-Rules/styles.css b/.learn/resets/07-Very-Specific-Rules/styles.css new file mode 100644 index 00000000..defdb77a --- /dev/null +++ b/.learn/resets/07-Very-Specific-Rules/styles.css @@ -0,0 +1,15 @@ +/** Insert your code here **/ + +/*********** READ ONLY BLOCK ****** +You CAN NOT UPDATE anything from here on, +only add lines of code on top of this lines +**/ + +body { + color: blue; +} + +ul li, +ol li { + color: green; +} diff --git a/.learn/resets/08-Rounded-Image/index.html b/.learn/resets/08-Rounded-Image/index.html new file mode 100644 index 00000000..f8637953 --- /dev/null +++ b/.learn/resets/08-Rounded-Image/index.html @@ -0,0 +1,13 @@ + + + + + + + 08 Rounded Image + + + + + + diff --git a/.learn/resets/08-Rounded-Image/styles.css b/.learn/resets/08-Rounded-Image/styles.css new file mode 100644 index 00000000..62006948 --- /dev/null +++ b/.learn/resets/08-Rounded-Image/styles.css @@ -0,0 +1,6 @@ +body { + background: #bdbdbd; +} +.rounded { + border-radius: 100%; +} 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/09-Anchor-Styles/styles.css b/.learn/resets/09-Anchor-Styles/styles.css new file mode 100644 index 00000000..7eaa9bea --- /dev/null +++ b/.learn/resets/09-Anchor-Styles/styles.css @@ -0,0 +1,16 @@ + +.threeDimension { + display: block; + border: 1px solid; + border-color: #aaa #000 #000 #aaa; + width: 8em; + background: #fc0; + text-decoration: none; + text-align: center; + color: black; +} + +a.threeDimension:active { + /* your code here*/ + +} \ No newline at end of file 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/10-Your-Own-Font/styles.css b/.learn/resets/10-Your-Own-Font/styles.css new file mode 100644 index 00000000..de7160fd --- /dev/null +++ b/.learn/resets/10-Your-Own-Font/styles.css @@ -0,0 +1,3 @@ +.myTitle { + /*your code here*/ +} 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 + + + + + diff --git a/.learn/resets/11-Font-Awesome-Icons/styles.css b/.learn/resets/11-Font-Awesome-Icons/styles.css new file mode 100644 index 00000000..b22aedca --- /dev/null +++ b/.learn/resets/11-Font-Awesome-Icons/styles.css @@ -0,0 +1,3 @@ +li { + list-style: none; +} 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/12-Relative-Length-EM-REM/styles.css b/.learn/resets/12-Relative-Length-EM-REM/styles.css new file mode 100644 index 00000000..bfba63b9 --- /dev/null +++ b/.learn/resets/12-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/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/.learn/resets/13-Anchor-Like-Button/styles.css b/.learn/resets/13-Anchor-Like-Button/styles.css new file mode 100644 index 00000000..93996cbd --- /dev/null +++ b/.learn/resets/13-Anchor-Like-Button/styles.css @@ -0,0 +1,7 @@ +.orange-btn { + /*your code here*/ +} + +.orange-btn:hover { + /*YOUR CODE HERE FOR THE HOVER STATE*/ +} diff --git a/bc.json b/bc.json index fc7f686a..b848ce37 100644 --- a/bc.json +++ b/bc.json @@ -1,5 +1,28 @@ { + "port": 3000, + "address": "https://f7351ba2-5a20-4b29-8b84-c2237578cf7f.ws-us03.gitpod.io", + "editor": "gitpod", + "configPath": { + "config": "bc.json", + "base": ".learn", + "exercises": "./exercises", + "output": ".learn/dist" + }, + "outputPath": "./.learn/dist", + "publicPath": "/preview", + "grading": "isolated", + "ignoreRegex": {}, + "webpack_template": null, + "disable_grading": true, + "onCompilerSuccess": "open-browser", "language": "css", + "compiler": "webpack", + "tester": "jest", + "actions": [ + "build", + "test", + "reset" + ], "preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", "repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", "title": "Learn CSS Interactively", @@ -8,5 +31,239 @@ "duration": 8, "difficulty": "easy", "video-solutions": true, - "graded": true -} + "graded": true, + "session": 8888510202529190000, + "exercises": [ + { + "slug": "00-Welcome", + "title": "00-Welcome", + "done": false, + "path": "exercises/00-Welcome", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "01-Hello-World", + "title": "01-Hello-World", + "done": false, + "path": "exercises/01-Hello-World", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "01.1-The-Style-Tag", + "title": "01.1-The-Style-Tag", + "done": false, + "path": "exercises/01.1-The-Style-Tag", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "01.2-Your-First-Style", + "title": "01.2-Your-First-Style", + "done": false, + "path": "exercises/01.2-Your-First-Style", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "01.3-Your-Second-Style", + "title": "01.3-Your-Second-Style", + "done": false, + "path": "exercises/01.3-Your-Second-Style", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "02-Separate-Stylesheet", + "title": "02-Separate-Stylesheet", + "done": false, + "path": "exercises/02-Separate-Stylesheet", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "02.1-Background", + "title": "02.1-Background", + "done": false, + "path": "exercises/02.1-Background", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "03-Inline-Styles", + "title": "03-Inline-Styles", + "done": false, + "path": "exercises/03-Inline-Styles", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "04-Class-Selector", + "title": "04-Class-Selector", + "done": false, + "path": "exercises/04-Class-Selector", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "04.1-Combined-Rules", + "title": "04.1-Combined-Rules", + "done": false, + "path": "exercises/04.1-Combined-Rules", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "04.2-Apply-several-classes", + "title": "04.2-Apply-several-classes", + "done": false, + "path": "exercises/04.2-Apply-several-classes", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "04.3-id-Selector", + "title": "04.3-id-Selector", + "done": false, + "path": "exercises/04.3-id-Selector", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "05-Specificity", + "title": "05-Specificity", + "done": false, + "path": "exercises/05-Specificity", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "06-Practicing-Rules", + "title": "06-Practicing-Rules", + "done": false, + "path": "exercises/06-Practicing-Rules", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "07-Very-Specific-Rules", + "title": "07-Very-Specific-Rules", + "done": false, + "path": "exercises/07-Very-Specific-Rules", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "08-Rounded-Image", + "title": "08-Rounded-Image", + "done": false, + "path": "exercises/08-Rounded-Image", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "09-Anchor-Styles", + "title": "09-Anchor-Styles", + "done": false, + "path": "exercises/09-Anchor-Styles", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "10-Your-Own-Font", + "title": "10-Your-Own-Font", + "done": false, + "path": "exercises/10-Your-Own-Font", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "11-Font-Awesome-Icons", + "title": "11-Font-Awesome-Icons", + "done": false, + "path": "exercises/11-Font-Awesome-Icons", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "12-Relative-Length-EM-REM", + "title": "12-Relative-Length-EM-REM", + "done": false, + "path": "exercises/12-Relative-Length-EM-REM", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "13-Anchor-Like-Button", + "title": "13-Anchor-Like-Button", + "done": false, + "path": "exercises/13-Anchor-Like-Button", + "translations": [ + "es", + "us" + ], + "graded": true + } + ] +} \ No newline at end of file diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html index 03ae0584..e2aa8ea1 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 + + \ No newline at end of file diff --git a/exercises/01.1-The-Style-Tag/index.html b/exercises/01.1-The-Style-Tag/index.html index 1c51e8e0..51d37089 100644 --- a/exercises/01.1-The-Style-Tag/index.html +++ b/exercises/01.1-The-Style-Tag/index.html @@ -1,4 +1,10 @@ +

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, diff --git a/exercises/01.2-Your-First-Style/index.html b/exercises/01.2-Your-First-Style/index.html index 39661132..450a42f7 100644 --- a/exercises/01.2-Your-First-Style/index.html +++ b/exercises/01.2-Your-First-Style/index.html @@ -4,7 +4,8 @@ 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..9695d31b 100644 --- a/exercises/02-Separate-Stylesheet/styles.css +++ b/exercises/02-Separate-Stylesheet/styles.css @@ -2,3 +2,7 @@ 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..dc6b20fc 100644 --- a/exercises/02.1-Background/styles.css +++ b/exercises/02.1-Background/styles.css @@ -1,5 +1,7 @@ body { background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg); - background-size: cover; - background-repeat: no-repeat; + /* background-size: cover; */ + background-size: contain; + /* background-repeat: no-repeat; */ + background-repeat: inherit; } diff --git a/exercises/03-Inline-Styles/index.html b/exercises/03-Inline-Styles/index.html index ab36cc54..d7bb649d 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..bfdc2fb0 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/04-Class-Selector/index.html @@ -8,7 +8,7 @@ -

Hello!

-

World!

+

Hello!

+

World!

diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/04.1-Combined-Rules/index.html index 2af5a24c..551a2e9f 100644 --- a/exercises/04.1-Combined-Rules/index.html +++ b/exercises/04.1-Combined-Rules/index.html @@ -8,6 +8,6 @@ -
Hello!
+
9
diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css index 3c54a57d..cd56049c 100644 --- a/exercises/04.1-Combined-Rules/styles.css +++ b/exercises/04.1-Combined-Rules/styles.css @@ -1,14 +1,8 @@ .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://assets.breatheco.de/apis/img/funny/baby.jpg); - background-position-x: 100px; - background-repeat: no-repeat; + background: rgb(189, 189, 189) url(https://assets.breatheco.de/apis/img/funny/baby.jpg) 100px no-repeat; background-size: contain; } diff --git a/exercises/04.3-id-Selector/index.html b/exercises/04.3-id-Selector/index.html index 5b9a773d..a7964559 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/04.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/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..ac304d83 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,12 @@ -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..20429582 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -31,4 +31,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..c4265c42 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1,30 @@ -/* add your styles here */ \ No newline at end of file +/* add your styles here */ +body { + background: url("https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true") + repeat-y; + padding-left: 20px; +} + +* { + font-family: "Times New Roman"; +} +h1 { + font-family: "Courier"; + color: red; + text-align: center; +} + +h2 { + text-decoration: underline; +} + +#id1 { + background: white; + opacity: 0.2; + padding: 5px; +} + +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 defdb77a..bd9d53c7 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,4 +1,15 @@ /** Insert your code here **/ +ul li { + color: red !important; +} + +ol li:nth-child(2) { + background-color: green; +} +/* odd impares // even pares */ +table tr:nth-child(odd) { + background-color: yellow; +} /*********** READ ONLY BLOCK ****** You CAN NOT UPDATE anything from here on, diff --git a/exercises/08-Rounded-Image/index.html b/exercises/08-Rounded-Image/index.html index f8637953..cd5dfd98 100644 --- a/exercises/08-Rounded-Image/index.html +++ b/exercises/08-Rounded-Image/index.html @@ -8,6 +8,7 @@ - +
+ diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..79d6b6ae 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -4,3 +4,10 @@ body { .rounded { border-radius: 100%; } + +div { + background: url("https://assets.breatheco.de/apis/img/funny/einstein.png") center; + background-size: contain; + width: 500px; + height: 500px; +} 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..e00cbfdd 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -1,15 +1,15 @@ - - - - + + + + + + - - - 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..36a516f8 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: "Potta One", cursive; } diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index a619ff63..fc01e55f 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/11-Font-Awesome-Icons/index.html @@ -1,14 +1,17 @@ - - - - - 11 Font Awesome - - - - + + + + + + 11 Font Awesome + + + + diff --git a/exercises/11-Font-Awesome-Icons/styles.css b/exercises/11-Font-Awesome-Icons/styles.css index b22aedca..ddc3f2b0 100644 --- a/exercises/11-Font-Awesome-Icons/styles.css +++ b/exercises/11-Font-Awesome-Icons/styles.css @@ -1,3 +1,7 @@ li { list-style: none; } + +.fa { + font-size: 50px; +} diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css index bfba63b9..87e9d6f1 100644 --- a/exercises/12-Relative-Length-EM-REM/styles.css +++ b/exercises/12-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/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index 93996cbd..10fff3b6 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,7 +1,16 @@ +body { + padding: 50px; +} .orange-btn { /*your code here*/ + border-radius: 4px; + background-color: orange; + color: white; + text-decoration: none; + padding: 10px; } .orange-btn:hover { /*YOUR CODE HERE FOR THE HOVER STATE*/ + background-color: #da9d2d; }
Hello