-3

I'm wanting to create the sidebar from this website (https://www.alexcoven.com/) 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!

<html>
   <body>
      <div class="tab">
         <ul class="tabs">
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
         <div class="tab_content">
            <div class="tabs_item active_tab_content">
               <ul class="tabs-fade">
                  <li><h3>
                  Creative <br>
                  Passionate <br>
                  Focused
                  </h3></li>
                  <li><p>
                  Currently I'm a freelance designer and web developer, who works with a variety of clients and on many diverse projects.
                  </p></li>
                  <li><p class="menu_body_copy">
                  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.
                  </p></li>
                  <li><h4 class="resume"><a target="_blank" href="assets/img/alex-coven_resume.pdf">VIEW RESUME</a>
                  </h4></li>
               </ul>
            </div>
            <div class="tabs_item services">
               <h4>
               My Wheel House
               </h4>
               <div class="flex-row">
                  <div class="half">
                     <p> Branding & Logo <br> Interface Design <br> Web Development <br> Craft CMS <br> Wordpress <br> </p>
                  </div>
                  <div class="half">
                     <p> Hand Lettering <br> Art Direction <br> Illustration <br> Asset Animation <br> Project Managment <br> </p>
                  </div>
               </div>
               <h4>Experience & Clients</h4>
               <div class="flex-row">
                  <div class="half">
                     <p> <a target="_blank" href="https://upshot.agency">Upshot Agency</a> <br> <a target="_blank" href="http://www.other-studio.com">OTHER STUDIO</a> <br> <a target="_blank" href="http://www.pivotdesign.com">Pivotdesign</a> <br> <a target="_blank" href="http://www.what2design.com">What2Design</a> <br> </p>
                  </div>
                  <div class="half">
                     <p> <a target="_blank" href="http://www.wcst.com/">WCST</a> <br> <a target="_blank" href="http://www.tazo.com">Tazo Tea</a> <br> <a target="_blank" href="http://www.uber.com">Uber</a><br> <a target="_blank" href="http://www.capacitr.com">Capacitr</a> <br> </p>
                  </div>
               </div>
            </div>
            <div class="tabs_item tabs_contact">
               <h3>
               Let's Build <br>
               Something <br>
               Together <br>
               </h3>

               <h4>Get in touch</h4>
                  <p class="contact"> <a target="_blank" href="mailto:Yo?subject=Let's work together">email</a> <br>
                     <a target="_blank" href="tel:12345678">12345678</a> <br>
                     <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">Chicago, IL</a>
—
                     <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">Indianapolis, IN</a><br></p>
                     <div class="contact-image-container">
                        <div class="contact-image" style="background-image: url(www.google.com)">
                        </div>
                     </div>
                  </div>
               </div>
            </div>    
         </body>
</html>

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

Muhammad Bilal
  • 385
  • 3
  • 12

1 Answers1

2

The animation appears to be part of a JS plugin created by Alvaro Trigo, which was probably customized further.

https://github.com/alvarotrigo/fullPage.js

https://alvarotrigo.com/fullPage/

This was found by looking through the JavaScript files being loaded in the HTML.

rawnewdlz
  • 1,121
  • 1
  • 14
  • 20