diff --git a/index-flex.html b/index-flex.html
new file mode 100644
index 0000000..fd93c4b
--- /dev/null
+++ b/index-flex.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>HTML-CSS-Mini</title>
+    <!-- Here we reference our styles.css for our page styling -->
+    <link rel="stylesheet" href="./style-flex.css">
+  </head>
+  <body>
+    <div class="container">
+      <div class="heading">
+        <h1>Heading</h1>
+      </div>
+    <div class="sectionLeft">
+      <new>New!</new>
+      <h1>Placeholder</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Nulla vel nulla ornare, congue neque at, auctor massa. 
+          Morbi id tempor odio, scelerisque tempus erat.
+          Nunc pretium purus in magna consequat consectetur. 
+          Praesent lacinia neque ac lectus pretium volutpat.
+          Suspendisse at felis eget risus accumsan efficitur quis at libero.
+          Suspendisse vitae lobortis ante. Nam blandit odio ut nisi vehicula maximus.</p>
+      </div>
+    <div class="sectionRight">
+      <h1>Placeholder</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Nulla vel nulla ornare, congue neque at, auctor massa. 
+          Morbi id tempor odio, scelerisque tempus erat.
+          Nunc pretium purus in magna consequat consectetur. 
+          Praesent lacinia neque ac lectus pretium volutpat.
+          Suspendisse at felis eget risus accumsan efficitur quis at libero.
+          Suspendisse vitae lobortis ante. Nam blandit odio ut nisi vehicula maximus.</p>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index f74abbf..9331792 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,28 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Introduction to the DOM</title>
+    <title>HTML-CSS-Mini</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 -->
+    <h1 class="header">Header</h1>
+    <div>
+        <header><strong>Placeholder</strong><new id="new">New!</new></header>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Nulla vel nulla ornare, congue neque at, auctor massa. Morbi id tempor odio, scelerisque tempus erat.
+        Nunc pretium purus in magna consequat consectetur. Praesent lacinia neque ac lectus pretium volutpat.
+        Suspendisse at felis eget risus accumsan efficitur quis at libero.
+        Suspendisse vitae lobortis ante. Nam blandit odio ut nisi vehicula maximus.</p>
+    </div>
+    <div>
+      <header><strong>Placeholder</strong></header>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Nulla vel nulla ornare, congue neque at, auctor massa. Morbi id tempor odio, scelerisque tempus erat.
+        Nunc pretium purus in magna consequat consectetur. Praesent lacinia neque ac lectus pretium volutpat.
+        Suspendisse at felis eget risus accumsan efficitur quis at libero.
+        Suspendisse vitae lobortis ante. Nam blandit odio ut nisi vehicula maximus.</p>
+    </div>
   </body>
 </html>
\ No newline at end of file
diff --git a/style-flex.css b/style-flex.css
new file mode 100644
index 0000000..6a1dda5
--- /dev/null
+++ b/style-flex.css
@@ -0,0 +1,43 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin:0;
+  padding: 0;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  border-style: solid;
+  border-bottom-style: none;
+  justify-content: center;
+}
+
+.sectionLeft {
+  flex-direction: column;
+  flex: 1 45%;
+  display: inline-flex;
+  width: 49%;
+  border-style: solid;
+  border-width: 1%;
+  padding: 10px;
+}
+
+new {
+  padding: 10px;
+  display: flex;
+  background-color: green;
+  width: 50px;
+  height: 25px;
+}
+
+.sectionRight {
+  flex-direction: column;
+  flex: 1 50%;
+  display: inline-flex;
+  width: 50%;
+  border-style: solid;
+  border-width: 1%;
+  padding: 10px;
+}
diff --git a/styles.css b/styles.css
index e69de29..2e2cefe 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,68 @@
+.header {
+  display: block;
+  box-sizing: border-box;
+  text-align:center;
+  border-style: solid;
+  border-color: black;
+  border-bottom-width: 0;
+  padding: 15px;
+  margin: 0;
+}
+
+div {
+  display: inline-block;
+  border-style: solid;
+  border-color: black;
+  box-sizing: border-box;
+  width: 50%;
+  padding: 10px;
+  float: left;
+  margin: 0;
+}
+
+#new {
+  box-sizing: content-box;
+  width: 50px;
+  height: 20px;
+  background-color: grey;
+  float: right;
+  text-align: center;
+  padding: 10px;
+  margin-right: -10px;
+}
+
+@media (max-width: 800px) {
+  .header {
+    display: block;
+    box-sizing: border-box;
+    text-align:center;
+    border-style: solid;
+    border-color: black;
+    border-bottom-width: 0;
+    padding: 15px;
+    margin: 0;
+  }
+  
+  div {
+    display: block;
+    border-style: solid;
+    border-color: black;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px;
+    float: left;
+    margin: 0;
+  }
+  
+  #new {
+    box-sizing: content-box;
+    width: 50px;
+    height: 20px;
+    background-color: grey;
+    float: right;
+    text-align: center;
+    padding: 10px;
+    margin-right: -10px;
+  }
+}
+
