"Netflix 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 ----------> <section data-category="media_players" class="device-slider-content"> <div class="container"><div class="row"><div class="one-half column"> <h3 class="fancy-header" data-i18n="media_players-device-title">PLUG AND PLAY</h3> <p data-i18n="media_players-device-description">The newest generation of media players and streaming sticks offer a fast, easy, and affordable way to watch Netflix on your TV.</p></div></div> <div class="device-logos grid-6 country-visible-us"> <a href="https://www.apple.com/appletv/" style="background-image: url(//d1qmdf3vop2l07.cloudfront.net/radioactive-shoelace.cloudvent.net/compressed/595f5470c301f7c5d5fad2d8ca524996.png)" title="Apple TV" data-cms-original-style="background-image: url(//devices.netflix.com/images/media_players/appletv_rev.png)">Apple TV</a> <a href="https://www.google.com/intl/en_us/chrome/devices/chromecast/index.html?utm_source=chromecast.com" style="background-image: url(//d1qmdf3vop2l07.cloudfront.net/radioactive-shoelace.cloudvent.net/compressed/a911be5f9fcbf42c9f464f6f5e2f9c8f.png)" title="Chromecast" data-cms-original-style="background-image: url(//devices.netflix.com/images/media_players/chromecast_logo.png)">Chromecast</a> <a href="https://www.amazon.com/b/?ie=UTF8&node=8521791011&ref_=fs_ods_fs_smp_cp" style="background-image: url(//d1qmdf3vop2l07.cloudfront.net/radioactive-shoelace.cloudvent.net/compressed/637b182f48a577618f825765b714eeda.png)" title="Fire TV" data-cms-original-style="background-image: url(//devices.netflix.com/uploads/firetv-1.png)">Fire TV</a> <a href="http://shield.nvidia.com/" style="background-image: url(//d1qmdf3vop2l07.cloudfront.net/radioactive-shoelace.cloudvent.net/compressed/7681cefd033d8339657018bad3e29911.png)" title="Nvidia Shield" data-cms-original-style="background-image: url(//devices.netflix.com/images/media_players/nvidia_shield_v.png)">Nvidia Shield</a> <a href="https://www.roku.com/" style="background-image: url(//d1qmdf3vop2l07.cloudfront.net/radioactive-shoelace.cloudvent.net/compressed/12c5bc7bb56b72d0ec359fab5d4e595a.png)" title="Roku" data-cms-original-style="background-image: url(//devices.netflix.com/uploads/roku-logo-white-3.png)">Roku</a><div></div></div></div></section>
.device-slider-content {display: block;} .device-slider-content {background: #000 url(//d1qmdf3vop2l07.cloudfront.net/radioactive-shoelace.cloudvent.net/compressed/efbc3eac19a10b943d5360eb7825c08f.jpg) bottom left no-repeat;background-size: auto;background-size: cover;color: #fff;position: relative;padding: 50px 0;} .device-slider-content .container, .device-slider-content .nrtv-banner-2017 .nrtv-header-wrapper-2017, .nrtv-banner-2017 .device-slider-content .nrtv-header-wrapper-2017 {min-height: 305px;} .container, .nrtv-banner-2017 .nrtv-header-wrapper-2017 {position: relative;width: 100%;max-width: 1100px;margin: 0 auto;padding: 0 20px;box-sizing: border-box;} .device-slider-content {color: #fff;} .one-half.column {width: 48%;} .column:first-child, .columns:first-child {margin-left: 0;} .device-slider li {width: 100%;box-sizing: border-box;display: inline-block;float: left;border-left: 1px solid #eee;position: relative;background-position: center 20%;background-repeat: no-repeat;background-size: auto 50px;} .device-slider li, .device-slider ul {height: 160px;} .device-slider li, .device-slider ul, .unstyled-list, footer li, footer ul, html.compatible-devices nav nav li, html.compatible-devices nav ul, nav nav li, nav ul {margin: 0;padding: 0;list-style: none;} .device-slider-content h3 {font-weight: 300;line-height: 1;font-size: 2.5rem;} .fancy-header {padding-left: 20px;border-left: 2px solid #e50914;line-height: 1 !important;font-weight: 400;} p {margin-bottom:2.5rem;margin-top:0;} .country-us .country-visible-us {display: inherit !important;} .device-logos {width: 300px;max-width: 400px;margin: 0 auto;position: absolute;right: 0;top: -50px;height: 405px;overflow: hidden;} .device-logos.grid-6 > a, .device-logos.grid-6 > div {height: 134px;} .device-logos > a, .device-logos > div {display: block;width: 49%;margin: 0 1px 1px 0;height: 80px;background: #000 no-repeat center;background-image: none;background-size: auto;background-size: 50% auto;opacity: .8;overflow: hidden;text-indent: -999px;float: left;} a {text-decoration: none;color: #e50914;} .device-logos > a:hover {background-color: #111;opacity: 1;}

Related: See More


Questions / Comments: