LP template

layouts/partials/LP_components/hero.html

@@ -9,10 +9,13 @@
                 <button class="hero-btn">立即開始</button>
             </div>
             <div class="col-md-6" style="position: relative;">
-                <img src="img/背景-紫.png" alt="" width="100px" class="hero-purple">
-                <img src="img/背景-橘.png" alt="" width="150px" class="hero-orange">
-                <img src="img/背景-橘.png" alt="" width="70px" class="hero-orange-s">
-                <div class="hero-imgfr"><img src="img/電腦.png" alt=""></div>
+                <img src="img/背景紫.png" alt="" width="180px" class="hero-purple">
+                <!-- <img src="img/背景-橘.png" alt="" width="150px" class="hero-orange"> -->
+                <img src="img/背景橘.png" alt="" width="80px" class="hero-orange-s">
+                <img src="img/textgrp3.png" width="300px" alt="" class="hero-textgrp">
+                <img src="img/video.png" width="120px" alt="" class="hero-video">
+                <img src="img/放大鏡.png" width="120px" alt="" class="hero-amplify">
+                <div class="hero-imgfr"><img src="img/2222.png" alt=""></div>
             </div>
         </div>
     </div>

static/css/custom.css

@@ -88,26 +88,69 @@
 
 .hero-purple {
   position: absolute;
-  right: 10%;
-  top: 25%;
-  z-index: 3;
+  right: 0%;
+  top: -10%;
+  z-index: -1;
 }
 
 .hero-orange-s {
   position: absolute;
-  right: 40%;
-  bottom: 15%;
+  left: -5%;
+  bottom: 13%;
+  z-index: -1;
+  animation: floating 8s infinite ease-in-out;
+}
+
+.hero-textgrp {
+  z-index: 3;
+  position: absolute;
+  left: 5%;
+  top: 10%;
+  animation: floating3 6s infinite 1s ease-in-out;
+}
+
+.hero-video {
+  z-index: 3;
+  position: absolute;
+  right: 3%;
+  top: -5%;
+  animation: floating 8s infinite 1.5s ease-in-out;
+}
+
+.hero-amplify {
   z-index: 3;
+  position: absolute;
+  bottom: 5%;
+  right: 0;
+  animation: floating2 5s infinite ease-in-out;
+  
 }
 
 .hero-imgfr {
   width: 100%;
-  height: 85%;
+  height: 95%;
 }
 
 .hero-imgfr img {
   width: 100%;
-  transform: translateY(-8rem);
+}
+
+@keyframes floating {
+  from { transform: translate(0px,  0); }
+  65%  { transform: translate(25px, 0); }
+  to   { transform: translate(0, -0px); }    
+}
+
+@keyframes floating3 {
+  from { transform: translate(0px,  0); }
+  65%  { transform: translate(-20px, 0); }
+  to   { transform: translate(0, -0px); }    
+}
+
+@keyframes floating2 {
+  from { transform: translate(0px,  0); }
+  65%  { transform: translate(0px, 10px); }
+  to   { transform: translate(0, -0px); }    
 }
 
 /* sec-usecase */