<button class="icon-button e-dark-mode-button u-animation-click" id="darkMode" aria-label="Dark Mode"><span class="icon" aria-hidden="true">🌜</span></button>
<div class="common-structure">
  <header class="main-header u-flex">
    <div class="start u-flex">
       <a class="logo">f</a>
       <div class="search-box-wrapper">
         <input type="search" class="search-box" placeholder="Search Facebook">
         <span class="icon-search" aria-label="hidden">πŸ”Ž</span>
      </div>
    </div>
    <nav class="main-nav">
      <ul class="main-nav-list u-flex">
        <li class="main-nav-item u-only-wide"><a aria-label="Homepage" class="main-nav-button alt-text is-selected"><span class="icon" aria-hidden="true">🏠</span></a></li>
        <li class="main-nav-item u-only-wide"><a aria-label="Pages" class="main-nav-button alt-text"><span class="icon" aria-hidden="true">🏁</span></a></li>
        <li class="main-nav-item u-only-wide"><a aria-label="Watch" class="main-nav-button alt-text"><span class="icon" aria-hidden="true">πŸ“Ί</span></a></li>
        <li class="main-nav-item u-only-wide"><a aria-label="Marketplace" class="main-nav-button alt-text"><span class="icon" aria-hidden="true">πŸͺ</span></a></li>
        <li class="main-nav-item u-only-wide"><a aria-label="Groups" class="main-nav-button alt-text"><span class="icon" aria-hidden="true">πŸ‘¨β€πŸ‘¦β€πŸ‘¦</span></a></li>
        <li class="main-nav-item u-only-small"><button aria-label="Menu" class="main-nav-button u-animation-click" id="menuButton"><span class="icon icon-hamburger" aria-hidden="true"></span></button></li>
      </ul>
    </nav>
    <div class="end"></div>
  </header>
  <nav class="user-nav">
      <ul class="user-nav-list u-flex">
        <li class="user-nav-item">
          <a class="user">
            <img class="user-image" src="https://assets.codepen.io/65740/internal/avatars/users/default.png" height="28" width="28" alt="">
            <span class="user-name">Elad</span>
          </a>
        </li>
        <li class="user-nav-item">
          <button class="icon-button alt-text" aria-label="Create"><span class="icon" aria-hidden="true">βž•</span></button>
        </li>
        <li class="user-nav-item">
          <button class="icon-button alt-text" aria-label="Messenger"><span class="icon" aria-hidden="true">πŸ’¬</span></button>
        </li>
        <li class="user-nav-item">
          <button class="icon-button alt-text" aria-label="Notifications"><span class="icon" aria-hidden="true">πŸ””</span></button>
        </li>
        <li class="user-nav-item">
          <button class="icon-button alt-text" aria-label="Account"><span class="icon" aria-hidden="true">πŸ”»</span></button>
        </li>
      </ul>
    </nav>
  <aside class="side-a">
    <section class="common-section">
      <h2 class="section-title u-hide">User Navigation</h2>
      <ul class="common-list">
        <li class="common-list-item">
          <a href="https://www.facebook.com/eladsc/" target="_blank" class="common-list-button">
            <span class="icon">
              <img class="user-image" src="https://assets.codepen.io/65740/internal/avatars/users/default.png" height="36" width="36" alt="">
            </span>
            <span class="text">Elad Shechter</span>
          </a>
        </li>
        <li class="common-list-item">
          <a class="common-list-button">
