diff --git a/index.html b/index.html
index f74abbf..804ac60 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,26 @@
+<!file:///C:/Users/Eileen/HTML-CSS-mini/index.html>
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Introduction to the DOM</title>
+    <title>Eileen's Flex Box Page </title>
     <!-- Here we reference our styles.css for our page styling -->
     <link rel="stylesheet" href="./styles.css">
   </head>
   <body>
     <!-- This is where you will begin your solution -->
+    <div class="header">
+      <h1>Header</h1>
+    </div>
+    <div class="left">
+      <div class="left__top"> 
+        <h2>Placeholder</h2>
+        <div class="left__new">New!</div>
+      </div>
+        <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 class="right">
+      <div class="right__top"><h2>Placeholder</h2></div>
+      <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>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/styles.css b/styles.css
index e69de29..fe90bdf 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,64 @@
+* {
+  box-sizing: border-box;
+  display: flex;
+}
+title {
+  display: none;
+}
+body {
+  margin: auto;
+  flex-flow: column wrap;
+}
+.header, .left, .right {
+  border: solid black;
+}
+.header {
+  border-width: 3px 3px 0px 3px;
+  width: 100%;
+  height: 75px;
+  justify-content: center;
+  align-items: center;
+}
+.left, .right {
+  flex-direction: column;
+  padding-left: 17.5px;
+  padding-bottom: 3px;
+  width: 100%;
+}
+.left__top, .right__top {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  width: 100%;
+}
+.left {
+  border-width: 3px;
+}
+.right {
+  border-width: 0px 3px 3px 3px;
+}
+p {
+  margin-top: auto;
+  padding-right: 10px;
+}
+.left__new {
+  justify-content: center;
+  align-items: center;
+  background-color: gray;
+  width: 50px;
+  height: 30px;
+}
+
+@media (min-width: 600px) {
+  body {
+    flex-flow: row wrap;
+  }
+  .left {
+    width: calc(50% + 1.5px);
+  }
+  .right {
+    width: calc(50% - 1.5px);
+    border-width: 3px 3px 3px 0px;
+  }
+}
