"Devices"
Bootstrap 3.3.0 Snippet by sparkktv

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div data-react-server-root-id="7" data-react-server-timing-offset="208">
<div id="devices" name="devices" data-reactroot="" data-reactid="1" data-react-checksum="336783226">
<section class="Slate DeviceAvailabilityWrapper container-fluid" data-reactid="2">
<div class="DeviceAvailabilityWrapper__content" data-reactid="3">
<div class="DeviceAvailabilityStandard container" data-reactid="4">
<div class="row" data-reactid="5">
<h2 class="DeviceAvailabilityStandard__title heading2" data-reactid="6">WATCH ON YOUR FAVORITE SUPPORTED DEVICES</h2>
<p class="DeviceAvailabilityStandard__subtitle body" data-reactid="7">No hidden fees, equipment rentals, or installation appointments.</p>
<p class="body" data-reactid="8">
<span data-reactid="9">Don’t see your device? Hulu without Live TV is available on </span><a href="/start/devices" target="_blank" class="LinkButton btn btn-link" data-reactid="10">additional devices.</a></p></div>
<div class="row" data-reactid="11"><div id="9" class="Device col-md-3 col-sm-4 col-xs-6" data-reactid="12">
<img class="Device__logo" src="//assetshuluimcom-a.akamaihd.net/h3o/landing/devices/hulu-com-logo.svg" alt="logo-hulu" data-reactid="13">
<p class="Device__company body2" data-reactid="14">Mac & PC</p>
<p class="Device__description body3" data-reactid="15">Hulu.com</p>
<p class="Device__not-available hidden-md hidden-lg hidden-xl" data-reactid="16"></p></div>
<div id="1" class="Device col-md-3 col-sm-4 col-xs-6" data-reactid="17">
<img class="Device__logo" src="//assetshuluimcom-a.akamaihd.net/h3o/landing/devices/apple-logo.svg" alt="logo-apple" data-reactid="18">
<p class="Device__company body2" data-reactid="19">Apple</p>
<p class="Device__description body3" data-reactid="20">iPhone & iPad</p>
<p class="Device__not-available hidden-md hidden-lg hidden-xl" data-reactid="21"></p></div>
<div id="2" class="Device col-md-3 col-sm-4 col-xs-6" data-reactid="22">
<img class="Device__logo" src="//assetshuluimcom-a.akamaihd.net/h3o/landing/devices/android-logo.svg" alt="logo-android" data-reactid="23">
<p class="Device__company body2" data-reactid="24">Android</p>
<p class="Device__description body3" data-reactid="25">Phones & tablets</p>
<p class="Device__not-available hidden-md hidden-lg hidden-xl" data-reactid="26"></p></div>
<div id="3" class="Device col-md-3 col-sm-4 col-xs-6" data-reactid="27">
<img class="Device__logo" src="//assetshuluimcom-a.akamaihd.net/h3o/landing/devices/roku-logo.svg" alt="logo-roku" data-reactid="28">
<p class="Device__company body2" data-reactid="29">Roku</p>
<p class="Device__description body3" data-reactid="30">Select models</p>
<p class="Device__not-available hidden-md hidden-lg hidden-xl" data-reactid="31"></p></div>
<div id="6" class="Device col-md-3 col-sm-4 col-xs-6" data-reactid="32">
<img class="Device__logo" src="//assetshuluimcom-a.akamaihd.net/h3o/landing/devices/fire-tv-logo.svg" alt="logo-fire-tv" data-reactid="33">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.container{width:1170px;}
.body, body {font-weight: 300;font-stretch: normal;font-size: 16px;line-height: 1.5;color: #5e6573;}
p {margin: 0 0 10px;}
.row {margin-left: -10px;margin-right: -10px;}
.row::after, .row::before {content: " ";display: table;}
.DeviceAvailabilityWrapper {padding: 0;}
.Slate::before {display: block;content: " ";margin-top: -80px;height: 80px;visibility: hidden;}
.DeviceAvailabilityWrapper__content {background-color: #fafafa;padding: 60px 15px 50px;}
.DeviceAvailabilityStandard {text-align: center;}
.h2, .h3, .heading2, .heading3, h2, h3 {font-weight: 200;font-stretch: normal;line-height: 1.33;color: #1e1e1e;}
.h2, .heading2, h2 {font-size: 48px;}
.DeviceAvailabilityStandard__title {margin: 0 auto 24px;text-transform: uppercase;}
.DeviceAvailabilityStandard__subtitle {margin-bottom: 2px;}
.LinkButton.btn-link {font-size: inherit;line-height: inherit;text-transform: inherit;font-weight: inherit;vertical-align: baseline;display: inline;margin: 0;padding: 0;border: none;}
.Device {display: inline-block;float: none;vertical-align: top;}
.Device__logo {display: block;height: 72px;margin: 60px auto 30px;}
.body2, .body3 {font-stretch: normal;color: #1e1e1e;}
.body2 {font-weight: 400;font-size: 18px;line-height: 1.78;}
.Device__company {margin-bottom: 0;}
.body3, .body4 {font-size: 14px;line-height: 1.57;}
.body3 {font-weight: 300;}
.Device__description {margin-bottom: 5px;}
.Device__not-available {color: #3dc884;font-size: 13px;}
.DeviceAvailabilityStandard__location-legal {color: #aeb4bf;margin-top: 48px;font-size: 13px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit

Questions / Comments: