Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <title> Tribute to Steve Jobs </title>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
  <div class="container-fluid" id="#section-home">
    <nav class="navbar navbar-default navbar-fixed-top animated fadeInDown">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
          <a class="navbar-brand" href="#">Tribute to Steve Jobs</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


          <ul class="nav navbar-nav navbar-right">
            <li><a href="#section-home" class="menu-button">Home</a></li>
            <li><a href="#section-bio" class="menu-button">Bio</a></li>
            <li><a href="#section-gallery" class="menu-button">Gallery</a></li>
            <li><a href="#section-details" class="menu-button">Details</a></li>
            <li><a href="#section-awards" class="menu-button">Awards</a></li>
            <li><a href="#section-links" class="menu-button">More info</a></li>

          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12 animated fadeInLeft">
        <h1 class="text-center title-heading"><span class="name-span">Steve Jobs</span>
          <br /><p class="dates">1955 - 2011</p></h1>

      </div>
      <div class="col-md-6 col-sm-12 text-center animated fadeInRight">
        <img src="https://c1.staticflickr.com/7/6161/6226466061_355e25767f_b.jpg" class="img-responsive img-face" alt="Picture of Steve Jobs">
      </div>
    </div>

    <div class="row animated fadeInUp">
      <div class="col-xs-12 text-center">
        <blockquote class="quote">
          <p>Stay hungry. Stay foolish.</p>
          <footer>Steve Jobs</footer>
        </blockquote>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 section-title" id="section-bio">
        <h2>Bio</h2>


        <div class="col-xs-12">
          <p class="short-bio"><span class="strong-inline-text">Steven Paul "Steve" Jobs </span>(/ˈdʒɒbz/; February 24, 1955 – October 5, 2011) was an American information technology entrepreneur and inventor. He was the co-founder, chairman, and chief executive officer (CEO)
            of Apple Inc.; CEO and majority shareholder of Pixar Animation Studios;[3] a member of The Walt Disney Company's board of directors following its acquisition of Pixar; and founder, chairman, and CEO of NeXT Inc. Jobs is widely recognized as
            a pioneer of the microcomputer revolution of the 1970s and 1980s, along with Apple co-founder Steve Wozniak. Shortly after his death, Jobs's official biographer, Walter Isaacson, described him as a "creative entrepreneur whose passion for
            perfection and ferocious drive revolutionized six industries: personal computers, animated movies, music, phones, tablet computing, and digital publishing."</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 section-title" id="section-gallery">
        <h2>Gallery</h2>
        <div class="col-xs-12">
          <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="http://cdn.slashgear.com/wp-content/uploads/2014/11/2125_steve_jobs.jpg" alt="Chania">
              </div>

              <div class="item">
                <img src="http://brangento.com/wp-content/uploads/2015/09/SteveJobs1.jpg" alt="Chania">
              </div>

              <div class="item">
                <img src="https://applemagazine.com/wp-content/uploads/2014/01/Steve-Jobs.jpg" alt="Flower">
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="container">
  
    <div class="row">
      <div class="col-xs-12 section-title" id="section-details">
        <h2>Details</h2></div>
      <div class="col-xs-6 col-md-3 col-lg-2 detail-box">
        <p><span class="strong-inline-text">Born</span><br /> February 24, 1955 San Francisco, California, U.S.</p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-3 detail-box">
        <p><span class="strong-inline-text">Died</span><br /> October 5, 2011 (aged 56) Palo Alto, California, U.S.</p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-3 detail-box">
        <p><span class="strong-inline-text">Nationality</span><br /> American
        </p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-3 detail-box">
        <p><span class="strong-inline-text">Occupation</span><br /> Co-founder, Chairman, and CEO of Apple Inc. Primary investor and CEO of Pixar Founder and CEO of NeXT</p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-3 detail-box">
        <p><span class="strong-inline-text">Known for</span><br /> Pioneer of the personal computer revolution with Steve Wozniak</p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-3 detail-box">
        <p><span class="strong-inline-text">Board member of</span><br /> The Walt Disney Company[1] Apple Inc.</p>
      </div>
    </div>
    
    <div class="row animated fadeInRight">
      <div class="col-xs-12 section-title" id="section-awards">
        <h2>Honors and Awards</h2></div>
      <div class="col-xs-12">
        <ul class="award-list">
          <li> <span class="strong-inline-text">2013:</span> Posthumously inducted as a Disney Legend;</li>
          <li> <span class="strong-inline-text">2012:</span> Grammy Trustees Award, an award for those who have influenced the music industry in areas unrelated to performance;</li>
          <li> <span class="strong-inline-text">2007:</span> Jobs was inducted into the California Hall of Fame, located at The California Museum for History, Women and the Arts;</li>
          <li> <span class="strong-inline-text">2007:</span> Jobs was named the most powerful person in business by Fortune magazine;</li>
          <li> <span class="strong-inline-text">1989:</span> '’Entrepreneur of the Decade'’ by Inc. magazine;</li>
          <li> <span class="strong-inline-text">1987:</span> Jefferson Award for Public Service;</li>
          <li> <span class="strong-inline-text">1985:</span> National Medal of Technology (with Steve Wozniak).</li>
        </ul>
      </div>
    </div>

    <div class="row animated fadeInLeft text-center">
      <div class="col-xs-12 section-title" id="section-links">
        <h2>More</h2></div>
      <div class="col-xs-12">
        <a href="https://en.wikipedia.org/wiki/Steve_Jobs" target="_blank">Read more about Steve Jobs at wikipedia</a></div>
      <div class="col-xs-12"><a href="https://www.apple.com/stevejobs/" target="_blank">Remembering Steve at Apple.com</a></div>
      <div class="col-xs-12"><a href="https://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537/ref=tmm_hrd_swatch_0?_encoding=UTF8&qid=&sr=" target="_blank">Wonderful Steve Jobs Biography by Walter Isaacson</a></div>
    </div>

    
    <div class="row">
      <div class="col-xs-12 col-md-6 text-center">
        <img src="http://www.dasding.de/-/id=1113336/property=thumbnail/klzbod/Steve%20Jobs.jpg" alt="Steve Jobs photo" class="img-circle steve-circle img-responsive">
      </div>
      <div class="col-xs-12 col-md-6">
        <p class="last-quote">“the people who are crazy enough to think they can change the world are the ones who do.”</p>
      </div>
    </div>
  </div>
  
  <div class="container-fluid">
    <footer class="site-footer">Written and coded by <span class="strong-inline-text">absnt</span></footer>
  </div>

