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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

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

              
                <div class="menu">
  <input type="checkbox" name="menu-active" id="menu-active">
  <div class="items first">
    <div class="i-1">Home</div>
    <div class="i-2">About</div>
  </div>
  <label for="menu-active">
    <div class="lines">
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div class="line-3"></div>
    </div>
  </label>
  <div class="items last">
    <div class="i-3">Services</div>
    <div class="i-4">Contact</div>
  </div>
</div>




























<!-- My social media Links -->


<div class="social">
  <a target = "_blank"href="https://www.youtube.com/watch?v=4v9epsQpFmQ&t=11s" class="youtube">Tutorial On <?xml version="1.0" encoding="iso-8859-1"?>
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 512.003 512.003" style="enable-background:new 0 0 512.003 512.003;" xml:space="preserve">
      <path style="fill:#E53935;" d="M443.734,80.336L330.86,70.437c-49.812-4.334-99.906-4.334-149.717,0L68.268,80.336
                                     c-38.702,3.124-68.459,35.541-68.267,74.368v202.667c-0.204,38.835,29.557,71.265,68.267,74.389l112.939,9.813
                                     c24.832,2.133,49.835,3.243,74.859,3.243c25.024,0,50.027-1.067,74.859-3.243l112.939-9.813c38.659-3.187,68.348-35.6,68.139-74.389
                                     V154.704C512.194,115.877,482.436,83.459,443.734,80.336z"/>
      <path style="fill:#FAFAFA;" d="M357.782,247.077l-149.333-96c-4.951-3.193-11.552-1.768-14.745,3.183
                                     c-1.111,1.722-1.702,3.728-1.703,5.777v192c0.002,5.891,4.78,10.665,10.671,10.663c2.049-0.001,4.055-0.592,5.777-1.703l149.333-96
                                     c4.954-3.187,6.387-9.787,3.2-14.742c-0.825-1.283-1.917-2.374-3.2-3.2V247.077z"/>
      <path d="M256.001,444.816c-25.003,0-50.005-1.088-74.837-3.243l-112.896-9.835c-38.71-3.124-68.471-35.554-68.267-74.389V154.683
               c-0.182-38.819,29.573-71.224,68.267-74.347l112.896-9.899c49.797-4.334,99.877-4.334,149.675,0l112.96,9.813
               c38.717,3.158,68.454,35.629,68.203,74.475v202.667c0.204,38.835-29.557,71.265-68.267,74.389l0,0l-112.96,9.813
               C306.028,443.771,281.004,444.816,256.001,444.816z M256.001,88.549c-24.405,0-48.768,1.067-72.981,3.157L69.953,101.52
               c-27.614,2.317-48.794,25.495-48.619,53.205v202.667c-0.116,27.7,21.097,50.827,48.704,53.099l112.96,9.813
               c48.57,4.209,97.414,4.209,145.984,0l113.067-9.813c27.589-2.315,48.76-25.456,48.619-53.141V154.683
               c0.116-27.7-21.097-50.827-48.704-53.099l-112.96-9.813c-24.235-2.105-48.569-3.164-73.003-3.179V88.549z"/>
      <path d="M202.668,362.704c-5.891,0-10.667-4.776-10.667-10.667v-192c-0.01-5.891,4.758-10.674,10.649-10.684
               c2.057-0.003,4.07,0.588,5.799,1.703l149.333,96c4.96,3.178,6.405,9.776,3.227,14.736c-0.83,1.296-1.931,2.397-3.227,3.227
               l-149.333,96C206.724,362.124,204.717,362.709,202.668,362.704z M213.334,179.579v152.917l118.933-76.459L213.334,179.579z"/>
     
    </svg>
  </a>

  <a target = "_blank" href="https://www.instagram.com/joybhai.codes/" class="instagram">
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 512.003 512.003" style="enable-background:new 0 0 512.003 512.003;" xml:space="preserve"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="42.966156268" x2="469.0337477" y1="469.0296477168" y2="42.9620562848"><stop offset="0" stop-color="#ffd600"/><stop offset=".5" stop-color="#ff0100"/><stop offset="1" stop-color="#d800b9"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="163.0429956456" x2="348.9539083464" y1="348.9538083312" y2="163.0428956304"><stop offset="0" stop-color="#ff6400"/><stop offset=".5" stop-color="#ff0100"/><stop offset="1" stop-color="#fd0056"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="370.9291325432" x2="414.3727849912" y1="141.0676714336" y2="97.6240189856"><stop offset="0" stop-color="#f30072"/><stop offset="1" stop-color="#e50097"/></linearGradient><path d="m510.460938 150.453125c-1.246094-27.25-5.574219-45.859375-11.902344-62.140625-6.425782-17.082031-16.503906-32.554688-29.527344-45.34375-12.785156-13.023438-28.261719-23.105469-45.34375-29.535156-16.285156-6.324219-34.890625-10.648438-62.140625-11.886719-27.300781-1.25-36.023437-1.546875-105.546875-1.546875s-78.246094.296875-105.546875 1.539062c-27.25 1.246094-45.855469 5.574219-62.140625 11.902344-17.082031 6.425782-32.554688 16.503906-45.34375 29.527344-13.023438 12.785156-23.105469 28.257812-29.535156 45.339844-6.324219 16.285156-10.648438 34.894531-11.886719 62.140625-1.25 27.304687-1.546875 36.023437-1.546875 105.546875 0 69.527344.296875 78.25 1.546875 105.550781 1.242187 27.246094 5.570313 45.855469 11.898437 62.140625 6.425782 17.078125 16.503907 32.554688 29.527344 45.339844 12.785156 13.023437 28.261719 23.101562 45.34375 29.527344 16.28125 6.332031 34.890625 10.65625 62.140625 11.902343 27.304688 1.246094 36.023438 1.539063 105.546875 1.539063 69.523438 0 78.246094-.292969 105.546875-1.539063 27.25-1.246093 45.855469-5.570312 62.140625-11.902343 34.386719-13.296876 61.570313-40.480469 74.867188-74.867188 6.332031-16.285156 10.65625-34.894531 11.902344-62.140625 1.242187-27.304687 1.539062-36.023437 1.539062-105.546875 0-69.527344-.296875-78.246094-1.539062-105.546875zm-46.082032 208.996094c-1.136718 24.960937-5.308594 38.515625-8.8125 47.535156-8.613281 22.328125-26.257812 39.972656-48.585937 48.585937-9.019531 3.503907-22.574219 7.675782-47.535157 8.8125-26.988281 1.234376-35.085937 1.492188-103.445312 1.492188-68.363281 0-76.457031-.257812-103.449219-1.492188-24.957031-1.136718-38.511719-5.308593-47.535156-8.8125-11.117187-4.105468-21.175781-10.648437-29.433594-19.152343-8.503906-8.257813-15.046875-18.3125-19.152343-29.433594-3.503907-9.019531-7.675782-22.574219-8.8125-47.535156-1.230469-26.992188-1.492188-35.089844-1.492188-103.445313 0-68.359375.261719-76.453125 1.492188-103.449218 1.140624-24.960938 5.308593-38.515626 8.8125-47.535157 4.105468-11.121093 10.652343-21.179687 19.152343-29.4375 8.257813-8.503906 18.316407-15.046875 29.4375-19.148437 9.019531-3.507813 22.574219-7.675782 47.535157-8.816406 26.992187-1.230469 35.089843-1.492188 103.445312-1.492188h-.003906c68.355468 0 76.453125.261719 103.449218 1.496094 24.960938 1.136718 38.511719 5.308594 47.535157 8.8125 11.117187 4.105468 21.175781 10.648437 29.433593 19.148437 8.503907 8.257813 15.046876 18.316407 19.148438 29.4375 3.507812 9.019531 7.679688 22.574219 8.816406 47.535157 1.230469 26.992187 1.492188 35.089843 1.492188 103.445312 0 68.359375-.257813 76.453125-1.492188 103.449219zm0 0" fill="url(#a)"/><path d="m255.996094 124.539062c-72.601563 0-131.457032 58.859376-131.457032 131.460938s58.855469 131.457031 131.457032 131.457031c72.605468 0 131.460937-58.855469 131.460937-131.457031s-58.855469-131.460938-131.460937-131.460938zm0 216.792969c-47.125-.003906-85.332032-38.207031-85.328125-85.335937 0-47.125 38.203125-85.332032 85.332031-85.332032 47.128906.003907 85.332031 38.207032 85.332031 85.332032 0 47.128906-38.207031 85.335937-85.335937 85.335937zm0 0" fill="url(#b)"/><path d="m423.371094 119.347656c0 16.964844-13.753906 30.71875-30.71875 30.71875-16.96875 0-30.722656-13.753906-30.722656-30.71875 0-16.96875 13.753906-30.722656 30.722656-30.722656 16.964844 0 30.71875 13.753906 30.71875 30.722656zm0 0" fill="url(#c)"/></svg>
  </a>
  
