diff --git a/about.css b/about.css
new file mode 100644
index 000000000..bf120fdfe
--- /dev/null
+++ b/about.css
@@ -0,0 +1,41 @@
+body {
+    background-image: url(https://images.unsplash.com/photo-1516576291981-b64ed8383ba8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)
+  }
+  *{
+    color: lightcyan;
+  }
+  h1{
+    font-family:Caveat;
+    font-size: 60px;
+    padding:20px 20px 30px 20px;
+  }
+  
+  .container {
+    width: 600px;
+    margin:20px;
+  }
+  
+  .container header nav a {
+    margin: 0 10px;
+    border:1px solid teal;
+    padding: 10px;
+    display: flex row;
+    justify:space-evenly;
+    border-radius: 10px;
+    text-decoration: none;
+    margin-bottom: 20px;
+    font-size: 20px;
+    font-family:oswald; 
+  }
+  
+  h2{
+    padding:20px;
+    font-family:Caveat;
+    font-size:30px;
+  }
+  h3{
+    padding:20px;
+    font-family:Caveat;
+    font-size:30px;
+  }
+  
\ No newline at end of file
diff --git a/about.html b/about.html
index df1043036..e9ef8e2f8 100644
--- a/about.html
+++ b/about.html
@@ -1,11 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Oswald:wght@200&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="about.css" type="text/css">
+<div class="container">
+  <h1>About me</h1>
+  <header>
+    <nav>
+      <a href="index.html">Home</a>
+      <a href="contact.html">Contact</a>
+      <a href="project.html">Projects</a>
+    </nav>
+  </header>
+</div>
 </head>
-<body>
-    <h1> ABOUT </h1>
 </body>
 </html>
\ No newline at end of file
diff --git a/contact.css b/contact.css
new file mode 100644
index 000000000..bf120fdfe
--- /dev/null
+++ b/contact.css
@@ -0,0 +1,41 @@
+body {
+    background-image: url(https://images.unsplash.com/photo-1516576291981-b64ed8383ba8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)
+  }
+  *{
+    color: lightcyan;
+  }
+  h1{
+    font-family:Caveat;
+    font-size: 60px;
+    padding:20px 20px 30px 20px;
+  }
+  
+  .container {
+    width: 600px;
+    margin:20px;
+  }
+  
+  .container header nav a {
+    margin: 0 10px;
+    border:1px solid teal;
+    padding: 10px;
+    display: flex row;
+    justify:space-evenly;
+    border-radius: 10px;
+    text-decoration: none;
+    margin-bottom: 20px;
+    font-size: 20px;
+    font-family:oswald; 
+  }
+  
+  h2{
+    padding:20px;
+    font-family:Caveat;
+    font-size:30px;
+  }
+  h3{
+    padding:20px;
+    font-family:Caveat;
+    font-size:30px;
+  }
+  
\ No newline at end of file
diff --git a/contact.html b/contact.html
index 7c293bd11..758fd565d 100644
--- a/contact.html
+++ b/contact.html
@@ -1,11 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
-    <title>Document</title>
+    <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Oswald:wght@200&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="contact.css" type="text/css">
+<div class="container">
+  <h1>How to reach me</h1>
+  <header>
+    <nav>
+      <a href="index.html">Home</a>
+      <a href="about.html">About</a>
+      <a href="project.html">Projects</a>
+    </nav>
+  </header>
+</div>
 </head>
-<body>
-    <h1> CONTACT </h1>
-</body>
 </html>
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 000000000..45b52e811
--- /dev/null
+++ b/index.css
@@ -0,0 +1,170 @@
+html{
+  font-size: 62.5%;
+}
+  
+body {
+    background-image: url(https://images.unsplash.com/photo-1513880838915-3b5b17da4383?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80);
+    background-size: 100% 100%;
+    
+  }
+  *{
+    color: cyan;
+  }
+  h1{
+    font-family:Caveat;
+    font-size: 6rem;
+    padding: 5%;
+  }
+  
+  .container {
+    width: 600px;
+    margin:5%;
+  }
+  
+  .container nav a  {
+    margin: 0 10px;
+    border:1px solid cyan;
+    padding: 10px;
+    display: flex row;
+    justify:space-evenly;
+    border-radius: 10px;
+    text-decoration: none;
+    margin-bottom: 5%;
+    font-size: 2rem;
+    font-family:oswald; 
+  }
+
+  .container nav a:hover {
+    background-color:cyan;
+    color: teal;
+    padding:10px;
+    border: 2px solid teal;
+    font-size: 2rem;
+    margin-top: 5%;
+    transition:0.8s;
+    border-radius:50%;
+    font-family: oswald 
+  }
+
+  h2{
+    padding:5%;
+    font-family:Caveat;
+    font-size:3rem;
+  }
+  h3{
+    padding:5%;
+    font-family:Caveat;
+    font-size: 2rem;
+  }
+  
+  .projects {
+    width: 50%;
+    margin:5%;
+  }
+  
+  .projects {
+    border:1px solid cyan;
+    padding: 10px;
+    display: flex row;
+    border-radius: 10px;
+    text-decoration: none;
+    margin-bottom: 5%;
+    font-size: 2rem;
+    font-family:oswald; 
+  }
+ 
+  .projects:hover {
+    background-color:cyan;
+    color: teal;
+    padding:10px;
+    border: 2px solid teal;
+    font-size: 2rem;
+    margin-top: 5%;
+    transition:0.8s;
+    border-radius:50%;
+    font-family: oswald 
+  }
+  img{
+    border-radius: 50px;
+    padding:5%;
+  }
+
+  .jellyfish{
+    border-radius: 50%;
+  }
+
+   p{
+    padding:5%;
+    font-family:oswald;
+    font-size: 2rem;
+  }
+  
+  .content-row{
+    display:flex;
+  }
+  
+  .pics {
+    display: flex;
+    flex-wrap:wrap;
+    font-family:oswald;
+  }
+  
+  .contact {
+    width: 50%;
+    margin:5%;
+    padding: 5%;
+  }
+  
+  .contact {
+    border:1px solid cyan;
+    padding: 10px;
+    display: flex row;
+    border-radius: 10px;
+    text-decoration: none;
+    margin-bottom: 10%;
+    font-size: 2rem;
+    font-family:oswald; 
+    }
+
+    .contact:hover {
+      background-color:cyan;
+      color: teal;
+      padding:10px;
+      border: 2px solid teal;
+      font-size: 2rem;
+      margin-top: 5%;
+      transition:0.8s;
+      border-radius:50%;
+      font-family: oswald   }
+
+  footer{
+    text-align:center;
+    margin: 5%;
+  }
+  .social{
+    font-size: 3rem;
+    text-decoration: none;
+    padding:2%
+  }
+
+
+
+
+}
+  @media(max-width: 800px){
+    .content-row {
+      flex-direction: column-reverse;
+    }
+  }
+
+  @media(max-width: 500px){
+    body {
+      background
+    }
+    .jellyfish{
+      display:none;
+    }
+    img{
+      border-radius: 50%;
+    }
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index d01f779ff..067fca42e 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,91 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
+  <body>
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Oswald:wght@200&display=swap" rel="stylesheet">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+      <link rel="stylesheet" href="index.css" type="text/css">
+      
+
+    </head> 
+      <header class="main-content">
+        <h1>Shenandoah Veele</h1>
+        <div class="container">
+          <nav>
+            <a class="button" href="about.html">About</a>
+            <a href="contact.html">Contact</a>
+            <a href="projects.html">Projects</a>
+          </nav>
+        </div>
+      </header>
     
-</body>
+    <br>
+    <section class="content-row">
+      <img class="jellyfish" src="https://media.mnn.com/assets/images/2016/06/beautiful-jellyfish-species.jpg.653x0_q80_crop-smart.jpg" class="w3-round" alt="jellyfish">
+      
+      <div>
+          <h2>My Portfolio</h2>   
+          <a href="projects.html" class="projects">My Projects</a>
+          <p>Hello! Thanks for stopping by. I am developing myself as a web developer. I am a student at Lambda School and look forward to continued growth and development.</p>
+       </div>
+    </section>
+    <!--  for flex nested flexbox
+    <section class="pics">
+      <img src="https://unsplash.it/200/200">
+      <img src="https://unsplash.it/200/200">
+      <img src="https://unsplash.it/200/200">
+      <img src="https://unsplash.it/200/200">
+      <img src="https://unsplash.it/200/200">
+      <img src="https://unsplash.it/200/200">
+      <img src="https://unsplash.it/200/200">
+    </section> -->
+    <section class="pics">
+      <figure>
+        <img src="https://unsplash.it/200/200">
+        <figcaption>Watch This Space</figcaption>
+      </figure>
+      <figure>
+        <img src="https://unsplash.it/200/200">
+        <figcaption>Watch This Space</figcaption>
+      </figure>
+      <figure>
+        <img src="https://unsplash.it/200/200">
+        <figcaption>Watch This Space</figcaption>
+      </figure>
+      <figure>
+        <img src="https://unsplash.it/200/200">
+        <figcaption>Watch This Space</figcaption>
+      </figure>
+      <figure>
+        <img src="https://unsplash.it/200/200">
+        <figcaption>Watch This Space</figcaption>
+      </figure>
+      <figure>
+        <img src="https://unsplash.it/200/200">
+        <figcaption>Watch This Space</figcaption>
+      </figure>
+      <figure>
+        <img src="https://unsplash.it/200/200">
+        <figcaption>Watch This Space</figcaption>
+      </figure>
+      <figure>
+        <img src="https://unsplash.it/200/200">
+        <figcaption>Watch This Space</figcaption>
+      </figure>
+    </section>
+    <footer>
+      <h3>Like what you see?</h3>
+      <a href="contact.html" class="contact">Contact Me</a>
+        <div class="social">
+          <br>
+          <a href="https://www.facebook.com/shenandoah.veele" class="fa fa-facebook-square"></a>
+          <a href="#" class="fa fa-twitter-square"></a>
+          <a href="https://www.instagram.com/ihl=en" class="fa fa-instagram"></a>
+          <a href="https://www.youtube.com/channel/UCcNnheonIVYSrf3w9ueSllA?view_as=subscriber" class="fa fa-youtube-square"></a>
+        </div>
+    </footer
+  </body>
 </html>
\ No newline at end of file
diff --git a/projects.css b/projects.css
new file mode 100644
index 000000000..a17941609
--- /dev/null
+++ b/projects.css
@@ -0,0 +1,40 @@
+body {
+    background-image: url(https://images.unsplash.com/photo-1516576291981-b64ed8383ba8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)
+  }
+  *{
+    color: lightcyan;
+  }
+  h1{
+    font-family:Caveat;
+    font-size: 60px;
+    padding:20px 20px 30px 20px;
+  }
+  
+  .container {
+    width: 600px;
+    margin:20px;
+  }
+  
+  .container header nav a {
+    margin: 0 10px;
+    border:1px solid teal;
+    padding: 10px;
+    display: flex row;
+    justify:space-evenly;
+    border-radius: 10px;
+    text-decoration: none;
+    margin-bottom: 20px;
+    font-size: 20px;
+    font-family:oswald; 
+  }
+  
+  h2{
+    padding:20px;
+    font-family:Caveat;
+    font-size:30px;
+  }
+  h3{
+    padding:20px;
+    font-family:Caveat;
+    font-size:30px;
+  }
\ No newline at end of file
diff --git a/projects.html b/projects.html
index 266e620b0..294c30156 100644
--- a/projects.html
+++ b/projects.html
@@ -1,11 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1> PROJECTS </h1>
+    <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Oswald:wght@200&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="projects.css" type="text/css">
+    <div class="container">
+      <h1>A few of my projects</h1>
+      <header>
+        <nav>
+          <a href="index.html">Home</a>
+          <a href="about.html">About</a>
+          <a href="contact.html">Contact</a>
+          
+        </nav>
+      </header>
+    </div>
 </body>
-</html>
\ No newline at end of file
+</html>
