Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                <html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Overpass+Mono" rel="stylesheet">
  </head>
  <body>
    <div class="underSideMenu">
      <header></header>
      <div style="height:64px;"></div>
      <p><a href="https://www.w3schools.com/cssref/css3_pr_mediaquery.asp">CSS: @media Rule</a></p>
      <p><a href="https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_bg">CSS: max-width Rule</a></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in ipsum id nisl ullamcorper dapibus. Donec in mauris et neque cursus convallis et ut mauris. Pellentesque bibendum, nunc sit amet eleifend consequat, elit ligula vehicula justo, quis pharetra nibh quam eget magna. Pellentesque quis libero pharetra velit porta scelerisque. Suspendisse gravida facilisis enim eget tincidunt. Quisque sem augue, sagittis vel tristique in, dictum eu velit. Maecenas laoreet leo vel pellentesque blandit. Mauris posuere est id iaculis eleifend.</p>
    <p>Nam sollicitudin finibus ipsum. Sed iaculis elementum leo non hendrerit. Etiam a enim lectus. Morbi elementum magna a sem ornare, in vestibulum eros dapibus. Nam semper consectetur imperdiet. Cras laoreet a arcu vel mollis. Nam dignissim magna mi, id sodales lectus eleifend vel.</p>
    <p>Proin consectetur ex enim, sodales malesuada nunc lobortis nec. Aenean placerat semper elit, et consectetur dui scelerisque quis. Sed porta, mauris eu interdum vestibulum, velit enim sodales neque, id volutpat quam velit sit amet eros. Pellentesque lobortis, lacus vel cursus lacinia, lorem eros tempus ante, id placerat mauris orci eu nisl. Nullam in ornare nunc. Integer vehicula, elit et ultricies varius, ligula enim suscipit turpis, quis hendrerit ex nunc elementum nisi. Duis vitae iaculis ipsum. Nunc dapibus lorem quis dolor consectetur scelerisque. Donec fringilla ipsum a velit viverra eleifend. Nulla tincidunt erat ullamcorper, ornare mauris id, consectetur turpis. Etiam at purus sollicitudin, condimentum ligula at, consectetur tortor. Mauris sed feugiat mi, quis imperdiet felis. Suspendisse rutrum maximus tincidunt. Aliquam euismod, velit ut suscipit bibendum, elit risus faucibus urna, vel rhoncus libero felis at erat.</p>
    <p>Integer eros mi, malesuada ut ornare condimentum, consequat in nunc. Praesent rhoncus auctor orci vel scelerisque. Nulla vel hendrerit purus. Nulla facilisi. Maecenas placerat ultrices sem a ultrices. Duis ultricies leo sit amet leo auctor cursus. Etiam vel tempus elit, in ornare odio. Donec at est tempor, ullamcorper diam in, dignissim risus. Donec est nulla, interdum ac tempor in, porta in massa. In mattis auctor nulla in bibendum. Nulla facilisi. Morbi porttitor ultricies consectetur. Nunc tellus lacus, euismod a feugiat et, porttitor a magna.</p>
    <p>Mauris aliquet lacus ex, a semper tellus feugiat vitae. Cras in lacinia magna. Aenean nec sollicitudin justo. Nam interdum, tellus vel bibendum consequat, urna elit consequat sapien, tincidunt placerat arcu quam non leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis feugiat vitae risus nec imperdiet. Nullam commodo orci eget elit blandit, non interdum felis congue. Cras magna mi, posuere a dolor eu, eleifend condimentum est.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vitae sem efficitur, commodo est ut, dignissim augue. Etiam vitae mi in augue ultrices facilisis. Donec ac vehicula magna, nec condimentum risus. Aenean tincidunt laoreet purus, ac ultricies est convallis at. Pellentesque feugiat nisl orci, et dictum nibh mattis quis. Integer auctor scelerisque ipsum, nec molestie ipsum tempus eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ornare ipsum a purus tempus, in mattis nisl dapibus. In laoreet lorem mattis, imperdiet augue vitae, sodales ante. Phasellus vestibulum vitae quam vel porttitor.</p>
    <p>Praesent vel vulputate nibh. Suspendisse eget consequat erat. Quisque ut porttitor sapien. Fusce commodo efficitur lorem, nec scelerisque risus auctor ut. Etiam auctor sit amet nisl ut lacinia. Duis tempor neque ut libero congue ultrices. Morbi nec lorem eget urna tristique luctus id ut est.</p>
    <p>Cras pellentesque laoreet ligula id pharetra. Suspendisse quis mollis massa, at tempus erat. Integer pretium, massa non cursus congue, nibh mauris auctor urna, pharetra bibendum dui velit eget magna. Suspendisse tempor dui faucibus neque lobortis blandit. Morbi accumsan mattis felis vitae elementum. Quisque in arcu metus. Morbi bibendum luctus libero, vitae mollis augue tempus et. Nunc tristique tortor consectetur eros pellentesque pharetra ut et est. In ac efficitur mauris. In hac habitasse platea dictumst. Morbi convallis dictum placerat. Duis sit amet aliquam odio. Curabitur consequat venenatis nisl.</p>
    <p>Etiam iaculis tortor vitae elit interdum mattis. Aliquam erat volutpat. Morbi eu faucibus odio. Proin commodo id mi vel cursus. Aliquam egestas risus a dui ultrices, eget sollicitudin tellus auctor. Praesent eget pulvinar libero, eget sagittis sem. Cras sollicitudin sapien magna, sed dapibus felis dapibus sed. Donec tempor felis quis sapien ullamcorper consectetur. Vestibulum efficitur non tellus id ornare. Phasellus imperdiet tempor lacus, condimentum ultricies turpis laoreet vitae. Maecenas fringilla purus volutpat est imperdiet pulvinar.</p>
    <p>Mauris molestie est volutpat hendrerit ultricies. Quisque sapien felis, auctor in accumsan sit amet, interdum sit amet ipsum. Morbi in elit nec tortor vestibulum luctus. Sed ante lectus, pellentesque eget augue a, convallis fringilla neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc maximus, sem scelerisque bibendum mollis, erat lacus dignissim massa, eu imperdiet sem mauris non orci. Fusce ligula dolor, ultricies vel interdum eu, malesuada et odio. Pellentesque consectetur metus lobortis, gravida tortor non, euismod mauris. Phasellus nisl diam, ullamcorper rhoncus consectetur eu, scelerisque at ante. Nunc interdum magna a felis luctus, eu dapibus sapien tempor. Praesent commodo ac justo vitae pretium. Sed mattis felis nisi, id interdum urna sagittis sed. Aenean eget augue condimentum, feugiat purus egestas, aliquet massa.</p>
    <p>Nulla eget gravida sapien, in dignissim felis. Proin efficitur id nisi a scelerisque. Integer varius et orci lacinia finibus. Pellentesque convallis, dolor in egestas pulvinar, orci lorem rutrum justo, et molestie metus ligula a turpis. Donec in accumsan mauris, id pulvinar elit. Duis vitae rutrum quam, dignissim mollis est. Etiam a ullamcorper eros. Curabitur sollicitudin orci sed massa convallis, nec euismod metus feugiat. Morbi mollis egestas placerat. Nam mi odio, tempus eget iaculis non, vestibulum id nisl. Nullam ac fringilla sapien.</p>
    <p>Integer vel ante id ipsum rutrum sodales. Etiam et nisi a nibh imperdiet vestibulum sed et dui. Fusce at consectetur risus, id rhoncus quam. Curabitur sapien diam, lobortis sed justo porta, sollicitudin luctus risus. Praesent at dui a est fermentum fringilla vitae aliquet turpis. Donec mollis id magna at porta. Suspendisse dignissim facilisis nulla, at ullamcorper ligula ornare ac. Quisque ullamcorper ex.</p>
    </div>
    <div id="sidemenu" class="sidemenu">
      <div id="sidemenu.icon" class="menuTitle" onclick="menuIconClick(this)">
        <svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
          <defs>
            <filter id="sofGlow" height="300%" width="300%" x="-100%" y="-100%">
              <!-- Thicken out the original shape -->
              <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
              <!-- Use a gaussian blur to create the soft blurriness of the glow -->
              <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
              <!-- Change the colour -->
              <feFlood flood-color="rgb(0,255,0)" result="glowColor" />
              <!-- Color in the glows -->
              <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
              <!--	Layer the effects together -->
              <feMerge>
                <feMergeNode in="softGlow_colored"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>
          <g filter="url(#sofGlow)">
            <!-- Cerchio centrale -->
            <circle cx="32" cy="32" r="3" fill="white" />
            <!-- Cerchio superiore vicino -->
            <circle cx="28" cy="25.0718" r="3" fill="white">
              <animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="4s" repeatCount="indefinite"/>
            </circle>
            <!-- Cerchio inferiore vicino -->
            <circle cx="28" cy="38.9282" r="3" fill="white">
              <animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="4s" repeatCount="indefinite"/>
            </circle>
            <!-- Cerchio destra vicino -->
            <circle cx="40" cy="32" r="3" fill="white">
              <animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="4s" repeatCount="indefinite"/>
            </circle>

            <!-- Cerchio superiore vicino al contrario -->
            <circle cx="28" cy="25.0718" r="3" fill="white">
              <animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="3s" repeatCount="indefinite"/>
            </circle>
            <!-- Cerchio inferiore vicino al contrario -->
            <circle cx="28" cy="38.9282" r="3" fill="white">
              <animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="3s" repeatCount="indefinite"/>
            </circle>
            <!-- Cerchio destra vicino al contrario -->
            <circle cx="40" cy="32" r="3" fill="white">
              <animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="3s" repeatCount="indefinite"/>
            </circle>

            <!-- Cerchio superiore lontano -->
            <circle cx="20" cy="11.2154" r="3" fill="white">
              <animateTransform attributeName="transform" type="rotate" from="360 32 32" to="0 32 32" dur="4s" repeatCount="indefinite"/>
            </circle>
            <!-- Cerchio inferiore lontano -->
            <circle cx="20" cy="52.7846" r="3" fill="white">
              <animateTransform attributeName="transform" type="rotate" from="360 32 32" to="0 32 32" dur="4s" repeatCount="indefinite"/>
            </circle>
            <!-- Cerchio destra lontano -->
            <circle cx="56" cy="32" r="3" fill="white">
              <animateTransform attributeName="transform" type="rotate" from="360 32 32" to="0 32 32" dur="4s" repeatCount="indefinite"/>
            </circle>
          </g>
        </svg>
      </div><br>
      <div class="collapsible">
        <div id="sidemenu.Security" class="menuItem" onmouseover="showMenuItem(this)" onmouseleave="hideMenuItem(this)">S</div><br>
        <div id="sidemenu.Themes"   class="menuItem" onmouseover="showMenuItem(this)" onmouseleave="hideMenuItem(this)">T</div><br>
        <div id="sidemenu.Options"  class="menuItem" onmouseover="showMenuItem(this)" onmouseleave="hideMenuItem(this)">O</div><br>
        <div id="sidemenu.Contacts" class="menuItem" onmouseover="showMenuItem(this)" onmouseleave="hideMenuItem(this)">C</div><br>
        <div id="sidemenu.About"    class="menuItem" onmouseover="showMenuItem(this)" onmouseleave="hideMenuItem(this)">A</div>
      </div>
    </div>
  </body>
