diff --git a/.learn/resets/02-Display-none/index.html b/.learn/resets/02-Display-none/index.html new file mode 100644 index 0000000..f6daae7 --- /dev/null +++ b/.learn/resets/02-Display-none/index.html @@ -0,0 +1,20 @@ + + + + + + 4Geeks Academy + + + +

I need to be invisible

+

I need to be invisible and gone from the layout

+ +

This is a paragraph, with some words more important than others

+

This is another paragraph.

+ + diff --git a/.learn/resets/02-Display-none/styles.css b/.learn/resets/02-Display-none/styles.css new file mode 100644 index 0000000..7cff986 --- /dev/null +++ b/.learn/resets/02-Display-none/styles.css @@ -0,0 +1,4 @@ +/* your code here */ +#myFirstH2{ + visibility: visible; +} \ No newline at end of file diff --git a/.learn/resets/04-Move-image-behind-the-text/index.html b/.learn/resets/04-Move-image-behind-the-text/index.html new file mode 100644 index 0000000..b4b244b --- /dev/null +++ b/.learn/resets/04-Move-image-behind-the-text/index.html @@ -0,0 +1,21 @@ + + + + + + 4Geeks Academy + + + + +

This is a Heading

+

This is a paragraph.

+

This is another paragraph.

+ + + diff --git a/.learn/resets/04-Move-image-behind-the-text/styles.css b/.learn/resets/04-Move-image-behind-the-text/styles.css new file mode 100644 index 0000000..27b481b --- /dev/null +++ b/.learn/resets/04-Move-image-behind-the-text/styles.css @@ -0,0 +1,5 @@ +#myImage { + position: absolute; + left: 0px; + top: 0px; +} diff --git a/.learn/resets/05-Float-example/index.html b/.learn/resets/05-Float-example/index.html new file mode 100644 index 0000000..d4e5978 --- /dev/null +++ b/.learn/resets/05-Float-example/index.html @@ -0,0 +1,19 @@ + + + + + + 4Geeks Academy + + + + + +

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et + quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est + laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio + cumque nihil impedit. +

