Feature 31
View Feature31 code
Awesome Extra Ordinary Flexibility
You can relay on our amazing features list and also our customer services will be great experience.
Target
Internet
survive
<div class="spacer bg-light feature31 wrap-feature31-box">
<!-- Row -->
<div class="row">
<div class="container">
<div class="col-lg-6">
<div class="" data-aos="fade-right" data-aos-duration="1200"> <span class="label label-info label-rounded">Feature 31</span>
<h2 class="title text-uppercase">Awesome Extra Ordinary Flexibility</h2>
<p class="op-8">You can relay on our amazing features list and also our customer services will be great experience.</p>
<div class="row m-t-30">
<div class="col-md-4">
<div class="card card-shadow">
<div class="card-body text-center text-uppercase"> <i class="icon-Car-Wheel display-5 text-success"></i>
<h6 class="m-t-10 font-medium">Target</h6>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-shadow">
<div class="card-body text-center text-uppercase"> <i class="icon-Mouse-3 display-5 text-success"></i>
<h6 class="m-t-10 font-medium">Internet</h6>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-shadow">
<div class="card-body text-center text-uppercase"> <i class="icon-Target display-5 text-success"></i>
<h6 class="m-t-10 font-medium">survive</h6>
</div>
</div>
</div>
</div> <a class="btn btn-info-gradiant btn-md btn-arrow m-t-20" data-toggle="collapse" href="#f31"><span>View Feature31 code <i class="ti-arrow-right"></i></span></a> </div>
</div>
</div>
<div class="col-lg-6 right-image"> <img src="../assets/images/features/feature31/img1.jpg" class="half-radius" alt="wrappixel" data-aos="fade-left" data-aos-duration="3000" data-aos-offset="500" /> </div>
<!-- Column -->
</div>
</div>
.wrap-feature31-box {
overflow: hidden;
position: relative;
}
.wrap-feature31-box .half-radius {
border-radius: 62% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.wrap-feature31-box .right-image {
position: absolute;
right: 0px;
text-align: center;
bottom: -60px;
}
Feature 32
Awesome with Extra Ordinary Flexibility
You can relay on our amazing features list and also our customer services will be greatexperience for you without doubt and in no-time and with great quality for design.
View Feature32 code
<div class="spacer feature32">
<div class="container">
<div class="row wrap-feature-32">
<div class="col-md-6"> <img src="../assets/images/features/feature32/img1.jpg" class="img-responsive" data-aos="fade-right" data-aos-duration="3000" data-aos-offset="300"> </div>
<div class="col-md-6 align-self-center" data-aos="fade-left" data-aos-duration="3000" data-aos-offset="300"> <span class="label label-info label-rounded">Feature 32</span>
<h2 class="title m-t-20">Awesome with Extra Ordinary Flexibility</h2>
<p class="m-t-30">You can relay on our amazing features list and also our customer services will be greatexperience for you without doubt and in no-time and with great quality for design.</p> <a class="btn btn-info-gradiant btn-md btn-rounded btn-arrow m-t-20" data-toggle="collapse" href="#f32"><span>View Feature32 code <i class="ti-arrow-right"></i></span></a> </div>
</div>
</div>
</div>
No CSS Required.
Feature 33
Awesome Extra Ordinary Flexibility
You can relay on our amazing features list and also our customer services will be greatexperience for you without doubt and in no-time and with great quality for design. View Feature33 code
INTRO Play the video
<div class="spacer feature33 b-t p-b-0">
<div class="container">
<div class="row wrap-feature-33">
<div class="col-lg-6 align-self-center"> <span class="label label-danger label-rounded">Feature 33</span>
<h2 class="title text-uppercase">Awesome Extra Ordinary Flexibility</h2>
<p class="m-t-30">You can relay on our amazing features list and also our customer services will be greatexperience for you without doubt and in no-time and with great quality for design.</p>
<div class="play-btn"> <span class="display-1">INTRO</span> <a href="#"><span class="btn btn-circle btn-danger btn-md m-r-20"><i class="fa fa-play"></i></span>Play the video</a> </div>
</div>
<div class="col-lg-6"><img src="../assets/images/features/feature33/img1.jpg" class="img-fluid" data-aos="fade-up" data-aos-duration="3000" data-aos-offset="300" /></div>
</div>
</div>
</div>
.wrap-feature-33 .play-btn {
position: relative;
}
.wrap-feature-33 .play-btn span.display-1 {
font-weight: 500;
opacity: 0.15;
}
.wrap-feature-33 .play-btn a {
position: absolute;
left: 40px;
top: 20px;
color: #263238;
font-weight: 500;
}
.wrap-feature-33 .play-btn a span {
-webkit-box-shadow: 2px 8px 20px rgba(255, 77, 126, 0.5);
box-shadow: 2px 8px 20px rgba(255, 77, 126, 0.5);
}
.wrap-feature-33 .play-btn a:hover {
color: #ff4d7e;
}
Feature 34
Awesome Extra Ordinary Flexibility
You can relay on our amazing features list and also our customer services will be great experience.
<div class="spacer bg-light feature34 wrap-feature34-box">
<!-- Row -->
<div class="row ">
<div class="col-lg-6 left-image"> <img src="../assets/images/features/feature34/img1.png" class="img-fluid" alt="wrappixel" data-aos="fade-down" data-aos-duration="3000" data-aos-offset="500" /> </div>
<div class="container">
<div class="col-lg-6 ml-auto">
<div class="" data-aos="fade-right" data-aos-duration="1200"> <span class="label label-info label-rounded">Feature 34</span>
<h2 class="title text-uppercase">Awesome Extra Ordinary Flexibility</h2>
<p class="op-8">You can relay on our amazing features list and also our customer services will be great experience.</p>
<div class="row m-t-30">
<div class="col-md-12">
<div class="card card-shadow">
<div class="card-body">
<div class="row p-20">
<div class="col-6 b-r">
<h2 class="m-b-0 font-light">6455</h2>
<h6 class="text-muted">PROJECTS</h6>
</div>
<div class="col-6 text-right b-l">
<h2 class="m-b-0 font-light">85.5%</h2>
<h6 class="text-muted">Sucess Rate</h6>
</div>
<div class="col-lg-12 m-t-20"> <a class="btn btn-success-gradiant btn-md btn-block btn-arrow m-t-20" data-toggle="collapse" href="#f34"><span>View Feature34 code <i class="ti-arrow-right"></i></span></a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
</div>
</div>
.wrap-feature34-box {
overflow: hidden;
position: relative;
}
.wrap-feature34-box .left-image {
position: absolute;
left: -15px;
text-align: left;
top: 0px;
}
Feature 35
Awesome Extra Ordinary Flexibility
You can relay on our amazing features list and also our customer services will be greatexperience for you without doubt and in no-time and with great quality for design.
View Feature35 code
<div class="spacer feature35 wrap-feature35-box">
<div class="row">
<div class="col-lg-5 col-md-5 align-self-center">
<div class="card max-500 pull-right">
<div class="card-body"> <span class="label label-success label-rounded">Feature 35</span>
<h2 class="title text-uppercase">Awesome Extra Ordinary Flexibility</h2>
<p class="m-t-30">You can relay on our amazing features list and also our customer services will be greatexperience for you without doubt and in no-time and with great quality for design.</p> <a class="btn btn-success-gradiant btn-md btn-arrow m-t-20" data-toggle="collapse" href="#f35"><span>View Feature35 code <i class="ti-arrow-right"></i></span></a> </div>
</div>
</div>
<div class="col-lg-7 col-md-7">
<div class="feature-35-owl owl-carousel owl-theme">
<div class="item">
<a href="javascript:void(0)"><img src="../assets/images/features/feature35/img1.jpg" alt="wrappixel" class="img-fluid" />
<h4>Comfort</h4>
</a>
</div>
<div class="item">
<a href="javascript:void(0)"><img src="../assets/images/features/feature35/img2.jpg" alt="wrappixel" class="img-fluid" />
<h4>Health</h4>
</a>
</div>
<div class="item">
<a href="javascript:void(0)"><img src="../assets/images/features/feature35/img1.jpg" alt="wrappixel" class="img-fluid" />
<h4>Fitness</h4>
</a>
</div>
<div class="item">
<a href="javascript:void(0)"><img src="../assets/images/features/feature35/img2.jpg" alt="wrappixel" class="img-fluid" />
<h4>Gym</h4>
</a>
</div>
<div class="item">
<a href="javascript:void(0)"><img src="../assets/images/features/feature35/img1.jpg" alt="wrappixel" class="img-fluid" />
<h4>Energy</h4>
</a>
</div>
</div>
</div>
</div>
</div>
.wrap-feature35-box .feature-35-owl .item {
position: relative;
}
.wrap-feature35-box .feature-35-owl .item h4 {
position: absolute;
bottom: 20px;
left: 30px;
color: #ffffff;
text-transform: uppercase;
}
Put this script src="../assets/plugins/owl-carousel/dist/owl.carousel.min.js"
Also initialize this script:
$('.feature-35-owl').owlCarousel({
loop: true,
margin: 30,
responsiveClass: true,
responsive: { 0:{ items:1, nav:false }, 1000:{ items:2, nav:false }, 1650:{ items:3, nav:false, loop:false } }
});
Feature 36
Awesome Features
You can relay on our amazing features
<div class="spacer feature36 bg-light wrap-feature36-box" style="background-image:url(../assets/images/features/feature36/img1.png);">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-7 text-center"> <span class="label label-success label-rounded">Feature 36</span>
<h2 class="title text-uppercase">Awesome Features</h2>
<h6 class="subtitle">You can relay on our amazing features</h6>
</div>
</div>
<div class="row ">
<div class="col-lg-8">
<div class="row">
<div class="col-md-5 m-t-40">
<h3 class="text-uppercase title stick-bottom">Comfort<span class="bg-success-gradiant"></span></h3>
<p>You can relay on our amazing features list and also our customer services will be great</p> <a class="btn btn-success-gradiant btn-md btn-arrow m-t-20" data-toggle="collapse" href="#f36"><span>Get Code <i class="ti-arrow-right"></i></span></a> </div>
<div class="col-md-5 ml-auto m-t-40">
<h3 class="text-uppercase title stick-bottom">Saftey<span class="bg-success-gradiant"></span></h3>
<p>You can relay on our amazing features list and also our customer services will be great</p> <a class="btn btn-success-gradiant btn-md btn-arrow m-t-20" data-toggle="collapse" href="#f36"><span>Get Code <i class="ti-arrow-right"></i></span></a> </div>
</div>
</div>
</div>
</div>
</div>
.wrap-feature36-box {
background-position: right top;
background-repeat: no-repeat;
}
Feature 36
Awesome Extra Ordinary Flexibility
You can relay on our amazing features list and also our customer services will be greatexperience for you without doubt and in no-time and with great quality for design.
Awesome & cool Features
Our amazing features
<div class="spacer feature37 wrap-feature37-box">
<div class="row">
<div class="col-lg-5"> <img src="../assets/images/features/feature37/img1.jpg" alt="wrapkit" class="img-fluid" /> </div>
<div class="col-lg-7 align-self-center">
<div class="card max-600">
<div class="card-body"> <span class="label label-info label-rounded">Feature 36</span>
<h2 class="title text-uppercase">Awesome Extra Ordinary Flexibility</h2>
<p class="m-t-30">You can relay on our amazing features list and also our customer services will be greatexperience for you without doubt and in no-time and with great quality for design.</p>
<div class="card card-shadow">
<div class="card-body">
<div class="d-flex p-10">
<div class="m-r-20 align-self-center hidden-md-down"><i class="text-success-gradiant fa fa-cloud display-5"></i></div>
<div class="m-r-10 align-self-center">
<h5 class="m-b-0">Awesome & cool Features </h5>
<h6 class="subtitle">Our amazing features </h6>
</div>
<div class="ml-auto align-self-center"><a class="btn btn-info-gradiant btn-rounded btn-md btn-arrow" data-toggle="collapse" href="#f37"><span>Get Code <i class="ti-arrow-right"></i></span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
No CSS Required.
Feature 38
Awesome Extra Ordinary Flexibility
You can relay on our amazing features list and also our customer services will be great. View Feature38 code
<div class="feature37 wrap-feature38-box">
<div class="row bg-orange">
<div class="col-lg-6 po-absolute"> <img src="../assets/images/features/feature38/img1.png" class="img-fluid" /> </div>
<div class="container">
<div class="row spacer">
<div class="col-lg-6">
<div class="p-20"> <span class="label label-info label-rounded">Feature 38</span>
<h2 class="title text-white text-uppercase">Awesome Extra Ordinary Flexibility</h2>
<p class="text-white op-8">You can relay on our amazing features list and also our customer services will be greatexperience for you without</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card card-shadow">
<div class="container p-20">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="d-flex no-block m-t-10 m-b-10">
<div class="display-4 m-r-20"><i class="icon-Windows-2 text-success-gradiant"></i></div>
<div class="">
<h2 class="m-b-0 font-light">6455</h2>
<h6 class="subtitle">Projects</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="d-flex no-block m-t-10 m-b-10">
<div class="display-4 m-r-20"><i class="icon-Starfish text-success-gradiant"></i></div>
<div class="">
<h2 class="m-b-0 font-light">85.5%</h2>
<h6 class="subtitle">Success</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="d-flex no-block m-t-10 m-b-10">
<div class="display-4 m-r-20"><i class="icon-Add-User text-success-gradiant"></i></div>
<div class="">
<h2 class="m-b-0 font-light">354</h2>
<h6 class="subtitle">Users</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.wrap-feature38-box .po-absolute {
right: 0px;
z-index: 1;
}
6455
Projects
85.5%
Success
354
Users
Feature 39
View Feature39 code
Awesome Extra Ordinary Flexibility
You can relay on our amazing features list and also our customer services will be greatexperience for you without
Payment and exchange
You can relay on our amazing features
Notes and organising
You can relay on our amazing features
Language & Input Tools
You can relay on our amazing features
<div class="feature39 spacer wrap-feature39-box">
<div class="container">
<div class="row">
<div class="col-lg-6"><img src="../assets/images/features/feature39/img1.jpg" class="img-fluid" alt="wrapkit" /></div>
<div class="col-lg-6">
<div class="card-body"> <span class="label label-success label-rounded">Feature 39</span>
<h2 class="title text-uppercase">Awesome Extra Ordinary Flexibility</h2>
<p class="m-t-40 m-b-40">You can relay on our amazing features list and also our customer services will be greatexperience for you without</p>
<!-- column -->
<div class="d-flex no-block m-b-40">
<div class="display-4 m-r-20"><i class="icon-Paypal text-success-gradiant"></i></div>
<div>
<h4>Payment and exchange</h4>
<h6 class="subtitle">You can relay on our amazing features</h6>
</div>
</div>
<!-- column -->
<div class="d-flex no-block m-b-40">
<div class="display-4 m-r-20"><i class="icon-Evernote text-success-gradiant"></i></div>
<div>
<h4>Notes and organising</h4>
<h6 class="subtitle">You can relay on our amazing features</h6>
</div>
</div>
<!-- column -->
<div class="d-flex no-block m-b-40">
<div class="display-4 m-r-20"><i class="icon-Google-Drive text-success-gradiant"></i></div>
<div>
<h4>Language & Input Tools</h4>
<h6 class="subtitle">You can relay on our amazing features</h6>
</div>
</div> <a class="btn btn-success-gradiant btn-md btn-arrow" data-toggle="collapse" href="#f39"><span>View Feature39 code <i class="ti-arrow-right"></i></span></a>
</div>
</div>
</div>
</div>
</div>
.wrap-feature39-box .col-lg-6 > img {
margin-left: -40px;
}
Feature 40
Awesome Extra Ordinary Flexibility
You can relay on our amazing features list and also our customer services will be greatexperience for you without
View Feature40 code
<div class="feature40 spacer wrap-feature40-box" style="background-image:url(../assets/images/features/feature40/img1.jpg), url(../assets/images/features/feature40/img2.jpg);">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body"> <span class="label label-danger label-rounded">Feature 40</span>
<h2 class="title text-uppercase">Awesome Extra Ordinary Flexibility</h2>
<p class="m-t-40 m-b-40">You can relay on our amazing features list and also our customer services will be greatexperience for you without</p> <a class="btn btn-info-gradiant btn-md btn-rounded btn-arrow" data-toggle="collapse" href="#f40"><span>View Feature40 code <i class="ti-arrow-right"></i></span></a>
</div>
</div>
</div>
<div class="col-lg-6"> <img src="../assets/images/features/feature40/img3.jpg" alt="wrapkit" class="img-fluid rounded" /> </div>
</div>
</div>
</div>
.wrap-feature40-box {
background-position: left top, top right;
background-repeat: no-repeat, no-repeat;
}
