04.17 - 사각사각 문구점 (섹션 4, 푸터)

 

- html -

<section id="section04">
           
                <div class="title_box">
                    <img src="images/section2_text.png" alt="">
                    <h2>어서오세요, 사각사각 문구점입니다.</h2>
                </div>
                
                <ul class="content">
                    <li class="grid-01">
                        <a href="#">
                            <img src="images/section4_content 01.png" alt="">
                            <span class="text">다이어리</span>
                            <span class="num">01</span>
                        </a>
                    </li>
                    
                    <li class="grid-02">
                        <a href="#">
                            <img src="images/section4_content 02.png" alt="">
                            <span class="text">스티커</span>
                            <span class="num">02</span>
                        </a>
                        
                    </li>
                    <li class="grid-03">
                        <a href="#">
                            <img src="images/section4_content 03.png" alt="">
                            <span class="text">펜</span>
                            <span class="num">03</span>
                        </a>
                    </li>
                    <li class="grid-04">
                        <a href="#">
                            <img src="images/section4_content 04.png" alt="">
                            <span class="text">메모지</span>
                            <span class="num">04</span>
                        </a>
                    </li>
                    <li class="grid-05">
                        <a href="#">
                            <img src="images/section4_center.png" alt="">
                        </a>
                    </li>
                    <li class="grid-06">
                        <a href="#">
                            <img src="images/section4_content 06.png" alt="">
                            <span class="text">키링</span>
                            <span class="num">06</span>
                        </a>
                    </li>
                    <li class="grid-07">
                        <a href="#">
                            <img src="images/section4_content 07.png" alt="">
                            <span class="text">속지</span>
                            <span class="num">07</span>
                        </a>
                    </li>
                    <li class="grid-08">
                        <a href="#">
                            <img src="images/section4_content 08.png" alt="">
                            <span class="text">파우치</span>
                            <span class="num">08</span>
                        </a>
                    </li>
                    <li class="grid-09"> 
                        <a href="#">
                            <img src="images/section4_content 09.png" alt="">
                            <span class="text">데스크테리어</span>
                            <span class="num">09</span>
                        </a>
                    </li>
                    
                </ul>
            
        </section>
    </div>

 

- css -

#section04 {width: 100%; padding: 160px 0 296px;background: #F5D4B6; position: relative;}

#section04 h2 {font-size: 48px;font-family: 'YeogiOttaeJalnan';color: #99775A; text-align: center; margin-bottom: 52px;}

#section04 .title_box { position: relative; width: 1520px; margin: 0 auto 40px; }

#section04 .title_box img {width: 100%; display: block; height: auto;}

#section04 h2 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; font-family: 'YeogiOttaeJalnan'; color: #99775A; white-space: nowrap; margin: 0;}

#section04 .content {display: grid; gap: 40px; grid-template-columns: 257px 468px 313px 362px; grid-template-rows: 245px 194px 220px; width: 1520px; margin: 0 auto;}

#section04 .content li {overflow: hidden; border-radius: 16px; position: relative;transition: 0.3s;}

#section04 .content li a {display: block; width: 100%; height: 100%; position: relative;}
#section04 .content li img { width: 100%; height: 100%;transition: 0.3s; filter: saturate(1);}

#section04 .content .text {position: absolute; top: 20px; left: 24px; font-size: 24px; font-weight: 700; color: #3a2010; z-index: 2; white-space: nowrap;transition: 0.3s;}
#section04 .content .num {position: absolute; right: 12px; bottom: 12px; font-size: 96px; font-weight: 900;color: rgba(0, 0, 0, 0.15); z-index: 2; line-height: 1; transition: 0.3s;}



#section04 .content li:hover {transform: translateY(-8px);}
#section04 .content li:hover img {transform: scale(1.07);filter: saturate(1.5);}
#section04 .content li:hover .num {color: rgba(153, 119, 90, 0.7);}


#section04 .content li:hover .text {color: #FFF6EC; background: rgba(153, 119, 90, 0.7);  padding: 4px 12px; border-radius: 8px;}





.grid-01 { grid-column: 1; grid-row: 1 / 3; }

.grid-02 { grid-column: 2; grid-row: 1; }
.grid-03 { grid-column: 3; grid-row: 1; }
.grid-04 { grid-column: 4; grid-row: 1; }

.grid-05 { grid-column: 2 / 4; grid-row: 2; }

.grid-06 { grid-column: 4; grid-row: 2; }

.grid-07 { grid-column: 1; grid-row: 3; }

.grid-08 { grid-column: 2; grid-row: 3; }


.grid-09 { grid-column: 3 / 5; grid-row: 3; }

---

 

- footer -

 

- html - 

<footer>
        <div class="footer_deco">
            <img src="images/footer_.png" alt="">
        </div>
        
        <div class="footer_inner">

            <div class="footer_logo">
                <img src="images/logo.png" alt="사각사각 문구점">
            </div>

            <div class="footer_info">
                <p>Company : Sagak Sagak Co.Ltd.
                <br>Rep : Jo Hyeon Chae
                <br>Registration : 123-4567-8910
                <br>Mail Registration : SagakSagak@gmail.com
                <br>Address : Seoul Gangnam-1234</p>
            </div>

            <div class="footer_cs">
                <p class="cs_title">Cs center</p>
                <p class="cs_num">02-1234-5678</p>
                <ul class="sns">
                    <li><a href="#"><img src="images/footer_Instagram.png" alt="">insta</a></li>
                    <li><a href="#"><img src="images/footer_Facebook.png" alt="">facebook</a></li>
                    <li><a href="#"><img src="images/footer_YouTube.png" alt="">youtube</a></li>
                    <li><a href="#"><img src="images/footer_Google.png" alt="">google</a></li>
                </ul>
            </div>

        </div>
</footer>

 

- css -

footer {position: relative; background: #774731; padding: 160px 0 ;}

footer .footer_deco {position: absolute; bottom: 400px; width: 100%; overflow: hidden;}

.footer_logo img {width: 512px; height: auto;}


.footer_inner {display: flex; align-items: center; gap: 120px; max-width: 1520px; margin: 0 auto; padding: 0 40px;}


.footer_info p {font-size: 18px; font-weight:400; color: #FFD7C1; line-height: 1.8; }

.footer_cs {font-size: 18px; font-weight:400; color: #FFD7C1; line-height: 1.8;}

.footer_cs .cs_title {margin-bottom: 4px;}
.footer_cs .cs_num {margin-bottom: 16px;}

.footer_cs .sns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.footer_cs .sns li a {display: flex; align-items: center; gap: 6px; color: #FFD7C1;}