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. 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

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

              
                <header>
  <h1>Change Font Size</h1>
<p class="subhead">Use the buttons in the bottom right corner to change the overall font size of the content. </p>
</header>
<aside>
  <ul class="fontSize-buttons--list">
  <li><button id="decrease-fontSize">Smaller</button></li>
  <li><button id="increase-fontSize">Larger</button></li> 
</ul>
</aside>
<main>
<h2>Tad survive ensnare joy mistake courtesy Bagshot Row.</h2>
<p>Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble'll sleeping during jump Narsil.</p>
<div class="col-2">
  <article>
    <h3>North valor overflowing sort Iáve mister kingly money?</h3>
<p>Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?</p>
<ul>
  <li>Adamant.</li>
  <li>Southfarthing!</li>
  <li>Witch-king.</li>
  <li>Precious.</li>
  <li>Gaffer's!</li>
</ul>
  </article>
<article>
  <h3>Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.</h3>
<p>Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum surprise baby season ranks. I bid you all a very fond farewell.</p>
<ol>
  <li>Narsil.</li>
  <li>Elros.</li>
  <li>Arwen Evenstar.</li>
  <li>Maggot's?</li>
  <li>Bagginses?</li>
</ol>
</article>
  <article>
    <h3>What are all the things?</h3>
    <dl>
  <dt>Abandon</dt>
  <dd>Tact flies disturber thinking hospitality Elros act vest handy ranks.</dd>
  <dt>Devil</dt>
  <dd>Boneses spilled Caradhras hungry pace lanterns glory haunted shone forging.</dd>
  <dd>Unprotected Beorn's fireworks dream journey beacon dwells gnaws key.</dd>
  <dt>Happened</dt>
  <dd>Known wanna fifth Bill hell knew she scale.</dd>
  <dd>Missing vanish taken colleague sway voice tricks 13 Grimbold.</dd>
  <dd>Thereof skills kingsfoil innocent riding light Thorin Oakenshield won.</dd>
</dl>
  </article>
  <article>
    <h4>Afraid smithy Fellowship debt carven hooks.</h4>
<p>What about second breakfast? Nags runt near Lindir lock discover level? Andûril breathe waited flatten union.</p>
<blockquote>
  <p>You shall be the Fellowship of the Ring.</p>
  <footer>—Númenor, <cite>sweeter burned verse</cite></footer>
</blockquote>
  </article>
  </div>
<h3>Ere answering track forests shards roof!</h3>
<p>Delay freezes Gollum. Let the Ring-bearer decide. Bagshot Row chokes pole pauses immediately orders taught éored musing three-day? Disease rune repel source fire Goblinses already?</p>
<table>
  <thead>
    <tr>
      <th>Things</th>
      <th>Dangers</th>
      <th>Playing</th>
      <th>Window</th>
      <th>Meaning</th>
      <th>Pace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Current</td>
      <td>living</td>
      <td>odds</td>
      <td>charged</td>
      <td>heads</td>
      <td>felt</td>
    </tr>
    <tr>
      <td>Inn</td>
      <td>climbing</td>
      <td>destroying</td>
      <td>overhead</td>
      <td>roll</td>
      <td>mud</td>
    </tr>
    <tr>
      <td>Breath</td>
      <td>relevant</td>
      <td>éored</td>
      <td>hinges</td>
      <td>year</td>
      <td>signed</td>
    </tr>
    <tr>
      <td>Accept</td>
      <td>threads</td>
      <td>name</td>
      <td>fitted</td>
      <td>precious</td>
      <td>attacked</td>
    </tr>
    <tr>
      <td>Chief</td>
      <td>sails</td>
      <td>first-born</td>
      <td>pottery</td>
      <td>lever</td>
      <td>antagonize</td>
    </tr>
    <tr>
      <td>Unoccupied</td>
      <td>victorious</td>
      <td>means</td>
      <td>lovely</td>
      <td>humble</td>
      <td>force</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>kinsmen</td>
      <td>give</td>
      <td>walking</td>
      <td>thousand</td>
      <td>manners</td>
      <td>burning</td>
    </tr>
  </tfoot>
</table>
<h5>Should Shirelings extraordinary spends poison's willing enchantment.</h5>
<p>I think we should get off the road. Penalty sight splintered Misty Mountain mithril? Unrest lasts rode league bears absence Bracegirdle athletic contract nice parent slowed?</p>
<pre>Pardon Concerning Hobbits rune goblins? Twitching figure including rightful Thorin's level! Worth tubers threats Hornburg deadliest? Unfold thumping shh wants Homely!</pre>
<h6>Improve drops absolutely tight deceit potent Treebeard startled!</h6>
  <hr>
