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

              
                <div class="container" x-data="{ rightSide: false, leftSide: false }">
  <div class="left-side" :class="{'active' : leftSide}">
    <div class="left-side-button" @click="leftSide = !leftSide">
      <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
      <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
  <path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
    </div>
    <div class="logo">ULTRANET</div>
    <div class="side-wrapper">
      <div class="side-title">MENU</div>
      <div class="side-menu">
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            <path d="M9 22V12h6v10" />
          </svg>
          Home
        </a>
        <a href="#">
          <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
          </svg>
          Latest News
        </a>
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
            <circle cx="12" cy="10" r="3" /></svg>
          Explore
        </a>
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
            <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
          </svg>
          Files
        </a>
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
            <circle cx="8.5" cy="8.5" r="1.5" />
            <path d="M21 15l-5-5L5 21" />
          </svg>
          Galery
        </a>
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
            <path d="M16 2v4M8 2v4M3 10h18" />
          </svg>
          Events
        </a>
      </div>
    </div>
    <div class="side-wrapper">
      <div class="side-title">YOUR FAVOURITE</div>
      <div class="side-menu">
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 472.11 472.11">
            <path d="M260.07 216.11a63.94 63.94 0 00-28.26-53.1 55.95 55.95 0 00-43.74-90.9c-.8 0-1.6.1-2.4.12a56 56 0 10-107.2 0c-.8 0-1.6-.12-2.4-.12a55.95 55.95 0 00-43.75 90.9 64 64 0 000 106.2 55.95 55.95 0 0043.75 90.9h112a55.95 55.95 0 0043.74-90.9 63.94 63.94 0 0028.26-53.1z" fill="#6a9923" />
            <path d="M193.8 178.51a8 8 0 00-11.32-.16l-42.41 41.03V104.1a8 8 0 00-16 0v56.7l-36.35-36.35a8 8 0 00-11.31 11.3l47.66 47.67V292.8l-34.35-34.34a8 8 0 00-11.31 11.3l45.66 45.67V464.1a8 8 0 0016 0V241.63l53.6-51.78a8 8 0 00.12-11.34z" fill="#618c20" />
            <path d="M468.07 216.11a63.94 63.94 0 00-28.26-53.1 55.95 55.95 0 00-43.74-90.9c-.8 0-1.6.1-2.4.12a56 56 0 10-107.2 0c-.8 0-1.6-.12-2.4-.12a55.95 55.95 0 00-43.75 90.9 64 64 0 000 106.2 55.95 55.95 0 0043.75 90.9h112a55.95 55.95 0 0043.74-90.9 63.94 63.94 0 0028.26-53.1z" fill="#6a9923" />
            <path d="M401.72 178.46a8 8 0 00-11.31 0l-42.34 42.34V104.11a8 8 0 00-16 0v56.7l-36.35-36.35a8 8 0 00-11.31 11.3l47.66 47.67V292.8l-34.35-34.34a8 8 0 00-11.31 11.3l45.66 45.67V464.1a8 8 0 0016 0V242.87c.6-.3 1.15-.66 1.65-1.1l52-52a8 8 0 000-11.31z" fill="#618c20" />
            <path d="M364.07 216.11a63.94 63.94 0 00-28.26-53.1 55.95 55.95 0 00-43.74-90.9c-.8 0-1.6.1-2.4.12a56 56 0 10-107.2 0c-.8 0-1.6-.12-2.4-.12a55.95 55.95 0 00-43.75 90.9 64 64 0 000 106.2 55.95 55.95 0 0043.75 90.9h112a55.95 55.95 0 0043.74-90.9 63.94 63.94 0 0028.26-53.1z" fill="#88b337" />
            <path d="M297.72 178.46a8 8 0 00-11.31 0l-42.34 42.34V104.11a8 8 0 00-16 0v56.7l-36.35-36.35a8 8 0 00-11.31 11.3l47.66 47.67V292.8l-34.35-34.34a8 8 0 00-11.31 11.3l45.66 45.67V464.1a8 8 0 0016 0V242.87c.6-.3 1.15-.66 1.65-1.1l52-52a8 8 0 000-11.31z" fill="#6a9923" />
            <path d="M372.07 472.11h-272a8 8 0 010-16h272a8 8 0 010 16z" fill="#595959" /></svg>
          Foresto
        </a>
        <a href="#">
          <svg viewBox="0 0 56 58" width="512" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" transform="translate(0 -1)">
              <path d="M46.8 48.4a30.5 30.5 0 01-8.8-24l6.9-12C44.4 9.6 41.6 1 28 1A32 32 0 003.4 13.5a.2.2 0 00.2.4l2.5-.5a.5.5 0 01.4.8 14.2 14.2 0 00-3.3 4.3.2.2 0 00.3.4l2.5-.6a.5.5 0 01.6.6C5 22.5-.4 37.1.9 56.8a.5.5 0 00.9.2c2.2-3.3 5-6.2 8.4-8.3a.5.5 0 01.7.4c0 2.4.8 4.7 2.4 6.4a.5.5 0 001-.1 14 14 0 015.4-8h.5c1.7 1.2 3 3.8 3.6 5.8.5 1.8 1 3.6 1.1 5.4a.5.5 0 00.8.4c7-4 7.1-8.5 7.2-8.6a.5.5 0 01.9-.2c1.4 1.6 2.7 3.4 3.7 5.2a.5.5 0 001 0c.8-2 1.3-4.3 1.5-6.6l6.4.5a.5.5 0 00.4-1z" fill="#f9eab0" />
              <path d="M44.5 49c-4.8-.4-4.3-.3-5.6-.6a.5.5 0 00-.5.5c-.2 2-.6 4-1.2 5.9-1-1.7-2.2-3.2-3.4-4.7a.5.5 0 00-.9.2v.1c-.7 4.4-5.4 7.5-7.2 8.5a.5.5 0 01-.8-.4c-.4-3.6-1.6-8.8-4.6-11a.5.5 0 00-.6 0 14 14 0 00-5.5 7.9c-1.3-1.8-2-4-2-6.2a.5.5 0 00-.6-.4l-.7.4a.5.5 0 00-.7-.4c-2.7 1.7-5 3.9-7 6.4a91.2 91.2 0 015-36.8.5.5 0 00-.4-.1l-1.2.3c-.1-.2-.4-.4-.6-.3l-.7.1c.8-1.5 1.8-3 3-4.2.4-.3 0-1-.4-.8l-1.2.2c0-.2-.3-.3-.5-.2l-.7.1c.4-.4 6.8-10.3 18.4-12.2a27 27 0 013.9-.3c12 0 14.5 8.7 15 11.3l-6.2 12a32.6 32.6 0 007.9 24c.2.3.2.6 0 .8z" fill="#f5efca" />
              <path d="M27.8 1z" fill="#ecf0f1" />
              <path d="M53 29c.1-1.8-.5-3.6-1.8-5-1.5-1.6-4.2-3-9.2-3-12 0-13 2-13 2s0-3.8 10-6.7c.5-.2.8-.6.8-1.1-.1-1 .2-2.1.9-2.9.2-.2.5-.3.8-.3 1.7 0 8 .4 10.5 3 3 3 5 7 1 14z" fill="#f0c419" />
              <path d="M51.2 24c-4.5 5.2-3.8-1.8-19.2 1 0 0-3 0-3-2 0 0 1-2 13-2 5 0 7.7 1.4 9.2 3z" fill="#f29c1f" />
              <path d="M32 12.3a3 3 0 11-3.5-2.3z" fill="#f0c419" />
              <path d="M44 18a1 1 0 010-2c.5-.1 1-.3 1.3-.7a1 1 0 011.4 1.4C46 17.4 45 18 44 18z" fill="#e57e25" />
              <circle cx="29" cy="13" fill="#393f4a" r="2" />
              <path d="M34.6 14c-2 0-3.8-.9-5.2-2.2a4 4 0 00-3.4-1.1c-2 .4-3.1 2.7-3.1 2.8a1 1 0 01-1.8-1s1.6-3.1 4.5-3.8c1.8-.3 3.6.3 5 1.5 2.1 1.8 3.6 2 4.4 1.9.4-.1.8-.3 1.1-.6a1 1 0 011.7 1c-.8 1-2 1.6-3.2 1.6z" fill="#7f6e5d" />
            </g>
          </svg>
          Birds
        </a>
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path d="M339.4 346.5a636.5 636.5 0 00-46.7-140.2 8.4 8.4 0 00-7.6-4.8h-21a8.4 8.4 0 00-8 11 662.9 662.9 0 0129 289.7 8.4 8.4 0 008.4 9.5h50.3c4.4 0 8.1-3.6 8.3-8 2.3-52.8-2-105.6-12.7-157.2z" fill="#ff9940" />
            <g fill="#f5760f">
              <path d="M300.7 508.8a8.4 8.4 0 01-2-6.6 662.7 662.7 0 00-29-289.7 8.4 8.4 0 018-11H264a8.4 8.4 0 00-8 11 662.9 662.9 0 0129 289.7 8.4 8.4 0 008.4 9.5H307c-2.4 0-4.7-1-6.3-2.9z" />
              <path d="M331.2 312.2l-48.8 9.1c.9 5.6 1.7 11.1 2.4 16.7l50.6-9.5c-1.3-5.5-2.7-10.9-4.2-16.3zM288 369.2l1.1 16.7h57.2a641 641 0 00-2.6-16.7H288z" />
            </g>
            <path d="M499.7 157.8A125.9 125.9 0 00276.9 212a8.4 8.4 0 0010.2 9.7L495 171a8.5 8.5 0 004.6-13.3z" fill="#a4d64d" />
            <path d="M351.1 2.9a8.4 8.4 0 00-7.5-2.8 125.9 125.9 0 00-93 185c7.4 13.4 17 25.2 28.6 35.1a8.4 8.4 0 0013.5-4l60.1-205.5c.8-2.7.2-5.6-1.7-7.8z" fill="#8ec42f" />
            <g fill="#a4d64d">
              <path d="M327 199.3c-15.3-.3-30.3 2.1-44.7 7.2a8.4 8.4 0 00-3.3 13.7l148 154.7a8.5 8.5 0 0013.8-2.6 125.9 125.9 0 00-113.7-173z" />
              <path d="M293.3 212.1a125.9 125.9 0 00-222.8-54.3A8.5 8.5 0 0075 171l208 50.7a8.4 8.4 0 0010.2-9.7z" />
            </g>
            <path d="M293.2 212.5c-.6-2.8-2.6-5-5.3-6a125.9 125.9 0 00-158.5 165.8c2.2 5.5 9.7 7 13.8 2.6l148-154.7c2-2 2.7-5 2-7.7z" fill="#8ec42f" />
            <path d="M491.7 496.5c-71.3-45-153.8-68.7-238.6-68.7S86 451.6 14.5 496.5A8.4 8.4 0 0019 512h468.3a8.4 8.4 0 004.4-15.5z" fill="#ffd042" />
            <path d="M35.5 506c-1-3.6.4-7.5 3.6-9.5A447 447 0 01265.4 428l-12.3-.2a447.2 447.2 0 00-238.6 68.7A8.4 8.4 0 0019 512h24.6c-3.8 0-7-2.5-8-6z" fill="#ffc412" />
            <circle cx="290.8" cy="218.3" r="29.3" fill="#a4a09a" />
            <path d="M299.2 239.2a29.3 29.3 0 01-24.5-45.4 29.3 29.3 0 1040.7 40.6c-4.7 3-10.2 4.8-16.2 4.8z" fill="#928d86" />
            <circle cx="316" cy="256" r="29.3" fill="#a4a09a" />
            <path d="M324.4 281.1a29.3 29.3 0 01-17.1-53.1 29.4 29.4 0 1025.8 51.8c-2.8.9-5.7 1.3-8.7 1.3z" fill="#928d86" />
            <circle cx="261.5" cy="256" r="29.3" fill="#a4a09a" />
            <path d="M269.9 277a29.3 29.3 0 01-24.5-45.5A29.3 29.3 0 10286 272c-4.6 3-10.2 4.9-16.1 4.9z" fill="#928d86" />
            <g fill="#ffb266">
              <circle cx="274.1" cy="473.9" r="8.4" />
              <circle cx="378.9" cy="482.3" r="8.4" />
              <circle cx="328.6" cy="465.6" r="8.4" />
              <circle cx="223.8" cy="457.2" r="8.4" />
              <circle cx="202.8" cy="482.3" r="8.4" />
              <circle cx="144.2" cy="482.3" r="8.4" />
            </g>
          </svg>
          Nature
        </a>
        <a href="#"><svg viewBox="0 0 511.4 511.4" width="512" xmlns="http://www.w3.org/2000/svg">
            <path d="M102.8 145c-47.5 0-86 38.6-86 86v29.3h168.6V145z" fill="#0dca71" />
            <path d="M432.9 377.8l-43-70.8-95.1 60.2 84 144.2 25.2-15.3a86.2 86.2 0 0028.9-118.3z" fill="#0cba68" />
            <path d="M121.6 307l-43 70.8a86.2 86.2 0 0028.8 118.3l25.3 15.3 84-144.2z" fill="#0dca71" />
            <path d="M408.6 145H326v115.3h168.7v-29.2c0-47.5-38.6-86.1-86-86.1z" fill="#0cba68" />
            <path d="M345.9 90.2A90.3 90.3 0 00255.7 0L245 85.3l10.7 82.1H346V90.2z" fill="#0cba68" />
            <path d="M255.7 0a90.3 90.3 0 00-90.2 90.2v77.2h90.2z" fill="#0dca71" />
            <g>
              <path d="M420 269.3c0-62.4-31.7-117.1-79.2-147.4l-85 147.4z" fill="#ebb65b" />
              <path d="M255.7 269.3L340.8 122c-24.8-15.8-54-25-85-25L245 160z" fill="#fdd278" />
              <path d="M91.4 269.3h164.3l-85-147.4a174.3 174.3 0 00-79.3 147.4z" fill="#ffc663" />
              <path d="M255.7 97c-31.1 0-60.2 9.1-85 25l85 147.3z" fill="#ffe7ab" />
              <path d="M255.7 269.3L245 384l10.7 57.7c31.1 0 60.3-9.2 85.1-25z" fill="#ebb65b" />
              <path d="M255.7 269.3l85.1 147.4c47.5-30.2 79.2-85 79.2-147.4z" fill="#fdd278" />
              <path d="M170.6 416.7c24.9 15.8 54 25 85.1 25V269.3z" fill="#ffc663" />
              <path d="M255.7 269.3H91.4c0 62.4 31.8 117.2 79.2 147.4z" fill="#ffe7ab" />
              <path d="M337 269.3L296.4 199h-40.7L245 266.7l10.7 73h40.7z" fill="#ffe5a5" />
              <path d="M215 198.9l-40.6 70.4 40.7 70.5h40.6V198.9z" fill="#fffaed" />
            </g>
          </svg>
          Animals
        </a>
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path d="M176.6 360l-51.1-24.2-26-12.3L155.1 187l35.5-8.8s-58 97.4-14 181.9z" fill="#f8b40e" />
            <path d="M488.8 330.5v-62.4c0-5-4-9-9-9h-25.7c-5 0-9 4-9 9v22.5" fill="#f2171c" />
            <path d="M464.7 330.5v-71.3H454c-5 0-9 4-9 8.9v22.5" fill="#d8131e" />
            <path d="M225.8 266.7a60.1 60.1 0 110 120.2l42 22.6 141.3-15 14.6-127.8-190.4-15" fill="#bf8104" />
            <path d="M130.2 107.4H175a39.8 39.8 0 110 79.7h-44.8a8.1 8.1 0 01-8.1-8.2v-63.4c0-4.5 3.6-8.1 8-8.1z" fill="#f8b40e" />
            <path d="M175 170.8h-53v8.1c0 4.5 3.7 8.1 8.2 8.1H175a40 40 0 0039-48 39.8 39.8 0 01-39 31.8z" fill="#dd9b0a" />
            <path fill="#f8b40e" d="M356.5 423H143.1v-36h183.8" />
            <circle cx="415.1" cy="423" r="78.2" fill="#2c4046" />
            <path fill="#dd9b0a" d="M167.5 187l-64.9 173.8-3-37.3L155 187z" />
            <circle cx="415.1" cy="423" r="42.8" fill="#9aa7b8" />
            <circle cx="99.5" cy="423" r="78.2" fill="#2c4046" />
            <circle cx="99.5" cy="423" r="42.8" fill="#9aa7b8" />
            <path d="M99.5 473.6C71.6 473.6 49 451 49 423h15.7a35 35 0 0069.8 0h15.7c0 28-22.7 50.6-50.6 50.6z" fill="#1d2c30" />
            <path d="M343.6 423A78.8 78.8 0 01381 274.7c42 0 125 22.2 131 135.1.4 7.2-5.3 13.2-12.4 13.2h-156z" fill="#f8b40e" />
            <path d="M327.6 365.6a78.9 78.9 0 0179-79c12.4 0 28.6 2 45.2 7.8a138.7 138.7 0 00-70.8-19.7A78.9 78.9 0 00343.6 423h8.8a78.7 78.7 0 01-24.8-57.4z" fill="#dd9b0a" />
            <path d="M199 423a99.5 99.5 0 00-199 0h199z" fill="#f8b40e" />
            <path d="M116 324.9A99.5 99.5 0 000 423h33a99.5 99.5 0 0183-98.1z" fill="#dd9b0a" />
            <path d="M415.1 473.6c-27.9 0-50.6-22.7-50.6-50.6h15.7a35 35 0 0069.8 0h15.8c0 28-22.8 50.6-50.7 50.6z" fill="#1d2c30" />
            <path d="M146.1 107.4h-16a8.1 8.1 0 00-8 8V179c0 4.5 3.6 8.1 8 8.1h16v-79.6z" fill="#a0d9f2" />
            <path d="M146.1 170.8h-24v8.1c0 4.5 3.6 8.1 8 8.1h16v-16.2z" fill="#84bed3" />
            <path d="M394.9 222.4l-153 10.8a33.6 33.6 0 00-31.2 33.5h213v-17.4a27 27 0 00-28.8-26.9z" fill="#444d56" />
            <path fill="#d3d3d3" d="M183.9 65.5h15.7v77.2h-15.7z" />
            <g fill="#dd9b0a">
              <path d="M452.2 337.4h-76.6a7.9 7.9 0 010-15.8h76.6a7.9 7.9 0 010 15.8zM432.2 362.7h-56.6a7.9 7.9 0 010-15.7h56.6a7.9 7.9 0 010 15.7zM412.1 387.8h-36.5a7.9 7.9 0 010-15.7H412a7.9 7.9 0 010 15.7z" />
            </g>
            <circle cx="191.8" cy="147.2" r="23.1" fill="#444d56" />
            <path d="M191.8 84c-8 0-14.3-6.4-14.3-14.2V25a14.3 14.3 0 1128.6 0v44.6c0 8-6.5 14.3-14.3 14.3z" fill="#e6e6e6" />
          </svg>
          Motobike
        </a>
        <a href="#">
          <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
            <path d="M424 101l-8 25v6l16 21c3 4 0 9-4 9h-27l-5 2-15 22c-3 4-9 3-10-2l-8-25-4-4-25-8c-5-1-6-7-2-10l22-15 2-5V90c0-4 5-7 9-4l21 16h6l25-8c4-2 9 3 7 7z" fill="#fe9901" />
            <path d="M428 162h-27l-5 2-15 22c-3 4-9 3-10-2l-5-15 2-2 16-23 5-2h28c2 0 4-1 5-3l10 14c3 4 0 9-4 9z" fill="#fb8801" />
            <circle cx="438.8" cy="403.5" fill="#60b7ff" r="23.4" />
            <path d="M462 403a23 23 0 11-46-2c4 4 9 7 16 7 12 0 22-10 23-21 4 4 7 10 7 16z" fill="#26a6fe" />
            <path d="M24 511l321-137-101-100-100-101L7 494c-4 11 6 21 17 17z" fill="#fe7d43" />
            <path d="M345 374L24 511c-11 4-21-6-17-17 3 1 5 0 8-1l315-134z" fill="#fd6930" />
            <g fill="#7acaa6">
              <path d="M47 401l95 60-54 22-60-37zM84 315l162 101-54 23-128-80zM120 229l210 131 15 14-49 21-195-122z" />
            </g>
            <g fill="#57be92">
              <path d="M142 461l-54 22-20-12 54-23zM246 416l-54 23-20-13 54-23zM345 374l-49 21-20-13 53-23 1 1z" />
            </g>
            <path d="M136 4c-6 11-18 33-38 41-3 1-3 5 0 7 20 8 32 29 38 41 1 2 4 2 6 0 5-12 18-33 37-41 3-2 3-6 0-7-19-8-32-30-37-41-2-2-5-2-6 0z" fill="#fe9901" />
            <path d="M179 52c-19 8-32 29-37 41-2 2-5 2-6 0l-9-15a87 87 0 0139-41l13 8c3 1 3 5 0 7z" fill="#fb8801" />
            <path d="M345 426c-4 9-14 26-30 33-2 1-2 4 0 5 16 7 26 24 30 33 1 2 4 2 5 0 5-9 15-26 31-33 2-1 2-4 0-5-16-7-26-24-31-33-1-2-4-2-5 0z" fill="#fe9901" />
            <path d="M381 464c-16 7-26 24-31 33-1 2-4 2-5 0l-7-12a70 70 0 0132-33l11 7c2 1 2 4 0 5z" fill="#fb8801" />
            <g fill="#acacac">
              <path d="M504 288a52 52 0 00-37-19c-7 0-13 1-20 3-13-8-30-8-50-1a8 8 0 106 14c7-2 17-5 28-3l-3 3c-10 10-13 27-5 38a26 26 0 0021 11c7 0 14-4 18-9l5-12c2-10-1-20-6-28h5c10 0 19 5 26 13a8 8 0 1012-10zm-52 23c-1 4-4 7-8 7s-7-2-8-4c-4-5-2-13 3-18l7-6c5 6 7 13 6 21zM443 80c11 9 28 8 39-2l2-2c2 10-2 21-5 28a8 8 0 1014 6c8-18 9-36 3-50 3-6 4-12 5-19 1-14-5-28-15-39a8 8 0 10-11 11 37 37 0 0110 33c-8-7-18-10-28-9-5 0-9 2-12 4-6 3-10 10-10 18-1 8 2 16 8 21zm7-20c0-2 0-5 3-6 4-3 9-2 13-1 1 0 13 6 12 7l-6 7c-6 4-14 5-19 1-2-2-3-5-3-8zM289 43c-4 1-6 6-5 10 11 30 2 84-18 109a8 8 0 1012 10c11-14 20-36 24-60s3-48-3-65c-2-4-6-6-10-4zM460 231a8 8 0 105-15c-17-6-41-7-65-3s-46 13-60 25a8 8 0 1010 11c25-20 79-29 110-18z" />
            </g>
            <circle cx="345.3" cy="31.1" fill="#60b7ff" r="23.4" />
            <path d="M369 31a23 23 0 11-47 0v-1c4 3 8 5 13 5 13 0 23-10 24-23 6 4 10 11 10 19z" fill="#26a6fe" />
            <circle cx="227.5" cy="94.5" fill="#60b7ff" r="23.4" />
            <path d="M251 94a23 23 0 11-47 0c4 2 8 4 13 4 13 0 23-10 23-23 7 4 11 11 11 19z" fill="#26a6fe" />
            <path d="M164 136l217 217c3 3 3 8 0 11l-21 21c-3 3-8 3-11 0L132 168c-3-3-3-8 0-11l21-21c3-3 8-3 11 0z" fill="#f3eae6" />
            <path d="M381 364l-21 20c-3 4-8 4-11 0l-15-14c4 3 9 3 12 0l20-20c3-4 3-9 0-12l15 15c3 3 3 8 0 11z" fill="#e1d3ce" />
          </svg>
          Dance
        </a>
      </div>
    </div>
    <a href="https://twitter.com/AysnrTrkk" class="follow-me" target="_blank">
      <span class="follow-text">
        <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
        Follow me on Twitter
     </span>
      <span class="developer">
        <img src="https://pbs.twimg.com/profile_images/1253782473953157124/x56UURmt_400x400.jpg" />
        Aysenur Turk — @AysnrTrkk
      </span>
    </a>
  </div>
  <div class="main">
    <div class="search-bar">
      <input type="text" placeholder="Search" />
      <button class="right-side-button" @click="rightSide = !rightSide">
         <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
      </button>
    </div>
    <div class="main-container">
      <div class="profile">
        <div class="profile-avatar">
          <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="profile-img">
          <div class="profile-name">Quan Ha</div>
        </div>
        <img src="https://images.unsplash.com/photo-1508247967583-7d982ea01526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="" class="profile-cover">
        <div class="profile-menu">
          <a class="profile-menu-link active">Timeline</a>
          <a class="profile-menu-link">About</a>
          <a class="profile-menu-link">Friends</a>
          <a class="profile-menu-link">Photos</a>
          <a class="profile-menu-link">More</a>
        </div>
      </div>
      <div class="timeline">
        <div class="timeline-left">
          <div class="intro box">
            <div class="intro-title">
              Introduction
              <button class="intro-menu"></button>
            </div>
            <div class="info">
              <div class="info-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.889 503.889" fill="currentColor">
                  <path d="M453.727 114.266H345.151V70.515c0-20.832-16.948-37.779-37.78-37.779H196.517c-20.832 0-37.78 16.947-37.78 37.779v43.751H50.162C22.502 114.266 0 136.769 0 164.428v256.563c0 27.659 22.502 50.161 50.162 50.161h403.565c27.659 0 50.162-22.502 50.162-50.161V164.428c0-27.659-22.503-50.162-50.162-50.162zm-262.99-43.751a5.786 5.786 0 015.78-5.779h110.854a5.786 5.786 0 015.78 5.779v43.751H190.737zM32 164.428c0-10.015 8.147-18.162 18.162-18.162h403.565c10.014 0 18.162 8.147 18.162 18.162v23.681c0 22.212-14.894 42.061-36.22 48.27l-167.345 48.723a58.482 58.482 0 01-32.76 0L68.22 236.378C46.894 230.169 32 210.321 32 188.109zm421.727 274.725H50.162c-10.014 0-18.162-8.147-18.162-18.161V253.258c8.063 6.232 17.254 10.927 27.274 13.845 184.859 53.822 175.358 52.341 192.67 52.341 17.541 0 7.595 1.544 192.67-52.341 10.021-2.918 19.212-7.613 27.274-13.845v167.733c.001 10.014-8.147 18.162-18.161 18.162z" /></svg>
                Product Designer at <a href="#">Bravebist</a>
              </div>
              <div class="info-item">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                  <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                  <path d="M9 22V12h6v10" />
                </svg>
                Live in <a href="#">Hanoi, Vietnam</a>
              </div>
              <div class="info-item">
                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                  <path d="M437 75C388.7 26.6 324.4 0 256 0S123.3 26.6 75 75C26.6 123.3 0 187.6 0 256s26.6 132.7 75 181c48.3 48.4 112.6 75 181 75s132.7-26.6 181-75c48.4-48.3 75-112.6 75-181s-26.6-132.7-75-181zM252.4 481.9c-52-.9-103.7-19.5-145.2-55.8L256 277.2l21.7 21.8a165.9 165.9 0 00-35.7 87c-3.5 30.5 0 63.3 10.4 95.9zM299 320.3l105.7 105.8a224.8 224.8 0 01-121.3 54.1C262 419.5 268 360.3 299 320.3zm21.2-21.2c40-31 99.2-37 160-15.6A224.8 224.8 0 01426 404.8zM482 252.4a231.7 231.7 0 00-96-10.4 165.9 165.9 0 00-87 35.7L277.3 256l148.9-148.8c36.3 41.5 55 93.2 55.8 145.2zm-290.2-39.5c-40 31-99.2 37-160 15.6A224.8 224.8 0 0186 107.2zm-84.5-127a224.8 224.8 0 01121.3-54.1C250 92.5 244 151.7 213 191.7zM270 126c3.5-30.5 0-63.3-10.4-95.9 52 .9 103.7 19.5 145.2 55.8L256 234.8 234.3 213a165.9 165.9 0 0035.7-87zM30 259.6a242 242 0 0072.7 11.7c7.8 0 15.6-.5 23.2-1.3a165.9 165.9 0 0087-35.7l21.8 21.7L85.9 404.8a225.3 225.3 0 01-55.8-145.2z" /></svg>
                Player name <a href="#">Quan Ha</a>
              </div>
            </div>
          </div>
          <div class="event box">
            <div class="event-wrapper">
              <img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" class="event-img" />
              <div class="event-date">
                <div class="event-month">Jan</div>
                <div class="event-day">01</div>
              </div>
              <div class="event-title">Winter Wonderland</div>
              <div class="event-subtitle">01st Jan, 2019 07:00AM</div>
            </div>
          </div>
          <div class="pages box">
            <div class="intro-title">
              Your pages
              <button class="intro-menu"></button>
            </div>
            <div class="user">
              <img src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0f" alt="" class="user-img">
              <div class="username">Chandelio</div>
            </div>
            <div class="user">
              <img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=d5849d81af587a09dbcf3f11f6fa122f" alt="" class="user-img">
              <div class="username">Janet Jolie</div>
            </div>
            <div class="user">
              <img src="https://images.unsplash.com/photo-1546539782-6fc531453083?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" alt="" class="user-img">
              <div class="username">Patrick Watsons</div>
            </div>
          </div>
        </div>
        <div class="timeline-right">
          <div class="status box">
            <div class="status-menu">
              <a class="status-menu-item active" href="#">Status</a>
              <a class="status-menu-item" href="#">Photos</a>
              <a class="status-menu-item" href="#">Videos</a>
            </div>
            <div class="status-main">
              <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" class="status-img">
              <textarea class="status-textarea" placeholder="Write something to Quan Ha.."></textarea>
            </div>
            <div class="status-actions">
              <a href="#" class="status-action">
                <svg viewBox="-42 0 512 512" xmlns="http://www.w3.org/2000/svg">
                  <path d="M333.7 123.3c0 33.9-12.2 63.2-36.2 87.2-24 24-53.3 36.1-87.1 36.1h-.1c-33.9 0-63.2-12.1-87.1-36.1-24-24-36.2-53.3-36.2-87.2 0-33.9 12.2-63.2 36.2-87.2 24-24 53.2-36 87-36.1h.2c33.8 0 63.2 12.2 87.1 36.1 24 24 36.2 53.3 36.2 87.2zm0 0" fill="#ffbb85" />
                  <path d="M427.2 424c0 26.7-8.5 48.3-25.3 64.3-16.5 15.7-38.4 23.7-65 23.7H90.2c-26.6 0-48.5-8-65-23.7C8.5 472.3 0 450.7 0 423.9c0-10.2.3-20.4 1-30.2a302.7 302.7 0 0112.1-64.9c3.3-10.3 7.8-20.5 13.4-30.3 5.8-10.2 12.5-19 20.1-26.3a89 89 0 0129-18.2c11.2-4.4 23.7-6.7 37-6.7 5.2 0 10.3 2.2 20 8.5l21 13.5c6.6 4.3 15.7 8.3 27 11.9a107.7 107.7 0 0033 5.3c11 0 22-1.8 33-5.3 11.2-3.6 20.3-7.6 27-12l21-13.4c9.7-6.3 14.7-8.5 20-8.5 13.3 0 25.7 2.3 37 6.7a89 89 0 0128.9 18.2c7.6 7.3 14.4 16.1 20.2 26.3 5.5 9.8 10 20 13.3 30.3a305.5 305.5 0 0112.1 64.9c.7 9.8 1 20 1 30.2zm0 0" fill="#6aa9ff" />
                  <path d="M210.4 246.6h-.1V0c34 0 63.3 12.2 87.2 36.1 24 24 36.2 53.3 36.2 87.2 0 33.9-12.2 63.2-36.2 87.2-24 24-53.3 36.1-87.1 36.1zm0 0" fill="#f5a86c" />
                  <path d="M427.2 424c0 26.7-8.5 48.3-25.3 64.3-16.5 15.7-38.4 23.7-65 23.7H210.2V286.5h3.3c11 0 22-1.8 33-5.3 11.2-3.6 20.3-7.6 27-12l21-13.4c9.7-6.3 14.7-8.5 20-8.5 13.3 0 25.7 2.3 37 6.7a89 89 0 0128.9 18.2c7.6 7.3 14.4 16.1 20.2 26.3 5.5 9.8 10 20 13.3 30.3a305.5 305.5 0 0112.1 64.9c.7 9.8 1 20 1 30.2zm0 0" fill="#2682ff" />
                </svg>
                People
              </a>
              <a href="#" class="status-action">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <path d="M87.084 192c-.456-5.272-.688-10.6-.688-16C86.404 78.8 162.34 0 256.004 0s169.6 78.8 169.6 176c0 5.392-.232 10.728-.688 16h.688c0 96.184-169.6 320-169.6 320s-169.6-223.288-169.6-320h.68zm168.92 32c36.392 1.024 66.744-27.608 67.84-64-1.096-36.392-31.448-65.024-67.84-64-36.392-1.024-66.744 27.608-67.84 64 1.096 36.392 31.448 65.024 67.84 64z" fill="#e21b1b" />
                </svg>
                Check in
              </a>
              <a href="#" class="status-action">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <circle cx="256" cy="256" r="256" fill="#ffca28" />
                  <g fill="#6d4c41">
                    <path d="M399.68 208.32c-8.832 0-16-7.168-16-16 0-17.632-14.336-32-32-32s-32 14.368-32 32c0 8.832-7.168 16-16 16s-16-7.168-16-16c0-35.296 28.704-64 64-64s64 28.704 64 64c0 8.864-7.168 16-16 16zM207.68 208.32c-8.832 0-16-7.168-16-16 0-17.632-14.368-32-32-32s-32 14.368-32 32c0 8.832-7.168 16-16 16s-16-7.168-16-16c0-35.296 28.704-64 64-64s64 28.704 64 64c0 8.864-7.168 16-16 16z" />
                  </g>
                  <path d="M437.696 294.688c-3.04-4-7.744-6.368-12.736-6.368H86.4c-5.024 0-9.728 2.336-12.736 6.336-3.072 4.032-4.032 9.184-2.688 14.016C94.112 390.88 170.08 448.32 255.648 448.32s161.536-57.44 184.672-139.648c1.376-4.832.416-9.984-2.624-13.984z" fill="#fafafa" />
                </svg>
                Mood
              </a>
              <button class="status-share">Share</button>
            </div>
          </div>
          <div class="album box">
            <div class="status-main">
              <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" class="status-img" />
              <div class="album-detail">
                <div class="album-title"><strong>Quan Ha</strong> create new <span>album</span></div>
                <div class="album-date">6 hours ago</div>
              </div>
              <button class="intro-menu"></button>
            </div>
            <div class="album-content">When the bass drops, so do my problems.
              <div class="album-photos">
                <img src="https://images.unsplash.com/photo-1508179719682-dbc62681c355?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80" alt="" class="album-photo" />
                <div class="album-right">
                  <img src="https://images.unsplash.com/photo-1502872364588-894d7d6ddfab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="" class="album-photo" />
                  <img src="https://images.unsplash.com/photo-1566737236500-c8ac43014a67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="" class="album-photo" />
                </div>
              </div>
            </div>
            <div class="album-actions">
              <a href="#" class="album-action">
                <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
                </svg>
                87
              </a>
              <a href="#" class="album-action">
                <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
                  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
                </svg>
                20
              </a>
              <a href="#" class="album-action">
                <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
                  <path d="M17 1l4 4-4 4" />
                  <path d="M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4" />
                  <path d="M21 13v2a4 4 0 01-4 4H3" />
                </svg>
                13
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="right-side" :class="{ 'active': rightSide }">
    <div class="account">
      <button class="account-button">
        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
          <path d="M22 6l-10 7L2 6" />
        </svg>
      </button>
      <button class="account-button">
        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
          <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
        </svg>
      </button>
      <span class="account-user">Quan Ha
        <img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="account-profile" alt="">
        <span>▼</span>
      </span>
    </div>
    <div class="side-wrapper stories">
      <div class="side-title">STORIES</div>
      <div class="user">
        <img src="https://pbs.twimg.com/profile_images/1102351320567164931/ZCkJgJIH.png" alt="" class="user-img">
        <div class="username">Lisandro Matos
          <div class="album-date">12 hours ago</div>
        </div>
      </div>
      <div class="user">
        <img src="https://pbs.twimg.com/profile_images/1153966095444992000/1lpIyHaQ.jpg" alt="" class="user-img">
        <div class="username">Gvozden Boskovsky
          <div class="album-date">29 minutes ago</div>
        </div>
      </div>
      <div class="user">
        <img src="https://images.unsplash.com/photo-1565464027194-7957a2295fb7?ixlib=rb-1.2.1&auto=format&fit=crop&w=3500&q=80" alt="" class="user-img">
        <div class="username">Hnek Fortuin
          <div class="album-date">3 hours ago</div>
        </div>
      </div>
      <div class="user">
        <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" alt="" class="user-img">
        <div class="username">Lubomir Dvorak
          <div class="album-date">18 hours ago</div>
        </div>
      </div>
    </div>
    <div class="side-wrapper contacts">
      <div class="side-title">CONTACTS</div>
      <div class="user">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" class="user-img">
        <div class="username">Andrei Mashrin
          <div class="user-status"></div>
        </div>
      </div>
      <div class="user">
        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=046c29138c1335ef8edee7daf521ba50" class="user-img">
        <div class="username">Aryn Jacobssen
          <div class="user-status offline"></div>
        </div>
      </div>
      <div class="user">
        <img src="https://images.unsplash.com/photo-1575084713138-342cae5f8d00?ixlib=rb-1.2.1&auto=format&fit=crop&w=958&q=80" class="user-img">
        <div class="username">Carole Landu
          <div class="user-status offline"></div>
        </div>
      </div>
      <div class="user">
        <img src="https://images.pexels.com/photos/598745/pexels-photo-598745.jpeg?h=350&auto=compress&cs=tinysrgb" class="user-img">
        <div class="username">Chineze Afa
          <div class="user-status"></div>
        </div>
      </div>
      <div class="user">
        <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" class="user-img">
        <div class="username">Mok Kwang
          <div class="user-status"></div>
        </div>
      </div>
      <div class="user">
        <img src="https://randomuser.me/api/portraits/women/63.jpg" class="user-img">
        <div class="username">Naomi Yepes
          <div class="user-status"></div>
        </div>
      </div>
      <div class="user">
        <img src="https://images.unsplash.com/photo-1476493279419-b785d41e38d8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=61eaea85f1aa3d065400179c78163f15" class="user-img">
        <div class="username">Shaamikh Ale
          <div class="user-status"></div>
        </div>
      </div>
      <div class="user">
        <img src="https://m.media-amazon.com/images/M/MV5BMjI4NDcyNjQxNl5BMl5BanBnXkFtZTgwMzI4OTM3NjM@._V1_UY256_CR13,0,172,256_AL_.jpg" class="user-img">
        <div class="username">Sofia Alcocer
          <div class="user-status idle"></div>
        </div>
      </div>
      <div class="user">
        <img src="https://images.unsplash.com/photo-1509380836717-c4320ccf1a6f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=e01c8c45a063daaf6d6e571a32bd6c90" class="user-img">
        <div class="username">Wen Yahui
          <div class="user-status"></div>
        </div>
      </div>
      <div class="user">
        <img src="https://pbs.twimg.com/profile_images/737221709267374081/sdwta9Oh.jpg" alt="" class="user-img">
        <div class="username">Leslee Moss
          <div class="user-status idle"></div>
        </div>
      </div>
    </div>
    <div class="search-bar right-search">
      <input type="text" placeholder="Search" />
      <div class="search-bar-svgs">
        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
        </svg>
        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.34 469.34">
          <path d="M456.84 76.17l-64-64.06c-16.13-16.13-44.18-16.17-60.37.04L45.77 301.67a10.73 10.73 0 00-2.7 4.59L.41 455.73a10.68 10.68 0 0013.19 13.2l149.33-42.7c1.73-.5 3.3-1.42 4.58-2.7l289.33-286.98c8.06-8.07 12.5-18.78 12.5-30.19s-4.44-22.12-12.5-30.2zM285.99 89.74L325.25 129l-205 205-14.7-29.44a10.67 10.67 0 00-9.55-5.9H78.92L286 89.75zM26.2 443.14l13.9-48.64 34.74 34.74-48.64 13.9zm123.14-35.18L98.3 422.54l-51.5-51.5L61.38 320H89.4l18.38 36.77a10.67 10.67 0 004.77 4.77l36.78 18.39v28.03zm21.33-17.54v-17.09c0-4.04-2.28-7.72-5.9-9.54l-29.43-14.7 205-205 39.26 39.26-208.93 207.07zm271.11-268.7l-47.03 46.61L301 74.6l46.59-47c8.06-8.07 22.1-8.07 30.16 0l64 64c4.03 4.03 6.25 9.38 6.25 15.08s-2.22 11.05-6.22 15.05z" /></svg>
        <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
      <path d="M12 5v14M5 12h14"/>
    </svg>
      </div>
    </div>
  </div>
  <div class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></div>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700|Source+Sans+Pro:300,400,600,700&display=swap");

