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.
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>
