<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Value App using bootstrap 4</title>
<meta name="description" content="Value App">
<meta name="keywords" content="Value App">
<!-- Meta information - for search engines -->
<meta property="og:title" content="Value App">
<meta property="og:type" content="website">
<meta property="og:url" content="#">
<meta property="og:image" content="imgs/ogimage.png">
<!-- 3rd party css files -->
<link rel="shortcut icon" href="https://sunlimetech.com/portfolio/valueapp/favicon.ico">
<link href="https://sunlimetech.com/portfolio/valueapp/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<!-- Internal css files -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- Header section -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-5">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/header.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/header.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/header.png" alt="Third slide">
</div>
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
<div class="col-sm-12 col-md-7 pt-4 text-sm-center text-md-left text-center">
<div class="header-right-contents pt-5">
<img class="img-fluid mb-5" src="https://sunlimetech.com/portfolio/valueapp/imgs/logo.png" alt="Value App" />
<h1 class="text-large pt-1 mb-5">Perfect app that makes your everyday life so much easier!</h1>
<p>
<button type="button" class="btn btn-outline-success btn-lg px-5 text-uppercase mr-md-4 mr-sm-0 btn-rounded strong mb-3">Download</button>
<button type="button" class="btn btn-outline-secondary btn-lg px-5 text-uppercase btn-rounded strong mb-3">Learn More</button>
</p>
<div class="icons">
<a href="#!"><i class="fa fa-apple fa-2x text-success mr-5"></i></a>
<a href="#!"><i class="fa fa-android fa-2x text-success mr-5"></i></a>
<a href="#!"><i class="fa fa-windows fa-2x text-success"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //Header section -->
<!-- Services section -->
<section id="services" class="bg-success text-white mt-1">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2 class="mt-4">Clean and simple Landing page for Apps</h2>
<p class="pt-2 pb-4">
Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum In publishing and graphic design, lorem ipsum is a a document or visual presentation.generator.
</p>
</div>
</div>
<div class="row text-center pt-4">
<div class="col-md-4 col-sm-6 mb-5">
<i class="fa fa-code fa-5x mb-4"></i>
<h3 class="pb-2">Very Smart</h3>
<p>Lorem Ipsum is simply Ipsum has been the industry's text of the printing and typesetting industry.</p>
</div>
<div class="col-md-4 col-sm-6 mb-5">
<i class="fa fa-desktop fa-5x mb-4"></i>
<h3 class="pb-2">Responsive</h3>
<p>Lorem Ipsum is simply Ipsum has been the industry's text of the printing and typesetting industry.</p>
</div>
<div class="col-md-4 col-sm-12 mb-5">
<i class="fa fa-circle fa-5x mb-4"></i>
<h3 class="pb-2">Crisp & clear</h3>
<p>Lorem Ipsum is simply Ipsum has been the industry's text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</section>
<!-- //Services section -->
<!-- Features section -->
<section id="features" class="bg-lgray">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 pt-4">
<div id="carouselExampleIndicators1" class="carousel slide features" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/features.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/features.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/features.png" alt="Third slide">
</div>
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
<div class="col-sm-12 col-md-6 pt-4">
<div class="header-right-contents">
<h4 class="text-gray text-xxlarge">Features availalbe with Easy perfect free app</h4>
<ul class="list-unstyled mt-5 feature-listing">
<li>
<span class="text-success text-large">Beautiful, modern design</span>
<p>Duis bibendum diam non erat facilaisis tincidunt</p>
</li>
<li>
<span class="text-success text-large">Easy to customize</span>
<p>Duis bibendum diam non erat facilaisis tincidunt</p>
</li>
<li>
<span class="text-success text-large">Developer Friendly</span>
<p>Duis bibendum diam non erat facilaisis tincidunt</p>
</li>
<li>
<span class="text-success text-large">Fully Responsive</span>
<p>Duis bibendum diam non erat facilaisis tincidunt</p>
</li>
</li>
</div>
</div>
</div>
</div>
</section>
<!-- //Features section -->
<!-- //Buy now section -->
<div class="desgned-by text-center p-5 bg-success text-white">
<a class="btn btn-danger btn-lg text-white" href="https://www.fiverr.com/sunlimetech/design-and-fix-your-bootstrap-4-issues" target="_blank" role="button">Buy now in $10</a>
</div>
<!-- //Buy now section -->
<!-- Testiminials section -->
<section id="testiminials">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center mb-2"><i class="fa fa-quote-left text-success"></i></h1>
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="https://sunlimetech.com/portfolio/valueapp/imgs/t-pic1.png" class="img-rounded">
</div>
<div class="testimonial-profile">
<h3 class="title">williamson</h3>
<span class="post">Web Developer</span>
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit ultrices mauris.
</p>
</div>
<div class="testimonial">
<div class="pic">
<img src="https://sunlimetech.com/portfolio/valueapp/imgs/t-pic2.png" class="img-rounded">
</div>
<div class="testimonial-profile">
<h3 class="title">williamson</h3>
<span class="post">Web Designer</span>
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit ultrices mauris.
</p>
</div>
<div class="testimonial">
<div class="pic">
<img src="https://sunlimetech.com/portfolio/valueapp/imgs/t-pic3.png">
</div>
<div class="testimonial-profile">
<h3 class="title">williamson</h3>
<span class="post">Logo Designer</span>
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit ultrices mauris.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //Testiminials section -->
<!-- Sunscription section -->
<section id="sunscription" class="bg-lgray">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<i class="fa fa-envelope fa-4x text-green mb-3"></i>
<h3 class="text-gray">Get Notified of any updates!</h3>
<p>Subscribe to our newsletter to be notified about new version release</p>
</div>
</div>
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<div class="input-group input-group-lg">
<input type="email" class="form-control" placeholder="sunlimetech@gmail.com" aria-label="Search for...">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Subscribe</button>
</span>
</div>
</div>
<div class="col-lg-3"></div>
</div>
</section>
<!-- //Sunscription section -->
<!-- Footer section -->
<section id="footer">
<footer>
<div class="container">
<div class="row flex-center">
<a href="#"><i class="fa fa-twitter fa-3x mr-4"></i></a>
<a href="#"><i class="fa fa-facebook fa-3x mr-4"></i></a>
<a href="#"><i class="fa fa-vimeo fa-3x mr-4"></i></a>
<a href="#"><i class="fa fa-pinterest-p fa-3x"></i></a>
<div class="col-sm-12 text-center pt-4">
<a href="#" class="text-medium mr-3">Terms of use</a><span class="mr-3">|</span>
<a href="#" class="text-medium mr-3">Support</a><span class="mr-3">|</span>
<a href="#" class="text-medium mr-3">Help</a>
</div>
</div>
</div>
</footer>
</section>
<!-- Footer section -->
<!-- Developed by section -->
<div class="desgned-by text-center p-3 bg-success text-white">
<p class="mb-0">Design and developed by <a href="https://www.sunlimetech.com" class="text-white" target="_blank" title="Web, andriod and IOS development">Sunlimetech</a> with <i class="fa fa-heart text-danger"></i></p>
</div>
<!-- Developed by section -->
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</html>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
color: #b2b2b2;
}
/************************************************************************/
/**************************** Helper Clases *****************************/
/************************************************************************/
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0 0 10px 0;
}
a,
a:visited {
color: #abafae !important;
webkit-transition: color 0.5s;
/* Safari */
transition: color 0.5s;
text-decoration: none !important;
}
a:hover,
a:focus {
color: #28a745 !important;
webkit-transition: color 0.5s;
/* Safari */
transition: color 0.5s;
text-decoration: none !important;
}
/************************************/
/************ Buttons ***************/
/************************************/
.btn-rounded{
border-bottom-left-radius: 25px !important;
border-bottom-right-radius: 25px !important;
border-top-left-radius: 25px !important;
border-top-right-radius: 25px !important;
border-width:2px;
}
/************************************/
/******* Border Classes ************/
/************************************/
.border-radius {
border-radius: 4px;
}
.no-radius {
border-radius: 0;
}
.border-blue {
border: 1px solid #3a74c4;
}
.border-black {
border: 1px solid #000000;
}
.border-grey {
border: 2px solid #eee;
}
.border-dashed {
border-style: dashed;
}
/************************************/
/******* Color clases default *****/
/************************************/
.text-green {
color: #28a745 !important;
}
.text-gray{
color: #b2b2b2 !important;
}
.text-white {
color: #ffffff !important;
}
.text-black {
color: #000000 !important;
}
/************************************/
/******* Background classes ********/
/************************************/
.bg-green {
background: #28a745 !important;
}
.bg-gray {
background: #b2b2b2 !important;
}
.bg-lgray {
background: #f8f8fa !important;
}
.bg-white {
background: #ffffff !important;
}
.bg-black {
background: #000000 !important;
}
/************************************/
/************ Font sizes ************/
/************************************/
.text-small {
font-size: 16px;
}
.text-xsmall {
font-size: 12px;
}
.text-medium {
font-size: 18px !important;
}
.text-large {
font-size: 28px !important;
}
.text-xlarge {
font-size: 32px !important;
}
.text-xxlarge {
font-size: 36px !important;
}
.text-xxxlarge {
font-size: 40px !important;
}
@media (max-width: 768px) {
.text-small {
font-size: 14px !important;
}
.text-medium {
font-size: 16px !important;
}
.text-large {
font-size: 24px !important;
}
.text-xlarge {
font-size: 28px !important;
}
.text-xxlarge {
font-size: 32px !important;
}
.text-xxxlarge {
font-size: 36px !important;
}
.heading {
max-width: 100% !important;
}
}
@media (max-width: 767px) {
}
/***********************************************/
/***************** General classes *************/
/***********************************************/
.strong {
font-weight: bold !important;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
section{
padding: 50px 0;
}
.icon-10x{
font-size:5rem;
}
/***********************************************/
/******************** Header *******************/
/***********************************************/
.carousel .carousel-inner .carousel-item img{
max-width:250px;
margin:0 auto;
}
.carousel.features .carousel-inner .carousel-item img{
max-width:350px;
margin:0 auto;
}
.carousel-indicators {
bottom: -30px;
}
.carousel-indicators .active {
background-color: #28a745;
}
.carousel-indicators li {
background-color: #b2b2b2;
}
.icons .fa{
webkit-transition: color 0.5s;
transition: color 0.5s;
}
.icons .fa:hover{
color: #b2b2b2 !important;
}
#footer .fa:hover{
color:#28a745 !important;
transition:0.5s ease all;
}
@media (max-width: 768px) {} @media (max-width: 767px) {}
/***********************************************/
/****************** Feature ********************/
/***********************************************/
ul.feature-listing li{
position: relative;
margin-left: 3.3em;
}
ul.feature-listing li:before{
position: absolute;
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* same as padding-left set on li */
width: 1.3em; /* same as padding-left set on li */
color:#ddd;
font-size:40px;
}
ul.feature-listing li:first-child:before{
content: "\f108"; /* FontAwesome Unicode */
}
ul.feature-listing li:nth-child(2):before{
content: "\f187"; /* FontAwesome Unicode */
}
ul.feature-listing li:nth-child(3):before{
content: "\f121"; /* FontAwesome Unicode */
}
ul.feature-listing li:last-child:before{
content: "\f10a"; /* FontAwesome Unicode */
}
@media (max-width: 768px) {} @media (max-width: 767px) {}
/***********************************************/
/***************** Page name : ****************/
/***********************************************/
@media (max-width: 768px) {} @media (max-width: 767px) {}
/***********************************************/
/******************** Footer *******************/
/***********************************************/
.footer {}
@media (max-width: 768px) {} @media (max-width: 767px) {}
.testimonial{ margin: 0 20px 50px; }
.testimonial .pic{
display: inline-block;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 15px 15px 0;
}
.testimonial .pic img{
width: 100%;
height: auto;
border-radius: 50%;
border: 1px solid #35b653;
padding: 2px;
}
.testimonial .testimonial-profile{
display: inline-block;
position: relative;
top: 15px;
}
.testimonial .title{
display: block;
font-size: 30px;
font-weight: bold;
color: #bababa;
text-transform: capitalize;
margin: 0;
}
.testimonial .post{
display: block;
font-size: 14px;
color: #28a745;
letter-spacing: 4px;
padding: 0 5px;
}
.testimonial .description{
padding: 20px 22px;
background: #28a745;
font-size: 15px;
color: #fff;
line-height: 25px;
margin: 0;
position: relative;
}
.testimonial .description:before,
.testimonial .description:after{
content: "";
border-width: 18px 0 0 18px;
border-style: solid;
border-color: #35b653 transparent transparent;
position: absolute;
bottom: -18px;
left: 0;
}
.testimonial .description:after{
border-width: 18px 18px 0 0;
left: auto;
right: 0;
}
.owl-theme .owl-controls{
margin-top: 10px;
margin-left: 30px;
}
.owl-theme .owl-controls .owl-buttons div{
margin: 7px;
padding: 2px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 50%;
background: #28a745 !important;
opacity: 1 !important;
}
.owl-prev:before,
.owl-next:before{
content: "\f053";
font-family: 'FontAwesome';
font-size: 20px;
color: #ffffff !important;
}
.owl-next:before{ content: "\f054"; }
$(document).ready(function() {
$("#testimonial-slider").owlCarousel({
items: 2,
itemsDesktop: [1000, 2],
itemsDesktopSmall: [979, 2],
itemsTablet: [768, 1],
pagination: false,
navigation: true,
navigationText: ["", ""],
autoPlay: true
});
});
