-
Notifications
You must be signed in to change notification settings - Fork 0
/
media.html
102 lines (95 loc) · 4.54 KB
/
media.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>Layouts</title>
</head>
<body class="bg-dark">
<header id="page-hero" class="site-header d-flex flex-column align-content-between">
<nav class="site-nav family-sans navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
<button
type="button"
class="navbar-toggler"
data-toggle="collapse"
data-target="#myTogglerNav"
aria-controls="myTogglerNav"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand text-uppercase" href="#page-hero"><a class="navbar-brand text-uppercase" href="index.html">Layout</a>
<div class="collapse navbar-collapse" id="myTogglerNav">
<div class="navbar-nav ml-auto font-weight-regular text-uppercase">
<a class="nav-item nav-link" href="index.html">home</a>
<a class="nav-item nav-link" href="columns.html">columns</a>
<a class="nav-item nav-link text-white" href="media.html">media</a>
</div>
</div>
</div>
</nav>
<article id="page-media" class="bg-white">
<header class="container text-center">
<h2 class="display-4 pt-4 text-center">Media</h2>
<p class="lead mx-md-5">
A quick way two column pattern that shows an image next to a photo. You have the ability to center elements using flexbox classes. These
will always render as single columns and can sometimes be too wide, so these particular media elements are inside an 8 column grid.
</p>
</header>
<section class="container my-5">
<div class="row justify-content-md-center">
<div class="animated-group col-lg-8">
<section class="media mb-4">
<img class="align-self-center mr-3 img-fluid rounded" src="https://dummyimage.com/120/6/f.png&text=A" alt="Photo Sample" />
<div class="media-body">
<h4 class="">Media One</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum at voluptatibus incidunt, quia sapiente sequi quis quae atque quas id
quam ab nobis iste eius, accusamus et officia laudantium! Ducimus.
</p>
</div>
</section>
<section class="media mb-4">
<img class="align-self-center mr-3 img-fluid rounded" src="https://dummyimage.com/120/6/f.png&text=B" alt="Photo Sample" />
<div class="media-body">
<h4 class="">Media Two</h4>
<p>
Possimus beatae magnam illum necessitatibus laudantium illo aspernatur ducimus eveniet? Voluptas labore similique aut quam quibusdam
eius voluptatum dolores quas molestiae suscipit numquam veniam, nemo totam incidunt ullam pariatur perspiciatis.
</p>
</div>
</section>
<section class="media mb-4">
<img class="align-self-center mr-3 img-fluid rounded" src="https://dummyimage.com/120/6/f.png&text=C" alt="Photo Sample" />
<div class="media-body">
<h4 class="">Media Three</h4>
<p>
Quis at impedit repellat ipsam ad reiciendis beatae odio explicabo amet fuga nostrum animi nisi unde ab sint, sequi est officia.
Maiores, fuga aliquid pariatur dignissimos eum vitae ex suscipit.
</p>
</div>
</section>
</div>
</div>
</section>
</article>
<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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
</body>
</html>