cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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
  %head
    <script src="//use.edgefonts.net/questrial:n4:all.js"></script>

  %body
    <svg style="display: none;"><defs>
    <symbol id="arrows-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.98 18.06"><defs><style>.cls-1{fill:#0A259E;}</style></defs><title>arrows up</title><polygon id="arrow2" class="cls-1" points="0 18.06 8.98 6 17.98 18.06 8.98 13.05 0 18.06"/><polygon id="arrow1" class="cls-1" points="0 10.01 8.94 0 17.98 10.01 8.98 6 0 10.01"/>
    <symbol id="arrows-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.98 18.06"><defs><style>.cls-1{fill:#0A259E;}</style></defs><title>arrows down</title><polygon id="arrow2" class="cls-1" points="17.98 0 9 12.06 0 0 9 5.02 17.98 0"/><polygon id="arrow1" class="cls-1" points="17.98 8.05 9.04 18.06 0 8.05 9 12.06 17.98 8.05"/></defs>	</svg>
    .container
      
      #inputcontainer.slide.slidedown
        .cardform
          %form
            %h3 Card 1
            %p Card Front:
            %input.cardinput{:onkeyup => "textinput1(this.value , 'crdfrnt1')", :type => "text"}/
            %p Card Back:
            %input.cardinput{:onkeyup => "textinput1(this.value , 'crdback1')", :type => "text"}/
        .cardform
          %form
            %h3 Card 2
            %p Card Front:
            %input.cardinput{:onkeyup => "textinput1(this.value , 'crdfrnt2')", :type => "text"}/
            %p Card Back:
            %input.cardinput{:onkeyup => "textinput1(this.value , 'crdback2')", :type => "text"}/
        %addbtn
          %button{:onclick => "addDiv()"} Click
          

      #updown
        %button.upDownBtn{:onmouseup => "fncHideTop()"}
          #iconbox.point-up
            %svg.icon
              %use{"xlink:href" => "#arrows-up"}/
        -# <input type="button" value="Hide Front" onclick="fncHideTop('inputcontainer')"> 
        
      #cardContainer.cardcontainer
        #card1.card{:onmouseup => "fnccardswap('cardfront1', 'cardback1')"}
          #cardfront1.visible
            %h2.cardtext
              %span#crdfrnt1.card-unused Enter a Value
          #cardback1.hidden
            %h2.cardtext
              %span#crdback1.card-unused Enter A value
        #card2.card{:onmouseup => "fnccardswap('cardfront2', 'cardback2')"}
          #cardfront2.visible  
            %h2.cardtext
              %span#crdfrnt2.card-unused Enter a Value
          #cardback2.hidden
            %h2.cardtext
              %span#crdback2.card-unused Enter a Value
        


            
          
!
            
              @import "compass";

$color-main: #0A259E; $color-second: #395DFF; $color-third: #1D43EB; $color-contrast: #9E7700; $color-contrast-second: #EBB71D; $light-neutral: #f3ecdb;
$small-radius: 5px; $big-radius: 10px;
$spacing: 10px;
$breakpoint1: 43.75em; $breakpoint2: 56.25em;

// Typography sizing was done using the template I found at https://typecast.com/images/uploads/modernscale.css
// The full article explaining the typography scale can be found here: https://typecast.com/blog/a-more-modern-scale-for-web-typography I decided not to include the text to make this stylesheet a little shorter

html {
  font-family: questrial, sans-serif;
  // background-color: $color-contrast-second;
  background-color: $color-contrast-second; // Old browsers
  @include filter-gradient($color-main, $color-third, horizontal); // IE6-9 fallback on horizontal gradient
  @include background-image(linear-gradient(left top,  $color-main 0%,$color-second 24%,$color-third 50%,$color-second 79%,$color-main 100%));
  height: 100%;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.container {
  overflow: hidden;
  min-height: 100vh;
}

#inputcontainer {
  display: flex;
  margin: 0 $spacing ;
  Background-color: $light-neutral;
  overflow-y: scroll;
  flex-wrap: wrap;
}

.cardform{
  margin: $spacing;
  flex: 1;
}

#updown{
  display: flex;
  justify-content: center;
}
.slide {
  max-height: 500px;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: linear;
}
.slideup {
  max-height:0;
  overflow-y: hidden;
}
#iconbox{
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: linear;
  transition-delay: .7s;
}
.point-down{
  transform: rotate(180deg) translateY(5px);
}
.upDownBtn {
  height: 30px;
  width: 60px;
  border-radius: 0 0 30px 30px;
  background-color: $light-neutral;
  display: flex;
  justify-content: center;
  border-style: none;
}
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.cardcontainer {
  display: flex;
  flex-wrap: wrap;
}
.card {
  border-radius: $small-radius;
  flex: 1 1 auto;
  width: 18%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: $spacing;
  background: url("http://library.roblahoda.com/lines1.png");
  background-color: $light-neutral;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
}
.card:nth-last-child(2):nth-child(3n) {
  min-width: 33%;
}
// This code keeps the last item from becoming a single item that stretches across the page by taking the child that's 2nd to last and if it's also in the 3rd column (3n) it makes the min-width wider to force it to the next line. Got the idea from http://www.heydonworks.com/article/flexbox-grid-finesse#dealing-with-remainders-of-1
.cardtext {
  color: $color-main;
  margin: $spacing;
}
.hidden {
  height: 0px;
  width: 0px;
  overflow: hidden;
}
.card-unused {
  opacity: 0.2;
}
input{
  border-color: lighten($color-main, 50);
  border-radius: 5px;
  padding: 5px;
  border-style: solid;
}
            
          
!
            
              function fnccardswap(cardfront, cardback) {
  if (document.getElementById(cardfront).className.match(/(?:^|\s)visible(?!\S)/)) {
    document.getElementById(cardfront).className = document.getElementById(cardfront).className.replace(/(?:^|\s)visible(?!\S)/g, ' hidden');
    document.getElementById(cardback).className = document.getElementById(cardback).className.replace(/(?:^|\s)hidden(?!\S)/g, ' visible');

  } else {
    document.getElementById(cardfront).className = document.getElementById(cardfront).className.replace(/(?:^|\s)hidden(?!\S)/g, ' visible');
    document.getElementById(cardback).className = document.getElementById(cardback).className.replace(/(?:^|\s)visible(?!\S)/g, ' hidden');
  };
};

