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.

            
              <!DOCTYPE html>
    <html lang="eng">
    <head>
      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
        <meta charset="utf-8">
        <meta name="description" content="Tribute page of Johan Sebastian Bach">
        <meta name="keywords"    content="Tribute, Bach, baroque, composer">
        <meta name="author"      content="Jose Islas">
        <meta name="viewport"    content="width=device-width, initial-scale=1.0">
        <title>Bach's tribute page</title>
        <link rel="icon" type="image/jpg" href="https://user-images.githubusercontent.com/53957100/62845673-f0f23700-bc97-11e9-9302-37f4f60ca6dc.jpg"/>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <link href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap" rel="stylesheet"> 
    </head>
    <body id="main">
        <div id="header">
            <img class="logo" src="https://user-images.githubusercontent.com/53957100/62818329-0d656680-bb14-11e9-9dba-863d40673a81.jpg" alt="Johan sebastian bach logo with born and death date">  
          <h1 id="title">Johan Sebastian Bach </h1>
          
        </div>
        <nav>
            <ul>
                <li class="home"><a class="n1"  href="#home">home</a></li>
                <li class="media"><a  class="n2" href="#tribute-info">media</a></li>
                <li class="more" ><a class="n3" href="#more">more</a></li>
            </ul>
        </nav>
        <section id="tribute-info">
          <div id="tribute-info-grid">
          <div id="img-div">
             <img id="image" src="https://user-images.githubusercontent.com/53957100/62818341-47366d00-bb14-11e9-8629-551d8059f83e.JPG" alt="Johan Sebastian Bach statue in eisenach">
<figcaption id="img-caption">Eisenach JSB</figcaption>
          </div>
            
       <div id="content">
         <h2>March 21, 1685</h2>
          <p> Johann Sebastian Bach was born in Eisenach on 21 March.</p>
         <h2>May 1694</h2>
         <p>J.S Bach's mom dies in May</p>
         <h2>1695</h2>
         <p>Bach’s father, Johann Ambrosius Bach, died on 20 February. Now an orphan, Bach moved to Ohrdruf, where he lived with his brother Johann Christoph, fourteen years his senior and the organist at St Michael’s Church. Together with his brother Johann Jakob and also his cousin Johann Ernst, Bach attended the grammar school, at that time a very prestigious educational establishment in the Duchy of Saxe-Gotha. He sang in the school choir, whose responsibilities include performing at the local Ehrenstein Castle as well as at weddings and funerals. Under Johann Christoph’s guidance, Bach learned to play the organ. During this time, the organ at St Michael’s was completely overhauled, giving the young Johann Sebastian an opportunity to learn the basics of organ construction. In 1704, he wrote a keyboard composition, the Capriccio in E major, dedicating it to his elder brother. The house where the three Bach brothers lived was later burned down during a large fire in 1753.</p>
        </div>
          
           <div id="img-div2">
            <figure>
              <img id="image2" src="https://user-images.githubusercontent.com/53957100/62818346-50bfd500-bb14-11e9-8365-fe9de795378a.JPG" alt="Johan Sebastian Bach statue in eisenach">
              <figcaption class="img-captionc">Weimar</figcaption>
       </div>
       <div id="content2">
         <h2>1700-1702</h2>
         <p>J.S. Bach was a chorister at St Michael’s School in Lüneburg and a pupil of Georg Böhm. He visited Johann Adam Reincken in Hamburg and studied the organ heritage of north Germany.
The young Bach’s musical abilities were long a matter of speculation as there were far too few authoritative sources about his early years. In 2006, however, copies of north German organ works were discovered in the Anna Amalia Library in Weimar which turned out to be the earliest surviving manuscripts written in Bach’s own hand. Analysis of this spectacular find shed new light on some aspects of Bach’s biography. In contrast to previous assumptions, Bach must have possessed extraordinary musical and performance abilities when he was just thirteen, for the copies found in Weimar which he produced as a schoolboy in Lüneburg and Ohrdruf include two of the most difficult organ compositions of his day. In addition, the find provides important information about an always assumed but never proven link between Bach and Georg Böhm (1661–1733), a noteworthy Lüneburg organist and composer, for the paper used by Bach for his copies came from Böhm’s possession. During his training at St Michael’s, Bach was probably therefore also a pupil or even a journeyman of Georg Böhm.</p>
       </div>
<div id="img-div3">
            <figure>
              <img id="image3" src="https://user-images.githubusercontent.com/53957100/62818351-63d2a500-bb14-11e9-8cda-d25132b4ad4d.JPG" alt="Johan Sebastian Bach statue in eisenach">
              <figcaption class="img-captionc">Leipzig</figcaption>
       </div>
       <div id="content3">
         <h2>1749</h2>
         <p>Bach’s health deteriorated. He suffered from a serious eye condition as well as motor problems in his right arm and his writing hand.</p>
         <h2>1750</h2>
         <p>J.S. Bach underwent eye surgery by the famous yet controversial ophthalmologist Sir John Taylor, who stayed in Leipzig from 4 to 7 April in 1750. Complications necessitated an additional operation. Although Bach was able to see again for a short time, he suffered a stroke and died shortly afterwards on 28 July in 1750.</p>
  
  
  
  </div>
<div id="vid">
             <h2> Media</h2>     
  <div id="media">
  <div id="video1">
          <iframe max-width="100%" max-height="auto" src="https://www.youtube.com/embed/wV6GPhg80ok" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
         <div id="video2">
         <iframe max-width="100%" height="auto" src="https://www.youtube.com/embed/e3pizBY136E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
         <div id="video3">
         <iframe width="100%" height="auto" src="https://www.youtube.com/embed/xUHQ2ybTejU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
  </div>
  </div>
 <section id="footer">
   <h2>If you would like to know more follow any of this links</h2>
   <ul>
     <li><a id="tribute-link" href="http://bachhaus.de/de/home" alt="bach haus webpage" target="_blank">Bach hause</a></li>
     <li><a href="https://en.wikipedia.org/wiki/Johann_Sebastian_Bach" alt="wikipedia bach"> Bach Wiki</a></li>
   </ul>
   <p> BRB3d &copy 2019</p>
   </section>
  
             </div>


    </body>
    </html>
            
          
!
            
              * {
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
#header {
    display: flex;
    Background: black;
    width: 100%;
    height: 100px;
}
#title{
  font-size: 45px;
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Great Vibes', cursive;
}
.logo {
  float: left;
  max-width: 100%;
  max-height: 100%;
}

nav {
  display: flex;
  background-image: linear-gradient(to right, black, red, yellow);
  width: 100%;
  height: 65px;
  align-items: center;
}

nav ul {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

nav ul li a{
  font-weight: bold;
  color: black;
  text-transform: uppercase;
  padding: 19px 12px;
  margin: 4px; 
  border: 2px solid black;
  box-shadow: 2px 2px rgb(0, 0, 0, 0.5);
}

nav ul li a.n1:hover {
  background: rgb(235, 207, 52, 0.4);
}
nav ul li a.n2:hover {
  background: rgb(252, 88, 38, 1);
}
nav ul li a.n3:hover {
  background: rgb(7, 7, 7, 0.4);
}

.home:active {
  position: relative;
  top: 1px;
  left: 1px;
}
.more:active {
  position: relative;
  top: 1px;
  left: 1px;
}
.media:active {
   position: relative;
  top: 1px;
  left: 1px;
}

#tribute-info-grid {
  display: grid;
  width: 100%;
  height: 100vh;
  grid-gap: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5,1fr);
  grid-template-areas:
    'img-div img-div content'
    'img-div2 img-div2 content2'
    'img-div3 img-div3 content3'
    'vid vid vid'
    'footer footer footer'
    ;
}

#img-div {
  grid-area: img-div;
  display: block;
  background: black;
  border: 5px solid black;
  justify-content: center;
}

#image {
  display: block;
  max-width: 100%;
  max-height: auto;
}

#img-div2 {
  grid-area: img-div2;
  background: black;
  border: 5px solid black;
  justify-content: center;
}
#image2 {
  max-width: 100%;
  max-height: auto;
}

#img-div3 {
  grid-area: img-div3;
  background: black;
  border: 5px solid black;
  justify-content: center;
}
#image3 {
  max-width: 100%;
  max-height: auto;
}
#img-caption {
  color:white;
  text-align:center;
  margin-top: 10px;
}
.img-captionc {
  color:white;
  text-align:center;
  margin-top: 10px;
}
#content {
  grid-area: content;
}

#content{
  background: black;
}

#content h2 {
  color:white;
  text-align: center;
  font-size: 20px;
  padding: 4px;
  margin: 0;
  text-transform: uppercase;
}

p{
  font-family: verdana;
  font-size: 15px;
  color: white;
  margin: 0px;
  padding: 1px 6px;
  text-align: left;
}

#content2 {
  background: black;
}
#content2 h2 {
  color:white;
  text-align: center;
  font-size: 20px;
  padding: 4px;
  margin: 0;
  text-transform: uppercase;
}

#content3 {
  background: black;
}
#content3 h2 {
  color:white;
  text-align: center;
  font-size: 20px;
  padding: 4px;
  margin: 0;
  text-transform: uppercase;
}
#media {
display: grid;
  width: 100%;
  height: 100vh;
  grid-gap: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:1fr;
  grid-template-areas:
    'video1 video2 video3';
  
}

#vid h2{
  color: white;
  display: block;
  text-align: center;
}

.video1{
  display: inline-block;
  width: 100%;
  height 100%;
}
iframe{
  position: block;
  top:0;
  left: 0;
  width: auto;
  height: 100%;
}

.video2{
  display:inline-block;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}

.video3{
  display: inline-block;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
#vid {
  grid-area: vid;
  text-align: center;
  background: black;
}

#footer {
  grid-area: footer;
  background: black;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

#footer h2{
  color: white;
}

#footer ul{
  display: flex;
  color: white;
  justify-content: space-evenly;
}

#footer ul li a{
  color: white;
  margin: 10px;
  padding: 7px;
  width: 100%;
  border: 2px solid white;
}

#footer p{
  text-align: center;
}


            
          
!
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