Create basis for signature.html

2017-04-21 18:06:19 +08:00 · 2017-04-21 18:06:19 +08:00 · 6037d73936
parent c3f3ca29df
commit 6037d73936
1 changed files with 62 additions and 0 deletions
--- a/signature.html
+++ b/signature.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style> 
+.flex-container {
+    display: -webkit-flex;
+    display: flex;  
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+    text-align: center;
+}
+
+.flex-container > * {
+    padding: 15px;
+    -webkit-flex: 1 100%;
+    flex: 1 100%;
+}
+
+.article {
+    text-align: left;
+}
+
+header {background: black;color:white;}
+footer {background: #aaa;color:white;}
+.nav {background:#eee;}
+
+.nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+.nav ul a {
+    text-decoration: none;
+}
+
+@media all and (min-width: 768px) {
+    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
+    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
+    footer {-webkit-order:3;order:3;}
+}
+</style>
+</head>
+<body>
+
+<div class="flex-container">
+<header>
+  <h1>SIGNATURE</h1>
+</header>
+
+<nav class="nav">
+WHAT
+</nav>
+
+<article class="article">
+  <h1>IS</h1>
+  <p>HAPPENING</p>
+</article>
+
+<footer>OH!</footer>
+</div>
+
+</body>
+</html>