</html>
              
            
!

CSS

              
                /**************
* NERD THEME *
**************/
body {
  margin: 0;
  background-color: black;
  color: white;
  font-size: 20px;
  font-family: 'Overpass Mono', monospace;
  text-shadow:
    1px  1px 5px  rgba(0,255,128,0.3),
    1px -1px 5px  rgba(0,255,128,0.3),
    -1px -1px 5px rgba(0,255,128,0.3),
    -1px 1px 5px  rgba(0,255,128,0.3);
}
a {
  color: white;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  overflow: hidden;
  background-color: black;
  box-shadow: 0px 0px 20px 10px black;
}

p {
  text-align: justify;
}

::selection {
  color: white;
  background: green;
}
/*************
 * Side menu *
 *************/
.sidemenu {
  position: fixed;
  left: 0px;
  top: 0px;
}
.menuTitle {
  padding-top: 0;
  padding-bottom: 0;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
}
.menuItem {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 26px;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
}
.underSideMenu {
  transition: 0.2s filter linear;
}

/***************
* COLLAPSIBLE *
***************/
.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in;
}
              
            
!

JS

              
                /**********
 * Volume *
 **********/
function volume()
{
  var volumeElements = document.getElementsByClassName("volume");
  var i = 0;
  for (i=0; i<volumeElements.length; i++)
  {
    var volumeElement = volumeElements[i];
    var visibleElement = document.getElementById(volumeElement.id + ".null");
    volumeElement.style.height = window.getComputedStyle(visibleElement, null).getPropertyValue('height');
    volumeElement.style.width = window.getComputedStyle(visibleElement, null).getPropertyValue('width');
  }
}

