From 20b0b6f9fbd55cc76f920091930effa9f13c2a18 Mon Sep 17 00:00:00 2001 From: Robert Hogan Date: Wed, 28 Mar 2018 15:19:19 -0400 Subject: [PATCH 1/4] Robert Hogan, David Finley Components assignment. Initial commit. --- index.html | 4 ++++ index.js | 0 2 files changed, 4 insertions(+) create mode 100644 index.js diff --git a/index.html b/index.html index 39167c5..682336b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,11 @@ Introduction to the DOM + +
+
+
\ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 From eae40f0685d5bd29f6fc90687826965bd8706d9a Mon Sep 17 00:00:00 2001 From: Robert Hogan Date: Wed, 28 Mar 2018 17:34:59 -0400 Subject: [PATCH 2/4] Robert Hogan, David Finley. Additional work to drop down button, body content. Moving to styling. --- components/Section/Section.css | 42 ++++++++++++++++++++++++++++++++++ dropdown.js | 18 +++++++++++++++ index.html | 37 ++++++++++++++++++++++++++---- styles.css | 1 + 4 files changed, 93 insertions(+), 5 deletions(-) create mode 100644 dropdown.js diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..fd98922 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,42 @@ +/* Dropdown Button */ +.dropbtn { + background-color: white; + color: black; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; + border: 3px solid black; +} + +.dropbtn:hover, .dropbtn:focus { + background-color: white; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px solid black; + z-index: 1; + border: 3px solid black; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + + +.dropdown-content a:hover {background-color: #ddd} + +/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ +.show {display:block;} \ No newline at end of file diff --git a/dropdown.js b/dropdown.js new file mode 100644 index 0000000..13939c7 --- /dev/null +++ b/dropdown.js @@ -0,0 +1,18 @@ + +function dropDownFunction() { + document.getElementById("myDropdown").classList.toggle("show"); +} + +window.onclick = function(event) { + if (!event.target.matches('.dropbtn')) { + + let dropdowns = document.getElementsByClassName("dropdown-content"); + let i; + for (i = 0; i < dropdowns.length; i++) { + let openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); + } + } + } +} \ No newline at end of file diff --git a/index.html b/index.html index 682336b..1284191 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,38 @@ Introduction to the DOM - + -
-
-
+
+
+
+ +
+ Lambda + Google + MDN +
+
+
+

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/styles.css b/styles.css index 997c895..471ed44 100644 --- a/styles.css +++ b/styles.css @@ -6,3 +6,4 @@ body { min-width: 300px; margin: 0; } + From b6278bdcae4137488cafd587493ff35c60fa436b Mon Sep 17 00:00:00 2001 From: Robert Hogan Date: Wed, 28 Mar 2018 18:05:09 -0400 Subject: [PATCH 3/4] Robert Hogan, David Finley. Further progression on HTML, CSS and Javascript. Moving to layout. --- index.html | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 1284191..91cb955 100644 --- a/index.html +++ b/index.html @@ -19,20 +19,18 @@

Header

-
-
-

Placeholder

+
+
+

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.

+
+

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

+
+

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.

+
+

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.

From 9d46b72ed5028a177a2eb02b58717270d5a4145a Mon Sep 17 00:00:00 2001 From: Robert Hogan Date: Wed, 28 Mar 2018 19:11:31 -0400 Subject: [PATCH 4/4] Robert Hogan, David Finley. Assignmnet complete. --- components/Box/Box.css | 16 ++++++++++++ components/Section/Section.css | 11 +++++--- index.html | 28 ++++++++++++--------- styles.css | 46 ++++++++++++++++++++++++++++++++++ 4 files changed, 86 insertions(+), 15 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..9e50f60 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,16 @@ +.box { + display: flex; + width: 100%; + box-sizing: border-box; +} + +.box .Box1 { + border: 2px solid black; + padding: 25px; +} + +.box .Box2 { + border: 2px solid black; + padding: 25px; +} + diff --git a/components/Section/Section.css b/components/Section/Section.css index fd98922..3fe9325 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -2,11 +2,14 @@ .dropbtn { background-color: white; color: black; - padding: 16px; + padding: 20px; font-size: 16px; border: none; cursor: pointer; - border: 3px solid black; + border: 2px solid black; + padding: 10px; + margin-top: 20px; + margin-left: 8px; } .dropbtn:hover, .dropbtn:focus { @@ -39,4 +42,6 @@ .dropdown-content a:hover {background-color: #ddd} /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ -.show {display:block;} \ No newline at end of file +.show {display:block;} + + diff --git a/index.html b/index.html index 91cb955..500635e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + Introduction to the DOM @@ -17,22 +17,26 @@
-

Header

+

Header

-
-
-

Placeholder

+
+
+
+

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.

+
+

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

+
+
+
+

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.

+
+

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/styles.css b/styles.css index 471ed44..b18f19b 100644 --- a/styles.css +++ b/styles.css @@ -7,3 +7,49 @@ body { margin: 0; } +.Header { + display: flex; + border: 2px solid black; +} + +.Header h1 { + display: flex; + justify-content: center; + margin-left: 565px; +} + + +@media(max-width: 400px) { + + body { + box-sizing: border-box; + min-width: 300px; + margin: 0; + } + + .Header { + display: flex; + border: 2px solid black; + } + + .Header h1 { + display: flex; + justify-content: center; + margin-left: 45px; + } + + .box { + display: flex; + flex-direction: column; + } + + .box .Box1 { + padding: 14px; + } + + .box .Box2 { + padding: 14px; + } + +} +