Bootstrap Snippet Mobile App Promotion using HTML CSS Bootstrap

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="container">
    <div class="row">
        <div class="col-sm-3 col-xs-12">
            <div class="phone">
                <img alt="" src="http://handsontek.net/demoimages/mobileapp/iphone5s-ns.png" class="img-responsive">
                <div class="iphone5-screen">                
                    <div class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="http://handsontek.net/demoimages/mobileapp/iphone5s-app1.jpeg" class="img-responsive">
                            </div>
                            <div class="item">
                                <img src="http://handsontek.net/demoimages/mobileapp/iphone5s-app2.jpeg" class="img-responsive">
                            </div>
                            <div class="item">
                                <img src="http://handsontek.net/demoimages/mobileapp/iphone5s-app3.jpeg" class="img-responsive">
                            </div>
                            <div class="item">
                                <img src="http://handsontek.net/demoimages/mobileapp/iphone5s-app4.jpeg" class="img-responsive">
                            </div>
                            <div class="item">
                                <img src="http://handsontek.net/demoimages/mobileapp/iphone5s-app5.jpeg" class="img-responsive">
                            </div>
                        </div>
                    </div>                 
                </div>
            </div>
        </div>
        <div class="col-sm-9 col-xs-12">
        <h2>Promote your mobile app using a bootstrap carrousel</h2>
        <p>Praesent congue iaculis pulvinar. Praesent sit amet consequat sem, nec scelerisque nisl.</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.phone {
    position: relative;
    margin-top: 15px;
}
.phone .iphone5-screen {
    left: 8.2%;
    overflow: none;
    position: absolute;
    right: 8.2%;
    top: 14.5%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Mobile App Promotion"
Bootstrap 3.3.0 Snippet by joao12ferreira

Related: See More

Questions / Comments:

"Mobile App Promotion" Bootstrap 3.3.0 Snippet by joao12ferreira

Related: See More

Questions / Comments:

"Mobile App Promotion"
Bootstrap 3.3.0 Snippet by joao12ferreira