diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..73b7a5c --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,14 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "program": "${workspaceFolder}/index.js" + } + ] +} \ No newline at end of file diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..5e42b9c 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,7 @@ +.Box1 { + border: 2px solid black; +} + +.Box2 { + border: 2px solid black; +} \ No newline at end of file diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..56e6136 --- /dev/null +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,42 @@ +/* button */ +.Dropdown__button { + background-color: #3498DB; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; + justify-content: flex-start; + margin-left: 10%; +} + +/* position of the dropdown conent */ +.Dropdown { + position: relative; + display: inline-block; +} + +/* element of drop menu 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; +} + +/* style for the links in the dropmenu */ +.Dropdown__content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ +.Dropdown__content--show { + display:block;} + +/* Change color of dropdown links on hover +.dropdown-content a:hover {background-color: #ddd} */ diff --git a/components/Header/Header.css b/components/Header/Header.css new file mode 100644 index 0000000..61b9f79 --- /dev/null +++ b/components/Header/Header.css @@ -0,0 +1,19 @@ +/* look for Dropdown.css for Dropdow menu CSS elements */ + +.mainHeader { + display: flex; + justify-content: flex-start; + align-items: center; + border: 2px solid black; +} + +.header { + margin-left: 35%; + +} + +@media (max-width: 400px) { + .header { + margin-left: 10%; + } +} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..9309305 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,11 @@ +.Section { + display: flex; + border: 2px solid black; + +} + +@media (max-width: 400px) { + .Section { + flex-direction: column; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..d464285 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,44 @@ Introduction to the DOM + + +
+
+ +
+ Lambda + Google + MDN +
+
+ +
+

This is 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..630441e --- /dev/null +++ b/index.js @@ -0,0 +1,22 @@ +let button = document.querySelector('.Dropdown__button') +let dropmenu = document.getElementById('dropDownLinks') + +const dropEvent = (event) => { + dropmenu.classList.toggle('Dropdown__content--show'); +} + +button.addEventListener('click', dropEvent); + + +// class Dropdown12 { +// constructor () { +// this.addEventListener('click', () => { this.dropEvent() }) +// } + +// dropEvent(event) { +// dropmenu.classList.toggle('Dropdown__content--show'); +// } +// } + +// button = new Dropdown12(); + diff --git a/styles.css b/styles.css index 997c895..e70d9a6 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,5 @@ +@import './components/Dropdown/Dropdown.css'; +@import './components/Header/Header.css'; @import './components/Section/Section.css'; @import './components/Box/Box.css';