-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
media-css.html
147 lines (139 loc) · 5.17 KB
/
media-css.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
<!DOCTYPE html>
<html lang="en">
<head>
{{> head }}
</head>
<body>
{{> navbar }}
<main>
{{> intro}}
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
<!-- Images -->
<div id="images" class="section scrollspy">
<h3 class="header">Images</h3>
<p class="caption">
Images can be styled in different ways using Materialize
</p>
<h5>Responsive Images</h5>
<p>
To make images resize responsively to page width, you can add
the class <code class="language-markup">responsive-img</code> to
your image tag. It will now have a
<code class="language-markup">max-width: 100%</code> and
<code class="language-markup">height:auto</code>.
</p>
<pre><code class="language-markup">
<img class="responsive-img" src="cool_pic.jpg">
</code></pre>
<h5>Circular images</h5>
<div class="row">
<div class="col s12 m8">
<div class="card-panel z-depth-1">
<div class="row valign-wrapper">
<div class="col s4 m2">
<img
src="images/yuna.jpg"
alt=""
class="circle responsive-img valign"
/>
</div>
<div class="col s8 m10">
<span>
This is a square image. Add the "circle" class to it
to make it appear circular.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<p>
To make images appear circular, simply add
<code class="language-markup">class="circle"</code> to them
</p>
<pre><code class="language-markup">
<div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s2">
<img src="images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
</div>
<div class="col s10">
<span class="black-text">
This is a square image. Add the "circle" class to it to make it appear circular.
</span>
</div>
</div>
</div>
</div>
</code></pre>
</div>
</div>
</div>
<!-- Videos Section -->
<div id="videos" class="section scrollspy">
<h3 class="header">Videos</h3>
<p class="caption">
We provide a container for Embedded Videos that resizes them
responsively.
</p>
<h5>Responsive Embeds</h5>
<p>
To make your embeds responsive, merely wrap them with a
containing div which has the class
<code class="language-markup">video-container</code>
</p>
<div class="video-container">
<iframe
width="853"
height="480"
src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
frameborder="0"
allowfullscreen
></iframe>
</div>
<pre><code class="language-markup">
<div class="video-container">
<iframe width="853" height="480" src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</code></pre>
<h5>Responsive Videos</h5>
<p>
To make your HTML5 Videos responsive just add the class
<code class="language-markup">responsive-video</code> to the
video tag.
</p>
<video width="100%" controls>
<source
src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
type="video/mp4"
/>
</video>
<pre><code class="language-markup">
<video class="responsive-video" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</code></pre>
</div>
</div>
<div class="col hide-on-small-only m3 xl3">
<div class="toc-wrapper">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#images">Images</a></li>
<li><a href="#videos">Videos</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
{{> footer }}
<script type="module" src="/src/main.ts"></script>
</body>
</html>