1<!DOCTYPE html>
2<html>
3<head>
4<style>
5.card {
6 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
7 max-width: 300px;
8 margin: auto;
9 text-align: center;
10 font-family: arial;
11}
12
13.title {
14 color: grey;
15 font-size: 18px;
16}
17
18button {
19 border: none;
20 outline: 0;
21 display: inline-block;
22 padding: 8px;
23 color: white;
24 background-color: #000;
25 text-align: center;
26 cursor: pointer;
27 width: 100%;
28 font-size: 18px;
29}
30
31a {
32 text-decoration: none;
33 font-size: 22px;
34 color: black;
35}
36
37button:hover, a:hover {
38 opacity: 0.7;
39}
40</style>
41</head>
42<body>
43
44<h2 style="text-align:center">User Profile Card</h2>
45
46<div class="card">
47 <img src="image.jpg" alt="Yasin" style="width:100%">
48 <h1>Yasin</h1>
49 <p class="title">Coder & Pianist</p>
50 <p>>> Type here</p>
51 <div style="margin: 24px 0;">
52 <a href="#"><i class="fa fa-dribbble"></i></a>
53 <a href="#"><i class="fa fa-twitter"></i></a>
54 <a href="#"><i class="fa fa-linkedin"></i></a>
55 <a href="#"><i class="fa fa-facebook"></i></a>
56 </div>
57 <p><button>Contact</button></p>
58</div>
59
60</body>
61</html>
62