css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <a href="" class="modalactivator">Click Here for Modal<i class="ion-chevron-right"></i></a>

    <!-- Start: Modal -->
    <div class="overlays"> 
        <div class="modals">
            <div class="close-btn"><i class="ion-close"></i></div>
            <div class="text-box">
                <p class="lead">Modal Heading</p>
                <p>Modal text description describing anything that could go accordingly just to occupy some space!</p>
            </div>
            <div class="graphic"></div>
            <form>
                <input type="text" placeholder="Some Name Textfield">
                <input type="text" placeholder="Random text-box">
                <select name="sources" id="sources" class="custom-select sources" placeholder="Select">
                  <option value="1">Option - 1</option>
                  <option value="2">Option - 2</option>
                  <option value="3">Option - 3</option>
                  <option value="4">Option - 4</option>
                  <option value="5">Option - 5</option>
                </select>
                <textarea cols="20" rows="4" placeholder="Description TextArea"></textarea>
                <br/>
                <input type="submit">
            </form>

        </div>
    </div>
            
          
!
            
              $yellow: #FFEE58

.overlays
  position: absolute
  background: fade-out($yellow, 0.2)
  top: 0
  left: 0
  right: 0
  bottom: 0
  display: flex
  justify-content: center
  align-items: center
  opacity: 0
  pointer-events: none
  transition: all 300ms ease-in-out

  &.is-open
    opacity: 1
    pointer-events: auto

    .modals
      transform: translate(0, 0)

.modals
  font-family: "Maven Pro"
  transform: translate(0, -100px)
  transition: all 600ms cubic-bezier(0.25, 0.35, 0, 1.74)
  max-width: 700px
  background: white
  padding: 20px
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4)
  position: relative

  .close-btn
    position: absolute
    z-index: 3
    top: -30px
    right: -30px
    height: 30px
    width: 30px
    font-size: 30px
    text-align: center
    line-height: 30px
    cursor: pointer
    transition: all 0.25s ease-in-out

    &:hover
      transform: scale(1.2)

  .text-box
    max-width: 100%

    .lead
      color: black
      font-size: 30px
      line-height: 1.3

    p
      color: #999
      font-size: 18px

  .graphic
    position: absolute
    top: 0
    right: 0
    width: 256px
    height: 280px

  form
    position: relative
    z-index: 2
    background: black
    padding: 15px
    margin: 30px -20px -20px
    display: flex
    flex-wrap: wrap

    textarea
      width: 100%
      height: 140px
      display: block
      padding: 15px 20px
      border: none
      font-size: 18px
      margin-bottom: 10px

      &:focus
        outline: none
        box-shadow: 0 0 0 2px $yellow inset


    input
      height: 60px
      border: 1px solid #000000
      display: block
      padding: 0 20px
      font-size: 18px
      margin-bottom: 6px
      font-family: "Maven Pro"

      &:focus
        outline: none
        box-shadow: 0 0 0 2px $yellow inset

      &[type="text"]
        border: 1px solid #000000
        width: 35%

      &[type="submit"]
        background: $yellow
        width: 25%
        text-align: center
        text-transform: uppercase
        cursor: pointer
        transition: all 0.2s ease-in

        &:hover
          box-shadow: 0 0 0 2px $yellow inset, 0 0 0 4px black inset
          letter-spacing: 1.3px
          font-weight: 700

        &:active
          transform: scale(0.9)

@media (max-width: 820px)
  .modals
    margin: 10px

    .close-btn
      right: 0
      font-size: 25px

@media (max-width: 720px)
  .modals
    margin: 10px

    .close-btn
      right: 0
      font-size: 25px

@media (max-width: 718px)
  .graphic
    display: none

  .modals
    .text-box
      max-width: 100%

    .text-box
      .lead
        font-size: 22px
        line-height: 1.3px

      p
        font-size: 18px

    form
      flex-direction: column
      margin: 20px -20px -20px

      textarea
        margin-bottom: 0

      input[type="submit"]
        margin: 0
        width: 50%

      input[type="text"]
        width: 100%

@media (max-width: 414px)
  .modals

    .close-btn
      top: 0

    .text-box
      .lead
        font-size: 20px
        line-height: 1.3px

      p
        font-size: 14px


@media (max-width: 360px)
  .modals
    .close-btn
      top: 0

    .text-box
      .lead
        font-size: 18px
        line-height: 1.3px

      p
        font-size: 12px

    form
      margin: 20px -20px -20px

