MFM Sitemap Page

In this example below you will see how to do a MFM Sitemap Page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tesscorinne, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tesscorinne ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>MFM Sitemap Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
<div class="site-wrap">
<div class="header">
  <div class="contact-header">
    <div class="contact-info">
      <div class="phone-number">
        <i class="fa fa-phone"></i>
        <span>1-234-567-8900</span>
      </div>
      <div class="email-address">
        <i class="fa fa-envelope-o"></i>
        <a class="email-link" href="mailto:info@memoryforgemedia.com">info@memoryforgemedia.com</a>
      </div>
    </div>
    <div class="social-media">
      <div class="social-item facebook">
        <a class="social-item-link" target="_blank" href="https://www.facebook.com/MemoryForgeMedia">
          <div class="social-color facebook"></div>
        </a>
      </div>
      <div class="social-item twitter">
	      <a class="social-item-link fitdiv" target="_blank" href="https://twitter.com/memory_forge">
          <div class="social-color twitter"></div>
        </a>
      </div>
      <div class="social-item linkedin">
	      <a class="social-item-link fitdiv" target="_blank" href="https://www.linkedin.com/company/memory-forge-media">
          <div class="social-color linkedin"></div>
        </a>
      </div>
      <div class="social-item vimeo">
	      <a class="social-item-link fitdiv" target="_blank" href="https://vimeo.com/MemoryForgeMedia">
          <div class="social-color vimeo"></div>
        </a>
      </div>
      <div class="social-item soundcloud">
	      <a class="social-item-link fitdiv" target="_blank" href="https://soundcloud.com/MemoryForgeMedia">
          <div class="social-color soundcloud"></div>
        </a>
      </div>
      <div class="social-item pinterest">
	      <a class="social-item-link fitdiv" target="_blank" href="https://www.pinterest.com/memoryforge/">
          <div class="social-color pinterest"></div>
        </a>
      </div>
      <div class="social-item instagram">
	      <a class="social-item-link fitdiv" target="_blank" href="https://www.instagram.com/memoryforgemedia/">
          <div class="social-color instagram">
            <div class="insta">
              <div class="circle grad-1"></div>
              <div class="circle grad-2"></div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="main-header head-scroll-change">
    <div class="logo-wrap">
      <input type="checkbox" checked="checked" id="toggle" class="hidden-box" />
      <label for="toggle" class="label noselect">
        <?xml version="1.0" encoding="utf-8"?>
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 401.5 401.5'><path id='gear' d='M369.8 182.7l29.6-11.6c-2.2-15.1-6.2-29.9-11.8-44l-31.5 4.8 -18-31.4 19.8-24.8c-9.5-11.9-20.3-22.7-32.2-32.2l-24.8 19.8 -31.2-18 4.8-31.5c-14.2-5.6-28.9-9.5-44-11.8l-11.6 29.6h-36.2L171.1 2c-15.1 2.2-29.9 6.2-44 11.8l4.8 31.5 -31.3 18.1L75.8 43.6c-11.9 9.5-22.7 20.3-32.2 32.2l19.8 24.8 -18 31.2L13.9 127c-5.6 14.2-9.5 28.9-11.8 44l29.6 11.6v36.2L2 230.5c2.2 15.1 6.2 29.9 11.8 44l31.5-4.8L63.4 301l-19.8 24.8c9.5 11.9 20.3 22.7 32.2 32.2l24.8-19.8 31.3 18.1 -4.8 31.5c14.2 5.5 28.9 9.5 43.9 11.7l11.6-29.6h36.2l11.7 29.6c15.1-2.2 29.9-6.2 44-11.8l-4.8-31.5 31.3-18 24.8 19.8c11.9-9.5 22.7-20.3 32.2-32.2L338.2 301l18.1-31.3 31.5 4.8c5.5-14.2 9.5-28.9 11.7-43.9L369.9 219v-36.3H369.8zM200.7 345.7c-82.2 0-144.9-65.7-144.9-144.9 0-84.1 68.3-144.9 144.9-144.9s145 61.7 145 144.9S277.4 345.7 200.7 345.7z'/><path id='internal' d='M200.2 51.6C118.1 51.6 51.6 118 51.5 200v0.2c0 18.2 3.3 36.3 9.8 53.2 0.8 2 1.6 3.9 2.4 5.9 23.6 54.4 77.2 89.5 136.5 89.5 3.6 0 7.2-0.1 10.7-0.4 81.9-6 143.5-77.2 137.5-159.1C342.7 111.8 278.1 51.7 200.2 51.6zM192.6 328.2c-1.4 4.5-3.1 10.1-4.2 13.9 -33.6-2.7-65.1-17.3-88.8-41.2 -9.5-9.5-17.7-20.3-24.2-32.2 10 6.6 22.5 11.9 36.9 15.6 11.2 2.7 22.5 4.4 34 5.2v1.7c0 0.1 0.1 0.3 0.3 0.3h20.8c14.6 0 20.9 0.3 25.8 3.4 4.3 2.8 6.8 5.1 6.7 11.4C199.7 312 194.2 323.1 192.6 328.2L192.6 328.2zM300.9 300.9c-4 4-8.2 7.8-12.7 11.3 -2.2-5.8-2-12.2 0.6-17.8 5.6-13.3 17.7-23 36.6-26C318.8 280.3 310.5 291.3 300.9 300.9L300.9 300.9 300.9 300.9zM334.5 247.7H144.8c-0.2 0-0.3 0.1-0.3 0.3l0 0v3.1c0 0.1 0.1 0.3 0.3 0.3h1.4v2.1H68.1c-6.7-16.6-10.2-30.2-10.3-48.6l142.4-41.2 19.7 38.9 63.2-21.6L229 85.5l-62.4 4.6 26.2 49.9L59 179.4c5.5-27.1 20.5-59.8 40.5-79.8 55.7-55.5 145.9-55.4 201.4 0.3C339.6 138.6 352.7 196.1 334.5 247.7L334.5 247.7 334.5 247.7z'/></svg>
      </label>
      <h1 class="logo-text">Memory Forge Media</h1>
    </div>
    <div class="desktop-nav">
      <ul class="desktop-nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="page-wrap">
  <div class="slideout-menu">
    <div class="sidebar">
      <ul class ="side-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Staff</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
  <div class="page-content">
    <div class="hero-bg">
      <div class="hero-content">
        <h2>Creating Content to Leave Lasting Impressions</h2>
      </div>
    </div>
    <div class="article">
      <h1>LOREM IPSUM</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula molestie, varius leo eu, condimentum turpis. Cras libero est, aliquet at nibh eu, ultricies efficitur sapien. Suspendisse gravida nec neque id dapibus. In massa augue, rhoncus in placerat vel, imperdiet eu tellus. Vivamus eu purus turpis. Morbi ut sollicitudin libero. In ultrices lobortis sodales. Integer id nisi et felis semper malesuada. Morbi ut efficitur dui. Aliquam porttitor turpis nec euismod laoreet. Suspendisse dapibus rutrum mauris, eget tincidunt lacus finibus elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula molestie, varius leo eu, condimentum turpis. Cras libero est, aliquet at nibh eu, ultricies efficitur sapien. Suspendisse gravida nec neque id dapibus. In massa augue, rhoncus in placerat vel, imperdiet eu tellus. Vivamus eu purus turpis. Morbi ut sollicitudin libero. In ultrices lobortis sodales. Integer id nisi et felis semper malesuada. Morbi ut efficitur dui. Aliquam porttitor turpis nec euismod laoreet. Suspendisse dapibus rutrum mauris, eget tincidunt lacus finibus elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula molestie, varius leo eu, condimentum turpis. Cras libero est, aliquet at nibh eu, ultricies efficitur sapien. Suspendisse gravida nec neque id dapibus. In massa augue, rhoncus in placerat vel, imperdiet eu tellus. Vivamus eu purus turpis. Morbi ut sollicitudin libero. In ultrices lobortis sodales. Integer id nisi et felis semper malesuada. Morbi ut efficitur dui. Aliquam porttitor turpis nec euismod laoreet. Suspendisse dapibus rutrum mauris, eget tincidunt lacus finibus elementum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula molestie, varius leo eu, condimentum turpis. Cras libero est, aliquet at nibh eu, ultricies efficitur sapien. Suspendisse gravida nec neque id dapibus. In massa augue, rhoncus in placerat vel, imperdiet eu tellus. Vivamus eu purus turpis. Morbi ut sollicitudin libero. In ultrices lobortis sodales. Integer id nisi et felis semper malesuada. Morbi ut efficitur dui. Aliquam porttitor turpis nec euismod laoreet. Suspendisse dapibus rutrum mauris, eget tincidunt lacus finibus elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula molestie, varius leo eu, condimentum turpis. Cras libero est, aliquet at nibh eu, ultricies efficitur sapien. Suspendisse gravida nec neque id dapibus. In massa augue, rhoncus in placerat vel, imperdiet eu tellus. Vivamus eu purus turpis. Morbi ut sollicitudin libero. In ultrices lobortis sodales. Integer id nisi et felis semper malesuada. Morbi ut efficitur dui. Aliquam porttitor turpis nec euismod laoreet. Suspendisse dapibus rutrum mauris, eget tincidunt lacus finibus elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula molestie, varius leo eu, condimentum turpis. Cras libero est, aliquet at nibh eu, ultricies efficitur sapien. Suspendisse gravida nec neque id dapibus. In massa augue, rhoncus in placerat vel, imperdiet eu tellus. Vivamus eu purus turpis. Morbi ut sollicitudin libero. In ultrices lobortis sodales. Integer id nisi et felis semper malesuada. Morbi ut efficitur dui. Aliquam porttitor turpis nec euismod laoreet. Suspendisse dapibus rutrum mauris, eget tincidunt lacus finibus elementum.</p>
      <div class="services-section">
        <div class="services-column">
          <div class="services-circle">
            <i class="fa fa-users"></i>
          </div>
          <h2 class="services-title">Our Team</h2>
          <div class="services-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula molestie, varius leo eu, condimentum turpis. Cras libero est, aliquet at nibh eu, ultricies efficitur sapien. Suspendisse gravida nec neque id dapibus. In massa augue, rhoncus in placerat vel, imperdiet eu tellus.</div>
        </div>
        <div class="services-column">
          <div class="services-circle">
            <i class="fa fa-handshake-o"></i>
          </div>
          <h2 class="services-title">Our Services</h2>
          <div class="services-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula molestie, varius leo eu, condimentum turpis. Cras libero est, aliquet at nibh eu, ultricies efficitur sapien. Suspendisse gravida nec neque id dapibus. In massa augue, rhoncus in placerat vel, imperdiet eu tellus.</div>
        </div>
        <div class="services-column">
          <div class="services-circle">
            <i class="fa fa-gamepad"></i>
          </div>
          <h2 class="services-title">Our Games</h2>
          <div class="services-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula molestie, varius leo eu, condimentum turpis. Cras libero est, aliquet at nibh eu, ultricies efficitur sapien. Suspendisse gravida nec neque id dapibus. In massa augue, rhoncus in placerat vel, imperdiet eu tellus.</div>
        </div>
      </div>
    </div>
    <div class="showoff-section">
      <div class="showoff-item music">
        
      </div>
      <div class="showoff-item music">
      </div>
      <div class="showoff-item music">
      </div>
      <div class="showoff-item music">
      </div>
      <div class="showoff-item music">
      </div>
    </div>
    <div class="footer">
      <div class="footer-section">
        <div class="utility-links">
          <div class="help column">
            <ul>
              <h3 class="center">Questions?</h3>
              <li><i class="fa fa-comment-o"></i><a href="#">Live Chat</a></li>
              <li><i class="fa fa-phone"></i><a href="#">1-234-567-8900</a></li>
              <li><i class="fa fa-envelope-o"></i><a href="#">Message Us</a></li>
            </ul>
          </div>
          <div class="about column">
            <ul>
              <h3 class="center">About Memory Forge</h3>
              <li><a href="#">Company Information</a></li>
              <li><a href="#">Our Staff</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </div>
          <div class="updates column">
            <ul>
              <h3 class="center">Recent Updates</h3>
              <li>
                <a href="#" class="blog-link">Blog Update 1</a>
                <span class="blog-timestamp">January 1, 2016</span>
              </li>
              <li>
                <a href="#" class="blog-link">Blog Update 2</a>
                <span class="blog-timestamp">February 1, 2016</span>
              </li>
              <li>
                <a href="#" class="blog-link">Blog Update 3</a>
                <span class="blog-timestamp">March 1, 2016</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-section">
        <div class="newsletter-social">
          <div id="newsletter" class="column">
            <h3>Subscribe for Email Updates</h3>
            <span class="newletter-info">Blog posts, company news, project updates, events, and more!</span>
            <form action="https://formspree.io/memoryforgemedia@gmail.com" method="POST">
              <input name="email" id="email" type="text" placeholder="Enter email address" />
              <input name="_gotcha" type="text" style="display:none;" />
              <input name="_subject" type="hidden" value="Email Signup" />
              <input name="submit-button" type="submit" value="Sign Up" />
            </form>
          </div>
          <div class="social-footer column">
            <a href="https://www.facebook.com/MemoryForgeMedia" target="_blank" class="social-footer-link">
              <div class="social-footer-item facebook"><span class="fb"></span><i class="fa fa-facebook"></i></div>
            </a>
            <a href="https://twitter.com/memory_forge" target="_blank" class="social-footer-link">
              <div class="social-footer-item twitter"><span class="twitter"></span><i class="fa fa-twitter"></i></div>
            </a>
            <a href="https://www.linkedin.com/company/memory-forge-media" target="_blank" class="social-footer-link">
              <div class="social-footer-item linkedin"><span class="linkedin"></span><i class="fa fa-linkedin"></i></div>
            </a>
            <a href="https://vimeo.com/MemoryForgeMedia" target="_blank" class="social-footer-link">
              <div class="social-footer-item vimeo"><span class="vimeo"></span><i class="fa fa-vimeo"></i></div>
            </a>
            <a href="https://soundcloud.com/MemoryForgeMedia" target="_blank" class="social-footer-link">
              <div class="social-footer-item soundcloud"><span class="soundcloud"></span><i class="fa fa-soundcloud"></i></div>
            </a>
            <a href="https://www.pinterest.com/memoryforge/" target="_blank" class="social-footer-link">
              <div class="social-footer-item pinterest"><span class="pinterest"></span><i class="fa fa-pinterest-p"></i></div>
            </a>
            <a href="https://www.instagram.com/memoryforgemedia/" target="_blank" class="social-footer-link">
              <div class="social-footer-item instagram">
                <span class="insta-wrap">
                  <div class="insta-foot">
                    <div class="circle grad-1"></div>
                    <div class="circle grad-2"></div>
                  </div>
                </span>
                <i class="fa fa-instagram"></i>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="footer-section">
        <div class="copyright">
          <div class="copy column">&copy; 2016 Memory Forge Media, All Rights Reserved.</div>
          <div class="copy-links column">
            <a href="http://memoryforgemedia.com/privacy-policy/">Privacy Policy</a> | <a href="http://memoryforgemedia.com/legal/">Terms + Conditions</a> | <a href="http://memoryforgemedia.com/sitemap/">Sitemap</a>
          </div>
        </div>
      </div>
    </div>
    <span class="overlay"></span>
  </div>
  
