From a05329e002caaca79e5bc95aee6dd04d45bcf9e3 Mon Sep 17 00:00:00 2001
From: filesite <release@filesite.io>
Date: Sun, 16 Oct 2022 18:36:32 +0800
Subject: [PATCH] ui update

---
 index.html | 52 ++++++++++++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 20 deletions(-)
diff --git a/index.html b/index.html
index af74877..49a160d 100644
--- a/index.html
+++ b/index.html
@@ -5,37 +5,42 @@
 <title>嘉洛马 - 图片、视频相关PC网站、H5网站、Web App、社群运营、私域运营工具开发专业小团队</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+<base href="https://static.jialuoma.cn">
 <style>
-html{background:url('https://static.jialuoma.cn/img/himalaya_bg_small.jpeg') repeat-x top center;min-height:722px;background-color:#224b6f;color:#444}
+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:10px auto 30px auto;opacity:0.8;padding:10px;border-radius:8px;line-height:1.618}
-h1{color:#FFF;margin:1.6em 0}
+body{max-width:68%;margin:0 auto 30px auto;opacity:0.8;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}
-.head{float:left}
 .center{text-align:center}
+.white{color:#FFF}
+.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 h2{margin-top:20px;font-size:48px;color:yellow}
 .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}
-.white{color:#FFF}
 .qr{border-radius:5px}
-.float-right{float:right;margin-left:10px}
-.float-left{float:left;margin-right:10px}
-.clearfix::after{display:block;content:"";clear:both}
 .video{width:56%}
 .media{width:48%}
 .icons svg{width:80px;height:80px;margin:4px}
+.foot{margin-top: 5em}
 @media only screen and (max-width:768px){
     body{max-width:90%}
+    h1{padding-top:0}
     h1 small{display:block}
     .video,.media{width:100%;float:none;margin:0}
     .icons svg{width:60px;height:60px}
-    .head{float:none;text-align:center;margin-bottom:10px}
+    .head{margin-bottom:10em;margin-left:0;margin-right:0}
+    .head h2{font-size:30px}
     .logo{width:80px}
 }
 @media only screen and (max-width:480px){
-    .mob-white{color:#FFF}
+    h1{font-size:14px}
     .mob-logo{width:100%}
     .hidden-xs{display:none}
 }
@@ -43,18 +48,21 @@ li{margin-left:1em}
 </head>
 <body>
 
-<div class="head">
-    <img src="https://static.jialuoma.cn/img/logo_jialuoma.png" alt="嘉洛马，一个2022年10月份成立，专注于图片、视频相关的PC网站、H5网站、Web App、社群运营、私域运营工具开发的小团队" width="120" class="logo">
+<h1 class="center">嘉洛马 <small>一个2022年10月份成立，专注于图片、视频相关的PC网站、H5网站、Web App、社群运营、私域运营工具开发的小团队。</small></h1>
+
+<div class="head center">
+    <h2>视频虽然已是主流，<br>它依然是个不错的赛道！</h2>
+    <img src="/img/logo_jialuoma.png" alt="嘉洛马，一个2022年10月份成立，专注于图片、视频相关的PC网站、H5网站、Web App、社群运营、私域运营工具开发的小团队" width="120" class="logo">
 </div>
 
 <div class="mod core clearfix">
-    <img class="media float-right" alt="2016 - 2021开展视频营销的商业占比" src="https://static.jialuoma.cn/img/snap_video_percent.png">
+    <img class="media float-right" alt="2016 - 2021开展视频营销的商业占比" src="/img/snap_video_percent.png">
     <strong>视频内容</strong>已经是当今网民朋友的主流消费内容，它已经在过去几年独占鳌头，也将在未来5 - 10年继续占据大家的娱乐和学习时光，也是<strong>商业营销的重中之重</strong>。
     <br>
     <small>图示为2016年-2021年利用视频做营销的商业占比，最近三年都超过了<strong>85%</strong>（来源：Wyzowl）。</small>
 </div>
 
-<h2 class="mob-white">我们做什么</h2>
+<h2 class="white">我们做什么</h2>
 <div class="mod">
     <strong>嘉洛马只做跟图片、视频相关的PC网站、H5手机网站、Web App、微信社群运营、私域运营工具开发。</strong>
     <br>
@@ -127,7 +135,7 @@ li{margin-left:1em}
 <h2 class="white">联系方式</h2>
 <div class="mod clearfix">
     <div class="video float-right">
-        <video width="100%" preload="metadata" playsinline controls autoplay poster="https://static.jialuoma.cn/img/gongfu_poster.jpeg" id="video">
+        <video width="100%" preload="metadata" playsinline controls autoplay poster="/img/gongfu_poster.jpeg" id="video">
         </video>
         <small>《功夫》经典片段 - “还有谁？”</small>
     </div>
@@ -136,7 +144,7 @@ li{margin-left:1em}
         <li>
             微信号：<strong>同上手机号</strong>
             <p class="hidden-xs">
-                <img src="https://static.jialuoma.cn/img/wx_jialuoma.jpeg" width="240" alt="微信扫码加嘉洛马好友" class="qr">
+                <img src="/img/wx_jialuoma.jpeg" width="240" alt="微信扫码加嘉洛马好友" class="qr">
                 <br>
                 微信扫码加好友
             </p>
@@ -145,9 +153,13 @@ li{margin-left:1em}
     </ul>
 </div>
 
-<h1>嘉洛马<small>，一个2022年10月份成立，专注于图片、视频相关的PC网站、H5网站、Web App、社群运营、私域运营工具开发的小团队。</small></h1>
-<div class="center">
-    <img src="https://static.jialuoma.cn/img/logo_jialuoma.png" alt="嘉洛马，一个2022年10月份成立，专注于图片、视频相关的PC网站、H5网站、Web App、社群运营、私域运营工具开发的小团队" class="mob-logo">
+<h2 class="white">虚位以待</h2>
+<p class="mod">
+    期待与你携手同行～
+</p>
+
+<div class="foot center">
+    <img src="/img/logo_jialuoma.png" alt="嘉洛马，一个2022年10月份成立，专注于图片、视频相关的PC网站、H5网站、Web App、社群运营、私域运营工具开发的小团队" class="mob-logo">
     <p class="white">合作也讲究缘分，在对的时间、对的地点，遇到对的你，也就水到渠成了。</p>
 </div>
 
@@ -157,7 +169,7 @@ li{margin-left:1em}
     document.getElementById('phone').innerText = atob(phone);
 
     setTimeout(function() {
-        var source = '<source src="https://static.jialuoma.cn/mp4/gongfu_480.mp4" type="video/mp4" id="videosource">';
+        var source = '<source src="/mp4/gongfu_480.mp4" type="video/mp4" id="videosource">';
         document.getElementById('video').innerHTML = source;
     }, 3000);
 })();
