diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 78865286..cda950c6 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -7,6 +7,7 @@ /* Use float to get this container in its desired location. */ .content-left { + float: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; @@ -18,6 +19,7 @@ .content-mid { width: 66%; + float: right; /* This height is a placeholder. You will need to make some adjustments to get this container to look like the design. */ height: 100px; background: #B0B0B0; @@ -26,6 +28,7 @@ /* Use float to get this container to the bottom of the screen */ .footer { + float:clear; width: 100%; height: 100px; background: #3A3A3A; diff --git a/level-1/step-2/step-2.css b/level-1/step-2/step-2.css index 73095f05..3ef14bec 100644 --- a/level-1/step-2/step-2.css +++ b/level-1/step-2/step-2.css @@ -1,19 +1,23 @@ /* Step-2 You can assign padding to all sides of a container by using the padding shorthand property. */ .content-left { - + padding: 20 20 20 20 px; } /* Step 2 You can assign padding to all sides of a container by using the padding shorthand property. */ .header { + padding: 20 20 20 20 px; } /* Step-2 One option to get the container to fill the parent container is to use width: auto; */ .profile-image-container { + height:auto ; + width:auto ; + margin-bottom: auto; background: #96F0F2; } @@ -21,18 +25,26 @@ .profile-links-container { background: #12F3F7; + height:auto ; + width: auto; } /* Step-2 You can either use float left to get this element to in the desired location. */ .logo-container { background: #4F4949; + height:auto ; + width: auto; +float: left; } /* Step-2 You can either use float right to get this element to in the desired location. */ .menu-container { + height:auto ; + width: auto; +float:right; background: #4F4949; } diff --git a/level-1/step-3/step-3.css b/level-1/step-3/step-3.css index 5589c8b2..78ce4931 100755 --- a/level-1/step-3/step-3.css +++ b/level-1/step-3/step-3.css @@ -1,17 +1,27 @@ /* Step-3 You can assign padding to all sides of a container by using the padding shorthand property. */ .content-mid { + padding: 80 80 80 80px; } .content-mid-header { + width:auto ; + height:auto ; background: #444; } .content-container { + width:auto ; + height:auto ; } .content { background: #D8D8D8; + width:auto ; + height:auto ; + text-align: center; + padding: 20 20 20 20px; + } diff --git a/level-2/step-2/step-2.css b/level-2/step-2/step-2.css index eec2909b..b9d53778 100755 --- a/level-2/step-2/step-2.css +++ b/level-2/step-2/step-2.css @@ -1,14 +1,15 @@ /* Step-2 add a text-align that will align items in the center. */ .main-bottom-section { margin-top: 65px; + text-align: center; /* alignment property */ } /* Step-2 Add a width, height and display property to make these containers look like the design. */ .item { - /*width*/ - /*height*/ - /*display*/ + width :20; + height : 40; + display :inline; margin: 0 20px 30px; background: #DED6D3; margin-bottom: 30px; diff --git a/level-3/index.html b/level-3/index.html index 76bd928e..3fa94890 100755 --- a/level-3/index.html +++ b/level-3/index.html @@ -20,21 +20,21 @@
- +
- shop icon + shop icon
diff --git a/level-3/step-1/step-1.css b/level-3/step-1/step-1.css index 94fbbe10..2d060d3a 100644 --- a/level-3/step-1/step-1.css +++ b/level-3/step-1/step-1.css @@ -4,6 +4,7 @@ width: 100%; height: 200px; position: relative; + color: #F2EFE5; }