<!DOCTYPE html>
<html lang="en">
<head>
  <title>Marketing site footer</title>
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta name="author" content="Samuel 'teer' Neal-Blim" /> 
  <meta name="description" content="Embrace the 21st century" /> 
  <link rel="shortcut icon" href="https://example.com/myicon.ico">
  <link type="text/plain" rel="author" href="http://domain/humans.txt" /> 
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fredoka+One&display=swap">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
  <link rel="stylesheet" type="text/css" href="../../public/style/app.css" />
  <link rel="stylesheet" type="text/css" href="../../public/style/style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/css/foundation.min.css">
  <style>html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}</style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
  <noscript><style>#login:target+div+div,#signup:target+div{display:block}#login:target+div+div .modal-toggle-mode-a,#signup:target+div .modal-toggle-mode-b{display:block}.modal-window-content-footer>div,.modal-window-form,.modal-window-social h4,.modal-window-title h3{display:none}</style></noscript>
</head>

<body>

    <div class="app" id="home-view">
      <div class="app-header fluid grid-container">
        <header>
          <div class="header-nav">
            <div>
              <nav>
                <ul class="vertical menu align-right">
                  <li><a class="link-button" data-open="modal-form-user-auth" href="#login" id="login-button">Login</a></li>
                  <li><a class="link-button" data-open="modal-form-user-auth" href="#signup" id="signup-button">Signup</a></li>
                </ul>
              </nav>
            </div>
   	  	  </div>
  	    </header>
  	  </div> 
  	  
  	  <div class="app-body">
  	    <main>
  	    </main>
  	  </div>
    </div>
    
  	<div class="app-footer">
  	  <footer class="marketing-site-footer">
  	    <div class="cell-auto">
          <div class="grid-x grid-padding-x align-center">
            <div class="small-1 medium-2 large-2">
              <h4>Yeti Snowcone</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita dolorem accusantium architecto id quidem, itaque nesciunt quam ducimus atque.</p>
              <ul class="menu marketing-site-footer-menu-social simple">
                 <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></li>
                 <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
                 <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
              </ul>
            </div>
            
            <div class="small-1 medium-2 large-2 marketing-site-footer-contact">
              <h4 class="marketing-site-footer-title">Contact Info</h4>
              <div class="grid-x grid-margin-x">
                <div class="cell">
                  <div>
                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                  </div>
                  <div class="cell auto">
                    <p>100 W Rincon<br>San Francisco, CA 94015</p>
                  </div>
                </div>
                <div class="cell">
                  <div class="cell shrink">
                    <i class="fa fa-phone" aria-hidden="true"></i>
                  </div>
                  <div class="cell auto">
                    <p>1 (800) 555-5555</p>
                  </div>
                </div>
                <div class="cell">
                  <div class="cell shrink">
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                  </div>
                  <div class="cell auto">
                    <p>yetirules@fakeemail.com</p>
                  </div>
                </div>
             </div>
            </div>
            
            <div class="small-1 medium-2">
              <h4 class=" ">Instagram</h4>
              <div class="grid-x grid-padding-x small-up-3 medium-up-2">
                <div class="cell small-shrink">
                  <img src="https://placehold.it/75" alt="" />
                </div>
                <div class="cell small-shrink">
                  <img src="https://placehold.it/75" alt="" />
                </div>
                <div class="cell small-shrink">
                  <img src="https://placehold.it/75" alt="" />
                </div>
                <div class="cell small-shrink">
                  <img src="https://placehold.it/75" alt="" />
                </div>
                <div class="cell small-shrink">
                  <img src="https://placehold.it/75" alt="" />
                </div>
                <div class="cell small-shrink">
                  <img src="https://placehold.it/75" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
          
        <div class="cell-auto">
          <div class="cell shrink footer top-bar">
            <div class="cell top-bar-left">
              <p>&copy; 2017 No rights reserved</p>
            </div>
            <div class="cell top-bar-right">
              <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Works</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>
  	  </footer>
  	</div>
  </div>
  <script>
  $(document).ready(function() {
	  $("#login-button").click(function() {
		$(".modal-toggle-mode-a").show();
		$(".modal-toggle-mode-b").hide();
	  });
				    
	  $("#signup-button").click(function() {
	    $(".modal-toggle-mode-a").hide(); 
		$(".modal-toggle-mode-b").show(); 
	  });
	});</script>
  
  <script>$(document).foundation();</script>
</body>
</html>
html, 
body,
.app {
	height: 100%;
	margin: 0;
	padding: 0;
}

.app {
	background-color:  #00275F;
}


.marketing-site-footer {
  background: #2c3840;
    color: #8aa0ae;
    padding: 2rem 0 0;
}

.marketing-site-footer h4 {
    color: #fefefe;
    margin-bottom: 1rem;
}

.marketing-site-footer .marketing-site-footer-menu-social a {
    color: #fefefe;
}

.marketing-site-footer-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.marketing-site-footer-contact .cell > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.marketing-site-footer-contact p {
    line-height: 1.125rem;
}

.marketing-site-footer-contact .fa {
    color: #020304;
    font-size: 2rem;
}

.marketing-footer-top {
    background: #2c3840;
}

.marketing-footer-bottom {
    background: #020304;
    padding: 1rem 0;
}

.marketing-site-footer-bottom .marketing-site-footer-bottom-links {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

@media screen and (max-width: 63.9375em) {
    .marketing-site-footer-bottom .marketing-site-footer-bottom-links {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
  }
}

@media screen and (max-width: 63.9375em) {
    .marketing-site-footer-bottom {
        text-align: center;
    }
}


@media screen and (max-width: 39.9375em) {
  .marketing-site-footer .columns {
    margin-bottom: 2rem;
  }
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.