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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <body>
  <!--  start navbar -->
  <nav class="navbar navbar-light bg-faded navbar-fixed-top">
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <a class="navbar-brand" href="#" id="home"><span class="hidden-xs-down">Tribute Page |</span> Tupac Shakur</a>

    <div class="collapse navbar-toggleable-md" id="main-navbar">
      <ul class="nav navbar-nav float-lg-right">
        <li class="nav-item">
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#bio">Biography</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#gallery">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#achievements">Achievements</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#more">More info</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--   end navbar -->
  
<!--   start hero section -->
  <section class="hero-section">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-12 text-xs-center hero-left animated bounceInLeft">
          <h1><span class="name display-2">Tupac Shakur</span><br /><span class="date text-muted">1971-1996</span>
          </h1>
        </div>
        <div class="col-md-6 col-sm-12 animated bounceInRight">
          <img src="http://orig09.deviantart.net/c642/f/2011/201/c/2/artwork_9_by_00makaveli00-d412dbg.jpg" alt="Tupac Shakur photo" class="hero-img img-fluid" />
        </div>
      </div>
    </div>
  </section>
<!-- end hero section -->
  
<!--  start bio section -->
  <section class="bio-section" id="bio">
    <div class="container">
      <div class="row">
        <h2 class="text-uppercase text-xs-center">Biography</h2>
        <p>Tupac Amaru Shakur (born Lesane Parish Crooks; June 16, 1971 – September 13, 1996), also known by his stage names 2Pac and Makaveli, was an American rapper, record producer, and actor. As of 2007, Shakur has sold over 75 million records worldwide. His double disc albums All Eyez on Me and his Greatest Hits are among the best selling albums in the United States with All Eyez on Me selling 5,000,000 copies and Greatest Hits selling 5,100,000 copies. He has been listed and ranked as one of the greatest artists of all time by many magazines, including Rolling Stone which ranked him 86th on its list of The 100 Greatest Artists of All Time. He is consistently ranked as one of the greatest and most influential rappers of all time.</p>
        
        <p>Shakur began his career as a roadie, backup dancer, and MC for the alternative hip hop group Digital Underground, eventually branching off as a solo artist. The themes of most of Shakur's songs revolved around the violence and hardship in inner cities, racism, and other social problems. Both of his parents and several other people in his family were members of the Black Panther Party, whose ideals were reflected in his songs. During the latter part of his career, Shakur was a vocal participant during the East Coast–West Coast hip hop rivalry, becoming involved in conflicts with other rappers, producers, and record-label staff members, most notably The Notorious B.I.G. and the label Bad Boy Records.</p>
      </div>
    </div>
  </section>
<!-- end bio section   -->
  
<!-- start gallery section -->
  <section class="gallery-section" id="gallery">
    <div class="container">
      <div class="row">
        <h2 class="text-uppercase text-xs-center">Gallery</h2>
        <div id="my-pics" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#my-pics" data-slide-to="0" class="active"></li>
            <li data-target="#my-pics" data-slide-to="1"></li>
            <li data-target="#my-pics" data-slide-to="2"></li>
          </ol>

           <!-- Content -->
          <div class="carousel-inner" role="listbox">
            <!-- Slide 1 -->
            <div class="carousel-item active">
              <img src="https://i.ytimg.com/vi/LWGbW9EC6uI/maxresdefault.jpg" alt="A photo of Tupac">
</div>
          <!-- Slide 2 -->
          <div class="carousel-item">
            <img src="http://daily.jstor.org/wp-content/uploads/2015/02/Tupac-Shakur_1050x700BW-1050x700.jpg" alt="A photo of Tupac">
          </div>

          <!-- Slide 3 -->
          <div class="carousel-item">
            <img src="http://drwallpaper.com/wp-content/uploads/2016/02/tupac_shakur_wallpaper_hd_background_download_desktop3.jpg" alt="A photo of Tupac" class="img-fluid">
          </div>
        </div>  
<!-- Previous/Next controls -->
          <a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
            <span class="icon-prev" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
            <span class="icon-next" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </section>
<!-- end gallery section   -->
  
