-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsimple-comment-card.html
More file actions
108 lines (102 loc) · 3.99 KB
/
simple-comment-card.html
File metadata and controls
108 lines (102 loc) · 3.99 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/bootstrap-textarea.min.css" />
</head>
<body>
<!-- Start your project here-->
<section style="background-color: #eee;">
<div class="container my-5 py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-12 col-lg-10 col-xl-8">
<div class="card">
<div class="card-body">
<div class="d-flex flex-start align-items-center">
<img
class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(19).webp"
alt="avatar"
width="60"
height="60"
/>
<div>
<h6 class="fw-bold text-primary mb-1">
Lily Coleman
</h6>
<p class="text-muted small mb-0">
Shared publicly - Jan 2020
</p>
</div>
</div>
<p class="mt-3 mb-4 pb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
consequat.
</p>
<div class="small d-flex justify-content-start">
<a href="#!" class="d-flex align-items-center me-3">
<i class="far fa-thumbs-up me-2"></i>
<p class="mb-0">Like</p>
</a>
<a href="#!" class="d-flex align-items-center me-3">
<i class="far fa-comment-dots me-2"></i>
<p class="mb-0">Comment</p>
</a>
<a href="#!" class="d-flex align-items-center me-3">
<i class="fas fa-share me-2"></i>
<p class="mb-0">Share</p>
</a>
</div>
</div>
<div class="card-footer py-3 border-0" style="background-color: #f8f9fa;">
<div class="d-flex flex-start w-100">
<img
class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(19).webp"
alt="avatar"
width="40"
height="40"
/>
<div class="form-outline w-100">
<textarea
class="form-control"
id="textAreaExample"
rows="4"
style="background: #fff;"
></textarea>
<label class="form-label" for="textAreaExample">Message</label>
</div>
</div>
<div class="float-end mt-2 pt-1">
<button type="button" class="btn btn-primary btn-sm">
Post comment
</button>
<button type="button" class="btn btn-outline-primary btn-sm">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>