<!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>© 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;
}
}
This Pen doesn't use any external JavaScript resources.