├── README.md ├── share ├── mobile.css ├── share.js ├── index.html └── share.css ├── LICENSE.md └── update ├── update.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | kickstarter 2 | =========== 3 | 4 | Landing pages we created to help our kickstarter succeed -------------------------------------------------------------------------------- /share/mobile.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width: 90%; 3 | margin: 0 auto; 4 | } 5 | 6 | #footer { 7 | display: block; 8 | position: static; 9 | } 10 | 11 | #actions li { 12 | float: none; 13 | border: none; 14 | border-bottom: 1px solid #ddd; 15 | width: 100% !important; 16 | padding: 20px 0px; 17 | } 18 | 19 | #progress { 20 | position: fixed; 21 | bottom: 0px; 22 | left: 0px; 23 | width: 100%; 24 | padding: 10px; 25 | z-index: 100; 26 | margin: 0px; 27 | border-radius: 0px; 28 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 FC Brands LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /share/share.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | var clicks = 0; 3 | $('button').on('click', function() { 4 | clicks++; 5 | var percent = Math.min(Math.round(clicks / 3 * 100), 100); 6 | $('.percent').width(percent + '%'); 7 | $('.number').text(percent + '%'); 8 | }); 9 | 10 | 11 | $('.facebook').on('click', function() { 12 | var w = 580, h = 300, 13 | left = (screen.width/2)-(w/2), 14 | top = (screen.height/2)-(h/2); 15 | 16 | 17 | if ((screen.width < 480) || (screen.height < 480)) { 18 | window.open ('http://www.facebook.com/share.php?u=http://bit.ly/somawater', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); 19 | } else { 20 | window.open ('http://www.facebook.com/share.php?u=http://bit.ly/somawater', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); 21 | } 22 | }); 23 | 24 | $('.twitter').on('click', function() { 25 | var loc = encodeURIComponent('http://bit.ly/somawater'), 26 | title = "Beautifully innovative all-natural water filters by Soma — ", 27 | w = 580, h = 300, 28 | left = (screen.width/2)-(w/2), 29 | top = (screen.height/2)-(h/2); 30 | 31 | window.open('http://twitter.com/share?text=' + title + '&url=' + loc, '', 'height=' + h + ', width=' + w + ', top='+top +', left='+ left +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'); 32 | }); 33 | 34 | $('.play').on('click', function() { 35 | window.location.href = "http://kck.st/TH0NAN"; 36 | }); 37 | 38 | }); -------------------------------------------------------------------------------- /share/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Soma - Share 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Support Soma with 3 Clicks

13 |
14 |

15 | Hola, rockstar!

We hope you're having an awesome day. You're here because we know you have influence. When you share something, people pay attention. So, please take a few seconds to spread the Soma love. 16 |

17 | Thanks so much, 18 |
19 | Mike, Zach and the entire Soma Team 20 |

