Skip to content

Instantly share code, notes, and snippets.

@remylenoir

remylenoir/django-reinhardt-tribute-page.markdown

Last active June 19, 2017 20:23
Show Gist options
  • Save remylenoir/d664614a4741c7fd963e57d631c03e83 to your computer and use it in GitHub Desktop.
Save remylenoir/d664614a4741c7fd963e57d631c03e83 to your computer and use it in GitHub Desktop.
Download ZIP
Django Reinhardt Tribute Page
Raw
django-reinhardt-tribute-page.markdown
Raw
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 -->
Raw
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%"
});
}
});
Raw
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>
Raw
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;
}
}
Raw
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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment