Steve Jobs Profile_Free Code Camp Tutorial

index.html

<div class="container-fluid">
  <h1 class="text-center" style="font-size:400%">Steve Jobs</h1>
  <h3 class="text-center"><i>The man in the machine.</i></h3>
  <div>
    <img class="animated pulse img-rounded img-responsive" src="http://www.heyuguys.com/images/2015/11/steve-jobs-the-man-in-the-machin.jpg" style="height:600px;" alt="Steve jobs sitting"></img>
    <p class="text-center">A still from the trailer of Steve Jobs: Man in the Machine</p>
  </div>
  <div>
    <h2>Synopsis</h2>
    <p class="synopsis">In his signature black turtleneck and blue jeans, shrouded in shadows below a milky apple, Steve Jobs' image was ubiquitous. But who was the man on the stage? What accounted for the grief of so many across the world when he died? From Oscar-winning
      director Alex Gibney, 'Steve Jobs: The Man In The Machine' is a critical examination of Jobs who was at once revered as an iconoclastic genius and a barbed-tongued tyrant. A candid look at Jobs' legacy featuring interviews with a handful of those
      close to him at different stages in his life, the film is evocative and nuanced in capturing the essence of the Apple legend and his values which shape the culture of Silicon Valley to this day.</p>
    <h2>Credited Cast</h2>
    <ul class="synopsis">
      <li>Bob Belleville</li>
      <li>Chrisann Brennan</li>
      <li>Nolan Bushnell</li>
      <li>Jason Chen</li>
      <li>Nick Denton</li>
    </ul>
  </div>
  <div>
    <blockquote>"Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderful, that's what matters to me."</blockquote>
    <p class="author"><b>—Steve Jobs</b></p>
  </div>
  <div class="links">
    <a href="https://www.facebook.com/SteveJobsManInTheMachine/" target="_blank"><button type="button" class="button btn btn-primary btn-lg linkbtn"><span>Facebook</span></button></a>
    <a href="http://www.imdb.com/title/tt4425064/" target="_blank"><button type="button" class="button btn btn-success btn-lg linkbtn"><span>IMDB</span></button></a>
    <a href="https://en.wikipedia.org/wiki/Steve_Jobs:_The_Man_in_the_Machine" target="_blank"><button type="button" class="button btn btn-info btn-lg linkbtn"><span>Wikipedia</span></button></a>
  </div>
</div>

style.css

h1 {
  font-family: Lobster;
}

h2 {
  font-family: Impact;
  text-indent: 8.5%;
}

img {
  display: block;
  margin: 0 auto;
}

.synopsis {
  text-indent: 3%;
  text-align: justify;
  padding: 0px 100px 0px 110px;
  font-family: Arial Black;
}

ul {
  list-style-position: inside;
}

blockquote {
  font-family: Impact;
  text-align: center;
  font-size: 200%;
  padding: 50px 100px 0px 110px;
}

.author {
  text-indent: 4%;
  text-align: justify;
  padding: 0px 100px 0px 110px;
  font-family: Arial;
}

.links{
    padding: 0px 100px 0px 100px;
  text-align:center;
}

.linkbtn{
  margin:0px 20px 0 20px;
  padding:8px 100px;
}

.button {
  transition: all 0.5s;
  cursor: pointer;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

xgjwgx.markdown

xgjWGx

A Pen by Leon on CodePen.

License.