$bg-color: #151728;
$border-color: #272a3a;
$title-font: "DM Sans", sans-serif;
$body-font: "Source Sans Pro", sans-serif;
$side-title: #5c5e6e;
$button: #8f98a9;

* {
 outline: none;
 box-sizing: border-box;
}

html {
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
}

body {
 font-family: $body-font;
 background-color: #373e57;
 color: #ccc8db;
}

.container {
 background-color: $bg-color;
 display: flex;
 max-width: 1600px;
 height: 100vh;
 overflow: hidden;
 margin: 0 auto;
}

.left-side {
 width: 260px;
 border-right: 1px solid $border-color;
 display: flex;
 flex-direction: column;
 transition: 0.3s;
 background-color: $bg-color;
 overflow: auto;
 flex-shrink: 0;
 @media screen and (max-width: 930px) {
  &.active {
   z-index: 4;
   & > *:not(.logo) {
    opacity: 1;
    transition: 0.3s 0.2s;
   }
   .left-side-button svg:first-child {
    opacity: 0;
   }
   .left-side-button svg:last-child {
    transform: translate(-50%, -50%);
    opacity: 1;
   }
  }
  &:not(.active) {
   width: 56px;
   overflow: hidden;
   & > *:not(.logo):not(.left-side-button) {
    opacity: 0;
   }
   .logo {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    transform-origin: bottom;
    display: flex;
    align-items: center;
    margin-top: -10px;
   }
  }
 }
}

