Homepage Code Cleanup

In this example below you will see how to do a Homepage Code Cleanup 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 ©
  • HTML
  • CSS
  • JavaScript
    <body>
<div class="site-wrap">
  <div class="header">
    <div class="contact-header row">
      <div class="contact-info column">
        <div class="contact-phone">
          1-234-567-8900
        </div>
        <div class="contact-email">
          info@memoryforgemedia.com
        </div>
      </div>
      <div class="social-media column">
        <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 row">
      <div class="logo-wrap column">
        <input type="checkbox" checked="checked" id="toggle" />
        <label for="toggle">
          <?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="top-nav column">
        <ul>
          <li><a href="http://memoryforgemedia.com">Home</a></li>
          <li><a href="http://memoryforgemedia.com/about/">About</a></li>
          <li><a href="http://memoryforgemedia.com/staff/">Staff</a></li>
          <li><a href="http://memoryforgemedia.com/services/">Services</a></li>
          <li><a href="http://memoryforgemedia.com/portfolio/">Portfolio</a></li>
          <li><a href="http://memoryforgemedia.com/blog/">Blog</a></li>
          <li><a href="http://memoryforgemedia.com/contact/">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="page-wrap">
    <div class="sidebar">
      <ul class ="side-nav">
        <li><a href="http://memoryforgemedia.com">Home</a></li>
        <li><a href="http://memoryforgemedia.com/about/">About Us</a></li>
        <li><a href="http://memoryforgemedia.com/staff/">Our Staff</a></li>
        <li><a href="http://memoryforgemedia.com/services/">Services</a></li>
        <li><a href="http://memoryforgemedia.com/portfolio/">Portfolio</a></li>
        <li><a href="http://memoryforgemedia.com/blog/">Blog</a></li>
        <li><a href="http://memoryforgemedia.com/contact/">Contact</a></li>
      </ul>
    </div>
    <div class="main">
      <div class="content section">
        <div class="hero section">
          <div class="hero-bg">
            <h2 class="hero-content">Creating Content To Leave Lasting Impressions</h2>
          </div>
        </div>
        <div class="article section">
          <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>
        <div class="services section">
          <div class="services column">
            <div class="services-circle"><i class="fa fa-users"></i></div>
            <h2>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>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>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="footer section">
        <div class="footer-nav row">
          <div class="contact-footer column">
            <h4>Questions?</h4>
              <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>
          </div>
          <div class="foot-nav column">
            <h4>About Memory Forge</h4>
            <ul>
              <li><a href="http://memoryforgemedia.com">Home</a></li>
              <li><a href="http://memoryforgemedia.com/about/">About Us</a></li>
              <li><a href="http://memoryforgemedia.com/staff/">Our Staff</a></li>
              <li><a href="http://memoryforgemedia.com/services/">Services</a></li>
              <li><a href="http://memoryforgemedia.com/portfolio/">Portfolio</a></li>
              <li><a href="http://memoryforgemedia.com/blog/">Blog</a></li>
              <li><a href="http://memoryforgemedia.com/contact/">Contact</a></li>
              <li><a href="http://memoryforgemedia.com/careers/">Careers</a></li>
            </ul>
          </div>
          <div class="updates-footer column">
            <h4>Recent Updates</h4>
            <ul>
              <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 class="newsletter-social row">
          <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 class="copyright row">
          <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>
      <span class="overlay"></span>
    </div>
  </div>
</div>
</body>

/*Downloaded from https://www.codeseek.co/tesscorinne/homepage-code-cleanup-amxqZm */
    /*
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");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/*** Variables ***/
$offwhite: #eee;
$black: #000;
$dark: #333;
$lt-dark: #555;
$white: rgba(255,255,255,1);
$opaque: rgba(255,255,255,0.4);
$navlink: linear-gradient(to bottom, #a1a1a1 48%, #5c1010 2%);
$lt-blue: #0677ff;
$fb-color: #42599e;
$fb-icon: '\f09a';
$twitter-color: #55acee;
$twitter-icon: '\f099';
$linkedin-color: #117eb9;
$linkedin-icon: '\f0e1';
$vimeo-color: #1ab7ea;
$vimeo-icon: '\f27d';
$soundcloud-color: #ff5600;
$soundcloud-icon: '\f1be';
$pinterest-color: #cb2027;
$pinterest-icon: '\f231';
$instagrad: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
$instagram-icon: '\f16d';

/*** Mixins ***/


@mixin clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
}}