function fncHideTop() {
  if (document.getElementById('inputcontainer').className.match(/(?:^|\s)slidedown(?!\S)/)) {
    document.getElementById('inputcontainer').className = document.getElementById('inputcontainer').className.replace(/(?:^|\s)slidedown(?!\S)/g, ' slideup');
    document.getElementById('iconbox').className = document.getElementById('iconbox').className.replace(/(?:^|\s)point-up(?!\S)/g, ' point-down');
  } else {
    document.getElementById('inputcontainer').className = document.getElementById('inputcontainer').className.replace(/(?:^|\s)slideup(?!\S)/g, ' slidedown');
    document.getElementById('iconbox').className = document.getElementById('iconbox').className.replace(/(?:^|\s)point-down(?!\S)/g, ' point-up');
  };
};

function textinput1(val, cardlocation) {
  if (!val || /^\s*$/.test(val)) {
    document.getElementById(cardlocation).innerHTML = 'Enter a Value';
    document.getElementById(cardlocation).className = document.getElementById(cardlocation).className.replace(/(?:^|\s)card-used(?!\S)/g, ' card-unused');

  } else {
    document.getElementById(cardlocation).innerHTML = val;
    document.getElementById(cardlocation).className = document.getElementById(cardlocation).className.replace(/(?:^|\s)card-unused(?!\S)/g, ' card-used');
  };
};

function textinput2(val, cardlocation) {
  document.getElementById(cardlocation).innerHTML = val;
  document.getElementById(cardlocation).className = document.getElementById(cardlocation).className.replace(/(?:^|\s)card-unused(?!\S)/g, '');
};

function ping(value, value2){ console.log(value + value2);};

var i = 3;

function addDiv() {

  var crdFrntTxt = ["crdfrnt", i].join('');
  var crdBackTxt = ["crdback", i].join('');

  var h3Node = document.createElement("h3");
  var h3NodeText = document.createTextNode("Card " + i);
  h3Node.appendChild(h3NodeText);

  var pFrontNode = document.createElement("p");
  var pFrontNodeText = document.createTextNode("Card Front:");
  pFrontNode.appendChild(pFrontNodeText);

  var inputFrontNode = document.createElement("input");
  inputFrontNode.className = "cardinput";
  inputFrontNode.onkeyup = function() {
    textinput1(this.value, crdFrntTxt);
  };

  var pBackNode = document.createElement("p");
  var pBackNodeText = document.createTextNode("Card Back:");
  pBackNode.appendChild(pBackNodeText);

  var inputBackNode = document.createElement("input");
  inputBackNode.className = "cardinput";
  inputBackNode.onkeyup = function() {
    textinput1(this.value, crdBackTxt);
  };

  var formNode = document.createElement("form");
  formNode.appendChild(h3Node);
  formNode.appendChild(pFrontNode);
  formNode.appendChild(inputFrontNode);
  formNode.appendChild(pBackNode);
  formNode.appendChild(inputBackNode);

  var inputNode = document.createElement("div");
  inputNode.className = "cardform";
  inputNode.appendChild(formNode);

  //Beginning of card code

  var crdFrntSwapTxt = ["cardfront", i].join('');
  var crdBackSwapTxt = ["cardback", i].join('');
  var cardNodeId = ["card", i].join('');

  var spanFrontNode = document.createElement("span");
  spanFrontNode.className = "card-unused";
  spanFrontNode.id = crdFrntTxt;
  var spanFrontNodeText = document.createTextNode("Enter A Value");
  spanFrontNode.appendChild(spanFrontNodeText);

  var h2FrontNode = document.createElement("h2");
  h2FrontNode.className = "cardtext";
  h2FrontNode.appendChild(spanFrontNode);

  var divFrontNode = document.createElement("div");
  divFrontNode.className = "visible";
  divFrontNode.id = crdFrntSwapTxt;
  divFrontNode.appendChild(h2FrontNode);

  var spanBackNode = document.createElement("span");
  spanBackNode.className = "card-unused";
  spanBackNode.id = crdBackTxt;
  var spanBackNodeText = document.createTextNode("Enter A Value");
  spanBackNode.appendChild(spanBackNodeText);

  var h2BackNode = document.createElement("h2");
  h2BackNode.className = "cardtext";
  h2BackNode.appendChild(spanBackNode);

  var divBackNode = document.createElement("div");
  divBackNode.className = "hidden";
  divBackNode.id = crdBackSwapTxt;
  divBackNode.appendChild(h2BackNode);

  var cardNode = document.createElement("div");
  cardNode.className = "card";
  cardNode.id = cardNodeId;
  cardNode.onmouseup = function() { fnccardswap(crdFrntSwapTxt , crdBackSwapTxt); };
  cardNode.appendChild(divFrontNode);
  cardNode.appendChild(divBackNode);

  document.getElementById("inputcontainer").appendChild(inputNode);
  document.getElementById("cardContainer").appendChild(cardNode);
  
  console.log(cardNode.onmouseup);
  console.log(cardNode);
  i++;
};

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console