first

2023-09-19 17:02:40 +01:00
commit 2dab4a6377
3 changed files with 128 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,5 @@
+This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
+https://creativecommons.org/licenses/by-sa/3.0/
+
+Designed by Strategyzer AG & Steve Blank
+This version by Rich Boakes, University of Portsmouth.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="styles.css">
+<title>Your Layout</title>
+
+<div class="grid-container">
+    <header>The Mission Model Canvas</header>
+    <div class="grid-item" id="kp"><h2>Key Partners</h2><section class="e" contenteditable="true"></section></div>
+    <div class="grid-item" id="ka"><h2>Key Activities</h2><section class="e" contenteditable="true"></section></div>
+    <div class="grid-item" id="vp"><h2>Value Propositions</h2><section class="e" contenteditable="true"></section></div>
+    <div class="grid-item hi" id="bs"><h2>Buy-in Support</h2><section class="e" contenteditable="true"></section></div>
+    <div class="grid-item hi" id="be"><h2>Beneficiaries</h2><section class="e" contenteditable="true" autofocus></section></div>
+    <div class="grid-item" id="kr"><h2>Key Resources</h2><section class="e" contenteditable="true"></section></div>
+    <div class="grid-item hi" id="de"><h2>Deployment</h2><section class="e" contenteditable="true"></section></div>
+    <div class="grid-item" id="mb"><h2>Mission Budget/Cost</h2><section class="e" contenteditable="true"></section></div>
+    <div class="grid-item" id="if"><h2>Mission Achievement/Impact Factors</h2><section class="e" contenteditable="true"></section></div>
+    <footer>
+        <p>This work is licensed under the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)</a>
+        <p><span>Designed by:</span> Strategyzer AG & Steve Blank.  Built for the web by Uni. of Portsmouth.
+    </footer>
+</div>
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,99 @@
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-color: #ECECEB;
+
+}
+
+.grid-item {
+    display: flex;
+    flex-direction: column;
+    background-color: #FFFFFE;
+    border: 1px solid #666;
+    padding: 1em;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: auto repeat(3, 1fr) auto;
+    margin: 1em;
+    height: 92svh;
+    grid-template-areas:
+        "header header header header header header header header header header"
+        "kp kp ka ka vp vp bs bs be be"
+        "kp kp kr kr vp vp de de be be"
+        "mb mb mb mb mb if if if if if"
+        "footer footer footer footer footer footer footer footer footer footer";
+}
+
+header {
+    grid-area: header;
+    font-size: 2em;
+    font-weight: bold;
+}
+
+footer {
+    grid-area: footer;
+}
+
+footer span {
+    text-transform: uppercase;
+    font-weight: bold;
+}
+
+#kp {
+    grid-area: kp;
+}
+
+#ka {
+    grid-area: ka;
+}
+
+#vp {
+    grid-area: vp;
+}
+
+#bs {
+    grid-area: bs;
+}
+
+#be {
+    grid-area: be;
+}
+
+#kr {
+    grid-area: kr;
+}
+
+#de {
+    grid-area: de;
+}
+
+#mb {
+    grid-area: mb;
+}
+
+#if {
+    grid-area: if;
+}
+
+.e {
+    width: 100%;
+    height: 100%;
+    outline: none;
+}
+h2 {
+    padding-bottom: 0.5em;
+}
+
+.hi {
+    box-shadow: inset 0 0.25em 0.5em #F7F;
+}