From b2acdd7a761df4ee1fdf6db4f961336dbfe10cdc Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 15:09:18 -0600 Subject: [PATCH 1/5] finished the first assignment with the box model --- boxmodel/index.html | 24 ++++++++++++++++ boxmodel/styles.css | 69 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 boxmodel/index.html create mode 100644 boxmodel/styles.css diff --git a/boxmodel/index.html b/boxmodel/index.html new file mode 100644 index 0000000..6b71f22 --- /dev/null +++ b/boxmodel/index.html @@ -0,0 +1,24 @@ + + + + Aaron King...DOM + + + + + +

Header

+
+
+ New! +
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+ + + \ No newline at end of file diff --git a/boxmodel/styles.css b/boxmodel/styles.css new file mode 100644 index 0000000..0224eb9 --- /dev/null +++ b/boxmodel/styles.css @@ -0,0 +1,69 @@ +html, body, p, h1, h2 +{ + margin: 0px; + padding: 0px; + border: 0px; +} + + +h1 +{ + text-align: center; + padding: 10px; +} + +h2 +{ + padding: 10px; +} + +p +{ + padding: 10px; +} + +.post +{ + display: inline-block; + width: 50%; + box-sizing: border-box; + float: left; + border: 3px solid black; +} + +.new +{ + float: right; + background-color: gray; + margin-top: 5px; + padding: 10px; +} + +.right +{ + border-width: 3px 3px 3px 1.5px; +} + +.left +{ + border-width: 3px 1.5px 3px 3px; +} + +@media (max-width: 600px) { + .post + { + width: 100%; + } +} + +@media (min-width: 1920px) { + .post + { + width: 800px; + } + .left + { + margin-left: 1 auto; + } +} + \ No newline at end of file From 14f1bbccd9860faafe9dd9c2e39f6c6f58011f0d Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 15:41:01 -0600 Subject: [PATCH 2/5] initial commit to teh flexbox branch --- flexbox/index.html | 24 ++++++++++++++++ flexbox/styles.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 flexbox/index.html create mode 100644 flexbox/styles.css diff --git a/flexbox/index.html b/flexbox/index.html new file mode 100644 index 0000000..6b71f22 --- /dev/null +++ b/flexbox/index.html @@ -0,0 +1,24 @@ + + + + Aaron King...DOM + + + + + +

Header

+
+
+ New! +
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+ + + \ No newline at end of file diff --git a/flexbox/styles.css b/flexbox/styles.css new file mode 100644 index 0000000..0224eb9 --- /dev/null +++ b/flexbox/styles.css @@ -0,0 +1,69 @@ +html, body, p, h1, h2 +{ + margin: 0px; + padding: 0px; + border: 0px; +} + + +h1 +{ + text-align: center; + padding: 10px; +} + +h2 +{ + padding: 10px; +} + +p +{ + padding: 10px; +} + +.post +{ + display: inline-block; + width: 50%; + box-sizing: border-box; + float: left; + border: 3px solid black; +} + +.new +{ + float: right; + background-color: gray; + margin-top: 5px; + padding: 10px; +} + +.right +{ + border-width: 3px 3px 3px 1.5px; +} + +.left +{ + border-width: 3px 1.5px 3px 3px; +} + +@media (max-width: 600px) { + .post + { + width: 100%; + } +} + +@media (min-width: 1920px) { + .post + { + width: 800px; + } + .left + { + margin-left: 1 auto; + } +} + \ No newline at end of file From 727cae9735333293c35cabe78537c0c50677e10d Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 17:41:19 -0600 Subject: [PATCH 3/5] setup html --- index.html | 35 ++++++++++++++++++++++++----------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index f74abbf..f836873 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,24 @@ - - - - Introduction to the DOM - - - - - - - \ No newline at end of file +- + - + - + - Aaron King...DOM + - + - + - + - + - + -

Header

+ -
+ -
+ - New! + -
+ -

Placeholder

+ -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+ -
+ -
+ -

Placeholder

+ -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+ -
+ - + - + - \ No newline at end of file From fb41da16a3beb024404c34e53df8e2c7aa2fe00e Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 17:44:28 -0600 Subject: [PATCH 4/5] cleaning up unnecessary directory making --- boxmodel/index.html | 24 ---------------- boxmodel/styles.css | 69 --------------------------------------------- flexbox/index.html | 24 ---------------- flexbox/styles.css | 69 --------------------------------------------- 4 files changed, 186 deletions(-) delete mode 100644 boxmodel/index.html delete mode 100644 boxmodel/styles.css delete mode 100644 flexbox/index.html delete mode 100644 flexbox/styles.css diff --git a/boxmodel/index.html b/boxmodel/index.html deleted file mode 100644 index 6b71f22..0000000 --- a/boxmodel/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - Aaron King...DOM - - - - - -