<!--   <a href="" target = "_blank" class="twitter"></a> -->

</div>







<!-- SVG Image Credits -->


<!-- IG svg from Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a> -->

<!--Youtube SVG from Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>  -->
              
            
!

CSS

              
                // 🔥Youtube Tutorial : https://www.youtube.com/watch?v=4v9epsQpFmQ

//Colors from https://coolors.co/palettes/trending
*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  body{
    display: grid;
    place-items:center;
    width: 100%;
    height:100vh;
    background-color: black;
    color: #adb5bd;
    font-family: Sans-serif;
    input[type="checkbox"]{
      display: none;
    }
  }
}

// These are the Configuration variables
//Change these according to display sizes/ to your needs

$width:60px;  
$height:8px; 
$margin:10px; 
$font-size: 18px;
$animation-time: .6s;

//Template for the css flexbox model

@mixin flex($dir,$jus, $ai){
  display: flex;
  flex-direction:$dir;
  justify-content:$jus;
  align-items: $ai;
}





//Styling of the .lines class

.lines{
  cursor:pointer;
  z-index:1;
  [class ^="line-"]{
    width: $width;
    height:$height;
    background-color: #fff;
    margin: $margin 0;
    transition:all $animation-time ease;
  }
}

//This is the hamburger Menu icon toggle On & Off.

