From 7dcb2f20d7dadad7fab7010ecf38a3172f2c5a82 Mon Sep 17 00:00:00 2001 From: quay2345 Date: Thu, 24 Nov 2016 19:15:17 -0500 Subject: [PATCH 1/4] im figuring out exaclty how would i place the boxs in im trying out differnt codes --- display-exercise.html | 12 +++++++++--- styles/display-page.css | 10 ++++++++++ styles/main.css | 2 +- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/display-exercise.html b/display-exercise.html index 433b6cba..8d00a2ad 100644 --- a/display-exercise.html +++ b/display-exercise.html @@ -12,11 +12,17 @@ - + - -

Placeholder!

+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/styles/display-page.css b/styles/display-page.css index e69de29b..d5211dbf 100644 --- a/styles/display-page.css +++ b/styles/display-page.css @@ -0,0 +1,10 @@ +main{ + font-size: 0; +} + +.box-parent { + margin-top: 90px; + margin-left: auto; + margin-right: auto; + width: 800px; +} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 8d5db309..1ad3163d 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,7 +1,7 @@ body * { box-sizing: border-box; font-family: 'Roboto', sans-serif; -} + } a { text-decoration: none; From 9f691dcb8d07bb274a94ab5c01fd6148b027b492 Mon Sep 17 00:00:00 2001 From: quay2345 Date: Thu, 24 Nov 2016 19:27:16 -0500 Subject: [PATCH 2/4] adding in css for the boxs --- display-exercise.html | 1 - styles/display-page.css | 13 +++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/display-exercise.html b/display-exercise.html index 8d00a2ad..605b2d72 100644 --- a/display-exercise.html +++ b/display-exercise.html @@ -21,7 +21,6 @@
-
diff --git a/styles/display-page.css b/styles/display-page.css index d5211dbf..5fcae55f 100644 --- a/styles/display-page.css +++ b/styles/display-page.css @@ -7,4 +7,17 @@ main{ margin-left: auto; margin-right: auto; width: 800px; +} + +.box { + border: 1px solid black; + display: inline-block; +} +.box_half { + width: 50%; + height: 200px; +} +box_third { + width: 33.33%; + height: 300px; } \ No newline at end of file From 040b9e3750c03c997eb5ab4d39374bf992b7e0d9 Mon Sep 17 00:00:00 2001 From: quay2345 Date: Thu, 24 Nov 2016 19:43:27 -0500 Subject: [PATCH 3/4] adding in code and colors --- display-exercise.html | 13 ++++++++++--- styles/display-page.css | 22 ++++++++++++++++++++++ 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/display-exercise.html b/display-exercise.html index 605b2d72..01f37a12 100644 --- a/display-exercise.html +++ b/display-exercise.html @@ -19,9 +19,16 @@
-
-
-
+
+
+
+ +
+
+
+
+
+
\ No newline at end of file diff --git a/styles/display-page.css b/styles/display-page.css index 5fcae55f..cbb365aa 100644 --- a/styles/display-page.css +++ b/styles/display-page.css @@ -13,11 +13,33 @@ main{ border: 1px solid black; display: inline-block; } + .box_half { width: 50%; height: 200px; } + box_third { width: 33.33%; height: 300px; +} + +.black { + background-color: black; +} + +.green { + background-color: green; +} + +.blue { + background-color: blue; +} + +.orange { + background-color: orange; +} + +.centered { + text-align: center; } \ No newline at end of file From 89e5f6d6a197d8595897510c76227055fd01309d Mon Sep 17 00:00:00 2001 From: quay2345 Date: Thu, 24 Nov 2016 19:53:13 -0500 Subject: [PATCH 4/4] finishing up the widths for the boxs --- display-exercise.html | 3 --- styles/display-page.css | 10 ++++++++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/display-exercise.html b/display-exercise.html index 01f37a12..1d3d4944 100644 --- a/display-exercise.html +++ b/display-exercise.html @@ -21,9 +21,6 @@
-
- -
diff --git a/styles/display-page.css b/styles/display-page.css index cbb365aa..461d4b26 100644 --- a/styles/display-page.css +++ b/styles/display-page.css @@ -26,6 +26,8 @@ box_third { .black { background-color: black; + width: 33.33%; + height: 300px; } .green { @@ -38,7 +40,15 @@ box_third { .orange { background-color: orange; + width: 33.33%; + height: 300px; } +.grey { + background-color: grey; + width: 33.33%; + height: 300px; +} + .centered { text-align: center;