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="body">
  <header class="page-header">
    <div class="page-header__container">
      <a href="#" class="page-header__logo">
        <svg 
          class="page-header__logo-icon" 
          width="202" 
          height="147" 
          viewBox="0 0 202 147" 
          fill="none" 
          xmlns="http://www.w3.org/2000/svg"
          >
          <rect width="147" height="147" fill="#1F1E1E"/>
          <path d="M39.9655 72.439H26.6335V50.032H26.6005V49.999H21.9145V73H39.9655V72.439Z" fill="white"/>
          <path d="M43.9316 73H62.0486V72.439H48.6176V61.285H59.1116V60.691H48.6176V50.56H62.0486V49.999H43.9316V73Z" fill="white"/>
          <path d="M70.6993 73V50.56C73.5703 50.56 82.4143 51.649 83.0743 64.453V73H87.7603V49.999H83.0743V60.328C81.6553 54.19 77.1673 49.999 70.6993 49.999H66.0133V73H70.6993Z" fill="white"/>
          <path d="M97.3893 73V50.56C100.26 50.56 109.104 51.649 109.764 64.453V73H114.45V49.999H109.764V60.328C108.345 54.19 103.857 49.999 97.3893 49.999H92.7033V73H97.3893Z" fill="white"/>
          <path d="M119.393 73H124.079V49.999H119.393V73Z" fill="white"/>
          <rect x="81" y="92" width="121" height="42" fill="#BC3324"/>
          <path d="M108.922 124H109.462L112.402 115.45H120.952L124.282 124H128.752L120.652 103.09H116.122L108.922 124ZM116.422 103.75L120.772 114.94H112.582L116.422 103.75Z" fill="white"/>
          <path d="M132.644 103.09V124H136.904V116.77H141.974L146.864 123.97H151.724L146.564 116.32C149.564 115.54 151.844 113.68 151.844 109.51C151.844 104.29 148.034 102.64 143.594 102.64C138.914 102.64 137.564 106.15 136.904 110.05V103.09H132.644ZM138.074 107.47C138.884 104.53 140.984 103.33 142.844 103.18C147.314 102.76 147.494 105.61 147.494 109.51C147.494 115.84 144.134 116.26 141.254 116.26H136.904C136.904 116.26 136.784 112.12 138.074 107.47Z" fill="white"/>
          <path d="M162.084 103.6L162.114 124H166.374V103.6H174.984V103.09H153.474V103.6H162.084Z" fill="white"/>
        </svg>
      </a>
      
      <nav class="page-header__nav">
        <a href="#" class="page-header__nav-link">Мероприятия</a>
        <a href="#" class="page-header__nav-link">Блог</a>
        <a href="#" class="page-header__nav-link">О нас</a>
        <a href="#" class="page-header__nav-link">Контакты</a>
        
          <div class="page-header__nav-user">
            <a href="#" class="page-header__nav-user-link">
              Александр С.
            </a>

            <a href="#" class="page-header__nav-logout">     
              <svg class="page-header__nav-logout-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g stroke="#1f1e1e" fill="transparent">
                <path d="M10 17L15 12L10 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15 12H3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </g>
              </svg>
            </a>
          </div>
      </nav>

      <div class="page-header__right-block">
        <a href="#" class="page-header__user-btn">
          Войти
          <svg class="page-header__user-icon" width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM19.71 6.13C19.617 6.03627 19.5064 5.96188 19.3846 5.91111C19.2627 5.86034 19.132 5.8342 19 5.8342C18.868 5.8342 18.7373 5.86034 18.6154 5.91111C18.4936 5.96188 18.383 6.03627 18.29 6.13L16.29 8.13L15.67 7.5C15.577 7.40627 15.4664 7.33188 15.3446 7.28111C15.2227 7.23034 15.092 7.2042 14.96 7.2042C14.828 7.2042 14.6973 7.23034 14.5754 7.28111C14.4536 7.33188 14.343 7.40627 14.25 7.5C14.0637 7.68736 13.9592 7.94081 13.9592 8.205C13.9592 8.46919 14.0637 8.72264 14.25 8.91L15.59 10.25C15.7774 10.4363 16.0308 10.5408 16.295 10.5408C16.5592 10.5408 16.8126 10.4363 17 10.25L19.67 7.58C19.771 7.48932 19.8524 7.37904 19.9094 7.25588C19.9664 7.13272 19.9977 6.99924 20.0014 6.86359C20.0052 6.72794 19.9813 6.59294 19.9312 6.46682C19.8811 6.34071 19.8058 6.22611 19.71 6.13Z" fill="#1f1e1e"/>
            </svg>
        </a>

      <button type="button" class="page-header__nav-toggle"></button>
    </div>
    </div>
      
  </header>
