-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathmedia-object.html
More file actions
124 lines (104 loc) · 7.51 KB
/
media-object.html
File metadata and controls
124 lines (104 loc) · 7.51 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Hcode</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style2.css">
</head>
<body>
<div class="container">
<div class="media">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio rem quis minus autem pariatur quia dignissimos excepturi quisquam dolorem aliquam officiis facilis voluptas placeat, molestiae temporibus eaque quae exercitationem. Quam?
</div>
</div>
<hr>
<div class="media">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3 rounded">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio rem quis minus autem pariatur quia dignissimos excepturi quisquam dolorem aliquam officiis facilis voluptas placeat, molestiae temporibus eaque quae exercitationem. Quam?
</div>
</div>
<hr>
<div class="media">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3 rounded-circle">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio rem quis minus autem pariatur quia dignissimos excepturi quisquam dolorem aliquam officiis facilis voluptas placeat, molestiae temporibus eaque quae exercitationem. Quam?
<hr>
<div class="media">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3 rounded-circle">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio rem quis minus autem pariatur quia dignissimos excepturi quisquam dolorem aliquam officiis facilis voluptas placeat, molestiae temporibus eaque quae exercitationem. Quam?
</div>
</div>
</div>
</div>
<hr>
<div class="media">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3 rounded-circle align-self-start">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quas consequuntur cum rem. Nisi cumque ullam consectetur, atque voluptatibus non laudantium minus! Laudantium excepturi sunt vel impedit. Dicta, iusto nulla? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quas consequuntur cum rem. Nisi cumque ullam consectetur, atque voluptatibus non laudantium minus! Laudantium excepturi sunt vel impedit. Dicta, iusto nulla?
</div>
</div>
<hr>
<div class="media">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3 rounded-circle align-self-center">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quas consequuntur cum rem. Nisi cumque ullam consectetur, atque voluptatibus non laudantium minus! Laudantium excepturi sunt vel impedit. Dicta, iusto nulla? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quas consequuntur cum rem. Nisi cumque ullam consectetur, atque voluptatibus non laudantium minus! Laudantium excepturi sunt vel impedit. Dicta, iusto nulla?
</div>
</div>
<hr>
<div class="media">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3 rounded-circle align-self-end">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quas consequuntur cum rem. Nisi cumque ullam consectetur, atque voluptatibus non laudantium minus! Laudantium excepturi sunt vel impedit. Dicta, iusto nulla? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quas consequuntur cum rem. Nisi cumque ullam consectetur, atque voluptatibus non laudantium minus! Laudantium excepturi sunt vel impedit. Dicta, iusto nulla?
</div>
</div>
<hr>
<div class="media">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quas consequuntur cum rem. Nisi cumque ullam consectetur, atque voluptatibus non laudantium minus! Laudantium excepturi sunt vel impedit. Dicta, iusto nulla? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quas consequuntur cum rem. Nisi cumque ullam consectetur, atque voluptatibus non laudantium minus! Laudantium excepturi sunt vel impedit. Dicta, iusto nulla?
</div>
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="ml-3 rounded-circle">
</div>
<hr>
<ul class="list-unstyled">
<li class="media">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3 rounded-circle">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio rem quis minus autem pariatur quia dignissimos excepturi quisquam dolorem aliquam officiis facilis voluptas placeat, molestiae temporibus eaque quae exercitationem. Quam?
</div>
</li>
<li class="media my-4">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3 rounded-circle">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio rem quis minus autem pariatur quia dignissimos excepturi quisquam dolorem aliquam officiis facilis voluptas placeat, molestiae temporibus eaque quae exercitationem. Quam?
</div>
</li>
<li class="media">
<img src="https://avatars0.githubusercontent.com/u/1216883?s=460&v=4" alt="Avatar" style="height:64px;" class="mr-3 rounded-circle">
<div class="media-body">
<h6>Media heading</h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio rem quis minus autem pariatur quia dignissimos excepturi quisquam dolorem aliquam officiis facilis voluptas placeat, molestiae temporibus eaque quae exercitationem. Quam?
</div>
</li>
</ul>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>