Incremental Development is a strategy for developing software. In this strategy you start with the simplest code you can possibly write to get things started. Often this is just empty files with the right names, in the right folders! Then in small steps you more code so that each little step works, builds on top of the last step, and is a little closer to the end goal.
+
+
diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css
index 78865286..04df53a0 100755
--- a/level-1/step-1/step-1.css
+++ b/level-1/step-1/step-1.css
@@ -1,32 +1,35 @@
.header {
+ font-family: Helvetica, sans-serif;
+ font-weight: 200;
width: 100%;
height: 100px;
background: #D8D8D8;
+ text-align: center;
+
}
-/* 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: calc( 100vh - 200px );
background: #565555;
+ float: left;
+
+
}
-
-/* Use float to get this container in its desired location. */
-
.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;
- background: #B0B0B0;
+ text-align: center;
+ bottom: 0;
+ background-color: #D8D8D8;
}
-/* 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;
+ text-align: center;
+
+}
diff --git a/level-1/step-2/step-2.css b/level-1/step-2/step-2.css
index 73095f05..9e41e6bf 100644
--- a/level-1/step-2/step-2.css
+++ b/level-1/step-2/step-2.css
@@ -1,40 +1,40 @@
-/* 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;
}
-
-/* Step-2 One option to get the container to fill the parent container is to use width: auto; */
-
.profile-image-container {
background: #96F0F2;
+ width:100%;
+ height:35%;
+ margin-bottom:10px;
}
-/* Step-2 One option to get the container to fill the parent container is to use width: auto; */
-
.profile-links-container {
background: #12F3F7;
+ width: 100%;
+ height: calc( 70% - 20px );
}
-/* Step-2 You can either use float left to get this element to in the desired location. */
-
.logo-container {
background: #4F4949;
+ height: 70px;
+ width: 85px;
+ float: right;
}
-
-/* Step-2 You can either use float right to get this element to in the desired location. */
-
.menu-container {
background: #4F4949;
+ height: 350px;
+ width: 70px;
+ float: left;
}
+
diff --git a/level-1/step-3/step-3.css b/level-1/step-3/step-3.css
index 5589c8b2..ac99610f 100755
--- a/level-1/step-3/step-3.css
+++ b/level-1/step-3/step-3.css
@@ -1,17 +1,26 @@
/* Step-3 You can assign padding to all sides of a container by using the padding shorthand property. */
.content-mid {
+ padding: 65x;
}
.content-mid-header {
background: #444;
+ width: auto;
+ height: 20%;
}
.content-container {
-
+ width: auto;
+ height: 100px;
}
.content {
background: #D8D8D8;
+ padding:20px;
+ width: auto;
+ height: 80%;
+ text-align: center;
+
}