diff --git a/img/space.jpg b/img/space.jpg
new file mode 100644
index 0000000..a4a6f48
Binary files /dev/null and b/img/space.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..472a448
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Random Quote Generator</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+  <div class="container">
+  <h1>Random Quote Generator</h1>
+    <div class="quotebox">
+      <p></p>
+      <button id="button">New Quote</button>
+      <button id="twitter-share">Twitter</button>
+    </div>
+
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
+  <script src="script.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..035abdd
--- /dev/null
+++ b/script.js
@@ -0,0 +1,40 @@
+$(function () {
+  $('#button').on('click', randomiseQuote)
+
+  function randomiseQuote() {
+    var requestApi = fetch('https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies+and+famous&count=1',
+      {method: 'POST',
+        headers: new Headers({
+          'X-Mashape-Key': 'akWsSBApPNmshKDzi6hnIxnTnhpCp1QDDbijsnG63ow6St7aWJ',
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'Accept': 'application/json'
+        })
+      })
+    console.log(requestApi)
+    // Now use it!
+    requestApi
+    .then((response) => { // when we got response bacl
+     console.log('response received')
+    // console.log(response.json())
+     return response.json()
+    })
+    .then(randomGen)
+    .catch((err) => { // if fail run this part
+    console.log('error happened somewhere')
+    console.log(err)
+     /* handle response */
+   })
+  }
+
+  function randomGen (data) {
+  //  console.log(data.author)
+   console.log(data.category)
+     var $p = $('<p>')
+     var $quoteBox = $('.quotebox')
+     $('p').text(data.quote + " - " + data.author)
+     $quoteBox.append($p)
+     $p.remove();
+   }
+
+
+})
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8250444
--- /dev/null
+++ b/style.css
@@ -0,0 +1,54 @@
+body {
+  margin: 0 auto;
+}
+
+h1 {
+  text-align: center;
+  margin-top: 10%;
+  color: white;
+}
+
+p {
+  margin-top: 0px;
+  font-size: 18px;
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  border-left: 5px solid #eee;
+  padding-left: 28px;
+}
+
+.container{
+  /*background-image: url("./img/space.jpg");
+  background-size: contain;*/
+  background-color: gray;
+  width: 100%;
+  height: 750px;
+  position: absolute;
+}
+
+.quotebox {
+  width: 38%;
+  background-color: white;
+  border-radius: 4px;
+  margin-top: 6%;
+  margin-left: 27%;
+  margin-right: 25%;
+  margin-bottom: 20px;
+  box-shadow: 2px 2px 5px midnightblue;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: 3rem;
+  padding-bottom: 1.5rem;
+}
+
+#button {
+  color: white;
+  background-color: #337ab7;
+  border-color: #2e6da4;
+  padding: 8px 12px;
+  font-size: 14px;
+  font-weight: 400px;
+  border-radius: 4px;
+  margin-top: 20px;
+  cursor: pointer;
+  border: 1px solid transparent
+}