@mixin transition($args) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

@mixin animation ($delay, $duration, $animation) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-fill-mode: forwards;
    
    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-fill-mode: forwards;

    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-fill-mode: forwards; 
}

@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }
    @keyframes #{$animation-name} {
        @content;
    }
}

@mixin calc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}
@mixin flexbox {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}
%flexbox { @include flexbox; }

@mixin flex-direction($value: row) {
	@if $value == row-reverse {
		-webkit-box-direction: reverse;
		-webkit-box-orient: horizontal;
	} @else if $value == column {
		-webkit-box-direction: normal;
		-webkit-box-orient: vertical;
	} @else if $value == column-reverse {
		-webkit-box-direction: reverse;
		-webkit-box-orient: vertical;
	} @else {
		-webkit-box-direction: normal;
		-webkit-box-orient: horizontal;
	}
	-webkit-flex-direction: $value;
	-moz-flex-direction: $value;
	-ms-flex-direction: $value;
	flex-direction: $value;
}

@mixin flex-wrap($value: nowrap) {
	// No Webkit Box fallback.
	-webkit-flex-wrap: $value;
	-moz-flex-wrap: $value;
	@if $value == nowrap {
		-ms-flex-wrap: none;
	} @else { 
		-ms-flex-wrap: $value; 
	}
	flex-wrap: $value;
}

@mixin flex-flow($values: (row nowrap)) {
	// No Webkit Box fallback.
	-webkit-flex-flow: $values;
	-moz-flex-flow: $values;
	-ms-flex-flow: $values;
	flex-flow: $values;
}

@mixin order($int: 0) {
	-webkit-box-ordinal-group: $int + 1;
	-webkit-order: $int;
	-moz-order: $int;
	-ms-flex-order: $int;
	order: $int;
}

@mixin flex-grow($int: 0) {
	-webkit-box-flex: $int;
	-webkit-flex-grow: $int;
	-moz-flex-grow: $int;
	-ms-flex-positive: $int;
	flex-grow: $int;
}

@mixin flex-shrink($int: 1) {
	-webkit-flex-shrink: $int;
	-moz-flex-shrink: $int;
	-ms-flex-negative: $int;
	flex-shrink: $int;
}

@mixin flex-basis($value: auto) {
	-webkit-flex-basis: $value;
	-moz-flex-basis: $value;
	-ms-flex-preferred-size: $value;
	flex-basis: $value;
}

@mixin flex($fg: 1, $fs: null, $fb: null) {
	// Set a variable to be used by box-flex properties
	$fg-boxflex: $fg;
	// Box-Flex only supports a flex-grow value so let's grab the
	// first item in the list and just return that.
	@if type-of($fg) == 'list' {
		$fg-boxflex: nth($fg, 1);
	}

	-webkit-box-flex: $fg-boxflex;
	-webkit-flex: $fg $fs $fb;
	-moz-box-flex: $fg-boxflex;
	-moz-flex: $fg $fs $fb;
	-ms-flex: $fg $fs $fb;
	flex: $fg $fs $fb;
}

@mixin justify-content($value: flex-start) {
	@if $value == flex-start {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
	} @else if $value == flex-end {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
	} @else if $value == space-between {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
	} @else if $value == space-around {
		-ms-flex-pack: distribute;		
	} @else {
		-webkit-box-pack: $value;
		-ms-flex-pack: $value;
	}
	-webkit-justify-content: $value;
	-moz-justify-content: $value;
	justify-content: $value;
}

@mixin align-items($value: stretch) {
	@if $value == flex-start {
		-webkit-box-align: start;
		-ms-flex-align: start;
	} @else if $value == flex-end {
		-webkit-box-align: end;
		-ms-flex-align: end;
	} @else {
		-webkit-box-align: $value;
		-ms-flex-align: $value;
	}
	-webkit-align-items: $value;
	-moz-align-items: $value;
	align-items: $value;
}

@mixin align-self($value: auto) {
	// No Webkit Box Fallback.
	-webkit-align-self: $value;
	-moz-align-self: $value;
	@if $value == flex-start {
		-ms-flex-item-align: start;
	} @else if $value == flex-end {
		-ms-flex-item-align: end;
	} @else {
		-ms-flex-item-align: $value;
	}
	align-self: $value;
}

