"App Screen"
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="//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>
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
32
33
34
35
36
37
.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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit
Login screen pure Bootstrap 4.0
Centered Horizontal and Vertical Login Screen
Full screen background cover page.

Questions / Comments: