bloominstituteoftechnology · Remastered21 · Mar 28, 2018 · Mar 29, 2018 · Mar 29, 2018
diff --git a/.vscode/launch.json 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"
+        }
+    ]
+}
diff --git a/components/Box/Box.css b/components/Box/Box.css
@@ -0,0 +1,7 @@
+.Box1 {
+    border: 2px solid black;
+}
+
+.Box2 {
+    border: 2px solid black;
+}
diff --git a/components/Dropdown/Dropdown.css 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
@@ -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%;
+    }
+}
diff --git 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;
+    }
+}
diff --git a/index.html b/index.html
@@ -3,7 +3,44 @@
 	<head>
 		<title>Introduction to the DOM</title>
 		<link rel="stylesheet" href="./styles.css">
+		<script defer="defer" src="./index.js"></script>
 	</head>
+
 	<body>
+		<div class="mainHeader">
+			<div class="Dropdown">
+				<button class="Dropdown__button">Dropdown123</button>
+				<div id="dropDownLinks" class="Dropdown__content">
+					<a href="#">Lambda</a>
+					<a href="#">Google</a>
+					<a href="#">MDN</a>
+				</div>
+			</div> <!--  Dropdown  -->
+
+			<div class="header">
+				<h1>This is Header</h1>
+			</div>
+		</div> <!--  header  -->
+
+		<div class="Section">
+			<div class="Box1">
+				<div class="Box1__header">
+					<h1>Placeholder</h1>
+				</div>
+				<div class="Box1__text">
+					<p>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.</p>
+				</div>
+			</div> <!-- Box__1  -->
+
+			<div class="Box2">
+				<div class="Box2__header">
+					<h1>Placeholder</h1>
+				</div>
+				<div class="Box2__text">
+					<p>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.</p>
+				</div> 
+			</div> <!-- Box__2  -->
+		</div> <!-- Section  -->
 	</body>
+
 </hml>
diff --git a/index.js 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
@@ -1,3 +1,5 @@
+@import './components/Dropdown/Dropdown.css';
+@import './components/Header/Header.css';
 @import './components/Section/Section.css';
 @import './components/Box/Box.css';