<!-- start achievements section -->
  <section class="achievements-section" id="achievements">
    <div class="container">
      <div class="row">
        <h2 class="text-uppercase text-xs-center">Achievements</h2>
        <ul>
          <li>Tupac became one of the best-selling music artists in the world by selling over 37.5 million records in US and 75 million albums worldwide as of 2007.</li>
          <li>The Rolling Stone Magazine named him the 86th Greatest Artist of All Time. In a 2005 Rolling Stones Magazine Vote, he was ranked sixth on the list of ’100 immortal artists of all time’.</li>
          <li>Most of his songs send out a social message. He was greatly concerned with the social problems faced by the Afro-American community such as violence and hardship in inner cities, racism, conflicts with other rappers, social injustice, and poverty and police brutality.</li>
          <li>Shakur became the first artist ever to have an album at number one on the Billboard 200 while serving a prison sentence. He released his multi-platinum album Me Against the World at Clinton Correctional Facility after being imprisoned on February 14, 1995.</li>
          <li>The album made stayed on Billboard 200 for five weeks and sold 240,000 copies in its first week. It was appreciated worldwide and set a record for the highest first week sales for a solo male rap artist.</li>
          <li>MTV ranked him at No.2 on their list of The Greatest MCs of All Time while VH1 ranked him No.3 on their list of 50 Greatest Hip Hop Artists.</li>
          <li>Shakur was inducted into the Hip-Hop Hall of Fame in 2002 and Library of Congress’s National Recording Registry in 2010.</li>
          <li>On October 17, 2006, 2Pac Shakur was honored at the First Annual Turks & Caicos International Film Festival for his exceptional talent as a singer and a performer. He was appreciated for overcoming hurdles like crossed racial, ethnic, cultural and medium issues.</li>
          <li>In 2008, he was added to the Definitive 200 list by the National Association of Recording Merchandisers in conjunction with the Rock and Roll Hall of Fame.</li>
          <li>Tupac’s song, Changes, was one of the 12 songs released by the seat of the Catholic Church onto their social networking Web site’s streaming music service</li>
          <li>2Pac‘s double album, All Eyez on Me, sold over 5 million copies in US alone. This is one of the highest-selling rap albums of all time and was eventually certified 9x platinum in June 1998 by the RIAA.</li>
        </ul>
      </div>
    </div>
  </section>
<!-- end achievements section   -->
  
<!--  start more section -->
  <section class="more-section" id="more">
    <div class="container">
      <div class="row">
        <h2 class="text-uppercase text-xs-center">More</h2>
        <ul class="list-unstyled text-xs-center">
          <li><a href="https://en.wikipedia.org/wiki/Tupac_Shakur" target="_blank">Tupac Shakur Wikipedia</a></li>
          <li><a href="http://www.mastersoftrivia.com/blog/2011/06/tupac-shakurs-11-amazing-achievements-before-death-at-age-25/" target="_blank">Tupac Shakur’s 11 Amazing Achievements Before Death at Age 25</a></li>
        </ul>
      </div>
      
      <div class="row">
        <div class="col-md-6">
          <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/12547346_575053066003579_976660405_n.jpg?ig_cache_key=MTE4MDcxMTk3NTY5MDA5OTQ4MA%3D%3D.2.l" alt="Tupac portrait" class="img-fluid"/>
        </div>
        <div class="col-md-6 more-left">
          <blockquote class="blockquote">
            <p class="mb-0">During your life, never stop dreaming. No one can take away your dreams</p>
            <footer class="blockquote-footer">
              <cite title="Tupac Shakur">Tupac Shakur</cite>                   </footer>
        </blockquote>
        </div>
      </div>
    </div>
  </section>
<!--   end more section -->
 
<!-- start footer -->
  <footer class="main-footer">
    <div class="container">
      <div class="row">
        <p>Coded by Marc Salvatierra</p>
      </div>
    </div>
  </footer>
<!--  end footer -->
</body>
              
            
!

CSS

              
                body {
  line-height: 2;
}

.navbar.navbar-light .nav-item a:hover {
  color: #666;
}

.hero-section {
  height: 100vh;
  margin-top: 55px;
}

.hero-left {
  margin-top: 200px;
}

.date {
  font-size: 0.6em;
  letter-spacing: 2px;
}

.hero-img {
  margin-top: -40px;
}

.bio-section p {
  padding: 0 20px;
}

.bio-section,
.achievements-section {
  background: #fbfbfb; 
  padding: 90px 0 90px;
}

.bio-section h2,
.gallery-section h2,
.achievements-section h2,
.more-section h2 {
  margin-bottom: 40px;
}

.gallery-section,
.more-section {
  padding: 70px 0 70px;
}

.carousel-inner > .carousel-item > img {
  width: 100%; 
  margin: 0 auto;
}

.achievements-section .container {
  padding: 0 35px;
}

.achievements-section ul > li {
  padding-bottom: 25px;
}

.blockquote {
 margin-top: 9.375em;
}

.main-footer {
  background: #fbfbfb;
  text-align: center;
  padding: 20px 0 0;
}


@media screen and (max-width: 991px) {
  #main-navbar {
    clear: both;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .hero-img {
    margin-top: 80px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-img {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  
  .hero-left {
  margin: 90px 0 50px;
  }
  
  .name {
    font-size: 3rem;
    padding-top: 80px;
  }
  
  .date {
    font-size: 1.1125rem;
  }
  
  .more-left {
    margin-top: -175px;
  }
}
              
            
!

JS

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

Console