123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <head>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Sanchez" rel="stylesheet">

</head>

<nav>

  <div id="nav-bar" class="nav-bar">

    <div id="nav-icon" class="nav-icon"> <i class="fas fa-bars"></i>
    </div>

    <div id="social-icons" class="social-icons">

      <a href="https://www.youtube.com/richardbranson" target="_blank"><i class="fab fa-youtube"></i></a>

      <a href="https://twitter.com/richardbranson" target="_blank"><i class="fab fa-twitter"></i></a>

      <a href="https://www.linkedin.com/in/rbranson" target="_blank"><i class="fab fa-linkedin-in"></i></a>

      <a href="https://www.instagram.com/richardbranson/" target="_blank"><i class="fab fa-instagram"></i></a>

      <a href="https://www.facebook.com/RichardBranson/" target="_blank"> <i class="fab fa-facebook-f"></i></a>
    </div>
  </div>

</nav>

<main id="main">

  <div id="img-div">

    <img id="image" class="header-image" src="http://www.aesp.biz/wp-content/uploads/2017/12/Richard-Branson.jpg" alt="Richard branson standing in front of one of his aircraft in a hanger, arms folded looking at camera">

    <div id="title-slide" class="title-slide">
      <h1 id="title"> <em>Richard Branson</em></h1>
    </div>
  </div>

  <div id="tribute-heading" class="tribute-heading">
    <h2>Introduction</h2>
  </div>

  <div id="tribute-info" class="tribute-info">
    <p> <em>Sir Richard Charles Nicholas Branson</em> (born 18 July 1950) is an English business magnate, investor, author and philanthropist. He founded the <a href="https://www.virgin.com/" target="_blank"> <em>Virgin Group</em></a>, which controls more
      than 400 companies.</p>

    <p> <em>Branson</em> expressed his desire to become an entrepreneur at a young age. His first business venture, at the age of 16, was a magazine called <a href="https://www.virgin.com/richard-branson/student-magazine" target="_blank"><em>Student</em></a>.
      In 1970, he set up a mail-order record business. He opened a chain of record stores, <a href="https://www.virginrecords.com/" target="_blank"><em> Virgin Records</em></a>—later known as <a href="https://en.wikipedia.org/wiki/Virgin_Megastores" target="_blank"> <em> Virgin Megastores</em></a>—in
      1972. Branson's Virgin brand grew rapidly during the 1980s, as he set up <a href="https://www.virginatlantic.com/" target="_blank"> <em>Virgin Atlantic Airline</em></a> and expanded the Virgin Records music label. In 2004, he founded spaceflight
      corporation
      <a href="https://www.virgingalactic.com/" target="_blank"><em>Virgin Galactic</em></a>, based at <a href="https://en.wikipedia.org/wiki/Mojave_Air_and_Space_Port" target="_blank"><em>Mojave Air and Space Port</em></a>, noted for the <a href="https://en.wikipedia.org/wiki/SpaceShipTwo"
        target="_blank"><em>SpaceShipTwo</em></a> suborbital spaceplane designed for space tourism. </p>

    <p>In March 2000, Branson was knighted at Buckingham Palace for "services to entrepreneurship". For his work in retail, music and transport (with interests in land, air, sea and space travel), his taste for adventure, and for his humanitarian work, he
      has become a prominent global figure. In 2007, he was placed in <a href="http://time.com/" target="_blank"><em>Time Magazine's</em></a> list of the <a href="http://content.time.com/time/specials/2007/completelist/0,29569,1595326,00.html" target="_blank"><em>100 Most Influential People in The World.</em></a>      In June 2018, <a href="https://www.forbes.com" target="_blank"> <em>Forbes</em></a> listed Branson's estimated net worth at US$5.1 billion.
    </p>

    <p> Learn more about Branson on <a href="https://en.wikipedia.org/wiki/Richard_Branson" target="_blank" id="tribute-link">Wikipedia</a>.</p>
    <p></p>
  </div>

  <div id="timeline-container" class="timeline-container">

    <h2 id="timeline-title" class="timeline-title">Timeline</h2>

    <ul id="timeline" class="timeline">
      <li>
        <div class="timeline-badge"><i class="far fa-calendar-alt fa-lg"></i></div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">18<sup>th</sup> July 1950</h4>
          </div>
          <div class="timeline-body">
            <p>Born</p>
            <i class="fas fa-baby fa-5x"></i>
          </div>
        </div>
      </li>
      <li class="timeline-inverted">
        <div class="timeline-badge"><i class="far fa-calendar-alt fa-lg"></i></div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">1<sup>st</sup> July 1966</h4>
          </div>
          <div class="timeline-body">
            <p>Branson, struggling with dyslexia, drops out of school at 16 to start a "youth culture" magazine called <a href="https://www.virgin.com/richard-branson/student-magazine" target="_blank"><em>Student</em></a>.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="timeline-badge"><i class="far fa-calendar-alt fa-lg"></i></div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">1<sup>st</sup> January 1968</h4>
          </div>
          <div class="timeline-body">
            <p>First issue of <a href="https://www.virgin.com/richard-branson/student-magazine" target="_blank"><em>Student</em></a> appears.</p>
          <div class="timeline-image">  <img src="https://res.cloudinary.com/www-virgin-com/virgin-com-prod/sites/virgin.com/files/Articles/Student/Student%20edition%201%20front%20cover_0.jpg" alt="Front cover of magazine titled student" id="timeline-image" class="timeline-image"> </div>
          </div>
        </div>
      </li>
      <li class="timeline-inverted">
        <div class="timeline-badge"><i class="far fa-calendar-alt fa-lg"></i></div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">8<sup>th</sup> September 1970</h4>
          </div>
          <div class="timeline-body">
            <p>The <a href="https://www.virgin.com/" target="_blank"><em>Virgin</em></a> brand is born as Branson begins selling records by mail-order as a way to cover costs for his magazine.</p>
            <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2013/05/23/16/branson-virgin-rex.jpg?width=1000&height=614&fit=bounds&format=pjpg&auto=webp&quality=70&crop=16:9,offset-y0.5" alt="A young Richard Branson on the phone making sales"
              class="timeline-image">
          </div>
        </div>
      </li>
      <li>
        <div class="timeline-badge"><i class="far fa-calendar-alt fa-lg"></i></div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">27<sup>th</sup> October 1971</h4>
          </div>
          <div class="timeline-body">
            <p>As the record business grew, Branson decided it was time to open the first <em> Virgin Records</em> storefront.</p>
            <img src="https://res.cloudinary.com/www-virgin-com/virgin-com-prod/sites/virgin.com/files/Time%20Machine/Records_shop_1971_notting_hill_0.jpg" alt="old black and white image of a storefront with signage reading Virgin records" id="timeline-image" class="timeline-image">
          </div>
        </div>
      </li>
      <li class="timeline-inverted">
        <div class="timeline-badge"><i class="far fa-calendar-alt fa-lg"></i></div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">5<sup>th</sup> July 1973</h4>
          </div>
          <div class="timeline-body">
            <p><a href="https://www.virginrecords.com/" target="_blank"><em>Virgin</em></a> record label is born with the signing of <a href="https://en.wikipedia.org/wiki/Mike_Oldfield" target="_blank"><em>Mike Oldfield</em></a> with his single, "Tubular
              Bells".</p>
            <img src="https://seeklogo.com/images/V/Virgin_Records-logo-35658A00F9-seeklogo.com.png" alt="Black logo reading Virgin Records" class="timeline-image">
            <p>Other notable artists include: <a href="https://en.wikipedia.org/wiki/Sex_Pistols" target="_blank"><em>The Sex Pistols</em></a>,<a href="https://en.wikipedia.org/wiki/The_Rolling_Stones" target="_blank"><em> The Rolling Stones</em></a>,
              <a
                href="https://en.wikipedia.org/wiki/Culture_Club" target="_blank"><em>Culture Club</em></a> and <a href="https://en.wikipedia.org/wiki/Genesis_(band)" target="_blank"><em>Genesis</em></a>. Virgin was one of the top 6 record companies in the world.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="timeline-badge"><i class="far fa-calendar-alt fa-lg"></i></div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">1<sup>st</sup> January 1979</h4>
          </div>
          <div class="timeline-body">
            <p>The first <a href="https://en.wikipedia.org/wiki/Virgin_Megastores" target="_blank"> <em>Virgin Megastore</em></a> opened on Oxford Street, London.</p>
            <img src="https://4vector.com/i/free-vector-virgin-megastore-logo_089514_Virgin_Megastore_logo.png" alt="Virgin Megastore logo" id="timeline-image" class="timeline-image">
          </div>
        </div>
      </li>
      <li class="timeline-inverted">
        <div class="timeline-badge"><i class="far fa-calendar-alt fa-lg"></i></div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">2<sup>nd</sup> Feburary 1979</h4>
          </div>
          <div class="timeline-body">
            <p><a href="https://en.wikipedia.org/wiki/Virgin_Books" target="_blank"><em>Virgin Books</em></a> was established as a way to publish music titles that would compliment the <em>Virgin Records</em> label.</p>
            <img src="https://vignette.wikia.nocookie.net/sonic/images/d/d1/Colour_Logo_RGB_72dpi.jpg/revision/latest?cb=20120812153227" alt="Black logo reading Virgin Records" class="timeline-image">

          </div>
        </div>
      </li>
      <li>
        <div class="timeline-badge"><i class="far fa-calendar-alt fa-lg"></i></div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">3<sup>rd</sup> March 1979</h4>
          </div>
          <div class="timeline-body">
            <p><a href="https://en.wikipedia.org/wiki/Virgin_Films" target="_blank"> <em>Virgin Films</em></a> was launched to invest in and distribute films that would compliment the record label. The first film distributed through <em>Virgin Films</em>              was the <em>Sex Pistol's</em> mockumentary, <a href="https://en.wikipedia.org/wiki/The_Great_Rock_%27n%27_Roll_Swindle" target="_blank"><em>"The Great Rock n 'Roll Swindle"</em></a>.</p>

          </div>
        </div>
      </li>
  </div>

