04.14 - 사각사각 문구점 (섹션 1)

- html -

<section id="section01">

            <div class="container1500">
                <h2>사각사각 문구점 소식</h2>

                <div class="board_box">

                    <div class="board">

                        <div class="imgbox">
                            <img src="images/board1.png" alt="">
                            <h3>
                                <span class="title">새로운 소식</span>
                                <span class="sub">봄봄봄봄, 봄이 왔어요~</span>
                            </h3>
                        </div>

            
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="popup_box"><img src="images/popup_box.png" alt=""></div>
                                </a>
                            </li>

                            <li>
                                 <a href="#">
                                    <div class="thumbnail"><img src="images/thumbnail1.png" alt=""></div>
                                    <div class="product_info">
                                        <div class="title">봄 한정 다이어리, 봄봄다이어리 출시!</div>
                                        <div class="text">벚꽃 패턴의 감성 다이어리가 출시 <br> 되었어요. 봄의 설렘을 담아보세요.</div>
                                        <div class="cost">12,500원</div>
                                    </div>
                                </a>        

                                <div class="heart_link"><img src="images/heart.png" alt=""></div>
                            </li>                             
                        </ul>
                    </div>

                    <div class="board board2">

                        <div class="imgbox">
                            <img src="images/board2.png" alt="">
                            <h3>
                                <span class="title">이번주 베스트 픽</span>
                                <span class="sub">스태프가 직접 골라봤어요!</span>
                            </h3>
                        </div>

            
                        <ul>
                            <li>
                                 <a href="#">
                                    <div class="thumbnail"><img src="images/thumbnail2.png" alt=""></div>
                                    <div class="product_info">
                                        <div class="title">모나미 고급젤펜 세트</div>
                                        <div class="text">부드러운 필기감으로 인기 급상승 중! <br> 12색 구성으로 알록달록 기록하세요.</div>
                                        <div class="cost">8,900원</div>
                                    </div>
                                </a>        

                                <div class="heart_link"><img src="images/heart.png" alt=""></div>
                            </li>  

                            <li>
                                 <a href="#">
                                    <div class="thumbnail"><img src="images/thumbnail3.png" alt=""></div>
                                    <div class="product_info">
                                        <div class="title">코넬 노트 5종 세트</div>
                                        <div class="text">공부 효율을 높여주는 코넬 노트,<br>이번 주 가장 인기있는 상품이에요.</div>
                                        <div class="cost">15,000원</div>
                                    </div>
                                </a>        

                                <div class="heart_link"><img src="images/heart.png" alt=""></div>
                            </li>                             
                        </ul>
                    </div>
                    	<div class="board board3">

                        <div class="imgbox">
                            <img src="images/board3.png" alt="">
                            <h3>
                                <span class="title">드디어 왔어요</span>
                                <span class="sub">기다리셨죠? 품절 전에 얼른 담아 가세요!</span>
                            </h3>
                        </div>

            
                        <ul>
                            <li>
                                 <a href="#">
                                    <div class="thumbnail"><img src="images/thumbnail4.png" alt=""></div>
                                    <div class="product_info">
                                        <div class="title">파이롯트 카쿠노 만년필</div>
                                        <div class="text">오랫동안 품절이었던 만년필이<br>재입고되었어요. 서둘러 주세요!</div>
                                        <div class="cost">12,500원</div>
                                    </div>
                                </a>        

                                <div class="heart_link"><img src="images/heart.png" alt=""></div>
                            </li>  

                            <li>
                                 <a href="#">
                                    <div class="thumbnail"><img src="images/thumbnail5.png" alt=""></div>
                                    <div class="product_info">
                                        <div class="title">봄 감성 스티커팩</div>
                                        <div class="text">꽃, 나비, 리본 등 봄 테마 스티커<br>60장 구성. 다이어리 꾸미기에 딱!</div>
                                        <div class="cost">4,500원</div>
                                    </div>
                                </a>        

                                <div class="heart_link"><img src="images/heart.png" alt=""></div>
                            </li>                             
                        </ul>
                    </div>

                </div>
            </div>
        </section>a

 

 

- css -

#section_box .container1500 {padding: 160px 0; max-width: 1500px; width: 100%; margin: 0 auto;}
#section_box .container1500 .board_box {display: flex; gap: 24px;}

#section_box .board {flex-grow: 1;}
#section_box .board h3 {position: relative; display: block;}
#section01 .board h3 .img {display: block; width: 100%;  margin-bottom: 24px;}
#section01 .board h3 .title{font-size: 24px; font-weight: 700; position: absolute; bottom: 48px; left: 24px; color: #fff;}
#section01 .board h3 .sub{font-size: 16px; font-weight: 400; position: absolute; bottom: 24px; left: 24px; color: #fff;}

#section01 .board2 h3 .title { color: #6F4324; font-weight: 700;}
#section01 .board2 h3 .sub { color: #6F4324; font-weight: 400;}

#section01 .board3 h3 .title { color: #6F4324; font-weight: 700;}
#section01 .board3 h3 .sub { color: #6F4324; font-weight: 400;}


#section01 .board {display: block; border: 1px solid #D4D4D4; border-radius: 16px; overflow: hidden;}
#section01 .board h3 img {position: relative; display: block; flex: 1;}
#section01 .board ul {flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px;}
#section01 .board ul li {display: flex; align-items: center; justify-content: space-between;}

#section01 .board ul li a {display: flex; align-items: center;}
#section01 .board ul li a .popup_box {border-radius: 8px; overflow: hidden;}
#section01 .board ul li a .popup_box img {position: relative; display: block; flex: 1; width: 100%;}
#section01 .board ul li a .thumnbail {width: 80px; height: 80px;}
#section01 .board ul li a .thumbnail img {width: 100%; height: 100%; object-fit: cover; border-radius: 8px;}

#section01 .board ul li a .info {display: flex; flex-direction: column; gap: 4px;}
#section01 .board ul li a .title {font-size: 16px; font-weight: 700; margin-left: 12px; margin-bottom: 8px;}
#section01 .board ul li a .text {font-size: 16px; font-weight: 400; margin-left: 12px;margin-bottom: 8px;}
#section01 .board ul li a .cost {font-size: 16px; font-weight: 700; margin-left: 12px;}

#section01 .board ul li a.heart-link {display: block; padding: 4px 12px 8px;}
#section01 .board ul li a.heart-link .heart img {width: 24px; height: 24px;}
#section01 .board ul li a.heart-link .heart img:hover {}