"App Screen"
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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="content-section theme-light"> <div class="device-page container-fluid"> <div class="row hero"> <div class="hero-image hidden-xs"></div> <div class="copy col-xs-12 col-sm-7 col-md-6"> <h1 class="text-uppercase">Made for your favorite<br>connected devices</h1> <p class="text-bold">Whether you're between classes, at home with friends,<br/>or swapping vids at a party...</p> <ul> <li><a href="https://control.kochava.com/v1/cpi/click?CHA=ORI&campaign_id=kofullscreen-ios-prod56e6fd7fcbcbe480aecf202fcf&network_id=4351&device_id=device_id&site_id=1"><div class="store-icon apple-store"></div></a></li> <li><a href="https://control.kochava.com/v1/cpi/click?campaign_id=kofullscreen-android-prod56e708cf5992e4cb136849f7c2&network_id=4351&device_id=device_id&site_id=1&append_app_conv_trk_params=1"><div class="store-icon play-store"></div></a></li> </ul> </div> </div> <div class="row devices"> <div class="col-xs-12"> <div class="row device-list"> <div class="col-xs-12 col-sm-6 device-group"> <div class="hidden-xs col-sm-3 device-icon device-1"></div> <div class="col-sm-9 col-xs-12 device-info"> <h2 class="h3 text-alt device-group-title">Smart Phones</h2> <ul class="col-xs-12"> <li class="col-xs-6 device-group-item"> <span><strong>iPhone</strong></span> <p>4s+ (iOS 8+)<br>Available in <a href="https://control.kochava.com/v1/cpi/click?CHA=ORI&campaign_id=kofullscreen-ios-prod56e6fd7fcbcbe480aecf202fcf&network_id=4351&device_id=device_id&site_id=1">Apple App Store</a> </p> </li> <li class="col-xs-6 device-group-item"> <span><strong>Android</strong></span> <p>4.1+<br>Available in <a href="https://control.kochava.com/v1/cpi/click?campaign_id=kofullscreen-android-prod56e708cf5992e4cb136849f7c2&network_id=4351&device_id=device_id&site_id=1&append_app_conv_trk_params=1">Google Play</a></p> </li> </ul> </div> </div> <div class="col-xs-12 col-sm-offset-0 col-sm-6 device-group"> <div class="hidden-xs col-sm-3 device-icon device-2"></div> <div class="col-sm-9 col-xs-12 device-info"> <h2 class="h3 text-alt device-group-title">Tablets</h2> <ul class="col-xs-12"> <li class="col-xs-6 device-group-item"> <span><strong>iPad</strong></span> <p>2+, Air, Mini+ (iOS 8+)<br>Available in <a href="https://control.kochava.com/v1/cpi/click?CHA=ORI&campaign_id=kofullscreen-ios-prod56e6fd7fcbcbe480aecf202fcf&network_id=4351&device_id=device_id&site_id=1">Apple App Store</a></p> </li> <li class="col-xs-6 device-group-item"> <span><strong>Android</strong></span> <p>Samsung Galaxy Tabs, Google Nexus (4.4.2+)<br>Available in <a href="https://control.kochava.com/v1/cpi/click?CID=TAN&campaign_id=kofullscreen-android-prod56e708cf5992e6cecdcd838b94&network_id=4351&device_id=device_id&site_id=1">Google Play</a></p> </li> </ul> </div> </div> <div class="col-xs-12 col-sm-6 device-group"> <div class="hidden-xs col-sm-3 device-icon device-3"></div> <div class="col-sm-9 col-xs-12 device-info"> <h2 class="h3 text-alt device-group-title">Living Room Devices</h2> <ul class="col-xs-12"> <li class="col-xs-6 device-group-item"> <span><strong>Apple TV</strong></span> <p>4th Generation <br /> <a href="/activate">Activate Now</a></p> </li> <li class="col-xs-6 device-group-item"> <span><strong>Chromecast</strong></span> <p>Learn more about <a href="https://www.google.com/chromecast/tv/">Chromecast</a></p> </li> </ul> </div> </div> <div class="col-xs-12 col-sm-offset-0 col-sm-6 device-group"> <div class="hidden-xs col-sm-3 device-icon device-4"></div> <div class="col-sm-9 col-xs-12 device-info"> <h2 class="h3 text-alt device-group-title">Desktop</h2> <ul class="col-xs-12"> <li class="col-xs-6 device-group-item"> <span><strong>Mac OS</strong></span> <p>10.10+</p> </li> <li class="col-xs-6 device-group-item"> <span><strong>Windows</strong></span> <p>7, 8.1, 10+</p> </li> </ul> <p class="device-sub-text">Browsers: Latest versions of Chrome, Firefox, Safari and Edge; <br/>Microsoft Silverlight 4 plugin required for Windows 7 </p> </div> </div> <div class="col-xs-12 col-sm-6 device-group"> <div class="hidden-xs col-sm-3 device-icon device-5"></div> <div class="col-sm-9 col-xs-12 device-info"> <h2 class="h3 text-alt device-group-title">Additional Devices</h2> <ul class="col-xs-12"> <li class="col-xs-6 device-group-item"> <span><strong>iPod</strong></span> <p>Touch 5G<br>Available in <a href="https://control.kochava.com/v1/cpi/click?CHA=ORI&campaign_id=kofullscreen-ios-prod56e6fd7fcbcbe480aecf202fcf&network_id=4351&device_id=device_id&site_id=1">Apple App Store</a></p> </li> </ul> </div> </div> </div> </div> </div> </div>
.device-page{background: #f2f2f2;padding-top: 75px;} .container-fluid{margin-right: auto;margin-left: auto;padding-left: 15px;padding-right: 15px;} .device-page .hero{min-height: 325px;background: #d4d4d5;} .row{margin-left: -15px;margin-right: -15px;} .row::before{content: " ";display: table;} .device-page .hero .hero-image{width: 700px;height: 383px;background: url("https://fullscreen.com/assets/devices/hero-19ff22bccb88979ceb613b9513b534310d1990040d4f21efc36c4b369c6f2f3f.png") no-repeat center 16px;position: absolute;right: 3%;} .device-page .hero h1{padding: 0;margin: 0;font-weight: bold;} .device-page .hero .copy {padding: 60px 60px 50px;} .device-page .hero p:first-of-type{padding: 20px 0 0 0;} .device-page .hero p{padding: 0;margin: 0;} .text-bold{font-weight:700;} .device-page .hero ul{list-style:none;padding-top:20px;} .device-page .hero ul li{float:left;padding-right:10px;padding-bottom:10px;} .device-page .hero ul .store-icon.apple-store{background: url("https://fullscreen.com/assets/devices/apple-store-icon-3f0aee3c8064336ebc2037e8d4930b1e7ea369b2412288773da3bbd447c49683.png") no-repeat center center;} .device-page .hero ul .store-icon{width: 150px;height: 45px;} .device-page .hero ul .store-icon.play-store{background: url("https://fullscreen.com/assets/devices/play-store-icon-3ff5b25533fdae9a77cf919072d13c5b7550d85c04f0a72641daabc227255f5e.png") no-repeat center center;} .devices .device-list{padding: 90px 30px 0;} .devices .device-group{border-bottom: 2px solid #bebec0;margin: 0 2.5% 30px;min-height: 160px;padding: 0 0 15px;width: 45%;} .devices .device-group{margin-bottom:30px;} .devices .device-1, .devices .device-2{background-position: center top;} .devices .device-1{background: url("https://fullscreen.com/assets/devices/1-b2397ea1cb6981c33eab56b2c937e330769e9633c50e699b85170bcc82b66622.png") no-repeat center -2px;background-position-x: center;background-position-y: -2px;height: 100px;} .devices .device-group-title{margin-top: 0;text-transform: none;} .text-alt{font-family: "Colfax", Helvetica, Arial, sans-serif;text-transform: uppercase;font-weight: 700;} .devices .device-info ul{padding:0;} .devices .device-group-item{padding:0 10px 0 0;} .devices .device-info p{line-height:1.8;} .devices .device-2{background: url("https://fullscreen.com/assets/devices/2-98ed26db1eb4063cc1ff67f4a41954e2221616f8975c57c2c87e3dc77dfc2384.png") no-repeat center -2px;background-position-x: center;background-position-y: -2px;height: 100px;} .devices .device-3{background: url("https://fullscreen.com/assets/devices/3-635d864c584f92c63fe82e928bbdd086ac7d53b036bc207b3f941a7384569822.png") no-repeat center -2px;height: 100px;} .devices .device-4{background: url("https://fullscreen.com/assets/devices/4-3bab73747d4ee5ea700cc391c2fd4fe93bb1c52a17aa440cb00b8a07de79e9a5.png") no-repeat center -2px;height: 100px;} .device-sub-text{color: #797a7c;} .devices .device-5{background: url("https://fullscreen.com/assets/devices/5-447a92773937d953f95ff09523491924bcf31950aed9c8ebb2d6051f5bcf9d5e.png") no-repeat center -2px;height: 100px;} .devices .device-list a{font-weight:bold;}

Related: See More


Questions / Comments: