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>
    <title>Parallax Tree Tribute</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://fonts.googleapis.com/css?family=Righteous">
  </head>
<!--
font options:
  <link href="http://fonts.googleapis.com/css?family=Righteous">
  <link href="http://fonts.googleapis.com/css?family=Fredoka One">
  <link href="http://fonts.googleapis.com/css?family=Philosopher">
  <link href="http://fonts.googleapis.com/css?family=Chewy">
  <link href="http://fonts.googleapis.com/css?family=Roboto%20Mono">
  <link href="http://fonts.googleapis.com/css?family=Sigmar One">
-->
<body>
<div class="image-holder image1">
  <div class="spacer50"></div>
      <h1 class="centered-text transparent fontincreasedouble">"I think that I shall never see a poem lovely as a tree..."
      <br><sub>- Joyce Kilmer</sub></h1>
  <div class="spacer"></div>
      <article class="small-h padded-text">
        <p>Trees have long been extolled for the beauty they add to their surroundings.</p>
        Trees can make our lives more rich, enhance life's vistas, and help provide peace and comfort.<br>
        A single oak tree can keep generations of children company as they explore it's branches and play beneath it's shade.<br>
        Many have enjoyed the hushed tranquility that a thick pine forest can bring, as its peace replaces the demands of modern life.<br>
        As the large parks in many cities prove, a grove or forest can make any landscape more beautiful.<br>
        Among the <a href="https://www.britannica.com/plant/conifer/Economic-importance" target="_blank"> many virtues of trees</a>, trees can also be a valuable component to a rich and healthy life.
        <br>

      </article>
  
  <div class="spacer"></div>
        <h1 class="centered-text transparent fontincreasedouble">
          A Treasure of Trees
        </h1>
  <div class="spacer25"></div>
</div>
<div class="image-holder image2">
      <article>
        <p>Not only are trees good for us on a personal level, (the beauty and health benefits mentioed previously), trees benefit the world and it's inhabitants in countless other ways.</p>
        Trees are a very important, and possibly essential, component in the <a href="https://www.fastcodesign.com/1681455/quantifying-the-economic-value-of-trees-to-cities" target="_blank">economics</a> and <a href="https://en.wikipedia.org/wiki/Wood_economy" target="_blank">infrastructure</a> of many areas. 
        <br>Trees provide building material, food, shelter, process pollutants out of the air, help prevent errosion, provide habitat, are important in the water cycle, help stabalize ecosystems, etc...
        <p>Trees really are one of our worlds greatest treasures.</p>
      </article>
  <div class="spacer200"></div>
      <h1 class="centered-text transparent fontincreasedouble">
        Amazing Arboreals
      </h1>
  <div class="spacer25"></div>
      <article>
        <p>While calling a tree an arboreal is really a misnomer, (arboreal roughly means tree related), what trees are capable of, actually <i>is</i>, amazing.</p>
        The longest living single trees are estimated at over <a href="http://www.mnn.com/earth-matters/wilderness-resources/photos/the-worlds-10-oldest-living-trees/methuselah#top-desktop" target="_blank">5000 years old!</a>
        <br>In fact there are enough documented, ancient trees for there to be lists of known really old trees. <br><a href="http://www.mnn.com/earth-matters/wilderness-resources/photos/the-worlds-10-oldest-living-trees/taking-the-long-view#top-desktop" target="_blank">Here's an entire slideshow</a> on the oldest, and some of the most amazing, trees.
<br>
        Trees are amazing enough that different types, groves, and even more single trees are worth documenting.<br>
