Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

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

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="main-grid">  
  <aside class="main-side">
     <header class="common-header">
       <div class="common-header-start">
           <button class="u-flex js-user-nav">
             <img class="profile-image" src="http://bit.ly/3b6qNEw" alt="Elad Shechter">
             <div class="common-header-content">
                <h1 class="common-header-title">Elad Shechter</h1>
            </div>
           </button>       
       </div>
       <nav class="common-nav">
           <ul class="common-nav-list">
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon">πŸ•˜</span>
               </button>
             </li>
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon icon-status">πŸ’¬</span>
               </button>
             </li>
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon icon-menu" aria-label="menu"></span>
               </button>
             </li>
           </ul>
         </nav>
     </header>
    <section class="common-alerts"><!-- optional alert message --></section>
    <section class="common-search">
        <input type="search" class="text-input" placeholder="Search or start new chat">
    </section>
    <section class="chats">
      <ul class="chats-list">
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p100x100/10325799_276849335820343_269039155920934591_n.png?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=fxci6qYcSvoAX-bZfj2&_nc_ht=scontent.fhfa1-2.fna&oh=ad1c246e7e4a52c607aafd99ed7217a2&oe=5EEAF8B0" alt="Elad Shechter">
            <header class="chats-item-header">
              <h3 class="chats-item-title">CSS Masters Israel</h3>
              <time class="chats-item-time">12:30</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Beside it yo can follow my twitter account: @eladsc</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://pbs.twimg.com/profile_images/507217425/rachelbyserge_400x400.jpg" alt="Rachel Bratt Tannenbaum">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Rachel Bratt Tannenbaum</h3>
              <time class="chats-item-time">12:05</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">When is our next meetup?</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages">1</span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p240x240/67203290_10217514133916884_6721473094952681472_o.jpg?_nc_cat=100&_nc_sid=7206a8&_nc_ohc=re-hfG5q_CoAX-R1IpO&_nc_ht=scontent.fhfa1-2.fna&_nc_tp=6&oh=3596c17bfc18e539e8d604b2d106ac51&oe=5EE7B77C" alt="Yanai Edri">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Yanai Edri</h3>
              <time class="chats-item-time">12:05</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">See you at Yerucham!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://pbs.twimg.com/profile_images/1117382038238240769/v3zkFNFa_400x400.png" alt="Rotem Lurx Horovitz">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Rotem Lurx Horovitz</h3>
              <time class="chats-item-time">11:57</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Let's create a juniors meetup</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages">3</span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="http://bit.ly/2HMqGR7" alt="Yehuda Avrashi">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Yehuda Avrashi</h3>
              <time class="chats-item-time">11:48</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">It was a great plesure for me</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages">1</span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="http://bit.ly/2vVhJCm" alt="Itai Segal">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Itai Segal</h3>
              <time class="chats-item-time">Yesterday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">The is very nice!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li> 
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-9/88098818_10219217642444816_3909333207673208832_o.jpg?_nc_cat=107&_nc_sid=09cbfe&_nc_ohc=ehj_VHsfD1IAX_Y9ift&_nc_ht=scontent.fhfa1-2.fna&oh=a7b2660b2b9fe517667e9f4b545f2e75&oe=5EEAE76E" alt="Ronen Mars Bahteev">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Ronen Mars Bahteev</h3>
              <time class="chats-item-time">Yesterday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Let's do a meetup at Bigpanda</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li> 
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-1.fna.fbcdn.net/v/t1.0-1/p480x480/68945154_10157466813344784_6338834733429948416_n.jpg?_nc_cat=103&_nc_sid=7206a8&_nc_ohc=cNR0r4cFIgUAX8zz3be&_nc_ht=scontent.fhfa1-1.fna&_nc_tp=6&oh=4a5d70abaca1964b02be832d4cfe9608&oe=5EE8A96C" alt="Alon Gruss">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Alon Gruss</h3>
              <time class="chats-item-time">Yesterday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Great!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li> 
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="http://bit.ly/37UWsGt" alt="Kalo Avi">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Kalo Avi</h3>
              <time class="chats-item-time">Yesterday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">I have an idea for you</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.ftlv1-2.fna.fbcdn.net/v/t1.0-9/64559952_10157202999688965_7161203821085982720_n.jpg?_nc_cat=110&_nc_sid=174925&_nc_ohc=9r_P7Wc-c2cAX8Dm_s2&_nc_ht=scontent.ftlv1-2.fna&oh=e71d355d78c765711570abe73b7f1ccd&oe=5EF83FE2" alt="Bambi Haber">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Bambi Haber</h3>
              <time class="chats-item-time">Sunday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">This is awesome!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t31.0-1/p480x480/19693620_10155490124643377_7681015883106028225_o.jpg?_nc_cat=101&_nc_sid=7206a8&_nc_ohc=rCDyj2YlBTMAX-XWZBg&_nc_ht=scontent.ftlv1-1.fna&_nc_tp=6&oh=afadddfcf130358025985597b9d68cf4&oe=5EF7D029" alt="Alexey Karash">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Alexey Karash</h3>
              <time class="chats-item-time">Sunday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Whats up?</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.ftlv1-2.fna.fbcdn.net/v/t1.0-1/c39.0.293.293a/61548973_10216380217710345_2070201909146288128_n.jpg?_nc_cat=103&_nc_sid=7206a8&_nc_ohc=pf7EiIN0TOcAX-LOpBw&_nc_ht=scontent.ftlv1-2.fna&oh=2b68b7b82e2115ba9b9c621bb8b0a6ba&oe=5EF8135C" alt="Ofer Shelly">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Ofer Shelly</h3>
              <time class="chats-item-time">Saturday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">It was a great talk</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-1.fna.fbcdn.net/v/t1.0-1/p240x240/90769650_10216328789027525_1768456314591117312_n.jpg?_nc_cat=106&_nc_sid=7206a8&_nc_ohc=fjJvGGteAKYAX9k6im5&_nc_ht=scontent.fhfa1-1.fna&_nc_tp=6&oh=e14fad9bc5b2592409d9d4af1c06740f&oe=5EEAC512" alt="Moshe Harush">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Moshe Harush</h3>
              <time class="chats-item-time">Friday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Open for freelance?</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p240x240/75456831_2576866162543789_1837376370594807808_o.jpg?_nc_cat=100&_nc_sid=7206a8&_nc_ohc=yJMv0hFAm04AX-e7PZh&_nc_ht=scontent.fhfa1-2.fna&_nc_tp=6&oh=a3cd6b3f25e25fd47e4d211d4fda2ea6&oe=5EE87E2B" alt="Guy Sarkinsky">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Guy Sarkinsky</h3>
              <time class="chats-item-time">Friday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Thanks a lot!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </section>
  </aside>  
  <main class="main-content">
    <header class="common-header">
       <div class="common-header-start">  
         <button class="common-button is-only-mobile u-margin-end js-back"><span class="icon icon-back">β¬…</span></button>
         <button class="u-flex js-side-info-button">
             <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p100x100/10325799_276849335820343_269039155920934591_n.png?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=fxci6qYcSvoAX-bZfj2&_nc_ht=scontent.fhfa1-2.fna&oh=ad1c246e7e4a52c607aafd99ed7217a2&oe=5EEAF8B0" alt="CSS Masters Israel">
             <div class="common-header-content">
               <h2 class="common-header-title">CSS Masters Israel</h2>
               <p class="common-header-status">Online</p>
             </div>
           </button>       
       </div>
       <nav class="common-nav">
           <ul class="common-nav-list">
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon">πŸ”Ž</span>
               </button>
             </li>
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon icon-attach">πŸ“Ž</span>
               </button>
             </li>
             <li class="common-nav-item">
               <button class="common-button u-animation-click js-side-info-button">
                 <span class="icon icon-menu" aria-label="menu"></span>
               </button>
             </li>
           </ul>
         </nav>
     </header>
    <div class="messanger">
      <ol class="messanger-list">
        <li class="common-message is-time">
          <p class="common-message-content">
            Today
          </p>          
        </li>
        <li class="common-message is-you">
          <p class="common-message-content">
            This is my CSS/HTML Revers Engineering forΒ WhatsApp
          </p>
          <span class="status is-seen">βœ”οΈβœ”οΈ</span>
          <time datetime>14:11</time>
        </li>
        <li class="common-message is-you">
          <p class="common-message-content">
            Just take a look
          </p>
          <span class="status is-seen">βœ”οΈβœ”οΈ</span>
          <time datetime>14:12</time>
        </li> 
        <li class="common-message is-other">        
          <p class="common-message-content">
            Who are you?
          </p>
          <time datetime>14:33</time>          
        </li>
        <li class="common-message is-you">        
          <p class="common-message-content">            
            I’m Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture.<br><br>
            Woking as a CSS Architect and evangelist at <a href="https://animaapp.com" target="_blank">AnimaApp.com</a>.<br><br>

