julzmon

<div class="gray-darker" style="width:200px;height:200px"></div>
<div class="gray-dark" style="width:200px;height:200px"></div>
<div class="gray" style="width:200px;height:200px"></div>
<div class="gray-light" style="width:200px;height:200px"></div>
<div class="gray-lighter" style="width:200px;height:200px"></div>
<div class="gray-lightest" style="width:200px;height:200px"></div>

julzmon

<script>
var videoElement = document.getElementById("videoElement");

document.addEventListener("visibilitychange", function() {
if (document.hidden) {     
$("#videoElement").animate({volume: 0}, 1000, "linear", function() {
videoElement.pause();
});
} else {
videoElement.play();  

julzmon

<video autoplay controls id="videoElement">
	<source src="rar.mp4">
	<source src="rar.webm">
</video>

<script>
var videoElement = document.getElementById("videoElement");
document.addEventListener("visibilitychange", function() {
if (document.hidden) {     
videoElement.pause();  

julzmon

.body-overlay{
  position: relative;
  z-index: 99;
  height: 100%;
  transition: opacity 0.5s;
}
.body-overlay::after{
    position: absolute;
    top: 0;
    right: 0;

julzmon

.text p {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.image img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);

julzmon

General

  1. Site uses a cache buster for expiring .js, .css, and images
  2. JavaScript and CSS is minified and concatenated into logical groupings
  3. Images have been optimized by ImageOptim (http://imageoptim.com/)

Markup

  1. Code does not contain inline JavaScript event listeners

julzmon

@media (min-width: 768px) {
    .container-small {
        width: 300px;
    }
    .container-large {
        width: 970px;
    }
}
@media (min-width: 992px) {
    .container-small {

julzmon

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

julzmon

.creenshots {
	height: 400px;
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	img {
		height: 100%;
		display: inline;
	}

julzmon

.class:before {
    content: "";
    width: 9999px;
    background: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
}