.right-side {
 width: 280px;
 flex-shrink: 0;
 margin-left: auto;
 overflow: auto;
 background-color: $bg-color;
 display: flex;
 flex-direction: column;
 @media screen and (max-width: 1210px) {
  position: fixed;
  right: 0;
  top: 0;
  transition: 0.3s;
  height: 100%;
  transform: translateX(280px);
  z-index: 4;

  &.active {
   transform: translatex(0);
  }
 }
}

.main {
 flex-grow: 1;
 display: flex;
 flex-direction: column;
 background-color: #181d2f;
}

.logo {
 font-family: $title-font;
 font-size: 15px;
 color: #fff;
 font-weight: 600;
 text-align: center;
 height: 68px;
 line-height: 68px;
 letter-spacing: 4px;
 position: sticky;
 top: 0;
 background: linear-gradient(
  to bottom,
  rgba(21, 23, 40, 1) 0%,
  rgba(21, 23, 40, 1) 76%,
  rgba(21, 23, 40, 0) 100%
 );
}

.side-title {
 font-family: $title-font;
 color: $side-title;
 font-size: 15px;
 font-weight: 600;
 margin-bottom: 20px;
}

.side-wrapper {
 padding: 30px;
}

.side-menu {
 display: flex;
 flex-direction: column;
 font-size: 15px;
 white-space: nowrap;
 svg {
  margin-right: 16px;
  width: 16px;
 }
 a {
  text-decoration: none;
  color: #9c9cab;
  display: flex;
  align-items: center;
  &:hover {
   color: #fff;
  }
  &:not(:last-child) {
   margin-bottom: 20px;
  }
 }
}

