<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f4;
font-family: Arial, sans-serif;
}
.card {
background: white;
width: 300px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
text-align: center;
padding: 20px;
}
.card img {
width: 100px;
border-radius: 50%;
margin-bottom: 15px;
}
.card h2 {
margin: 10px 0;
}
.card p {
color: gray;
}
.card button {
background: blue;
color: white;
padding: 10px 15px;
border: none;
border-radius: 8px;
margin-top: 10px;
cursor: pointer;
transition: 0.3s;
}
.card button:hover {
background: darkblue;
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/100" alt="Profile">
<h2>John Doe</h2>
<p>Web Developer</p>
<button>Follow</button>
</div>
</body>
</html>
Explanation:
box-shadowcreates a floating card effect.border-radiusrounds corners.hovereffect on button adds interactivity.
Leave a Reply