css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <div class="container">
  <header>
    <img src="http://vytc.com/wp-content/uploads/2012/08/lightning_header.jpg" alt="Background image" />
    <div>
      <div>
        <h1>Tribute Page</h1>
        <h2>Nicola Tesla</h2>
      </div>
    </div>
  </header>
  
  <img class="tesla"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/N.Tesla.JPG/1200px-N.Tesla.JPG" alt="Nicola Tesla">
  
  <h3>Quick Facts</h3>
  <h4>Occupation</h4>
Engineer, Inventor
<h4>Birth Date</h4>
c. July 10, 1856
<h4>Death Date</h4>
January 7, 1943
  <div class="facts">
   DID YOU KNOW?
Tesla designed the alternating-current (AC) electric system, which is still the predominant electrical system used across the world today.
    DID YOU KNOW?
    Tesla also created the "Tesla coil," which is still used in radio technology.
    DID YOU KNOW?
    Tesla and Thomas Edison grew to be fierce competitors, but in the end, Edison had the upper hand during their lifetimes.
  </div>
<h4>Education</h4>
The Polytechnic Institute (Graz, Austria), University of Prague, Realschule, Karlstadt (renamed Johann-Rudolph-Glauber Realschule Karlstadt)
<h4>Place of Birth</h4>
Smiljan, Croatia
<h4>Place of Death</h4>
<p>New York, New</p> 

  <p>Click <a href="https://en.wikipedia.org/wiki/Nikola_Tesla">here</a> for more about Nicola Tesla.</p>
  </div>



</div>
            
          
!
            
              body {
  wax-width:950px;
  margin: 50px 20px;
  text-align: center;
}

.container {
  max-width: 950px;
  border-radius: 15px;
  background-color: gray;
  margin: 10px auto;
  padding-bottom: 20px;
}

header {
  margin: 0 -15px 20px; /* Negative left and right margins to ensure you get 100% width (.container has 15px of padding)*/
  border-radius: 15px 15px 0 0;
  overflow: hidden; /* Default is visible so even if it has rounded corners it would show the elements that are inside */
  position: relative; /* Says to nested elements that they can use this block for getting width and height. */
  text-align: center;
}

header img{
  position: relative; /* It allows us to specify z-index without removing the image from the natural flow of the website (like with position absolute). This is the only element that is in the flow of the header, thus is the only one giving header a height */
  width: 100%; /* We want it to cover 100% of header */
  z-index: 1; /* We want it to be behind the content in header */
}
header > div{ 
/* When you have a format like the following: {element} > {element2} , it means style "element2" that is directly nested inside "element". We use it to avoid propagation of styles in this case to all nested divs in header. */
  display: table; /* Read about what display: table does in https://css-tricks.com/almanac/properties/d/display/#display-table */
  height: 100%; /* This div (the one that contains title and subtitle) needs to center its content vertically and horizontally. For the vertical part we need to get the height of the element that gives us the reference of what centered means. In this case header dictates that, we are getting the height from the parent, header. */
  position: absolute; /* Removes the content (title and subtitle) from the flow of the page. Thus, it doesnt change the height of header */
  left: 0;
  top: 0; /* We are ensuring that this div with the same dimensions than header its on the top left corner of the container, acting like a top layer over header.  */
  width: 100%; /* Width of the parent */
  z-index: 5; /* Z-INDEX higher than the image, now the image looks like a background and we can see the text */
}

header > div > div{
  /* The following lines align the content vertically, display: table from header > div only allows us to use this */
  display: table-cell; 
  vertical-align: middle;
}

.tesla {
  max-width: 30%;
  height: auto
  display: block;
}

.facts {
  border: 1px white solid;
  padding:5px;
}

h1 {
  margin-top: 0;
  padding-top:0;
}
            
          
!
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.
Loading ..................

Console