.follow-me {
 text-decoration: none;
 font-size: 14px;
 display: flex;
 align-items: center;
 margin-top: auto;
 overflow: hidden;
 color: #9c9cab;
 padding: 0 20px;
 height: 52px;
 flex-shrink: 0;
 border-top: 1px solid $border-color;
 position: relative;
 svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
 }
}

.follow-text {
 display: flex;
 align-items: center;
 transition: 0.3s;
}

.follow-me:hover {
 .follow-text {
  transform: translateY(100%);
 }
 .developer {
  top: 0;
 }
}

.developer {
 position: absolute;
 color: #fff;
 left: 0;
 top: -100%;
 display: flex;
 transition: 0.3s;
 padding: 0 20px;
 align-items: center;
 background-color: $border-color;
 width: 100%;
 height: 100%;
}

.developer img {
 border-radius: 50%;
 width: 26px;
 height: 26px;
 object-fit: cover;
 margin-right: 10px;
}

.search-bar {
 height: 60px;
 background-color: $bg-color;
 z-index: 3;
 position: relative;
 input {
  height: 100%;
  width: 100%;
  display: block;
  background-color: transparent;
  border: none;
  padding: 0 54px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3e%3cpath d='M508.9 478.7L360 330a201.6 201.6 0 0045.2-127.3C405.3 90.9 314.4 0 202.7 0S0 91 0 202.7s91 202.6 202.7 202.6c48.2 0 92.4-17 127.3-45.2L478.7 509c4.2 4.1 11 4.1 15 0l15.2-15.1c4.1-4.2 4.1-11 0-15zm-306.2-116c-88.3 0-160-71.8-160-160s71.7-160 160-160 160 71.7 160 160-71.8 160-160 160z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%235C5D71'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 25px 50%;
  color: #fff;
  font-family: $body-font;
  font-weight: 600;
  &::placeholder {
   color: #5c5d71;
  }
 }
}