</div>
</div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tesscorinne/mfm-sitemap-page-QKPOEZ */
/*
Theme: Memory Forge Media
Description: Basic layout for the Memory Forge Media website
Author: Tess Miller
Tags: Responsive, Minimal
*/
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
/* Default HTML Tag Styles */
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  font-size: 1em;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Montserrat", sans-serif;
  width: 100%;
}

body {
  background-color: #333;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.875em;
}

h3 {
  font-size: 1.750em;
}

h4 {
  font-size: 1.625em;
}

h5 {
  font-size: 1.5em;
}

h6 {
  font-size: 1.375em;
}

i {
  font-family: fontawesome;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Browser Prefixes & Fallbacks */
/* Layout */
.site-wrap {
  overflow-x: hidden;
  width: 100%;
  min-height: 100%;
}

.page-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  position: relative;
}

.section {
  padding: 0 1em;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;
  /* NEW, Spec - Firefox, Chrome, Opera */
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1 1 auto;
  flex-wrap: wrap;
}

.column {
  margin: 0 auto;
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1 1 auto;
}

.center {
  text-align: center;
  margin: 0 auto;
}

/* Header */
.contact-header {
  display: flex;
  width: 100%;
  padding: 0 1em;
  height: 2em;
  line-height: 2em;
  justify-content: space-around;
  align-items: flex-start;
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.contact-info {
  flex: 1 1 auto;
}

.phone-number {
  float: left;
  margin-right: 1em;
}

.email-address {
  float: left;
}

.social-media {
  flex: 0 1 auto;
}

.social-item {
  float: left;
  width: 2em;
  height: 2em;
  box-sizing: border-box;
  text-align: center;
}

.social-item:hover .social-item-link:after {
  color: #fff;
}

.social-item-link:after {
  font-family: fontawesome;
}

.social-item-link:after, .social-item-link i {
  display: block;
  line-height: 2em;
  position: relative;
  color: #888;
  transition: color 0.3s;
}

.social-color {
  position: absolute;
  top: 0;
  content: "";
  height: 0px;
  width: 2em;
  transition: height 0.3s;
}

.social-color.facebook {
  background-color: #42599e;
}

.social-item.facebook .social-item-link:after {
  content: '\f09a';
}

.social-item.facebook:hover .social-color.facebook {
  height: 2em;
}

.social-color.twitter {
  background-color: #55acee;
}

.social-item.twitter .social-item-link:after {
  content: '\f099';
}

.social-item.twitter:hover .social-color.twitter {
  height: 2em;
}

.social-color.linkedin {
  background-color: #117eb9;
}

.social-item.linkedin .social-item-link:after {
  content: '\f0e1';
}

.social-item.linkedin:hover .social-color.linkedin {
  height: 2em;
}

.social-color.vimeo {
  background-color: #1ab7ea;
}

.social-item.vimeo .social-item-link:after {
  content: '\f27d';
}

.social-item.vimeo:hover .social-color.vimeo {
  height: 2em;
}

.social-color.soundcloud {
  background-color: #ff5600;
}

.social-item.soundcloud .social-item-link:after {
  content: '\f1be';
}

.social-item.soundcloud:hover .social-color.soundcloud {
  height: 2em;
}

.social-color.pinterest {
  background-color: #cb2027;
}

.social-item.pinterest .social-item-link:after {
  content: '\f231';
}

.social-item.pinterest:hover .social-color.pinterest {
  height: 2em;
}

.social-item.instagram .social-item-link:after {
  content: '\f16d';
}

.social-item.instagram:hover .insta {
  height: 2em;
}

.insta {
  height: 0px;
  width: 2em;
  display: block;
  overflow: hidden;
  position: relative;
  background: linear-gradient(341deg, #e1306c 0%, #c13584 59%, #833ab4 79%, #5851d8 90%, #405de6 100%);
  transition: height 0.3s;
}

.circle {
  position: absolute;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.grad-1 {
  background-color: #fd1d1d;
  box-shadow: 0 0 20px 10px #fd1d1d;
  bottom: -9px;
  left: 1px;
}

.grad-1::before {
  background-color: #f77737;
  box-shadow: 0 0 20px 7px #f77737;
  bottom: -10px;
  left: 1px;
  content: "";
  display: block;
}

.grad-1::after {
  background-color: #f56040;
  box-shadow: 0 0 20px 9px #f56040;
  bottom: -10px;
  left: 1px;
  content: "";
  display: block;
}

.grad-2 {
  background-color: #fcaf45;
  box-shadow: 0 0 20px 6px #fcaf45;
  bottom: -10px;
  left: 1px;
}

.grad-2::after {
  background-color: #ffdc80;
  box-shadow: 0 0 10px 5px #ffdc80;
  bottom: -9px;
  left: 5px;
  content: "";
  display: block;
}

.main-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  height: 4em;
  line-height: 4em;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  position: fixed;
  margin-top: 2em !important;
  width: 100%;
  z-index: 1;
  transition: background 200ms, margin-top 150ms ease-in-out;
}
.main-header--light {
  background: white;
  margin-top: 0px !important;
}

.logo-wrap {
  position: relative;
  flex: 1 1 10em;
  height: 4em;
  line-height: 4em;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] ~ label {
  float: left;
  display: inline-block;
  width: 4em;
  height: 4em;
}

label svg {
  top: 0;
  left: 0;
  width: 4em;
  height: 4em;
  padding: 0.25em;
}

#gear {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.5s;
}

input[type="checkbox"]:checked ~ label #gear {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}

.logo-text {
  position: relative;
  display: inline-block;
  float: left;
  margin: 0;
  font-size: calc(1em + (64 - 52) * (100vw - 520px) / (1920 - 520) );
}

.desktop-nav {
  display: inline-block;
  flex: 1 1 auto;
  align-self: flex-end;
  height: 4em;
  max-height: 4em;
  line-height: 4em;
}

.desktop-nav-list {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.desktop-nav-list li {
  position: relative;
  font-size: 1em;
  height: 100%;
  text-align: center;
  flex: 1 1 auto;
}

.desktop-nav-list li a {
  font-weight: bold;
  position: relative;
  display: block;
  min-height: 4em;
  height: 4em;
  max-height: 4em;
  padding: 0 1em;
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #a1a1a1 48%, #5c1010 2%);
  color: #212121;
  transform: skew(-10deg);
  -webkit-transform: skew(-10deg);
  -ms-transform: skew(-10deg);
  transition: background-position 0.5s ease, color 0.5s ease;
}

.desktop-nav-list li a:hover {
  background-position: 0% 100%;
  color: #d1d1d1;
  text-decoration: none;
}

/* Mobile Slideout Menu */
.sidebar {
  position: fixed;
  top: 64px;
  left: 0;
  margin-top: 30px;
  width: 100%;
  transition: margin-top 150ms ease-in-out;
}
.sidebar--scroll {
  margin-top: 0px !important;
}

.side-nav {
  position: relative;
  width: 100%;
}

.side-nav li a {
  position: relative;
  width: 100%;
  display: block;
  padding: 1em 1em 1em 2em;
  font-size: 1em;
  color: #eee;
  border-bottom: 1px solid #222;
}

.side-nav li a:before {
  font: 1.3em fontawesome;
  position: relative;
  display: inline-block;
  padding-right: 1.5em;
}

.side-nav li:nth-child(1) a:before {
  content: '\f015';
}

.side-nav li:nth-child(2) a:before {
  content: '\f05a';
}

.side-nav li:nth-child(3) a:before {
  content: '\f0c0';
}

.side-nav li:nth-child(4) a:before {
  content: '\f02c';
}

.side-nav li:nth-child(5) a:before {
  content: '\f02d';
}

.side-nav li:nth-child(6) a:before {
  content: '\f1ea';
}

.side-nav li:nth-child(7) a:before {
  content: '\f003';
}

.side-nav li a:hover {
  background: #444;
}

/* Content */
.page-content {
  background-color: #eee;
  position: relative;
  min-height: 100%;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transition: transform 0.5s;
}

.isOpen {
  transform: translate3d(250px, 0, 0);
  -webkit-transform: translate3d(250px, 0, 0);
  -ms-transform: translate3d(250px, 0, 0);
}

.hero-bg {
  width: 100%;
  height: 35em;
  background: url("http://memoryforgemedia.com/images/heroimage.png") no-repeat 0 0;
  background-size: cover;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.hero-content {
  background: rgba(255, 255, 255, 0);
  flex: 1 1 auto;
  color: #fff;
  font-size: calc( 1.8em + (64 - 32) * (100vw - 520px) / (1920 - 520) );
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
}

.hero-content h2 {
  margin: 1em 0 0 0;
}

.article.nohero {
  margin: 8em auto 4em auto;
}

.article {
  min-width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 0 4em;
  position: relative;
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1 1 auto;
  line-height: 30px;
}

.overlay {
  content: "";
  background: rgba(0, 0, 0, 0);
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  transition: background 0.5s, width 0.5s;
}
.overlay--shadow {
  z-index: 5;
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  width: 100%;
}

/* Footer */
.footer {
  text-align: center;
  width: 100%;
  background-color: #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
}

.footer-section {
  width: 100%;
  background-color: #ddd;
}

.footer ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 1em;
  line-height: 1.75em;
  font-weight: 400;
}

.footer li {
  text-align: left;
  margin: 0 10%;
}

.footer a:hover {
  color: #0677FF;
}

.utility-links {
  display: flex;
  flex-wrap: wrap;
  margin: 2em auto;
}

.utility-links h3 {
  margin: 0.8em;
}

.help {
  flex: 1 1 auto;
}

.help ul li {
  vertical-align: middle;
  position: relative;
  line-height: 3em;
  height: 3em;
}

.help ul li a {
  display: block;
  position: absolute;
  left: 3em;
  bottom: 0.3em;
}

.help ul li i:before {
  height: 2em;
  width: 2em;
  font-size: 2em;
}

.about {
  flex: 1 1 auto;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
}

.updates {
  flex: 1 1 auto;
}

.updates ul li:before {
  font-family: fontawesome;
  content: '\f101';
}

.blog-timestamp {
  display: block;
  font-family: Mallory, Sans-Serif;
  font-size: 10px;
  color: #888;
  box-sizing: border-box;
  margin: 0 0 5px 10px;
  line-height: 12px;
}

.newsletter-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

#newsletter {
  flex: 1 1 auto;
}

.newsletter-social .column h3 {
  margin: 0;
}

#newsletter form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 1em;
}

