-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathprofile.html
136 lines (129 loc) · 6.59 KB
/
profile.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <meta http-equiv="Content-Security-Policy"
content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:"> -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Cyber Links</title>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Cyber Links</h5>
<nav class="my-2 my-md-0 mr-md-3">
<img class="rounded-circle" src="https://api.adorable.io/avatars/285/abott@adorable.png" alt=""
style="height: 32px;">
<a class="p-2 text-dark" href="#">Nguyen Anh Tien</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign out</a>
</div>
<main role="main" class="container">
<div class="container">
<div class="row">
<div class="col-4">
<div class="d-flex flex-column my-3 p-3 bg-white rounded shadow-sm text-center">
<img class="rounded-circle mx-auto" src="https://api.adorable.io/avatars/285/abott@adorable.png" alt=""
width="64" height="64">
<strong class="p-2 text-muted" href="#">@vigov5</strong>
<a class="p-2 text-dark" href="#">Nguyen Anh Tien</a>
<div>
<a class="btn btn-outline-primary" href="#">Follow</a>
<hr>
<div>
<label for="exampleFormControlFile1">
<h6>Change Avatar</h6>
</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<button class="btn-sm mt-2 btn-primary" href="#">Upload</button>
</div>
</div>
</div>
<div class="d-flex flex-column my-10 px-2 pb-4 bg-white rounded shadow-sm text-center">
<h5 class="mb-5">Follow Requests</h5>
<div class="d-flex flex-row mb-2 justify-content-between">
<div class="text-left col-6">Tuan @tuan</div>
<div class="col-6 d-flex flex-row justify-content-end">
<a class="btn-sm mr-2 btn-primary" href="#">Approve</a>
<a class="btn-sm btn-danger" href="#">Reject</a>
</div>
</div>
<div class="d-flex flex-row mb-2 justify-content-between">
<div class="text-left col-6">Tuan @tuan</div>
<div class="col-6 d-flex flex-row justify-content-end">
<a class="btn-sm mr-2 btn-primary" href="#">Approve</a>
<a class="btn-sm btn-danger" href="#">Reject</a>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Recent links</h6>
<div class="media text-muted pt-3">
<img class="rounded-circle mr-2" src="https://api.adorable.io/avatars/285/abott@adorable.png" alt=""
style="height: 32px;">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<span class="d-block text-gray-dark"><strong>Nguyen Anh Tien</strong><span> @userA</span></span>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<small class="ml-2">
<a href="#">12 Likes</a>
<br>
<a href="#" class="text-muted">Report</a>
</small>
</div>
<div class="media text-muted pt-3">
<img class="rounded-circle mr-2" src="https://api.adorable.io/avatars/285/deptrai@adorable.png" alt=""
style="height: 32px;">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<span class="d-block text-gray-dark"><strong>Nguyen Anh Tien</strong><span> @userA</span></span>
Private link! Only followers can see.
</p>
<small class="ml-2">
<a href="#">12 Likes</a>
<br>
<a href="#" class="text-muted">Report</a>
</small>
</div>
<div class="media text-muted pt-3">
<img class="rounded-circle mr-2" src="https://api.adorable.io/avatars/285/khanhact@adorable.png" alt=""
style="height: 32px;">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<span class="d-block text-gray-dark"><strong>Nguyen Anh Tien</strong><span> @userA</span></span>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<small class="ml-2">
<a href="#">12 Likes</a>
<br>
<a href="#" class="text-muted">Report</a>
</small>
</div>
<small class="d-block text-center mt-3">
<strong>The End</strong>
</small>
</div>
</div>
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>