Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

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.

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

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

              
                .hieroglyph.single-cartouche
			.glyph-wrapper
				ul
					li.
						<span>๐“ˆ–๐“‡‹๐“†“๐“‡‹๐“ƒ€๐“ฏ๐“</span>
              
            
!

CSS

              
                @charset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansegyptianhieroglyphs.css);

/* hieroglyphs */

html{
  -webkit-text-size-adjust:100%;
  height: 100%;
}

body{
  position: relative;
  color: #444;
  font-size:18px;
  font-family:'Hiragino Kaku Gothic Pro', 'ใƒ’ใƒฉใ‚ฎใƒŽ่ง’ใ‚ด Pro W3', 'Meiryo', 'ใƒกใ‚คใƒชใ‚ช', sans-serif;
  line-height:1.65;
  background:#fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  * {
    box-sizing: border-box;
  }
}

.hieroglyph {
  font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;
  font-size: 2em;
  letter-spacing: 0.5em;
  line-height: 2;
}

.default-font {
  font-family:'Hiragino Kaku Gothic Pro', 'ใƒ’ใƒฉใ‚ฎใƒŽ่ง’ใ‚ด Pro W3', 'Meiryo', 'ใƒกใ‚คใƒชใ‚ช', sans-serif;
}

.hieroglyph {
  width: 1240px;
  padding: 1em 0;
  margin: 0 auto;
  background: #faad75;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAW+klEQVR4Xu3dbdQVc9QG8G6KECKKEEV5SYgiRBH/EFEURRRFFCKK8pIIRRTlnfJWhCKKNlGEEEUSIYQoIhRR9Kz1rPWbD7PW833WeqYvrXPuc2b+M7Ovva/r2nvmVPzxxx+x+eabpz59+sSIESPSsGHDol+/fmn06NHRq1ev1KRJk5gzZ07adNNN488//0zPPPNMnHzyyembb76JnXfeOXXv3j0eeOCBVLNmzVi+fHn2euHChbHnnnumTz75JPbaa6+08cYbx99//52mTJkSbdq0Sc8991yceOKJqUOHDvHUU0+l/fbbL+bNm5eaNWsWs2fPTjvttFN8++236aGHHoqzzz47bb311vHLL7+kI488Ml599dU0d+7caNy4cXr77bfj4IMPThMnToz27dunM844Ix577LF06aWXxm233ZaWLl0atWvXzvZ7yCGHxFtvvZXt75577omePXtm269Xr14sXrw4DR06NPr375/at28fEydOzNZpv2PGjIlu3bqld999Nw488MA0e/bsaNasWbauzTbbLFavXp3mz58fjRo1Svbzzz//xEYbbZTq1q0bX331VbauXr16xejRo1NFpfJfoc5AxYQJE6Jjx46pX79+MWzYsLT33nvHxx9/nFq0aBEzZ85MXbt2jbFjx6ZXXnkljjrqqNSgQYNYtGhRckVFioiHMIhYvHhx1KtXL916661x2WWXpYqKili/fn267rrr4tprr0277LJLfP311+nmm2+OK664IjVu3Djmzp2b3nvvvWjatGnaY4894tNPP80QBnlffvll7Lrrrmn77bePH374IVvvQQcdFO+8806aN29e7LfffmnAgAFx4403prZt28bkyZPToEGDYtCgQWnUqFHRu3fvdPHFF8fIkSMzhF9zzTUxePDgtGjRomjQoEGGuA033DD+/fff1LNnz7jnnnvSmjVromrVqmnFihVRo0aNbH0QBaG237dv3xg+fHhyvs8777y49957M2ReeeWVcdNNN5UIKRQ8KlWqVFGlSpVYu3ZtFrm//fZbbLnllunzzz+P+vXrpzfffDMOPfTQVKNGjVixYkXac889Y+HChalRo0Yxf/78LHf6Xo8ePeL+++9PkydPjrZt26Yff/wxtttuuzRt2rRo3bp1mjRpUrRr1y699tprccQRR2Q14Oqrr47rr78+qx1fffVV1K1bN4kkufuiiy6KO+64I1vfjBkzomXLlgky5OpKlSpFpUqV0mmnnRZPPPFEmjNnTjRp0iTL5SeccEI8//zzGSLVDLXA8Tdt2jTee++9BCHelxFmzZoVzZs3T9avFh599NHx8ssvZ/u1DplF7YHEJUuWRJ06dUqEFA4hTz75ZJx66qkZGzrrrLPi4Ycfzq6siHElRYxcjC2I0FatWsX06dOzXL127dqoUqVKGjJkSAwcODCNGzcuOnfunLEsf4eYRx99NLp06ZLOOeecePDBB9N///0XG2ywQYac4447LqZOnZqxmXXr1kXlypWTWiXS1Y7x48dHp06dkv+tb+zYsdG1a9ekBtrO9OnTo1WrVhlbxJZq164dS5cuTa1bt45p06ZlrM66DzjggHj//fczVoU9qnkffPBB7L///mnbbbeNn376KTs/zp/zWbKsgkGkAi+uX79+fP755xk7eeqpp6JDhw5Z7pRz6ZD7778/evTokbGykSNHxsUXX5zk7h122CG+//77LJKxtWXLlkWtWrUyBGJv/v7XX3/FJptskiBXzu7du3eMGjUqvfDCC3H88cdnLAnbUQsvv/zyuOWWW5L9WJcaRteIaIjp3LlzjBs3Lt15551x4YUXZvqjW7duMWbMmCTHWwfW2LFjx5gwYUIW8XSQmkWnqYEQI6P8/PPPsc0226Rff/01ttpqq7KGFAwglSrwbkrca1cwpRQRkUU05f3444/H6aefnilpShk7wsooazm9S5cu8eijjyaIFPHYCXaGz/s+5FD6/m7dEEyXUPAch1WrVkW1atWy/WJ7HAafk9OrV68eK1euTCeddFI8++yzicJXMx555JE488wzM52k9nAGIEQmoXtkAjWvTZs2MWXKlHTBBRfEXXfdVSKkcAjBej766KPYZ599Mo+FwnTF5UJXWi6muA8//PB4/fXXMzYjl9q+78u9FD1Eff/997HDDjtktaFdu3YxadKkhP1Q5lhWy5YtY8aMGRmrocwhijKGREqdrsIaIcD+eHcUNeTSGxCqZkGMWnT77bfHJZdckh0H1mcd3333Xey4445piy22iN9//z3ZDoSWLKtgEKnYd99948MPP8zcT1d0xIgR0adPn3TsscfGiy++mOmU5s2bx6xZs9KCBQuiYcOGmTcj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") center center repeat rgb(250, 173, 117);
  &.single-cartouche {
    display: block;
    width: auto;
    padding: 0;
    text-align: center;
    background: #fff;
    .glyph-wrapper {
      li {
        &:before,&:after {
          display: none !important;
        }
        span {
          background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAW+klEQVR4Xu3dbdQVc9QG8G6KECKKEEV5SYgiRBH/EFEURRRFFCKK8pIIRRTlnfJWhCKKNlGEEEUSIYQoIhRR9Kz1rPWbD7PW833WeqYvrXPuc2b+M7Ovva/r2nvmVPzxxx+x+eabpz59+sSIESPSsGHDol+/fmn06NHRq1ev1KRJk5gzZ07adNNN488//0zPPPNMnHzyyembb76JnXfeOXXv3j0eeOCBVLNmzVi+fHn2euHChbHnnnumTz75JPbaa6+08cYbx99//52mTJkSbdq0Sc8991yceOKJqUOHDvHUU0+l/fbbL+bNm5eaNWsWs2fPTjvttFN8++236aGHHoqzzz47bb311vHLL7+kI488Ml599dU0d+7caNy4cXr77bfj4IMPThMnToz27dunM844Ix577LF06aWXxm233ZaWLl0atWvXzvZ7yCGHxFtvvZXt75577omePXtm269Xr14sXrw4DR06NPr375/at28fEydOzNZpv2PGjIlu3bqld999Nw488MA0e/bsaNasWbauzTbbLFavXp3mz58fjRo1Svbzzz//xEYbbZTq1q0bX331VbauXr16xejRo1NFpfJfoc5AxYQJE6Jjx46pX79+MWzYsLT33nvHxx9/nFq0aBEzZ85MXbt2jbFjx6ZXXnkljjrqqNSgQYNYtGhRckVFioiHMIhYvHhx1KtXL916661x2WWXpYqKili/fn267rrr4tprr0277LJLfP311+nmm2+OK664IjVu3Djmzp2b3nvvvWjatGnaY4894tNPP80QBnlffvll7Lrrrmn77bePH374IVvvQQcdFO+8806aN29e7LfffmnAgAFx4403prZt28bkyZPToEGDYtCgQWnUqFHRu3fvdPHFF8fIkSMzhF9zzTUxePDgtGjRomjQoEGGuA033DD+/fff1LNnz7jnnnvSmjVromrVqmnFihVRo0aNbH0QBaG237dv3xg+fHhyvs8777y49957M2ReeeWVcdNNN5UIKRQ8KlWqVFGlSpVYu3ZtFrm//fZbbLnllunzzz+P+vXrpzfffDMOPfTQVKNGjVixYkXac889Y+HChalRo0Yxf/78LHf6Xo8ePeL+++9PkydPjrZt26Yff/wxtttuuzRt2rRo3bp1mjRpUrRr1y699tprccQRR2Q14Oqrr47rr78+qx1fffVV1K1bN4kkufuiiy6KO+64I1vfjBkzomXLlgky5OpKlSpFpUqV0mmnnRZPPPFEmjNnTjRp0iTL5SeccEI8//zzGSLVDLXA8Tdt2jTee++9BCHelxFmzZoVzZs3T9avFh599NHx8ssvZ/u1DplF7YHEJUuWRJ06dUqEFA4hTz75ZJx66qkZGzrrrLPi4Ycfzq6siHElRYxcjC2I0FatWsX06dOzXL127dqoUqVKGjJkSAwcODCNGzcuOnfunLEsf4eYRx99NLp06ZLOOeecePDBB9N///0XG2ywQYac4447LqZOnZqxmXXr1kXlypWTWiXS1Y7x48dHp06dkv+tb+zYsdG1a9ekBtrO9OnTo1WrVhlbxJZq164dS5cuTa1bt45p06ZlrM66DzjggHj//fczVoU9qnkffPBB7L///mnbbbeNn376KTs/zp/zWbKsgkGkAi+uX79+fP755xk7eeqpp6JDhw5Z7pRz6ZD7778/evTokbGykSNHxsUXX5zk7h122CG+//77LJKxtWXLlkWtWrUyBGJv/v7XX3/FJptskiBXzu7du3eMGjUqvfDCC3H88cdnLAnbUQsvv/zyuOWWW5L9WJcaRteIaIjp3LlzjBs3Lt15551x4YUXZvqjW7duMWbMmCTHWwfW2LFjx5gwYUIW8XSQmkWnqYEQI6P8/PPPsc0226Rff/01ttpqq7KGFAwglSrwbkrca1cwpRQRkUU05f3444/H6aefnilpShk7wsooazm9S5cu8eijjyaIFPHYCXaGz/s+5FD6/m7dEEyXUPAch1WrVkW1atWy/WJ7HAafk9OrV68eK1euTCeddFI8++yzicJXMx555JE488wzM52k9nAGIEQmoXtkAjWvTZs2MWXKlHTBBRfEXXfdVSKkcAjBej766KPYZ599Mo+FwnTF5UJXWi6muA8//PB4/fXXMzYjl9q+78u9FD1Eff/997HDDjtktaFdu3YxadKkhP1Q5lhWy5YtY8aMGRmrocwhijKGREqdrsIaIcD+eHcUNeTSGxCqZkGMWnT77bfHJZdckh0H1mcd3333Xey4445piy22iN9//z3ZDoSWLKtgEKnYd99948MPP8zcT1d0xIgR0adPn3TsscfGiy++mOmU5s2bx6xZs9KCBQuiYcOGmTcj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") center center repeat rgb(250, 173, 117);
        }
      }
    }
  }
  .glyph-wrapper {
    position: relative;
    z-index: 0;
    text-align: center;
    font-weight: bold;
    color: #9c513c;
    text-shadow: 0 0 0 #200908,-1px 0 0 #200908,-2px 0 0 #653a2a,-3px 0 0 #ffdc92,1px 0 0 #ffdc92,0 1px 0 #ffdc92,0 -1px 0 #ffdc92;
    ul {
      padding: 0;
    }
    li {
      display: block;
      &:first-child:before {
        content: '';
        display: block;
        border-top: 0.1em solid #ac5f4d;
        box-shadow: -1px 0 0 0 #200908,-2px 0 0 0 #653a2a,-1px 0 0 0 #200908 inset,-2px 0 0 0 #653a2a inset,-1px 0 0 1px #ffdc92;
      }
      &:after {
        content: '';
        display: block;
        border-bottom: 0.1em solid #ac5f4d;
        box-shadow: -1px 0 0 0 #200908,-2px 0 0 0 #653a2a,-1px 0 0 0 #200908 inset,-2px 0 0 0 #653a2a inset,-1px 0 0 1px #ffdc92;
      }
    }
    span {
      position: relative;
      display: inline-block;
      padding: 0 0 0 0.5em;
      margin-right: 0.5em;
      line-height: 1.8;
      border-radius: 1em;
      border: 0.1em solid #9c513c;
      box-shadow: -1px 0 0 0 #200908,-2px 0 0 0 #653a2a,-1px 0 0 0 #200908 inset,-2px 0 0 0 #653a2a inset,-2px 0 0 1px #ffdc92,0 0 0 1px #ffdc92 inset,-2px 0 0 1px #ffdc92 inset;
      &:after {
        content: '';
        z-index: -1;
        position: absolute;
        top: -0.05em;
        right: -0.1em;
        height: 1.9em;
        border-right: 0.1em solid #9c513c;
        box-shadow: -1px 0 0 0 #200908,-2px 0 0 0 #653a2a,-1px 0 0 0 #200908 inset,-2px 0 0 0 #653a2a inset,-1px 0 0 1px #ffdc92;
      }
      &:before {
        content: '';
        z-index: 1;
        position: absolute;
        top: 0.5em;
        right: -0.1em;
        height: 0.8em;
        width: 0.1em;
        background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAYAAACEhIafAAAAF0lEQVQIW2NkYGBgYAQTv9aW/oewQAQAJ0oDITgWK5EAAAAASUVORK5CYII=) repeat;
        background-size: 100% 16.6%;
      }
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console