diff --git a/images/giphy.gif b/images/giphy.gif
new file mode 100644
index 000000000..86bcb4c84
Binary files /dev/null and b/images/giphy.gif differ
diff --git a/images/images.jpg b/images/images.jpg
new file mode 100644
index 000000000..0e4dd9293
Binary files /dev/null and b/images/images.jpg differ
diff --git a/images/img/1zhscdp.gif b/images/img/1zhscdp.gif
new file mode 100644
index 000000000..f6f2274b6
Binary files /dev/null and b/images/img/1zhscdp.gif differ
diff --git a/images/img/5NGt45P.gif b/images/img/5NGt45P.gif
new file mode 100644
index 000000000..3158b0545
Binary files /dev/null and b/images/img/5NGt45P.gif differ
diff --git a/images/img/5eCMGRB.gif b/images/img/5eCMGRB.gif
new file mode 100644
index 000000000..c799fb49b
Binary files /dev/null and b/images/img/5eCMGRB.gif differ
diff --git a/images/img/RYat7f8.gif b/images/img/RYat7f8.gif
new file mode 100644
index 000000000..1d1095db4
Binary files /dev/null and b/images/img/RYat7f8.gif differ
diff --git a/images/img/RwIH4eU.gif b/images/img/RwIH4eU.gif
new file mode 100644
index 000000000..78ff63e37
Binary files /dev/null and b/images/img/RwIH4eU.gif differ
diff --git a/images/img/Va7usju.gif b/images/img/Va7usju.gif
new file mode 100644
index 000000000..3c3e10d40
Binary files /dev/null and b/images/img/Va7usju.gif differ
diff --git a/images/img/bLMIgO9.gif b/images/img/bLMIgO9.gif
new file mode 100644
index 000000000..9ddce2751
Binary files /dev/null and b/images/img/bLMIgO9.gif differ
diff --git a/images/img/background.png b/images/img/background.png
new file mode 100644
index 000000000..792cc0955
Binary files /dev/null and b/images/img/background.png differ
diff --git a/images/img/d1ck8oq-fc4c337a-fcda-4606-85b1-40b63c025fc6.gif b/images/img/d1ck8oq-fc4c337a-fcda-4606-85b1-40b63c025fc6.gif
new file mode 100644
index 000000000..7d7081703
Binary files /dev/null and b/images/img/d1ck8oq-fc4c337a-fcda-4606-85b1-40b63c025fc6.gif differ
diff --git a/images/img/d1i507x-f4afadcc-295e-467c-9e00-91619619f23e.gif b/images/img/d1i507x-f4afadcc-295e-467c-9e00-91619619f23e.gif
new file mode 100644
index 000000000..51446516c
Binary files /dev/null and b/images/img/d1i507x-f4afadcc-295e-467c-9e00-91619619f23e.gif differ
diff --git a/images/img/d1mt7ge-05f1bf0f-26b6-4255-ae8e-ae281c0dc9c0.gif b/images/img/d1mt7ge-05f1bf0f-26b6-4255-ae8e-ae281c0dc9c0.gif
new file mode 100644
index 000000000..dd8a3a773
Binary files /dev/null and b/images/img/d1mt7ge-05f1bf0f-26b6-4255-ae8e-ae281c0dc9c0.gif differ
diff --git a/images/img/djyuby-56a87bfe-ab4f-4431-b362-06c3ce9f6455.gif b/images/img/djyuby-56a87bfe-ab4f-4431-b362-06c3ce9f6455.gif
new file mode 100644
index 000000000..71f7d4bb8
Binary files /dev/null and b/images/img/djyuby-56a87bfe-ab4f-4431-b362-06c3ce9f6455.gif differ
diff --git a/images/img/dpp917-b96fdb0e-000a-4eda-8cd2-28c4b33dca71.gif b/images/img/dpp917-b96fdb0e-000a-4eda-8cd2-28c4b33dca71.gif
new file mode 100644
index 000000000..cc203fd7d
Binary files /dev/null and b/images/img/dpp917-b96fdb0e-000a-4eda-8cd2-28c4b33dca71.gif differ
diff --git a/images/img/dpspp5-3d44d036-1446-4456-ae40-e71a14f0e8ff.gif b/images/img/dpspp5-3d44d036-1446-4456-ae40-e71a14f0e8ff.gif
new file mode 100644
index 000000000..f4b98833b
Binary files /dev/null and b/images/img/dpspp5-3d44d036-1446-4456-ae40-e71a14f0e8ff.gif differ
diff --git a/images/img/heart.gif b/images/img/heart.gif
new file mode 100644
index 000000000..82aa53da8
Binary files /dev/null and b/images/img/heart.gif differ
diff --git a/images/img/rXV4LBM.gif b/images/img/rXV4LBM.gif
new file mode 100644
index 000000000..c694b8b76
Binary files /dev/null and b/images/img/rXV4LBM.gif differ
diff --git a/images/img/uyHAEIB.gif b/images/img/uyHAEIB.gif
new file mode 100644
index 000000000..1d19fdafa
Binary files /dev/null and b/images/img/uyHAEIB.gif differ
diff --git a/images/img/w4ApPlG.gif b/images/img/w4ApPlG.gif
new file mode 100644
index 000000000..261f58a9d
Binary files /dev/null and b/images/img/w4ApPlG.gif differ
diff --git a/index.html b/index.html
index d01f779ff..0a1b2dc3e 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://fonts.google.com/specimen/Raleway?selection.family=Raleway">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="style/index.css">
+    
+    <script src="js/script.js"></script>
+    <title>Tesla</title>
 </head>
 <body>
     