Here's a list of other impressive tree related points:
        <ul>
          <li><a href="http://www.mangrovewatch.org.au/index.php?option=com_content&view=article&id=10:what-are-the-benefits-of-mangroves&catid=20:benefits-of-mangroves&Itemid=300237" target="_blank">Mangroves</a></li>
          <li><a href="https://sempervirens.org/discover-redwoods/facts-history/" target="_blank">Redwoods</a></li>
          <li><a href="https://www.nationalforests.org/blog/tree-profile-aspen-so-much-more-than-a-tree" target="_blank">Aspens</a></li>
          <li><a href="https://africageographic.com/blog/9-fascinating-baobab-tree-facts/" target="_blank">Baobabs</a></li>
          <li><a href="http://www.mnn.com/earth-matters/wilderness-resources/photos/worlds-7-most-amazing-trees/the-pillars-of-life#top-desktop" target="_blank">A slideshow of impressive trees & tree species</a></li>
          <li><a href="http://www.earthporm.com/16-magnificent-trees-world/" target="_blank">Another list of amazing specific trees or groves</a></li>
        </ul>
        <br>
        The above clearly shows that trees can accurately be called amazing.
      </article>
</div>
<div class="image-holder image3">
  <div class="spacer200"></div>
      <h1 class="centered-text transparent fontincreasedouble">
        A Stately Status
      </h1>
  <div class="spacer25"></div>
      <article class="small-h">
        <p>
          Not only are trees; good for us personally, good for society, and downright amazing, there are also enormous numbers of trees.
        </p>
        A <a href="https://www.minnpost.com/earth-journal/2015/09/planet-has-10-times-many-trees-previous-estimate-research-finds" target="_blank">recent study found</a>, contrary to previous estimates, there are not hundreds of billions of trees on earth, there are, (wait for it...), <i>trillions</i>! <br> Yep, that's right trillions of trees.
        <br>In fact there are purportedly over 400 trees for each person on the earth.
<br>
   Despite the fact that there are so many trees, and that in some areas of the world there are <a href="http://www.mnn.com/earth-matters/wilderness-resources/stories/more-trees-than-there-were-100-years-ago-its-true" target="_blank">more trees now than there were a hundred years ago</a>, the same study estimates that since the dawn of human civilization we have decreased the number of trees by half their previous number.
<br> So don't stop planting trees just yet.
        <br> The more trees the better.<br>The truth is, humanity will benfit the more trees there are. <br> We know the world can support another... few <i>trillion</i> trees. So, really, don't stop planting trees.
      </article>
  <div class='spacer'></div>
  <article>
            <br><br><sub>NOTE: There is evidence to suggest that not using paper actually means less trees are farmed, therefore: less paper = less trees, interestingly enough...</sub>
  </article>
  <div class="spacer"></div>
</div>
</body>
            
          
!
            
              /*
All rights reserved Matthew Ernest Rummler 2008-2030.
*/
/* 
    Created on : Mar 21, 2018, 2:41:16 PM
    Author     : mer
*/

