vtuber lp

layouts/_default/list.html

@@ -9,10 +9,12 @@
 
         {{ partial "nav.html" . }}
 
+        {{ partial "vtuber.html" . }}
+
         {{ partial "breadcrumbs.html" . }}
 
         <div id="content">
-            <div class="container dd">
+            <div class="container">
                 <div class="row">
                     <!-- *** LEFT COLUMN *** -->
                     <div class="col-md-9" id="blog-listing-medium">

layouts/partials/vtuber.html

@@ -0,0 +1,20 @@
+<div id="block-vtuber">
+    <div class="container">
+        <div class="row sec01">
+            <div class="col-md-6">
+                <div class="txt-block">
+                    <h2>What is VTuber?<br>VTuber 101</h2>
+                    <p>全名為「Virtual YouTuber」簡稱為「Vtuber」，其意思為「虛擬的」Youtuber。是以虛擬的人物進行Youtube相關的影音創作，藉此讓動畫人物如真正的人一樣生動且真實。</p>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+            </div>
+        </div>
+        <div class="row sec02">
+            <div class="col-md-12">
+                
+            </div>
+        </div>
+    </div>
+</div>

static/css/custom.css

@@ -388,6 +388,37 @@
   font-family: "Proxima Nova",sans-serif;
 }
 
+#block-vtuber {
+  padding: 20px 0;
+  margin-bottom: 40px;
+  font-family: "Proxima Nova",sans-serif;
+}
+
+#block-vtuber h2 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: bolder;
+  font-size: 3.7rem;
+}
+
+#block-vtuber p {
+  font-size: 1.8rem;
+  line-height: 3rem;
+}
+
+.txt-block {
+  padding: 5rem 0;
+}
+
+.embed-container::after{
+  position: absolute;
+  content: " ";
+  left: 3rem;
+  top: 3rem;
+  width: 100%;
+  height: 100%;
+  background: url("https://pixabay.com/get/g429f3dae72cb0be8dd348c3a5fcc041e19c6577b6a05f5f86d1a351c9bbd3841b828184e3e063fa39ce129dd51e8e950_640.jpg");
+  z-index: -2;
+}
 
 
 

webSite/config.toml

@@ -20,7 +20,6 @@ paginate = 4
 home = ["HTML"]
 page = ["HTML"]
 
-
 [menu]
 
 # Main menu