+ + diff --git a/.learn/resets/05-Float-example/styles.css b/.learn/resets/05-Float-example/styles.css new file mode 100644 index 0000000..8fcd957 --- /dev/null +++ b/.learn/resets/05-Float-example/styles.css @@ -0,0 +1,3 @@ +#myImage{ + max-width: 250px; +} \ No newline at end of file diff --git a/.learn/resets/06-center-content/index.html b/.learn/resets/06-center-content/index.html new file mode 100644 index 0000000..51174ff --- /dev/null +++ b/.learn/resets/06-center-content/index.html @@ -0,0 +1,30 @@ + + + + + + + 4Geeks Academy + + + + +

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/06-center-content/styles.css b/.learn/resets/06-center-content/styles.css new file mode 100644 index 0000000..0074cfc --- /dev/null +++ b/.learn/resets/06-center-content/styles.css @@ -0,0 +1,3 @@ +body{ + background:blue; +} \ No newline at end of file diff --git a/.learn/resets/07-Sidebar/index.html b/.learn/resets/07-Sidebar/index.html new file mode 100644 index 0000000..12ce8cb --- /dev/null +++ b/.learn/resets/07-Sidebar/index.html @@ -0,0 +1,19 @@ + + + + + + 4Geeks Academy + + + + +
+ +
+ This is my content, This is my content, This is my content, This is my content, This is my content, This is my content, This is my + content, +
+
+ + diff --git a/.learn/resets/07-Sidebar/styles.css b/.learn/resets/07-Sidebar/styles.css new file mode 100644 index 0000000..fe50855 --- /dev/null +++ b/.learn/resets/07-Sidebar/styles.css @@ -0,0 +1,11 @@ +#wrapper { + background: grey; +} + +#sidebar { + background: blue; +} + +#content { + background: yellow; +} \ No newline at end of file diff --git a/.learn/resets/08-Split-Screen-in-three/index.html b/.learn/resets/08-Split-Screen-in-three/index.html new file mode 100644 index 0000000..d1c2895 --- /dev/null +++ b/.learn/resets/08-Split-Screen-in-three/index.html @@ -0,0 +1,17 @@ + + + + + + 4Geeks Academy + + + + +
+
A
+
B
+
C
+
+ + diff --git a/.learn/resets/08-Split-Screen-in-three/styles.css b/.learn/resets/08-Split-Screen-in-three/styles.css new file mode 100644 index 0000000..19b7b7b --- /dev/null +++ b/.learn/resets/08-Split-Screen-in-three/styles.css @@ -0,0 +1,12 @@ +body { + margin: 0; +} +#sectionA { + background: blue; +} +#sectionB { + background: red; +} +#sectionC { + background: green; +} diff --git a/.learn/resets/09-Beautify/index.html b/.learn/resets/09-Beautify/index.html new file mode 100644 index 0000000..c7f42df --- /dev/null +++ b/.learn/resets/09-Beautify/index.html @@ -0,0 +1,37 @@ + + + + + + 4Geeks Academy + + + + +
+
+ The Menu +
+
+ The Content +
+
+
+ The Other Stuff +
+ +
+ Second Content +
+
+ Second Content +
+
+
+ The Extra Stuff +
+
+
+
+ + diff --git a/.learn/resets/09-Beautify/styles.css b/.learn/resets/09-Beautify/styles.css new file mode 100644 index 0000000..2227150 --- /dev/null +++ b/.learn/resets/09-Beautify/styles.css @@ -0,0 +1,29 @@ +#div1 { + background-color: red; + width: 150px; + float: left; + height: 100px; + padding: 100px; + text-align: center; + border-radius: 50px; +} +#div2 { + background-color: blue; + height: 100px; + width: 150px; + padding: 25px; + color: white; + text-align: center; + overflow: hidden; + border-radius: 25px; +} +#div3 { + background-color: yellow; + height: 100px; + width: 150px; + padding: 25px; + color: white; + text-align: center; + overflow: hidden; + border-radius: 25px; +} diff --git a/.learn/resets/09.1-Before-and-After/index.html b/.learn/resets/09.1-Before-and-After/index.html new file mode 100644 index 0000000..37e1038 --- /dev/null +++ b/.learn/resets/09.1-Before-and-After/index.html @@ -0,0 +1,15 @@ + + + + + + + 4Geeks Academy + + + + +

Hello World

+ + + \ No newline at end of file diff --git a/.learn/resets/09.1-Before-and-After/styles.css b/.learn/resets/09.1-Before-and-After/styles.css new file mode 100644 index 0000000..a3e954e --- /dev/null +++ b/.learn/resets/09.1-Before-and-After/styles.css @@ -0,0 +1,12 @@ +h1::before { + content: " "; + border-top: 45px solid transparent; + border-bottom: 45px solid transparent; + border-right:45px solid blue; + height: 0px; + margin-bottom: -35px; + margin-right: 20px; + display: inline-block; + } + + diff --git a/.learn/resets/09.2-Calendar-icon/index.html b/.learn/resets/09.2-Calendar-icon/index.html new file mode 100644 index 0000000..e6eeb14 --- /dev/null +++ b/.learn/resets/09.2-Calendar-icon/index.html @@ -0,0 +1,13 @@ + + + + + + 4Geeks Academy + + + + +

7