</div>
              
            
!

CSS

              
                html,
body {
  width: 100%; 
  margin: 0;
  padding: 0;
}

@bw1660: ~"(max-width: 1659px)";
@bw1340: ~"(max-width: 1339px)";
@bw1020: ~"(max-width: 1019px)";
@bw768: ~"(max-width: 767px)";

@white: #ffffff;
@black: #1f1e1e;
@red: #bc3324;
@red_dark: #a51505;
@gray: #dedede;
@font1: "Open Sans", sans-serif;

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1414px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  @media @bw1340 {
    padding-left: 30px;
    padding-right: 30px;
  }
  @media @bw768 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: @black;
  font-family: @font1;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.375;
  overflow-x: hidden;
  padding-top: 147px;
  @media @bw1660 {
    padding-top: 111px;
  }

  @media @bw768 {
    padding-top: 70px;
  }
}

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 147px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;

  @media @bw1660 {
    height: 111px;
  }

  @media @bw768 {
    height: 70px;
  }

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: fade(@gray, 98%);
    @supports (backdrop-filter: blur(20px)) {
      background-color: fade(@gray, 70%);
      backdrop-filter: blur(20px);
    }
  }

  &__container {
    .container;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
  }
  &__logo {
    position: relative;
    flex-shrink: 0;
    width: 202px;
    height: 147px;
    font-size: 0;
    text-decoration: none;
    z-index: 1;
    @media @bw1660 {
      width: 152px;
      height: 111px;
    }
    @media @bw768 {
      width: 96px;
      height: 70px;
    }
  }
  &__logo-icon {
    width: 100%;
    height: 100%;
  }
  &__nav {
    box-sizing: border-box;
    display: flex;
    align-items: baseline;
    margin: 0 auto;
    @media @bw1020 {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      flex-direction: column;
      align-items: flex-start;
      padding: 211px 30px 30px;
      background-color: fade(@gray, 98%);
      transition: transform 0.4s;
      transform: translateX(-100%);
      overflow-x: hidden;
      overflow-y: auto;
      @supports (backdrop-filter: blur(20px)) {
        background-color: fade(@gray, 70%);
        backdrop-filter: blur(20px);
      }
    }
    @media @bw768 {
      padding: 150px 20px 30px;
    }
  }
  &__nav-link,
  &__nav-user-link {
    color: @black;
    text-decoration: none;
    &:hover {
      color: @red_dark;
    }
  }
  &__nav-link {
    margin: 0 25px;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    text-decoration: none;
    transition: color 0.2s;
    @media @bw1020 {
      margin: 0 0 40px;
      font-size: 16px;
      line-height: 22px;
    }
  }
  &__nav-user {
    display: none;
    @media @bw1020 {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
  }
  &__nav-user-link {
    margin-right: 25px;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
  }
  &__nav-logout {
    width: 24px;
    height: 24px;
    font-size: 0;
  }
  &__right-block {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 202px;
    z-index: 1;
    @media @bw1660 {
      width: 152px;
    }
    @media @bw1020 {
      width: auto;
      margin-left: auto;
    }
  }
  &__user-btn {
    max-width: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding: 15px 40px;
    border: 1px solid @black;
    background-color: transparent;
    outline: none;
    color: @black;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    overflow: hidden;
    cursor: pointer;
    @media @bw1020 {
      display: flex;
      width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      background: none;
      color: @black;
      font-size: 0;
    }
    &:hover {
      background-color: @black;
      color: @white;
      @media @bw1020 {
        background: none;
        color: @red;
      }
    }
  }
  &__user-icon {
    display: none;
    @media @bw1020 {
      display: block;
      margin: auto;
    }
  }
  &__nav-toggle {
    display: none;
    @media @bw1020 {
      display: block;
      position: relative;
      right: -11px;
      margin-left: 18px;
      width: 40px;
      height: 40px;
      border: none;
      background: none;
      cursor: pointer;
    }
    @media @bw768 {
      margin-left: 5px;
    }
    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 19px;
      left: 11px;
      width: 18px;
      height: 2px;
      border-radius: 2px;
      background-color: @black;
    }
    &::before {
      top: 13px;
      box-shadow: 0 6px 0 @black;
    }
    &::after {
      top: 25px;
    }
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console