.main-container {
 padding: 20px;
 flex-grow: 1;
 overflow: auto;
 background-color: #24273b;
}

.profile {
 position: relative;
 height: 40vh;
 min-height: 250px;
 max-height: 350px;
 z-index: 1;

 &-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
 }

 &:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  background-image: url("https://images.unsplash.com/photo-1508247967583-7d982ea01526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: blur(50px);
  opacity: 0.7;
 }
}

.profile-menu {
 position: absolute;
 bottom: 0;
 padding-left: 200px;
 background: $bg-color;
 width: 100%;
 display: flex;
 border-radius: 0 0 4px 4px;
}

.profile-menu-link {
 padding: 20px 16px;
 color: $side-title;
 transition: 0.3s;
 cursor: pointer;

 &.active,
 &:hover {
  color: #fff;
  background-color: #1b1d2e;
  border-bottom: 3px solid #1488fa;
 }
}

.profile-avatar {
 position: absolute;
 align-items: center;
 display: flex;
 z-index: 1;
 bottom: 16px;
 left: 24px;
}

.profile-img {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 object-fit: cover;
 border: 3px solid $bg-color;
}

.profile-name {
 margin-left: 24px;
 margin-bottom: 24px;
 font-size: 22px;
 color: #fff;
 font-weight: 600;
 font-family: $title-font;
}

.timeline {
 display: flex;
 padding-top: 20px;
 position: relative;
 z-index: 2;
 &-left {
  width: 310px;
  flex-shrink: 0;
 }
 &-right {
  flex-grow: 1;
  padding-left: 20px;
 }
 @media screen and (max-width: 768px) {
  flex-wrap: wrap;
  flex-direction: column-reverse;
  &-right {
   padding-left: 0;
   margin-bottom: 20px;
  }
  &-left {
   width: 100%;
  }
 }
}

.box {
 background-color: $bg-color;
 border-radius: 4px;
}

.intro {
 padding: 20px;

 &-title {
  font-family: $title-font;
  color: $side-title;
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
 }
 &-menu {
  background-color: $button;
  box-shadow: -8px 0 0 0 $button, 8px 0 0 0 $button;
  width: 5px;
  height: 5px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  margin-left: auto;
  margin-right: 8px;
 }
}

.info {
 font-size: 15px;

 &-item {
  display: flex;
  color: #c3c5d5;
 }

 &-item + &-item {
  margin-top: 14px;
 }

 &-item a {
  margin-left: 6px;
  color: #1771d6;
  text-decoration: none;
 }

 &-item svg {
  width: 16px;
  margin-right: 10px;
 }
}

.event {
 position: relative;
 margin-top: 20px;
 padding: 10px;
}