<small>J.R.R. Tolkien 3000 uttered veins <q>roaring winds moaning flaming</q>. Meddle <ins>measure pure</ins> Samwise Gamgee business! <sub>Lied</sub> mistake Proudfoots pon. Instance 80 <dfn>morbid ceremonial plunge</dfn> Anor mad. Questions shells hangs noble Proudfoots <var>throws</var>. <mark>Rampart damage</mark> questions Chubbs 3000 conjurer? Single tempt peasants <strong>Bolg Athelas Mordor Wraiths Azog Undómiel</strong> mangler? <samp>Nori Giants Undómiel Rivendell</samp> spike posts took. Fool's Underhill boarded <cite>vanishing twilight unheard-of</cite>. <abbr>Presence</abbr> Dunland lamb lair. Barricade <sup>didn't</sup> feelings purring vine Morgoth. Distract Giants nearing champion <kbd>T</kbd>. Clothing titles quick bother <em>Arod Gloin Beren</em> troop? Balls crashing bastards <small>arrives precisely rascal</small> stubbornness Snowbourn. Hobbitses rose barren <a>strengths tested mirrors moonlight password</a> center? Remade <x-code>free filthy</x-code> breaking respect amuse Arod? Vengeance <del>Elessar Wolves</del> posts remain doorway said! <time>Suspects</time> fight Merry hungers locked yelp.</small>



</main>
              
            
!

CSS

              
                body {
  width: 100%;
  font-family: sans-serif;
  margin: 0;
  font-size: inherit;
  overflowX: hidden;
}

header {
  width: 100%;
  padding: 2rem;
  text-align: center;
  background-color: #333;
  color: #fff;
  border-bottom: solid 3px #333;
  
/*   position: sticky;
    left: 0;
    top: 0;
  box-shadow: 0px 2px 8px #888; */
}

.fontSize-buttons--list {
  background-color: #333;
  padding: 1.5rem 2rem;
  border-radius: 19px;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  position: fixed;
    right: 10px;
    bottom: 20px;
}

.fontSize-buttons--list button {
  font-size: 22px;
  padding: .5rem 1rem;
  color: #333;
  font-weight: bold;
  border: solid 4px goldenrod;
  border-radius: .25em;
  background-color: gold;  
  cursor: pointer;
}

.fontSize-buttons--list button:hover,
.fontSize-buttons--list button:focus {
  outline: none;
  background-color: #333;
  color: #fff;
}

h1 {font-size: 4.5em;}

.subhead {font-size: 1.25em}

h2 {font-size: 3em;}

h3 {font-size: 2.5em;}

h4 {font-size: 2em;}

h5 {font-size: 1.5em;}

h6 {font-size; 1.2em;}

p {font-size: 1.1em;}

main {
  margin: 4rem 8rem;
}

ul, 
ol,
dl {
  font-size: 1.1em;
}

ul li, 
ol li,
dl dt,
dl dd {
  line-height: 2;
}


dl dt {
  font-size: 1em;
  color: #fff;
  background-color: #333;
  padding: .15rem .75rem .1rem;
  width: max-content;
  margin: .75rem 0 .5rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  font-weight: 500;
}

.col-2 {
  margin: 2em auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  gap: 5em;
  justify-content: center;
  align-items: start;
  align-content: center;
}

table {
  width: 100vw;
  border: solid 4px #333;
  text-align: center;
}

th {
  color: #fff;
  background-color: #333;
  padding: 1rem;
  border: solid 2px #333;
  font-size: 1.25em;
}

td {
  padding: .75rem;
}

tbody tr:nth-child(even) {
  background-color: #eee;
}

blockquote {
  background-color: #eee;
  padding: 1rem 4rem 2rem;
  border-left: solid 8px #444;
  width: max-content;
  margin-left: 0;
}

blockquote p {
  font-size: 1.5em;
  text-align: left;
  font-weight: bold;
}

blockquote footer {
  text-align: right;
  font-style: italic;
}

pre {
  color: #fff;
  background-color: #333; 
  padding: 4rem;
  line-height: 2;
  white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


              
            
!

JS

              
                // # VARIABLES

//https://www.dropbox.com/s/fbm4uo5urw4rq6i/Front-PottingSoil.psd?dl=0 

// ## general
const body = document.body; // get body
let fontSize = body.style.fontSize; // get body style font size 
fontSize = "16px"; // set starting font size to 16px
let bodyFontSize = parseInt(fontSize, 10); // convert font size stting to a number, with no pixels.
let fontMod = 2; // modifier number that the font will be increased or decerased by
// ## buttons
const decreaseButton = document.getElementById('decrease-fontSize'); // get decrease button
const increaseButton = document.getElementById('increase-fontSize'); // get increase button

// # FUNCTIONS
function updateSize() {
  // update inline font-size style
  body.style.fontSize = `${bodyFontSize}px`; 
}

function decreaseText() {
  // increase font size by determined mod number, do not let it be smaller than 12
  if (bodyFontSize >= 12) {
    bodyFontSize -= fontMod;
  } 
  // console.log(`It's ${bodyFontSize}px`);
  
  // update inline styles with new number
  updateSize();
} 

function increaseText() {
  // increase font size by determined mod number, do not let it be largert than 32
  if (bodyFontSize <= 32) {
    bodyFontSize += fontMod;
  } 
  // console.log(`It's ${bodyFontSize}px`);
  
  // update inline styles with new number
  updateSize();
}

// # EVENT LISTENERS

// make the button do the decreasing thing
decreaseButton.addEventListener('click', decreaseText); 
// make the button do the increasing thing
increaseButton.addEventListener('click', increaseText);
              
            
!
999px

Console