Step1 making some changes

level-1/index.html

@@ -22,38 +22,40 @@
 
         <header class="header">
 
-            <div class="logo-container"></div>
+            <div class="logo-container">--My Logo--</div>
 
-            <div class="menu-container"></div>
+            <div class="menu-container">Home | My Profile | Links</div>
 
         </header>
 
         <section class="main-section">
 
             <div class="content-left">
 
-                <div class="profile-image-container" ></div>
+                <div class="profile-image-container" >This is profile image container</div>
 
-                <div class="profile-links-container"></div>
+                <div class="profile-links-container">this is profile link container</div>
 
             </div>
 
             <div class="content-mid">
 
                 <section class="content-container">
 
-                    <header class="content-mid-header"></header>
+                    <header class="content-mid-header"><h1>Git Hub </h1></header>
 
-                    <div class="content"></div>
+                    <div class="content"><p>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]
 
-                </section>
+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]</div>
+
+               </p> </section>
 
             </div>
 
         </section>
 
-        <footer class="footer"> </footer>
+        <footer class="footer"><span>copy right &copy; 2020</span></footer>
 
     </main>
   </body>
-</html>
+</html>

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;
-}
+    position: absolute;
+    bottom: 0;
+}

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;
 }
 
 
 
+

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;
 }