Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

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

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <body>
  <div class="container">
    <h2>Office Ipsum</h2>
    <!-- begin optional -->
    <a id="reset-cookie-button" href="#">Click me to reset (for testing purposes)</a>
    <!-- end optional -->

    <p>We want to see more charts this medium needs to be more dynamic nor dogpile that yet Q1 get buy-in powerpoint Bunny. Waste of resources turd polishing, for let's prioritize the low-hanging fruit. Tribal knowledge the last person we talked to said
      this would be ready imagineer, and gain traction yet radical candor criticality . Loop back thought shower, nor time to open the kimono so work powerPointless. You gotta smoke test your hypothesis to be inspired is to become creative, innovative
      and energized we want this philosophy to trickle down to all our stakeholders first-order optimal strategies rock Star/Ninja, for eat our own dog food teams were able to drive adoption and awareness. Sorry i didn't get your email forcing function
      , disband the squad but rehydrate as needed. Loop back we need a paradigm shift what's our go to market strategy?. Core competencies gage [sic] where the industry is heading and give back to the community what we’ve learned cross functional teams
      enable out of the box brainstorming, so game-plan. Vertical integration push back core competencies take five, punch the tree, and come back in here with a clear head touch base I just wanted to give you a heads-up. Turn the ship a loss a day will
      keep you focus can you slack it to me? lean into that problem yet i also believe it's important for every member to be involved and invested in our company and this is one way to do so for game plan, and synergize productive mindfulness. That ipo
      will be a game-changer pixel pushing, and where the metal hits the meat where the metal hits the meat nor thought shower, nor they have downloaded gmail and seems to be working for now programmatically.</p>

    <p>Meeting assassin tribal knowledge for we've got to manage that low hanging fruit or 360 degree content marketing pool so strategic staircase, and that jerk from finance really threw me under the bus. Cross sabers on this journey the right info at
      the right time to the right people run it up the flagpole, but wheelhouse, manage expectations nor what about scaling components to a global audience?. Downselect we need to make the new version clean and sexy, yet social currency yet at the end
      of the day quarterly sales are at an all-time low granularity. We need to get all stakeholders up to speed and in the right place put in in a deck for our standup today yet slow-walk our commitment yet this medium needs to be more dynamic you gotta
      smoke test your hypothesis, target rich environment, yet let's schedule a standup during the sprint to review our kpis. Crank this out focus on the customer journey for drive awareness to increase engagement and we need to future-proof this, so
      deploy to production. I have zero cycles for this what are the expectations for we need to touch base off-line before we fire the new ux experience. Pig in a python. Accountable talk per my previous email what about scaling components to a global
      audience?, window of opportunity nor where do we stand on the latest client ask. Strategic high-level 30,000 ft view you gotta smoke test your hypothesis prairie dogging, yet dear hiring manager:, so we need to harvest synergy effects thinking outside
      the box. Reach out.</p>

    <p>Game-plan can we align on lunch orders. This vendor is incompetent . Core competencies i’ve been doing some research this morning and we need to better yet thinking outside the box even dead cats bounce cannibalize. We're ahead of the curve on that
      one i don't want to drain the whole swamp, i just want to shoot some alligators and a loss a day will keep you focus can we take this offline this is our north star design. Dunder mifflin. Build on a culture of contribution and inclusion. Strategic
      fit high-level so going forward but take five, punch the tree, and come back in here with a clear head c-suite please use "solutionise" instead of solution ideas! :). You gotta smoke test your hypothesis proceduralize, for make sure to include in
      your wheelhouse powerpoint Bunny quick-win or we don't need to boil the ocean here. Golden goose focus on the customer journey move the needle, and quantity or I have zero cycles for this rock Star/Ninja, or make sure to include in your wheelhouse.
      Roll back strategy. Roll back strategy prairie dogging this is a no-brainer, or post launch. Talk to the slides you gotta smoke test your hypothesis offline this discussion pre launch pushback. Drink from the firehose can we parallel path enough
      to wash your face, or low hanging fruit. Race without a finish line win-win-win put a record on and see who dances, i don't want to drain the whole swamp, i just want to shoot some alligators. Win-win-win finance criticality but productize. Reach
      out that's mint, well done yet usabiltiy, or market-facing focus on the customer journey yet we are running out of runway or value-added. Low engagement thought shower tbrand terrorists disband the squad but rehydrate as needed or loop back. Products
      need full resourcing and support from a cross-functional team in order to be built, maintained, and evolved the last person we talked to said this would be ready are we in agreeance, so can you champion this but mobile friendly circle back. Agile
      i also believe it's important for every member to be involved and invested in our company and this is one way to do so and how much bandwidth do you have and usabiltiy customer centric shotgun approach.</p>

    <p>Put in in a deck for our standup today accountable talk game plan, yet deploy. Productize how much bandwidth do you have, re-inventing the wheel high touch client criticality . Fire up your browser. Eat our own dog food value-added, for get buy-in.
      Imagineer. Hit the ground running build on a culture of contribution and inclusion for get all your ducks in a row, and we need more paper upsell. Screw the pooch staff engagement, for mobile friendly game plan, so all hands on deck. We have put
      the apim bol, temporarily so that we can later put the monitors on. Innovation is hot right now. Tbrand terrorists innovation is hot right now but product market fit prairie dogging, or wiggle room, so clear blue water for define the underlying
      principles that drive decisions and strategy for your design language. Upsell Q1. Not enough bandwidth window-licker, but those options are already baked in with this model a set of certitudes based on deductions founded on false premise for feature
      creep looks great, can we try it a different way. Agile make it look like digital, but bake it in horsehead offer baseline. Race without a finish line vertical integration we need to socialize the comms with the wider stakeholder community.</p>

    <p>Out of scope this is meaningless but 60% to 30% is a lot of persent. Run it up the flag pole baseline shelfware bells and whistles we're ahead of the curve on that one. Hammer out we need to harvest synergy effects yet re-inventing the wheel, optics
      powerpoint Bunny if you want to motivate these clowns, try less carrot and more stick high-level. Workflow ecosystem punter so throughput or strategic fit. Obviously that's mint, well done work flows cross functional teams enable out of the box
      brainstorming or back-end of third quarter or not enough bandwidth clear blue water. Create spaces to explore what’s next. That jerk from finance really threw me under the bus we need to leverage our synergies strategic staircase, yet can you ballpark
      the cost per unit for me, for can we parallel path. What's the status on the deliverables for eow? we need to button up our approach your work on this project has been really impactful touch base and flesh that out highlights but can I just chime
      in on that one. Circle back get buy-in quick win, so blue money, for usabiltiy, and this is a no-brainer. Hit the ground running can we parallel path. Even dead cats bounce build on a culture of contribution and inclusion, move the needle, and throughput
      yet fire up your browser. Productize re-inventing the wheel what's our go to market strategy? and staff engagement all hands on deck and digital literacy. Marketing computer development html roi feedback team website eat our own dog food cross functional
      teams enable out of the box brainstorming so can you champion this sacred cow one-sheet. Race without a finish line meeting assassin my supervisor didn't like the latest revision you gave me can you switch back to the first revision? the right info
      at the right time to the right people. Fast track .</p>

    <p>Cannibalize. Meeting assassin. 360 degree content marketing pool. UX I have zero cycles for this. Closer to the metal hire the best and bottleneck mice nor dear hiring manager: level the playing field, and obviously. Bells and whistles where do we
      stand on the latest client ask clear blue water throughput and bench mark quantity. Ultimate measure of success. Powerpoint Bunny we need distributors to evangelize the new line to local markets to be inspired is to become creative, innovative and
      energized we want this philosophy to trickle down to all our stakeholders, for action item, yet overcome key issues to meet key milestones. The horse is out of the barn pull in ten extra bodies to help roll the tortoise critical mass. Pixel pushing
      innovation is hot right now. Bench mark get six alpha pups in here for a focus group, but back-end of third quarter pro-sumer software. Do i have consent to record this meeting i dont care if you got some copy, why you dont use officeipsumcom or
      something like that ? finance. Re-inventing the wheel throughput. Are we in agreeance shoot me an email for knowledge is power for incentivization guerrilla marketing, yet goalposts a better understanding of usage can aid in prioritizing future
      efforts. All hands on deck back of the net drop-dead date, so draw a line in the sand sacred cow, so incentivization.</p>

  </div>
  <div id="cookie-banner" class="cookie-banner cookie-banner--hide">
    <span>We use cookies to personalise content, provide social media features, and analyse traffic. To disable cookies, this can be configured via the web browser. However this can limit your experience with our website.</span>
    <span id="cookie-banner-button" class="cookie-banner-button">Accept Cookies</span> <a class="cookie-banner-button" href="#">Learn More</a>
  </div>
</body>
!

CSS 

              
                /**
 * https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
 * bootstrap loaded, only for visual demonstration purposes
 * try out the mobile view, observing the @media rule in action for wrapping text 
 * 
 */

$bck: #fff;
$bck-banner: #000;
$bck-banner-i: #fff;
$bck-banner-btn: #fff;
$bck-banner-btn-i: #000;

body {
  background: $bck;
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  color: $bck-banner-i;
  text-align: center;
  padding: 1rem 1rem;
  background: $bck-banner;
  transition: all 5s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1);

  &--hide {
    display: none;
    bottom: -100%;
  }

  .cookie-banner-button {
    display: inline-block;
    cursor: pointer;
    padding: 0.85rem 1rem;
    margin-left: 0.45rem;
    color: $bck-banner-btn-i;
    font-size: 0.75rem;
    text-decoration: none; // optional: avoiding hyperlink underline
    letter-spacing: 1px;
    background: $bck-banner-btn;
  }
  
  // optional: refined solution for mobile responsive behaviour
  @media only screen and (max-width: 600px) {
    span {
      display: inline-block;
      padding: 10px;
    }
  }
}
!

JS 

              
                /**
 * using cookie.js (https://github.com/js-cookie/js-cookie)
 * 
 */

// define html elements used
const cookieBanner = document.getElementById("cookie-banner");
const cookieBannerButton = document.getElementById("cookie-banner-button");

if (!Cookies.get("accepted-cookies-consent")) {
  // hide 'accept cookies' banner, if user gives consent to use cookies
  cookieBanner.classList.remove("cookie-banner--hide");
}

// onclick event will create 'enable cookies' cookie
cookieBannerButton.onclick = function() {
  Cookies.set("accepted-cookies-consent", true, { expires: 7 });
  cookieBanner.classList.add("cookie-banner--hide");
};

/**
 * optional
 * 
 */
const cookieBannerResetButton = document.getElementById("reset-cookie-button");

cookieBannerResetButton.onclick = function() {
  Cookies.remove("accepted-cookies-consent");
  cookieBanner.classList.remove("cookie-banner--hide");
};
!
999px

Console