Footer

linkDefault Footer

A footer is used for a secondary source of navigation for users. It acts as a site map for the website.

  • Portfolio
  • About
  • Contact

HTML

<div class="design-preview design-preview-footer">
    <ul class="menu">
        <li>Portfolio</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <div class="social">
        <img src="images/twitter.svg" alt="twitter"/>
        <img src="images/instagram.svg" alt="instagram"/>
    </div>
</div>

SCSS

.design-preview-footer {
    background-image: linear-gradient(133deg, #480048 0%, #C04848 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.design-preview-footer li {
    text-transform: uppercase;
    color: white;
    font-weight: 700;
    display: inline-block;
    margin-left: 16px;
}

.design-preview-footer img {
    margin-right: 16px;
}