A bit more about myself:<br>
- Writer of various globally known CSS articles<br>
- CSS speaker.<br>
- Founder of CSS Masters Israel Community<br><br>

            You can see more of my stuff on my website <a href="https://eladsc.com/" tarhet="_blank">eladsc.com</a>
        
          </p>
          <span class="status is-seen">βœ”οΈβœ”οΈ</span>
          <time datetime>14:41</time>
        </li>
        <li class="common-message is-other">        
          <p class="common-message-content">
            Who's those peoples on the contact list?
          </p>
          <time datetime>14:33</time>          
        </li>
        <li class="common-message is-you">        
          <p class="common-message-content">
            These are friends from our comunity "<a href="https://www.facebook.com/groups/css.masters.israel/" target="_blank">CSS Masters Israel</a>".<br>
            Beside it we have anoather global comunity channel, called" <a href="https://www.facebook.com/groups/css.master/" target="_blank">CSS Masters</a>", if you love CSS, you are all welcome to join.
          </p>
           <span class="status">βœ”οΈβœ”οΈ</span>
          <time datetime>14:34</time>
        </li>
        <li class="common-message is-you">        
          <p class="common-message-content">
            If you want to know how I created reverse engineering to WhatsApp web, you can read my article 
            <a href="https://blog.animaapp.com/reverse-engineering-whatsapp-webs-css-9239293009f4?utm_medium=blog&utm_source=elad-css&utm_content=reverse-whatsapp&utm_campaign=css-reverse" target="_blank">"Reverse Engineering WhatsApp Web'sΒ CSS"</a>
          </p>
          <span class="status">βœ”οΈ</span>
          <time datetime>14:43</time>
        </li>
        <li class="common-message is-you">        
          <p class="common-message-content">
            Beside it you can follow me on twitter:<br>
            <a class="twitter" href="https://twitter.com/eladsc"><span class="twitter-user">@eladsc</span></a>
          </p>
          <span class="status">βœ”οΈ</span>
          <time datetime>14:43</time>
        </li>
    </ol>
    </div>    
    <div class="message-box">
      <button class="common-button"><span class="icon">πŸ˜ƒ</span></button>
      <div class="text-input" id="message-box" placeholder="Type a message" contenteditable></div>
      <button id="voice-button" class="common-button"><span class="icon">🎀</span></button>
      <button id="submit-button" class="common-button"><span class="icon">➀</span></button>
    </div>  
  </main>
  <aside class="main-info u-hide">    
      <header class="common-header">
        <button class="common-button js-close-main-info"><span class="icon">❌</span></button>
        <div class="common-header-content">
          <h3 class="common-header-title">Info</h3>
        </div>
      </header>
      <div class="main-info-content">
        <section class="common-box">
          <img class="main-info-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p100x100/10325799_276849335820343_269039155920934591_n.png?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=fxci6qYcSvoAX-bZfj2&_nc_ht=scontent.fhfa1-2.fna&oh=ad1c246e7e4a52c607aafd99ed7217a2&oe=5EEAF8B0" alt="CSS Masters Israel">
          <h4 class="big-title">CSS Masters Israel</h4>
          <p class="info-text">Created 6/11/2013 at 22:45</p>
        </section>
        <section class="common-box">
          <h5 class="section-title">Description</h5>
          <p>Out main channel of the comunity is on Fecbook: <a href="https://www.facebook.com/groups/css.masters.israel/">http://bit.ly/2Up8On5</a></p>
        </section>
        <section class="common-box">
          <h5 class="section-title">Other content</h5>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto odit voluptatem magnam sequi dolorem soluta assumenda ipsum iusto culpa velit repudiandae vitae minus minima corporis labore sit, molestias, a ut!</p>
        </section>
    </div>
  </aside>
