do eet

adhsu · Mar 21, 2017 · 8342006 · 8342006
1 parent 6b2a03d
commit 8342006
Show file tree

Hide file tree

Showing 11 changed files with 1,302 additions and 1 deletion.
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,127 @@
+@import "libs/reset.css";
+
+@font-face {
+  font-family: 'Apercu';
+  src: url("../fonts/Apercu_Regular.otf");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Apercu';
+  src: url("../fonts/Apercu_Medium.otf");
+  font-weight: 500;
+  font-style: normal;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+body {
+  background-color: #DE5A5A;
+  color: white;
+  font-family: 'Apercu', sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  text-align: center;
+}
+
+img {
+  max-width: 100%;
+}
+
+.logo_container {
+  margin-top: 0px;
+  margin-bottom: 36px;
+}
+
+.logo {
+  display: inline-block;
+  vertical-align: middle;
+  width: 60px;
+  height: 50px;
+  margin-right: 12px;
+}
+
+.logo_text {
+  display: inline-block;
+  vertical-align: middle;
+  font-family: 'Apercu', sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+}
+
+p {
+  font-family: 'Apercu', sans-serif;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  line-height: 36px;
+}
+
+.link {
+  display: inline-block;
+  margin-top: 36px;
+}
+
+.link_image {
+  width: 200px;
+  height: 57px;
+}
+
+.phone_container {
+  /*max-width: 100%;*/
+  max-width: 400px;
+}
+
+.phone {
+  width: 100%;
+}
+
+.container {
+  margin: 50px auto 0;
+  padding: 20px;
+  width: 100%;
+  max-width: 950px;
+}
+
+.container:after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.section_left, .section_right {
+  width: 100%;
+  margin-bottom: 36px;
+}
+
+@media (min-width: 1001px) {
+
+  body {
+    text-align: left;
+  }
+
+  .logo_container {
+    margin-top: 200px;
+  }
+
+  .section_left {
+    width: 50%;
+    float: right;
+    margin-bottom: 0px;
+  }
+
+  .section_right {
+    width: 50%;
+    float: left;
+  }
+
+  .phone_container {
+    float: left;
+  }
+}
diff --git a/fonts/Apercu_Medium.otf b/fonts/Apercu_Medium.otf
diff --git a/fonts/Apercu_Regular.otf b/fonts/Apercu_Regular.otf
diff --git a/images/app_store_badge.png b/images/app_store_badge.png
diff --git a/images/phone.png b/images/phone.png
diff --git a/images/speak_logo.png b/images/speak_logo.png
diff --git a/index.htm b/index.htm
@@ -1 +1,37 @@
-<h1>hello</h1>
+<!DOCTYPE html>
+<html></html>
+<head>
+  <title>Speak: An AI English Tutor</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="css/main.css">
+</head>
+<body>
+  <div class="container">
+
+    <div class="section_left">
+
+
+      <div class="logo_container">
+        <img class="logo" src="images/speak_logo.png">
+        <span class="logo_text">Speak</span>
+      </div>
+
+      <p>Speak is designed to help you gain confidence speaking out loud in English. We put you in realistic conversations with real slang and give you feedback on how to sound more native.</p>
+
+      <a class="link" href="https://itunes.apple.com/us/app/speak-practice-speaking-english/id1181737552?mt=8">
+        <img class="link_image" src="images/app_store_badge.png">
+      </a>
+
+    </div>
+
+    <div class="section_right">
+
+
+      <div class="phone_container">
+        <img class="phone" src="images/phone.png">
+      </div>
+
+    </div>
+
+  </div>
+</body>