Fliplet Footer copy

by Hugo Carneiro

HTML

<footer>
  <div class="footer-column">
    <h3>Company</h3>
    <div class="menu-footer-company-container"><ul id="menu-footer-company" class="footer-menu"><li id="menu-item-67846" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67846"><a href="https://fliplet.com/contact/">Contact us</a></li>
<li id="menu-item-67847" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67847"><a href="https://fliplet.com/fliplet-careers/">Careers</a></li>
<li id="menu-item-67848" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67848"><a href="https://fliplet.com/partners/">Partners</a></li>
<li id="menu-item-71664" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71664"><a href="https://fliplet.com/terms/">Terms and policies</a></li>
</ul></div>  </div>
  <div class="footer-column">
    <h3>Product links</h3>
    <div class="menu-footer-product-links-container"><ul id="menu-footer-product-links" class="footer-menu"><li id="menu-item-69026" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-69026"><a href="https://studio.fliplet.com/signup">Free sign up</a></li>
<li id="menu-item-67851" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67851"><a href="https://fliplet.com/fliplet-viewer/">Fliplet Viewer</a></li>
<li id="menu-item-67852" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-67852"><a target="_blank" rel="noopener" href="https://help.fliplet.com/">Support site</a></li>
<li id="menu-item-67853" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-67853"><a target="_blank" rel="noopener" href="https://developers.fliplet.com/">Fliplet for developers</a></li>
</ul></div>  </div>
  <div class="footer-column">
    <h3>Resources</h3>
    <div class="menu-footer-resources-container"><ul id="menu-footer-resources" class="footer-menu"><li id="menu-item-68160" class="menu-item...

CSS

footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  background-color: #36344c;
  box-shadow: 0px 10px 24px 10px rgba(0, 0, 0, 0.07);
  padding-bottom: 100px;
}

footer .footer-column {
  width: calc(50vw - 10vw);
  margin: 5vh 5vw 5vh 5vw;
}

footer h3 {
  margin-top: 0;
  color: #8d8ea5;
}

footer .footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer .footer-menu .menu-item {
  list-style: none !important;
  margin: 0.7em 0 0 0;
}

footer .footer-menu a {
  display: block;
  color: #8d8ea5;
  font-size: 14px;
  transition: all .2s ease-in-out;
}

footer .footer-menu a:hover {
  color: #23d5ff;
  transition: all .2s ease-in-out;
}

.footer-column.last {
  min-width: 250px;
}

.footer-column.last .social-ico {
  display: inline-block;
  margin-right: 5px;
  margin-top: 10px;
}

@media (min-width: 600px) {
  footer .footer-column {
    width: calc(20vw - 10vw);
    min-width: 170px;
    margin: 4vh 3vw 4vh 3vw;
  }

  footer .footer-menu a {
    font-size: calc(0.4vw + 10px)
  }
}