Header

-
-
- New! -
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

-
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

-
- - - \ No newline at end of file diff --git a/boxmodel/styles.css b/boxmodel/styles.css deleted file mode 100644 index 0224eb9..0000000 --- a/boxmodel/styles.css +++ /dev/null @@ -1,69 +0,0 @@ -html, body, p, h1, h2 -{ - margin: 0px; - padding: 0px; - border: 0px; -} - - -h1 -{ - text-align: center; - padding: 10px; -} - -h2 -{ - padding: 10px; -} - -p -{ - padding: 10px; -} - -.post -{ - display: inline-block; - width: 50%; - box-sizing: border-box; - float: left; - border: 3px solid black; -} - -.new -{ - float: right; - background-color: gray; - margin-top: 5px; - padding: 10px; -} - -.right -{ - border-width: 3px 3px 3px 1.5px; -} - -.left -{ - border-width: 3px 1.5px 3px 3px; -} - -@media (max-width: 600px) { - .post - { - width: 100%; - } -} - -@media (min-width: 1920px) { - .post - { - width: 800px; - } - .left - { - margin-left: 1 auto; - } -} - \ No newline at end of file diff --git a/flexbox/index.html b/flexbox/index.html deleted file mode 100644 index 6b71f22..0000000 --- a/flexbox/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - Aaron King...DOM - - - - - -

Header

-
-
- New! -
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

-
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

-
- - - \ No newline at end of file diff --git a/flexbox/styles.css b/flexbox/styles.css deleted file mode 100644 index 0224eb9..0000000 --- a/flexbox/styles.css +++ /dev/null @@ -1,69 +0,0 @@ -html, body, p, h1, h2 -{ - margin: 0px; - padding: 0px; - border: 0px; -} - - -h1 -{ - text-align: center; - padding: 10px; -} - -h2 -{ - padding: 10px; -} - -p -{ - padding: 10px; -} - -.post -{ - display: inline-block; - width: 50%; - box-sizing: border-box; - float: left; - border: 3px solid black; -} - -.new -{ - float: right; - background-color: gray; - margin-top: 5px; - padding: 10px; -} - -.right -{ - border-width: 3px 3px 3px 1.5px; -} - -.left -{ - border-width: 3px 1.5px 3px 3px; -} - -@media (max-width: 600px) { - .post - { - width: 100%; - } -} - -@media (min-width: 1920px) { - .post - { - width: 800px; - } - .left - { - margin-left: 1 auto; - } -} - \ No newline at end of file From ab95abde54f17765e7cf54111c6a9cecdb338809 Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 22:10:19 -0600 Subject: [PATCH 5/5] I got it pretty close to the mockup but I had to do something funky with percentages and I still cannot get the border of the container to go all the way to the edge of the page --- index.html | 49 ++++++++++++++++++++++--------------------- styles.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index f836873..6b37f6c 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,25 @@ -- - - - - - - Aaron King...DOM - - - - - - - - - - - -

Header

- -
- -
- - New! - -
- -

Placeholder

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

- -
- -
- -

Placeholder

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

- -
- - - - - - \ No newline at end of file + + + + Aaron King...DOM + + + + +

Header

+
+
+
+

Placeholder

+
New!
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..a6383d3 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,61 @@ +html, p, h1, h2 +{ + display: flex; + margin: 0; + padding: 0; +} + +h1 +{ + display: flex; + justify-content: center; + padding: 10px; +} + +h2 +{ + display: flex; + padding-left: 10px; + height: 50px; +} + +p +{ + display: flex; + padding: 0 0 10px 10px; +} + +.container +{ + display: flex; + flex-grow: 100%; +} + +.post +{ + display: flex; + border: solid black 2px; + align-items: flex-start; + flex-direction: column; +} + +.new +{ + display: flex; + background-color: gray; + margin-top: 5px; + padding: 10px; + align-self: flex-start; +} + +.placeholder +{ + display: flex; + width: 100%; +} + +.placeholderfix +{ + display: flex; + width: 100%; +} \ No newline at end of file