From d59adb85505a09430d72f2b2437fe53596d5be55 Mon Sep 17 00:00:00 2001 From: ayseakyol Date: Tue, 14 Jan 2020 22:32:02 +0100 Subject: [PATCH 1/5] step-1 --- level-1/index.html | 6 +++++- level-1/step-1/step-1.css | 32 +++++++++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/level-1/index.html b/level-1/index.html index 4de4033c..756b6114 100644 --- a/level-1/index.html +++ b/level-1/index.html @@ -21,6 +21,7 @@
+

HEADER

@@ -31,6 +32,7 @@
+

content-left

@@ -39,6 +41,7 @@
+

content-mid

@@ -52,7 +55,8 @@
-
+
+

FOOTER

diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 78865286..95afa554 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -2,15 +2,27 @@ width: 100%; height: 100px; background: #D8D8D8; + color: black; + text-align: center; + font-size: 35px; + font-weight: 600; + line-height: 100px; } + /* Use float to get this container in its desired location. */ .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; + height: 785px; background: #565555; + float:left; + color: white; + text-align: center; + font-size: 35px; + font-weight: 600; + line-height: 700px; } @@ -19,14 +31,28 @@ .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: 785px; background: #B0B0B0; + float:right; + color: black; + text-align: center; + font-size: 35px; + font-weight: 600; + line-height: 700px; } + /* Use float to get this container to the bottom of the screen */ .footer { width: 100%; height: 100px; background: #3A3A3A; -} \ No newline at end of file + position:absolute; + bottom:0; + color: white; + text-align: center; + font-size: 35px; + font-weight: 600; + line-height: 100px; +} From f5d9da85e72a0d4bc699d4f83bc72541ef27230a Mon Sep 17 00:00:00 2001 From: ayseakyol Date: Tue, 14 Jan 2020 23:10:21 +0100 Subject: [PATCH 2/5] step-2 --- level-1/index.html | 9 ++++----- level-1/step-1/step-1.css | 8 ++++---- level-1/step-2/step-2.css | 21 +++++++++++++++++++++ 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/level-1/index.html b/level-1/index.html index 756b6114..1748a501 100644 --- a/level-1/index.html +++ b/level-1/index.html @@ -21,7 +21,7 @@
-

HEADER

+
@@ -32,7 +32,7 @@

HEADER

-

content-left

+
@@ -41,8 +41,7 @@

content-left

-

content-mid

- +
@@ -56,7 +55,7 @@

content-mid

-

FOOTER

+ FOOTER
diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 95afa554..61ec46f9 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -47,12 +47,12 @@ .footer { width: 100%; height: 100px; - background: #3A3A3A; + background: #D8D8D8; position:absolute; bottom:0; - color: white; + color: black; text-align: center; - font-size: 35px; - font-weight: 600; + font-size: 25px; + font-weight: bold; line-height: 100px; } diff --git a/level-1/step-2/step-2.css b/level-1/step-2/step-2.css index 73095f05..50f95070 100644 --- a/level-1/step-2/step-2.css +++ b/level-1/step-2/step-2.css @@ -1,12 +1,14 @@ /* 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 +17,27 @@ .profile-image-container { background: #96F0F2; + width: auto; + height: 30%; + margin-bottom:20px; } /* 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:6%; + height:100%; + float: right; } @@ -34,7 +45,17 @@ .menu-container { background: #4F4949; + width:30%; + height: 100%; + float: left; } +position:absolute; + bottom:0; + color: white; + text-align: center; + font-size: 35px; + font-weight: 600; + line-height: 100px; \ No newline at end of file From 93bad4ec1e9c3e1156b2e1147a5acde5e0d27a66 Mon Sep 17 00:00:00 2001 From: ayseakyol Date: Wed, 15 Jan 2020 00:00:06 +0100 Subject: [PATCH 3/5] step-3 --- level-1/index.html | 2 +- level-1/step-1/step-1.css | 7 ++++--- level-1/step-3/step-3.css | 11 +++++++++++ 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/level-1/index.html b/level-1/index.html index 1748a501..2c0040a9 100644 --- a/level-1/index.html +++ b/level-1/index.html @@ -46,7 +46,7 @@
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend vehicula ex, eget bibendum ligula efficitur sit amet. Phasellus finibus euismod ipsum sed tempor. Pellentesque eu leo vel metus aliquam pellentesque.
diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 61ec46f9..a0ad5d53 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -36,9 +36,10 @@ float:right; color: black; text-align: center; - font-size: 35px; - font-weight: 600; - line-height: 700px; + font-size: 15px; + line-height:2em; + font-weight: bold; + } diff --git a/level-1/step-3/step-3.css b/level-1/step-3/step-3.css index 5589c8b2..50ad0edc 100755 --- a/level-1/step-3/step-3.css +++ b/level-1/step-3/step-3.css @@ -1,17 +1,28 @@ /* 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: 15%; } .content-container { + width: auto; + height: 100%; } .content { background: #D8D8D8; + padding: 20px; + width: auto; + height: 80%; + text-align: center; + + } From 6438536027b220c478955a03cb036e5392cac18d Mon Sep 17 00:00:00 2001 From: ayseakyol Date: Tue, 21 Jan 2020 17:02:45 +0100 Subject: [PATCH 4/5] level-2 step1 --- level-2/step-1/step-1.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/level-2/step-1/step-1.css b/level-2/step-1/step-1.css index 465e6e3f..5d48624c 100755 --- a/level-2/step-1/step-1.css +++ b/level-2/step-1/step-1.css @@ -10,6 +10,8 @@ height: 70px; text-align: center; background: #D8D8D8; + display: flex; + justify-content: space-between; } /* Step-1 You need to get all of these elements to line up side by side. What display property would do this for you? */ @@ -24,10 +26,8 @@ .logo { width: 300px; height: 40px; - margin-top: 10px; background: #536A63; display: inline-block; - } .sign-in { From 591484f74a82111b4b7b23e7e74126a4e2c15edf Mon Sep 17 00:00:00 2001 From: ayseakyol Date: Thu, 23 Jan 2020 22:11:11 +0100 Subject: [PATCH 5/5] level2-step2 --- level-2/step-2/step-2.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/level-2/step-2/step-2.css b/level-2/step-2/step-2.css index eec2909b..a71a6342 100755 --- a/level-2/step-2/step-2.css +++ b/level-2/step-2/step-2.css @@ -1,6 +1,7 @@ /* Step-2 add a text-align that will align items in the center. */ .main-bottom-section { margin-top: 65px; + text-align: center; /* alignment property */ } @@ -9,9 +10,12 @@ /*width*/ /*height*/ /*display*/ + display: inline-flex; margin: 0 20px 30px; background: #DED6D3; margin-bottom: 30px; + width: 40%; + height: 200px; } /* Step-2 Add a width, height, and margin property to make these containers look like the design. Remember margin: auto is helpful when trying to center a container. */ @@ -21,6 +25,8 @@ /*margin*/ margin:0 auto 30px; background: #DED6D3; + width: 85%; + height: 150px; } /* Step-2 Add a width, height, and margin property to make these containers look like the design. Remember margin: auto is helpful when trying to center a container. */ @@ -29,6 +35,9 @@ /*height*/ /*margin*/ background: #DED6D3; + width: 85%; + height: 300px; + margin:0 auto 30px; }