<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Synergy</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="assets/css/font-awesome.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/layout.css" rel="stylesheet">
<link href="assets/css/an.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!--nav-->
<!-- Code's messsy, basic layout for a small project I'm doing. Follow me on twitter @taylorgrendel for free pie!-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="assets/images/logo.png" width="30%">
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="testid">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Service<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" style="background-color: #fc7676;">
<li><a href="#">Single Services</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Gallery<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" style="background-color: #fc7676;">
<li><a href="#">Grid Gallery</a></li>
<li class="divider"></li>
<li><a href="#">Grid Without Padding Gallery</a></li>
<li class="divider"></li>
<li><a href="#">Cobbles Gallery</a></li>
<li class="divider"></li>
<li><a href="#">Masonry Gallery</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" style="background-color: #fc7676;">
<li><a href="#">Blog Post</a></li>
</ul>
</li>
<li><a href="#">Pages</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav> <!--nav end-->
<div id="startchange"></div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
</div>
<!--1st parallex images-->
<div class="content-space-one">
<div id="particles-js">
<div class="csot">
<h1 class="sd">Delivering Cost-Effective</h1>
<div class="page-break"></div>
<div class="sub">
<p>Software Solutions</p>
<button class="button button2">Get Started</button>
<button class="button button3">Learn More</button>
</div>
</div>
</div>
</div> <!--1st parallex images end-->
<!--add with pic-->
<div class="container">
<div row class="vdotxt">
<div class="col-md-6" >
<!-- text with vdo -->
<header>
<video autoplay playsinline muted loop preload poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/oceanshot.jpg">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ocean-small.webm" />
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" />
</video>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%" >
<rect x="0" y="0" width="100%" height="100%" />
<text x="72" y="30">
Get an App Now!
</text>
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" />
</svg>
</header>
<!-- text with vdo end -->
<h1 class="hd"> Mobile and SMS Applications</h1>
<p class="ad"> APP.Software has extensive experience in developing custom mobile and SMS software products. We have an app for your every mobile need! </p>
<div class="pl">
<a class="market-link" href="#">
<img src="assets/images/glep.png"></a>
<a class="market-link" href="#">
<img src="assets/images/ip.png"></a>
</div>
</div>
<div class="col-md-6 pic" >
<img src="assets/images/ad1.jpg" style="padding-top: 94px;"></div>
</div>
</div>
<div class="bk">
<div class="row">
<div class="col-md-6 part1"></div>
<div class="col-md-6 part2">
<h1 class="hd1">Result-Driven<br> Custom Software<br> Development</h1>
<p class="ad1"> APP.Software has extensive experience in developing custom mobile and SMS software products. We have an app for your every mobile need! </p>
<button class="button4 button4">Read More</button>
</div>
</div>
</div>
<div class="container ftr">
<h1 class="featurehead">Software Services</h1>
<div class="row">
<div class="feature-col col-lg-4 col-xs-12">
<div class="card card-block text-center">
<div>
<div class="feature-icon">
<span class=" fa fa-align-center"></span>
</div>
</div>
<div class="ft">
<h3>
Enterprise App Development
</h3>
<p class="text">
Years of experience and skills allow us to easily develop the most complex enterprise app.
</p>
</div>
</div>
</div>
<div class="feature-col col-lg-4 col-xs-12">
<div class="card card-block text-center">
<div>
<div class="feature-icon">
<span class=" fa fa-mobile-phone"></span>
</div>
</div>
<div class="ft">
<h3>
Mobile App Development
</h3>
<p class="text">
We have developed hundreds of amazingly productive apps for smartphones since 2005.
</p>
</div>
</div>
</div>
<div class="feature-col col-lg-4 col-xs-12">
<div class="card card-block text-center">
<div>
<div class="feature-icon">
<span class=" fa fa-desktop"></span>
</div>
</div>
<div class="ft">
<h3>
Software Testing and QA
</h3>
<p class="text">
All our applications are thoroughly tested using the latest QA technologies.
</p>
</div>
</div>
</div>
</div> <!-- 1st row end -->
<div class="row">
<div class="feature-col col-lg-4 col-xs-12">
<div class="card card-block text-center">
<div>
<div class="feature-icon">
<span class=" fa fa-code"></span>
</div>
</div>
<div class="ft">
<h3>
Open Source Development
</h3>
<p class="text">
Most software solutions we develop are open source for better customizability
</p>
</div>
</div>
</div>
<div class="feature-col col-lg-4 col-xs-12">
<div class="card card-block text-center">
<div>
<div class="feature-icon">
<span class=" fa fa-share-alt"></span>
</div>
</div>
<div class="ft">
<h3>
SharePoint Development
</h3>
<p class="text">
SharePoint is a perfect platform for business software development and support.
</p>
</div>
</div>
</div>
<div class="feature-col col-lg-4 col-xs-12">
<div class="card card-block text-center">
<div>
<div class="feature-icon">
<span class="fa fa-gear"></span>
</div>
</div>
<div class="ft">
<h3>
QA Automation Services
</h3>
<p class="text">
These services optimise and simplify routine testing with a minimum sets of scripts.
</p>
</div>
</div>
</div>
</div> <!-- 2nd row end -->
</div> <!-- container end -->
<div class="row">
<!-- pricing table -->
<h1 class="pricingtableheader">Pricing Plans</h1>
<div class="columns">
<ul class="price">
<li class="header">Basic</li>
<li class="grey">$ 9.99 / year</li>
<li>10GB Storage</li>
<li>10 Emails</li>
<li>10 Domains</li>
<li>1GB Bandwidth</li>
<li class="grey"><a href="#" class="pricingbutton">Sign Up</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header" style="background-color:#4CAF50">Pro</li>
<li class="grey">$ 24.99 / year</li>
<li>25GB Storage</li>
<li>25 Emails</li>
<li>25 Domains</li>
<li>2GB Bandwidth</li>
<li class="grey"><a href="#" class="pricingbutton">Sign Up</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Premium</li>
<li class="grey">$ 49.99 / year</li>
<li>50GB Storage</li>
<li>50 Emails</li>
<li>50 Domains</li>
<li>5GB Bandwidth</li>
<li class="grey"><a href="#" class="pricingbutton">Sign Up</a></li>
</ul>
</div>
<!-- pricing table end -->
</div> <!-- row end -->
<div class="softwarecounter">
<div class="row">
<!-- counter -->
<section id="counter" class="counter">
<div class="main_counter_area">
<div class="overlay p-y-3">
<div class="container">
<div class="row">
<div class="main_counter_content text-center white-text wow fadeInUp">
<div class="col-md-3">
<div class="single_counter p-y-2 m-t-1">
<i class="fa fa-heart m-b-1"></i>
<h2 class="statistic-counter">100</h2>
<p>Love Our Team</p>
</div>
</div>
<div class="col-md-3">
<div class="single_counter p-y-2 m-t-1">
<i class="fa fa-check m-b-1"></i>
<h2 class="statistic-counter">400</h2>
<p>Check Our</p>
</div>
</div>
<div class="col-md-3">
<div class="single_counter p-y-2 m-t-1">
<i class="fa fa-refresh m-b-1"></i>
<h2 class="statistic-counter">312</h2>
<p>repeat client</p>
</div>
</div>
<div class="col-md-3">
<div class="single_counter p-y-2 m-t-1">
<i class="fa fa-beer m-b-1"></i>
<h2 class="statistic-counter">480</h2>
<p>Pizzas Ordered</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- counter end -->
</div> <!-- row end -->
</div> <!-- counter div end -->
<!-- ===========================================================
java script
============================================================= -->
<!-- for counter-->
<script type="text/javascript">
jQuery('.statistic-counter').counterUp({
delay: 10,
time: 2000
});
</script>
<!--for nav-->
<script type="text/javascript">
/*$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 50);
});*/
window.onscroll = function(){
//console.log(document.documentElement.scrollTop);
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
//document.getElementById("testid li a").style.color = "red";
document.getElementsByTagName("a")[1].style.color = "black";
document.getElementsByTagName("a")[2].style.color = "black";
document.getElementsByTagName("a")[3].style.color = "black";
document.getElementsByTagName("a")[4].style.color = "black";
document.getElementsByTagName("a")[5].style.color = "black";
document.getElementsByTagName("a")[5].style.color = "black";
document.getElementsByTagName("a")[6].style.color = "black";
document.getElementsByTagName("a")[7].style.color = "black";
document.getElementsByTagName("a")[8].style.color = "black";
document.getElementsByTagName("a")[9].style.color = "black";
document.getElementsByTagName("a")[10].style.color = "black";
document.getElementsByTagName("a")[11].style.color = "black";
document.getElementsByTagName("a")[12].style.color = "black";
document.getElementsByTagName("a")[13].style.color = "black";
document.getElementsByTagName("a")[14].style.color = "black";
//console.log(document.documentElement.scrollTop);
}else{
//document.getElementById("testid").style.color = "black";
document.getElementsByTagName("a")[1].style.color = "white";
document.getElementsByTagName("a")[2].style.color = "white";
document.getElementsByTagName("a")[3].style.color = "white";
document.getElementsByTagName("a")[4].style.color = "white";
document.getElementsByTagName("a")[5].style.color = "white";
document.getElementsByTagName("a")[6].style.color = "white";
document.getElementsByTagName("a")[7].style.color = "white";
document.getElementsByTagName("a")[8].style.color = "white";
document.getElementsByTagName("a")[9].style.color = "white";
document.getElementsByTagName("a")[10].style.color = "white";
document.getElementsByTagName("a")[11].style.color = "white";
document.getElementsByTagName("a")[12].style.color = "white";
document.getElementsByTagName("a")[13].style.color = "white";
document.getElementsByTagName("a")[16].style.color = "white";
}
}
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/index.js"></script>
<script src="assets/js/index2.js"></script> <!-- for particle -->
<script src="assets/js/index3.js"></script> <!-- for ocean text -->
</body>
</html>
/* navbar */
.navbar-default {
background-color: transparent;
border-color: transparent;
margin-bottom: 0px;
position: fixed;
width: 100%;
border-radius: 0px;
z-index: 10007;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
text-shadow: 2px 2px 5px #d1d1d1;
}
.content-block-one {
padding: 30px;
margin-bottom: 0px;
color: inherit;
background-color: #eee;
}
.content-block-one h1,
.content-block-one .h1 {
color: inherit;
}
.content-block-one p {
margin-bottom: 15px;
font-size: 21px;
font-weight: 200;
}
.content-block-one > hr {
border-top-color: #d5d5d5;
}
.container .content-block-one {
border-radius: 6px;
}
.content-block-one .container {
max-width: 100%;
}
@media screen and (min-width: 768px) {
.content-block-one {
padding-top: 48px;
padding-bottom: 48px;
}
.container .content-block-one {
padding-right: 60px;
padding-left: 60px;
}
.content-block-one h1,
.content-block-one .h1 {
font-size: 63px;
}
}
.content-space-one {
padding: 0px;
margin-bottom: 10px;
background: url(../images/bc.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:0px;
padding-bottom:0px;
opacity: 0.8;
filter: alpha(opacity=80);
}
.csot{
color: #fff;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: #f91111;
color: black;
text-shadow: 2px 2px 5px red;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
.button3 {
background-color: inherit;
color: #f91111;
border: 2px solid #f44336;
text-shadow: 2px 2px 5px #000;
}
.button3:hover {
background-color: #f44336;
color: white;
}
.box-layout-1{
top: 50%;
bottom: 0;
transform: skew(-26deg);
content: '';
position: absolute;
right: 0;
background: #e1efe9;
width: 100vw;
z-index: -1;
pointer-events: none;
}
.sd{
font-size:50px;
text-align: center;
text-shadow: 2px 2px 5px #e0f3ff;
padding: 17px;
}
.sub{
margin-top:32px;
text-shadow: 2px 2px 5px #335d7c;
}
.hd{
font-size:2em;
text-align: center;
text-shadow: 2px 2px 5px #86aecc;
}
.ad{
font-size: 20px;
text-align: center;
margin-top: 100px;
text-shadow: 2px 2px 5px #d1d1d1;
line-height: 2;
}
.hd1{
padding-top: 92px;
color: #fff;
font-size:5em;
text-align: center;
text-shadow: 2px 2px 5px #86aecc;
line-height: 85px;
}
.ad1{
color: #fff;
padding-top: 1px;
font-size: 20px;
text-align: center;
margin-top: 50px;
text-shadow: 2px 2px 5px #d1d1d1;
line-height: 2;
margin-bottom: 20px;
}
.ad2{
font-size: 20px;
text-align: center;
margin-top: 100px;
text-shadow: 2px 2px 5px #d1d1d1;
line-height: 2;
color: #fff;
}
.add2{
/* background: url(../images/bci.jpg) no-repeat center center fixed; */
width: 100%;
color:#fff;
font-size:2em;
text-align: center;
text-shadow: 2px 2px 5px #86aecc;
}
.homeheading{
text-align: center;
font-size:10px;
}
.fst{
text-align: center;
}
.pic{
margin-top:100px;
}
.pl{
margin-top:100px;
margin-bottom: 100px;
}
/* ==================================================
Features Styling
================================================== */
.ftr{
margin-bottom:100px;
}
.features {
padding-bottom: 5px;
margin-top: 200px;
}
.features h2 {
color: #199EB8;
}
.feature-col {
display: table;
padding-bottom: 17px;
margin-top:48px;
}
.feature-col > div > div {
display: table-cell;
vertical-align: middle;
}
.feature-col > div > div:last-child {
padding-left: 20px;
}
.feature-col .feature-icon {
width: 70px;
height: 70px;
margin-bottom: 15px;
/* background: #199EB8;*/
color: #FF6B6B;
font-size: 40px;
text-align: center;
line-height: 70px;
border-radius: 50%;
display: inline-block;
margin-left: 163px;
}
.feature-col h3 {
color: #199EB8;
margin-bottom: 38px;
font-family: "Space Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
font-weight: 400;
}
.feature-col p {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #999;
letter-spacing: .05em;
margin-bottom: 50px;
}
.ft{
float: left;
border: 1px solid #eaeced;
border-top:0px;
}
.featurehead{
font-size:50px;
text-align: center;
text-shadow: 2px 2px 5px #a2a7b0;
padding: 17px;
margin-bottom: 50px;
color:#ff6b6b;
}
/*==========================================================
counter section style
============================================================*/
.p-y-2 {
padding-top: 28px;
padding-bottom: 28px;
}
.p-y-3 {
padding-top: 45px;
padding-bottom: 45px;
}
.m-b-1 {
margin-bottom: 18px;
}
.m-t-1 {
margin-top: 18px;
}
/*==========================================================
counter section style
============================================================*/
.main_counter_area{
background: url(https://images.pexels.com/photos/196288/pexels-photo-196288.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat top center;
background-size: cover;
overflow: hidden;
}
.main_counter_area .main_counter_content .single_counter{
background: rgba(236, 72, 72, 0.5);
color: #fff;
}
.main_counter_area .main_counter_content .single_counter i{
font-size:36px;
}
.bk{
float: left;
background: url(../images/bs.jpg) ;
background-size: cover;
width:100%;
height: 700px;
margin-bottom:129px;
}
.button4 {
background-color: #f91111;
color: black;
text-shadow: 2px 2px 5px red;
}
.button4:hover {
background-color: #008CBA;
color: white;
}
.button4{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 50px 245px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
/*margin-left: 232px;*/
}
/*pricing table */
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.pricingbutton {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
.pricingtableheader{
font-size:50px;
text-align: center;
text-shadow: 2px 2px 5px #000;
padding: 17px;
margin-bottom: 50px;
color:#19cf7b;
}
/*pricing table end*/
/*counter */
.softwarecounter{
margin-top: 100px;
margin-bottom: 100px;
}
.p-y-2 {
padding-top: 28px;
padding-bottom: 28px;
}
.p-y-3 {
padding-top: 45px;
padding-bottom: 45px;
}
.m-b-1 {
margin-bottom: 18px;
}
.m-t-1 {
margin-top: 18px;
}
/*==========================================================
counter section style
============================================================*/
.main_counter_area{
background: url(https://images.pexels.com/photos/196288/pexels-photo-196288.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat top center;
background-size: cover;
overflow: hidden;
}
.main_counter_area .main_counter_content .single_counter{
background: rgba(236, 72, 72, 0.5);
color: #fff;
}
.main_counter_area .main_counter_content .single_counter i{
font-size:36px;
}
/* counter end*/
