2024/04/20,12:54

css/page.css

@@ -1,7 +1,8 @@
 .page {
   width: 100%;
-  height: 45vh;
-  margin-top: 10%;
+  flex: 1;
+  /* height: 42.5vh; */
+  margin-top: 8%;
   background-color: #ffffff;
   background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
     linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);

css/style.css

@@ -6,8 +6,10 @@
 }
 
 body {
-  /* height: 100vh; */
+  height: 100vh;
   width: 100vw;
+  display: flex;
+  flex-direction: column;
   overflow-x: hidden;
   justify-content: center;
   background-image: url(../static/background.jpg);

css/timeline.css

@@ -10,6 +10,7 @@
   transition: 0.3s ease 0s;
   background-attachment: fixed;
   background-size: cover;
+  background-position: center;
 }
 
 .shell:before {
@@ -36,6 +37,20 @@
   margin: 0;
 }
 
+.bottom {
+  width: 100%;
+  text-align: center;
+  margin-top: 150px;
+  position: relative;
+}
+
+.endtitle {
+  color: rgba(255, 255, 255, 0.5);
+  letter-spacing: 5px;
+  margin: 10px 0 0 0;
+  font-weight: normal;
+}
+
 .timeline {
   display: flex;
   margin: 0 auto;

pages/story.html

@@ -19,94 +19,61 @@ <h3 class="subtitle">我们的故事</h3>
     <div class="timeline">
       <div class="item" data-text="《执子之手，与子偕老》">
         <div class="content">
-          <img src="../static/img-story/01.jpg" alt="" class="img">
-          <h2 class="content-title">2002</h2>
+          <img src="../static/img-story/01.png" alt="" class="img">
+          <h2 class="content-title">2024.03.26</h2>
           <p class="content-desc">
-            如果你停止，就是谷底。如果你还在继续，
-            就是上坡。这是我听过关于人生低谷最好的阐述。
+            我们的相识，因为互联网
           </p>
         </div>
       </div>
 
       <div class="item" data-text="《执子之手，与子偕老》">
         <div class="content">
-          <img src="../static/img-story/02.jpg" alt="" class="img">
-          <h2 class="content-title">2002</h2>
+          <img src="../static/img-story/02.png" alt="" class="img">
+          <h2 class="content-title">2024.03.28</h2>
           <p class="content-desc">
-            如果你停止，就是谷底。如果你还在继续，
-            就是上坡。这是我听过关于人生低谷最好的阐述。
+            成功将允宝迷的神魂颠倒
           </p>
         </div>
       </div>
 
       <div class="item" data-text="《执子之手，与子偕老》">
         <div class="content">
           <img src="../static/img-story/03.jpg" alt="" class="img">
-          <h2 class="content-title">2002</h2>
+          <h2 class="content-title">2024.04.05</h2>
           <p class="content-desc">
-            如果你停止，就是谷底。如果你还在继续，
-            就是上坡。这是我听过关于人生低谷最好的阐述。
+            允宝的表白，我们在一起了
           </p>
         </div>
       </div>
 
       <div class="item" data-text="《执子之手，与子偕老》">
         <div class="content">
           <img src="../static/img-story/04.jpg" alt="" class="img">
-          <h2 class="content-title">2002</h2>
+          <h2 class="content-title">2024.04.05</h2>
           <p class="content-desc">
-            如果你停止，就是谷底。如果你还在继续，
-            就是上坡。这是我听过关于人生低谷最好的阐述。
+            比心心～
           </p>
         </div>
       </div>
 
       <div class="item" data-text="《执子之手，与子偕老》">
         <div class="content">
           <img src="../static/img-story/05.jpg" alt="" class="img">
-          <h2 class="content-title">2002</h2>
+          <h2 class="content-title">2024.04.06</h2>
           <p class="content-desc">
-            如果你停止，就是谷底。如果你还在继续，
-            就是上坡。这是我听过关于人生低谷最好的阐述。
-          </p>
-        </div>
-      </div>
-
-      <div class="item" data-text="《执子之手，与子偕老》">
-        <div class="content">
-          <img src="../static/img-story/06.jpg" alt="" class="img">
-          <h2 class="content-title">2002</h2>
-          <p class="content-desc">
-            如果你停止，就是谷底。如果你还在继续，
-            就是上坡。这是我听过关于人生低谷最好的阐述。
-          </p>
-        </div>
-      </div>
-
-      <div class="item" data-text="《执子之手，与子偕老》">
-        <div class="content">
-          <img src="../static/img-story/07.jpg" alt="" class="img">
-          <h2 class="content-title">2002</h2>
-          <p class="content-desc">
-            如果你停止，就是谷底。如果你还在继续，
-            就是上坡。这是我听过关于人生低谷最好的阐述。
-          </p>
-        </div>
-      </div>
-
-      <div class="item" data-text="《执子之手，与子偕老》">
-        <div class="content">
-          <img src="../static/img-story/08.jpg" alt="" class="img">
-          <h2 class="content-title">2002</h2>
-          <p class="content-desc">
-            如果你停止，就是谷底。如果你还在继续，
-            就是上坡。这是我听过关于人生低谷最好的阐述。
+            允宝美丽的背影～好爱
           </p>
         </div>
       </div>
     </div>
+    <div class="bottom">
+      <h2 class="endtitle">我们的故事，未完待续……</h2>
+    </div>
   </div>
 
+
+
   <script type="module" src="../scripts/timeline.js"></script>
 </body>