</section>
              
            
!

CSS

              
                /****** More of My Resets *******/
*,
*::before,
*::after{box-sizing:border-box;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; margin:0; cursor:pointer; text-align:inherit;}
img{display:block; max-width:100%;}

/* Responsive Variables */
$break1: "(max-width:767px)";
$break2: "(min-width:768px) and (max-width:1023px)";
$break2open:"(min-width:768px)";
$break3: "(min-width:1024px) and (max-width:1439px)";
$break3open:"(min-width:1024px)";
$break4open: "(min-width:1440px)";

.is-only-mobile{
  @media #{$break2open}{display:none!important;}
}

/* Multi direcrtion Languages Support Variables*/
$start-direction: left !default;
$end-direction:   right !default;

/* colors */
:root{
  --white:#fff;
  --dark-gray:#333;
  --main-gray:#ededed;
  --light-gray:#f7f7f7;
  --dark-green:#009688;
  --info-message:rgba(225,245,254,.92); /* blue messages */
}
/*mixin*/
@mixin trim{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block;}
@mixin scroll{overflow-y:auto; scrollbar-width:thin; /*-webkit-overflow-scrolling:touch;*/}

/*scrolls*/
 ::-webkit-scrollbar {width:6px!important; height:6px!important; background-color:#f5f5f5;}
 ::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,.2);}
 ::-webkit-scrollbar-track {background-color:rgba(255, 255, 255, 0.08);}   