#newsletter input[type=text] {
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1 1 auto;
  padding: 1em 1.5em;
  margin: 1.5em;
  border: 1px solid #D9D6D6;
  background-color: #F2F2F2;
  border-radius: 0.4em;
  font-size: 0.8em;
  font-family: Helvetica, Arial, Sans-Serif;
  font-weight: 500;
}

#newsletter input[type=button], #newsletter input[type=submit], #newsletter input[type=reset] {
  background-color: #0677FF;
  border: 1px solid #D9D6D6;
  border-radius: 0.4em;
  color: #fff;
  padding: 1em 2em;
  text-decoration: none;
  margin: 1.5em auto;
  cursor: pointer;
  font-size: 0.8em;
  font-family: Helvetica, Arial, Sans-Serif;
  font-weight: 700;
  flex: 0 1 auto;
}

span.newsletter-info {
  font-size: 0.7em;
}

.social-footer {
  flex: 1 1 auto;
}

.social-footer-item {
  display: block;
  position: relative;
  float: left;
  font-size: 1em;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  color: #000;
  background-color: #fff;
  transition: color 0.3s;
}

.social-footer-link {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  margin-left: 0.5em;
}

.social-footer-link:hover i {
  display: inline-block;
  position: relative;
  color: #fff;
}

.social-footer-item span {
  display: inline-block;
  background-color: #fff;
  margin: 0;
  height: 0em;
  width: 0em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 0.2s;
}

.social-footer-link:hover span {
  top: 0;
  left: 0;
  height: 2.5em;
  width: 2.5em;
}

.social-footer-link:hover span.fb {
  background-color: #42599e;
}

.social-footer-link:hover span.twitter {
  background-color: #55acee;
}

.social-footer-link:hover span.linkedin {
  background-color: #117eb9;
}

.social-footer-link:hover span.vimeo {
  background-color: #1ab7ea;
}

.social-footer-link:hover span.soundcloud {
  background-color: #ff5600;
}

.social-footer-link:hover span.pinterest {
  background-color: #cb2027;
}

.insta-wrap {
  width: 0;
  height: 0;
  border-radius: 0;
  margin: 0;
  top: 2em;
  left: 2em;
  display: block;
  overflow: hidden;
  position: absolute;
  background: linear-gradient(341deg, #e1306c 0%, #c13584 59%, #833ab4 79%, #5851d8 90%, #405de6 100%);
  transition: all 0.2s;
}

.copyright {
  border-top: 1px solid #999;
  margin: 1em 0 0 0;
  padding: 0.8em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1 1 auto;
  text-align: center;
  position: relative;
}

.copy, .copy-links {
  flex: 1 1 auto;
  color: #000;
  font-size: 0.65em;
  font-family: Helvetica, Arial, Sans-Serif;
  font-weight: 700;
  text-align: center;
  margin: 0.8em auto;
  display: inline-block;
  overflow: hidden;
}

.copy-links a:hover {
  color: #0677FF;
}

/* @media Queries */
/* If having issues, try playing around with pixel resolutions */
/*** Tablet iOS Portrait ***/
/*** Tablet iOS Landscape ***/
/*** Tablet Android Portrait ***/
/*** Tablet Android Landscape ***/
/*** Mobile iOS Portrait***/
@media only screen and (min-width: 320px) and (max-width: 736px), only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait) {
  .desktop-nav, .desktop-nav-list {
    display: none;
    flex: none;
  }

  .logo-wrap {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    flex: none;
  }

  .logo-text, .label {
    display: inline-block;
    vertical-align: top;
    float: none;
  }

  .about {
    border: none;
  }

  .newsletter-info {
    font-size: 0.5em;
  }

  #newsletter form {
    flex-wrap: wrap;
  }

  #newsletter input[type=text], #newsletter input[type=submit] {
    margin: 0.5em;
  }

  .hero-bg {
    height: 25em;
  }

  .services-section {
    flex-wrap: wrap;
  }

  .article {
    padding: 0 1.5em;
  }

  .utility-links {
    margin-top: 0.5em;
  }

  /*** Page Specific Styles ***/
  /*** Staff Page ***/
  .staff-item {
    flex-wrap: wrap;
  }
}
/*** Mobile iOS Landscape ***/
@media only screen and (min-width: 320px) and (max-width: 736px), only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
  .desktop-nav, .desktop-nav-list, .contact-info {
    display: none;
  }

  .social-media {
    margin: 0 auto;
    text-align: center;
  }

  .social-item {
    float: none;
    display: inline-block;
  }
}
/*** Mobile Android Portrait ***/
/*** Mobile Android Landscape ***/
/*** Mobile Legacy Styles ***/
/*** Page Specific Styles ***/
/***Home Page***/
.services-section {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  margin: 2em auto;
}

