bloominstituteoftechnology · devbacon · Mar 28, 2018 · Mar 28, 2018 · Mar 28, 2018 · Mar 28, 2018
diff --git a/components/Box/Box.css b/components/Box/Box.css
@@ -0,0 +1,3 @@
+.Box {
+  border: 1px solid black;
+}
diff --git a/components/Header/Header.css b/components/Header/Header.css
@@ -0,0 +1,38 @@
+.Box__header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Box__headDropdown {
+  position: absolute;
+  left: 40px;
+  width: 90px;
+}
+
+.Box__headDropTitle {
+  display: flex;
+  justify-content: center;
+  border-width: 2px;
+}
+
+.Box__headDropdown--expanded {
+  position: absolute;
+  width: 100%;
+}
+
+.Box__headDropUl {
+  display: flex;
+  flex-flow: column;
+  padding-left: 0;
+  list-style: none;
+  background: white;
+  border-width: 2px;
+}
+
+.Box__headDropA {
+  padding: 5px 0 5px;
+  display: flex;
+  justify-content: center;
+}
diff --git a/components/Section/Section.css b/components/Section/Section.css
@@ -0,0 +1,5 @@
+.Box__section {
+  display: inline-block;
+  width: 50%;
+  padding: 10px;
+}
diff --git a/index.html b/index.html
@@ -2,8 +2,49 @@
 <hml>
 	<head>
 		<title>Introduction to the DOM</title>
-		<link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css">
+    <script type="text/javascript" src="./index.js" async></script>
 	</head>
 	<body>
+    <div class="Box">
+      <div class="Box Box__header">
+        <div class="Box__headDropdown">
+          <div class="Box Box__headDropTitle">Dropdown</div>
+          <div class="Box__headDropdown--expanded hidden">
+            <ul class="Box Box__headDropUl">
+              <a class="Box__headDropA" href="#">Lambda</a>
+              <a class="Box__headDropA" href="#">Google</a>
+              <a class="Box__headDropA" href="#">MDN</a>
+            </ul>
+          </div>
+        </div>
+        <h1 class="Box__headTitle">Header</h1>
+      </div>
+      <div class="Box Box__section section1">
+        <h3 class="Box__sectionTitle">Placeholder</h3>
+        <p class="Box__sectionText">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 class="Box Box__section section2">
+        <h3 class="Box__sectionTitle">Placeholder</h3>
+        <p class="Box__sectionText">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>
 	</body>
 </hml>
diff --git a/index.js b/index.js
@@ -0,0 +1,15 @@
+const headDropdown = document.querySelector('.Box__headDropdown');
+const headDropdownExpanded = document.querySelector('.Box__headDropdown--expanded');
+
+// Create class for quick set up of drop down functionality
+class Dropdown {
+  // Take in subject of the event and it's trigger
+  constructor(subject, trigger) {
+    // Listen for triggering event
+    trigger.addEventListener('click', () => {
+      subject.classList.toggle('hidden'); // Hide/Show element
+    })
+  }
+}
+
+new Dropdown(headDropdownExpanded, headDropdown);
diff --git a/styles.css b/styles.css
@@ -1,8 +1,17 @@
-@import './components/Section/Section.css';
 @import './components/Box/Box.css';
+@import './components/Header/Header.css';
+@import './components/Section/Section.css';
 
 body {
 	box-sizing: border-box;
 	min-width: 300px;
-	margin: 0;
+	margin: 10px;
 }
+
+* {
+  box-sizing: border-box;
+}
+
+.hidden {
+  display: none;
+}