diff --git a/index.html b/index.html
new file mode 100644
index 0000000..87b911a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Web Developer Test</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+
+<body class="whitefont">
+    <div class="bordercontainer">
+
+        <header>
+        <h1 class="heading"> CYF</h1>
+        </header>
+
+        <nav-bar>
+
+            <button>menu 1</button>
+            <button>menu 2</button>
+            <button>menu 3</button>
+
+        </nav-bar>
+        <h2 class="about"> About CYF </h2>
+
+        <h3> What We Do </h3>
+
+        <p> CYF is a fictitious company-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+            mollit anim id est laborum.</p>
+
+        <h4 class="focus"> Our Focus </h4>
+        <ul>
+            <li> Interactive </li>
+            <li> Mobile </li>
+            <li> Technology </li>
+
+        </ul>
+
+        <p class="Click">Click here to download a PDF of our recentwork </p>
+
+        <h3> News </h3>
+
+        <p class="show">Show/Hide news item </p>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+            sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+        <blockquote>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will
+            give you a complete account of the system, and expound the actual teachings of the great explorer of the truth,
+            the master-builder of human happiness."</blockquote>
+
+        <h3> More Information </h3>
+
+        <p>For more information about our products and service, please contact us using the form below</p>
+
+        <form>
+            Contact name*:<br>
+            <input type="text" name="contactname" value="" class="shortname">
+            <br> Contact Email address*:<br>
+            <input type="text" name="contactaddress" value="">
+            <br> Contact phone number:<br>
+            <input type="text" name="contactphonenumber" value="">
+            <br><br>
+
+            <input type="submit" value="submit" class="submit">
+
+
+        </form>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9e4c0aa
--- /dev/null
+++ b/style.css
@@ -0,0 +1,42 @@
+body {
+    color: white;
+    background-image: url("assets/background.png");
+    background-size: 100% 100%;
+}
+
+.heading {
+    color: gray;
+}
+
+.about {
+    color: #9A0A35;
+}
+
+.focus {
+    color: yellow;
+}
+
+.Click {
+    color: yellow;
+}
+
+.show {
+    color: #9A0A35;
+}
+
+button {
+    background: linear-gradient(to bottom, #000000 0%, #434343 100%);
+    color: white;
+}
+
+input {
+    width: 300px
+}
+
+.shortname {
+    width: 150px
+}
+
+.submit {
+    width: 60px
+} 
\ No newline at end of file