.services-column {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 0 2em;
}

.services-circle {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: #444;
  color: #fff;
  font-size: 6em;
}

.services-circle i {
  display: inline-block;
  line-height: 2em;
}

.services-text {
  text-align: left;
}

.showoff-section {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  margin: 2em auto;
}

.showoff-item {
  flex: 1 1 auto;
}

/***Staff Page***/
.staff-section {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

.staff-item {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5em auto;
}

.staff-person {
  flex: 1 0 16em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: 0.5em;
}

.staff-circle {
  width: 8em;
  height: 8em;
  line-height: 11em;
  background: #444;
  border-radius: 50%;
}

.staff-circle i {
  font-size: 6em;
  color: #fff;
}

.staff-name {
  font-size: 1.6em;
  margin: 0.6em auto;
}

.staff-title {
  font-size: 1em;
  margin: 0 auto;
}

.staff-bio {
  text-align: left;
  flex: 2 1 auto;
}

/***Contact Page***/
#contact-form {
  width: 100%;
  min-width: 100%;
}


/*Downloaded from https://www.codeseek.co/tesscorinne/mfm-sitemap-page-QKPOEZ */
$(window).on('scroll', function(){
	var scroll = $(window).scrollTop();    
    if (scroll >= 32) {				
		$(".main-header").addClass("main-header--light");
    $(".sidebar").addClass("sidebar--scroll");
    } else if(scroll <= 32) {
		$(".main-header").removeClass("main-header--light");
    $(".sidebar").removeClass("sidebar--scroll");
	}
});
$(document).ready(function() {
  $('.hidden-box').on('click', function() {
    $('.page-content').toggleClass('isOpen');
  });
});

Comments