티스토리 뷰

코딩/메가박스

푸터영역 만들기

zzzeeeram 2020. 1. 5. 16:47
<footer id="footer">
      <div id="footer_sns">
         <div class="container">
            <div class="footer_sns">
               <ul>
                  <li class="icon s1"><a href="#"><span class="ir_pm">트위터</span></a></li>
                  <li class="icon s2"><a href="#"><span class="ir_pm">페이스북</span></a></li>
                  <li class="icon s3"><a href="#"><span class="ir_pm">인스타그램</span></a></li>
                  <li class="icon s4"><a href="#"><span class="ir_pm">구글 플레이</span></a></li>
                  <li class="icon s5"><a href="#"><span class="ir_pm">아이폰 앱스토어</span></a></li>
               </ul>
               <div class="tel">
                  <a href="#">ARS <em>1544-0070</em></a>
               </div>
            </div>
         </div>
      </div>
      <!--//footer_sns-->
      <div id="footer_info">
         <div class="container">
            <div class="row">
               <div class="footer_info">
                  <h2><img src="assets/img/logo_footer.png" alt="메가박스"></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-->

 

style.css

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

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

댓글
© 2018 webstoryboy