From 2fef8d9e56ed2efcc93b7b0dc7e970c682e980a8 Mon Sep 17 00:00:00 2001 From: Kaitlyn Flynn Date: Wed, 28 Mar 2018 12:59:23 -0700 Subject: [PATCH 1/3] Header & Placeholder Info added --- components/Box/Box.css | 10 ++++++++++ index.html | 30 ++++++++++++++++++++++++++++-- index.js | 0 styles.css | 5 +++++ 4 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 index.js diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..2dd19ff 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,10 @@ +.Box { + display: flex; + flex-direction: row; + border: 2px solid black; + flex-grow: 1; +} + +.Box__header { + +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..96efc92 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,35 @@ - + Introduction to the DOM + + + + +
+

Header

+
+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. + Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra + risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae + magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+
+
+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. + Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra + risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae + magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+
+
+ - \ No newline at end of file + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 diff --git a/styles.css b/styles.css index 997c895..7d1066e 100644 --- a/styles.css +++ b/styles.css @@ -6,3 +6,8 @@ body { min-width: 300px; margin: 0; } + +.Header { + text-align: center; + border: 2px solid black; +} From 0a949bed10cb4a212f9536fd177366a9cdd792bc Mon Sep 17 00:00:00 2001 From: Kaitlyn Flynn Date: Wed, 28 Mar 2018 13:17:29 -0700 Subject: [PATCH 2/3] Formatted Placeholder Boxes to be in same row --- components/Box/Box.css | 8 +++----- components/Section/Section.css | 3 +++ index.html | 2 ++ styles.css | 3 ++- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index 2dd19ff..04cae7e 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -1,10 +1,8 @@ .Box { - display: flex; - flex-direction: row; border: 2px solid black; - flex-grow: 1; + padding: 20px; } -.Box__header { - +.Box__headerHeadline { + font-size: 22px; } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..ee15714 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,3 @@ +.Section { + display: flex; +} \ No newline at end of file diff --git a/index.html b/index.html index 96efc92..4507103 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@

Header

+

Placeholder

@@ -30,6 +31,7 @@

Placeholder

magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+
\ No newline at end of file diff --git a/styles.css b/styles.css index 7d1066e..866c8ba 100644 --- a/styles.css +++ b/styles.css @@ -10,4 +10,5 @@ body { .Header { text-align: center; border: 2px solid black; -} + font-size: 20px; +} \ No newline at end of file From 94e92d8da78c98ded9e80ee6a20f21084160e67c Mon Sep 17 00:00:00 2001 From: Kaitlyn Flynn Date: Thu, 29 Mar 2018 08:10:24 -0700 Subject: [PATCH 3/3] Completed Assignment --- components/Box/Box.css | 14 +++++++--- components/Section/Section.css | 40 +++++++++++++++++++++++++++ index.html | 50 ++++++++++++++++++---------------- index.js | 4 +++ 4 files changed, 81 insertions(+), 27 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index 04cae7e..57f23dd 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -1,8 +1,14 @@ .Box { - border: 2px solid black; - padding: 20px; + padding: 20px 15px; + border: 3px solid black; } -.Box__headerHeadline { - font-size: 22px; +.Placeholders__Header { + margin-bottom: 10px; + font-weight: bold; + font-size: 19px; +} + +.Placeholders__Text { + line-height: 1.5; } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index ee15714..dd63c27 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -1,3 +1,43 @@ .Section { display: flex; +} + +.Header { + font-weight: bold; + text-align: center; + font-size: 24px; + padding: 20px 0; + border: 2px solid black; +} + +.Dropdown { + position: absolute; + top: 0; + padding-top: 15px; + padding-left: 15px; + cursor: pointer; +} + +.Dropdown__Name { + padding: 10px; + border: 2px solid black; +} + +.Dropdown__List { + margin-top: 10px; + padding: 10px 0 10px 10px; + display: none; + flex-direction: column; + width: 78px; + background: white; + border: 2px solid black; +} + +.display { + position: absolute; + display: flex; +} + +.roll { + display: flex; } \ No newline at end of file diff --git a/index.html b/index.html index 4507103..1a7a447 100644 --- a/index.html +++ b/index.html @@ -3,35 +3,39 @@ Introduction to the DOM - + - - - - +

Header

-
-
-
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. - Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra - risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae - magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

-
-
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. - Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra - risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae - magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+ + + +
+ +
+
Placeholder
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

-
+
+ +
+
Placeholder
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+
+
+ +
\ No newline at end of file diff --git a/index.js b/index.js index e69de29..9fb1268 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,4 @@ +const dropdown = document.querySelector('.Dropdown'); +const list = document.querySelector('.Dropdown__List'); + +dropdown.addEventListener('click', () => list.classList.toggle("roll")); \ No newline at end of file