<span class="icon" aria-hidden="true">πŸ’¬</span>
            <span class="text">Messenger</span>
          </a>
        </li>
        <li class="common-list-item">
          <a class="common-list-button">
            <span class="icon">πŸ‘¨&zwj;πŸ‘¦&zwj;πŸ‘¦</span>
            <span class="text">Groups</span>
          </a>
        </li>
        <li class="common-list-item">
          <a class="common-list-button">
            <span class="icon">πŸͺ</span>
            <span class="text">Marketplace</span>
          </a>
        </li>
        <li class="common-list-item">
          <a class="common-list-button">
            <span class="icon">πŸ“Ί</span>
            <span class="text">Videos</span>
          </a>
        </li>
      </ul>
      <button class="common-more">
        <span class="text">See More</span>
        <span class="icon">πŸ”»</span>
      </button>
    </section>
    <section class="common-section">
      <h2 class="section-title">Shortcuts</h2>
      <ul class="common-list">
        <li class="common-list-item">
          <a href="https://www.facebook.com/groups/css.masters.israel" target="_blank" class="common-list-button">
            <span class="icon">
              <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-0/cp0/c40.0.50.50a/p50x50/96018871_10156797924731933_8952430699365793792_n.jpg?_nc_cat=105&_nc_sid=ca434c&_nc_ohc=IeqrI6DbUWkAX8FXQs7&_nc_ht=scontent.ftlv1-1.fna&oh=370e999a657281ecbaf5237802520a2a&oe=5F0102F9" alt="">
            </span>
            <span class="text">CSS Masters Israel</span>
          </a>
        </li>
        <li class="common-list-item">
          <a href="https://bit.ly/3fl9RLV" target="_blank" class="common-list-button">
            <span class="icon" aria-hidden="true">
              <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-0/cp0/c23.0.50.50a/p50x50/94671938_10156774842886933_854458879973523456_o.jpg?_nc_cat=104&_nc_sid=ca434c&_nc_ohc=fgV9zrVZoW0AX8o6u--&_nc_ht=scontent.ftlv1-1.fna&oh=c8a69ca97d2ed0bd8a27b9e4f653dcf9&oe=5F013738" alt="">
            </span>
            <span class="text">CSS Class</span>
          </a>
        </li>
              
      </ul>
      <button class="common-more">
        <span class="text">See More</span>
        <span class="icon">πŸ”»</span>
      </button>
    </section>
  </aside>
  <main class="main-feed">
    <ul class="main-feed-list">
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://assets.codepen.io/65740/internal/avatars/users/default.png" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/eladsc" target="_blank">Elad Shechter</a>
              </div>
              <div class="time-and-privacy"><time datetime="">October 14 at 1:51 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p>
              <b>If you like my stuff you can find me on:</b><br> Twitter: <a href="https://twitter.com/eladsc" target="_blank">@eladsc</a><br>
              My website: <a href="https://eladsc.com/" target="_blank">eladsc.com</a><br>
              CodePen: <a href="https://codepen.io/elad2412" target="_blank">codepen.io/elad2412</a><br>
              Medium: <a href="https://medium.com/@elad" target="_blank">medium.com/@elad</a>
            </p>   
          </div>
          <div class="summary u-flex">
            <div class="reactions">❀️</div>
            <div class="reactions-total">17</div>
            <div class="total-comments u-margin-inline-start">
              <a>4 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://assets.codepen.io/65740/internal/avatars/users/default.png" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/eladsc" target="_blank">Elad Shechter</a>
              </div>
              <div class="time-and-privacy"><time datetime="">August 24 at 7:21 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p><b>Why CSS Logical Properties Aren’t Ready for Use!</b></p>
            <p>The new CSS logical properties module is one of the most important developments to have come to CSS in recent years. This module enables us to support all the directions that human languages are written in with the same CSS definitions.</p>         
            <a class="embed-content" href="https://medium.com/@elad/why-css-logical-properties-arent-ready-for-use-c102925a5cba" target="_blank">
              <img class="embed-content-image" src="https://miro.medium.com/max/1400/1*2Vrjo66EEFbysBSE0IwWGA.png" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">medium.com</span></aside>
                <h2 class="embed-content-title">TWhy CSS Logical Properties Aren’t Ready for Use!</h2>
                <p class="embed-content-paragraph">The new CSS logical properties module is one of the most important developments to have come to CSS in recent years..</p>
              </div>
            </a>           
          </div>
          <div class="summary u-flex">
            <div class="reactions">❀️</div>
            <div class="reactions-total">28</div>
            <div class="total-comments u-margin-inline-start">
              <a>12 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://assets.codepen.io/65740/internal/avatars/users/default.png" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/eladsc" target="_blank">Elad Shechter</a>
              </div>
              <div class="time-and-privacy"><time datetime="">July 29 at 10:21 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p><b>How to Create Pure CSS Games</b></p>
            <p>In this time of the coronavirus epidemic, a lot of our plans have canceled. From every bad situation, we need to try to see the good thing in it. For my self, I use my free time at home to create a pure CSS game. In my new talk, I will explain to you lots of tips and tricks of how to create pure CSS games, based on the Coronavirus game I’ve made.</p>         
            <a class="embed-content" href="https://www.youtube.com/watch?v=TmfbHPObs-0" target="_blank">
              <img class="embed-content-image" src="https://i1.wp.com/eladsc.com/wp-content/uploads/2020/10/PCG.jpg" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">YouTube.com</span></aside>
                <h2 class="embed-content-title">How to Create Pure CSS Games - by Elad Shechter</h2>
                <p class="embed-content-paragraph">In this time of the coronavirus epidemic, a lot of our plans have canceled.</p>
              </div>
            </a>           
          </div>
          <div class="summary u-flex">
            <div class="reactions">❀️</div>
            <div class="reactions-total">3</div>
            <div class="total-comments u-margin-inline-start">
              <a>5 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://assets.codepen.io/65740/internal/avatars/users/default.png" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/eladsc" target="_blank">Elad Shechter</a>
                <span class="icon icon-arrow-block-end"></span>
                <a href="https://bit.ly/3fl9RLV" target="_blank">CSS Class</a>
              </div>
              <div class="time-and-privacy"><time datetime="">June 14 at 1:51 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p><b>The Coronavirus Invaders!</b></p>
            <p>
              My Pure CSS Game! (No JS).<br>
              How many Coronavirus are you able to eliminate?πŸ˜€<br>
            </p>
            <a class="embed-content" href="https://bit.ly/2N0jLWY" target="_blank">
              <img class="embed-content-image" src="https://cssclasscom.files.wordpress.com/2020/05/corona1-1.gif?w=660" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">codepen.io</span></aside>
                <h2 class="embed-content-title">Coronavirus Invaders - CSS Pure Game (No JS!)</h2>
              </div>
            </a>    
          </div>
          <div class="summary u-flex">
            <div class="reactions">❀️</div>
            <div class="reactions-total">1</div>
            <div class="total-comments u-margin-inline-start">
              <a>1 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://assets.codepen.io/65740/internal/avatars/users/default.png" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/eladsc/" target="_blank">Elad  Shechter</a>
                <span class="icon icon-arrow-block-end"></span>
                <a href="https://bit.ly/3fl9RLV" target="_blank">CSS Class</a>
              </div>
              <div class="time-and-privacy"><time datetime="">June 3 at 12:26 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p><b>The β€˜unset’ keywords behave</b> like 'inherit' if the property is a property that has natural inherit by default, and act like 'initial' if it hasn’t.<p>
            <p>The reason for it to exists is to reset all properties together with the β€˜all’ property.</p>
            <p><b>From my Talk:</b><br>
              <a href="https://bit.ly/3flTJtr" target="_blank">https://youtu.be/8IaKXJHRSXc</a></p>
            <img src="https://scontent.ftlv1-2.fna.fbcdn.net/v/t1.0-9/101673130_10156884723716933_5600395856562880512_o.jpg?_nc_cat=110&_nc_sid=825194&_nc_ohc=KHRwezsav6gAX8h4U7p&_nc_ht=scontent.ftlv1-2.fna&oh=f372d27e69a67f2b38f205dfa74038c7&oe=5F050911" alt="">
          </div>
          <div class="summary u-flex">
            <div class="reactions">❀️</div>
            <div class="reactions-total">8</div>
            <div class="total-comments u-margin-inline-start">
              <a>12 Comments</a>
              <a>2 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-1/cp0/p40x40/94574850_120774326271393_6089794718378491904_n.png?_nc_cat=111&_nc_sid=dbb9e7&_nc_ohc=40vzgxq-2kYAX8gOAZN&_nc_ht=scontent.ftlv1-1.fna&oh=ece0eaf59732b7da4471b7ee57cab487&oe=5F01FF5D" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://bit.ly/2Y2Kito" target="_blank">CSS Class</a>
              </div>
              <div class="time-and-privacy"><time datetime="">May 18 at 5:58 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p><b>CSS Basics for Typography</b></p>
            <p>Many beginner and experienced developers find it challenging to understand the world of CSS, and it is difficult to understand what is really possible in CSS.</p>
            <p>In Elad Shechter's first article on CSS Basics Things, He let developers know the CSS definitions of text typography, and actually understand what and how to control it.</p>
            <p>This article has lots of visual examples and live code examples that will allow you to enter the CSS world more pleasantly.</p>    
            <a class="embed-content" href="https://bit.ly/2AoSfA5" target="_blank">
              <img class="embed-content-image" src="https://miro.medium.com/max/552/1*8gDOmNQeKOji22wisw96aA.jpeg" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">medium.com</span></aside>
                <h2 class="embed-content-title">CSS Basics for Typography</h2>
                <p class="embed-content-paragraph">CSS Basics</p>
              </div>
            </a>      
          </div>
          <div class="summary u-flex">
            <div class="reactions">😲❀️</div>
            <div class="reactions-total">16</div>
            <div class="total-comments u-margin-inline-start">
              <a>5 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-1/cp0/p40x40/37042540_559247564477083_8353849942070001664_n.png?_nc_cat=105&_nc_sid=1eb0c7&_nc_ohc=kjtkpY7LCZQAX8W3v8r&_nc_ht=scontent.ftlv1-1.fna&oh=ca77f68f63e8b9a67be2af87e64570c9&oe=5F01CAD6" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/frontendfocus" target="_blank">Frontend Focus</a>
              </div>
              <div class="time-and-privacy"><time datetime="">April 1</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <a class="embed-content" href="https://blog.animaapp.com/reverse-engineering-whatsapp-webs-css-9239293009f4" target="_blank">
              <img class="embed-content-image" src="https://i1.wp.com/eladsc.com/wp-content/uploads/2020/03/1_iNB0Teq9n7bgfjPsvwkOfQ.jpg?fit=660%2C302&ssl=1" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">medium.com</span></aside>
                <h2 class="embed-content-title">Reverse Engineering WhatsApp Web’s CSS</h2>
                <p class="embed-content-paragraph">If you’re like the majority of readers, recreating CSS and HTML by reverse engineering might look suspicious to you, and you might wonder…</p>
              </div>
            </a>
          </div>
          <div class="summary u-flex">
            <div class="reactions">😲</div>
            <div class="reactions-total">5</div>
            <div class="total-comments u-margin-inline-start">
              <a>5 Comments</a>
              <a>1 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-1/cp0/p40x40/10155133_602098699885921_18816108_n.png?_nc_cat=104&_nc_sid=1eb0c7&_nc_ohc=LlEImNjGB-oAX8q8Y-V&_nc_ht=scontent.ftlv1-1.fna&oh=a31a91a5eee7ea43a90a62a8ec3f9fa2&oe=5F04B668" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/CSSWeekly" target="_blank">CSS Weekly</a>
              </div>
              <div class="time-and-privacy"><time datetime="">March 11</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p>Elad Shechter explains why the world needs CSS developers.</p>            
            <a class="embed-content" href="https://medium.com/@elad/why-the-world-needs-css-developers-318025a6f5c1" target="_blank">
              <img class="embed-content-image" src="https://miro.medium.com/max/1400/1*65c_DA3NOmVk-NvkKLnSDA.png" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">medium.com</span></aside>
                <h2 class="embed-content-title">Why the World Needs CSS Developers</h2>
                <p class="embed-content-paragraph">In the last ten years, give or take a few, CSS has grown extensively with the addition of more and more features, thus gradually becoming…</p>
              </div>
            </a>
          </div>
          <div class="summary u-flex">
            <div class="reactions">πŸ‘β€οΈ</div>
            <div class="reactions-total">7</div>
            <div class="total-comments u-margin-inline-start">
              <a>57 Comments</a>
              <a>8 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
    </ul>
  </main>
  <aside class="side-b">
    <section class="common-section">
      <h2 class="section-title">Sponsored</h2>
      <ul class="common-list">
        <li class="common-list-item">
          <a href="http://bit.ly/2Nd05lW" target="_blank" class="common-list-button is-ads">
            <div class="image"><img src="https://bit.ly/3cY5ncE" width="115" alt=""></div>
            <div class="text">
              <h4 class="ads-title">Export Sketch to HTML with a click</h4>
              <p class="ads-url">animaapp.com</p>
            </div>
          </a>
        </li>
        <li class="common-list-item">
          <a href="http://bit.ly/2Nd05lW" target="_blank" class="common-list-button is-ads">
            <div class="image"><img src="https://cssclasscom.files.wordpress.com/2020/06/14.png?w=300" width="115" alt=""></div>
            <div class="text">
              <h4 class="ads-title">Front-end developers, prepare to be amazed</h4>
              <p class="ads-url">animaapp.com</p>
            </div>
          </a>
        </li>      
      </ul>
      <button class="common-more">
        <span class="text">See More</span>
        <span class="icon">πŸ”»</span>
      </button>
    </section>
  </aside>
</div>
/****** More of My Resets *******/
*,
*::before,
*::after{box-sizing:border-box;}
button{font-family:inherit; font-size:inherit; background-color:transparent; color:inherit; border-width:0; padding:0; margin:0; cursor:pointer; text-align:inherit;}
a{text-decoration:none; color:inherit; cursor:pointer;}
img{display:block; max-width:100%;}

/* Responsive Variables */
$break1: "(max-width:700px)";
$break2: "(min-width:701px) and (max-width:900px)";
$break2open:"(min-width:701px)";
$break3: "(min-width:901px) and (max-width:1100px)";
$break3open:"(min-width:901px)";
$break4open: "(min-width:1101px)";

.u-only-small{
  @media #{$break4open}{
    display:none!important;
  }
}
.u-only-wide{
  @media #{$break1} , #{$break2}, #{$break3}{
    display:none!important;
  }
}

/* Native CSS variables */
:root{
  /* colors */
  --main-color:#1877f2;
  --text-color:#050505;
  --full-color:255 255 255;
  --empty-color:0 0 0;

  /* white default*/
  --abalance1:rgba(var(--full-color) / 1);
  --abalance80:rgba(var(--full-color) / 0.80);
  
  /* black default*/
  --balance1:rgb(var(--empty-color) / 0.05);
  --balance2:rgb(var(--empty-color) / 0.10);
  --balance3:rgb(var(--empty-color) / 0.15);
  --balance4:rgb(var(--empty-color) / 0.20);
  --balance8:rgb(var(--empty-color) / 0.60);
  --balance10:rgb(var(--empty-color) / 0.80);
  --balance-full:#f0f2f5;
  
  /* sizes */
  --height-header:40px;
  
  /* common sizes */
  --size1:4px;
  --size2:calc(var(--size1) * 2);
  --size3:calc(var(--size1) * 3);
  --size4:calc(var(--size1) * 4);
}

/* utilities classes (always with !important)*/
.u-flex{display:flex!important;}
.u-hide{display:none!important;}
.u-margin-inline-start{margin-inline-start:auto!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 10s ease-in-out -7s infinite;}

/* icons */
.icon-arrow-block-end{
  width:0; height:0; border:solid 0 transparent; border-width:5px 7px; border-inline-start-color:var(--balance10);
  margin:auto 0;
}
.icon-privacy{filter:grayscale(1) opacity(0.8);}
.icon-menu{
  text-align:center;
  &::before{
    content:""; display:inline-block; vertical-align:middle; width:4px; height:4px;  border-radius:50%;
    background-color:var(--balance10); box-shadow:-6px 0px var(--balance10), 6px 0px var(--balance10);
  }
}
.icon-hamburger{
  width:20px; height:3px; background-color:var(--balance10);  box-shadow:0px 10px, 0px -10px;
}
.icon-search{filter:grayscale(1) opacity(0.8); transition:0.3s;}
/*mixin*/
@mixin trim{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block;}
@mixin side-size{width:320px;}
@mixin scroll{overflow-y:auto; scrollbar-width:thin;}

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

/* typography */ 
html{font-size: 1px;/*for using REM units*/}
body{font-family:Arial; font-size:15rem; line-height:1.3; color:var(--text-color); background-color:var(--balance-full); overflow-x:hidden;}
.is-nav-open{
  @media #{$break1}, #{$break2}, #{$break3}{
    body{overflow:hidden;}
  }
}
/* Grid Layout */
.common-structure{
  display:grid;
  > *:not(.main-header):not(.user-nav){padding:var(--size4) var(--size2);}
  @media #{$break1}{
    grid-template-areas:"header" "main";
    grid-template-columns:100%;
    .end{display:none;}
  }
  @media #{$break2}{
    grid-template-areas:"header header" "main main";
    grid-template-columns:1fr 1fr;
    .side-a,
    .side-b{display:none;}
  }
   @media #{$break1}, #{$break2}{
    .side-a,
    .side-b{display:none;}
  }
  @media #{$break3open}{
    justify-content:space-between;
  }
  @media #{$break3}{
    grid-template-areas:"header header" "main side-b";
    grid-template-columns:minmax(300px, 1fr) auto;    
    .side-a{display:none;}
  }
  @media #{$break4open}{
    grid-template-areas:"header header header" "side-a main side-b";
    grid-template-columns:auto minmax(300px, 680px) auto;
  }
}
.main-header{grid-area:header;}
.side-a{     grid-area:side-a;}
.main-feed{  grid-area:main;}
.side-b{     grid-area:side-b;}

.side-a, .side-b{
  @include side-size; @include scroll();
  position:sticky; top:60px; max-height:calc(100vh - 60px); overflow:auto;
}
.side-a{
  @media #{$break1}, #{$break2}, #{$break3}{
    position:fixed; z-index:1; left:0; right:0; bottom:0;
    background-color:var(--balance-full); width:auto;
    &.is-open{display:block;}
  }
}
.side-b{margin-inline-start:auto; align-self:start;}
.main-feed{
  @media #{$break1}{margin-bottom:40px;}
}
/* elements */
.section-title{color:var(--balance8); font-size:16rem; font-weight:bold; padding:var(--size1) var(--size3); padding-block-start:24px; }
.logo{
  display:block; flex-shrink:0; width:var(--height-header); height:var(--height-header); border-radius:50%;
  color:white; text-align:center; font-size:var(--height-header); font-weight:bold;
  background-image:linear-gradient(#19aeff, #0164e1);
}
.search-box{
  width:100%; padding:var(--size3); padding-inline-start:40px; border-width:0; background-color:var(--balance1); border-radius:calc(var(--height-header) / 2); transition:0.3s; -webkit-appearance:textfield;
  &:focus{
    outline:none; background-color:var(--balance2);
    + .icon-search{filter:grayscale(0.2) opacity(0.95);}
  }
  &-wrapper{
    position:relative; flex:1;
    .icon-search{position:absolute; top:10px; left:12px;}
  }
}
.icon-button{
  display:flex; width:var(--height-header); height:var(--height-header); border-radius:50%;
  background-color:var(--balance2);
  .icon{margin:auto;}
  &:hover, &:focus{background-color:var(--balance3);}
}
.icon-button-2{
  width:36px; height:36px; border-radius:50%; text-align:center;
  .icon-menu::before{vertical-align:3px;}
  &:hover, &:focus{background-color:var(--balance1);}
}
.common-more{
  background-color:var(--balance1); border-radius:var(--size2);
  height:36px; width:calc(100% - var(--size4)); margin:var(--size2); text-align:center;
  .text{font-weight:bold;}
  .icon{font-size:12rem;filter: grayscale(100%); opacity:0.8;}
  &:hover, &:focus{background-color:var(--balance2);}
}
.user{
  display:flex; padding:var(--size1); margin:auto 0; border-radius:calc(var(--height-header) / 2);
  &:hover, &:focus{background-color:var(--balance1);}
  &-image{border-radius:50%; margin-inline-end:var(--size2);}
  &-name{margin:auto 0; font-weight:bold; padding-inline-end:var(--size1);}
  &-nav{
    padding: 10px 16px;
    .icon{filter:grayscale(100%);}
    &-list{justify-content:flex-end;}
    &-item{display:flex; margin-inline-end:var(--size2);}
  }
  @media #{$break1}{
    &-nav{
      position:fixed; z-index:2; left:0; right:0; bottom:0; /*top:calc(100vh - 60px);*/ 
      width:100%; background-color:var(--abalance1); box-shadow:2px 1px 5px 2px var(--balance4);
      &-list{justify-content:space-between;}
    }
  }
  @media #{$break2open}{
    &-nav{position:sticky; top:0; z-index:3; grid-column:3; grid-row:1;}
  }
  @media #{$break2}, #{$break3}{
    &-nav{grid-column:2;}
  }
}
.alt-text{
  position:relative;
  &:hover, &:focus{
    &::before{
      content:attr(aria-label); display:block; padding:var(--size2); border-radius:var(--size1);
      position:absolute; top:calc(100% + var(--size2)); left:50%; transform:translatex(-50%);
      color:var(--abalance80); background-color:var(--balance10);
    }
  }
}
/* compnenets */
.main-header{
  position:sticky; z-index:2; top:0;
  background-color:var(--abalance1); box-shadow:-2px -1px 5px 2px var(--balance4);
  .start,
  .end{@include side-size; padding:10px 16px;}
  .start{padding:10px 16px;}
  .main-nav{flex:1; max-width:680px; margin:0 auto;}
  .logo{margin-inline-end:var(--size2);}
  @media #{$break1}{
    .main-nav{flex:0; margin:0; margin-inline-start:auto;}
    .user-nav{
      width:100%; box-shadow:-2px -1px 5px 2px var(--balance4);
      &-list{justify-content:space-between;}
    }
  }
}
.main-nav{
  &-list{height:100%;}
  &-button{
    display:flex; height:100%; text-align:center; padding:0 var(--size4); border:solid 3px transparent; border-radius:var(--size2); background-clip:padding-box; transition:background 0.3s;
    .icon{margin:auto; filter:grayscale(100%); opacity:0.8; font-size:22px;}
    &:hover, &:focus{
      outline:0;
      &:not(.is-selected){background-color:var(--balance1);}
    }
    &.is-selected{
      border-bottom-color:var(--main-color); border-radius:0;
      .icon{opacity:1; filter:grayscale(0%);}
    }
  }
  @media #{$break4open}{
    &-item{flex:1;}
  }
}
.common-section{
  color:var(--balance10);
  &:not(:first-child){
    &::before{
      content:""; display:block; margin:var(--size1) var(--size2);
      border-top:solid 1px var(--balance4);
    }
  }
}
.common-list{
  &-button{
    display:flex; height:52px; padding:var(--size2);
    > *{margin:auto 0;}
    img{border-radius:var(--size2);}
    .user-image{border-radius:50%;}
    .icon{width:36px; font-size:24px; text-align:center; margin-top:auto; margin-bottom:auto; margin-inline-end: var(--size2);}
    .text{font-weight:bold;}
    &:hover, &:focus{background-color:var(--balance1); border-radius:var(--size2);}
    &.is-ads{
      height:auto;
      .image{width:115px; flex-shrink:0; margin-inline-end:var(--size3);}
      .ads-url{font-weight:normal;}
    }
  }
}
/* post parts */
.common-post{
  padding:var(--size3) var(--size4); padding-block-end:var(--size1); margin-block-end:var(--size4); background-color:var(--abalance1); border-radius:var(--size2); box-shadow: 0 1px 2px var(--balance4);
  &-header{margin-bottom:var(--size2);}
}
.user-and-group{
  font-weight:bold;
  .icon-arrow-block-end{margin-inline-start:var(--size2);}
}
.time-and-privacy{
  font-size:13rem;
  > *:not(:first-child)::before{content:""; vertical-align:bottom; display:inline-block; width:2px; height:2px; background-color:var(--balance10); margin:var(--size2);}
}
.summary{
  > * + *{margin-inline-start:var(--size1);}
}
.total-comments{
  a{
    &:hover, &:focus{text-decoration:underline;}
  }
}
.reactions{letter-spacing:-2px;}
.common-content{
  b{font-weight:bold;}
  p{margin-bottom:var(--size1);}
  a:not(.embed-content){
    color:var(--main-color);
    &:hover, &:focus{text-decoration:underline;}
  }
  img:not(.embed-content-image){display:block; width:calc(100% + 32px); margin:16px -16px; max-width:none;}
}
.embed-content{
  display:block; background-color:var(--balance1); margin:16px -16px;
  &-text{padding:var(--size3) var(--size4);}
  &-info{text-transform:uppercase; color:var(--balance8); font-size:13rem; margin-bottom:var(--size1);}
  &-title{font-weight:bold;}
  &-paragraph{@include trim(); color:var(--balance8);}
  &-image{width:100%;}
}
.actions-buttons{
  padding-top:var(--size1); margin-top:var(--size2); border-top:solid 1px var(--balance4);
  &-item{flex:1;}
  &-button{
    width:100%; text-align:center; height:32px; border-radius:var(--size1);
    &:hover, &:focus{background-color:var(--balance1);}
    .icon{margin-inline-end:var(--size1); filter:grayscale(1);}
  }
}
/*entitiy*/
.e-dark-mode-button{
  position:fixed; z-index:2; right:var(--size4); bottom:var(--size4);
  @media #{$break1}{display:none;}
}

/* Dark mode colors */
.is-dark{
    --full-color: 0 0 0;
    --empty-color: 245 245 245;
    --text-color: #e5e5e5;
    --balance-full:#181818;
    --abalance1:rgba(var(--empty-color) / 0.05);
   .main-header{background-color:#252525;}
}
View Compiled
/*JS isn't my expertise πŸ˜‰*/
$(document).ready(function() {
    $("#menuButton").on("click", function(){
        $(".side-a").toggleClass("is-open");
        $("html").toggleClass("is-nav-open");
    });
      $("#darkMode").on("click", function(){
        $("html").toggleClass("is-dark");
    });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js