From 0b3fa68f2f37a441aeb73d75bd552a31f6bc8b6b Mon Sep 17 00:00:00 2001 From: feridun Akyol Date: Wed, 15 Jan 2020 22:47:58 +0100 Subject: [PATCH 1/6] step-2 --- level-1/index.html | 2 +- level-1/step-1/step-1.css | 35 ++++++++++++++++++++++++++++++++--- level-1/step-2/step-2.css | 15 +++++++++++++++ 3 files changed, 48 insertions(+), 4 deletions(-) diff --git a/level-1/index.html b/level-1/index.html index 4de4033c..e6701703 100644 --- a/level-1/index.html +++ b/level-1/index.html @@ -52,7 +52,7 @@ - + diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 78865286..538b4f6a 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -1,7 +1,15 @@ +.body { + font-family: Arial, Helvetica, sans-serif; +} + .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,13 @@ .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.7rem; + text-align: center; + font-weight: 700; + line-height: 750px; } /* Use float to get this container to the bottom of the screen */ @@ -28,5 +49,13 @@ .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; } \ 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; } From dfaedb3b0600bf74e56dbfafa6d8aacc115882c3 Mon Sep 17 00:00:00 2001 From: feridun Akyol Date: Wed, 15 Jan 2020 23:12:32 +0100 Subject: [PATCH 2/6] fix the problem with footer and content left-1 --- level-1/step-1/step-1.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 538b4f6a..d7bbafb8 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -46,6 +46,17 @@ /* Use float to get this container to the bottom of the screen */ + + + + + + + + + + + .footer { width: 100%; height: 100px; @@ -58,4 +69,12 @@ 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 From 605fced3b25cc896b7b949d721f090c7d35f8cc9 Mon Sep 17 00:00:00 2001 From: feridun Akyol Date: Wed, 15 Jan 2020 23:22:35 +0100 Subject: [PATCH 3/6] step-2 conflict problem --- level-1/step-1/step-1.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index d7bbafb8..42b68dba 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -46,17 +46,6 @@ /* Use float to get this container to the bottom of the screen */ - - - - - - - - - - - .footer { width: 100%; height: 100px; From d86967566bd5019fb77f9381582d637228444b15 Mon Sep 17 00:00:00 2001 From: feridun Akyol Date: Wed, 15 Jan 2020 23:57:57 +0100 Subject: [PATCH 4/6] step-3 --- level-1/index.html | 2 +- level-1/step-1/step-1.css | 9 +++++---- level-1/step-3/step-3.css | 12 ++++++++++++ 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/level-1/index.html b/level-1/index.html index e6701703..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.
diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 42b68dba..27ebf362 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -1,5 +1,5 @@ .body { - font-family: Arial, Helvetica, sans-serif; + font-family: monospace ; } .header { @@ -38,10 +38,11 @@ height: 800px; background: #B0B0B0; float: right; - font-size: 1.7rem; + font-size: 1.1rem; + font-weight: 400; text-align: center; - font-weight: 700; - line-height: 750px; + + } /* Use float to get this container to the bottom of the screen */ 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%; } From 5c56178879c9d7d8548eda11cd5bd21ec4d42993 Mon Sep 17 00:00:00 2001 From: feridun Akyol Date: Tue, 21 Jan 2020 16:14:44 +0100 Subject: [PATCH 5/6] level2/step1 --- level-2/step-1/step-1.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/level-2/step-1/step-1.css b/level-2/step-1/step-1.css index 465e6e3f..639c6186 100755 --- a/level-2/step-1/step-1.css +++ b/level-2/step-1/step-1.css @@ -3,20 +3,26 @@ 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 { width: 100px; height: 40px; + background: #536A63; float: left; } @@ -33,6 +39,7 @@ .sign-in { width: 100px; height: 40px; + background: #536A63; float: right; } \ No newline at end of file From 395fda00b93c5c4f30ea766fea66598e6298340f Mon Sep 17 00:00:00 2001 From: feridun Akyol Date: Tue, 21 Jan 2020 16:16:10 +0100 Subject: [PATCH 6/6] level2/step1 --- level-2/step-1/step-1.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/level-2/step-1/step-1.css b/level-2/step-1/step-1.css index 639c6186..251d9391 100755 --- a/level-2/step-1/step-1.css +++ b/level-2/step-1/step-1.css @@ -22,7 +22,6 @@ .menu { width: 100px; height: 40px; - background: #536A63; float: left; } @@ -30,7 +29,6 @@ .logo { width: 300px; height: 40px; - margin-top: 10px; background: #536A63; display: inline-block;