+<header>
+    <div class="home">
+        <h1>Nicola Tesla</h1>
+            <nav>
+                <a href="#home">Home</a>
+                <a href="about.html">About</a>
+                <a href="contact.html">Contact</a>
+                <a href="projects.html">Projects</a>
+            </nav>
+    </div>
+</header>
+    <section class="about">
+        <div class="container-one"></div>
+        <div class="container-two">
+            <h2>The Future</h2>
+            <div class="button">
+                <button onclick="myFunction()">Click Me</button>
+                <div id="myDIV">
+                <p class="myDiv"> Nikola Tesla was a Serbian-American inventor, electrical engineer, mechanical engineer, and futurist who is best known for his contributions to the design of the modern alternating current electricity circuit system.In the era of 1890, Nikola Tesla produced wireless energy and radio frequency communications. He had a plan to electrify the world with his famous Tesla Coil. It was disrupted by powers that were in control of the monetary system and asset holders. Mr. tesla was a humanitarian and believed science should be focused on making positive progression with mankind and the dwelling inhabitants of the planet.</p>
+            </div>
+        </div>
+    </section>
+    <section class="projects">
+        <div class="buttons">
+            <div class="button one"><button onclick="myFunction()">Click Me</button></div>
+            <div class="button two"><button onclick="myFunction()">Click Me</button></div>
+            <div class="button three"><button onclick="myFunction()">Click Me</button></div>
+            <div class="button four"><button onclick="myFunction()">Click Me</button></div>
+            <div class="button five"><button onclick="myFunction()">Click Me</button></div>
+            <div class="button six"><button onclick="myFunction()">Click Me</button></div>
+            <div class="button seven"><button onclick="myFunction()">Click Me</button></div>
+            <div class="button eight"><button onclick="myFunction()">Click Me</button></div>
+        </div>
+    </section>
 </body>
-</html>
\ No newline at end of file
+<footer>
+        <div class="lower-button"><button onclick="playMusic()">Click Me</button>
+        
+</div>
+</html>
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 000000000..f515fea83
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,22 @@
+  
+  function myFunction() {
+    let x = document.getElementById("myDIV");
+    if (x.style.display === "none") {
+      x.style.display = "block";
+    } else {
+      x.style.display = "none";
+    }
+  }
+  //function playMusic() {
+    //let x = document.getElementById("audio");
+    //if (x.style.play === "play") {
+      //x.style.pause = "pause";
+    //} else {
+     // x.style.play = "play";
+    //}
+  //}
+  function playMusic() {
+    let audio = document.getElementById("audio");
+    audio.play();
+   
+  }
diff --git a/new.txt b/new.txt
new file mode 100644
index 000000000..d218af2c5
--- /dev/null
+++ b/new.txt
@@ -0,0 +1 @@
+New Text
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index 440e53514..da0762246 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1 +1,104 @@
-/* Add CSS styling here */
\ No newline at end of file
+/*CSS Reset*/
+*{
+    box-sizing: border-box;
+    padding:0;
+    margin:0;
+    max-width:100%;
+     /* border:1px solid grey; */
+}
+/*General Styles*/
+html{
+    font-size:62.5%;
+}
+
+body{
+    font-size:2rem;
+    line-height:1.8;
+    font-family: 'Source Sans Pro', sans-serif;
+    color:#4d4d4d;
+    background-color:#a35a5a; 
+    /* background-color: red; */
+}
+a, button{
+    font-size:2rem;
+    font-family: 'Source Sans Pro', sans-serif;
+    background-color: aqua;
+    color:#4d4d4d;
+}
+h1, h2, h3{
+    font-family: 'Oxygen', sans-serif;
+    letter-spacing: 3px;
+    color:#4d4d4d;
+    /* margin:4% 0; */
+    text-align:center; 
+    font-size:4.8rem; 
+}
+
+h1{
+    color:#4d4d4d;
+    font-size:6rem;
+}
+a{
+    text-decoration:none;
+    letter-spacing:2px;
+}
+section{
+    padding:4% 0;
+}
+/*Header*/
+header {
+    background-image: url(/images/images.jpg);
+    background-size:cover;
+    background-repeat: no-repeat;
+}
+h1 {
+ margin: 0 2%;  
+}
+nav a {
+    color: aqua;
+    background-color: #4d4d4d;
+    padding: 5px;
+    border: none;
+    margin: 0 2%;
+}
+nav a:hover {
+    color: crimson;
+    background-color: aqua ;
+    transition:2s;
+}
+.about {
+    display: flex;
+}
+.container-one {
+    background-image: url(/images/giphy.gif);
+    background-repeat: no-repeat;
+    border-radius: 10px;
+    width:50%;
+}
+.container-two {
+    width:50%;
+    padding: 3%;
+}
+.container-two .p {
+    display: flex;
+    flex-direction: flex-wrap;
+}
+.projects .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    justify-content: center;
+}
+
+.projects .button  {
+    width: 20%;
+    height: 25vh;
+    background-image: url(/images/img/5NGt45P.gif);
+    margin: 1% 1%;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+