Avatars
You'll love this
Demos
Example
Markup
<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-40" />
<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-48" />
<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-56" />
<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-64" />
<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-72" />
<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-80" />
Source:
modules/_avatars.scss, line 5
Embed
Responsive Media (videos, iframe...)
Demos
Example
Markup
<div class="embed">
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video>
</div>
Source:
modules/_media.scss, line 1
Fullscreen
Responsive background video https://fvsch.com/code/video-background/
Demos
Example
Markup
<div class="fullscreen">
<div class="embed">
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video>
</div>
</div>
Source:
modules/_media.scss, line 39
Screenshots
HTML browser
Demos
Example
Markup
<figure class="browser">
<img src="http://lorempixel.com/1000/500/food/" />
<figcaption>Foddie</figcaption>
</figure>
Source:
modules/_browser.scss, line 1