</main>

<div id="footer-div" class="footer-div">
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</div>
            
          
!
            
              /*--Typography--*/
h1 {
  color: #ffffff;
  font-size: 36px;
  font-family: sanchez;
  font-weight: bold;
}

h2 {
  color: #ffffff;
  font-family: sanchez;
  font-size: 30px;
  font-weight: bold;
  margin: 0px;
}

h3, h4 {
  color: #ffffff;
  font-family: sanchez;
  font-weight: bold;
}

p {
  font-family: sanchez;
  text-align: center;
}

/*--Nav Bar--*/

.nav-bar {
  background-color: #2d2d2d;
  width: 100%;
  height: 40px;
  display: grid;
  grid-template-columns: 50% 50%
}

/*--Social Icons--*/

i.fab {
  color: white;
  float: right;
  padding-right: 10px;
  padding-top: 10px;
}

i.fab:hover {
  color: #b10000; 
}

i.fas {
  color: white;
  float; left;
  padding-left: 10px;
  padding-top: 10px;
}

i.fa-baby {
  color: #d10000;
  display: block;
  text-align: center;
  margin-right: 10px;
}

i.fas:hover {
  color: #b10000; 
}


/*--header Image--*/

.header-image {
  position: relative;
  top: 0px;
  bottom: 0px;
  height: 100%;
  width: 100%;
  max-width: 100%;
  display: block;
  height: auto;
}

.title-slide {
  float: left;
  border-radius: 4px 4px 4px 4px;
  position: absolute;
  left: 58%;
  top: 60px;
  z-index: 1000;
  background-image: linear-gradient(to bottom right, #d10000, #72376d); 
  opacity: 0.7;
  padding: 10px;
  height: auto;
  width: auto;   
}

/*--Main--*/

.tribute-heading {
  margin: 0;
  background-image: linear-gradient(to bottom right, #d10000, #72376d);
  text-align: center;
  padding: 20px; 
}

.tribute-info {
  display: grid;
  margin: 0;
  background-image: linear-gradient(to bottom right, #2d2d2d, #7a7979);
  text-align: center;
 color: #ffffff;
  position:relative;
  top: 0px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  border-radius: 1px; 
}

#tribute-info a:link { color:      #ffffff; 
}
  
#tribute-info a:visited { color: #ffffff; 
}

#tribute-info a:hover { color: #d10000;
  
}

#tribute-info a:active { color: #d10000;
}
  
/*--Timeline--*/

.timeline-container {
  margin: 0px;
  backround-color: #d10000;
}

.timeline-title {
  background-image: linear-gradient(to bottom right, #d10000, #72376d);
  text-align: center;
  margin: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
}

.timeline {
  list-style: none;
  padding: 20px 20px 20px;
  position: relative;
}

.timeline::before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #d10000;
  right: 13%;
  margin-left: -1.5px;  
}

.timeline > li {
  margin-bottom: 20px;
  position: relative;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

.timeline > li > .timeline-panel {
  width: 40%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}

.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  
  border-bottom: 14px solid transparent;
  content: " ";
}

.timeline > li > .timeline-badge {
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  right: 5%;
  margin-left: -25px;
  background-color: #d10000;
  z-index: 100;
  border-radius: 50%;
}

@media (min-width:600px) {
  
  .timeline > li.timeline-inverted > .timeline-panel {
  float: right;
  }
  
  .timeline > li > .timeline-badge {
  left: 50%;
  }
  
  .timeline > li > .timeline-panel:after {
  border-right: 0 solid #fff;
  }
  
  .timeline::before {
left: 50%;
  }
}
  

.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
  }}

.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}

.far {
  background-image: linear-gradient(to bottom right, #d10000, #72376d);
}

.timeline-body {
  position: relative;  
}

.timeline-image {
  margin: 0 auto;
  max-width: 100%;  
}
  
/*--Footer--*/

.footer-div {
  background-image: linear-gradient(to bottom right, #d10000, #72376d);
  height: 200px;
  margin: 0px;
}

.footer-icons {
 width: 50px;
 height: 50px;
}



            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console