-
Notifications
You must be signed in to change notification settings - Fork 1
/
ProfilePage.html
111 lines (109 loc) · 9.05 KB
/
ProfilePage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<title>PROFILE PAGE</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</head>
<style>
.profile-background {
margin: -30px -30px 0 -30px;
}
.profile-background img {
width: 100%;
height: 310px;
}
.profile-info-left {
position: relative;
top: -92px;
max-height:480px;
}
.profile-info-left img.avatar {
border: 2px solid #fff;
}
.profile-info-left h2 {
font-family: "josefinslab-semibold";
margin-bottom: 30px;
}
.profile-info-left .section {
margin-top: 50px;
}
.profile-info-left .section h3 {
font-size: 1.1em;
font-weight: 700;
padding-bottom: 10px;
}
.about{
margin-top:50px;
}
</style>
<body>
<div class="container">
<div class="user-profile">
<div class="profile-background"><img src="http://demo.thedevelovers.com/dashboard/queenadmin-1.2/assets/img/city.jpg" alt="Profile Header Background"></div>
<div class="row">
<div class="col-lg-4 col-sm">
<div class="profile-info-left text-center">
<div class="text-center">
<img src="data:image/png;base64,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" alt="Avatar" class="avatar img-circle">
<h2>UserName</h2>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary">Message</button>
<button type="button" class="btn btn-secondary">Follow</button>
</div>
<div class="section">
<h3>What do you do?</h3>
<p>I am an Engineering graduate, working in an IT company</p>
</div>
<div class="section">
<h3>Connect with me </h3>
<ul class="list-unstyled list-group">
<li><a href="#"><i class="fab fa-twitter pr-1"></i>UserName</a></li>
<li><a href="#"><i class="fab fa-facebook-f pr-1"></i>UserName</a></li>
<li><a href="#"><i class="fab fa-linkedin-in pr-1"></i>UserName</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="profile-info-right text-center">
<div class="about">
<h3>About</h3>
<p>I am an Engineering Graduate</p>
</div >
<div class="about">
<h3>Hobbies</h3>
<p>-----Mention hobbies here---------</p>
</div>
</div>
<div class="about text-center about" >
<h3>Skills</h3>
<a href="#" class="badge badge-dark badge-pill">html5</a>
<a href="#" class="badge badge-dark badge-pill">react</a>
<a href="#" class="badge badge-dark badge-pill">css3</a>
<a href="#" class="badge badge-dark badge-pill">bootstrap</a>
</div>
<div class="about text-center about">
<h3>Educational qualifications</h3>
<p>----------Mention your educational qualifications-------------</p>
</div>
<div class="about text-center">
<h3>Contact Details</h3>
</div>
<div class="about">
<p><span><b>Email:</b></span>------mention your mail address---------</p>
<p><span><b>Phone No:</b></span>----mention your phone number--------</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>