-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
78 lines (76 loc) · 4.36 KB
/
example.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Media – Chameleon UI</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="example.css" />
<style>
* {
box-sizing: border-box;
}
body, p, h1 {
margin: 0;
padding: 0;
font-family: Helvetica Neue, Helvetica, sans-serif;
line-height: 1.5;
}
body {
max-width: 60em;
min-width: 37em;
margin: 0 auto;
padding: 1em;
}
h1 {
margin-bottom: 0.5ex;
}
p {
margin-bottom: 1.5em;
}
</style>
</head>
<body>
<div class="media media-left">
<a href="#huh" class="media-img">
<img src="http://dummyimage.com/200x200" alt="Hi" />
</a>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, praesentium impedit quam quasi sapiente cumque laboriosam dolores sunt fuga delectus. Cum qui odio vitae dolorum repellat iusto neque nulla ducimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, aliquam blanditiis est ab dicta dolores quam porro vel repudiandae similique. Consequuntur, similique, est obcaecati magnam recusandae officiis quas hic ipsum!</p>
<div class="media media-left">
<a href="#huh" class="media-img">
<img src="http://dummyimage.com/100x100" alt="Hi" />
</a>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, praesentium impedit quam quasi sapiente cumque laboriosam dolores sunt fuga delectus. Cum qui odio vitae dolorum repellat iusto neque nulla ducimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, aliquam blanditiis est ab dicta dolores quam porro vel repudiandae similique. Consequuntur, similique, est obcaecati magnam recusandae officiis quas hic ipsum!</p>
</div>
</div>
<div class="media media-right">
<a href="#huh" class="media-img">
<img src="http://dummyimage.com/100x100" alt="Hi" />
</a>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, praesentium impedit quam quasi sapiente cumque laboriosam dolores sunt fuga delectus. Cum qui odio vitae dolorum repellat iusto neque nulla ducimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, aliquam blanditiis est ab dicta dolores quam porro vel repudiandae similique. Consequuntur, similique, est obcaecati magnam recusandae officiis quas hic ipsum!</p>
<div class="media media-right">
<a href="#huh" class="media-img">
<img src="http://dummyimage.com/100x100" alt="Hi" />
</a>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, praesentium impedit quam quasi sapiente cumque laboriosam dolores sunt fuga delectus. Cum qui odio vitae dolorum repellat iusto neque nulla ducimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, aliquam blanditiis est ab dicta dolores quam porro vel repudiandae similique. Consequuntur, similique, est obcaecati magnam recusandae officiis quas hic ipsum!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="media media-right">
<a href="#huh" class="media-img">
<img src="http://dummyimage.com/200x200" alt="Hi" />
</a>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, nam quaerat iure consequatur incidunt! Architecto, harum perferendis accusamus aliquam natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, nam quaerat iure consequatur incidunt! Architecto, harum perferendis accusamus aliquam natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, nam quaerat iure consequatur incidunt! Architecto, harum perferendis accusamus aliquam natus.</p>
</div>
</div>
</body>
</html>