remylenoir/django-reinhardt-tribute-page.markdown

## django-reinhardt-tribute-page.markdown

      
    Raw
  

              django-reinhardt-tribute-page.markdown
            
          
    Django Reinhardt Tribute Page

FreeCodeCamp's challenge: Build a Tribute Page
A Pen by Rémy Lenoir on CodePen.
License.

  
## index.html
<div class="container">

  <div class="row" id="block1">
    <div class="col-md-5 col-lg-6 animated" id="block1__photo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/django-reinhardt-duotone-principal.jpg" alt="Django Reinhardt - William P. Gottlieb" />
    </div>
    <!-- /.col-md-5 col-lg-6 #block1__photo -->

    <div class="col-md-7 col-lg-6 animated" id="block1__elements">

      <div class="row" style="display:none;">
        <div class="col-md-12 text-right">
          <i class="fa fa-volume-up" aria-hidden="true" id="sound-icon"></i>
        </div>
        <!-- /.col-md-12 text-right -->
      </div>
      <!-- /.row -->

      <div class="row" id="block1__elements__text">
        <div class="col-lg-3 col-xl-2">

        </div>
        <!-- /.col-lg-3 col-xl-2 -->

        <div class="col-lg-9 col-xl-10">
          <h1>Django<br>Reinhardt</h1>
          <h2>The <mark>most astonishing</mark> guitar&nbsp;player ever.</h2>
          <p>Jean "Django" Reinhardt was a Belgian-born French jazz guitarist and composer of Romani ethnicity, regarded as one of the greatest musicians of the twentieth century, having written nearly 100 songs.</p>
          <p>He was the first and most significant jazz talent to&nbsp;emerge from Europe.</p>
        </div>
        <!-- /.col-lg-9 col-xl-10 -->
      </div>
      <!-- /.row #block1__elements__text -->

    </div>
    <!-- /.col-md-7 col-lg-6 #block1__elements -->
  </div>
  <!-- /row #block1 -->

  <div class="row" id="block2">

    <div class="push-lg-8 col-md-5 col-lg-4 animated" id="block2__photo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/django-bw-1.jpg" alt="Django Reinhardt" />
    </div>
    <!-- /.push-lg-8 col-md-5 col-lg-4 text-center #block2__photo -->

   <div class="pull-lg-4 col-md-7 col-lg-8 animated" id="block2__text">
      <h2>The 3 fingered-guitar player</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/line-green.png" alt="Graphic separator" id="block2__text__line" />
      <p>Despite having two of his fingers disabled from a fire, he overcame the&nbsp;handicap and went on to forge an entirely new style of jazz guitar technique (sometimes called 'hot' jazz guitar), which has since become a living musical tradition within French Gypsy culture. </p>

      <p>Benny Goodman asked him to travel with his band, which he never did, but he did tour the U.S. with Duke Ellington's band in 1946. He died suddenly of a stroke at age 43.</p>

      <p>Many guitar players and other musicians have expressed admiration for Reinhardt or have cited him as a major influence. Jeff Beck described Reinhardt as "by far the most astonishing guitar player ever" and "quite superhuman".</p>
    </div>
    <!-- /.pull-lg-4 col-md-7 col-lg-8 #block2__text -->

  </div>
  <!-- /row #block2 -->

  <div class="row" id="block3">
    <div class="col-md-5 col-lg-4 text-center animated" id="block3__photo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/django-bw-2.jpg" alt="Django Reinhardt" />
    </div>
    <!-- /.col-md-5 col-lg-4 text-center #block3__photo -->

    <div class="col-md-7 col-xl-8 animated" id="block3__text">
      <h2>World War II</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/line-blue.png" id="block3__text__line" alt="Graphic separator" />
      <p>Because Reinhardt and his family were Gypsies, and he was also a jazz musician, he tried to escape from occupied France with his family. After his first attempt, he survived when a secretly jazz-loving German, Luftwaffe officer Dietrich Schulz-Köhn,
        let him go back to France after he was captured.</p>

      <p>During the occupation of France, Reinhardt continued playing and composing. One of his songs, "Nuages," became an unofficial anthem in Paris to signify hope for liberation. One day at a concert, the popularity of the song was such that the crowd
        made him replay the song three times in a row.</p>
    </div>
    <!-- /.col-md-7 col-xl-8 #block3__text -->
  </div>
  <!-- /row #block3 -->

  <div class="row animated" id="button-more">
    <div class="text-center" id="button-more__block">
    <a class="btn btn-lg" role="button" href="https://en.wikipedia.org/wiki/Django_Reinhardt" title="Read more about Django" rel="external nofollow" target="_blank">Read more about Django</a>
    </div>
  </div>
  <!-- /.row animated #button-more -->