:root
{
  --green-2: rgba(122,196, 30,0.9);
  --green-3: rgba( 37,113, 0,1);
  --green-0: rgba(165,229,111,.4);
  --green-00: rgba(180, 234, 114,.9);
  --green-4: rgba(18, 35, 4,1);
  --green-5: rgba(22, 36, 4,.97);
  width: 100%;
  /*min-width: 330px;*/
}
/* latin-ext */
@font-face 
{
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  src: local('Righteous'), local('Righteous-Regular'), url(http://fonts.gstatic.com/s/righteous/v5/eJYqrhUff1n1Ge9A-rSw_BJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face 
{
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  src: local('Righteous'), local('Righteous-Regular'), url(http://fonts.gstatic.com/s/righteous/v5/w5P-SI7QJQSDqB3GziL8XVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
body
{
  margin: 0 auto;
  padding: none;
  min-height: 100%;
  width: 100%;
  background-color: var(--green-5,white);
}
.backgroundimage
{
  background-origin: border-box;
  background-size: cover;
  /*background-size: 50%;*/
  width: 100%;
  /*height: 75%;*/
  /*position: absolute;*/
  position: sticky;
  top: 0px;
  left: 0px;
  background-position: center;
  z-index: -20 !important;
  max-height: 1800px;
  min-height: 800px;
  /*overflow-y: scroll;*/
  /*color: inherit;*/
}
.image-holder
{
  width: 100%;
  background-size: cover;
  background-attachment: fixed;
 /**/background-position: 75% 100%;/**/
  background-repeat: no-repeat;
  max-height: 1800px;
  min-height: 800px;
}
.image1
{
  background-image: url(https://cloudwist.com/assets/CerpuscularRaysBehindOldTree.jpg);
}
.image2
{
  background-image: url(https://cloudwist.com/assets/Crepuscular_ray_sunset_from_telstra_tower_edit.jpg);
}
.image3
{
  background-image: url(http://thebaobabnetwork.com/wp-content/uploads/2016/10/M.van_.Oosten_04D6811-Edit-1-1024x674.jpg);
}
.content
{
  max-width: 100%;
  max-height: 4500px;
  overflow: hidden;
}
.flex
{
  display: flex;
  flex-grow: 1;
  justify-content: center;
}
.row
{
  flex-direction: row;
}
.column
{
  flex-direction: column;
}
.absolute
{
  position: absolute;
  top: 10px;
}
.static
{
  position: fixed;
  top: 10px;
}
.fixed
{
  position: fixed;
  top: -0px;
}
.transparent
{
  background-color: rgba(255,255,255,.5);
  /*background-color: var(--green-0);*/
}
article
{
/*  background-color: rgba(255,255,255,.9);
  */
  font-family: monospace, helvetica;
  font-weight: bold;
  background-color: var(--green-5,white);
  color: rgba(255,255,255,.5);
}
.spacer
{
  min-height: 100px;
  background: transparent;
/*  background-color: rgba(255,255,255.1);
  */
}
.spacer200
{
  min-height: 200px;
  background: transparent;
/*  background-color: rgba(255,255,255.1);
  */
}
.spacer50
{
  min-height: 50px;
  background: transparent;
}
.spacer25
{
  min-height: 25px;
  background: transparent;
}
.medium-h
{
  min-height: 680px;
}
.small-h
{
  min-height: 330px;
}
.tiny-h
{
  min-height: 175px;
}
.large-h
{
  min-height: 1125px;
}
.centered-text, title
{
  text-align: center;
  font-size: 200%;
  color: var(--green-5);
  
}
article
{
  padding: 1% 6% 2% 14%;
}
.fontincrease50{ font-size: 150%;}
.fontincreasedouble{ font-size: 200%;}
/*responsive stuff*/
/* Medium-small screens */
@media (min-width: 420px) 
{
  html { font-size: 18px;/*114%;*/ }
  .modal-dialog { width: 420px;}
}

/* Medium screens */
@media (min-width: 710px) 
{
  html { font-size: 20px;/*114%;*/ }
  .modal-dialog { width: 420px;}
}

/* Medium-large screens */
@media (min-width: 800px) 
{
  html { font-size: 22px;/*114%;*/ }
  .modal-dialog { width: 800px;}
}

/* Large screens */
@media (min-width: 1440px) 
{
  html { font-size: 26px;/*122%;*/ }
}
/* Large screens */
@media (min-width: 1920px)
{
  html { font-size: 30px;/*130%;*/ }
  .modal-dialog { width: 1100px;}
}
/* Very Large screens */
@media (min-width: 2048px)
{
  html { font-size: 34px;/*130%;*/ }
}
a{color: royalblue};
/*
@media screen and (min-width: 300px)
{
  style.css?v=5.4:7
  html
  {
      font-size: calc(15px + 7 * ((100vw - 300px) / 900));
      font-family: "Whitney SSm A", "Whitney SSm B", "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
      font-weight: 400;
      line-height: 1.45
  }
}
*/
            
          
!
            
              //document.getElementsByTagName("h1")[0].style.fontSize = "30px";
            
          
!
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