+ + diff --git a/.learn/resets/09.2-Calendar-icon/styles.css b/.learn/resets/09.2-Calendar-icon/styles.css new file mode 100644 index 0000000..6e0f946 --- /dev/null +++ b/.learn/resets/09.2-Calendar-icon/styles.css @@ -0,0 +1,47 @@ +.calendar { + top: 0em; + left: 1em; + padding-top: 5px; + width: 80px; + background: #ededef; + font-size: 54px; + text-align: center; + color: #000; + + border-radius: 3px; + position: absolute; +} + +.calendar em { + display: block; + font-size: 15px; + color: #fff; + background: #04599a; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} + +.calendar::before, .calendar:after{ + content:''; + float:left; + width:8px; + height:8px; + background:#111; + z-index:1; + border-radius:10px; + box-shadow:0 1px 1px #fff; + } +.calendar::before{left:11px;} +.calendar::after{right:11px;} + +.calendar em::before, .calendar em::after{ + content:''; + float: left; + margin: 10px; + width:4px; + height:14px; + background:blue; + z-index:2; + } +.calendar em::before{left:13px;} +.calendar em::after{right:13px;} diff --git a/.learn/resets/10-static-layout/index.html b/.learn/resets/10-static-layout/index.html new file mode 100644 index 0000000..2449bf8 --- /dev/null +++ b/.learn/resets/10-static-layout/index.html @@ -0,0 +1,20 @@ + + + + + + 4Geeks Academy + + + + +
+

Static Layout Example

+
HEADER
+
+ +
SECTION
+
+
+ + diff --git a/.learn/resets/10-static-layout/styles.css b/.learn/resets/10-static-layout/styles.css new file mode 100644 index 0000000..5ff7bd9 --- /dev/null +++ b/.learn/resets/10-static-layout/styles.css @@ -0,0 +1,38 @@ +/* your code here */ + +/************************************** +DON'T CHANGE ANYTHING AFTER THIS LINE +**************************************/ + +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +body { + background: #2980b9; + color: #fff; + font-family: Helvetica; + text-align: center; + margin: 0; +} + +header, +nav, +section { + border: 1px solid rgba(255, 255, 255, 0.8); + margin-bottom: 10px; + border-radius: 3px; +} + +header { + padding: 10px 0; +} + +nav, +section { + padding: 100px 0; +} diff --git a/exercises/02-Display-none/styles.css b/exercises/02-Display-none/styles.css index 7cff986..3b88cd7 100644 --- a/exercises/02-Display-none/styles.css +++ b/exercises/02-Display-none/styles.css @@ -1,4 +1,16 @@ /* your code here */ -#myFirstH2{ - visibility: visible; -} \ No newline at end of file +#myFirstH2 { + visibility: hidden; +} + +#mySecondH2 { + display: none; +} + +#myUL li { + display: inline; +} + +strong { + display: block; +} diff --git a/exercises/03-Position-relative-vs-absolute/index.html b/exercises/03-Position-relative-vs-absolute/index.html index a0a99f7..fcde7e0 100644 --- a/exercises/03-Position-relative-vs-absolute/index.html +++ b/exercises/03-Position-relative-vs-absolute/index.html @@ -8,7 +8,7 @@
-
+

This will be a secondary content

diff --git a/exercises/03-Position-relative-vs-absolute/styles.css b/exercises/03-Position-relative-vs-absolute/styles.css index 93bcfdc..954efa1 100644 --- a/exercises/03-Position-relative-vs-absolute/styles.css +++ b/exercises/03-Position-relative-vs-absolute/styles.css @@ -1,23 +1,23 @@ body { - background: gray; + background: gray; } #firstDiv { - background: blue; - width: 100px; - height: 100px; + background: blue; + width: 100px; + height: 100px; } #secondDiv { - background: yellow; - width: 100px; - height: 100px; + background: yellow; + width: 100px; + height: 100px; } .absolutePositionExample { - position: absolute; - top: 20px; - left: 20px; + position: absolute; + top: 20px; + left: 20px; } .relativePositionExample { - position: relative; - top: 20px; - left: 20px; + position: relative; + top: 20px; + left: 20px; } diff --git a/exercises/04-Move-image-behind-the-text/styles.css b/exercises/04-Move-image-behind-the-text/styles.css index 27b481b..f2354aa 100644 --- a/exercises/04-Move-image-behind-the-text/styles.css +++ b/exercises/04-Move-image-behind-the-text/styles.css @@ -2,4 +2,5 @@ position: absolute; left: 0px; top: 0px; + z-index: -1; } diff --git a/exercises/05-Float-example/styles.css b/exercises/05-Float-example/styles.css index 8fcd957..90c5049 100644 --- a/exercises/05-Float-example/styles.css +++ b/exercises/05-Float-example/styles.css @@ -1,3 +1,5 @@ -#myImage{ - max-width: 250px; -} \ No newline at end of file +#myImage { + max-width: 250px; + float: left; + margin-right: 10px; +} diff --git a/exercises/06-center-content/index.html b/exercises/06-center-content/index.html index 51174ff..85fd2b6 100644 --- a/exercises/06-center-content/index.html +++ b/exercises/06-center-content/index.html @@ -1,30 +1,31 @@ + + + + 4Geeks Academy + + - - - - 4Geeks Academy - - - - -

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

- - + +
+

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/exercises/06-center-content/solution.hide.html b/exercises/06-center-content/solution.hide.html index 1a95b9c..85fd2b6 100644 --- a/exercises/06-center-content/solution.hide.html +++ b/exercises/06-center-content/solution.hide.html @@ -11,7 +11,9 @@

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.

+

+ 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. You understand what the teacher is talking about.
    3. diff --git a/exercises/06-center-content/styles.css b/exercises/06-center-content/styles.css index 0074cfc..5a6442c 100644 --- a/exercises/06-center-content/styles.css +++ b/exercises/06-center-content/styles.css @@ -1,3 +1,9 @@ -body{ - background:blue; -} \ No newline at end of file +body { + background: blue; +} + +.myDiv { + width: 400px; + background-color: grey; + margin: auto; +} diff --git a/exercises/07-Sidebar/styles.css b/exercises/07-Sidebar/styles.css index fe50855..089b104 100644 --- a/exercises/07-Sidebar/styles.css +++ b/exercises/07-Sidebar/styles.css @@ -1,11 +1,16 @@ #wrapper { - background: grey; + background: grey; + height: 100px; + width: 100%; + display: flex; } #sidebar { - background: blue; + background: grey; + width: 30%; } #content { - background: yellow; -} \ No newline at end of file + background: green; + width: 70%; +} diff --git a/exercises/08-Split-Screen-in-three/styles.css b/exercises/08-Split-Screen-in-three/styles.css index 19b7b7b..cb487f9 100644 --- a/exercises/08-Split-Screen-in-three/styles.css +++ b/exercises/08-Split-Screen-in-three/styles.css @@ -1,12 +1,24 @@ body { margin: 0; } + +#wrapper { + display: flex; + width: 100%; + background-color: gray; +} + #sectionA { background: blue; + width: 33.3333333333333333333333%; } + #sectionB { background: red; + width: 33.3333333333333333333333%; } + #sectionC { background: green; + width: 33.3333333333333333333333%; } diff --git a/exercises/09-Beautify/index.html b/exercises/09-Beautify/index.html index c7f42df..fa1a6a3 100644 --- a/exercises/09-Beautify/index.html +++ b/exercises/09-Beautify/index.html @@ -16,21 +16,16 @@ The Content
-
- The Other Stuff -
- -
- Second Content -
-
- Second Content -
-
-
- The Extra Stuff -
-
+ The Other Stuff +
+
+ Second Content +
+
+ Second Content +
+
+ The Extra Stuff
diff --git a/exercises/09-Beautify/styles.css b/exercises/09-Beautify/styles.css index 2227150..6522d71 100644 --- a/exercises/09-Beautify/styles.css +++ b/exercises/09-Beautify/styles.css @@ -27,3 +27,35 @@ overflow: hidden; border-radius: 25px; } + +#div4 { + background-color: blue; + width: 150px; + float: left; + height: 100px; + padding: 100px; + text-align: center; + border-radius: 50px; +} + +#div5 { + background-color: red; + height: 100px; + width: 150px; + padding: 25px; + color: white; + text-align: center; + overflow: hidden; + border-radius: 25px; +} + +#div6 { + background-color: black; + height: 100px; + width: 150px; + padding: 25px; + color: white; + text-align: center; + overflow: hidden; + border-radius: 25px; +} diff --git a/exercises/09.1-Before-and-After/index.html b/exercises/09.1-Before-and-After/index.html index 37e1038..e392a3e 100644 --- a/exercises/09.1-Before-and-After/index.html +++ b/exercises/09.1-Before-and-After/index.html @@ -1,15 +1,13 @@ + + + + 4Geeks Academy + + - - - - 4Geeks Academy - - - - -

Hello World

- - - \ No newline at end of file + +

Hello World

+ + diff --git a/exercises/09.1-Before-and-After/styles.css b/exercises/09.1-Before-and-After/styles.css index a3e954e..db5ecfe 100644 --- a/exercises/09.1-Before-and-After/styles.css +++ b/exercises/09.1-Before-and-After/styles.css @@ -1,12 +1,21 @@ h1::before { - content: " "; - border-top: 45px solid transparent; - border-bottom: 45px solid transparent; - border-right:45px solid blue; - height: 0px; - margin-bottom: -35px; - margin-right: 20px; - display: inline-block; - } - + content: " "; + border-top: 45px solid transparent; + border-bottom: 45px solid transparent; + border-right: 45px solid blue; + height: 0px; + margin-bottom: -35px; + margin-right: 20px; + display: inline-block; +} +h1::after { + content: " "; + border-top: 45px solid transparent; + border-bottom: 45px solid transparent; + border-left: 45px solid blue; + height: 0px; + margin-bottom: -35px; + margin-left: 20px; + display: inline-block; +} diff --git a/exercises/09.2-Calendar-icon/styles.css b/exercises/09.2-Calendar-icon/styles.css index 6e0f946..ed6a989 100644 --- a/exercises/09.2-Calendar-icon/styles.css +++ b/exercises/09.2-Calendar-icon/styles.css @@ -21,27 +21,44 @@ border-bottom-left-radius: 3px; } -.calendar::before, .calendar:after{ - content:''; - float:left; - width:8px; - height:8px; - background:#111; - z-index:1; - border-radius:10px; - box-shadow:0 1px 1px #fff; - } -.calendar::before{left:11px;} -.calendar::after{right:11px;} +.calendar::before, +.calendar:after { + position: absolute; + content: ""; + float: left; + width: 8px; + height: 8px; + background: #111; + z-index: 1; + border-radius: 10px; + box-shadow: 0 1px 1px #fff; +} +.calendar::before { + top: 4px; + left: 11px; +} +.calendar::after { + top: 4px; + right: 11px; +} -.calendar em::before, .calendar em::after{ - content:''; +.calendar em::before, +.calendar em::after { + position: absolute; + content: ""; float: left; margin: 10px; - width:4px; - height:14px; - background:blue; - z-index:2; - } -.calendar em::before{left:13px;} -.calendar em::after{right:13px;} + width: 4px; + height: 14px; + background: grey; + z-index: 2; + border-radius: 5px; +} +.calendar em::before { + top: -16px; + left: 3px; +} +.calendar em::after { + top: -16px; + right: 3px; +} diff --git a/exercises/10-static-layout/styles.css b/exercises/10-static-layout/styles.css index 5ff7bd9..15b2aac 100644 --- a/exercises/10-static-layout/styles.css +++ b/exercises/10-static-layout/styles.css @@ -10,6 +10,7 @@ DON'T CHANGE ANYTHING AFTER THIS LINE -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; + margin: auto; } body { @@ -17,7 +18,7 @@ body { color: #fff; font-family: Helvetica; text-align: center; - margin: 0; + max-width: 600px; } header, @@ -36,3 +37,16 @@ nav, section { padding: 100px 0; } + +.secondWrapper { + display: flex; +} + +.secondWrapper nav { + width: 145px; + margin-right: 10px; +} + +.secondWrapper section { + width: 445px; +}