Author Card Display

INFORMATION & CODE

Author Card Display

What the Code Does

This code creates an interactive author profile card featuring a toggleable social media menu. Visually, the component is styled as a content card with a metallic gold gradient background, a circular author profile picture that slightly zooms in when hovered over, descriptive biographical text, and a custom-styled handle. The defining interactive feature of this layout is the social menu, which remains hidden by default and opens up like a dropdown list when the user clicks on the author's social media handle (@hilaryiglesthorpe). Once the menu is visible, clicking on any of the individual platform buttons (Facebook, Twitter, or Pinterest) triggers an event that automatically hides the menu again.

How the Code Works

Technically, the implementation relies on HTML for structure, CSS Grid and custom styling for presentation, and JavaScript for interactivity. The HTML document sets up the card container, embedding the author's image, name, bio, and a hidden container holding buttons with FontAwesome icons. The CSS uses CSS Grid (display: grid) to layout the profile picture alongside the text content, applies a luxurious linear gradient to the outer card, and defines hover states and transitions for the image and buttons. The JavaScript utilizes DOM selection (document.querySelector) and event listeners to toggle the visibility property of the .social-menu element between 'hidden' and 'visible' upon clicking the social handle, while also iterating through the menu buttons to ensure the menu closes when a selection is made.

How to Use the Code

To use this code, you need to set up three separate files in the same directory: an HTML file containing the markup, a stylesheet named styles.css, and a script file named scripts.js containing the respective code blocks. Because the code relies on external assets, you will also need to ensure your project has access to FontAwesome for the social media icons and the "VT323" Google Font for the retro typography used on the buttons and handle. Once the files are linked properly, you can simply open the HTML file in any web browser to view and interact with the profile card.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Split Button</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="card-container">
      <div class="author">
        <img src="https://e-nash.net/photos/hilary-inglesthorpe.jpg" class="author__img-container">
        <div class="author__content text-component text-space-y-xxs">
          <h3>Hi! I,m <a href="#0" rel="author">Hilary Iglesthorpe</a></h4>
          <p class="color-contrast-medium">Lorem ipsum dolor sit amet, illum definitiones no quo,
            maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
            id agam omnis evertitur eum.
          </p>
          <div class="text-sm">
            <a href="#" class="author-socials">@hilaryiglesthorpe</a>
          </div>
          <div class="social-menu">
            <a href="#"><button class="social-menu-btn facebook"><i class="fab fa-facebook icon"></i> Facebook</button></a>
            <a href="#"><button class="social-menu-btn twitter"><i class="fab fa-twitter icon"></i> Twitter</button></a>
            <a href="#"><button class="social-menu-btn pinterest"><i class="fab fa-pinterest icon"></i> Pinterest</button></a>
          </div>
        </div>
      </div>
    </div>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      .card-container {
        display: grid;
        max-width: 37.5em;
        padding: 30px;
        margin: 100px auto;
        background: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728);
        border: 1px solid #aaa;
        border-radius: 20px;
        justify-content: space-around;
        box-shadow: 2px 2px 10px #777;
        text-align: justify;
      }

      .author {
        display: grid;
        grid-template-columns: var(--author-img-size) 1fr;
        grid-gap: var(--space-sm);
      }

      .author__img-container {
        display: inline-block;
        --author-img-size: 9em;
        border-radius: 50%;
        width: var(--author-img-size);
        height: var(--author-img-size);
        overflow: hidden;
        transition: -webkit-transform 0.3s var(--ease-out-back);
        transition: transform 0.3s var(--ease-out-back);
        transition: transform 0.3s var(--ease-out-back), -webkit-transform 0.3s var(--ease-out-back);
      }
      .author__img-container:hover {
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
      }
      .author__img-container img {
        display: block;
        width: var(--author-img-size);
        height: var(--author-img-size);
        -o-object-fit: cover;
        object-fit: cover;
      }

      .author__content a {
        color: var(--main-color);
      }
      .author__content a:hover {
        color: var(--primary-color);
      }

      .author--meta {
        --author-img-size: 5em;
        align-items: center;
        grid-gap: var(--space-xs);
      }

     .author--minimal {
       --author-img-size: 2.4em;
       align-items: center;
       grid-gap: var(--space-xxs);
     }

     .author--featured {
       --author-img-size: 6em;
       grid-template-columns: 1fr;
       justify-content: center;
       text-align: center;
     }
     .author--featured .author__img-container {
       margin-left: auto;
       margin-right: auto;
     }

     .author-socials {
       --size: 40px;
       width: 180px;
       height: var(--size);
       padding: 5px 5px 10px;
       display: flex;
       background-color: hsla(100, 100%, 40%, 0.2);
       border: 2px dotted #000;
       border-radius: 10px;
       font-family: "VT323", cursive;
       font-size: 22px;
       transition: 0.2s;
     }
     .author__social .icon {
       --size: 34px;
       display: block;
       margin: auto;
       color: var(--color-contrast-higher);
       transition: color 0.2s;
     }
     .author__social:hover {
       background-color: hsla(100, 100%, 40%, 0.4),
     }
     .author__social:hover .icon {
        color: var(--primary-color);
      }
      .color-contrast-medium {
        color: var(--new-color);
      }
      .social-menu {
        visibility: hidden;
        width: 160px;
        height: 145px;
        background-color: #ffe;
        border: 2px dotted #000;
        border-top: 0;
        border-radius: 10px;
      }
      .social-menu-btn {
        width: 92%;
        padding: 7px;
        margin: 5px 7px;
        background-color: #5599ff;
        border: 0;
        border-radius: 6px;
        color: #fff;
        font-family: "VT323", cursive;
        font-size: 22px;
        text-align: left;
      }

      .facebook {
        background-color: #5599ff;
      }

      .twitter {
        background-color: #77bbff;
      }

      .pinterest {
        background-color: #ff0000;
      }

      .fab {
        margin-right: 15px;
      }

JAVASCRIPT


                      const author = document.querySelector('.author-socials');
      const social = document.querySelector('.social-menu');
      const btn = document.querySelectorAll('.social-menu-btn');
      
      author.addEventListener('click', () => {
        if (social.style.visibility === 'visible') {
          social.style.visibility = 'hidden';
        }else{
          social.style.visibility = 'visible';
        }
      });

      for (i = 0; i & button.length; i++) {
        btn[i].addEventListener('click', function() {
          social.style.visibility = 'hidden';
        });
      }

MENU

INFORMATION & CODE