diff --git a/index.html b/index.html
index 39167c5..5521320 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,36 @@
 	<head>
 		<title>Introduction to the DOM</title>
 		<link rel="stylesheet" href="./styles.css">
+		<script src='./index.js' async></script>
 	</head>
 	<body>
+		<div class="Block">
+				<div class="Block__Header">
+					<div class="Block__Dropdown">
+						<div href="#" class="Dropdown--btn">Dropdown</div>
+					<div class="Dropdown--content">
+						<a href='https://lambdaschool.com/' class='Dropdown--link'>Lamba</a>
+						<a href='https://www.google.com/' class='Dropdown--link'>Google</a>
+						<a href='https://developer.mozilla.org/en-US/' class='Dropdown--link'>MDN</a>
+					</div>
+				</div>
+					<h1 class="Block__headerHeadline">Header</h1>
+					</div>
+			<div class="Block">
+				<div class="Block Block--Body">
+					<h3 class="Block__H3"> Placeholder</h3>
+					<div class="Block__text">
+					<p class="Block__paragraph">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>
+				<div class="Block Block--Body">
+					<h3 class ="Block__H3"> Placeholder</h3>
+					<div class="Block__text">
+					<p class="Block__paragraph">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>
+		</div>
+
+		</div>
 	</body>
-</hml>
\ No newline at end of file
+</hml>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..77b6cb8
--- /dev/null
+++ b/index.js
@@ -0,0 +1,15 @@
+const DropdownB = document.querySelector('.Dropdown--btn');
+const DropC = document.querySelector('.Dropdown--content');
+
+
+
+const showContent = () =>{
+
+  if (DropC.style.display === 'none') {
+       DropC.style.display = 'flex';
+   } else {
+       DropC.style.display = 'none';
+   }
+};
+
+DropdownB.addEventListener('click', showContent);
diff --git a/styles.css b/styles.css
index 997c895..3e40893 100644
--- a/styles.css
+++ b/styles.css
@@ -6,3 +6,60 @@ body {
 	min-width: 300px;
 	margin: 0;
 }
+
+.Block{
+	width:100%;
+	display:flex;
+	flex-wrap:wrap;
+	border: solid black 2px;
+
+}
+.Block__Header{
+	display:flex;
+	width:100%;
+	align-items: center;
+	text-align: center;
+
+}
+.Block--Body{
+	width:49.7%;
+}
+
+.Block__headerHeadline{
+	display: flex;
+	align-items: center;
+	margin-left: 40%;
+}
+
+.Block__Dropdown{
+	margin-left: 30px;
+}
+.Dropdown--btn{
+	border: solid black 2px;
+	padding: 2px;
+	text-decoration: none;
+	color: black;
+	cursor: pointer;
+	width: 100px;
+	height: 20px;
+	text-align: center;
+	padding-top:5px;
+}
+
+.Dropdown--content{
+
+	margin-top: 1px;
+	display: none;
+	flex-direction: column;
+	border: solid
+	z-index: 1;
+	border: solid black 2px;
+	position: absolute;
+	background: white;
+	width: 100px;
+}
+
+.Dropdown--link{
+	text-decoration: none;
+	color: inherit;
+}