21 |
22 |
23 |
0%
24 |
25 |
26 | 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /update/update.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | margin: 0px; 4 | padding: 0px; 5 | } 6 | 7 | body { 8 | font-family: 'Open Sans', sans-serif; 9 | font-size: 14px; 10 | color: #555; 11 | min-height: 100%; 12 | background-color: #eee; 13 | background-image: url(/press/images/gray_jean.png); 14 | } 15 | 16 | * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 17 | 18 | 19 | a, a:visited, a:active, a:hover { 20 | text-decoration: none; 21 | outline: none; 22 | } 23 | 24 | h1 { 25 | background-color: #000; 26 | color: #fff; 27 | padding: 10px; 28 | margin: 0px 0px 30px 0px; 29 | text-align: center; 30 | } 31 | 32 | h2 { 33 | color: #000; 34 | margin: 0px 0px 20px 0px; 35 | padding: 0px; 36 | } 37 | 38 | #video { 39 | font-size: 14px; 40 | color: #000; 41 | padding: 0px; 42 | margin-bottom: 0px; 43 | text-align: center; 44 | } 45 | 46 | .like { 47 | display: inline-block; padding: 5px; width: 105px; 48 | } 49 | 50 | #container { 51 | width: 900px; 52 | margin: 0 auto; 53 | } 54 | 55 | #actions { 56 | margin: 0px; 57 | padding: 0px; 58 | list-style-type: none; 59 | width: 900px; 60 | text-align: center; 61 | } 62 | 63 | 64 | 65 | button { 66 | font-family: "Open Sans", sans-serif; 67 | font-weight: bold; 68 | background: #87C442; 69 | background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#9FD04F),color-stop(100%,#87C442)); 70 | background-image: -webkit-linear-gradient(#9FD04F,#87C442); 71 | background-image: -moz-linear-gradient(#9FD04F,#87C442); 72 | background-image: -o-linear-gradient(#9FD04F,#87C442); 73 | background-image: -ms-linear-gradient(#9FD04F,#87C442); 74 | background-image: linear-gradient(#9FD04F,#87C442); 75 | color: black; 76 | -moz-box-shadow: inset 0 1px 0 0 #b7dc63; 77 | -webkit-box-shadow: inset 0 1px 0 0 #B7DC63; 78 | -o-box-shadow: inset 0 1px 0 0 #b7dc63; 79 | box-shadow: inset 0 1px 0 0 #B7DC63; 80 | text-shadow: #FFFF8E 0 1px 0; 81 | -moz-background-clip: border; 82 | -webkit-background-clip: border; 83 | -o-background-clip: border-box; 84 | -ms-background-clip: border-box; 85 | -khtml-background-clip: border-box; 86 | background-clip: border-box; 87 | border: 1px solid #1A1A1A; 88 | -moz-border-radius: 6px; 89 | -webkit-border-radius: 6px; 90 | -o-border-radius: 6px; 91 | -ms-border-radius: 6px; 92 | -khtml-border-radius: 6px; 93 | border-radius: 6px; 94 | color: #000; 95 | font-size: 24px; 96 | line-height: 48px; 97 | padding: 0 20px; 98 | -moz-transition: "color","0.3s"; 99 | -webkit-transition: "color","0.3s"; 100 | -o-transition: "color","0.3s"; 101 | transition: "color","0.3s"; 102 | cursor: pointer; 103 | margin: 0px; 104 | opacity: 0.99; 105 | } 106 | 107 | button:hover { 108 | opacity: 0.9; 109 | } 110 | 111 | .clearfix:after { 112 | content: "."; 113 | display: block; 114 | clear: both; 115 | visibility: hidden; 116 | line-height: 0; 117 | height: 0; 118 | } 119 | 120 | .clearfix { 121 | display: inline-block; 122 | } 123 | 124 | html[xmlns] .clearfix { 125 | display: block; 126 | } 127 | 128 | * html .clearfix { 129 | height: 1%; 130 | } -------------------------------------------------------------------------------- /update/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Soma - Goal 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Let's Make History! $100k in 10 Days!

15 |
16 |

17 | 18 |

19 |
20 |

Like these new articles about Soma

21 |
22 | 26 | 27 | 31 | 32 | 36 | 37 | 41 | 42 | 46 | 47 | 51 | 52 | 56 |
57 |

58 | 59 | 60 | 61 |
62 |
63 |
64 | 73 | 74 | -------------------------------------------------------------------------------- /share/share.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | margin: 0px; 4 | padding: 0px; 5 | } 6 | 7 | body { 8 | font-family: 'Open Sans', sans-serif; 9 | font-size: 14px; 10 | color: #555; 11 | min-height: 100%; 12 | background-color: #eee; 13 | background-image: url(/press/images/gray_jean.png); 14 | } 15 | 16 | * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 17 | 18 | 19 | a, a:visited, a:active, a:hover { 20 | text-decoration: none; 21 | outline: none; 22 | } 23 | 24 | h1 { 25 | background-color: #000; 26 | color: #fff; 27 | padding: 10px; 28 | margin: 0px 0px 30px 0px; 29 | text-align: center; 30 | } 31 | 32 | h2 { 33 | color: #000; 34 | margin: 0px 0px 20px 0px; 35 | padding: 0px; 36 | } 37 | 38 | #welcome { 39 | font-size: 14px; 40 | color: #000; 41 | padding: 10px; 42 | background-color: #fff; 43 | box-shadow: 0px 1px 1px rgba(0,0,0,0.3); 44 | margin-bottom: 0px; 45 | border-bottom: 1px solid rgba(0,0,0,0.1); 46 | } 47 | 48 | #container { 49 | width: 900px; 50 | margin: 0 auto; 51 | } 52 | 53 | #progress { 54 | background-color: #fff; 55 | padding: 5px; 56 | margin-top: 0px; 57 | margin-bottom: 20px; 58 | box-shadow: 0px 1px 1px rgba(0,0,0,0.3); 59 | } 60 | 61 | #progress .percent { 62 | background: #87C442; 63 | background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#9FD04F),color-stop(100%,#87C442)); 64 | background-image: -webkit-linear-gradient(#9FD04F,#87C442); 65 | background-image: -moz-linear-gradient(#9FD04F,#87C442); 66 | background-image: -o-linear-gradient(#9FD04F,#87C442); 67 | background-image: -ms-linear-gradient(#9FD04F,#87C442); 68 | background-image: linear-gradient(#9FD04F,#87C442); 69 | width: 1%; 70 | height: 30px; 71 | position: relative; 72 | } 73 | 74 | #progress .percent .number { 75 | position: absolute; 76 | top: 0px; 77 | height: 30px; 78 | line-height: 30px; 79 | color: #000; 80 | right: -40px; 81 | width: 40px; 82 | text-align: center; 83 | font-weight: bold; 84 | } 85 | 86 | #actions { 87 | margin: 0px; 88 | padding: 0px; 89 | overflow: hidden; 90 | list-style-type: none; 91 | } 92 | 93 | 94 | 95 | #actions li { 96 | float: left; 97 | width: 33%; 98 | padding: 10px; 99 | text-align: center; 100 | border-right: 1px solid #bbb; 101 | border-left: 1px solid #fff; 102 | } 103 | 104 | #actions li:nth-child(1) { 105 | border-left: none; 106 | } 107 | 108 | #actions li:nth-child(2) { 109 | width: 34%; 110 | } 111 | 112 | #actions li:nth-child(3) { 113 | border-right: none; 114 | } 115 | 116 | 117 | 118 | button { 119 | font-family: "Open Sans", sans-serif; 120 | font-weight: bold; 121 | background: #87C442; 122 | background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#9FD04F),color-stop(100%,#87C442)); 123 | background-image: -webkit-linear-gradient(#9FD04F,#87C442); 124 | background-image: -moz-linear-gradient(#9FD04F,#87C442); 125 | background-image: -o-linear-gradient(#9FD04F,#87C442); 126 | background-image: -ms-linear-gradient(#9FD04F,#87C442); 127 | background-image: linear-gradient(#9FD04F,#87C442); 128 | color: black; 129 | -moz-box-shadow: inset 0 1px 0 0 #b7dc63; 130 | -webkit-box-shadow: inset 0 1px 0 0 #B7DC63; 131 | -o-box-shadow: inset 0 1px 0 0 #b7dc63; 132 | box-shadow: inset 0 1px 0 0 #B7DC63; 133 | text-shadow: #FFFF8E 0 1px 0; 134 | -moz-background-clip: border; 135 | -webkit-background-clip: border; 136 | -o-background-clip: border-box; 137 | -ms-background-clip: border-box; 138 | -khtml-background-clip: border-box; 139 | background-clip: border-box; 140 | border: 1px solid #1A1A1A; 141 | -moz-border-radius: 6px; 142 | -webkit-border-radius: 6px; 143 | -o-border-radius: 6px; 144 | -ms-border-radius: 6px; 145 | -khtml-border-radius: 6px; 146 | border-radius: 6px; 147 | color: #000; 148 | font-size: 24px; 149 | line-height: 48px; 150 | padding: 0 20px; 151 | -moz-transition: "color","0.3s"; 152 | -webkit-transition: "color","0.3s"; 153 | -o-transition: "color","0.3s"; 154 | transition: "color","0.3s"; 155 | cursor: pointer; 156 | margin: 0px; 157 | opacity: 0.99; 158 | } 159 | 160 | button:hover { 161 | opacity: 0.9; 162 | } 163 | 164 | button.facebook { 165 | background: #3b5998; 166 | background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#4b71c1),color-stop(100%,#3b5998)); 167 | background-image: -webkit-linear-gradient(#4b71c1,#3b5998); 168 | background-image: -moz-linear-gradient(#4b71c1,#3b5998); 169 | background-image: -o-linear-gradient(#4b71c1,#3b5998); 170 | background-image: -ms-linear-gradient(#4b71c1,#3b5998); 171 | background-image: linear-gradient(#4b71c1,#3b5998); 172 | color: #fff; 173 | -moz-box-shadow: inset 0 1px 0 0 #5b8aeb; 174 | -webkit-box-shadow: inset 0 1px 0 0 #5b8aeb; 175 | -o-box-shadow: inset 0 1px 0 0 #5b8aeb; 176 | box-shadow: inset 0 1px 0 0 #5b8aeb; 177 | text-shadow: #3b5998 0 1px 0; 178 | } 179 | 180 | button.twitter { 181 | background: #2578b4; 182 | background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#58a8e2),color-stop(100%,#2578b4)); 183 | background-image: -webkit-linear-gradient(#58a8e2,#2578b4); 184 | background-image: -moz-linear-gradient(#58a8e2,#2578b4); 185 | background-image: -o-linear-gradient(#58a8e2,#2578b4); 186 | background-image: -ms-linear-gradient(#58a8e2,#2578b4); 187 | background-image: linear-gradient(#58a8e2,#2578b4); 188 | color: #fff; 189 | -moz-box-shadow: inset 0 1px 0 0 #88c1ec; 190 | -webkit-box-shadow: inset 0 1px 0 0 #88c1ec; 191 | -o-box-shadow: inset 0 1px 0 0 #88c1ec; 192 | box-shadow: inset 0 1px 0 0 #88c1ec; 193 | text-shadow: #2578b4 0 1px 0; 194 | } 195 | 196 | #footer { 197 | height: 50px; 198 | position: fixed; 199 | bottom: 0px; 200 | left: 0px; 201 | line-height: 50px; 202 | color: #aaa; 203 | text-align: center; 204 | width: 100%; 205 | 206 | } --------------------------------------------------------------------------------