161 lines
3.4 KiB
Text
161 lines
3.4 KiB
Text
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Metamaps</title>
|
|
</head>
|
|
|
|
<style>
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
.center {
|
|
width: 1024px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.splash {
|
|
background: url(<%= asset_path 'splash_bg.png' %>) no-repeat 0 0;
|
|
height: 399px;
|
|
text-align: center;
|
|
}
|
|
|
|
.splash h2 {
|
|
font-family: Helvetica, sans-serif;
|
|
color: #FFFFFF;
|
|
font-size: 48px;
|
|
padding: 120px 0 20px 0;
|
|
margin: 0;
|
|
text-shadow: 2px 2px #444;
|
|
}
|
|
|
|
.splash button {
|
|
border: none;
|
|
height: 40px;
|
|
width: 160px;
|
|
outline: none;
|
|
padding: 0 18px;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
vertical-align: top;
|
|
color: #FFF;
|
|
margin: 10px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
-webkit-border-radius: 2px;
|
|
border-radius: 2px;
|
|
-webkit-user-select: none;
|
|
font-family: helvetica, sans-serif;
|
|
-webkit-font-smoothing: inherit;
|
|
box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
|
|
}
|
|
|
|
.button--blue {
|
|
background-color: #4fb5c0;
|
|
}
|
|
.button--purple {
|
|
background-color: #a354cd;
|
|
}
|
|
.button--blue:hover {
|
|
background-color: #419599;
|
|
}
|
|
.button--purple:hover {
|
|
background-color: #9150bc;
|
|
}
|
|
|
|
.section {
|
|
margin: 60px 0;
|
|
}
|
|
|
|
.graph {
|
|
background: url(<%= asset_path 'big_picture.png' %>) no-repeat 0 0;
|
|
height: 399px;
|
|
}
|
|
|
|
.code {
|
|
background: url(<%= asset_path 'metamaps_code.png' %>) no-repeat 0 -239px;
|
|
height: 399px;
|
|
}
|
|
|
|
.rich_media {
|
|
background: url(<%= asset_path 'rich_media.png' %>) no-repeat 0 0;
|
|
height: 403px;
|
|
}
|
|
|
|
.connected {
|
|
background: url(<%= asset_path 'connected.png' %>) no-repeat 0 0;
|
|
height: 600px;
|
|
background-size: contain;
|
|
}
|
|
|
|
.junto {
|
|
background: url(<%= asset_path 'junto_screen.png' %>) no-repeat top right;
|
|
background-size: contain;
|
|
height: 399px;
|
|
}
|
|
|
|
.slack {
|
|
background: url(<%= asset_path 'slack.png' %>) no-repeat top right;
|
|
background-size: contain;
|
|
height: 399px;
|
|
}
|
|
|
|
h3 {
|
|
font-family: helvetica, sans-serif;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
color: #565656;
|
|
}
|
|
|
|
.junto h3 {
|
|
width: 500px;
|
|
}
|
|
|
|
.slack h3 {
|
|
width: 400px;
|
|
}
|
|
|
|
.rich_media h3 {
|
|
width: 500px;
|
|
float: right;
|
|
}
|
|
|
|
</style>
|
|
|
|
<body>
|
|
|
|
<div class="center">
|
|
<div class="splash">
|
|
<h2>make sense with metamaps</h2>
|
|
<button class="button--blue" href="/request">Request Invite</button>
|
|
<button class="button--purple" href="/login">Log In</button>
|
|
</div>
|
|
<div class="section junto">
|
|
<h3>capture all the ideas coming up in live video conversations</h3>
|
|
</div>
|
|
<h3>see for yourself how things are connected<br> and how connected things are</h3>
|
|
<div class="section connected">
|
|
</div>
|
|
<div class="section rich_media">
|
|
<h3>attach links, images, audio, or video to your thoughts</h3>
|
|
</div>
|
|
<h3>zoom out and see the big picture</h3>
|
|
<div class="section graph">
|
|
</div>
|
|
<div class="section slack">
|
|
<h3>use @metamapper (our slackbot) to capture thoughts from slack on your phone, web, or desktop</h3>
|
|
</div>
|
|
<h3>want metamaps to do something different? we're open source, fork it.</h3>
|
|
<div class="section code">
|
|
</div>
|
|
<h3>we won't tell you what to do with metamaps, get creative :)</h3>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|