diff --git a/assets/exam css b/assets/exam css
new file mode 100644
index 0000000..46cd440
--- /dev/null
+++ b/assets/exam css	
@@ -0,0 +1,3 @@
+body{
+  background;
+}
\ No newline at end of file
diff --git a/event.js b/event.js
new file mode 100644
index 0000000..c84f08e
--- /dev/null
+++ b/event.js
@@ -0,0 +1,45 @@
+var button = document.querySelector('#newsButton');
+button.addEventListener('click', doSomething);
+
+function doSomething() {
+  //if my <p>is showing hide it,else show it
+  var news = document.querySelector('#newsInfo');
+  if (news.style.display === 'none') {
+    news.style.display = 'block';
+  } else {
+    news.style.display = 'none';
+  }
+
+}
+
+
+var xhr = new XMLHttpRequest();
+xhr.onreadystatechange = function () {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      var data = JSON.parse(xhr.responseText);
+      console.log(data)
+      var textBox = document.querySelector('#newsInfo');
+
+      for (var i = 0; i < data.length; i++) {
+        var heading = document.createElement('h2');
+        var paragraph = document.createElement('p');
+        heading.innerText = data[i].title;
+        paragraph.innerText = data[i].summary;
+        textBox.appendChild(heading);
+        textBox.appendChild(paragraph);
+
+      }
+
+    } else {
+
+    }
+  }
+}
+
+
+xhr.open('GET', 'https://private-e99507-kabaros.apiary-mock.com/news');
+xhr.send();
+
+console.log(xhr.status);
+console.log(xhr.statusText);
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b4fd7d5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="styles/style.css">
+
+  <title>CYF</title>
+
+</head>
+
+<body>
+
+  <header>CYF</header>
+  <!-- Navigation -->
+  <nav class="navBar">
+    <a href="Menu1" class="navBar">Menu 1</a>
+    <a href="Menu2" class="navBar">Menu 2</a>
+    <a href="Menu3" class="navBar">Menu 3</a>
+
+  </nav>
+
+  <h1>About CYF </h1>
+  <main>
+    <article>
+      <h2>What We Do</h2>
+      <p>CYF is a fictitious company-Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem
+        vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um
+        texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia
+        electrónica, mantendo-se essencialmente inalterada
+      </p>
+      <h3>Our Focus</h3>
+      <ul>
+        <li>Interactive</li>
+        <li>Mobile</li>
+        <li>Technology</li>
+      </ul>
+      <a class="address" href="">Click here to download a pdf of our recent work.</a>
+      <h4>News</h4>
+
+      <h5 id="newsButton">show/hide news item</h5>
+      <p id="newsInfo">Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura
+        clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio
+        Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum,
+        e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem.</p>
+    </article>
+    <h6>More Information</h6>
+    <p>For more information about our producsts and services,please contact us using<br> the form below</p>
+    <h7>items marked * are required fields</h7>
+    <form>
+      contact name*:<br>
+      <input type="text" name="firstName + secondName"><br> contact email address*:<br>
+      <input type="email" name="emailAddress"><br> contact Phone Number:<br>
+      <input type="number" name="number"><br>
+
+
+      <input type="Submit" value="Submit">
+    </form>
+  </main>
+
+
+
+
+
+
+  <script src="event.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..a28c68d
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,38 @@
+body {
+  background-image:url(../assets/background.png);
+  color: white;
+  font-family: serif;
+  background-size: 100% 100%;
+ background-repeat: no-repeat;
+  
+}
+header{
+  font-size: 40px;
+  color: white;
+}
+h1{
+color:	#CD5C5C;
+}
+h3{
+  color: yellow;
+}
+.address{
+  font-style: italic;
+  color: yellow;
+}
+.navBar{
+background: linear-gradient(white,black);
+padding-right: 10px;
+border-right: 2px solid ;
+border-bottom: 2px solid;
+border-left: 2px solid;
+border-top: 2px solid;
+}
+a{
+  color: white;
+}
+h6{
+  font-size: 20px;
+}
+
+
