centered html content
diff --git a/index.html b/index.html
index 15652aa..fd5443e 100644
--- a/index.html
+++ b/index.html
@@ -27,53 +27,61 @@
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
-
+
+<style>
+.splash {
+ width: 500px;
+ margin: 200px auto;
+ font-family: "Helvetica Neue", Helvetica, Arial
+}
+
+@media (max-width: 500px) {
+ .splash {
+ margin-top:100px
+ }
+}
</style>
</head>
<body>
- <img src="https://s23.postimg.org/oy3kv2uxn/skitch.png" style="height: 60px;"/>
- <p>
- Join the Apache OpenWhisk Slack Community to discuss the project in realtime.
- </p>
-
- <ul>
- <li><strong>Talk</strong> to the core devs and the OpenWhisk community.</li>
- <li><strong>Learn</strong> from others and ask questions.</li>
- <li><strong>Share</strong> your work and demos.</li>
- </ul>
- <p>Enter your email to join the OpenWhisk community Slack server:</p>
- <form class="form-inline">
- <div class="form-group">
- <label for="exampleInputEmail2">Email:</label>
- <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
- </div>
- <button type="button" class="btn btn-primary">Send invitation</button>
-
- </form>
- <p>Please be nice, respectful and inclusive of others!</p>
- <p id="result"></p>
- <p>
- Fork on github <a href="https://github.com/csantanapr/openwhisk-slackinvite" target="blank">csantanapr/openwhisk-slackinvite</a>
- </p>
+<div class="splash">
+<img src="https://s23.postimg.org/oy3kv2uxn/skitch.png" style="height: 60px; margin-left: 100px;"/>
+<p>Join the OpenWhisk Community to discuss the project in realtime.</p>
+<ul>
+ <li><strong>Talk</strong> to the core devs and the OpenWhisk community.</li>
+ <li><strong>Learn</strong> from others and ask questions.</li>
+ <li><strong>Share</strong> your work and demos.</li>
+</ul>
+<form class="form-inline">
+ <div class="form-group">
+ <label for="exampleInputEmail2">Email:</label>
+ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
+ </div>
+ <button type="button" class="btn btn-primary">Send invitation</button>
+</form>
+<p>Please be nice, respectful and inclusive of others!</p>
+<p id="result"></p>
+<p>Fork on github <a href="https://github.com/csantanapr/openwhisk-slackinvite" target="blank">csantanapr/openwhisk-slackinvite</a></p>
+</div>
<script type="text/javascript">
-var btn = $("button");
-var res = $("#result");
-function handler(){
- var email = $("input")[0].value;
- $.get( "https://545303d4-dd03-4cfc-a553-4253f7929dfd-gws.api-gw.mybluemix.net/openwhisk-team/slackinvite", { email: email} )
- .done(function( data ) {
- btn.addClass("btn-success");
- btn.html("WOOT. CHECK YOUR EMAIL!");
- res.html(data.message);
- })
- .fail(function(err){
- res.html(err.statusText+":Your invitation didn't work :-( ");
- btn.addClass("btn-error");
- });
-}
-btn.click(handler);
+ var btn = $("button");
+ var res = $("#result");
+ function handler() {
+ var email = $("input")[0].value;
+ $.get("https://545303d4-dd03-4cfc-a553-4253f7929dfd-gws.api-gw.mybluemix.net/openwhisk-team/slackinvite", { email: email })
+ .done(function (data) {
+ btn.addClass("btn-success");
+ btn.html("WOOT. CHECK YOUR EMAIL!");
+ res.html(data.message);
+ })
+ .fail(function (err) {
+ res.html(err.statusText + ":Your invitation didn't work :-( ");
+ btn.addClass("btn-error");
+ });
+ }
+ btn.click(handler);
</script>
</body>
-</html>
+
+</html>
\ No newline at end of file
