<!-- footer -->
<footer id="footer">
<nav class="left_nav">
<ul>
<li><a href="#">Terms and conditions</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</nav>
<nav class="right_methods">
<h3>Payment Methods</h3>
<ul>
<li><span class="payment_icon one"></span></li>
<li><span class="payment_icon two"></span></li>
<li><span class="payment_icon three"></span></li>
<li><span class="payment_icon four"></span></li>
<li><span class="payment_icon five"></span></li>
</ul>
</nav>
<a href="#" class="to_top_button"></a>
</footer>
/*footer*/
#footer {
position: relative;
padding-bottom: 66px;
}
#footer .left_nav {
padding-top: 20px;
text-align: center;
}
#footer .left_nav li {
padding: 5px 0;
}
#footer .right_methods {
text-align: center;
margin-bottom: 20px;
margin-top: 30px;
}
#footer .right_methods li {
display: inline-block;
padding: 7px 4px;
}
.payment_icon {
display: inline-block;
width: 30px;
height: 20px;
}
/*띄어쓰기 주의 /
.payment_icon .one : payment_icon부모 one자식
.payment_icon.one : payment_icon중에서 one이라는 클래스명 갖고있음*/
.payment_icon.one {
background-color: black;
}
.payment_icon.two {
background-color: red;
}
.payment_icon.three {
background-color: pink;
}
.payment_icon.four {
background-color: blue;
}
.payment_icon.five {
background-color: gray;
}
.to_top_button {
position: absolute;
display: block;
width: 66px;
height: 66px;
background-color: green;
bottom: 0;
left: 50%;
margin-left: -33px;
}
@media (min-width: 60em) {
#footer .left_nav {
float: left;
width: 50%;
padding-top: 32px;
padding-left: 40px;
text-align: left;
}
#footer .right_methods {
float: right;
width: 50%;
margin: 0;
padding-top: 32px;
padding-right: 40px;
text-align: right;
}
#footer .left_nav a {
font-size: 14px;
padding: 0 5px;
}
#footer .right_methods li {
padding: 0 4px;
}
#footer ul, #footer li, #footer h3 {
display: inline-block;
vertical-align: middle;
}
#footer h3 {
padding-right: 10px;
}
}
/*모든 html 적용*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*body태그의 전체영역 확인 가능하기때문에 넣는게 좋다*/
html,
body {
width: 100%;
height: 100%;
}
ul,
li {
list-style: none;
}
body {
overflow-x: hidden;
font-family: sans-serif;
color: #585858;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-weight: 400;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
span {
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.