diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..34b1582 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,5 @@ +.Box__title { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 15px; +} diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..43c7808 --- /dev/null +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,30 @@ +.Dropdown { + z-index: 5; + display: inline-block; + position: absolute; +} + +.Dropdown__button { + padding: 15px; + background-color: white; + border: 2.5px solid black; + cursor: pointer; +} + +.Dropdown__content { + position: absolute; + background-color: white; + display: none; + margin-top: 10px; + padding: 15px; + border: 2.5px solid black; +} + +Dropdown__link { + display: inline-block; + margin-bottom: 10px; +} + +.Dropdown--active .Dropdown__content{ + display: block; +} \ No newline at end of file diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js new file mode 100644 index 0000000..eee169f --- /dev/null +++ b/components/Dropdown/Dropdown.js @@ -0,0 +1,15 @@ +let dropdown = document.querySelector('.Dropdown'); + +class Dropdown { + constructor(element) { + this.element = element; + this.element.addEventListener('click', () => {this.toggleDropdown()}) + } + toggleDropdown(){ + this.element.classList.toggle('Dropdown--active') + } +} + +dropdown = new Dropdown(dropdown); + +console.log(dropdown); \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..8f630bc 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,30 @@ +.Section { + box-sizing:border-box; + display: inline-block; + clear: both; + width: 100%; + margin: 0; + padding: 20px; + position: relative; +} + +.Section--bordered { + border: 2.5px solid black; + border-top: none; +} + +.Section__header { + text-align: center; + font-size: 2.5rem; + font-weight: bold; +} + +.Section--half{ + width: 50%; + +} +body { + box-sizing: border-box; + min-width: 300px; + margin: 0; +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..f294e7d 100644 --- a/index.html +++ b/index.html @@ -5,5 +5,32 @@ - + +
+
+
Dropdown
+
+ Lambda + Google + MDN +
+
+
Header
+
+
+
+
Placeholder
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+
+
+
Placeholder
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+
+ \ 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..33c9c4e 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,6 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; +@import './components/Dropdown/Dropdown.css'; body { box-sizing: border-box;