diff --git a/img/arrow-down.svg b/img/arrow-down.svg
new file mode 100644
index 0000000..4f5fac8
--- /dev/null
+++ b/img/arrow-down.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<g>
+		<polygon points="225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093   " data-original="#000000" class="active-path" data-old_color="#FBFCFB" fill="#FFFFFF"/>
+	</g>
+</g></g> </svg>
diff --git a/img/background.jpg b/img/background.jpg
new file mode 100644
index 0000000..12b5736
Binary files /dev/null and b/img/background.jpg differ
diff --git a/img/contact-us.png b/img/contact-us.png
new file mode 100644
index 0000000..54b6310
Binary files /dev/null and b/img/contact-us.png differ
diff --git a/img/magma-logo.png b/img/magma-logo.png
new file mode 100644
index 0000000..2ee49a0
Binary files /dev/null and b/img/magma-logo.png differ
diff --git a/img/magma2.ico b/img/magma2.ico
new file mode 100644
index 0000000..6e06df8
Binary files /dev/null and b/img/magma2.ico differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a08e097
--- /dev/null
+++ b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Ruby on Rails development, ecommerce design | MagmaLabs</title>
+  <link rel="shortcut icon" href="img/magma2.ico">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <img src="img/magma-logo.png" alt="magma" class="img1">
+      <ul>
+        <li>OUR SERVICES</li>
+        <li><img src="img/arrow-down.svg" alt="arrow"></li>
+        <li>CASE STUDIES</li>
+        <li>ABOUT US</li>
+        <li>BLOG</li>
+        <li class="red">CONTACT US</li>
+      </ul>
+    </header>
+    <section>
+      <h2 class="red">Empowering innovation <br>through collaboration</h2>
+      <p>Building partnerships with clients to <a href="#">design</a> user-centric <a href="#">web solutions</a>, beautiful <br> <a href="#">ecommerce sites</a>, and engaging <a href="#">mobile apps</a>.</p>
+      <ul>
+        <li><span>&bull;</span> Ruby on Rails</li>
+        <li><span>&bull;</span>Solidus/Spree</li>
+        <li><span>&bull;</span>React Native</li>
+        <li><span>&bull;</span>UX design</li>
+      </ul>
+    </section>
+    <footer>
+      <img src="img/contact-us.png" alt="">
+    </footer>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..db1243f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,77 @@
+body {
+  background-image: url("img/background.jpg");
+  background-size: 130%;
+  font-family: Lato-Light,sans-serif;
+}
+
+header .img1 {
+  height: 40px;
+  background: rgba(255, 0, 0, 0);
+  margin: 15px 0 0 20px;
+}
+
+header ul {
+  float: right;
+  list-style: none;
+  margin-right: 30px;
+  padding-top: 20px;
+}
+
+header ul li {
+  line-height: 1.375em;
+  font-size: 1em;
+  font-weight: 400;
+  float: left;
+  margin-left: 35px;
+}
+
+ul img {
+  width: 20px; 
+  height: 20px;
+  margin-left: -25px;
+}
+
+.red, section span  {
+  color: #f84848;
+}
+
+section {
+  text-align: center;
+  margin-top: 6%;
+}
+
+h2 {
+  font-size: 2.75em;
+  font-weight: 100;  
+}
+
+body, a {
+  color: #fff;
+}
+
+section p {
+  font-size: 1.25em;
+  line-height: 1.625em;
+}
+
+section ul {
+  margin-top: 6%;
+  margin-left: 20%;
+  font-size: 1.2em;
+  list-style: none;
+}
+
+section ul li {
+  float: left;
+  margin-left: 50px;
+}
+
+section span {
+  margin-right: 10px;
+}
+
+footer {
+  margin-top: 16%;
+  text-align: center;
+}
+
