create animated futuristic profile card using html+css+js
Certainly! Here's an example of an animated futuristic profile card using HTML, CSS, and JavaScript:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Futuristic Profile Card</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="card">
<div class="card-header">
<img src="profile-pic.jpg" alt="Profile Picture">
<h2>John Doe</h2>
<p>Software Engineer</p>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus, mi ac aliquam blandit, magna orci sollicitudin est, at gravida nisi est eget turpis.</p>
<div class="skills">
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Python</span>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn">Contact</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS (styles.css):
```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Roboto', sans-serif;
background-color: #f5f5f5;
}
.card {
width: 320px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
transform: translateY(50px);
opacity: 0;
animation: slide-up 0.5s forwards;
}
@keyframes slide-up {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.card-header {
padding: 20px;
text-align: center;
background-color: #212121;
color: #fff;
}
.card-header img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 10px;
object-fit: cover;
}
.card-header h2 {
margin: 0;
font-size: 24px;
}
.card-header p {
margin: 0;
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
}
.card-content {
padding: 20px;
}
.card-content p {
margin: 0;
line-height: 1.5;
color: #777;
}
.skills {
margin-top: 20px;
}
.skills span {
display: inline-block;
background-color: #eee;
color: #333;
padding: 5px 10px;
border-radius: 20px;
margin-right: 10px;
margin-bottom: 10px;
font-size: 14px;
}
.card-footer {
padding: 20px;
background-color: #212121;
text-align: center;
}
.btn {
display: inline-block;
background-color: #ff4081;
color: #fff;
padding: 10px 20px;
border-radius: 30px;
text-decoration: none;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #d81b60;
}
```
JavaScript (script.js):
```javascript
// No JavaScript code needed for this example
```
In this example, the profile card is styled with CSS to create a futuristic look. The card slides up and fades in when the page loads. You can customize the content, styling, and animations according to your preferences.
Replace the `profile-pic.jpg` image with your own profile picture. Additionally, you can add more skills by duplicating the `<span>` elements in the `skills` div.
Save the HTML code in a file named `index.html`, the CSS code in a file named `styles.css`, and the JavaScript code in a file named `script.js`. Ensure that all three files are in the same directory. Then, open the `index.html` file in a web browser to see the animated futuristic profile card.
Comments
Post a Comment