메가박스 사이트 만들기 19 - 푸터영역

메가박스 사이트 만들기

강의번호 19 - 푸터영역

 

완성!

 

style.css

/*푸터영역*/
.footer_sns{position: absolute; right: 17px; top: 33px; z-index: 1;}
.footer_sns li{display: inline-block; margin: 0 2px;}
.footer_sns li a{display: block; width: 36px; height: 36px;}
.footer_sns li.s1{background-position: 0 -375px;}
.footer_sns li.s2{background-position: -36px -375px;}
.footer_sns li.s3{background-position: -72px -375px;}
.footer_sns li.s4{background-position: -108px -375px;}
.footer_sns li.s5{background-position: -144px -375px;}
.footer_sns li .tel{text-align: right; padding-top: 5px;}
.footer_sns .tel a{color: #8f8f8f; font-size: 21px;}
.footer_sns .tel a em{color: #fff;}

.footer_sns li.s1:hover{background-position: 0 -411px;}
.footer_sns li.s2:hover{background-position: -36px -411px;}
.footer_sns li.s3:hover{background-position: -72px -411px;}
.footer_sns li.s4:hover{background-position: -108px -411px;}
.footer_sns li.s5:hover{background-position: -144px -411px;}

.footer_info{padding: 50px 0; width: 80%;}
.footer_info h2 img{width: 150px;}
.footer_info ul{padding: 15px 0;}
.footer_info li{display: inline; padding-right: 16px; white-space: nowrap; position: relative;}
.footer_info li:after{content: ''; position: absolute; right: 5px; top: 5px; width: 1px; height: 11px; background: #8f8f8f;}
.footer_info li:last-child:after{width: 0; height: 0;}
.footer_info li a{color: #8f8f8f}
.footer_info address p {color: #8f8f8f; padding-bottom: 15px;} 

 

index.html

<!--footer-->
    <footer id="footer">
        <div id="footer_sns">
            <div class="container">
                <div class="footer_sns">
                    <ul>
                        <li class="icon s1"><a href="#">
                                <sapn class="ir_pm">트위터</sapn>
                            </a></li>
                        <li class="icon s2"><a href="#">
                                <sapn class="ir_pm">페이스북</sapn>
                            </a></li>
                        <li class="icon s3"><a href="#">
                                <sapn class="ir_pm">인스타그램</sapn>
                            </a></li>
                        <li class="icon s4"><a href="#">
                                <sapn class="ir_pm">구글 플레이</sapn>
                            </a></li>
                        <li class="icon s5"><a href="#">
                                <sapn class="ir_pm">아이폰 엡스토어</sapn>
                            </a></li>
                    </ul>
                    <div class="tel">
                        <a href="#">ARS<em>1544-0070</em></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_info">
            <div class="container">
                <div class="row">
                    <div class="footer_info">
                        <h2><img src="assets/img/logo_footer.png" alt="magabox"></h2>
                        <ul>
                            <li><a href="#">회사소개</a></li>
                            <li><a href="#">채용정보</a></li>
                            <li><a href="#">제휴/광고/부대사업 문의</a></li>
                            <li><a href="#">이용약관</a></li>
                            <li><a href="#">개인정보처리방침</a></li>
                            <li><a href="#">고객센터</a></li>
                            <li><a href="#">윤리경영</a></li>
                        </ul>
                         <address>
                            <p>서울특별시 강남구 도산대로 156, 2층 메가박스중앙(주) (논현동, 중앙엠앤비사옥)<br><span class="bar2">대표자명 김진선</span> 개인정보보호 책임자 경영지원실 실장 박영진<br><span class="bar2">사업자등록번호 211-86-59478</span> 통신판매업신고번호 제 833호</p>
                            <p>Copyright 2014 by MegaboxJoongAng Inc. All right reserved</p>
                        </address>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!--//footer-->