-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathpost.html
155 lines (149 loc) · 9.05 KB
/
post.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<title>Forum - Post</title>
<style type="text/css">
.author-col {
min-width: 12em;
}
.post-col {
min-width: 20em;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<h1><a href="#" class="navbar-brand">Forum</a></h1>
<form class="form-inline">
<input type="text" class="form-control mr-3 mb-2 mb-sm-0 " placeholder="Search">
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
</nav>
<div class="container my-3">
<nav class="breadcrumb">
<a href="#0" class="breadcrumb-item">Board index</a>
<a href="#0" class="breadcrumb-item">Forum category</a>
<a href="#0" class="breadcrumb-item">Forum name</a>
<span class="breadcrumb-item active">Forum post title with a complex and long questions</span>
</nav>
<div class="row">
<div class="col-12">
<h2 class="h4 text-white bg-info mb-0 p-4 rounded-top">Forum post title with a complex and long questions</h2>
<table class="table table-striped table-bordered table-responsive-lg">
<thead class="thead-light">
<tr>
<th scope="col">Author</th>
<th scope="col">Message</th>
</tr>
</thead>
<tbody>
<tr>
<td class="author-col">
<div>by <a href="#0">Author name</a></div>
</td>
<td class="post-col d-lg-flex justify-content-lg-between">
<div><span class="font-weight-bold">Post subject:</span> Forum post title with a complex and long questions</div>
<div><span class="font-weight-bold">Posted:</span> 10 Dec 2017, 11:52</div>
</td>
</tr>
<tr>
<td>
<div><span class="font-weight-bold">Joined: </span><br> 03 Apr 2017, 13:08</div>
<div><span class="font-weight-bold">Posts:</span><br> 123</div>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat auctor enim eu blandit. Aliquam consequat tortor sit amet velit consectetur, eu sollicitudin orci posuere. Integer at varius massa, at aliquam velit. Suspendisse eu pellentesque libero, vel suscipit felis. Sed non eros non purus sollicitudin ullamcorper sit amet ut dolor. Curabitur ac nisi nunc. Suspendisse porta ac eros vitae dapibus. Donec a metus a purus rutrum rutrum ac ac ipsum. Ut vulputate facilisis nisi, in imperdiet dolor suscipit eget. Suspendisse ultricies mauris quis ex pellentesque ultricies. Duis a purus nec risus condimentum pellentesque at at enim.<p/>
<p>In aliquet lorem eget eleifend faucibus. Praesent pellentesque vel arcu ut egestas. Mauris mauris risus, scelerisque quis consectetur suscipit, sollicitudin vitae tortor. Proin eget commodo libero, sit amet tempus lorem. Sed bibendum eros arcu, ac semper lorem porta a. Curabitur accumsan risus aliquam, mattis leo eu, fringilla nibh. Aenean luctus condimentum purus in fringilla. Vivamus a diam dolor. Fusce iaculis scelerisque urna, nec ultrices urna.</p>
</td>
</tr>
</tbody>
</table>
<table class="table table-striped table-bordered table-responsive-lg">
<tbody>
<tr>
<td class="author-col">
<div>by <a href="#0">Author name</a></div>
</td>
<td class="post-col d-lg-flex justify-content-lg-between">
<div><span class="font-weight-bold">Post subject:</span> Forum post title with a complex and long questions</div>
<div><span class="font-weight-bold">Posted:</span> 10 Dec 2017, 11:52</div>
</td>
</tr>
<tr>
<td>
<div><span class="font-weight-bold">Joined: </span><br> 03 Apr 2017, 13:08</div>
<div><span class="font-weight-bold">Posts:</span><br> 123</div>
</td>
<td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat auctor enim eu blandit. Aliquam consequat tortor sit amet velit consectetur, eu sollicitudin orci posuere. Integer at varius massa, at aliquam velit. Suspendisse eu pellentesque libero, vel suscipit felis. Sed non eros non purus sollicitudin ullamcorper sit amet ut dolor. Curabitur ac nisi nunc. Suspendisse porta ac eros vitae dapibus. Donec a metus a purus rutrum rutrum ac ac ipsum. Ut vulputate facilisis nisi, in imperdiet dolor suscipit eget. Suspendisse ultricies mauris quis ex pellentesque ultricies. Duis a purus nec risus condimentum pellentesque at at enim.<p/>
<img src="https://placehold.it/600x400" class="img-fluid">
<p>In aliquet lorem eget eleifend faucibus. Praesent pellentesque vel arcu ut egestas. Mauris mauris risus, scelerisque quis consectetur suscipit, sollicitudin vitae tortor. Proin eget commodo libero, sit amet tempus lorem. Sed bibendum eros arcu, ac semper lorem porta a. Curabitur accumsan risus aliquam, mattis leo eu, fringilla nibh. Aenean luctus condimentum purus in fringilla. Vivamus a diam dolor. Fusce iaculis scelerisque urna, nec ultrices urna.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-3 clearfix">
<nav aria-label="Navigate post pages" class="float-lg-right">
<ul class="pagination pagination-sm mb-lg-0">
<li class="page-item active"><a href="#0" class="page-link">1 <span class="sr-only">(current)</span></a></li>
<li class="page-item"><a href="#0" class="page-link">2</a></li>
<li class="page-item"><a href="#0" class="page-link">3</a></li>
<li class="page-item"><a href="#0" class="page-link">4</a></li>
<li class="page-item"><a href="#0" class="page-link">5</a></li>
<li class="page-item"><a href="#0" class="page-link">… 31</a></li>
<li class="page-item"><a href="#0" class="page-link">Next</a></li>
</ul>
</nav>
</div>
<form class="mb-3">
<div class="form-group">
<label for="comment">Reply to this post:</label>
<textarea class="form-control" id="comment" rows="10" placeholder="Write your comment here." required></textarea>
</div>
<button type="submit" class="btn btn-primary">Reply</button>
<button type="reset" class="btn btn-danger">Reset</button>
</form>
<div>
<div class="d-lg-flex align-items-lg-center mb-3">
<form class="form-inline d-block d-sm-flex mr-2 mb-3 mb-lg-0">
<div class="form-group mr-2 mb-3 mb-md-0">
<label for="email" class="mr-2">Email:</label>
<input type="email" class="form-control" placeholder="[email protected]" id="email" required>
</div>
<div class="form-group mr-2">
<label for="password" class="mr-2">Password:</label>
<input type="password" class="form-control" id="password" required>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
<span class="mr-2">or ...</span>
<a href="#0" class="btn btn-success">Create account</a>
</div>
<p class="small"><a href="#0">Have you forgotten your account details?</a></p>
</div>
</div>
<footer class="small bg-dark text-white">
<div class="container py-4">
<ul class="list-inline mb-0 text-center">
<li class="list-inline-item">© 2017 Web Company, Inc.</li>
<li class="list-inline-item">All rights reserved.</li>
<li class="list-inline-item"><a href="#">Terms of use and privacy policy</a>.</li>
</ul>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>