constructorlabs · KateMhq · Sep 9, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/background 1.jpg b/background 1.jpg
diff --git a/github.jpg b/github.jpg
diff --git a/personal website KM.html b/personal website KM.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewpoint" content="width=device-width, initial-scale=1">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>personal web</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="full__page">
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <img class="selfie" src="selfie.jpg" alt="Selfie" />
+  <header class="title">
+      <em>Hi there! I'm </em>
+      <h1 class="name">Kate Ma</h1>
+  </header>
+    <div class="content">
+      <nav class="content__intro">
+        <h2>So... this is me</h2>
+        <div>I am always in search of ways to live an interesting and
+           meaningful life.
+        </div>
+        <div>I have eyes and heart for beautiful things from people
+          and surroundings.
+        </div>
+        <div>I spent the last three years becoming an actuary
+          (if you know what an actuary does).
+        </div>
+        <div>Now I am an entreprenueur running my own
+            startup company in Shenzhen China.
+        </div>
+        <div>What's more: I am a coder-to-be!
+        </div>
+
+      </nav>
+      <main class="content__body">
+
+        <p>I look forward to getting to know you.</p>
+      </main>
+    </div>
+    <footer class="footer">
+      <div class="footer__contact">
+        <p>Let's get in touch:
+          <a target ="_blank" href="https://www.linkedin.com/in/kate-honqian-ma/">
+            LinkedIn
+          </a>
+          View my code:
+          <a target="_blank" href="https://github.com/KateMhq">
+            GitHub
+          </a>
+        </p>
+        <div class="social__images">
+          <img src="http://res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_540,w_720/svvszaufolhr4jkwl7vz.jpg"
+            width="100px" height="100px"
+          />
+
+          <img src="github.jpg" width="100px" height="100px"
+          />
+        </div>
+      </div>
+    </footer>
+  </div>
+</body>
+</html>
diff --git a/selfie.jpg b/selfie.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,118 @@
+*{
+  box-sizing: inherit;
+}
+body {
+
+  font-family: "Noto Serif JP", sans-serif;
+  font-size: 1.5em;
+  min-height: 100vh;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 100px;
+  display: flex;
+  flex-direction: column;
+  border: 0;
+
+}
+.selfie{
+  margin-bottom: 10px;
+  margin-top: 10px;
+  margin-left: 9%;
+  width: 25%;
+  border-radius: 70%;
+}
+
+.title{
+  display: flex;
+  justify-content: center;
+}
+
+em{
+  font-size: 1.5em;
+}
+
+.content{
+  flex-grow: 1;
+  flex-direction: column;
+
+}
+.content__intro{
+  line-height: 2em;
+  padding: 8%;
+  padding-top: 3%;
+  padding-bottom: 5%;
+
+
+}
+
+.content__body{
+
+  background-image: url("background 1.jpg");
+  background-position: 50% 50%;
+  background-size: cover;
+  background-color: transparent;
+  color: #fff;
+  padding: 8%;
+  padding-top: 55%;
+  padding-bottom: 30%;
+
+  border-top: 10em;
+}
+.content__contact{
+  flex-grow: 1;
+}
+
+.footer{
+  font-size: 30px;
+  padding-left: 8%;
+  display: flex;
+}
+
+@media(min-width:768px){
+  .content{
+    display: flex;
+  }
+  .content__intro{
+    flex-grow: 2;
+  }
+  .content__body{
+    flex-grow: 3;
+  }
+  .footer{
+    flex-grow: 1;
+  }
+}
+
+@media(min-width:960px){
+  .content{
+    display: flex;
+  }
+  .content__intro{
+    flex-grow: 2;
+    padding: 8%;
+    margin-right: 10%
+  }
+  .content__body{
+    flex-grow: 3;
+  }
+  .footer{
+    flex-grow: 1;
+  }
+}
+
+@media(min-width:1200px){
+  .content{
+    display: flex;
+  }
+  .content__intro{
+    flex-grow: 4;
+    padding: 8%;
+    margin-right: 10%
+  }
+  .content__body{
+    flex-grow: 4;
+  }
+  .footer{
+    flex-grow: 1;
+  }
+}