/* typography */ 
html{font-size: 1px;/*for using REM units*/}
body{font-family:Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif; font-size:16rem; line-height:1.3; color:var(--dark-gray);}

/* background */
html{background:linear-gradient(to bottom, var(--dark-green) 1px, var(--dark-green) 130px, #dddbd1 131px, #d2dbdc 100%); background-repeat:no-repeat; min-height:100vh;}

/* utilities classes (always with !important)*/
.u-flex{display:flex!important;}
.u-flex-column{flex-direction:column!important;}
.u-margin-end{margin-#{$end-direction}:10px!important;}
.u-hide{display:none!important;}

/* animation */
@keyframes clickableAnimation {
  0% {transform:scale(1);}
  95% {transform:scale(1);}
  96% {transform:scale(1.5) rotate(-30deg);}
  97% {transform:scale(1.5) rotate(30deg);}
  100% {transform:scale(1);}
}
.u-animation-click{animation: clickableAnimation 20s ease-in-out -17s infinite;}

/*icons*/
.icon-back{transform:scale(1.4); transform-origin:center;}
.icon-status{filter:grayscale(1) opacity(0.3) invert(1);}
.icon-silent{filter:grayscale(1) opacity(0.3);}
.icon-attach{/*transform:rotateZ(70deg); transform-origin:center*/;}
.icon-menu{
  text-align:center;
  &::before{
    content:""; display:inline-block; vertical-align:middle; width:4px; height:4px;  border-radius:50%;
    background-color:var(--dark-gray); box-shadow:0px -6px var(--dark-gray), 0px 6px var(--dark-gray);
  }
}

/* Grid Layout */
.main-grid{ 
  --private-block-margins:0; /* private variables are for local componenet use */  
  position:fixed; #{$start-direction}:0; #{$end-direction}:0; top:var(--private-block-margins); bottom:var(--private-block-margins);
  box-shadow:0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2); overflow:hidden;
  > *{
     @media #{$break1}, #{$break2}, #{$break3}{max-height:100vh;}
     @media #{$break4open}{max-height:calc(100vh - 40px);}
  }
  @media #{$break2open}{ display:grid; grid-template-areas:"side-a main side-b"; grid-template-columns:minmax(260px, 30%) 1fr auto;}
  @media #{$break4open}{--private-block-margins:20px; width:1396px; margin:0 auto;}
  /*logic styles*/
  &.is-main-info-open{    
    @media #{$break1}{
      .main-side{display:none;}
      .main-content{display:none;}
      .main-info{width:100%; height:100%;}
    }
    @media #{$break2}{
      grid-template-areas:"side-a side-b"; grid-template-columns:minmax(260px, 30%) 1fr;
      .main-content{display:none;}
      .main-info{width:auto;}
    }
  }
  &.is-message-open{
    @media #{$break1}{
      .main-content{transform:translateX(-100%);}
    }
  }
}
.main-side{grid-area:side-a;}
.main-content{grid-area:main;}
.main-info{grid-area:side-b;}

