"app landing page template"
Bootstrap 4.1.1 Snippet by Nemra1

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="space-medium">
<div class="container">
<div class="row">
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
<div class="feature-block-v7 feature-block">
<div class="feature-icon text-brand bg-brand-light mb-5">
<i class="fas fa-paint-roller"></i>
</div>
<div class="feature-content">
<h2>Build better apps</h2>
<p class="lead">Donec malesuada eget elit vel posuere. Maecenas ullamcorper velit vel purus ullamcorper semperles fringilla. </p>
<hr class="m-t-30 m-b-30">
<p>Pellentesque hendrerit neque pur ras ut rutrum enim onec auctor, nisl vel ultricies placerat, purporta metus, sed cursus enim ante nec est.</p>
<p>Donec ante nibh hendrerit vitae sodales eget fficitur ac justo. Aenean porta vitae nisi eget venena aliquam odio euismod arcu tempus, id efficituposuere.</p>
<a href="#" class="btn btn-rounded btn-outline-primary">Get the app</a>
</div>
</div>
</div>
<div class="offset-xl-1 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="circle-1"></div>
<div class="feature-app-img">
<img src="https://jituchauhan.com/quanto/quanto/images/iphone-img-2.png" alt="App Landing Page Template - Quanto">
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center mt-4">
Created for <a href="https://jituchauhan.com/quanto/" target="_blank" class="text-primary">jituchauhan.com</a>
</div></div>
</div>
</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
body { font-family: 'Circular Std Book'; font-style: normal; font-weight: normal; font-size: 16px; line-height: 27px; color: #808294; -webkit-font-smoothing: antialiased; background: #f8f8fb; }
.body-bg { background-color: #fbfbfc; }
h1, h2, h3, h4, h5, h6 { color: #181825; margin: 0px 0px 15px 0px; font-family: 'Circular Std Book'; }
h1 { font-size: 42px; line-height: 54px; letter-spacing: -1px; }
h2 { font-size: 34px; line-height: 44px; letter-spacing: -1px; }
h3 { font-size: 26px; line-height: 33px; letter-spacing: -1px; }
h4 { font-size: 20px; line-height: 31px; }
h5 { font-size: 16px; line-height: 21px; }
h6 { font-size: 13px; line-height: 21px; }
.h2 { font-size: 35px; line-height: 48px; letter-spacing: -1px; }
.h3, h3 {
font-size: 26px;
line-height: 38px;
}
p { margin: 0px 0px 24px 0px; }
p:last-child { margin: 0px; }
a { color: #3544ee; }
a:hover { color: #202db8; text-decoration: none; }
a:active, a:hover { outline: 0; text-decoration: none; }
a.text-primary:focus, a.text-primary:hover {
color: #202db8!important;
}
.space-medium { padding-top: 100px; padding-bottom: 100px; }
.btn { font-size: 16px; padding: 11px 21px; border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color; transition: .3s ease; font-family: 'Circular Std Medium' !important; }
.btn-outline-primary { color: #3544ee; background-color: transparent; border-color: #3544ee; }
.btn-outline-primary:hover { color: #fff; background-color: #3544ee; border-color: #3544ee; }
.btn-outline-primary.focus, .btn-outline-primary:focus { color: #fff; background-color: #3544ee; border-color: #3544ee; box-shadow: 0 0 0 1px rgb(53, 68, 238); }
.btn-rounded { border-radius: 100px; }
.feature-block-v7 { }
.feature-block-v7.feature-block { margin-bottom: 30px; }
.feature-block-v7 .feature-content { }
.feature-block-v7 .feature-title { margin-bottom: 5px; font-size: 21px; }
.feature-block-v7 .feature-text { }
.feature-block-v7 .feature-icon { background-color: #e1e4fd; color: #3544ee; padding: 18px; font-size: 20px; display: block; text-align: center; width: 60px; height: 60px; margin-bottom: 30px; line-height: 1.5; border-radius: 100%; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 Angular
bootstrap 4.1.1 landing carousel
Responsive Invoice template
BS4 clean & simple invoice template

Questions / Comments: