html LPのフッター

Posted 2021-05-11

#footer {
    font-size: 12px;
    line-height: 18px;
    a {
        color: #996600;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
    .footer__block {
        padding: 10px 0;
        border-top: 1px solid #CCB27F;
        text-align: center;
        .navi {
            display: inline-block;
            li {
                float: left;
                display: block;
                padding: 0 12px;
                border-left: 1px solid #CCB27F;
                &:first-child {
                    border-left: none;
                }
            }
        }
        &.copyright {
            font-style: normal;
            color: #996600;
            background-color: #F7F2DA;
        }
    }
}

<div id="footer">
    <p class="footer__block"><a href="/">トップページへ戻る</a></p>
    <div class="footer__block">
        <ul class="navi clearfix">
            <li><a href="/help/" target="_blank">ご注文・お届けについて</a></li>
            <li><a href="/help/beginner/05/" target="_blank">特定商取引法に基づく表示</a></li>
            <li><a href="/help/beginner/04/" target="_blank">個人情報について</a></li>
            <li><a href="http://beekeeper.3838.com/" target="_blank">会社概要</a></li>
        </ul>
    </div>
    <address class="footer__block copyright">株式会社山田養蜂場（岡山県鏡野町）&nbsp;Copyright (C)2016 Yamada Bee Farm All Rights Reserved.</address>
</div>
<!-- /#footer -->