article height fixed

cases.html

@@ -1007,7 +1007,7 @@
                 <img class="img-fluid" src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150533.jpg"
                     alt="">
                 <div class="morePhotoTip">
-                    <a  href="./casedetail.html" target="_blank" style="text-decoration: none; color: #fff;">
+                    <a href="./casedetail.html" target="_blank" style="text-decoration: none; color: #fff;">
                         <i class="fa fa-clone case-img-quantity" aria-hidden="true"></i>
                     </a>
                 </div>
@@ -1095,7 +1095,24 @@
                 </div>
             </div>
         </section>
-
+        <section class="article1 mt-md-5">
+            <div class="container">
+                <div>
+                    <p class="article__contexts">
+                        家，是無可取代的避風港。為了滿足居者嚮往的現代時尚，席德設計傾聽所需，運用大理石、實木鋪敘出沉靜的自然況味，揉合鍍鈦金屬、鐵件的精緻細節，調和質材與線條的層次平衡，編織動人的家庭關係。<br>
+                        <br>
+                        入門落塵區採用石紋地坪界定場域，透過多邊形立柱間的縫隙窺見餐廳，配合鏡面修飾，勾勒公領域的視覺廣度。沙發背牆鋪設天然粗獷的石皮，演繹客廳的氣派風範，嵌入鐵件展示架、木格柵佛龕，形成和諧混搭的精緻美學，而隱含光澤的大理石電視牆，輝映綴飾天花的亮面鍍鈦線條，形構出耐人品味的豐富視覺。淑絹設計師將餐廳規劃於全室中央，匯聚成家人互動的核心場域，搭配長型實木餐桌延伸吧台，圍繞悠柔氣息，使一家共享日常的美好瞬間宛若停駐於此。<br>
+                        <br>
+                        推開深色木質門片，設計師運用沉靜的低彩度色系，營塑私領域的舒眠環境。主臥背牆以對稱鏡面、燈飾，渲染奢華風情，並以步入式更衣間設計，回應女屋主的衣物收納需求；孝親房床頭妝點溫潤木皮、藕紫色繃布，形塑優雅氣質；經由格局的重新調配，挪騰出獨立空間提供小兒子使用，窗邊灑落的日光，跟隨著書桌的木質紋理恣意遊走。經由席德設計與屋主一家的悉心討論，以氣勢磅礡的質材、紋理，點亮精緻層次的燦爛光輝，成就家的獨一無二。
+                    </p>
+                </div>
+                <div class="article__readMore">
+                    <i class="fa fa-chevron-down" aria-hidden="true"></i>
+                    <a class="article__readMore__text">閱讀更多</a>
+                    <i class="fa fa-chevron-down" aria-hidden="true"></i>
+                </div>
+            </div>
+        </section>
         <div class="text-center my-3" style="color:#727679;">&nbsp;</div>
         <section class="case-scMedia">
             <div class="container">
@@ -1215,6 +1232,8 @@
             </div>
             <!-- test -->
         </section>
+
+
         <section id="search" class="likeSee">
             <div class="container">
                 <div class="row">
@@ -1744,7 +1763,7 @@
     <script async defer src="js/index.js"></script>
     <script async defer src="./goto.js"></script>
     <!-- <script src="/assets/js/swiper.min.js"></script> -->
-   
+
     <!-- <script src="js/lazy-load.js" async></script> -->
 </body>
 

css/style.css

@@ -1949,6 +1949,46 @@ body {
   }
 }
 
+#hhh-cases .article__readMore::before {
+  content: '';
+  display: inline-block;
+  background: -webkit-gradient(linear, left bottom, left top, from(#FCFCFC), to(rgba(255, 255, 255, 0.454219)));
+  background: linear-gradient(0deg, #FCFCFC 0%, rgba(255, 255, 255, 0.454219) 100%);
+  width: 100%;
+  height: 25px;
+  -webkit-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+}
+
+#hhh-cases .article__contexts {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  height: 50px;
+  overflow: hidden;
+  -webkit-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+  color: #727679;
+}
+
+#hhh-cases .article__readMore {
+  cursor: pointer;
+  margin-left: auto;
+  margin-right: auto;
+  color: #FFAC73;
+  text-align: center;
+  font-size: 90%;
+  padding: 0 0 1rem;
+  -webkit-transform: translateY(-20px);
+  transform: translateY(-20px);
+  -webkit-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+}
+
+#hhh-cases .article__readMore a {
+  text-decoration: none;
+  color: #FFAC73;
+}
+
 #hhh-cases .img-wrapper-desktop {
   background-color: #6D6D6D;
   display: -webkit-box;

css/style.scss

@@ -1562,6 +1562,44 @@ body {
 
 // 個案頁面
 #hhh-cases{
+    .article__readMore::before {
+        content: '';
+        display: inline-block;
+        background: -webkit-gradient(linear, left bottom, left top, from(#FCFCFC), to(rgba(255, 255, 255, 0.454219)));
+        background: linear-gradient(0deg, #FCFCFC 0%, rgba(255, 255, 255, 0.454219) 100%);
+        width: 100%;
+        height: 25px;
+        -webkit-transition: all 300ms ease-in-out;
+        transition: all 300ms ease-in-out;
+    }
+    .article__contexts {
+        font-size: 1.1rem;
+        line-height: 1.8;
+        height: 50px;
+        overflow: hidden;
+        -webkit-transition: all 300ms ease-in-out;
+        transition: all 300ms ease-in-out;
+        color: #727679;
+        
+    }
+    .article__readMore {
+        cursor: pointer;
+        margin-left: auto;
+        margin-right: auto;
+        color: #FFAC73;
+        text-align: center;
+        font-size: 90%;
+        padding: 0 0 1rem;
+        -webkit-transform: translateY(-20px);
+        transform: translateY(-20px);
+        -webkit-transition: all 300ms ease-in-out;
+        transition: all 300ms ease-in-out;
+        a{
+            text-decoration: none;
+        color: #FFAC73;
+
+        }
+    }
     .img-wrapper-desktop {
         background-color: #6D6D6D;
         display: -webkit-box;
@@ -1955,6 +1993,7 @@ body {
         color: #6D6D6D ;
         text-decoration: none;
     }
+   
 }
 .info-area-title-desktop {
     font-size: 18px;

goto.js

@@ -3,6 +3,12 @@ $(".popular").hide();
 
 
 
+$( ".article__readMore" ).click(function() {
+
+    $('.article__contexts').css('height','auto');
+    $('.article__readMore').hide();
+  });
+
 
 $(document).on("click", ".likeSee__state__filter--item", function (event) {
     $(".CaseNews").toggle();