/*************
 * Side menu *
 *************/
function showMenuItem(item)
{
  item.classList.add("mouseOn");
  typeWrite(item);
}

function hideMenuItem(item)
{
  item.classList.remove("mouseOn");
  untypeWrite(item);
}

function typeWrite(item)
{
  var visible = item.innerHTML; // String actually visible
  var txt = item.id.split(".")[item.id.split.length-1]; // String to show is in id name
  var mouseOn = item.classList.contains("mouseOn");
  
  if ((mouseOn)&&(visible.length < txt.length))
  {
    item.innerHTML = txt.substring(0, visible.length+1);
    setTimeout(typeWrite, 50, item);
  }
}

function untypeWrite(item)
{
  var visible = item.innerHTML; // String actually visible
  var txt = item.id.split(".")[item.id.split.length-1]; // String to show is in id name
  var mouseOn = item.classList.contains("mouseOn");
  
  if ((!mouseOn)&&(visible.length > 1))
  {
    item.innerHTML = txt.substring(0, visible.length-1);
    setTimeout(untypeWrite, 75, item);
  }
}

function menuIconClick(item)
{
  var underSideMenu = document.getElementsByClassName("underSideMenu")[0];
  if (underSideMenu.style.filter == "blur(5px)") underSideMenu.style.filter = "none";
  else underSideMenu.style.filter = "blur(5px)";
  //if (item.children[0].style.animationPlayState == "paused") item.children[0].style.animationPlayState = "running";
  //else item.children[0].style.animationPlayState = "paused";
  collapse(item);
}

/***************
 * Collapsible *
 ***************/
function collapse(item)
{
  var content = item.parentNode.getElementsByClassName("collapsible")[0];
  if (content.classList.contains("collapsible"))
  {
    if (content.style.maxHeight) content.style.maxHeight = null;
    else content.style.maxHeight = content.scrollHeight + "px";
  }
}
              
            
!
999px

Console