binary-com · ashkanx · Apr 18, 2016 · Apr 14, 2016 · Apr 18, 2016 · Apr 18, 2016
diff --git a/index.html b/index.html
@@ -1,38 +1,41 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="utf-8">
   <title>Welcome to the Binary Bot</title>
-	<link href="www/css/main.css" rel="stylesheet" />
+  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+  <link href="www/css/main.css" rel="stylesheet" />
 </head>
-<body bgcolor="#FFFFFF" background="www/image/cutebg40.gif">
-<div class="header">
-	<h1>Welcome to the Binary Bot!</h1>
-</div>
-<div class="content">
-	<p>
-		Binary Bot is a web application designed for non-programmer (or even programmer) users to program trading robbots. Your programmed blocks will generate codes that work directly with the <a href="https://developers.binary.com/">binary.com API</a>. You can pick many different blocks to program simple or complex robbots.
-	</p>
-	<p>
-		A basic background of programming is required to work with Blockly and therefore Binary Bot. You can find good material to get started and build your computational thinking skills through these tutorials:
-		Computational Thinking Introduction to Blockly:
-		<ul>
-			<li>
-				<a href="http://think.cs.vt.edu/book/static/compthink/Algorithms/intro-blockly.html">Introduction to Blockly</a>
-			</li>
-		</ul>
-	</p>
-	<p>
-		Binary Bot is a visual programming environment based on <a href="https://developers.google.com/blockly">Google Blockly</a>.
-	</p>
-	<p>
-		Fork Binary Bot on <a href="https://github.com/binary-com/binary-bot/" target="_blank" title="Go to this project on GitHub">GitHub</a>.
-	</p>
-	<p>
-		You can find some strategies to start with <a href="strategies.html" target="_blank" title="Strategy download page">here</a>.
-	</p>
-	<strong><a class='get_started' href="bot.html">Get Started</a></strong>
-</div>
+
+<body>
+  <div id="header">
+    <div class="wrapper">
+      <a href="" id="logo">
+        <div><img class="symbol-logo" src="www/image/binary-symbol-logo.svg" alt="Binary-logo" /></div>
+        <div><img class="type-logo" src="www/image/binary-type-logo.svg" alt="Binary-logo"></div>
+      </a>
+    </div>
+  </div>
+  <div id="main">
+    <div class="left">
+      <div class="content">
+        <h1>Binary Bot</h1>
+        <p>Binary Bot is a web application designed for non-programmers (or even programmers) to program trading robbots.</p>
+        <p>Your programmed blocks will generate codes that work directly with the binary.com API. You can pick many different blocks to program simple or complex robbots.</p>
+        <p>Binary Bot is a visual programming environment based on <a href="https://developers.google.com/blockly/" target="_blank">Google Blockly</a>.</p>
+        <p>A basic background of programming is required to work with Blockly and therefore Binary Bot. You can find good material to get started and build your computational thinking skills through these tutorials <a href="http://think.cs.vt.edu/book/static/compthink/Algorithms/intro-blockly.html"
+            target="_blank">Introduction to Blockly</a></p>
+        <p class="cta"><a class="button" href="bot.html"><span>Start Now</span></a></p>
+        <div class="contact">
+          <p><span>Fork this project on <a href="https://github.com/binary-com/binary-bot" target="_blank">GitHub</a>.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>Need help? <a href="https://www.binary.com/contact?l=EN">Contact Us</a>.</span></p>
+        </div>
+      </div>
+    </div>
+    <div class="right"><img src="www/image/photo.jpg" alt=""></div>
+  </div>
+  <a href="https://github.com/binary-com/binary-bot" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
+      alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 </body>
-</html>
 
+</html>
diff --git a/www/css/main.css b/www/css/main.css
@@ -1,19 +1,77 @@
-.header {
-	position: fixed;
-	top: 100px;
-	text-align: center;
-	width: 100%;
-	background-color: white;
-}
-.content {
-	width: 100%;
-	position: fixed;
-	top: 200px;
-	text-align: center;
-	background-color: white;
-}
-.get_started {
-	color: white;
-	background-color: red;
-	padding: 5px;
+body {
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+}
+#header {
+  width: 100%;
+  height: 100%;
+  background-color: #2a3052;
+  padding: 20px 0px;
+}
+#header .wrapper {
+  max-width: 960px;
+  margin: 0 auto;
+}
+#header #logo div {
+  display: inline-block;
+  ;
+}
+.type-logo {
+  width: 80%;
+}
+body {
+  width: 100%;
+}
+#main {
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  background-color: #F8F8FF;
+}
+h1 {
+  font-size: 36px;
+  font-weight: 300;
+  color: #e98024;
+}
+.left, .right {
+  width: 45%;
+  margin: 20px;
+  display: inline-block;
+  vertical-align: top;
+}
+.right img {
+  width: 100%;
+}
+.button span {
+  color: #fff;
+  text-decoration: none;
+  text-align: center;
+  line-height: 100%;
+  background: #2e8836;
+  border-radius: 4px;
+  text-transform: capitalize;
+  padding: 10px 25px;
+  display: inline-block;
+  letter-spacing: .75px;
+  overflow: visible;
+  border: 0;
+}
+.cta {
+  margin: 30px auto;
+}
+.contact {
+  margin-top: 40px;
+}
+.contact p {
+  color: gray;
+  font-size: 12px;
+}
+@media only screen and (max-width: 480px) {
+  .left, .right {
+    width: 100%;
+    margin: 20px;
+    display: block;
+    ;
+    vertical-align: top;
+  }
 }
diff --git a/www/image/binary-symbol-logo.svg b/www/image/binary-symbol-logo.svg