diff --git a/level-1/index.html b/level-1/index.html index 4de4033c..4bd445ff 100644 --- a/level-1/index.html +++ b/level-1/index.html @@ -44,7 +44,7 @@
-
+
Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworde recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
@@ -52,7 +52,7 @@ - + diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 78865286..27ebf362 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -1,7 +1,15 @@ +.body { + font-family: monospace ; +} + .header { width: 100%; height: 100px; background: #D8D8D8; + font-size: 1.5rem; + font-weight: 600; + text-align: center; + line-height: 100px; } /* Use float to get this container in its desired location. */ @@ -9,8 +17,16 @@ .content-left { width: 34%; /* This height is a placeholder. You will need to make some adjustments to get this container to look like the design. */ - height: 100px; + background: #565555; + float: left; + height: 830px; + color: #FFFEFF; + font-size: 1.7rem; + text-align: center; + font-weight: 700; + + } @@ -19,8 +35,14 @@ .content-mid { width: 66%; /* This height is a placeholder. You will need to make some adjustments to get this container to look like the design. */ - height: 100px; + height: 800px; background: #B0B0B0; + float: right; + font-size: 1.1rem; + font-weight: 400; + text-align: center; + + } /* Use float to get this container to the bottom of the screen */ @@ -28,5 +50,21 @@ .footer { width: 100%; height: 100px; - background: #3A3A3A; + background: #D8D8D8; + position: absolute; + bottom: 0px ; + font-size: 1.5rem; + font-weight: 600; + text-align: center; + color: #101010; + line-height: 100px; + margin-bottom: 0px; +} +/* Use float to get this container in its desired location. */ + +.content-left { + + height: 830px; + + } \ No newline at end of file diff --git a/level-1/step-2/step-2.css b/level-1/step-2/step-2.css index 73095f05..33bf6f2c 100644 --- a/level-1/step-2/step-2.css +++ b/level-1/step-2/step-2.css @@ -1,12 +1,15 @@ /* Step-2 You can assign padding to all sides of a container by using the padding shorthand property. */ .content-left { + padding: 20px; + } /* Step 2 You can assign padding to all sides of a container by using the padding shorthand property. */ .header { + padding: 20px; } @@ -15,18 +18,27 @@ .profile-image-container { background: #96F0F2; + width: auto; + height: 25%; + margin-bottom: 30px; } /* Step-2 One option to get the container to fill the parent container is to use width: auto; */ .profile-links-container { background: #12F3F7; + width: auto; + height: 60%; + margin-bottom: 20px; } /* Step-2 You can either use float left to get this element to in the desired location. */ .logo-container { background: #4F4949; + width: 7% ; + height: 100% ; + float: right; } @@ -34,6 +46,9 @@ .menu-container { background: #4F4949; + width: 30% ; + height: 100% ; + float: left; } diff --git a/level-1/step-3/step-3.css b/level-1/step-3/step-3.css index 5589c8b2..d837654e 100755 --- a/level-1/step-3/step-3.css +++ b/level-1/step-3/step-3.css @@ -1,17 +1,29 @@ /* Step-3 You can assign padding to all sides of a container by using the padding shorthand property. */ .content-mid { + padding: 80px; + } .content-mid-header { background: #444; + width: auto; + height: 30% ; } .content-container { + width: auto ; + height: 50%; } .content { background: #D8D8D8; + width:100% ; + height: 400px ; + text-align: center; + line-height: 1.5; + clear: initial; + padding: 15%; } diff --git a/level-2/step-1/step-1.css b/level-2/step-1/step-1.css index 465e6e3f..251d9391 100755 --- a/level-2/step-1/step-1.css +++ b/level-2/step-1/step-1.css @@ -3,15 +3,20 @@ height: 375px; background: #F7F1E7; position: relative; -} + display: inline-flexbox; +} -.top-header { +.top-header{ width: 100%; height: 70px; text-align: center; background: #D8D8D8; + } + + + /* Step-1 You need to get all of these elements to line up side by side. What display property would do this for you? */ .menu { @@ -24,7 +29,6 @@ .logo { width: 300px; height: 40px; - margin-top: 10px; background: #536A63; display: inline-block; @@ -33,6 +37,7 @@ .sign-in { width: 100px; height: 40px; + background: #536A63; float: right; } \ No newline at end of file