</div>
<!-- /.container -->

<footer id="footer-by">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 source text-left">
        <p>A Pen by Rémy Lenoir - Source: <a href="https://en.wikipedia.org/wiki/Django_Reinhardt" rel="external nofollow" class="footer-by__footer__link">Wikipédia</a></p>
      </div>
      <!-- /.col-sm-6 text-center -->
      <div class="col-sm-6 text-right" id="footer-by__footer__social">
        <a href="https://www.behance.net/remylenoir" rel="external" target="_blank"><i class="fa fa-behance" aria-hidden="true"></i></a>
        <a href="https://twitter.com/remy_lenoir" rel="external" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        <a href="https://www.instagram.com/upaboveyou/" rel="external" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
      </div>
      <!-- /.col-sm-6 text-right #footer-by__footer__social -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</footer>
<!-- /#footer-by -->

## script.js
$(document).ready(function() {
	//if ($(window).width() <= 576) {
	if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
		// Code to run if mobile
	} else {
		// Hide the blocks on page load to make them appear after
		$("#block1__photo, #block1__elements, #block1__elements, #block2__text, #block2__photo, #block3__text, #block3__photo, #button-more").css("opacity", "0");

		// #block1 animation
		$("#block1__photo").waypoint(function() {
			$("#block1__photo").addClass("zoomIn").css("opacity", "1");
		}, {
			offset: "70%"
		});
		$("#block1__elements").waypoint(function() {
			$("#block1__elements").addClass("zoomIn").css("opacity", "1");
		}, {
			offset: "70%"
		});

		// #block2 animation
		$("#block2__text").waypoint(function() {
			$("#block2__text").addClass("fadeInUp");
		}, {
			offset: "60%"
		});
		$("#block2__photo").waypoint(function() {
			$("#block2__photo").addClass("fadeInUp");
		}, {
			offset: "60%"
		});

		// #block3 animation
		$("#block3__text").waypoint(function() {
			$("#block3__text").addClass("fadeInUp");
		}, {
			offset: "60%"
		});
		$("#block3__photo").waypoint(function() {
			$("#block3__photo").addClass("fadeInUp");
		}, {
			offset: "60%"
		});

		$("#button-more").waypoint(function()  {
			$("#button-more").addClass("fadeInUp");
		},   {
			offset: "100%"
		});

		$("#footer-by").waypoint(function()  {
			$("#footer-by").addClass("fadeInUp");
		},   {
			offset: "100%"
		});
	}

});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

## style.scss
/*------------------------------------*\
    $INDEX - Search with $ sign
\*------------------------------------*/


/**
 * VARIABLES......................
 * BASIC PROPERTIES...............
 * ANIMATION PROPERTIES...........
 * BLOCKS PROPERTIES..............
 * BLOCK2 - BLOCK3................
 * BUTTON.........................
 * STICKY FOOTER..................
 * RESPONSIVE.....................
 */


/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/

$primary-color: #1f216b;

/* Dark blue */

$secondary-color: #80dd81;

/* Light green */

$footer-height: 60px;

/*------------------------------------*\
    $BASIC PROPERTIES
\*------------------------------------*/

html, body, .container {
	height: 100%;
	font-family: 'Heebo', Arial, sans-serif;
	font-weight: 400;
}
body {
	background: #ffffff url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/background-border.jpg');
	font-size: 18px;
	margin-top: 60px;
}
h1 {
	font-weight: 700;
	margin-bottom: 0;
}
h2 {
	font-weight: 500;
	font-size: 1.6em;
	margin: 0.7em 0;
}
mark {
	padding: 0 .1em;
	background-color: $secondary-color;
}
::selection {
	background: $primary-color;
	color: #ffffff;
}
::-moz-selection {
	background: $primary-color;
	color: #ffffff;
}

