From febba538da52e4be89408dc4cf813743162be6df Mon Sep 17 00:00:00 2001 From: Nedu Robert Date: Wed, 28 Mar 2018 23:10:31 +0100 Subject: [PATCH 1/2] created page with components using BEM --- components/Box/Box.css | 12 ++++++++++++ components/Section/Section.css | 26 ++++++++++++++++++++++++++ index.html | 18 ++++++++++++++++++ styles.css | 4 ++++ 4 files changed, 60 insertions(+) diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..a05c2b1 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,12 @@ +.box--display { + display: flex; +} + +.box--column { + border: 2px solid black; + padding: 1rem; +} + +.box--paragraph { + font-size: 1.4rem; +} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..970f4bb 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,26 @@ +.section--display { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} + +.section--heading { + /* text-align: center; */ + justify-content: center; + width: 80%; + font-size: 1.5em; +} + +.section--dropdown { + justify-content: flex-start; + /* border: 1px solid black; */ + margin-left: 1em; + width: 70%; +} + +.section__dropdownButton { + background: none; + border: 3px solid black; + padding: 1em; +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..5c6363f 100644 --- a/index.html +++ b/index.html @@ -5,5 +5,23 @@ +
+
+ +
+
+

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/styles.css b/styles.css index 997c895..6001b5a 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,10 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; +html { + font-size: 62.5%; +} + body { box-sizing: border-box; min-width: 300px; From ac3f51f40f1d52bda25012d09d127b4f7753159b Mon Sep 17 00:00:00 2001 From: Nedu Robert Date: Thu, 29 Mar 2018 00:52:35 +0100 Subject: [PATCH 2/2] created dropdown button --- components/Box/Box.css | 4 ++++ components/Dropdown/Dropdown.js | 15 +++++++++++++++ components/Section/Section.css | 22 ++++++++++++++++++++-- index.html | 12 +++++++++--- 4 files changed, 48 insertions(+), 5 deletions(-) create mode 100644 components/Dropdown/Dropdown.js diff --git a/components/Box/Box.css b/components/Box/Box.css index a05c2b1..291e650 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -9,4 +9,8 @@ .box--paragraph { font-size: 1.4rem; +} + +.box__heading { + font-size: 2.2em; } \ No newline at end of file diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js new file mode 100644 index 0000000..ac6e574 --- /dev/null +++ b/components/Dropdown/Dropdown.js @@ -0,0 +1,15 @@ +class Dropdown { + constructor(button) { + this.button = button; + this.content = document.querySelector('.section__dropdownContent'); + this.button.addEventListener('click', () => { + this.openDropdown(); + }); + } + openDropdown() { + this.content.classList.toggle('show'); + } +} +let button = new Dropdown(document.querySelector('.section__dropdownButton')); + + diff --git a/components/Section/Section.css b/components/Section/Section.css index 970f4bb..be9cc23 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -6,7 +6,6 @@ } .section--heading { - /* text-align: center; */ justify-content: center; width: 80%; font-size: 1.5em; @@ -14,7 +13,6 @@ .section--dropdown { justify-content: flex-start; - /* border: 1px solid black; */ margin-left: 1em; width: 70%; } @@ -23,4 +21,24 @@ background: none; border: 3px solid black; padding: 1em; +} + +.section__dropdownContent { + display: none; + position: absolute; + background-color: #fff; + min-width: 87px; + z-index: 1; + border: 3px solid black; + margin-top: 1.1em; +} + +.section__dropdownContent a { + padding: 12px 16px; + display: block; + font-size: 1.5em; +} + +.show { + display:block; } \ No newline at end of file diff --git a/index.html b/index.html index 5c6363f..3b9932a 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,19 @@ - + Introduction to the DOM +
- + +
+ Lambda + Google + MDN +

Header

@@ -24,4 +30,4 @@

Placeholder

- \ No newline at end of file + \ No newline at end of file