Dilla Tribute

Dilla Tribute.markdown

Dilla Tribute

A Pen by Luke Camelo on CodePen.

License.

index.html

<div class="container-fluid">
  <div class="black-background">
    <br>
    <h1 style="color:pink" class="text-center">J Dilla</h1>

    <h2 style="color:pink" class="text-center"><i>Master of Hip-Hop's Domain</i></h2>
    <br>
    <img class="image-centering" src="http://hallyrecords.ru/wp-content/uploads/2014/02/stussy-hand-picked-j-dilla-favorites-1-600x250.jpg" alt="J Dilla picking out records" </img>
    <br>
    <div class="container-fluid">
      <div id="row1" class="row">
        <div class="col-sm-6">
          <div style="background-color:#1a1a1a" class="well">
            <h3 id="h3" class="text-center">Reasons you should care about Dilla</h3>
            <ul>
              <li>He's the greatest producer to ever live, for starters.</li>
              <li>If you've ever listened to Hip-Hop that came out between 1996-2006 you've probably heard one of his beats.</li>
              <li>He's your favorite producer's favorite producer.</li>
              <li>The album 'Donuts'</li>
              <br>
          </div>
        </div>
        <div class="col-sm-6">
          <div style="background-color:#1a1a1a" class="well">
            <h3 id="h4" class="text-center">You've convinced me. I want to kiss him.</h4>
            <p4>Great. Go listen to <a href="https://www.youtube.com/watch?v=5nO7IA1DeeI&list=PL9dk_xtWpAkKXxzv_TfLWmlJj6G3quWQ2">Donuts.</a> You can find his Wikipedia page <a href="https://en.wikipedia.org/wiki/J_Dilla">here.</a></p4>
            <blockquote style="background-color:#2a2a2a">"Don't sell yourself to fall in love, with those things you do"
              <footer><cite style="color:pink">J Dilla</cite></footer>
            </blockquote>
          </div>
        </div>
      </div>
    </div>
      <h2 class="text-center">February 7th, 1974 - February 10th, 2006</h2>
      <h3 class="text-center">RIP</h3><br>
  </div>
    <footer id="footer" class="text-center">Written and coded by Luke Camelo, 2016</footer>
</div>

script.js

$(document).ready(function() {
  $("#row1").css("color", "#e6e6e6");
  $("#h3").css("color", "pink");
  $("#h4").css("color", "pink");
  $("#footer").css("margin-bottom", "25px");
});

scripts

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

style.css

<style> .img-thumbnail {
  background-color: gray;
}

body {
  background-color: #1a1a1a;
  color: pink;
}

.img-thumbnail {
  text-align: center;
}

.image-centering {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.vertical-centering {
  margin-top: auto;
  margin-bottom: auto;
}

.black-background {
  background-color: black;
  margin: 20px 100px 20px 100px;
  border-radius: 5px;
}

.white-background {
  background-color: white;
  margin: 10px 560px 10px 10px;
}

.well-margin {
  margin-left: auto;
  margin-right: auto;
}

.col-centered {
  float: none;
  margin: 0 auto;
}

.row-margin {
  margin-bottom: 50px;
}

</style>

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />