diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..6f3a2913e1
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index 7dd97920db..3ab6556be8 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,266 @@
-/* Compile your LESS file! */
\ No newline at end of file
+/* Compile your LESS file! *//* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/* Set every element's box-sizing to border-box */
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  background-color: deeppink;  
+  margin: 0 auto;
+  width: 80%;
+  height: 100%;
+  font-family: "Roboto", sans-serif;
+}
+.header {
+    width: 90%;
+    margin: 2%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+h1 {
+    font-size: 46px;
+}
+
+h4 {
+    font-size: 21px;
+}
+nav {
+    width: 40%;
+    display: flex;
+    justify-content: space-around;
+}
+.top-content{
+    background-color: gray;
+   
+}
+
+.top-contenttop img {
+ width: 20%;
+ margin: 6% 2% 0 2%;
+}
+
+.toptext h1 {
+    width: 90%;
+    margin: 0% 2%;
+   }
+
+   .toptext h4 {
+    width: 90%;
+    margin: 2% 2%;
+   }
+
+.topcontent-bot {
+    width: 80%;
+    margin: 2%;
+    border-top: 3px solid red;
+}
+
+.topcontent-bot p {
+    width: 90%;
+    margin: 2%;
+}
+
+.topcontent-bot button {
+    font-size: 14px;
+    width: 20%;
+    height: 30px;
+    margin: 2%;
+}
+
+
+.biomiddle {
+    width: 100%;
+    padding: 2% 8%;
+    display: flex;
+    justify-content: space-between;
+
+}
+.bio {
+  
+    width: 47%;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
+.middle{
+    
+    width: 47%;
+    display: flex;
+    flex-direction: column;
+}
+
+.bio h2 {
+    font-size: 28px;
+}
+
+*p {
+    font-size: 16;
+}
+.work h5{
+    width: 20%;
+    padding: 2%;
+}
+.worktitle{
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    font-weight: 700;
+}
+.applework {
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+   
+}
+.microwork{
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.amazonwork {
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+footer p{
+    padding: 10%;
+    margin: 6% 0;
+    text-align: center;
+    background: red;
+}
+
diff --git a/cssindex.css/index.css b/cssindex.css/index.css
new file mode 100644
index 0000000000..ac457f15cb
--- /dev/null
+++ b/cssindex.css/index.css
@@ -0,0 +1,130 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+
diff --git a/index.css/index.css b/index.css/index.css
new file mode 100644
index 0000000000..aa57f7a197
--- /dev/null
+++ b/index.css/index.css
@@ -0,0 +1,251 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+body {
+  background-color: deeppink;
+  margin: 0 auto;
+  width: 80%;
+  height: 100%;
+  font-family: "Roboto", sans-serif;
+  /* Set every element's box-sizing to border-box */
+}
+body .header {
+  width: 90%;
+  margin: 2%;
+  display: flex;
+  justify-content: flex-end;
+}
+body h1 {
+  font-size: 46px;
+}
+body h4 {
+  font-size: 21px;
+}
+body nav {
+  width: 40%;
+  display: flex;
+  justify-content: space-around;
+}
+body .top-content {
+  background-color: gray;
+}
+body .top-contenttop img {
+  width: 20%;
+  margin: 6% 2% 0 2%;
+}
+body .toptext h1 {
+  width: 90%;
+  margin: 0% 2%;
+}
+body .toptext h4 {
+  width: 90%;
+  margin: 2% 2%;
+}
+body .topcontent-bot {
+  width: 80%;
+  margin: 2%;
+  border-top: 3px solid red;
+}
+body .topcontent-bot p {
+  width: 90%;
+  margin: 2%;
+}
+body .topcontent-bot button {
+  font-size: 14px;
+  width: 20%;
+  height: 30px;
+  margin: 2%;
+}
+body .biomiddle {
+  width: 100%;
+  padding: 2% 8%;
+  display: flex;
+  justify-content: space-between;
+}
+body .bio {
+  width: 47%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+body .middle {
+  width: 47%;
+  display: flex;
+  flex-direction: column;
+}
+body .bio h2 {
+  font-size: 28px;
+}
+body *p {
+  font-size: 16;
+}
+body .work h5 {
+  width: 20%;
+  padding: 2%;
+}
+body .worktitle {
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  font-weight: 700;
+}
+body .applework {
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+body .microwork {
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+body .amazonwork {
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+body footer p {
+  padding: 10%;
+  margin: 6% 0;
+  text-align: center;
+  background: red;
+}
+body * {
+  box-sizing: border-box;
+}
+body html,
+body body {
+  border: 2px dotted blue;
+  padding: 2%;
+  height: 100%;
+  font-family: "Roboto", sans-serif;
+}
diff --git a/index.html b/index.html
index a7f9e3ad10..b0e22fae5b 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>My Resume</title>
 
@@ -14,6 +15,79 @@
 </head>
 
 <body>
-  <h1>My Resume</h1>
+ <div class="header">
+    <header></header>
+     <nav>
+      <a href="">Home</a>
+      <a href="">About</a>
+      <a href="">Portfolio</a>
+      <a href="">Contact</a>
+     </nav>
+ </div>
+
+ <div class="top-content">
+  <div class="top-contenttop">
+   <img src="Picture/g.jpeg" alt="Jonny Appleseed"> </img>
+    <div class="toptext">
+     <h1>Jonny Appleseed -Web Dev</h1>
+     <h4>Technology is my jam!</h4>
+    
+  </div>
+ </div>
+
+ <div class="topcontent-bot">
+  <p>Occasionally I have time work on side projects, 
+    if you're interested, let me know by signing up on 
+    this website.</p>
+  <button>Lets Team Up</button>
+ </div> 
+</div>
+<div class="biomiddle">
+<div class="bio">
+  <h2>Listen Up..</h2>
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, cum molestiae quod ipsa ducimus dolor corporis
+   consectetur ullam quibusdam, et quasi? Expedita deleniti fuga soluta cum at praesentium explicabo repudiandae.</p>
+</div>
+
+<div class="middle">
+  <h3>Stuff I'm Good At:</h3>
+  <ul>
+    <h4>Disc Golf</h4>
+    <h4>Coding up UI</h4>
+    <h4>Playing lots of video games</h4>
+    <h4>Using bootstrap grid</h4>
+    <h4>Taking long naps</h4>
+  </ul>
+</div>
+</div>
+<div class="work">
+  <div class="worktitle">
+    <h5>Yrs</h5>
+    <h5>Company</h5>
+    <h5>Title</h5>
+    <h5>Tech Used</h5>
+  </div>
+  <div class="applework">
+      <h5>1</h5>
+      <h5>Apple</h5>
+      <h5>Software Engineer</h5>
+      <h5>Swift</h5>
+  </div>
+  <div class="microwork">
+      <h5>2</h5>
+      <h5>Microsoft</h5>
+      <h5>Computer Scientist</h5>
+      <h5>.Net</h5>
+  </div>
+  <div class="amazonwork">
+      <h5>3</h5>
+      <h5>Amazon</h5>
+      <h5>Dev Ops</h5>
+      <h5>AWS</h5>
+  </div>
+</div>
+<footer>
+  <p>Copyright Awesomess 2018</p>
+</footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index 191ce142ec..0ff1318e91 100644
--- a/less/index.less
+++ b/less/index.less
@@ -47,6 +47,139 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+body {
+  background-color: deeppink;  
+  margin: 0 auto;
+  width: 80%;
+  height: 100%;
+  font-family: "Roboto", sans-serif;
+
+.header {
+    width: 90%;
+    margin: 2%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+h1 {
+    font-size: 46px;
+}
+
+h4 {
+    font-size: 21px;
+}
+nav {
+    width: 40%;
+    display: flex;
+    justify-content: space-around;
+}
+.top-content{
+    background-color: gray;
+   
+}
+
+.top-contenttop img {
+ width: 20%;
+ margin: 6% 2% 0 2%;
+}
+
+.toptext h1 {
+    width: 90%;
+    margin: 0% 2%;
+   }
+
+   .toptext h4 {
+    width: 90%;
+    margin: 2% 2%;
+   }
+
+.topcontent-bot {
+    width: 80%;
+    margin: 2%;
+    border-top: 3px solid red;
+}
+
+.topcontent-bot p {
+    width: 90%;
+    margin: 2%;
+}
+
+.topcontent-bot button {
+    font-size: 14px;
+    width: 20%;
+    height: 30px;
+    margin: 2%;
+}
+
+
+.biomiddle {
+    width: 100%;
+    padding: 2% 8%;
+    display: flex;
+    justify-content: space-between;
+
+}
+.bio {
+  
+    width: 47%;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
+.middle{
+    
+    width: 47%;
+    display: flex;
+    flex-direction: column;
+}
+
+.bio h2 {
+    font-size: 28px;
+}
+
+*p {
+    font-size: 16;
+}
+.work h5{
+    width: 20%;
+    padding: 2%;
+}
+.worktitle{
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    font-weight: 700;
+}
+.applework {
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+   
+}
+.microwork{
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.amazonwork {
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+footer p{
+    padding: 10%;
+    margin: 6% 0;
+    text-align: center;
+    background: red;
+}
+
 
 /* Set every element's box-sizing to border-box */
 * {
@@ -54,6 +187,12 @@ table {
 }
 
 html, body {
-    height: 100%;
+	.border();
+	height: 100%;
+	font-family: "Roboto" , sans-serif;
 }
-
+.border(){
+	border:2px dotted blue;
+	padding:2%;
+  }
+}
\ No newline at end of file