Creating Beautiful and Transparent User Profile Card UI Design Using JavaScript

Glassmorphism_profile-card is a user profile card with Glassmorphism style using HTML, CSS and JavaScript. The card background is partially transparent. On moving the cursor over the card, the card will be tilted.

Creating Beautiful and Transparent User Profile Card UI Design Using JavaScript

AuthorLinksMade withLast update
maneesha-28Office HomeJavaScriptOct 08, 2022

How to use it?

Download this project and open index.html

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Glassmorphism Card Design</title>
</head>
<body>
    <div class="container">
        <div class="card" data-tilt>
            <img src="images/profile_pic.png">
            <h2>Manisha Nair</h2>
            <p>Hello there! I'm a student of IIPS, DAVV and I'm interested in Blockchain development</p>
            <div class="links">
              <a href="https://www.linkedin.com/in/manisha-nair-276a1a214/"><img src="images/linkedin.png" ></a>
              <a href="https://twitter.com/maneeshaaa28"><img src="images/twitter.png" ></a>
              <a href="https://github.com/maneesha-28"><img src="images/github.png" ></a>
            </div> 
              <a href="#" class="btn" >Message me</a>
        </div>
    </div>
    <script src="vanilla-tilt.js" ></script>
</body>
</html>