.event-wrapper {
 position: relative;
}

.event-img {
 max-width: 100%;
 display: block;
 padding-bottom: 12px;
}

.event-date {
 position: absolute;
 left: 20px;
 top: 15px;
}

.event-month {
 background-color: #1687fa;
 padding: 7px 20px;
 font-weight: 600;
 font-family: $title-font;
 color: #fff;
 text-align: center;
 border-radius: 4px 4px 0 0;
}

.event-day {
 width: 100%;
 backdrop-filter: blur(4px);
 color: #fff;
 font-size: 22px;
 font-weight: 600;
 font-family: $title-font;
 background-color: rgba(0, 0, 0, 0.4);
 padding: 6px 0;
 text-align: center;
}

.event-title {
 color: #c3c5d5;
 margin-bottom: 5px;
 font-family: $title-font;
 font-weight: 600;
 padding: 0 14px;
}

.event-subtitle {
 color: $side-title;
 font-family: $title-font;
 font-size: 13px;
 font-weight: 500;
 padding: 0 14px;
}

.pages {
 margin-top: 20px;
 padding: 20px;
}

.user {
 display: flex;
 align-items: center;
 cursor: pointer;
}

.user + .user {
 margin-top: 18px;
}

.user-img {
 border-radius: 50%;
 width: 45px;
 height: 45px;
 margin-right: 15px;
 object-fit: cover;
 object-position: center;
}

