9편 Omnifood footer

1.HTML

    <footer>
        <div class="row">
            <div class="col span 1-of-2">
                <ul class="footer-nav">
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Press</a></li>
                    <li><a href="#">iOS App</a></li>
                    <li><a href="#">Android App</a></li>
                </ul>
            </div>
            <div class="col span 1-of-2">
                <ul class="social-links">
                    <li><a href="#">
                            <ion-icon name="logo-facebook" class="facebook"></ion-icon>
                        </a></li>
                    <li><a href="#">
                            <ion-icon name="logo-twitter" class="twitter"></ion-icon>
                        </a></li>
                    <li><a href="#">
                            <ion-icon name="logo-google" class="google"></ion-icon>
                        </a></li>
                    <li><a href="#">
                            <ion-icon name="logo-instagram" class="instagram"></ion-icon>
                        </a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <p>
                Copyright &copy; 2015 by Omnifood. All right reserved
            </p>
        </div>
    </footer>

 

2.CSS

/*---------------------------*/
/*FOOTER*/
/*---------------------------*/

footer {
    background-color: #333;
    padding: 50px;
    font-size: 80%;
}

.footer-nav {
    list-style: none;
    float:left
}

.social-links {
    list-style: none;
    float: right;
}

.footer-nav li,
.social-links li {
    display: inline-block;
    margin-right: 20px;
}

.footer-nav li:last-child,
.social-links li:last-child {
    margin-right: 0;
}

.social-links li:first-child {
    margin-left: 500px
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
    text-decoration: none;
    border: 0;
    color: #888;
    transition: color 0.2s
}

.footer-nav li a:hover,
.footer-nav li a:active {
    color: #ddd;
}

.social-links li a:link,
.social-links li a:visited {
    font-size: 180%;
}

.facebook,
.twitter,
.googleplus,
.instagram {
    transition: color 0.2s;
}

.facebook:hover {
    color: #1877f2
}

.twitter:hover {
    color: #1da1f2
}

.google:hover {
    color: #4285f4
}

.instagram:hover {
    color: #c32aa3
}

footer p {
    color: #888;
    text-align: center;
    font-size: 90%;
    margin-top: 30px
}