diff --git a/level-1/index.html b/level-1/index.html index 4de4033c..28e8a4ce 100644 --- a/level-1/index.html +++ b/level-1/index.html @@ -22,9 +22,9 @@
-
+
--My Logo--
- +
@@ -32,9 +32,9 @@
-
+
This is profile image container
- +
@@ -42,18 +42,20 @@
-
+

Git Hub

-
+

GitHub is a global company that provides hosting for software development version control using Git. It is a subsidiary of Microsoft, which acquired the company in 2018 for $7.5 billion.[3] It offers all of the distributed version control and source code management (SCM) functionality of Git as well as adding its own features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project.[4] -

+GitHub offers plans for free, professional, and enterprise accounts.[5] Free GitHub accounts are commonly used to host open source projects.[6] As of January 2019, GitHub offers unlimited private repositories to all plans, including free accounts.[7] As of May 2019, GitHub reports having over 37 million users[8] and more than 100 million repositories[9] (including at least 28 million public repositories),[10] making it the largest host of source code in the world.[11] + +

- + - \ No newline at end of file + diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 78865286..d410e84a 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -1,16 +1,18 @@ .header { width: 100%; - height: 100px; + height: 200px; background: #D8D8D8; } /* Use float to get this container in its desired location. */ .content-left { + text-align: center; 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: auto; background: #565555; + float: left; } @@ -19,14 +21,19 @@ .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: 550px; background: #B0B0B0; + float: right; } /* Use float to get this container to the bottom of the screen */ .footer { + text-align: center; + color: #fff; width: 100%; height: 100px; background: #3A3A3A; -} \ No newline at end of file + position: absolute; + bottom: 0; +} diff --git a/level-1/step-2/step-2.css b/level-1/step-2/step-2.css index 73095f05..74e545bd 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 20px 20px 20px; } /* Step 2 You can assign padding to all sides of a container by using the padding shorthand property. */ .header { + padding: 20px 20px 20px 20px; } @@ -15,26 +17,38 @@ .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: 30px; } - /* Step-2 You can either use float left to get this element to in the desired location. */ - .logo-container { - background: #4F4949; + background: light-blue; + color: white; + height: 100%; + width: 200px; + float: left; } /* Step-2 You can either use float right to get this element to in the desired location. */ + .menu-container { background: #4F4949; + height: 10%; + width: 200px; + float: right; } + diff --git a/level-1/step-3/step-3.css b/level-1/step-3/step-3.css index 5589c8b2..25377e8c 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 80px 80px 80px; } .content-mid-header { - background: #444; + background: #444; + width: 100%; + color: #fff; + text-align: center; + height: 20%; } .content-container { - + width: 100%; + height: 100%; } .content { background: #D8D8D8; + width: 100%; + height: 450px; + background: #D8D8D8; + padding: 20px 20px 20px 20px; + text-align: center; }