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.

            
              <div id="modal-container">
  <div class="modal-background">
    <div class="modal">
      <!--The h2 and p tags beow are just symbolic.
          They automatically get injected by jQuery
          when a button is clicked.
      <h2></h2>
      <p></p>
      -->
      <svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
								<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
							</svg>
    </div>
  </div>
</div>

<div class="content">
  <div class="buttons">
    <div id="one" class="button">Plan</div>
    <div id="two" class="button">Design</div>
    <div id="three" class="button">Develop</div>
    <div id="four" class="button">Launch</div>
    <div id="five" class="button">Grow</div>
  </div>
</div>
            
          
!
            
              * {
  box-sizing:border-box;
}

html,body {
  min-height:100%;
  //height:2000px;
  background-image:url(https://images.unsplash.com/photo-1513569536235-bf46baacc948?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=d1f881024df5fd89bb941cdc86324865);
  background-size:cover;
  background-position:top center;
  font-family:helvetica neue, helvetica, arial, sans-serif;
  font-weight:200;
  &.modal-active {
    overflow: hidden;
  }
}

#modal-container {
  position:fixed;
  display:table;
  height:100%;
  width:100%;
  top:0;
  left:0;
  transform:scale(0);
  z-index:1;
  &.one, &.two, &.three, &.four, &.five {
    transform:scale(1);
    .modal-background {
      background:rgba(0,0,0,.0);
      animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
      .modal {
        opacity:0;
        animation: scaleUp .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
      }
    }
    + .content {
      animation: scaleBack .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }
    &.out {
      animation: quickScaleDown 0s .5s linear forwards;
      .modal-background {
        animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        .modal {
          animation: scaleDown .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        }
      }
      + .content {
          animation: scaleForward .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
      }
    }
  }
}
    
  .modal-background {
    display:table-cell;
    background:rgba(0,0,0,.8);
    text-align:center;
    .modal {
      background:white;
      padding:50px;
      display:inline-block;
      border-radius:3px;
      font-weight:300;
      position:relative;
      width: 700px;
      top: 250px;
      h2 {
        font-size:25px;
        line-height:25px;
        margin-bottom:15px;
      }
      p {
        font-size:18px;
        line-height:22px;
      }
      .modal-svg {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        border-radius:3px;
        rect {
          stroke: #fff;
          stroke-width: 2px;
          stroke-dasharray: 778;
          stroke-dashoffset: 778;
        }
      }
    }
  }

.content {
  min-height:100%;
  height:100%;
  width: 300px;
  background:white;
  position:relative;
  z-index:0;
  h1 {
    padding:30px 0 30px 0;
    text-align:center;
    font-size:30px;
    line-height:30px;
  }
  .buttons {
    max-width:800px;
    margin:0 auto;
    padding:0;
    text-align:center;
    display: flex;
    flex-direction: column;  
    .button {
      width: 150px;
      display:inline-block;
      text-align:center;
      padding:10px 15px;
      margin:30px 30px 30px 70px;
      //background:red;
      font-size:18px;
      background-color:#efefef;
      border-radius:3px;
      box-shadow:0 1px 2px rgba(0,0,0,.3);
      cursor:pointer;
      &:hover {
        color:white;
        background:#009bd5;
      }
    }
  } 
}

@keyframes fadeIn {
  0% {
    background:rgba(0,0,0,.0);
  }
  100% {
    background:rgba(0,0,0,.7);
  }
}

@keyframes fadeOut {
  0% {
    background:rgba(0,0,0,.7);
  }
  100% {
    background:rgba(0,0,0,.0);
  }
}

@keyframes scaleUp {
  0% {
    transform:scale(0) translateX(-500px);
    opacity:0;
  }
  80% {
    transform:scale(1) translateX(1000px);
    opacity:1;
  }
  100% {
    transform:scale(1) translateX(0);
    opacity:1;
  }
}

@keyframes scaleDown {
  0% {
    transform:scale(1) translateX(0px);
    opacity:1;
  }
  100% {
    transform:scale(0) translateX(-500px);
    opacity:0;
  }
}

@keyframes scaleBack {
  0% {
    transform:scale(1);
  }
  100% {
    transform:scale(.85);
  }
}

@keyframes scaleForward {
  0% {
    transform:scale(.85);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes quickScaleDown {
  0% {
    transform:scale(1);
  }
  99.9% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}


            
          
!
            
              $('.button').click(function(){
  var buttonId = $(this).attr('id');
  var modalText;
  var modal1Text = "<h2>Plan</h2><p>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.</p>";
  var modal2Text = "<h2>Design</h2><p>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.</p>";
  var modal3Text = "<h2>Develop</h2><p>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.</p>";
  var modal4Text = "<h2>Launch</h2><p>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.</p>";
  var modal5Text = "<h2>Growth</h2><p>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!</p>";
  
  switch(buttonId) {
    case 'one':
      modalText = modal1Text
      break;
    case 'two':
      modalText = modal2Text
      break;
    case 'three':
      modalText = modal3Text
      break;
    case 'four':
      modalText = modal4Text
      break;
    case 'five':
      modalText = modal5Text
      break;
    default:
      modalText = "You broke it!!!!"
      break;     
  }
  
  $('#modal-container').removeAttr('class').addClass(buttonId);
  $('.modal').html(modalText);
  $('body').addClass('modal-active');


  $('#modal-container').click(function(){
    $(this).addClass('out');
    $('body').removeClass('modal-active');
});})
            
          
!
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