@media (max-width: 320px)
  .modals
    .close-btn
      top: 0

    .text-box
      .lead
        font-size: 15px
        line-height: 1px

      p
        font-size: 12px

    form
      margin: 15px -20px -20px

      input
        height: 45px

      textarea
        height: 100px


.modalactivator
  font-family: "Roboto Slab"
  background: black
  color: $yellow
  cursor: pointer
  font-size: 15px
  font-weight: 200
  letter-spacing: 1px
  position: absolute
  top: 50%
  left: 30%
  text-decoration: none
  padding: 1em 2.25em
  transition: all 200ms ease-in

  &:hover
    background: black
    color: $yellow
    text-decoration: none
    box-shadow: 0 0 0 2px black inset, 0 0 0 4px white inset

  &:active
    transform: scale(0.9)
    text-decoration: none



  .ion-chevron-right
    font-size: 0.80em
    margin-left: 0.25em

@media (max-width: 740px)
  .modalactivator
    font-size: 15px

@media (max-width: 650px)
  .modalactivator
    font-size: 12px


.custom-select-wrapper
  position: relative
  display: inline-block
  user-select: none

  select
    display: none

.custom-select-trigger
  position: relative
  top: 1px
  display: block
  width: 201px
  padding: 0 20px
  font-size: 20px
  color: #000
  line-height: 58px
  background: white
  cursor: pointer
  border-left: 1px solid #000
  margin-bottom: 5px

  &:after
    position: absolute
    display: block
    content: ""
    width: 10px
    height: 10px
    top: 50%
    right: 25px
    margin-top: -4px
    border-bottom: 1px solid #000
    border-right: 1px solid #000
    transform: rotate(45deg) translateY(0)
    transition: all 0.3s ease-in-out
    transform-origin: 50% 0

.custom-select.opened .custom-select-trigger:after
  margin-top: 3px
  transform: rotate(-135deg) translateY(-100%)

.custom-options
  position: absolute
  display: block
  top: 100%
  left: 0
  right: 0
  min-width: 100%
  margin: 15px 0
  border: 1px solid $yellow
  box-sizing: border-box
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.07)
  background: #000
  transition: all 0.4s ease-in-out
  opacity: 0
  visibility: hidden
  pointer-events: none
  transform: translateY(-15px)

.custom-select.opened .custom-options
  opacity: 1
  visibility: visible
  pointer-events: all
  transform: translateY(0)

.custom-options:before
  position: absolute
  display: block
  content: ""
  bottom: 100%
  right: 25px
  width: 7px
  height: 7px
  margin-bottom: -4px
  border-top: 1px solid $yellow
  border-left: 1px solid $yellow
  background: #000
  transform: rotate(45deg)
  transition: all 0.4s ease-in-out

.custom-option
  font-family: "Maven Pro"
  position: relative
  display: block
  padding: 0 20px
  border-bottom: 1px solid $yellow
  font-size: 18px
  font-weight: 400
  color: #fff
  line-height: 40px
  cursor: pointer
  transition: all 0.4s ease-in-out

  &:last-of-type
    border-bottom: 0

  &:hover, &.selection
    background: #fff
    color: black


@media (max-width: 718px)
  .custom-select-trigger
    width: 100%
    margin-bottom: 10px

@media(max-width: 320px)
  .custom-select-trigger
    line-height: 45px

            
          
!
            
              // Modal Appear and close

$(function() {

  $('.modalactivator').click(function(){
    $('.overlays').addClass('is-open');
    return false;
  });

  $('.close-btn').click(function(){
    $('.overlays').removeClass('is-open')
  });

});

//Select JS
$(".custom-select").each(function() {
    var cls = $(this).attr("class"),
        id = $(this).attr("id"),
        name = $(this).attr("name");
    var temp = '<div class="' + cls + '">';
    temp += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
    temp += '<div class="custom-options">';
    $(this).find("option").each(function() {
        temp += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
    });
    temp += '</div></div>';

    $(this).wrap('<div class="custom-select-wrapper"></div>');
    $(this).hide();
    $(this).after(temp);
});
$(".custom-option:first-of-type").hover(function() {
    $(this).parents(".custom-options").addClass("option-hover");
}, function() {
    $(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
    $('html').one('click', function() {
        $(".custom-select").removeClass("opened");
    });
    $(this).parents(".custom-select").toggleClass("opened");
    event.stopPropagation();
});
$(".custom-option").on("click", function() {
    $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
    $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
    $(this).addClass("selection");
    $(this).parents(".custom-select").removeClass("opened");
    $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});

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

Console