.username {
 font-size: 15px;
 font-family: $title-font;
}

.status-menu {
 padding: 20px;
 display: flex;
 align-items: center;
 &-item {
  text-decoration: none;
  color: #ccc8db;
  padding: 10px 14px;
  line-height: 0.7;
  font-family: $title-font;
  font-weight: 500;
  border-radius: 20px;
  &.active,
  &:hover {
   background-color: #2e2e40;
   color: #fff;
  }
 }
 &-item + &-item {
  margin-left: 10px;
 }
 @media screen and (max-width: 500px) {
  font-size: 14px;
  &-item + &-item {
   margin-left: 0;
  }
 }
}

.status-img {
 width: 50px;
 height: 50px;
 object-fit: cover;
 border-radius: 50%;
 margin-right: 20px;
}

.status-main {
 padding: 0 20px;
 display: flex;
 align-items: center;
 border-bottom: 1px solid $border-color;
 padding-bottom: 20px;
 flex-wrap: wrap;
}

.status-textarea {
 flex-grow: 1;
 background-color: transparent;
 border: none;
 resize: none;
 margin-top: 15px;
 color: #fff;
 max-width: calc(100% - 70px);
 &::placeholder {
  color: #5c5d71;
 }
}

.status-actions {
 display: flex;
 padding: 10px 20px;
}

.status-action {
 text-decoration: none;
 color: #ccc8db;
 margin-right: 20px;
 display: flex;
 align-items: center;
 svg {
  width: 16px;
  flex-shrink: 0;
  margin-right: 8px;
 }
 @media screen and (max-width: 1320px) {
  width: 16px;
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
 }
}

.status-share {
 background-color: #1b86f9;
 border: none;
 color: #fff;
 border-radius: 4px;
 padding: 10px 20px;
 margin-left: auto;
 box-shadow: 0 0 20px #1b86f9;
 cursor: pointer;
}

.album {
 padding-top: 20px;
 margin-top: 20px;
 .status-main {
  border: none;
  display: flex;
 }
 .intro-menu {
  margin-bottom: auto;
  margin-top: 5px;
 }
}

.album-detail {
 width: calc(100% - 110px);
}

.album-title span {
 color: #1771d6;
 cursor: pointer;
}

.album-date {
 font-size: 15px;
 color: #595c6c;
 margin-top: 4px;
}

.album-content {
 padding: 0 20px 20px;
}

.album-photo {
 width: 100%;
 object-fit: cover;
 object-position: center;
 border-radius: 4px;
 margin-top: 10px;
}

.album-photos {
 display: flex;
 margin-top: 20px;
 max-height: 30vh;
}

.album-photos > .album-photo {
 width: 50%;
}

.album-right {
 width: 50%;
 margin-left: 10px;
 line-height: 0;
 display: flex;
 flex-direction: column;
 .album-photo {
  height: calc(50% - 10px);
 }
}

.album-actions {
 padding: 0 20px 20px;
}

.album-action {
 margin-right: 20px;
 text-decoration: none;
 color: #a2a4b4;
 display: inline-flex;
 align-items: center;
 font-weight: 600;
 &:hover {
  color: #fff;
 }
 svg {
  width: 16px;
  margin-right: 6px;
 }
}

.account-button {
 border: 0;
 background: 0;
 color: #64677a;
 padding: 0;
 cursor: pointer;
 position: relative;
}

.account-button svg {
 width: 20px;
}

.account-button:not(.right-side-button) + .account-button:before {
 position: absolute;
 right: 0px;
 top: -2px;
 background-color: #1b86f8;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 content: "";
 border: 2px solid $bg-color;
}

.account-profile {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 margin: 0 10px;
}

.account-user {
 display: inline-flex;
 align-items: center;
 color: #64677a;
 font-weight: 600;
 span {
  font-size: 10px;
  font-weight: normal;
 }
}

.account {
 height: 60px;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 position: sticky;
 top: 0;
 background-color: $bg-color;
 z-index: 3;
 flex-shrink: 0;
}

.stories {
 border-bottom: 1px solid $border-color;
}
.stories .user-img {
 border: 2px solid #e2b96c;
}

.stories .album-date {
 font-family: $body-font;
}

.user-status {
 background-color: #7fd222;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 margin-left: auto;
 &.offline {
  background-color: #606a8d;
 }
 &.idle {
  background-color: #dd1c20;
 }
}

.contacts .username {
 display: flex;
 flex: 1;
 align-items: center;
}

.right-search svg {
 width: 16px;
 height: 16px;
}

.right-search {
 padding-right: 10px;
 display: flex;
 align-items: center;
 border-top: 1px solid $border-color;
 position: sticky;
 bottom: 0;
 margin-top: auto;
}

.right-search input {
 padding-right: 10px;
}

.search-bar-svgs {
 color: #656679;
 display: flex;
}

.search-bar-svgs svg {
 margin-right: 16px;
}

.overlay {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background-color: rgba(#24273b, 0.8);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: 0.3s;

 @media screen and (max-width: 1210px) {
  &.active {
   z-index: 3;
   opacity: 1;
   visibility: visible;
   pointer-events: all;
  }
 }
}

.right-side-button {
 position: absolute;
 right: 0;
 top: 0;
 height: 100%;
 border: 0;
 width: 52px;
 background-color: #1e2031;
 border-left: 1px solid $border-color;
 color: #fff;
 display: none;
 cursor: pointer;

 &:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  background-color: #1b86f8;
  border: 2px solid #1e2031;
  top: 13px;
  right: 12px;
 }
 svg {
  width: 22px;
 }
 @media screen and (max-width: 1210px) {
  display: block;
 }
}

.left-side-button {
 display: none;
 @media screen and (max-width: 930px) {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  height: 60px;
  background-color: rgba($border-color, 0.5);
  border: 0;
  padding: 0;
  line-height: 0;
  color: #fff;
  border-bottom: 1px solid $border-color;
  svg {
   transition: 0.2s;
   width: 24px;
  }
  svg:last-child {
   position: absolute;
   left: 50%;
   transform: translate(100%, -50%);
   top: 50%;
   opacity: 0;
  }
 }
}

@media screen and (max-width: 700px) {
 .profile-avatar {
  top: -25px;
  left: 50%;
  transform: translatex(-50%);
  align-items: center;
  flex-direction: column;
  justify-content: center;
 }
 .profile-img {
  height: 100px;
  width: 100px;
 }
 .profile-name {
  margin: 5px 0;
 }
 .profile-menu {
  padding-left: 0;
  width: 100%;
  overflow: auto;
  justify-content: center;
 }
 .profile-menu-link {
  padding: 16px;
  font-size: 15px;
 }
}

@media screen and (max-width: 480px) {
 .profile-menu-link:nth-last-child(1),
 .profile-menu-link:nth-last-child(2) {
  display: none;
 }
}

::-webkit-scrollbar {
  width: 10px;
  border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.01);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.11);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.1);
}
              
            
!

JS

              
                
              
            
!
999px

Console