diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..846f9a3 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,29 @@ +.box{ + display: flex; + max-width: 100%; + border: solid black 3px; + flex-direction: row; +} + +.box__placeholder1{ + display: flex; + flex-direction: column; + border: solid black 1.5px; + width: 50%; + border-top: 0px; +} +.box__placeholder2{ + display: flex; + flex-direction: column; + border: solid black 1.5px; + border-top: 0px; + width: 50%; +} +.box__h3 { + font-size: 1.2rem; + margin-left: 5%; + width: 100%; +} +.box__p { + margin: 0 0 25px 5%; +} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..0abb924 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,44 @@ +.section { + max-width: 100%; +} + +.section__header1 { + max-width: 100%; + display: flex; + justify-content: center; + font-size: 2rem; + border:solid black 3px; + height: 90px; + align-items: center; +} +.section__dropdown{ + display: flex; + justify-content: flex-start; + flex-direction: column; + position: absolute; + margin-left: 6%; + top: 35px; +} +.dropdown__button { + border: solid black 1px; + background: white; + height: 35px; +} +.dropdown__content { + display: none; +} +.dropdown__content--display { + display: flex; + flex-direction: column; + text-align: center; + border: solid black 1px; + background: white; + margin-top: 10px; +} +.dropdown__a { + padding: 8px; +} + + + + diff --git a/index.html b/index.html index 39167c5..b76c272 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,48 @@ - + + Introduction to the DOM + +
+ +
+ + 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. +

+
+
+
+ +
+ Lambda + Google + MDN +
+
+ + - \ 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..2d6b0b1 --- /dev/null +++ b/index.js @@ -0,0 +1,13 @@ +class ddmenu { + constructor(){ + this.drop = document.querySelector('.dropdown__button'); + this.menu = document.querySelector('.dropdown__content'); + + this.drop.addEventListener('click', this.tog.bind(this)); + } + tog() { + this.menu.classList.toggle('dropdown__content--display'); + } +} + +new ddmenu(); \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..2f3d3c2 100644 --- a/styles.css +++ b/styles.css @@ -5,4 +5,22 @@ body { box-sizing: border-box; min-width: 300px; margin: 0; + width: 100%; } + +@media (max-width: 400px) { + .box{ + display: flex; + flex-direction: column; + } + .box__placeholder1{ + display: flex; + flex-direction: column; + width: 100%; + } + .box__placeholder2{ + display: flex; + flex-direction: column; + width: 100%; + } +} \ No newline at end of file