04.16 - 사각사각 문구점 (섹션 3)

 

 

- html -

<section id="section03">
            
            <ul class="content">
                
                <li class="content01">
                    <div class="textbox">
                        <strong>가격대별 다이어리 시작 세트</strong>
                        <p>1~5만원대까지 필요한 것만 담은 실속 구성! <br> 처음이라면 이 세트로 충분해요</p>
                    </div>
                    <figure><img src="images/section3_content01.png" alt=""></figure>
                </li>
           
                <li class="content02">
                    <div class="textbox">
                        <strong>취향별 다이어리 추천</strong>
                        <p>감성, 실용, 기록 스타일에 따라 <br> 나에게 맞는 문구를 골라보세요</p>
                    </div>
                    <figure><img src="images/section3_content02.png" alt=""></figure>
                </li>
            </ul>
        </section>

 

 

- css -

#section03 {max-width: 1520px; margin: 0 auto; padding: 40px; } 
#section03 .content {display: flex; gap: 24px;} 
#section03 .content li {flex: 1; padding: 34px; color: #6F4324; border-radius: 20px; margin-bottom: 160px; transition: 0.3s;}
#section03 .content li.content01 {background: #FFF6EC;}
#section03 .content li.content02 {background: #F0F2D6;}
#section03 .content li strong {font-weight: 700; font-size: 24px; display: block; margin-bottom: 16px;}
#section03 .content li p {font-weight: 400; font-size: 16px;}
#section03 .content li figure {margin-top: 24px; overflow: hidden; border-radius: 12px;}
#section03 .content li figure img {width: 100%; transition: 0.3s;}



#section03 .content li:hover figure img {transform: scale(1.05);}

#section03 .content li.content01:hover { background: linear-gradient(135deg, #FFF6EC, #F5DFC5); box-shadow: 0px 0px 20px rgba(180, 140, 100, 0.4);}

#section03 .content li.content02:hover {background: linear-gradient(135deg, #F0F2D6, #D8DEAB); box-shadow: 0px 0px 20px rgba(130, 160, 100, 0.4);}


#section03 .content li.content01:hover strong,
#section03 .content li.content01:hover p {color: #99775A;}

#section03 .content li.content02:hover strong,
#section03 .content li.content02:hover p {color: #6B7C4E;}