/*------------------------------------*\
    $ANIMATION PROPERTIES
\*------------------------------------*/

#block1__photo {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
#block2__text, #block3__photo {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	-ms-animation-delay: 0.3s;
	-o-animation-delay: 0.3s;
	animation-delay: 0.3s;
}
#block1__elements {
	-webkit-animation-duration: 1.5s;
	-moz-animation-duration: 1.5;
	-ms-animation-duration: 1.5;
	-o-animation-duration: 1.5;
	animation-duration: 1.5;
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	-ms-animation-delay: 0.8s;
	-o-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
#block2__photo, #block3__text {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	-ms-animation-delay: 0.6s;
	-o-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
#button-more {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

/*------------------------------------*\
    $BLOCKS PROPERTIES
\*------------------------------------*/

#block1 {
	margin-bottom: 2.3em;
}
#block2, #block3 {
	margin-bottom: 5em;
}
#block1 img, #block2 img, #block3 img {
	max-width: 100%;
}

/*------------------------------------*\
    $BLOCK1
\*------------------------------------*/

#block1__photo {
	z-index: 5;
}
#block1__elements {
	background-color: #ededed;
	z-index: 0;
	position: relative;
	top: -60px;
}
#block1__elements__text {
	padding-top: 80px;
}

/*------------------------------------*\
    $BLOCK2 - $BLOCK3
\*------------------------------------*/

#block2__photo, #block3__photo {
	text-align: center;
	margin-bottom: 1.5em;
}
#block3__photo {
	margin-bottom: 0;
}
#block2__photo img, #block3__photo img {
	max-width: 80%;
	box-shadow: 15px 15px $primary-color;
}
#block3__photo img {
	box-shadow: -15px -15px $secondary-color;
}
#block2__text__line, #block3__text__line {
	margin-bottom: 1.4em;
}

/*------------------------------------*\
    $BUTTON
\*------------------------------------*/

#button-more {
	margin: 0;
}
#button-more__block {
	height: 220px;
	margin: 0 auto;
}
#button-more a.btn {
	color: #000000;
	background-color: rgba(255, 255, 255, 0);
	border: 3px solid #000000;
	border-radius: 0;
	font-size: 1.1em;
}
#button-more a.btn:hover {
	box-shadow: 10px 10px $primary-color;
}

/*------------------------------------*\
    $STICKY FOOTER
\*------------------------------------*/

#footer-by {
	position: fixed;
	z-index: 10;
	bottom: 0;
	width: 100%;
	font-weight: 400;
	height: $footer-height;
	line-height: $footer-height;
	background-color: #edecec;
}
#footer-by .source {
	text-align: center;
}
#footer-by p {
	font-size: 0.78em;
	line-height: 4.3em;
}
#footer-by__footer__social {
	display: none;
}
#footer-by__footer__social i {
	font-size: 22px;
	margin: 0 0.1em;
	line-height: 2.8em;
}
#footer-by__footer__social a {
	color: #000000;
}
#footer-by__footer__social a:hover {
	color: $primary-color;
}
a.footer-by__footer__link {
	color: #000000;
	text-decoration: underline;
}
a.footer-by__footer__link:hover {
	color: $primary-color;
}

/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/

