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/03-Position-relative-vs-absolute/index.html b/.learn/resets/03-Position-relative-vs-absolute/index.html new file mode 100644 index 0000000..a0a99f7 --- /dev/null +++ b/.learn/resets/03-Position-relative-vs-absolute/index.html @@ -0,0 +1,14 @@ + + + + + + 4Geeks Academy + + + +
+
+

This will be a secondary content

+ + diff --git a/.learn/resets/03-Position-relative-vs-absolute/styles.css b/.learn/resets/03-Position-relative-vs-absolute/styles.css new file mode 100644 index 0000000..93bcfdc --- /dev/null +++ b/.learn/resets/03-Position-relative-vs-absolute/styles.css @@ -0,0 +1,23 @@ +body { + background: gray; +} +#firstDiv { + background: blue; + width: 100px; + height: 100px; +} +#secondDiv { + background: yellow; + width: 100px; + height: 100px; +} +.absolutePositionExample { + position: absolute; + top: 20px; + left: 20px; +} +.relativePositionExample { + position: relative; + top: 20px; + left: 20px; +} 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..7f2a2b8 --- /dev/null +++ b/.learn/resets/07-Sidebar/index.html @@ -0,0 +1,19 @@ + + + + + + 4Geeks Academy + + + + +
+
This is my sidebar.
+
+ 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..706c2e6 --- /dev/null +++ b/.learn/resets/07-Sidebar/styles.css @@ -0,0 +1,12 @@ +.wrapper { + width: 100%; + height: 100px; +} + +.sidebar { + background: #999; +} + +.content { + background: #2e6833; +} 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..d5be8b7 --- /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..c6a8ef5 --- /dev/null +++ b/.learn/resets/08-Split-Screen-in-three/styles.css @@ -0,0 +1,17 @@ +body { + margin: 0; +} + +.boxA { + background: #4682B4; + +} + +.boxB { + background: #A9A9A9; + +} + +.boxC { + background: #FFA500; +} diff --git a/.learn/resets/09-Beautify/index.html b/.learn/resets/09-Beautify/index.html new file mode 100644 index 0000000..52034f8 --- /dev/null +++ b/.learn/resets/09-Beautify/index.html @@ -0,0 +1,41 @@ + + + + + + 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..a3702c7 --- /dev/null +++ b/.learn/resets/09-Beautify/styles.css @@ -0,0 +1,43 @@ +body { + background: white; + font-family: sans-serif; + margin: 0; +} + +.wrapper { + display: block; + margin: 20px; +} + +#div1 { + background-color: red; + width: 150px; + height: 100px; + padding: 100px; + text-align: center; + border-radius: 50px; + +} + +#div2 { + background-color: blue; + width: 150px; + height: 100px; + padding: 25px; + color: white; + text-align: center; + border-radius: 25px; + +} + +#div3 { + background-color: yellow; + width: 150px; + height: 100px; + padding: 25px; + color: white; + text-align: center; + 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..e27dcd8 100644 --- a/exercises/02-Display-none/styles.css +++ b/exercises/02-Display-none/styles.css @@ -1,4 +1,15 @@ /* 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/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..08acfc5 100644 --- a/exercises/04-Move-image-behind-the-text/styles.css +++ b/exercises/04-Move-image-behind-the-text/styles.css @@ -3,3 +3,6 @@ left: 0px; top: 0px; } +#myImage { + 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..779b2fe 100644 --- a/exercises/06-center-content/styles.css +++ b/exercises/06-center-content/styles.css @@ -1,3 +1,8 @@ -body{ - background:blue; -} \ No newline at end of file +body { + background: blue; +} +.myDiv { + width: 400px; + background: grey; + margin: auto; +} diff --git a/exercises/07-Sidebar/styles.css b/exercises/07-Sidebar/styles.css index 706c2e6..3aa17c4 100644 --- a/exercises/07-Sidebar/styles.css +++ b/exercises/07-Sidebar/styles.css @@ -1,12 +1,15 @@ .wrapper { - width: 100%; - height: 100px; + width: 100%; + height: 100px; + display: flex; } .sidebar { + width: 30%; background: #999; } .content { + width: 70%; background: #2e6833; } diff --git a/exercises/08-Split-Screen-in-three/solution.hide.css b/exercises/08-Split-Screen-in-three/solution.hide.css index d6c7908..81d42b7 100644 --- a/exercises/08-Split-Screen-in-three/solution.hide.css +++ b/exercises/08-Split-Screen-in-three/solution.hide.css @@ -1,24 +1,24 @@ body { - margin: 0; + margin: 0; } .wrapper { - display: flex; - width: 100%; - height: 100px; + display: flex; + width: 100%; + height: 100px; } .boxA { - background: #4682B4; - width: 33.33%; + background: #4682b4; + width: 33.33%; } .boxB { - background: #A9A9A9; - width: 33.33%; + background: #a9a9a9; + width: 33.33%; } .boxC { - background: #FFA500; - width: 33.33%; + background: #ffa500; + width: 33.33%; } diff --git a/exercises/08-Split-Screen-in-three/styles.css b/exercises/08-Split-Screen-in-three/styles.css index c6a8ef5..1016d35 100644 --- a/exercises/08-Split-Screen-in-three/styles.css +++ b/exercises/08-Split-Screen-in-three/styles.css @@ -1,17 +1,22 @@ body { - margin: 0; + margin: 0; } +.wrapper { + display: flex; + width: 100%; +} .boxA { - background: #4682B4; - + background: #4682b4; + width: 33.33%; } .boxB { - background: #A9A9A9; - + background: #a9a9a9; + width: 33.33%; } .boxC { - background: #FFA500; + background: #ffa500; + width: 33.33%; } diff --git a/exercises/09-Beautify/index.html b/exercises/09-Beautify/index.html index 52034f8..e14fa54 100644 --- a/exercises/09-Beautify/index.html +++ b/exercises/09-Beautify/index.html @@ -8,34 +8,33 @@ -
    -
    - The Menu -
    +
    +
    +
    + The Menu +
    -
    - The Content -
    +
    + Second Content +
    +
    +
    +
    + The Content +
    -
    -
    - The Other Stuff -
    +
    + The Other Stuff +
    -
    - Second Content -
    +
    + Second Content +
    -
    - Second Content -
    - -
    -
    - The Extra Stuff -
    -
    -
    -
    - +
    + The Extra Stuff +
    +
    +
    + diff --git a/exercises/09-Beautify/solution.hide.css b/exercises/09-Beautify/solution.hide.css index 1cf78c7..1db18b4 100644 --- a/exercises/09-Beautify/solution.hide.css +++ b/exercises/09-Beautify/solution.hide.css @@ -23,7 +23,6 @@ body { margin-left: 20px; } - .common-box { display: flex; justify-content: center; @@ -32,14 +31,12 @@ body { font-weight: bold; } - #div1, #div2 { width: 300px; height: 300px; } - #div3, #div4, #div5, @@ -50,7 +47,6 @@ body { color: white; } - #div1 { background-color: red; border-radius: 50px; diff --git a/exercises/09-Beautify/solution.hide.html b/exercises/09-Beautify/solution.hide.html index 9074bb8..7fc5709 100644 --- a/exercises/09-Beautify/solution.hide.html +++ b/exercises/09-Beautify/solution.hide.html @@ -1,39 +1,37 @@ + + + + 4Geeks Academy + + - - - - 4Geeks Academy - - - - -
    -
    -
    - The Menu -
    -
    - Second Content + +
    +
    +
    + The Menu +
    +
    + Second Content +
    -
    -
    -
    - The Content -
    -
    - The Other Stuff -
    -
    - Second Content -
    -
    - The Extra Stuff +
    +
    + The Content +
    +
    + The Other Stuff +
    +
    + Second Content +
    +
    + The Extra Stuff +
    -
    - - - \ No newline at end of file + + diff --git a/exercises/09-Beautify/styles.css b/exercises/09-Beautify/styles.css index a3702c7..ae0c1e5 100644 --- a/exercises/09-Beautify/styles.css +++ b/exercises/09-Beautify/styles.css @@ -5,29 +5,37 @@ body { } .wrapper { - display: block; + display: flex; margin: 20px; + gap: 20px; +} +.left-column { + flex-direction: column; +} +.right-column { + flex-direction: column; } - #div1 { background-color: red; width: 150px; height: 100px; - padding: 100px; - text-align: center; + padding: 100px; + display: flex; + justify-content: center; + align-items: center; border-radius: 50px; - } #div2 { background-color: blue; width: 150px; height: 100px; - padding: 25px; + padding: 100px; color: white; - text-align: center; + display: flex; + justify-content: center; + align-items: center; border-radius: 25px; - } #div3 { @@ -36,8 +44,40 @@ body { height: 100px; padding: 25px; color: white; - text-align: center; + display: flex; + justify-content: center; + align-items: center; + border-radius: 25px; +} +#div4 { + background-color: blue; + width: 150px; + height: 100px; + padding: 25px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50px; +} +#div5 { + background-color: red; + width: 150px; + height: 100px; + padding: 25px; + color: white; + display: flex; + justify-content: center; + align-items: center; + border-radius: 25px; +} +#div6 { + background-color: black; + width: 150px; + height: 100px; + padding: 25px; + color: white; + display: flex; + justify-content: center; + align-items: center; 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..300176c 100644 --- a/exercises/09.1-Before-and-After/styles.css +++ b/exercises/09.1-Before-and-After/styles.css @@ -1,12 +1,20 @@ 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-left: 45px solid blue; + border-bottom: 45px solid transparent; + 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..e362b42 100644 --- a/exercises/09.2-Calendar-icon/styles.css +++ b/exercises/09.2-Calendar-icon/styles.css @@ -2,9 +2,10 @@ top: 0em; left: 1em; padding-top: 5px; - width: 80px; + width: 150px; + height: 150px; background: #ededef; - font-size: 54px; + font-size: 110px; text-align: center; color: #000; @@ -21,27 +22,42 @@ 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: ""; + top: 5px; + float: left; + width: 15px; + height: 15px; + background: #111; + z-index: 1; + border-radius: 10px; + box-shadow: 0 1px 1px #fff; +} +.calendar::before { + left: 16px; +} +.calendar::after { + right: 16px; +} -.calendar em::before, .calendar em::after{ - content:''; +.calendar em::before, +.calendar em::after { + position: absolute; + top: -18px; + 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: 7px; + height: 19px; + background: #ededef; + z-index: 2; + border-radius: 3px 3px 3px 3px; +} +.calendar em::before { + left: 10px; +} +.calendar em::after { + right: 10px; +} diff --git a/exercises/10-static-layout/styles.css b/exercises/10-static-layout/styles.css index 5ff7bd9..43d35df 100644 --- a/exercises/10-static-layout/styles.css +++ b/exercises/10-static-layout/styles.css @@ -30,9 +30,25 @@ section { header { padding: 10px 0; + margin-left: 5px; + margin-right: 5px; } nav, section { padding: 100px 0; } + +.secondWrapper { + display: flex; + gap: 10px; +} +.secondWrapper section { + width: 80%; + margin-right: 5px; +} +.secondWrapper nav { + float: left; + width: 20%; + margin-left: 5px; +}