#menu-active:checked ~ label{
  .line-1{
    transform: translatey($height+ $margin) rotate(45deg);
  }
  .line-2{
    transform:scale(0);
  }
  .line-3{
    transform: translatey(-($height+$margin)) rotate(-45deg);
      }
}




//Styling configuration for the .menu class
//This is the main container that holds the 3 sections
//The (.items.first) , label & (.items.last)


.menu{
  @include flex(row, null, null);
}



//Styling rules for the checkbox label

label{
  @include flex(row,null, null);
}

//Styling of the .items class(includes both .first & .last classes)

.items{
  z-index:0;
  transition: all $animation-time ease;
  font-size: $font-size;
  font-weight:600;
  @include flex(row, center, center);
  [class ^="i-"]{
    margin: 0 $margin;
    cursor:pointer;
    transition: all .3s ease;
    &:hover{
      color:white;
    }
  }
}


//Configuring the initial position of .first & .last class[the menu items]

.first{
  transform: translatex(100px);
  opacity:0%;
  pointer-events:none; // removes the cursor: pointer

}
.last{
  transform:translatex(-100px);
  opacity:0%;
  pointer-events:none; // removes the cursor: pointer
}





// This is the transition of menu items on & Off

#menu-active:checked{
  & ~ .first{
    transform: translatex(0px);
    opacity:100%;
    pointer-events:auto; // brings back the cursor: pointer
  }
  & ~ .last{
    transform: translatex(0px);
    opacity:100%;
    pointer-events:auto; // brings back the cursor: pointer
  }
}


































// Social Media links,

$hover-time : 0.2s;

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
.social{
  position:absolute;
  bottom:0px;
  left:50%;
  transform:translatex(-50%);
  color:white;
  font-family: 'Poppins';
  font-size:16px;
  font-weight:500;
  display: flex;
  flex-direction:row;
  a{
    color: inherit;
    text-decoration:none;
  }
}
.youtube{
  border: 2px solid white;
  padding: 5px;
  transition: all $hover-time ease;
  svg{
    width: 25px;
    height:25px;
    margin-bottom: -6px;
  }
  &:hover{
    background-color: #fff;
    color: #000;
  }
}

.instagram{
  margin-left:5px;
  border: 2px solid white;
  transition: all $hover-time ease;
  svg{
    width: 25px;
    padding-top: 5px;
    margin: 0 7px;
  }
  &:hover{
    background-color: #fff;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console