From ca140112d8aedcf34c1ceff368ef2362450de110 Mon Sep 17 00:00:00 2001 From: Boredom Date: Wed, 28 Mar 2018 17:37:10 -0500 Subject: [PATCH] completed --- components/Box/Box.css | 15 ++++++++++++ components/Section/Section.css | 44 ++++++++++++++++++++++++++++++++++ index.html | 35 +++++++++++++++++++++++++-- index.js | 4 ++++ 4 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 index.js diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..c4cbfab 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,15 @@ + +.placeholders { + padding: 20px 15px; + border: 3px solid black; +} + +.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 e69de29..0576ce7 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,44 @@ +.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; + } + + .section { + display: flex; + } + + .roll { + display: flex; + } \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..7b5e2dd 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,40 @@ - + 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..24f8503 --- /dev/null +++ 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'));