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

              
                <!-- Using the BEM naming system  -->
<!-- The Parent holding everything -->
<div class="container">

  <!-- This section carries our header   -->
  <div class="header">

    <!--  Logo here    -->
    <div class="header__logo">LOGO</div>

    <!--  Button Managemnet    -->
    <div class="header__btn">

      <i id="open" class='header__btn-open bx bx-menu' ></i>

      <i id="close" class='header__btn-close bx bx-x hide'></i>

    </div>

    <!--  menu Items here    -->
    <div id="menu" class="header__menu slide">
      <div class="item-1">
        <!--  Using Radio buttons to toggle back & forth        -->
        <input type="radio" checked name="A" id="a">
        <label for="a">Home</label>
      </div>
      <div class="item-2">
        <input type="radio" name="A" id="b">
        <label for="b">About</label>
      </div>
      <div class="item-3">
        <input type="radio" name="A" id="c">
        <label for="c">Services</label>
      </div>
      <div class="item-4">
        <input type="radio" name="A" id="d">
        <label for="d">Contacts</label>
      </div>

    </div>



  </div>

  <!--  This section carries our content  -->
  <div class="main">
    <div class="main__header">Welcome !</div>
    <div class="main__text">
      Lorem ipsum dolor sit amet.
    </div>
  </div>

  <!--For my social media links.  -->
  <div class="footer">
    <!-- My social media Links -->



    <div class="social">
      <a target = "_blank"href="https://youtu.be/dmrigoFKlLc" 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>
  </div>


</div>



              
            
!

CSS

              
                // Tutorial - https://youtu.be/dmrigoFKlLc
// Changing default styles
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  body{
    font-family: sans-serif;
    width: 100%;
    min-height: 100vh;
    font-size: 25px;
    overflow-x: hidden;
  }
}

// Managing all our breakpoints in this map

$bp : (
  mobile : 480px,
  tablet : 768px,
  desktop : 1440px,
);

// Conditional Media query Mixins
// To save time 

@mixin query($screen){
  @each $key, $value in $bp{
    @if ($screen == $key){
      @media (max-width : $value){@content;}
    }
  }
}

// Style rules for desktop screen
.header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #c1c1c1;
  height: 10vh;
  padding: 0px 10px;
  
  &__logo{
    cursor: pointer;
  }

  &__btn{
    display: none;
  }

  &__menu{
    display: flex;
    flex-direction: row;
    [class ^="item-"]{
      padding-left: 15px;
      cursor: pointer;
    }
    
  }

}

// Style rules for .main class

.main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80vh;
  text-align: center;
}


// Style Rules for Label 

label:hover{
  color : white;
  cursor: pointer;
}

input[type = "radio"]{
  display: none;
}

input[type = "radio"]:checked + label{
  color: white;
  text-decoration: underline;

}



// Media query rules for mobile screen

@include query(mobile){
  .header{
    justify-content:center;

    &__logo{}

    &__btn{
      display: flex;
      position: absolute;
      right : 10px;
      font-size: 40px;
      cursor: pointer;
    }

    &__menu{
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      position: absolute;
      z-index: 1;
      right: 0px;
      top: 10vh;
      background-color: #c1c1c1;
      width: 100%;
      height: 90vh;
      transition: all 0.4s ease;
    }

  }
}


// Style rules when btn is clicked

.hide{
  display: none;
}

.slide{
  right : -100%;
}














// Styles for my social media links


.footer {
  // Social Media links,
  display: flex;
  flex-direction: row;
  justify-content: center;


$hover-time : 0.2s;

.social{
  font-size:16px;
  font-weight:500;
  display: flex;
  flex-direction:row;
  a{
    color: inherit;
    text-decoration:none;
  }
}
.youtube{
  border: 2px solid black;
  padding: 5px;
  transition: all $hover-time ease;
  transform: scale(1.5);
  
  svg{
    width: 25px;
    height:25px;
    margin-bottom: -6px;
  }
  &:hover{
    background-color: #000;
    color: #fff;
  }
}

.instagram{
  margin-left:5px;
  border: 2px solid black;
  transition: all $hover-time ease;
  transform: scale(1.5);
  display: none;
  svg{
    width: 25px;
    padding-top: 5px;
    margin: 0 7px;
  }
  &:hover{
    background-color: #000;
  }
}
}


              
            
!

JS

              
                // Selecting id from HTML in JS
let open = document.getElementById("open"),
    close = document.getElementById("close"),
    menu = document.getElementById("menu");


// Creating a reuseable function

common = (x,y,z) =>{
  x.addEventListener("click",()=>{
    x.classList.toggle("hide");
    y.classList.toggle("hide");
    
// defining conditions on if statements
    if(z== "slide-in"){
      menu.classList.toggle("slide");
    }
    if(z == 'slide-out'){
      menu.classList.toggle("slide");
    }
    
  })
}

// Calling functions here
common(open,close,"slide-in");
common(close,open,'slide-out');




              
            
!
999px

Console