diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..4d9876a
Binary files /dev/null and b/.DS_Store differ
diff --git a/p1/styles/main.css b/p1/styles/main.css
index 9bf29ee..3338e68 100644
--- a/p1/styles/main.css
+++ b/p1/styles/main.css
@@ -1,32 +1,38 @@
/* CURRENTLY IN: styles/main.css */
-html, body {
+/*html, body {
height: 100%;
}
body {
min-height: 100%;
}
-
+*/
+html, body {
+ height: 100%;
+}
.container {
+ display:flex;
height: 100%;
}
.column {
- float: left;
- box-sizing: border-box;
-
- min-height: 100%;
+ display: flex;
+
}
.column-one-third {
width: 33.3333%;
-
background-color: pink;
}
.column-two-third {
width: 66.66663%;
-
- background-color: black;
+ background-color: black;
}
+
+/*
+
+.col-2 { and so on you divide depending on the column you like col-12 calc(12 * 8.3333%)
+ width: calc(2 * 8.3333%);
+}
\ No newline at end of file
diff --git a/p2/styles/main.css b/p2/styles/main.css
index b412536..51f3691 100644
--- a/p2/styles/main.css
+++ b/p2/styles/main.css
@@ -1,6 +1,6 @@
/* CURRENTLY IN: styles/main.css */
-html, body {
+/* html, body {
height: 100%;
}
@@ -15,7 +15,7 @@ body {
.row {
width: 100%;
min-height: 100px;
-
+
background-color: yellow;
}
@@ -36,4 +36,31 @@ body {
width: 66.66663%;
background-color: black;
+} */
+html, body {
+ height: 100%;
}
+.container {
+ display:flex;
+ height: 450px;
+}
+
+.column {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.column-one-third {
+ width: 33.3333%;
+ background-color: pink;
+}
+
+.column-two-third {
+ width: 66.66663%;
+ background-color: black;
+}
+.row {
+ display: flex;
+ background-color: yellow;
+ height: 15%;
+}
\ No newline at end of file
diff --git a/p3/index.html b/p3/index.html
index 269d194..5a86ba6 100644
--- a/p3/index.html
+++ b/p3/index.html
@@ -1,4 +1,4 @@
-
+
+
+
+
+ Problem 3
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/p3/styles/main.css b/p3/styles/main.css
index cd67cc2..8614457 100644
--- a/p3/styles/main.css
+++ b/p3/styles/main.css
@@ -1,13 +1,9 @@
/* CURRENTLY IN: styles/main.css */
-html, body {
+/* html, body {
height: 100%;
}
-body {
- min-height: 100%;
-}
-
.container {
height: 450px;
}
@@ -28,7 +24,6 @@ body {
.column-one-third {
width: 33.3333%;
-
background-color: pink;
}
@@ -52,5 +47,94 @@ body {
.column-green {
background-color: green;
-}
-
+} */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ }
+
+html, body {
+ height: 100%;
+ }
+
+ .row {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .full {
+ height: 100%;
+ }
+
+ .col {
+ width: 8.3333%;
+ min-height: 100px;
+ }
+
+ .col-2 {
+ width: calc(2 * 8.3333%);
+ }
+
+ .col-3 {
+ width: calc(3 * 8.3333%);
+ }
+
+ .col-4 {
+ width: calc(4 * 8.3333%);
+ }
+
+ .col-5 {
+ width: calc(5 * 8.3333%);
+ }
+
+ .col-6 {
+ width: calc(6 * 8.3333%);
+ }
+
+ .col-7 {
+ width: calc(7 * 8.3333%);
+ }
+
+ .col-8 {
+ width: calc(8 * 8.3333%);
+ }
+
+ .col-9 {
+ width: calc(9 * 8.3333%);
+ }
+
+ .col-10 {
+ width: calc(10 * 8.3333%);
+ }
+
+ .col-11 {
+ width: calc(11 * 8.3333%);
+ }
+
+ .col-12 {
+ width: calc(12 * 8.3333%);
+ }
+
+ .yellow {
+ background-color: yellow;
+ }
+
+ .green {
+ background-color: green;
+ }
+
+ .red {
+ background-color: red;
+ }
+
+ .pink {
+ background-color: pink;
+ }
+
+ .black {
+ background-color: black;
+ }
+
+ .height-450px {
+ height: 450px;
+ }
\ No newline at end of file
diff --git a/p4/index.html b/p4/index.html
index b6a852a..04381f8 100644
--- a/p4/index.html
+++ b/p4/index.html
@@ -1,4 +1,4 @@
-
+
+
+
+
+
+
+ Problem 4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/p4/styles/main.css b/p4/styles/main.css
index de39c3f..09efa23 100644
--- a/p4/styles/main.css
+++ b/p4/styles/main.css
@@ -1,6 +1,6 @@
/* CURRENTLY IN: styles/main.css */
-html, body {
+/* html, body {
height: 100%;
}
@@ -55,4 +55,98 @@ body {
.column-green {
background-color: green;
}
+ */
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ }
+
+html, body {
+ height: 100%;
+ }
+
+ div {
+ flex-wrap: wrap;
+ }
+ .row {
+ display: flex;
+ /* flex-wrap: nowrap; */
+ }
+
+ .full {
+ height: 100%;
+ }
+
+ .col {
+ width: 8.3333%;
+ min-height: 100px;
+ }
+
+ .col-2 {
+ width: calc(2 * 8.3333%);
+ }
+
+ .col-3 {
+ width: calc(3 * 8.3333%);
+ }
+
+ .col-4 {
+ width: calc(4 * 8.3333%);
+ }
+
+ .col-5 {
+ width: calc(5 * 8.3333%);
+ }
+
+ .col-6 {
+ width: calc(6 * 8.3333%);
+ }
+
+ .col-7 {
+ width: calc(7 * 8.3333%);
+ }
+
+ .col-8 {
+ width: calc(8 * 8.3333%);
+ }
+
+ .col-9 {
+ width: calc(9 * 8.3333%);
+ }
+
+ .col-10 {
+ width: calc(10 * 8.3333%);
+ }
+
+ .col-11 {
+ width: calc(11 * 8.3333%);
+ }
+
+ .col-12 {
+ width: calc(12 * 8.3333%);
+ }
+
+ .yellow {
+ background-color: yellow;
+ }
+
+ .green {
+ background-color: green;
+ }
+
+ .red {
+ background-color: red;
+ }
+
+ .pink {
+ background-color: pink;
+ }
+
+ .black {
+ background-color: black;
+ }
+
+ .height-450px {
+ height: 450px;
+ }
\ No newline at end of file
diff --git a/p5/index.html b/p5/index.html
index 7ce1779..247c44d 100644
--- a/p5/index.html
+++ b/p5/index.html
@@ -1,4 +1,4 @@
-
+
+
+
+
+
+
+ Problem 5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/p5/styles/main.css b/p5/styles/main.css
index b913d9f..8a3c2ba 100644
--- a/p5/styles/main.css
+++ b/p5/styles/main.css
@@ -1,6 +1,6 @@
/* CURRENTLY IN: styles/main.css */
-html, body {
+/* html, body {
height: 100%;
}
@@ -65,4 +65,100 @@ body {
.column-green {
background-color: green;
}
+ */
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ }
+
+html, body {
+ height: 100%;
+ }
+
+ div {
+ flex-wrap: wrap;
+ }
+ .row {
+ display: flex;
+ /* flex-wrap: nowrap; */
+ border: blue solid 1px;
+ }
+
+ .full {
+ height: 100%;
+ }
+
+ .col {
+ width: 8.3333%;
+ min-height: 100px;
+
+ }
+
+ .col-2 {
+ width: calc(2 * 8.3333%);
+ }
+
+ .col-3 {
+ width: calc(3 * 8.3333%);
+ }
+
+ .col-4 {
+ width: calc(4 * 8.3333%);
+ }
+
+ .col-5 {
+ width: calc(5 * 8.3333%);
+ }
+
+ .col-6 {
+ width: calc(6 * 8.3333%);
+ }
+
+ .col-7 {
+ width: calc(7 * 8.3333%);
+ }
+
+ .col-8 {
+ width: calc(8 * 8.3333%);
+ }
+
+ .col-9 {
+ width: calc(9 * 8.3333%);
+ }
+
+ .col-10 {
+ width: calc(10 * 8.3333%);
+ }
+
+ .col-11 {
+ width: calc(11 * 8.3333%);
+ }
+
+ .col-12 {
+ width: calc(12 * 8.3333%);
+ }
+
+ .yellow {
+ background-color: yellow;
+ }
+
+ .green {
+ background-color: green;
+ }
+
+ .red {
+ background-color: red;
+ }
+
+ .pink {
+ background-color: pink;
+ }
+
+ .black {
+ background-color: black;
+ }
+
+ .height-450px {
+ height: 450px;
+ }