/* elements */
.profile-image{flex-shrink:0; display:block; height:40px; border-radius:50%;}
.big-title{margin:5px 0; font-size:19rem;}
.section-title{color:var(--dark-green); font-size:14rem; margin-bottom:10px;}
.info-text{font-size:14rem; color:rgba(0,0,0,.45);}
.status{
  letter-spacing:-14px; filter:grayscale(1);
  &.is-seen{filter:grayscale(0);}
}
.text-input{
  -moz-appearance:none; -webkit-appearance:none; appearance:none;
  background-color:var(--white); padding:10px; margin:5px 10px; border-radius:20px; border-width:0;
  &:focus{outline:none;}
}
.common-search{
  display:flex; flex-shrink:0; background:var(--light-gray); position:relative; transition:0.2s;
  &::before{content:"πŸ”Ž"; position:absolute; #{$start-direction}:30px; top:15px; filter:grayscale(1) opacity(0.5);}
  &:focus-within{background-color:var(--white);}
  .text-input{flex:1; padding-#{$start-direction}:50px; margin:8px 16px;}
}
.unread-messsages{
  display:block; min-width:20px; padding:3px; border-radius:12px; margin:0 5px; background-color:#3cdf7a;
  color:var(--white); font-size:12rem; font-weight:bold; text-align:center;  
  &:empty{display:none;}
}
.common-button{
    padding:8px;
    &:hover, &:focus{
      outline:none;
      .icon{filter: grayscale(1) opacity(1);}
    }
    .icon{display:block; width:24px; height:24px; font-size:18px; vertical-align:middle; text-align:center; filter: grayscale(1) opacity(0.5); transition:0.2s;}
}
.twitter{
  display:block; color:rgba(29,161,242,1.00);
  &-label{margin-#{$end-direction}:10px; }
  &-user{font-size:20px;}
}

/*** components ***/
.common-header{
  --common-header-border-color:#e0e0e0;
  display:flex; background-color:var(--main-gray); height:60px; padding:10px 16px; flex-shrink:0;
  &-content{@include trim();}
  &-title{@include trim();}
  &-start{display:flex; margin-#{$end-direction}:auto;}
  &-content{margin:auto 15px; line-height:1.5;}
}
.common-nav{
  &-list{display:flex;}
  &-item{margin-#{$start-direction}:10px;}
}

/*main*/
.main-content{
  display:flex; flex-direction:column;
  .common-header{border-#{$start-direction}:solid 1px var(--common-header-border-color);}
  @media #{$break1}{
    position:fixed; #{$end-direction}:-100%; top:0; bottom:0; width:100%; transition:transform 0.4s;
  }
}
.messanger{
  @include scroll();
  flex:1; background-color:#e5ddd5;
  &-list{display:flex; flex-direction:column; padding:20px 7%;}
}
.common-message{
  position:relative; background-color:var(--white); width:-moz-fit-content; width:fit-content; max-width:500px; padding:8px; border-radius:8px; box-shadow:0 1px 0.5px rgba(0,0,0,.13); margin-bottom:10px;
  time{font-size:11rem; color:rgba(0,0,0,.45); float:$end-direction; margin-top:8px;}
  .status{float:$end-direction; padding-#{$end-direction}:10px; text-align:end;}
  &::before{
    position:absolute; #{$start-direction}:-10px; top:0;
    content:""; display:block; border:solid; border-width:0px 16px 16px 0px; border-color:transparent; border-#{$end-direction}-color:var(--white); 
  } 
  &.is-you{
    --user-color-message:#cfe9ba;
    align-self:flex-end; background-color:var(--user-color-message);
    &::before{
      #{$start-direction}:auto; #{$end-direction}:-28px; border-width:0px 16px 16px 16px; border-color:transparent; border-#{$start-direction}-color:var(--user-color-message); 
    }
    + .is-you::before{display:none;}
  }
  &.is-other + .is-other::before{display:none;}
  &.is-time{
    align-self:center; background-color:var(--info-message); color:rgba(74,74,74,.88); font-size:12rem; text-transform:uppercase;
    &::before{display:none;}
  }
}
.message-box{
  display:flex; flex-shrink:0;
  background-color:#f0f0f0; padding:5px 10px;
  .text-input{
    flex:1;
    &:empty::before{content:"Type a message"; font-size:15rem; opacity:0.5;}
  }
}

/*side (users)*/
.main-side{display:flex; flex-direction:column; background-color:var(--white);}
.chats{
   @include scroll(); background-color:var(--white);
  &-item{
    /* layout grid */
    &-button{
      display:grid; grid-template-columns:50px 1fr; grid-column-gap:15px; padding:0 15px; cursor:pointer;
      grid-template-areas:"image header" 
                          "image content";
      &:focus{background-color:#ebebeb; outline:none;}
    }
    .profile-image{grid-area:image;}
    &-header{grid-area:header;}
    &-content{grid-area:content;}
    /*** end grid ***/
    .profile-image{flex-shrink:0; height:50px; margin:auto;}
    &-header{@include trim; display:flex; padding-top:10px;}
    &-title{@include trim; flex:1; font-weight:bold; margin-#{$end-direction}:10px;}
    &-time{font-size:12rem; opacity:0.6;}
    &-last{
      flex:1; opacity:0.6;
      display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; 
    }
    
    &-content{display:flex; padding-bottom:10px; border-bottom:solid 1px #f2f2f2;}    
    &-info{display:flex;}
    /*overrides last item*/
    &:last-child{
      .chats-item-content{border-bottom-width:0;}
    }
  }
}

/*side (chat info)*/
.main-info{
  display:flex; flex-direction:column; background-color:var(--white); width:300px;
  .common-header{border-#{$start-direction}:solid 1px var(--common-header-border-color);}  
  &-content{@include scroll(); background-color:var(--light-gray);}
  &-image{display:block; max-width:200px; margin:0 auto; margin-bottom:20px; border-radius:50%;}
}
.common-box{
  background-color:var(--white); padding:20px;  box-shadow:0 1px 3px rgba(0,0,0,.08); margin-bottom:10px;
  p{font-size:14rem; color:#4a4a4a;}
}

/* CSS Logilcs */
#message-box{
  &:empty ~ #submit-button{display:none;} /*when textbox empty show microhpone*/
  &:not(:empty) ~ #voice-button{display:none;}/*when textbox with texy show submit button*/
}
              
            
!

JS

              
                /*JS isnt my experty πŸ˜‰*/
$(document).ready(function() {
  $(".js-chat-button, .js-back").on("click", function(){
    $(".main-grid").toggleClass("is-message-open");
  });
  
  $(".js-side-info-button, .js-close-main-info").on("click", function(){
      $(".main-grid").toggleClass("is-main-info-open");
      $(".main-info").toggleClass("u-hide");
  });
});

              
            
!
999px

Console