// Small devices (landscape phones, 576px and up) col-sm-x
@media (min-width: 576px) {
	h1 {
		font-size: 2.8em;
	}
	h2 {
		font-size: 1.7em;
	}
	#footer-by__footer__social {
		display: block;
	}
	#footer-by p {
		font-size: 0.78em;
		line-height: 4.3em;
	}
	#button-more a.btn {
		font-size: 1.3em;
	}
}
// Medium devices (tablets, 768px and up) col-md-x
@media(min-width:768px) {
	h1 {
		font-size: 3em;
	}
	#block1 {
		height: 500px;
		margin-bottom: 5em;
	}
	#block1__elements {
		top: 0;
	}
	#block1__elements__text {
		padding: 20px 20px 0 20px;
	}
	#block3__photo img {
		max-width: 85%;
	}
	#footer-by p {
		font-size: 0.9em;
		line-height: 4em;
	}
}
// Large devices (desktops, 992px and up) col-lg-x
@media (min-width: 992px) {
	h1 {
		font-size: 3.2em;
	}
	h2 {
		font-size: 2em;
	}
	#block1 {
		height: 640px;
	}
	#block1__elements {
		max-width: 630px;
		height: 580px;
		position: absolute;
		right: 0;
		top: 60px;
		margin-bottom: 0;
	}
	#block1__elements__text {
		padding-top: 40px;
	}
	#block2__text, #block3__text {
		padding-left: 50px;
	}
	#block2__text__line {
		position: absolute;
		top: 40px;
		right: 0;
	}
	#block2__photo img {
		box-shadow: 20px 15px $primary-color;
	}
	#block3__text__line {
		position: absolute;
		top: 40px;
		left: -40px;
	}
	#block3__photo img {
		max-width: 65%;
		box-shadow: -20px -15px $secondary-color;
	}
	#button-more a.btn {
		font-size: 1.7em;
	}
}
// Extra large devices (large desktops, 1200px and up) col-xl-x
@media (min-width: 1200px) {
	h1 {
		font-size: 4.4em;
	}
	h2 {
		font-size: 2.4em;
	}
	#block1 {
		height: 750px;
	}
	#block1__elements {
		max-width: 720px;
		height: 690px;
	}
	#block1__elements__text .col-xl-10 {
		padding-left: 50px;
	}
	#block2__text__line {
		top: 52px;
		right: 50px
	}
	#block3__text__line {
		top: 50px;
		left: -12px;
	}
	#block2__photo {
		text-align: left;
	}
	#block2__photo img, #block3__photo img {
		max-width: 100%;
		box-shadow: -30px -20px $secondary-color;
	}
	#block2__photo img {
		max-width: 87%;
		box-shadow: 30px 20px $primary-color;
	}
	#block2__text, #block3__text {
		padding-right: 50px;
		padding-left: 80px;
	}
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
	<div class="container">

	<div class="row" id="block1">
	<div class="col-md-5 col-lg-6 animated" id="block1__photo">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/django-reinhardt-duotone-principal.jpg" alt="Django Reinhardt - William P. Gottlieb" />
	</div>
	<!-- /.col-md-5 col-lg-6 #block1__photo -->

	<div class="col-md-7 col-lg-6 animated" id="block1__elements">

	<div class="row" style="display:none;">
	<div class="col-md-12 text-right">
	<i class="fa fa-volume-up" aria-hidden="true" id="sound-icon"></i>
	</div>
	<!-- /.col-md-12 text-right -->
	</div>
	<!-- /.row -->

	<div class="row" id="block1__elements__text">
	<div class="col-lg-3 col-xl-2">

	</div>
	<!-- /.col-lg-3 col-xl-2 -->

	<div class="col-lg-9 col-xl-10">
	<h1>Django<br>Reinhardt</h1>
	<h2>The <mark>most astonishing</mark> guitar player ever.</h2>
	<p>Jean "Django" Reinhardt was a Belgian-born French jazz guitarist and composer of Romani ethnicity, regarded as one of the greatest musicians of the twentieth century, having written nearly 100 songs.</p>
	<p>He was the first and most significant jazz talent to emerge from Europe.</p>
	</div>
	<!-- /.col-lg-9 col-xl-10 -->
	</div>
	<!-- /.row #block1__elements__text -->

	</div>
	<!-- /.col-md-7 col-lg-6 #block1__elements -->
	</div>
	<!-- /row #block1 -->

	<div class="row" id="block2">

	<div class="push-lg-8 col-md-5 col-lg-4 animated" id="block2__photo">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/django-bw-1.jpg" alt="Django Reinhardt" />
	</div>
	<!-- /.push-lg-8 col-md-5 col-lg-4 text-center #block2__photo -->

	<div class="pull-lg-4 col-md-7 col-lg-8 animated" id="block2__text">
	<h2>The 3 fingered-guitar player</h2>
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/line-green.png" alt="Graphic separator" id="block2__text__line" />
	<p>Despite having two of his fingers disabled from a fire, he overcame the handicap and went on to forge an entirely new style of jazz guitar technique (sometimes called 'hot' jazz guitar), which has since become a living musical tradition within French Gypsy culture. </p>

	<p>Benny Goodman asked him to travel with his band, which he never did, but he did tour the U.S. with Duke Ellington's band in 1946. He died suddenly of a stroke at age 43.</p>

	<p>Many guitar players and other musicians have expressed admiration for Reinhardt or have cited him as a major influence. Jeff Beck described Reinhardt as "by far the most astonishing guitar player ever" and "quite superhuman".</p>
	</div>
	<!-- /.pull-lg-4 col-md-7 col-lg-8 #block2__text -->

	</div>
	<!-- /row #block2 -->

	<div class="row" id="block3">
	<div class="col-md-5 col-lg-4 text-center animated" id="block3__photo">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/django-bw-2.jpg" alt="Django Reinhardt" />
	</div>
	<!-- /.col-md-5 col-lg-4 text-center #block3__photo -->

	<div class="col-md-7 col-xl-8 animated" id="block3__text">
	<h2>World War II</h2>
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/line-blue.png" id="block3__text__line" alt="Graphic separator" />
	<p>Because Reinhardt and his family were Gypsies, and he was also a jazz musician, he tried to escape from occupied France with his family. After his first attempt, he survived when a secretly jazz-loving German, Luftwaffe officer Dietrich Schulz-Köhn,
	let him go back to France after he was captured.</p>

	<p>During the occupation of France, Reinhardt continued playing and composing. One of his songs, "Nuages," became an unofficial anthem in Paris to signify hope for liberation. One day at a concert, the popularity of the song was such that the crowd
	made him replay the song three times in a row.</p>
	</div>
	<!-- /.col-md-7 col-xl-8 #block3__text -->
	</div>
	<!-- /row #block3 -->

	<div class="row animated" id="button-more">
	<div class="text-center" id="button-more__block">
	<a class="btn btn-lg" role="button" href="https://en.wikipedia.org/wiki/Django_Reinhardt" title="Read more about Django" rel="external nofollow" target="_blank">Read more about Django</a>
	</div>
	</div>
	<!-- /.row animated #button-more -->

	</div>
	<!-- /.container -->

	<footer id="footer-by">
	<div class="container-fluid">
	<div class="row">
	<div class="col-sm-6 source text-left">
	<p>A Pen by Rémy Lenoir - Source: <a href="https://en.wikipedia.org/wiki/Django_Reinhardt" rel="external nofollow" class="footer-by__footer__link">Wikipédia</a></p>
	</div>
	<!-- /.col-sm-6 text-center -->
	<div class="col-sm-6 text-right" id="footer-by__footer__social">
	<a href="https://www.behance.net/remylenoir" rel="external" target="_blank"><i class="fa fa-behance" aria-hidden="true"></i></a>
	<a href="https://twitter.com/remy_lenoir" rel="external" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
	<a href="https://www.instagram.com/upaboveyou/" rel="external" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
	</div>
	<!-- /.col-sm-6 text-right #footer-by__footer__social -->
	</div>
	<!-- /.row -->
	</div>
	<!-- /.container -->
	</footer>
	<!-- /#footer-by -->
	$(document).ready(function() {
	//if ($(window).width() <= 576) {
	if (/Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry\|IEMobile\|Opera Mini/i.test(navigator.userAgent)) {
	// Code to run if mobile
	} else {
	// Hide the blocks on page load to make them appear after
	$("#block1__photo, #block1__elements, #block1__elements, #block2__text, #block2__photo, #block3__text, #block3__photo, #button-more").css("opacity", "0");

	// #block1 animation
	$("#block1__photo").waypoint(function() {
	$("#block1__photo").addClass("zoomIn").css("opacity", "1");
	}, {
	offset: "70%"
	});
	$("#block1__elements").waypoint(function() {
	$("#block1__elements").addClass("zoomIn").css("opacity", "1");
	}, {
	offset: "70%"
	});

	// #block2 animation
	$("#block2__text").waypoint(function() {
	$("#block2__text").addClass("fadeInUp");
	}, {
	offset: "60%"
	});
	$("#block2__photo").waypoint(function() {
	$("#block2__photo").addClass("fadeInUp");
	}, {
	offset: "60%"
	});

	// #block3 animation
	$("#block3__text").waypoint(function() {
	$("#block3__text").addClass("fadeInUp");
	}, {
	offset: "60%"
	});
	$("#block3__photo").waypoint(function() {
	$("#block3__photo").addClass("fadeInUp");
	}, {
	offset: "60%"
	});

	$("#button-more").waypoint(function() {
	$("#button-more").addClass("fadeInUp");
	}, {
	offset: "100%"
	});

	$("#footer-by").waypoint(function() {
	$("#footer-by").addClass("fadeInUp");
	}, {
	offset: "100%"
	});
	}

	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
	/------------------------------------\
	$INDEX - Search with $ sign
	\------------------------------------/


	/**
	* VARIABLES......................
	* BASIC PROPERTIES...............
	* ANIMATION PROPERTIES...........
	* BLOCKS PROPERTIES..............
	* BLOCK2 - BLOCK3................
	* BUTTON.........................
	* STICKY FOOTER..................
	* RESPONSIVE.....................
	*/


	/------------------------------------\
	$VARIABLES
	\------------------------------------/

	$primary-color: #1f216b;

	/* Dark blue */

	$secondary-color: #80dd81;

	/* Light green */

	$footer-height: 60px;

	/------------------------------------\
	$BASIC PROPERTIES
	\------------------------------------/

	html, body, .container {
	height: 100%;
	font-family: 'Heebo', Arial, sans-serif;
	font-weight: 400;
	}
	body {
	background: #ffffff url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1220116/background-border.jpg');
	font-size: 18px;
	margin-top: 60px;
	}
	h1 {
	font-weight: 700;
	margin-bottom: 0;
	}
	h2 {
	font-weight: 500;
	font-size: 1.6em;
	margin: 0.7em 0;
	}
	mark {
	padding: 0 .1em;
	background-color: $secondary-color;
	}
	::selection {
	background: $primary-color;
	color: #ffffff;
	}
	::-moz-selection {
	background: $primary-color;
	color: #ffffff;
	}

	/------------------------------------\
	$ANIMATION PROPERTIES
	\------------------------------------/

	#block1__photo {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
	}
	#block2__text, #block3__photo {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	-ms-animation-delay: 0.3s;
	-o-animation-delay: 0.3s;
	animation-delay: 0.3s;
	}
	#block1__elements {
	-webkit-animation-duration: 1.5s;
	-moz-animation-duration: 1.5;
	-ms-animation-duration: 1.5;
	-o-animation-duration: 1.5;
	animation-duration: 1.5;
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	-ms-animation-delay: 0.8s;
	-o-animation-delay: 0.8s;
	animation-delay: 0.8s;
	}
	#block2__photo, #block3__text {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	-ms-animation-delay: 0.6s;
	-o-animation-delay: 0.6s;
	animation-delay: 0.6s;
	}
	#button-more {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
	}

	/------------------------------------\
	$BLOCKS PROPERTIES
	\------------------------------------/

	#block1 {
	margin-bottom: 2.3em;
	}
	#block2, #block3 {
	margin-bottom: 5em;
	}
	#block1 img, #block2 img, #block3 img {
	max-width: 100%;
	}

	/------------------------------------\
	$BLOCK1
	\------------------------------------/

	#block1__photo {
	z-index: 5;
	}
	#block1__elements {
	background-color: #ededed;
	z-index: 0;
	position: relative;
	top: -60px;
	}
	#block1__elements__text {
	padding-top: 80px;
	}

	/------------------------------------\
	$BLOCK2 - $BLOCK3
	\------------------------------------/

	#block2__photo, #block3__photo {
	text-align: center;
	margin-bottom: 1.5em;
	}
	#block3__photo {
	margin-bottom: 0;
	}
	#block2__photo img, #block3__photo img {
	max-width: 80%;
	box-shadow: 15px 15px $primary-color;
	}
	#block3__photo img {
	box-shadow: -15px -15px $secondary-color;
	}
	#block2__text__line, #block3__text__line {
	margin-bottom: 1.4em;
	}

	/------------------------------------\
	$BUTTON
	\------------------------------------/

	#button-more {
	margin: 0;
	}
	#button-more__block {
	height: 220px;
	margin: 0 auto;
	}
	#button-more a.btn {
	color: #000000;
	background-color: rgba(255, 255, 255, 0);
	border: 3px solid #000000;
	border-radius: 0;
	font-size: 1.1em;
	}
	#button-more a.btn:hover {
	box-shadow: 10px 10px $primary-color;
	}

	/------------------------------------\
	$STICKY FOOTER
	\------------------------------------/

	#footer-by {
	position: fixed;
	z-index: 10;
	bottom: 0;
	width: 100%;
	font-weight: 400;
	height: $footer-height;
	line-height: $footer-height;
	background-color: #edecec;
	}
	#footer-by .source {
	text-align: center;
	}
	#footer-by p {
	font-size: 0.78em;
	line-height: 4.3em;
	}
	#footer-by__footer__social {
	display: none;
	}
	#footer-by__footer__social i {
	font-size: 22px;
	margin: 0 0.1em;
	line-height: 2.8em;
	}
	#footer-by__footer__social a {
	color: #000000;
	}
	#footer-by__footer__social a:hover {
	color: $primary-color;
	}
	a.footer-by__footer__link {
	color: #000000;
	text-decoration: underline;
	}
	a.footer-by__footer__link:hover {
	color: $primary-color;
	}

	/------------------------------------\
	$RESPONSIVE
	\------------------------------------/

	// Small devices (landscape phones, 576px and up) col-sm-x
	@media (min-width: 576px) {
	h1 {
	font-size: 2.8em;
	}
	h2 {
	font-size: 1.7em;
	}
	#footer-by__footer__social {
	display: block;
	}
	#footer-by p {
	font-size: 0.78em;
	line-height: 4.3em;
	}
	#button-more a.btn {
	font-size: 1.3em;
	}
	}
	// Medium devices (tablets, 768px and up) col-md-x
	@media(min-width:768px) {
	h1 {
	font-size: 3em;
	}
	#block1 {
	height: 500px;
	margin-bottom: 5em;
	}
	#block1__elements {
	top: 0;
	}
	#block1__elements__text {
	padding: 20px 20px 0 20px;
	}
	#block3__photo img {
	max-width: 85%;
	}
	#footer-by p {
	font-size: 0.9em;
	line-height: 4em;
	}
	}
	// Large devices (desktops, 992px and up) col-lg-x
	@media (min-width: 992px) {
	h1 {
	font-size: 3.2em;
	}
	h2 {
	font-size: 2em;
	}
	#block1 {
	height: 640px;
	}
	#block1__elements {
	max-width: 630px;
	height: 580px;
	position: absolute;
	right: 0;
	top: 60px;
	margin-bottom: 0;
	}
	#block1__elements__text {
	padding-top: 40px;
	}
	#block2__text, #block3__text {
	padding-left: 50px;
	}
	#block2__text__line {
	position: absolute;
	top: 40px;
	right: 0;
	}
	#block2__photo img {
	box-shadow: 20px 15px $primary-color;
	}
	#block3__text__line {
	position: absolute;
	top: 40px;
	left: -40px;
	}
	#block3__photo img {
	max-width: 65%;
	box-shadow: -20px -15px $secondary-color;
	}
	#button-more a.btn {
	font-size: 1.7em;
	}
	}
	// Extra large devices (large desktops, 1200px and up) col-xl-x
	@media (min-width: 1200px) {
	h1 {
	font-size: 4.4em;
	}
	h2 {
	font-size: 2.4em;
	}
	#block1 {
	height: 750px;
	}
	#block1__elements {
	max-width: 720px;
	height: 690px;
	}
	#block1__elements__text .col-xl-10 {
	padding-left: 50px;
	}
	#block2__text__line {
	top: 52px;
	right: 50px
	}
	#block3__text__line {
	top: 50px;
	left: -12px;
	}
	#block2__photo {
	text-align: left;
	}
	#block2__photo img, #block3__photo img {
	max-width: 100%;
	box-shadow: -30px -20px $secondary-color;
	}
	#block2__photo img {
	max-width: 87%;
	box-shadow: 30px 20px $primary-color;
	}
	#block2__text, #block3__text {
	padding-right: 50px;
	padding-left: 80px;
	}
	}
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />