menu.svg&quot; 
        /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;        
            </code>
          </pre>
          </div>

          <!-- SOCIAL MEDIA CARD -->
          <p class="h-5 maincontent__content--info" id="socialmedia-card">
            Social Media Card
          </p>
          <p class="bd-5 maincontent__content--info">
            The
            <span class="word-highlight-red">Social Media Card</span> component
            comes with a Username and Avatar, a Card Image, a Body and a few
            buttons at the end.
          </p>
          <div class="txt-center">
            <div class="card card__socialmedia">
              <div class="card__body">
                <div class="card__title">
                  <div class="card__title--img">
                    <img
                      class="avatar av-sm"
                      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/profile_dark.png"
                      alt="profile_dark"
                    />
                  </div>
                  <div class="card__title--content">
                    <h1 class="h-5">Bablu Tailor</h1>
                    <p class="card__title--p cp">7 Hours ago</p>
                  </div>
                  <a href="#" class="card__title--icon"
                    ><img
                      class="icon-sm icon-dark"
                      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/menu.svg"
                      alt="menu-icon"
                  /></a>
                </div>
                <img
                  src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/image.jpg"
                  class="card__img"
                  alt="card-image"
                />
                <div class="card__content">
                  <p class="bd-5">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Asperiores impedit voluptatum dicta odit quos rem delectus
                    deleniti.
                  </p>
                </div>
              </div>
              <div class="card__footer">
                <div class="card__footer--left cp">Jony and 8 Others liked</div>
                <div class="card__footer--right">
                  <a
                    ><img
                      class="icon-sm icon-dark"
                      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/heart.svg"
                      alt="heart-icon"
                  /></a>
                  <a
                    ><img
                      class="icon-sm icon-dark"
                      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/comment.svg"
                      alt="comment-icon"
                  /></a>
                  <a
                    ><img
                      class="icon-sm icon-dark"
                      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/bookmark.svg"
                      alt="bookmark-icon"
                  /></a>
                  <a
                    ><img
                      class="icon-sm icon-dark"
                      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/share.svg"
                      alt="share-icon"
                  /></a>
                </div>
              </div>
            </div>
          </div>
          <div class="code__wrapper">
            <pre class="code-embed">
              <button class="copy-btn icon-light txt-center">
                <img class="icon-lg" src="../../assets/copy.svg">
              </button>
              <code class="code tag">
&lt;div class=&quot;card card__socialmedia&quot;&gt;
  &lt;div class=&quot;card__body&quot;&gt;
    &lt;div class=&quot;card__title&quot;&gt;
      &lt;div class=&quot;card__title--img&quot;&gt;
        &lt;img  class=&quot;avatar av-sm&quot;  src=&quot;#&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card__title--content&quot;&gt;
        &lt;h1 class=&quot;h-5&quot;&gt;Bablu Tailor&lt;/h1&gt;
        &lt;p class=&quot;card__title--p&quot;&gt;7 Hours ago&lt;/p&gt;
      &lt;/div&gt;
      &lt;a href=&quot;#&quot; class=&quot;card__title--icon&quot;&gt;
        &lt;img 
          class=&quot;icon-sm icon-dark&quot; 
          src=&quot;https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/menu.svg&quot; /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;img src=&quot;#&quot; class=&quot;card__img&quot; /&gt;
    &lt;div class=&quot;card__content&quot;&gt;
      &lt;p class=&quot;bd-5&quot;&gt;
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Asperiores impedit voluptatum dicta odit quos rem delectus deleniti.
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;card__footer&quot;&gt;
    &lt;div class=&quot;card__footer--left&quot;&gt;
      Jony and 8 Others liked
    &lt;/div&gt;
    &lt;div class=&quot;card__footer--right&quot;&gt;
    &lt;a href=&quot;#&quot;&gt;
        &lt;img 
          class=&quot;icon-sm icon-dark&quot; 
          src=&quot;https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/heart.svg&quot;
        /&gt;
      &lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;
        &lt;img 
          class=&quot;icon-sm icon-dark&quot; 
          src=&quot;https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/comment.svg&quot;
        /&gt;
      &lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;
        &lt;img 
          class=&quot;icon-sm icon-dark&quot; 
          src=&quot;https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/bookmark.svg&quot;
        /&gt;
      &lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;
        &lt;img 
          class=&quot;icon-sm icon-dark&quot; 
          src=&quot;https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/share.svg&quot;
        /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
            </code>
          </pre>
          </div>

          <!-- TEXT OVERLAY CARD -->
          <p class="h-5 maincontent__content--info" id="overlay-card">
            Text Overlay Card
          </p>
          <p class="bd-5 maincontent__content--info">
            The
            <span class="word-highlight-red">Text Overlay Card</span> component
            comes with a Title, a Subtitle, an Image Background, a caption text
            and a few buttons at the end.
          </p>
          <div class="txt-center">
            <div class="card card__imgbg">
              <img