</body>
              
            
!

CSS

              
                body {
  font-family: Open Sans, sans-serif;
  color: #777; 
  margin-top: 100px;
}

.title-heading {
  letter-spacing: 3px;
  padding-top: 150px;

}
.margin {
  margin-top: 100px;
}

.img-face {
  padding-top: 20px;
  width: 450px;
  margin: 0 auto;

}

.name-span {
  font-size: 64px;

}

.quote {
  margin-top: 90px;
  font-size: 200%;

}

.dates {
  margin-top: 20px;
  font-size: 28px;
  letter-spacing: 1px;

}

.short-bio {
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0px 10% 10px 10%;
  text-align: justify;

}

.strong-inline-text {
  font-weight: bold;

}

.detail-box {
  height: 120px;
  margin: 5px 5px;
  background-color: #eee;
  width: 48%;

  
}

.detail-box p {
  padding: 10px;

}

.section-title {
  font-weight: bold;
  font-size: 32px;
  margin-top: 40px;

}

.section-title h2 { 
  text-align: center;
  margin-bottom: 40px;

}

.site-footer {
  background-color: #eee;
  text-align: center;
  line-height: 60px;
  height: 60px;
  margin-top: 60px;

}

.award-list {
  font-size: 18px;

}

.steve-circle {
  margin-top: 64px;
  border: 3px dotted #aaa;
  padding: 10px;

}

.last-quote {
  margin-top: 200px;
  font-size: 28px;

}


@media only screen and (max-width: 768px) {
  .title-heading {
    padding-top: 20px;

  }
  .detail-box {
    width: 95%!important;
    margin: 5 auto;

  }
  .last-quote {
    position: relative;
    top: -100px!important;
    padding-right: 20px;
    padding-left: 20px;

  }
  
}

@media only screen and (max-width: 992px) {
  .title-heading {
    padding-top: 20px;


}
  
              
            
!

JS

              
                $(".menu-button").click(function() {
    var href = $(this).attr('href'); 
    scrollAmount = 0;
    if (href == "#section-home")
      scrollAmount = 0;
    else
      scrollAmount = $(href).offset().top - 50;
    
    $('html, body').animate({
        scrollTop: scrollAmount
    }, 1000);
});
              
            
!
999px

Console