MaxInterview - profile page html

showing results for - "profile page html"

17 Jan 2017

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

profile page html

Solutions on MaxInterview for profile page html by the best coders in the world