add pricing

index.html

@@ -10,7 +10,7 @@
 html{background:url('/img/himalaya_bg_small.jpeg') repeat-x top center;min-height:722px;background-color:#224b6f;color:#444}
 body,*{margin:0;padding:0}
 strong{font-size:120%}
-body{max-width:68%;margin:0 auto 30px auto;opacity:0.8;padding:10px;border-radius:8px;line-height:1.618}
+body{max-width:68%;margin:0 auto 30px auto;padding:10px;border-radius:8px;line-height:1.618}
 h1{color:#FFF;line-height:1.3;font-size:16px}
 h2{margin-top:1.8em;margin-bottom:0.3em;color:darkblue}
 li{margin-left:1em}
@@ -19,11 +19,11 @@ li{margin-left:1em}
 .clearfix::after{display:block;content:"";clear:both}
 .float-right{float:right;margin-left:10px}
 .float-left{float:left;margin-right:10px}
-.head{margin:0 0 7.5em 0}
+.head{margin:0 0 7.5em 0;opacity:0.85}
-.head h2{margin-top:20px;font-size:48px;color:yellow}
+.head h2{margin-top:20px;font-size:48px;color:yellow;line-height:1.3}
 .logo,.mob-logo{background-color:#FFF;border-radius:6px}
 .mod{background-color:#FFF;padding:10px;border-radius:5px;box-shadow:3px 4px #89c3f0}
-.core{font-size:120%;box-shadow:3px 4px #3c9fe2;color:#333}
+.core{font-size:120%;box-shadow:3px 4px #3c9fe2;color:#333;opacity:0.88}
 .qr{border-radius:5px}
 .video{width:56%}
 .media{width:48%}
@@ -39,6 +39,15 @@ footer li{list-style:none;margin-left:0}
 .menus{margin:50px 0}
 .menus div{float:left;max-width:180px;margin-right:110px;margin-bottom:32px}
 .menus a{color:#d8ebff;opacity:0.68;font-weight:400}
+.mt15{margin-top:15px}
+.gobtns a{display:inline-block;margin:.25rem .125rem;line-height:1.5;padding:0.375rem 0.75rem;text-decoration:none;border-radius: 0.375rem}
+.gobtns .primary{background-color:#0d6efd;color:#FFF;border-color:#0d6efd;margin-right:0.8em}
+.gobtns .primary:hover{background-color:#0b5ed7;border-color: #0a58ca}
+.gobtns .secondary{background-color:#6c757d;color:#FFF;border-color:#6c757d;margin-left:0.8em}
+.gobtns .secondary:hover{background-color:#5c636a;border-color:#565e64}
+table{width:100%;border-spacing:0}
+th,td{border-bottom:1px solid #dee2e6;padding:.5rem .5rem}
+th{display:table-cell;font-weight:bold;text-align:left}
 @media only screen and (max-width:768px){
     body{max-width:90%}
     h1{padding-top:0}
@@ -62,8 +71,12 @@ footer li{list-style:none;margin-left:0}
 <h1 class="center">嘉洛马 <small>一个2022年10月份成立，专注于图片、视频相关的PC网站、H5网站、Web App、社群运营、私域运营工具开发的小团队。</small></h1>
 
 <div class="head center">
-    <h2>视频虽然已是主流，<br>它依然是个不错的赛道！</h2>
+    <h2>只需 10 分钟，<br>把照片、视频做成网站</h2>
     <img src="/img/logo_jialuoma.png" alt="嘉洛马，一个2022年10月份成立，专注于图片、视频相关的PC网站、H5网站、Web App、社群运营、私域运营工具开发的小团队" width="120" class="logo">
+    <div class="gobtns mt15">
+        <a href="https://demo.jialuoma.com" target="_blank" class="primary">在线演示</a>
+        <a href="https://git.filesite.io/filesite/machete" target="_blank" class="secondary">下载源码</a>
+    </div>
 </div>
 
 <div class="mod core clearfix">
@@ -73,6 +86,97 @@ footer li{list-style:none;margin-left:0}
     <small>图示为2016年-2021年利用视频做营销的商业占比，最近三年都超过了<strong>85%</strong>（来源：Wyzowl）。</small>
 </div>
 
+<h2 class="white">服务价格</h2>
+<div class="mod">
+    <h3>国内线路<small>（¥人民币）</small></h3>
+    <table>
+        <thead>
+            <tr>
+                <th>类型</th>
+                <th>磁盘</th>
+                <th>带宽</th>
+                <th>流量</th>
+                <th>费用</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>文档站</td>
+                <td>1G</td>
+                <td>5M共享</td>
+                <td>不限</td>
+                <td>免费</td>
+            </tr>
+            <tr>
+                <td>导航站</td>
+                <td>1G</td>
+                <td>5M共享</td>
+                <td>不限</td>
+                <td>免费</td>
+            </tr>
+            <tr>
+                <td>图片站</td>
+                <td>10G</td>
+                <td>5M共享</td>
+                <td>不限</td>
+                <td>50元/月</td>
+            </tr>
+            <tr>
+                <td>视频站</td>
+                <td>10G</td>
+                <td>5M共享</td>
+                <td>不限</td>
+                <td>60元/月</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h3 class="mt15">国外线路<small>（$美元）</small></h3>
+    <table>
+        <thead>
+            <tr>
+                <th>类型</th>
+                <th>磁盘</th>
+                <th>带宽</th>
+                <th>流量</th>
+                <th>费用</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>文档站</td>
+                <td>1G</td>
+                <td>1G共享</td>
+                <td>1TB/月</td>
+                <td>免费</td>
+            </tr>
+            <tr>
+                <td>导航站</td>
+                <td>1G</td>
+                <td>1G共享</td>
+                <td>1TB/月</td>
+                <td>免费</td>
+            </tr>
+            <tr>
+                <td>图片站</td>
+                <td>20G</td>
+                <td>1G共享</td>
+                <td>1TB/月</td>
+                <td>$5/月</td>
+            </tr>
+            <tr>
+                <td>视频站</td>
+                <td>20G</td>
+                <td>1G共享</td>
+                <td>1TB/月</td>
+                <td>$6/月</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <p class="mt15">以上为免费皮肤和基础服务器配置价格，均可绑定自己的域名（默认提供免费嘉洛马子域名），如需更高配置或定制网站皮肤请<strong><a href="https://jialuoma.com/#contact">微信联系</a>，价格面议</strong>。</p>
+</div>
+
 <h2 class="white">我们做什么</h2>
 <div class="mod">
     <strong>嘉洛马只做跟图片、视频相关的PC网站、H5手机网站、Web App、微信社群运营、私域运营工具开发。</strong>
@@ -186,8 +290,9 @@ footer li{list-style:none;margin-left:0}
         </div>
         <div class="menus clearfix">
             <div>
-                <h3>市场分析</h3>
+                <h3>在线体验</h3>
                 <ul>
+                    <li><a href="https://demo.jialuoma.com/" target="_blank">Demo演示网站</a></li>
                     <li><a href="https://market.jialuoma.com/" target="_blank">嘉洛马文档库</a></li>
                 </ul>
             </div>