@mixin align-content($value: center) {
	// No Webkit Box Fallback.
	-webkit-align-content: $value;
	-moz-align-content: $value;
	@if $value == flex-start {
		-ms-flex-line-pack: start;
	} @else if $value == flex-end {
		-ms-flex-line-pack: end;
	} @else {
		-ms-flex-line-pack: $value;
	}
	align-content: $value;
}

/*** Default HTML Styles ***/
*,*::before,*::after{
  box-sizing: border-box;
}
html{
  font-size: 62.5%;
  font-family: "Montserrat", sans-serif;
}
html,body{
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body{
  background-color: #333;
  @include font-size(2);
}
a{
  color: inherit;
  text-decoration: none;
}
h1,h2,h3,h4,h5,h6{font-weight:bold;margin:1rem auto;}
h1{@include font-size(4)}
h2{@include font-size(3.75)}
h3{@include font-size(3.5)}
h4{@include font-size(3.25)}
h5{@include font-size(3)}
h6{@include font-size(3)}
i{
  font-family: fontawesome;
}
li{
}
ul{
  margin:0;
  padding:0;
  list-style: none;
}

/*** Browser Prefixes & Fallbacks ***/
/** Chrome **/

/** Firefox **/

/** Safari **/

/** IE **/


/*** Layout ***/
/** Page Setup **/
.site-wrap{
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}
.page-wrap{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  position: relative;
}
.section{
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  justify-content: space-around;
  align-items: center;
  position: relative;
}
.row{
  position: relative;
  width: 100%;
  display: flex;
  flex: 1 1 auto;
}
.column{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/** Header **/
.header{}
.contact-header{}
.contact-info{}
.contact-phone{}
.contact-email{}
.social-media{}
.social-item{}
.social-item-link{}
.main-header{}

/** Sidebar **/

/** Footer **/
.footer.section{
  
}

/** Social Media Items **/
.social-color{
  position: absolute;
  top: 0;
  content: "";
  height: 0px;
  width: 2em;
  transition: height 0.3s;
}
.social-color.facebook{background-color: $fb-color;}
.social-item.facebook .social-item-link:after{content: $fb-icon;}
.social-item.facebook:hover .social-color.facebook{height: 2em;}
.social-color.twitter{background-color: $twitter-color;}
.social-item.twitter .social-item-link:after{content: $twitter-icon;}
.social-item.twitter:hover .social-color.twitter{height: 2em;}
.social-color.linkedin{background-color: $linkedin-color;}
.social-item.linkedin .social-item-link:after{content: $linkedin-icon;}
.social-item.linkedin:hover .social-color.linkedin{height: 2em;}
.social-color.vimeo{background-color: $vimeo-color;}
.social-item.vimeo .social-item-link:after{content: $vimeo-icon;}
.social-item.vimeo:hover .social-color.vimeo{height: 2em;}
.social-color.soundcloud{background-color: $soundcloud-color;}
.social-item.soundcloud .social-item-link:after{content: $soundcloud-icon;}
.social-item.soundcloud:hover .social-color.soundcloud{height: 2em;}
.social-color.pinterest{background-color: $pinterest-color;}
.social-item.pinterest .social-item-link:after{content: $pinterest-icon;}
.social-item.pinterest:hover .social-color.pinterest{height: 2em;}
.social-item.instagram .social-item-link:after{content: $instagram-icon;}
.social-item.instagram:hover .insta{height: 2em;}
.facebook{}
.twitter{}
.linkedin{}
.vimeo{}
.soundcloud{}
.pinterest{}
.instagram{}
.insta{}
.circle{}
.grad-1{}
.grad-1::before{}
.grad-2::after{}
.grad-2{}
.grad-2::after{}

/*** @media Queries ***/
/** iOS **/

/** Android **/


/*** Page Specific Styles ***/
/** Home **/
.hero.section{
  
}
.services.section{
  
}
.portfolio.section{
  
}
/** About **/

/** Staff **/

/** Services **/

/** Portfolio **/

/** Blog **/

/** Contact **/



/*Downloaded from https://www.codeseek.co/tesscorinne/homepage-code-cleanup-amxqZm */
    

Comments