Merge pull request #30 from yvonne-liu/logameal

Add basic layout styles to meal log page
FAC10 · May 23, 2017 · b6bf5ad · b6bf5ad
2 parents 44c9bdc + 3951073
commit b6bf5ad
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 10 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/logameal.css b/css/logameal.css
@@ -0,0 +1,29 @@
+.logameal_header {
+  padding: 1em;
+}
+
+.header_back {
+  height: 2em;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 1em; 
+}
+
+.logameal_input {
+  border: .05em solid black;
+}
+
+.logameal_questions {
+  margin-bottom: 2em;
+}
+
+.logameal_submit {
+  background: silver;
+  padding: .3em;
+  line-height: 1.5em;
+}
diff --git a/images/back.png b/images/back.png
diff --git a/logameal.html b/logameal.html
@@ -4,22 +4,26 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-<link rel="stylesheet" href="./css/main.css" type="text/css">
+  <link rel="stylesheet" href="./css/main.css" type="text/css">
+  <link rel="stylesheet" href="./css/logameal.css" type="text/css">
   <title>Document</title>
 </head>
 <body>
 
-  <form action="./landing.html">
-      <input type="submit" value="Back to home" />
-  </form>
+  <header class="logameal_header">
+    <a href="./landing.html"><img src="./images/back.png" alt="" class="header_back"></a>
+  </header>
 
-  <p>Qn.1</p>
-  <p>Qn.2</p>
-  <p>Qn.3</p>
+  <div class="container">
+    <article class="logameal_questions">
+      <p>Qn.1</p><input type="text" class="logameal_input">
+      <p>Qn.2</p><input type="text" class="logameal_input">
+      <p>Qn.3</p><input type="text" class="logameal_input"></br>
+      <p>Qn.4</p><input type="text" class="logameal_input"></br>
+    </article>
+    <a href="./logged.html" class="logameal_submit">Submit</a>
+  </div>
 
-  <form action="./logged.html">
-      <input type="submit" value="Submit" />
-  </form>
 
 </body>
 </html>