<footer class="footer">
	<div class="footer-top">
		<a href="#" class="logo">
			#frontendaily
		</a>
		<div class="footer-menu">
			<nav>
				<h5>Community</h5>
				<ul>
					<li>
						<a href="#">About</a>
					</li>
					<li>
						<a href="#">Submit an issue</a>
					</li>
					<li>
						<a href="#">GitHub Repo</a>
					</li>
					<li>
						<a href="#">Slack</a>
					</li>
				</ul>
			</nav>
			<nav>
				<h5>Getting started</h5>
				<ul>
					<li>
						<a href="#">Introduction</a>
					</li>
					<li>
						<a href="#">Documentation</a>
					</li>
					<li>
						<a href="#">Usage</a>
					</li>
					<li>
						<a href="#">Globals</a>
					</li>
					<li>
						<a href="#">Elements</a>
					</li>
					<li>
						<a href="#">Collections</a>
					</li>
					<li>
						<a href="#">Themes</a>
					</li>
				</ul>
			</nav>
			<nav>
				<h5>Resources</h5>
				<ul>
					<li>
						<a href="#">Introduction</a>
					</li>
					<li>
						<a href="#">Documentation</a>
					</li>
					<li>
						<a href="#">Usage</a>
					</li>
					<li>
						<a href="#">Globals</a>
					</li>
					<li>
						<a href="#">Elements</a>
					</li>
					<li>
						<a href="#">Collections</a>
					</li>
					<li>
						<a href="#">Themes</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
	<div class="footer-bottom">
		<p>
			&copy; 2020 flow-ui. All rights reserved.
		</p>
		<nav class="footer-menu">
			<ul>
				<li>
					<a href="#">Terms of Service</a>
				</li>
				<li>
					<a href="#">Privacy Policy</a>
				</li>
				<li>
					<a href="#">Security</a>
				</li>
				<li>
					<a href="#">Sitemap</a>
				</li>
			</ul>
		</nav>
		<ul class="footer-social">
			<li>
				<a href="#">
					<img src="img/twitter-logo.svg" alt="">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/github-logo.svg" alt="">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/facebook-logo.svg" alt="">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/dribbble-logo.svg" alt="">
				</a>
			</li>
		</ul>
	</div>
</footer>

@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];700&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: 'Mulish', sans-serif;

  &:focus {
    outline: 0;
  }
}

html, body {
  height: 100%;
}

body {
  background-color: #F7F8FC;
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto;
  padding: 75px;
  border-top: 5px solid #10182F;
  background-color: #fff;
  box-shadow: 0 10px 76px -12px rgba(#001D93, .1);

  .footer-top {
    display: flex;
    align-items: flex-start;

    .logo {
      display: flex;
      align-items: center;
      font-size: 26px;
      font-weight: bold;
      margin-right: 50px;
      color: #10182F;
    }

    .footer-menu {
      margin-left: auto;
      display: flex;

      nav {
        min-width: 180px;
        margin-right: 40px;

        h5 {
          font-size: 14px;
          font-weight: bold;
          color: #222C46;
          margin-bottom: 15px;
          text-transform: uppercase;
        }

        ul {
          li {
            a {
              display: inline-block;
              font-size: 16px;
              color: #545D7A;
              padding: 10px 0;
              z-index: 1;
              position: relative;

              &::before {
                content: '';
                height: 20px;
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: rgba(#545D7A, .1);
                width: 0;
                transition: 300ms width;
                z-index: -1;
              }

              &:hover {
                color: #222C46;

                &::before {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }

  .footer-bottom {
    display: flex;
    align-items: center;
    padding-top: 85px;
    justify-content: space-between;

    p {
      font-size: 14px;
      color: #545D7A;
    }

    .footer-menu {
      ul {
        display: flex;

        li {
          margin: 0 25px;

          a {
            display: inline-block;
            font-size: 14px;
            color: #545D7A;
            z-index: 1;
            position: relative;

            &::before {
              content: '';
              height: 20px;
              position: absolute;
              bottom: -10px;
              left: 0;
              background-color: rgba(#545D7A, .1);
              width: 0;
              transition: 300ms width;
              z-index: -1;
            }

            &:hover {
              color: #222C46;

              &::before {
                width: 100%;
              }
            }
          }
        }
      }
    }

    .footer-social {
      display: flex;

      li {
        a {
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          transition: 300ms background-color;

          img {
            opacity: .55;
            transition: 300ms opacity;
          }

          &:hover {
            background-color: rgba(#10182F, .05);

            img {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}