gorjnamron · gorjnamron · Sep 4, 2020 · Sep 4, 2020
diff --git a/images/giphy.gif b/images/giphy.gif
diff --git a/images/images.jpg b/images/images.jpg
diff --git a/images/img/1zhscdp.gif b/images/img/1zhscdp.gif
diff --git a/images/img/5NGt45P.gif b/images/img/5NGt45P.gif
diff --git a/images/img/5eCMGRB.gif b/images/img/5eCMGRB.gif
diff --git a/images/img/RYat7f8.gif b/images/img/RYat7f8.gif
diff --git a/images/img/RwIH4eU.gif b/images/img/RwIH4eU.gif
diff --git a/images/img/Va7usju.gif b/images/img/Va7usju.gif
diff --git a/images/img/bLMIgO9.gif b/images/img/bLMIgO9.gif
diff --git a/images/img/background.png b/images/img/background.png
diff --git a/images/img/d1ck8oq-fc4c337a-fcda-4606-85b1-40b63c025fc6.gif b/images/img/d1ck8oq-fc4c337a-fcda-4606-85b1-40b63c025fc6.gif
diff --git a/images/img/d1i507x-f4afadcc-295e-467c-9e00-91619619f23e.gif b/images/img/d1i507x-f4afadcc-295e-467c-9e00-91619619f23e.gif
diff --git a/images/img/d1mt7ge-05f1bf0f-26b6-4255-ae8e-ae281c0dc9c0.gif b/images/img/d1mt7ge-05f1bf0f-26b6-4255-ae8e-ae281c0dc9c0.gif
diff --git a/images/img/djyuby-56a87bfe-ab4f-4431-b362-06c3ce9f6455.gif b/images/img/djyuby-56a87bfe-ab4f-4431-b362-06c3ce9f6455.gif
diff --git a/images/img/dpp917-b96fdb0e-000a-4eda-8cd2-28c4b33dca71.gif b/images/img/dpp917-b96fdb0e-000a-4eda-8cd2-28c4b33dca71.gif
diff --git a/images/img/dpspp5-3d44d036-1446-4456-ae40-e71a14f0e8ff.gif b/images/img/dpspp5-3d44d036-1446-4456-ae40-e71a14f0e8ff.gif
diff --git a/images/img/heart.gif b/images/img/heart.gif
diff --git a/images/img/rXV4LBM.gif b/images/img/rXV4LBM.gif
diff --git a/images/img/uyHAEIB.gif b/images/img/uyHAEIB.gif
diff --git a/images/img/w4ApPlG.gif b/images/img/w4ApPlG.gif
diff --git 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>
+<footer>
+        <div class="lower-button"><button onclick="playMusic()">Click Me</button>
+
+</div>
+</html>
diff --git a/js/script.js 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
@@ -0,0 +1 @@
+New Text
diff --git a/style/index.css b/style/index.css
@@ -1 +1,104 @@
-/* Add CSS styling here */
+/*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;
+}
+
+