diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..3bba61f 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,5 @@ +.Box { + border: 2px solid black; + padding: 10px; + margin: 0 10px; + } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..0821c6d 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,3 @@ +section { + border: 1px solid black; +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..092988b 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,52 @@ - - - Introduction to the DOM - - - - - \ No newline at end of file + + + + Components-BEM + + + + + + +
+
+ +
+ 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 diff --git a/index.js b/index.js new file mode 100644 index 0000000..cc7feed --- /dev/null +++ b/index.js @@ -0,0 +1,14 @@ +class Dropdown { + constructor() { + this.dropDownButton = document.querySelector('.dropdown_button'); + this.dropDownItems = document.querySelector('.dropdown_menu'); + console.log(this.dropdownMenu); + + this.dropDownButton.addEventListener('click', this.toggleMenu.bind(this)); + } + toggleMenu(event) { + this.dropdownItems.classList.toggle('dropdown_menu--show'); + } +} + +window.onload = () => new Dropdown(); diff --git a/styles.css b/styles.css index 997c895..6631d6a 100644 --- a/styles.css +++ b/styles.css @@ -6,3 +6,130 @@ body { min-width: 300px; margin: 0; } + +body { + min-width: 300px; + margin: 0; +} + +section { + border: 1px solid black; +} + +.dropdown { + position: absolute; + left: 10px; + top: 10px; +} + +.dropdown__button { + background-color: white; + padding: 10px 0; + width: 200px; + font-size: 16px; + border: 1px solid black; + background-color: white; + color: black; + padding: 16px; + font-size: 16px; + border: 2px solid black; + cursor: pointer; +} + +.dropdown__menu { + display: none; + margin-top: 3px; + background-color: white; + flex-direction: column; + width: 198px; + border: 1px solid black; +} + +.dropdown__menu--show { + display: flex; +} + +.dropdown__menu a { + text-decoration: none; + color: black; + padding: 10px 0; + text-align: center; +} + +.dropdown__menu a:hover { + background-color: black; + color: white; +} + +.header { + display: flex; + align-items: center; + justify-content: center; +} + +.content { + display: flex; + flex-direction: row; +} + +.content__block { + width: 50%; + border: 1px solid black; + padding: 10px; +} + +@media(max-width: 400px) { + .content { + flex-direction: column; + } + .content__block { + width: 100%; + } + .header { + flex-direction: column-reverse; + align-items: center; + justify-content: center; + } + .dropdown { + position: inherit; + margin-bottom: 10px; + } + .dropdown__menu { + position: absolute; + } +} +/* Header { +} */ +/* Dropdown Button */ + + +/* Dropdown button on hover & focus */ +.dropbtn:hover, .dropbtn:focus { + background-color: #2980B9; +} + + + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.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