FCC Tribute Page - Bill Evans

fcc-tribute-page-bill-evans.markdown

FCC Tribute Page - Bill Evans

FreeCodeCamp tribute page project. This page honors jazz pianist Bill Evans. It was challenging to get the look and functionality I wanted across all devices, especially iOS devices.

A Pen by Tristan Mason on CodePen.

License.

index.html

<div id="bg"></div>
<div class="container-fluid gradient-overlay" id="top-div">
    <h1 class="text-center name" id="fade-h1">Bill Evans</h1>
  <div class="text-center" id="green-stripe"><i class="fa fa-caret-down fa-3x" id="scroll-arrow"></i></div>
</div>
  <section class="container center-block" id="main-content">
    <div class="jumbotron text-center">
      <h1>Bill Evans</h1>
      <h3>Legendary Cool Jazz Pianist</h3>
      <div class="embed-responsive embed-responsive-16by9 center-block" id="youtube-video">
              <iframe width="853" height="480" class="embed-responsive-item"  src="https://www.youtube.com/embed/uco5FNbjqv0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="quote-container text-center">
      <h4 class="text-primary"><em><q>To me, Bill Evans has a special aura, a mystique, an unknown dimension that makes musicians and layman alike become involved in his music.</q><br><small>-Marian McPartland</small></em></h4>
      </div>
    </div>
    <div class="row marginTop40">
      <div class="col-md-12">
        <h2>Contributions to Jazz</h2>
        <p>Bill Evans was perhaps the most influential jazz pianist of his time. His classical training paved the way for the development of his "thirdstream" style, which was a fusion of elements from both classical and jazz music. His delicate, lyrical melodies and rich, extended harmonies set new standards and continue to influence generations of players. Evans was also a pioneer in new interaction between instruments in the jazz combo; the simultaneous, interwoven improvisation within the Evans/LaFaro/Motian trio was unprecedented and changed the entire ideal of communication and improvisation within a small combo. As a composer, Evans contributed several tunes that have become jazz standards.</p>
      </div>
      <div class="col-md-6 col-sm-12">
        <h2>Major Events in Evans' Life</h2>
        <ul>
          <li>1929 - William John "Bill" Evans born in Plainfield, NJ</li>
          <li>1950 - Graduated from Southeastern Louisiana University and began a four-year term in the Army</li>
          <li>1955 - Moved to New York City and worked with George Russell</li>
          <li>1958 - Joined the Miles Davis sextet, later recording on <em>Kind of Blue</em></li>
          <li>1959 - Started a trio with bassist Scott LaFaro and drummer Paul Motian</li>
          <li>1961 - Recorded <em>Sunday at the Village Vanguard</em>; LaFaro's tragic death in a car accident</li>
          <li>1963 - Recorded the groundbreaking overdubbed solo album <em>Conversations with Myself</em></li>
          <li>1966 - Met bassist Eddie Gómez</li>
          <li>1968 - Recorded <em>Bill Evans at the Montreux Jazz Festival</em></li>
        </ul>
  <h2>More Information</h2>
        <p>You can learn more about Bill Evans by visiting one of the links below.</p>
          <a class="btn btn-block btn-primary" role="button" href="https://www.allaboutjazz.com/bill-evans-1929-1980-bill-evans-by-aaj-staff.php">Bill Evans at AllAboutJazz</a>
          <a class="btn btn-block btn-primary" role="button" href="https://en.wikipedia.org/wiki/Bill_Evans">Bill Evans at Wikipedia</a>
          <a class="btn btn-block btn-primary" role="button" href="https://www.amazon.com/s?ie=UTF8&field-keywords=bill%20evans">Bill Evans albums at Amazon</a>
      </div>
      <div class="col-md-6 col-sm-12">
        <figure class="figure">
        <img src="http://res.cloudinary.com/tristanmason/image/upload/v1484198279/Bill_Evans_bcnyfo.jpg" class="img-responsive figure-img marginTop40">
        <figcaption class="figure-caption marginTop10">Bill Evans performing at the Montreux Jazz Festival in 1978.</figcaption>
        </figure>
      </div>
    </div>
  </section>
<footer class="text-center center-block">
  <p>Written and designed by <a href="http://tristanmason.com">Tristan Mason</a>.</p>
</footer>

script.js

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (iOS) {
  
  $('body,html').addClass('iOSfix');

  $('#scroll-arrow').click(function() {
    $('#top-div, #main-content, footer').toggleClass('translate-scroll');
  });
  
} else {
  
  $('#scroll-arrow').click(function() {
  $('html,body').animate({
    scrollTop: $('#green-stripe').offset().top
    }, 1500);
});

$(window).scroll(function(i){
  var scrollVar = $(window).scrollTop();
  $('#fade-h1').css({
        'opacity': ((100 - scrollVar*0.2) / 100)
    });
  $('#scroll-arrow').css({
        'opacity': ((100 - scrollVar*0.2) / 100)
    });
  });
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');

body,html {
  height: 100vh;
}

.iOSfix {
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
}

.translate-scroll {
  transform: translate3d(0,-92vh,0);
  -webkit-transition: transform 2s;
  transition: transform 2s;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
  font-weight:400;
}

h2 {
  margin-bottom:0.6em;
}

h4 {
  font-size:2rem;
  line-height:3rem;
}

.jumbotron > h1 {
  margin-top:0;
}

q, 
blockquote {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

p {
  font-size:16px;
}

ul li {
  margin:0.6em 0;
  font-size:16px;
  text-indent: -3.2em;
  padding-left: 3.2em;
}

.quote-container {
  padding: 0 10vw;
}

.marginTop10 {
  margin-top:10px;
}

.marginTop40 {
  margin-top:40px;
}

#green-stripe {
  width:100%;
  height:40px;
  background-color:#45A56D;
  margin:0;
  color:#FFF;
  position:absolute;
  bottom:0;
  left:0;
  z-index:99;
}

#scroll-arrow{
  position:relative;
  z-index:99;
  cursor: pointer;
}

h1.name {
  font-family: 'Roboto', sans-serif;
  font-weight:900;
  font-size:4.5rem;
  text-transform:uppercase;
  color:#fafafa;
  line-height:4rem;
  letter-spacing:3.5vw;
  position:relative;
  top:60vh;
  z-index:99;
}

#bg {
    background: url(http://res.cloudinary.com/tristanmason/image/upload/v1484109127/bill-evans-09_aofk1c.jpg) no-repeat center center fixed;
  background-attachment:fixed;
  background-size:cover;
  -webkit-background-size:cover;
  height:100%;
  width:100%;
  position:fixed;
  z-index:-1;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
}

#top-div {
  height:100vh;
  position:relative;
}

.gradient-overlay:after {
    content:"";
    width: 100vw;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjEwMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjAuNDUiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,color-stop(0, rgba(0, 0, 0, 0.7)),color-stop(0.45, rgba(0, 0, 0, 0)));
    /* Android 2.3 */
    background-image: -webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0) 45%);
    /* IE10+ */
    background-image: linear-gradient(to top,rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0) 45%);
    background-image: -ms-linear-gradient(bottom,rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0) 45%);
}
  
#youtube-video {
  max-width:853px;
  max-height:480px;
  margin:30px auto;
}

#main-content {
  background:#FFF;
    padding-bottom:60px;
}

.btn {
  margin:10px 0;
}

footer {
  height:100px;
  background-color:#45A56D;
  color:#ddd;
}

footer p {
    position:relative;
    top:40%;
}

footer a {
    color:#DDD;
    text-decoration:underline;
}

@media(min-width:768px){
  
  h1.name{
    font-size:8rem;
    line-height:7rem;
    
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />