-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (64 loc) · 3.75 KB
/
index.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
<!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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello Bootstrap</title>
</head>
<body>
<div class="container py-5">
<h1 class="mt-5 pb-4">Hello Bootstrap</h1>
<div class="dropdown mb-2">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Logged as admin</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Add article</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</div>
<p class="pb-4">There are 100 posts</p>
<a href="#">
<article class="mb-5 text-dark">
<div class="media d-block d-md-flex">
<img src="img.jpg" class="mr-3"/>
<div class="media-body">
<h4 class="my-3">Vivamus euismod a tellus eget interdum. Aenean ac.</h4>
<p>Aliquam vulputate mi in vulputate aliquam. Mauris ultrices vel felis eget tempus. Morbi a est at lacus malesuada ultrices ac quis turpis. Curabitur ante metus, malesuada eget neque eu, ornare suscipit ligula. Aliquam suscipit cursus eros, ut tincidunt nulla laoreet a. Donec aliquam urna vel pellentesque sodales.</p>
</div>
</div>
</article>
</a>
<a href="#">
<article class="mb-5 text-dark">
<div class="media d-block d-md-flex">
<img src="img.jpg" class="mr-3"/>
<div class="media-body">
<h4 class="my-3">Vivamus euismod a tellus eget interdum. Aenean ac.</h4>
<p>Aliquam vulputate mi in vulputate aliquam. Mauris ultrices vel felis eget tempus. Morbi a est at lacus malesuada ultrices ac quis turpis. Curabitur ante metus, malesuada eget neque eu, ornare suscipit ligula. Aliquam suscipit cursus eros, ut tincidunt nulla laoreet a. Donec aliquam urna vel pellentesque sodales.</p>
</div>
</div>
</article>
</a>
<a href="#">
<article class="mb-5 text-dark">
<div class="media d-block d-md-flex">
<img src="img.jpg" class="mr-3"/>
<div class="media-body">
<h4 class="my-3">Vivamus euismod a tellus eget interdum. Aenean ac.</h4>
<p>Aliquam vulputate mi in vulputate aliquam. Mauris ultrices vel felis eget tempus. Morbi a est at lacus malesuada ultrices ac quis turpis. Curabitur ante metus, malesuada eget neque eu, ornare suscipit ligula. Aliquam suscipit cursus eros, ut tincidunt nulla laoreet a. Donec aliquam urna vel pellentesque sodales.</p>
</div>
</div>
</article>
</a>
<button type="button" class="btn btn-primary mt-3">Next page</button>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>