From adc82d1a2eede642311da6a5884a654e9fb8b7b0 Mon Sep 17 00:00:00 2001 From: Ezra Vance <3zravance@gmail.com> Date: Tue, 23 Jun 2020 14:31:00 -0400 Subject: [PATCH] box models 1, 2 and index html files editied. still playing with padding and margins. --- box-model1.html | 24 +++++++--------------- box-model2.html | 38 +++++++++++++++++++---------------- css/style.css | 9 --------- css/style1.css | 15 ++++++++++++++ css/style2.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 20 ++----------------- 6 files changed, 98 insertions(+), 61 deletions(-) delete mode 100644 css/style.css create mode 100644 css/style1.css create mode 100644 css/style2.css diff --git a/box-model1.html b/box-model1.html index 4dc0c72..f3da170 100644 --- a/box-model1.html +++ b/box-model1.html @@ -10,7 +10,7 @@ - + @@ -33,22 +33,12 @@ - - - The quickest of brown foxes. - - - - - - - - - - +

Box Model Visual

+
+
+ Inner DIV +
+
diff --git a/box-model2.html b/box-model2.html index 4dc0c72..c1b93f3 100644 --- a/box-model2.html +++ b/box-model2.html @@ -10,7 +10,7 @@ - + @@ -33,22 +33,26 @@ - - - The quickest of brown foxes. - - - - - - - - - - +

Box Model Visual

+
+
+ Inner DIV 1 +
+ +
+ Inner DIV 2 +
+
+ +
+
+ Inner DIV 1 +
+ +
+ Inner DIV 2 +
+
diff --git a/css/style.css b/css/style.css deleted file mode 100644 index d17d83a..0000000 --- a/css/style.css +++ /dev/null @@ -1,9 +0,0 @@ -body { - background-color: navy; -} - - -object { - height: 100vh; - width: 100vh; -} diff --git a/css/style1.css b/css/style1.css new file mode 100644 index 0000000..2438c13 --- /dev/null +++ b/css/style1.css @@ -0,0 +1,15 @@ +div { + width:200px; + height:300px; + background-color: red; + padding: 0px; + margin: 0px; +} + +div div { + width:100px; + height:100px; + background-color: blue; + padding: 10px; + margin: 0px; +} \ No newline at end of file diff --git a/css/style2.css b/css/style2.css new file mode 100644 index 0000000..a8fb60a --- /dev/null +++ b/css/style2.css @@ -0,0 +1,53 @@ +#parentdiv1 { + width:200px; + height:300px; + background-color: red; + border: 2px solid green; + padding: 10px; + margin: 0px; +} + +#parentdiv2 { + width:200px; + height:300px; + background-color: red; + border: 2px solid green; + padding: 10px; + margin: 50px; +} + +#innerdiv1 { + width:100px; + height:100px; + background-color: blue; + border: 2px solid white; + padding: 0px; + margin: 0px; +} + +#innerdiv2 { + width:125px; + height:100px; + background-color: beige; + border: 2px solid white; + padding: 0px; + margin: 0px; +} + +#innerdiv3 { + width:100px; + height:100px; + background-color: blue; + border: 2px solid white; + padding: 0px; + margin: 0px; +} + +#innerdiv4 { + width:100px; + height:100px; + background-color: beige; + border: 2px solid white; + padding: 0px; + margin: 0px; +} \ No newline at end of file diff --git a/index.html b/index.html index 4dc0c72..cfcee93 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,6 @@ - - @@ -33,22 +31,8 @@ - - - The quickest of brown foxes. - - - - - - - - - - +

Click here to view box model 1.

+

Click here to view box model 2.