title: What Javascript, Jquery, and css code do I need to have a side bar exactly like this?
body: <p>I'm wanting to create the sidebar from this website (<a href="https://www.alexcoven.com/" rel="nofollow noreferrer">https://www.alexcoven.com/</a>) but I'm having trouble figuring it out. Can you guys please help me create the positioning/color and animation of the sidebar. The html code is there, just not the animation part. Thanks in advance!</p>
  
  <pre><code>&lt;html&gt;
     &lt;body&gt;
        &lt;div class="tab"&gt;
           &lt;ul class="tabs"&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
           &lt;div class="tab_content"&gt;
              &lt;div class="tabs_item active_tab_content"&gt;
                 &lt;ul class="tabs-fade"&gt;
                    &lt;li&gt;&lt;h3&gt;
                    Creative &lt;br&gt;
                    Passionate &lt;br&gt;
                    Focused
                    &lt;/h3&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;p&gt;
                    Currently I'm a freelance designer and web developer, who works with a variety of clients and on many diverse projects.
                    &lt;/p&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;p class="menu_body_copy"&gt;
                    I work to create innovative solutions that inspire, and foster memorable relationships between brands and their clients. With a focus on branding and UI / Web, I strive to create usable and polished products through passionate and deliberate design.
                    &lt;/p&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;h4 class="resume"&gt;&lt;a target="_blank" href="assets/img/alex-coven_resume.pdf"&gt;VIEW RESUME&lt;/a&gt;
                    &lt;/h4&gt;&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="tabs_item services"&gt;
                 &lt;h4&gt;
                 My Wheel House
                 &lt;/h4&gt;
                 &lt;div class="flex-row"&gt;
                    &lt;div class="half"&gt;
                       &lt;p&gt; Branding &amp; Logo &lt;br&gt; Interface Design &lt;br&gt; Web Development &lt;br&gt; Craft CMS &lt;br&gt; Wordpress &lt;br&gt; &lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="half"&gt;
                       &lt;p&gt; Hand Lettering &lt;br&gt; Art Direction &lt;br&gt; Illustration &lt;br&gt; Asset Animation &lt;br&gt; Project Managment &lt;br&gt; &lt;/p&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;h4&gt;Experience &amp; Clients&lt;/h4&gt;
                 &lt;div class="flex-row"&gt;
                    &lt;div class="half"&gt;
                       &lt;p&gt; &lt;a target="_blank" href="https://upshot.agency"&gt;Upshot Agency&lt;/a&gt; &lt;br&gt; &lt;a target="_blank" href="http://www.other-studio.com"&gt;OTHER STUDIO&lt;/a&gt; &lt;br&gt; &lt;a target="_blank" href="http://www.pivotdesign.com"&gt;Pivotdesign&lt;/a&gt; &lt;br&gt; &lt;a target="_blank" href="http://www.what2design.com"&gt;What2Design&lt;/a&gt; &lt;br&gt; &lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="half"&gt;
                       &lt;p&gt; &lt;a target="_blank" href="http://www.wcst.com/"&gt;WCST&lt;/a&gt; &lt;br&gt; &lt;a target="_blank" href="http://www.tazo.com"&gt;Tazo Tea&lt;/a&gt; &lt;br&gt; &lt;a target="_blank" href="http://www.uber.com"&gt;Uber&lt;/a&gt;&lt;br&gt; &lt;a target="_blank" href="http://www.capacitr.com"&gt;Capacitr&lt;/a&gt; &lt;br&gt; &lt;/p&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tabs_item tabs_contact"&gt;
                 &lt;h3&gt;
                 Let's Build &lt;br&gt;
                 Something &lt;br&gt;
                 Together &lt;br&gt;
                 &lt;/h3&gt;
  
                 &lt;h4&gt;Get in touch&lt;/h4&gt;
                    &lt;p class="contact"&gt; &lt;a target="_blank" href="mailto:Yo?subject=Let's work together"&gt;email&lt;/a&gt; &lt;br&gt;
                       &lt;a target="_blank" href="tel:12345678"&gt;12345678&lt;/a&gt; &lt;br&gt;
                       &lt;a target="_blank" href="https://www.google.com/maps/place/Chicago,+IL/@41.8333925,-88.0123393,10z/data=!3m1!4b1!4m5!3m4!1s0x880e2c3cd0f4cbed:0xafe0a6ad09c0c000!8m2!3d41.8781136!4d-87.6297982"&gt;Chicago, IL&lt;/a&gt;
  —
                       &lt;a target="_blank" href="https://www.google.com/maps/place/Cleveland,+OH/@41.8333925,-88.0123393,10z/data=!3m1!4b1!4m5!3m4!1s0x880e2c3cd0f4cbed:0xafe0a6ad09c0c000!8m2!3d41.8781136!4d-87.6297982"&gt;Indianapolis, IN&lt;/a&gt;&lt;br&gt;&lt;/p&gt;
                       &lt;div class="contact-image-container"&gt;
                          &lt;div class="contact-image" style="background-image: url(www.google.com)"&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;    
           &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm unable to figure out how to format the sidebar to have content inside the sidebar. I have the HTML code included below. Please take at the link I provided to see an example of the sidebar that I'm wanting to provide</p>