carbon issue template

layouts/partials/breadcrumbs.html

@@ -17,7 +17,7 @@
                         <a href="/tags/nft">NFT</a>
                     </div>
                     <div class="col col-xs-3 col-md-3">
-                        <a>CLIMATE CHANGE</a>
+                        <a href="/tags/carbon">CLIMATE CHANGE</a>
                     </div>
                     <div class="col col-xs-3 col-md-3">
                         <a href="/tags/text-to-speech">TEXT-TO-SPEECH</a>

layouts/shortcodes/carbon.html

@@ -0,0 +1,165 @@
+<div id="block-carbon">
+    <section class="row sec sec01">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="txt-block">
+                        <h2>什麼是Carbon Neutral?</h2>
+                        <p>是一家企業或一個組織的二氧化碳排放量，經過清除二氧化碳達到平衡
+                            （衡量期間通常是一年）時，就代表達成碳中和，或是淨零排放二氧化
+                            碳（CO2）。</p>
+                    </div>
+                </div>
+                <div class="col-md-6" style="position: relative;">
+                    <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec-right">
+                    <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//TN1E5Q631AE?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="row sec sec02">
+        <div class="container">
+            <div class="row">
+                <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//GgE7z2WGL8Q?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                <div class="col-md-6">
+                    <div class="txt-block">
+                        <h2>Carbon Neutral 對產業的影響</h2>
+                        <ul class="item rankblock advantages-list">
+                            <li><span>1.</span> 電力產業</li>
+                            <li><span>2.</span> 車輛產業</li>
+                            <li><span>3.</span> 重工業</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="row sec sec03">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="txt-block">
+                        <h2>台灣如何達到碳中和</h2>
+                        <p class="text-left">經濟部表示，電力結構先朝低碳發展、再邁向無碳化，將是淨零排放的關鍵。
+                            以2025年能源轉型為基礎，持續擴大再生能源發展，不但能降低排碳，更能提供產業更多綠電，滿足全球供應鏈碳中和要求。</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//pR6JXW9V2Ug?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="row sec sec04">
+        <div class="container">
+            <div class="row">
+                <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//59Nt_9gR2qk?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                <div class="col-md-6">
+                    <div class="txt-block">
+                        <h2>減碳NFT</h2>
+                        <p>首個碳中和NFT WAX比以太坊和比特幣更節能</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="row sec sec05">
+        <div class="container">
+            <h2>碳排放因應措施</h2>
+            <p>人類因為從事某件活動，直接或間接產生的溫室氣體，這些溫室氣體的總重量就被稱為
+                碳排放量。面對巨大的排放量，企業與政府皆對此做出因應措施</p>
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="m-tabs">
+                        <ul class="m-tabs-nav">
+                          <li><a href="#tab3-1">企業</a></li>
+                          <li><a href="#tab3-2">政府</a></li>
+                        </ul>
+                        <div class="m-tabs-stage">
+                          <div id="tab3-1">
+                            <div class="row">
+                                <div class="col-md-7">
+                                    <div class="txt-block">
+                                        <h2>面對碳排放 企業計畫「淨零排放」</h2>
+                                        <p>沃爾瑪從原料供應到生產都要淨零 2035年採用100％再生能源。沃爾瑪預計在2035年，將收集足夠的風能
+                                            、太陽能和其他可再生能源，使其設施擁有100%的可再生能源。亞馬遜預計在2025年全數使用再生能源營運，
+                                            並在2030年將超過一半的亞馬遜出貨達到淨零排放，且購買10萬輛電動車應用於物流，要求供應商開發精簡與創新的產品包裝。</p>
+                                    </div>
+                                </div>
+                                <div class="col-md-5">
+                                    <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//jec3NCq6Hjk?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                          <div id="tab3-2">
+                            <div class="row">
+                                <div class="col-md-7">
+                                    <div class="txt-block">
+                                        <h2>減碳新解法 英國發展氫能 帶動經濟</h2>
+                                        <p>英國是今年氣候變遷大會主辦國，近年積極減少碳排放、發展綠能及氫能，英國近年更大規模開發新
+                                            能源「氫能」用於交通工具，成果已慢慢浮現在民眾日常生活中。英國第二大城伯明罕上月公開展示該
+                                            市首款氫能公車，使用「氫燃料電池」來發電，對環境相當友善。賣力減碳的首都倫敦，也自六月推出使用氫能的紅色雙層巴士。</p>
+                                    </div>
+                                </div>
+                                <div class="col-md-5">
+                                    <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//Tx33pkuuqpk?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="row sec sec06">
+        <div class="container">
+            <h2>碳排放延伸議題</h2>
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="d-tabs">
+                        <ul class="d-tabs-nav">
+                          <li><a href="#tab2-1">碳交易</a></li>
+                          <li><a href="#tab2-2">碳稅</a></li>
+                        </ul>
+                        <div class="d-tabs-stage">
+                          <div id="tab2-1">
+                            <div class="row">
+                                <div class="col-md-7">
+                                    <div class="txt-block">
+                                        <h2>碳權及碳交易市場</h2>
+                                        <p>碳權(carbon credit)是碳排放權，排碳需求高的組織須購買此權利以增加許可排放量。出售未使用的碳排放權：
+                                            國家或企業若排碳量未達上限，將未使用的單位出售給未達減量目標的組織</p>
+                                    </div>
+                                </div>
+                                <div class="col-md-5">
+                                    <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//EdxZTNAFkqY?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                          <div id="tab2-2">
+                            <div class="row">
+                                <div class="col-md-7">
+                                    <div class="txt-block">
+                                        <h2>各國發起碳稅提案</h2>
+                                        <p>歐盟提出全球第一個「碳邊境稅」計畫，將對低環保標準國家的鋼鐵、鋁、水泥等產品課徵碳稅。
+                                            美國參院民主黨議員也正在推動對高碳排進口產品開徵碳稅。北京當局也將啟動全國碳排放權交易市場
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="col-md-5">
+                                    <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//K4eBU44Auus?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>

static/css/customnft.css

@@ -75,3 +75,41 @@
 #block-nft .nft-tabs-stage h2 {
     font-size: 2.5rem;
 }
+
+#block-carbon p {
+    font-size: 1.8rem;
+}
+
+#block-carbon .sec05 {
+    background-color: white;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+#block-carbon .sec06 {
+    transform: none;
+    box-shadow: none;
+    background-color: #FFEBE2;
+    position: relative;
+}
+
+#block-carbon .sec06::after {
+    content: "";
+    position: absolute;
+    top: -66px;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 66px;
+    transform: rotate(180deg);
+    background-image: url("https://i.imgur.com/fR4Tz5V.png");
+    background-size: 3840px 66px;
+    background-position: 0 0;
+}
+
+#block-carbon .sec06 .container {
+    transform: none;
+    box-shadow: none;
+    background-color: #FFEBE2;
+    margin-top: 0;
+}