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