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">
  <div class="button-container">
    <button type="button" id='one' class="show">Plan</button>
    <button type="button" id='two' class="show">Design</button>
    <button type="button" id='three' class="show">Develop</button>
    <button type="button" id='four' class="show">Launch</button>
    <button type="button" id='five' class="show">Growth</button>
  <p>We make the internet look better & easier to use. Websites are powerful assets to any company when designed and developed by professionals. At GC Web Development, we build websites that not only our clients love, but their customers do too. From the initial concept through to a successful implementation, GC Web Development is able to deliver end-to-end, mission critical web design solutions on time, within the agreed budget. A professionally designed website is the most cost effective marketing tool available in the world today. We are confident that all of our clients would not hesitate to recommend our web design services. Please feel free to read our web design testimonials here We love to create websites, so if you’re in need of an awesome one, send us a message and let’s get started.</p>

<div class="slideout">
  <button type="button" class="hide">Close</button>
              body {
  background-image: url(;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: -apple-system, 
    "Segoe UI", 
    "Helvetica Neue", 
  line-height: 1.5;
  margin: 1em;
  overflow: hidden;
.container {
  display: flex;
  flex-direction: row;
  display: flex;
  flex-direction: column;

button {
  background-color: #fff;
  border: 1px solid #0363c8;
  border-radius: 3px;
  color: #0363c8;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  padding: .5em 1em;
  margin: 20px;
  text-transform: uppercase; 

button:hover {
  background-image: linear-gradient(to right, #0363c8, #0391e2);
  color: #fff;

.slideout {
  background: linear-gradient(to bottom, #003351 0%, #1d0a3a 100%); 
  color: #fff;
  padding: 2em 3em 3em 3em;
  position: absolute;
  left: -760px;
  top: 0;
  transition-duration: 0.2s;
  width: 600px;

.slideout.on {
  left: 400px;

.hide {
  margin: 0
              $('.show').click(function() {
  var buttonId = $(this).attr('id');
  var slideText;
  var slideH2; 
  var slideH2_1 = "Plan";
  var slideText_1 = "We meet with you either in person, over the phone, or by skype (depending on your location and availability), and discuss your goals, your budget and timing requirements. It's vital that we get to you know you, how your business operates and who your customers are. Once we know that, we can develop a strong plan to execute your ideas. Once we've decided on the exact details of the project with you, we move into the Design Phase One, where we start to conceptualize the overall look and feel of your new website.";
  var slideH2_2 = "Design";
  var slideText_2 = "We begin the design phase by creating wireframes. Wireframes are rough sketches where we put our ideas on paper for the layout and organization of your website's content. Wireframes are typically just for our internal use as we begin to design the look and feel of your website.  We provide you with what is called a mockup, and this is a visual representation of the design we create for your new website's homepage. We'll review it with you, discuss the choices we made for the design, review your feedback and carry out any necessary revisions. Once the homepage is designed and approved, we move onto Design Phase Two, where we mockup all inner pages of your website.";
  var slideH2_3 = "Develop";
  var slideText_3 = "Once you've approved the inner page designs, we begin the coding phase. This is where the true geeky stuff happens. The coding phase takes the designs and turns them into a fully functional website, full of splendid interactivity, clean code that Google loves, and pages that load quickly. During this stage we also carry out a lot of SEO (search engine optimization) so that your website ranks high on search engines like Google, and Bing when potential customers are looking for you.";
  var slideH2_4 = "Launch";
  var slideText_4 = "Your shiny new website is almost ready for launch now! We wrap things up with a rigorous internal testing phase of the site and all of its functions, before sending it your way for further testing. If you've got some revisions at this stage, we're happy to do them. Once any bugs have been eliminated, and the final touches have been completed, we're ready to launch your awesome new website! We take care of everything involved in this process also, including editing the settings of your domain name to point to the new web server, and making sure your other settings are all correct and ready to go.";
  var slideH2_5 = "Growth";
  var slideText_5 = "You didn't think we'd just leave you once the website was completed did you?! Just because the web development project has been completed, we want to keep working with you regularly to ensure that we are growing your website and online marketing further every day. After your new site is launched we can work with you on creating a social media strategy. Once you're equipped with an exceptional website created by GC Web Development, there's no limit to what your company can achieve on the internet!";
  switch(buttonId) {
    case 'one':
      slideH2 = slideH2_1
      slideText = slideText_1
    case 'two':
      slideH2 = slideH2_2
      slideText = slideText_2
    case 'three':
      slideH2 = slideH2_3
      slideText = slideText_3
    case 'four':
      slideH2 = slideH2_4
      slideText = slideText_4
    case 'five':
      slideH2 = slideH2_5
      slideText = slideText_5
      slideText = "You broke it!!!!"
  $('.slideout h2').html(slideH2);
  $(".slideout p").html(slideText);

$('.hide').click(function() {

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