DEV Community

Cover image for ✨Profile Card and Engaging Hover Effects with CSS 🚀
Smit Prajapati
Smit Prajapati

Posted on

✨Profile Card and Engaging Hover Effects with CSS 🚀

Structure of Card

- div.card
      - button.mail
        - svg (Mail Button with SVG icon)
      - div.profile-pic.profile-pic1
        - img (Profile Picture Image for the First Card)
      - div.bottom
        - div.content
          - span.name (Name)
          - span.about-me (About Me)
        - div.bottom-bottom
          - div.social-links-container
            - svg (Social Link SVG icon)
            - svg (Social Link SVG icon)
            - svg (Social Link SVG icon)
          - button.button (Contact Me Button)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)