diff --git a/level-1/index.html b/level-1/index.html index 4de4033c..2ab5d7a9 100644 --- a/level-1/index.html +++ b/level-1/index.html @@ -44,7 +44,12 @@
-
+
+

Started his hearted any civilly. So me by marianne admitted speaking.
+ Men bred fine call ask. Cease one miles truth day above seven.
+ Suspicion sportsmen provision suffering mrs saw engrossed something.
+ Snug soon he on plan in be dine some.

+
@@ -52,7 +57,11 @@ - + diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css index 78865286..9201d9e9 100755 --- a/level-1/step-1/step-1.css +++ b/level-1/step-1/step-1.css @@ -11,6 +11,8 @@ /* 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; + height: calc( 100vh - 200px ); + float: left; } @@ -19,14 +21,17 @@ .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: calc( 100vh - 200px ); background: #B0B0B0; + float: right; } /* Use float to get this container to the bottom of the screen */ .footer { + position: absolute; width: 100%; height: 100px; background: #3A3A3A; + bottom: 0; } \ 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..90a218b4 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,17 +17,25 @@ .profile-image-container { background: #96F0F2; + width: auto; + height: 35%; + margin-bottom: 23px; } /* Step-2 One option to get the container to fill the parent container is to use width: auto; */ .profile-links-container { + height: calc( 70% - 20px ); background: #12F3F7; + width: auto; } /* Step-2 You can either use float left to get this element to in the desired location. */ .logo-container { + float: left; + height: 100%; + width: 300px; background: #4F4949; } @@ -33,6 +43,9 @@ /* Step-2 You can either use float right to get this element to in the desired location. */ .menu-container { + float: right; + width: 50px; + height: 100%; background: #4F4949; } diff --git a/level-1/step-3/step-3.css b/level-1/step-3/step-3.css index 5589c8b2..7cb9254d 100755 --- a/level-1/step-3/step-3.css +++ b/level-1/step-3/step-3.css @@ -1,17 +1,33 @@ /* 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: 25%; } .content-container { + width: auto; + height: 100%; } .content { + height: 90%; + width: auto; + padding: 20px; + text-align: center; background: #D8D8D8; } + +.footer { + background: rgb(131, 115, 115); + text-align: center; + padding-top: 30px; + font-size: 50px; +} diff --git a/level-2/index.html b/level-2/index.html index 9f40e412..4bca6b38 100644 --- a/level-2/index.html +++ b/level-2/index.html @@ -16,6 +16,8 @@
+ +
@@ -23,6 +25,7 @@
+
diff --git a/level-2/step-1/step-1.css b/level-2/step-1/step-1.css index 465e6e3f..899f44ce 100755 --- a/level-2/step-1/step-1.css +++ b/level-2/step-1/step-1.css @@ -19,6 +19,7 @@ height: 40px; background: #536A63; float: left; + } .logo { @@ -35,4 +36,5 @@ height: 40px; background: #536A63; float: right; + } \ No newline at end of file diff --git a/level-2/step-2/step-2.css b/level-2/step-2/step-2.css index eec2909b..5f27b742 100755 --- a/level-2/step-2/step-2.css +++ b/level-2/step-2/step-2.css @@ -1,33 +1,32 @@ /* 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*/ - margin: 0 20px 30px; + width: 43%; + height: 220px; + display: inline-block; background: #DED6D3; margin-bottom: 30px; } /* 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. */ .full-width-item { - /*width*/ - /*height*/ - /*margin*/ - margin:0 auto 30px; + width: 80%; + height: 220; + margin: 0 auto 32px; background: #DED6D3; } /* 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. */ .large-item { - /*width*/ - /*height*/ - /*margin*/ + width: 86%; + height: 520px; + margin: 0 auto 32px; background: #DED6D3; } diff --git a/level-3/index.html b/level-3/index.html index 76bd928e..beb5f83e 100755 --- a/level-3/index.html +++ b/level-3/index.html @@ -2,81 +2,67 @@ - - level-3 - + + level-3 + - - + + - - + + -
- menu icon + menu icon
- shop icon + shop icon
- - tops - + tops
- - bottoms - + bottoms
- - accessories - + accessories
- - collection - + collection
- - kicks - + kicks
- - hats - + hats
-
- + \ No newline at end of file diff --git a/level-3/step-1/step-1.css b/level-3/step-1/step-1.css index 94fbbe10..b97c36a6 100644 --- a/level-3/step-1/step-1.css +++ b/level-3/step-1/step-1.css @@ -1,74 +1,62 @@ -/* Step-1 add a background image that takes up the entire width of the container */ - .main-top-section { - width: 100%; - height: 200px; - position: relative; + width: 100%; + height: 200px; + position: relative; + background-color: #f2efe5; } - .top-header { - width: 100%; - padding-top: 10px; - height: 70px; - text-align: center; - + width: 100%; + padding-top: 10px; + height: 70px; + text-align: center; } - .menu { - width: 100px; - height: 40px; - display: inline-block; - position: absolute; - left: 10px; - top: 20px; - + width: 100px; + height: 40px; + display: inline-block; + position: absolute; + left: 10px; + top: 20px; } .menu-icon { - width: 60%; - + width: 60%; } .logo { - width: 300px; - height: 40px; - display: inline-block; - margin-top: 10px; - + width: 300px; + height: 40px; + display: inline-block; + margin-top: 10px; } .logo-icon { - width: 75%; + width: 75%; } .sign-in { - width: 100px; - height: 40px; - display: inline-block; - position: absolute; - right: 10px; - top: 30px; - + width: 100px; + height: 40px; + display: inline-block; + position: absolute; + right: 10px; + top: 30px; } .sign-in-icon { - width: 60%; + width: 60%; } - .bottom-container { - width: 100%; - height: 60px; - position: absolute; - text-align: center; - bottom: -30px; - + width: 100%; + height: 60px; + position: absolute; + text-align: center; + bottom: -30px; } - .shop-icon { - width: 350px; + width: 350px; } - diff --git a/level-3/step-2/step-2.css b/level-3/step-2/step-2.css index f9244df8..6bcc0d86 100644 --- a/level-3/step-2/step-2.css +++ b/level-3/step-2/step-2.css @@ -19,6 +19,7 @@ display: block; } + .full-width-item { width: 40%; margin:0 auto 20px;