"Devices"
Bootstrap 3.3.0 Snippet by sparkktv

<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"> <p class="Device__company body2" data-reactid="34">Amazon</p> <p class="Device__description body3" data-reactid="35">Fire TV & Fire TV Stick</p> <p class="Device__not-available hidden-md hidden-lg hidden-xl" data-reactid="36"></p></div> <div id="5" class="Device col-md-3 col-sm-4 col-xs-6" data-reactid="37"> <img class="Device__logo" src="//assetshuluimcom-a.akamaihd.net/h3o/landing/devices/apple-tv-logo.svg" alt="logo-apple-tv" data-reactid="38"> <p class="Device__company body2" data-reactid="39">Apple TV</p> <p class="Device__description body3" data-reactid="40">4th generation</p> <p class="Device__not-available hidden-md hidden-lg hidden-xl" data-reactid="41"></p></div> <div id="10" class="Device col-md-3 col-sm-4 col-xs-6" data-reactid="42"> <img class="Device__logo" src="//assetshuluimcom-a.akamaihd.net/h3o/landing/devices/chromecast-logo.svg" alt="logo-chromecast" data-reactid="43"> <p class="Device__company body2" data-reactid="44">Chromecast</p> <p class="Device__description body3" data-reactid="45"></p> <p class="Device__not-available hidden-md hidden-lg hidden-xl" data-reactid="46"></p></div> <div id="4" class="Device col-md-3 col-sm-4 col-xs-6" data-reactid="47"> <img class="Device__logo" src="//assetshuluimcom-a.akamaihd.net/h3o/landing/devices/xbox-logo.svg" alt="logo-xbox" data-reactid="48"> <p class="Device__company body2" data-reactid="49">Xbox</p> <p class="Device__description body3" data-reactid="50">Xbox One & Xbox 360</p> <p class="Device__not-available hidden-md hidden-lg hidden-xl" data-reactid="51"></p></div> <div id="8" class="Device col-md-3 col-sm-4 col-xs-6" data-reactid="52"> <img class="Device__logo" src="//assetshuluimcom-a.akamaihd.net/h3o/landing/devices/samsung-logo.svg" alt="logo-roku" data-reactid="53"> <p class="Device__company body2" data-reactid="54">Samsung</p> <p class="Device__description body3" data-reactid="55">Select TV models</p> <p class="Device__not-available hidden-md hidden-lg hidden-xl" data-reactid="56"></p></div></div> <div class="DeviceAvailabilityStandard__location-legal row" data-reactid="57"> <span data-reactid="58">Location data required to access content on mobile devices for any Live TV subscription.</span></div> <div class="row" data-reactid="59"></div></div></div></section></div></div>
.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;}

Related: See More


Questions / Comments: