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 e69de29..3fe9325 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,47 @@ +/* Dropdown Button */ +.dropbtn { + background-color: white; + color: black; + padding: 20px; + font-size: 16px; + border: none; + cursor: pointer; + border: 2px solid black; + padding: 10px; + margin-top: 20px; + margin-left: 8px; +} + +.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;} + + 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 39167c5..500635e 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,42 @@ - + 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/index.js b/index.js new file mode 100644 index 0000000..e69de29 diff --git a/styles.css b/styles.css index 997c895..b18f19b 100644 --- a/styles.css +++ b/styles.css @@ -6,3 +6,50 @@ body { min-width: 300px; 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; + } + +} +