<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ---------->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<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" 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>
<a class="navbar-brand" href="#">Brand</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">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-collapse -->
</nav>
<div class= "banner-sektion banner-padding topb">
<div class="container text-center">
<div class="col-md-12">
<div class="banner-heading ">
<h2>make your day easier with Creativity </h2>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</P>
<button type="button" class="btn btn-primary site-btn">Primary</button>
</div>
</div>
</div>
</div>
<div class="Features-sektion paddingTB60 ">
<div class="container">
<div class="row">
<div class="site-heading text-center">
<h3>Products Features</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br> ut labore et dolore magna aliqua. Ut enim ad minim </p>
<div class="border"></div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 text-center">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Great Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est.</p>
</div>
</div> <!-- End Col -->
<div class="col-md-4 col-sm-6 text-center">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Pixal Perfect</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
<div class="col-md-4 col-sm-6 text-center">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Fully Responsive</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
</div>
<div class="row">
<div class="col-md-4 col-sm-6 text-center">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Great Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est.</p>
</div>
</div> <!-- End Col -->
<div class="col-md-4 col-sm-6 text-center">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Pixal Perfect</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
<div class="col-md-4 col-sm-6 text-center">
<div class="feature-box">
<span class="glyphicon glyphicon-cog icon"></span>
<h4>Fully Responsive</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et, viverra et est. </p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<div class="blog-section paddingTB60 ">
<div class="container">
<div class="row">
<div class="site-heading text-center">
<h3>Our Portfolio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br> ut labore et dolore magna aliqua. Ut enim ad minim </p>
<div class="border"></div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-6 col-md-4">
<div class="blog-box">
<div class="blog-box-image">
<img src="https://images.pexels.com/photos/6384/woman-hand-desk-office.jpg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="">
</div>
<div class="blog-box-content">
<h4><a href="#">quis porta tellus dictum</a></h4>
<p>Phasellus lorem enim, luctus ut velit eget, convallis egestas eros.
Sed ornare ligula eget tortor tempor, quis porta tellus dictum.</p>
<a href="" class="btn btn-primary site-btn ">Read More</a>
</div>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="blog-box">
<div class="blog-box-image">
<img src="https://images.pexels.com/photos/374897/pexels-photo-374897.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="">
</div>
<div class="blog-box-content">
<h4><a href="#">quis porta tellus dictum</a></h4>
<p>Phasellus lorem enim, luctus ut velit eget, convallis egestas eros.
Sed ornare ligula eget tortor tempor, quis porta tellus dictum.</p>
<a href="" class="btn btn-primary site-btn">Read More</a>
</div>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="blog-box">
<div class="blog-box-image">
<img src="https://images.pexels.com/photos/541522/pexels-photo-541522.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="">
</div>
<div class="blog-box-content">
<h4><a href="#">quis porta tellus dictum</a></h4>
<p>Phasellus lorem enim, luctus ut velit eget, convallis egestas eros.
Sed ornare ligula eget tortor tempor, quis porta tellus dictum.</p>
<a href="" class="btn btn-primary site-btn ">Read More</a>
</div>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<div class="plan-section paddingTB60 ">
<div class="container">
<div class="row">
<div class="site-heading text-center">
<h3>Our Plan</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br> ut labore et dolore magna aliqua. Ut enim ad minim </p>
<div class="border"></div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-6 col-md-4">
<div class="plan">
<div class="plan-header">
<h4>BEGINER</h4>
<p><sup>$</sup> <span>19</span> / month</p>
</div>
<ul>
<li>5 Free Websites</li>
<li>2 GB Storage</li>
<li>Domain Name Inclided</li>
<li>200 BG Email</li>
<li>Unlimited Lifetime Support</li>
</ul>
<div id="plan_btn">
<a href="#" class="btn btn-default ">Get Started</a>
</div>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="plan plan-big">
<div class="plan-header">
<h4>ADVANCED</h4>
<p><sup>$</sup> <span>39</span> / month</p>
</div>
<ul>
<li>5 Free Websites</li>
<li>2 GB Storage</li>
<li>Domain Name Inclided</li>
<li>200 BG Email</li>
<li>Unlimited Lifetime Support</li>
</ul>
<div id="plan_btn">
<a href="#" class="btn btn-default ">Get Started</a>
</div>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 col-md-4">
<div class="plan">
<div class="plan-header">
<h4>PROFESSIONAL</h4>
<p><sup>$</sup> <span>59</span> / month</p>
</div>
<ul>
<li>5 Free Websites</li>
<li>2 GB Storage</li>
<li>Domain Name Inclided</li>
<li>200 BG Email</li>
<li>Unlimited Lifetime Support</li>
</ul>
<div id="plan_btn">
<a href="#" class="btn btn-default ">Get Started</a>
</div>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<div class="about-us-section paddingTB60 ">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://images.pexels.com/photos/157669/portrait-character-black-and-white-lofty-tone-157669.jpeg?h=350&auto=compress&cs=tinysrgb" class="img-responsive" alt="">
</div><!-- End Col -->
<div class="col-md-6">
<div class="about-us-content ">
<h3>We Provide the best services </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Sed, asperiores, expedita. Qui, explicabo temporibus! Atque ab
commodi corporis labore iure doloribus amet ducimus, laudantium
in placeat asperiores animi. Perferendis laudantium error
cupiditate pariatur ratione tempore, facere, assumenda maiores
labore obcaecati
</p>
<a href="#" class="btn btn-default site-btn">Know More</a>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<div class="contact-section bg-contactus paddingTB60 ">
<div class="container">
<div class="row">
<div class="site-heading text-center">
<h3>CONTACT US</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br> ut labore et dolore magna aliqua. Ut enim ad minim </p>
<div class="border"></div>
</div>
</div>
<div class="row">
<div class="col-md-9 center-block">
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-6">
<input id="name" name="name" placeholder="Name" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-6">
<input id="Email" name="Email" placeholder="Email" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="message">Message</label>
<div class="col-md-6">
<textarea class="form-control" id="message" name="message">Your Message :- </textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-6 ">
<div class="copyright-text">
<p>CopyRight © 2017 Digital All Rights Reserved</p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6">
<div class="copyright-text pull-right">
<p>Designed by : </p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
body {
font-family: 'Roboto';font-size: 16px;
}
.navbar-default {
background-color: #1346ad;
border-color: #234fa9;
}
.navbar-default .navbar-brand {
color: #dbdbdb;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #fbfbfb;
}
.navbar-default .navbar-text {
color: #dbdbdb;
}
.navbar-default .navbar-nav > li > a {
color: #dbdbdb;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #fbfbfb;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fbfbfb;
background-color: #234fa9;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #fbfbfb;
background-color: #234fa9;
}
.navbar-default .navbar-toggle {
border-color: #234fa9;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #234fa9;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #dbdbdb;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #dbdbdb;
}
.navbar-default .navbar-link {
color: #dbdbdb;
}
.navbar-default .navbar-link:hover {
color: #fbfbfb;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #dbdbdb;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #fbfbfb;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #fbfbfb;
background-color: #234fa9;
}
}
/*navigation ends here */
.topb
{
background-image:url(https://static.pexels.com/photos/540977/pexels-photo-540977.jpeg);
}
.banner-padding {
padding-top:160px;
padding-bottom:110px;
background-color:#363636;
}
.banner-heading h2 {
color:#fff;
font-size: 40px;
font-weight: 700;
text-transform: uppercase
}
.banner-heading P {
color:#fff;
padding-bottom:20px;
}
/* Site Generic */
.site-btn {
background: #427df4;
border: 1px solid #fff;
border-radius: 40px;
color: #fff;
display: inline-block;
padding: 10px 30px;
text-transform: uppercase;
margin-right: 5px;
}
.site-btn:hover {
background: #1346ad;
border: 1px solid #fff;
border-radius: 40px;
color: #fff;
display: inline-block;
padding: 10px 30px;
text-transform: uppercase;
margin-right: 5px;
}
.paddingTB60 {
padding-top:60px;
padding-bottom:60px;
}
.site-heading h3 {
font-size: 30px;
color: #1346ad;
border-bottom: 1px solid #1346ad;
display: inline-block;
padding-bottom: 10px;
position: relative;
text-transform: uppercase;
font-weight:bold;
}
.site-heading p {
color: #1346ad;
margin: 0;
padding: 30px 0;
}
.icon {
color : #1346ad;
font-size:40px;
}
.bg-contactus {
background-color:#efefef;
}
h4 {
font-size: 20px;
color: #1346ad;
font-weight: 500;
padding: 15px;
text-transform: uppercase;
}
a {
color:#1346ad;
}
/*feature css */
.feature-box {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
padding: 30px 22px;
margin-bottom: 30px;
}
.feature-box:hover {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
padding: 30px 22px;
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
transition: all 1s ease 0s;
margin-bottom: 30px;
border-right: 10px solid #1346ad ;
}
.feature-box h4 {
font-size: 20px;
color: #1346ad;
font-weight: 500;
padding: 15px;
}
/*about css */
.about-us-content {
padding-top:70px;
}
.about-us-content h3 {
padding-bottom:10px;
text-transform: uppercase;
}
/* Plan CSS */
.plan {
background: #2f6baf;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
padding: 50px 30px;
margin-bottom: 30px;
color:#fff;
}
.plan:hover {
background: #164a84;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
padding: 50px 30px;
margin-bottom: 30px;
color:#fff;
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
transition: all 1s ease 0s;
}
.plan-big {
background: #2aa1fc;
}
.plan-header h4 {
padding-bottom: 8px;
text-transform: uppercase;
color: #fff;
font-weight: 600;
}
.plan-header {
font-weight: 700;
}
.plan-header span {
color: #427df4;
font-size: 50px;
}
.plan li {
padding-bottom: 15px;
}
.plan ul {
padding-left: 0;
margin-bottom: 15px;
list-style: none;
}
.plan-header p {
padding-header: 12px;
padding-bottom: 15px;
}
/* Conact Us */
/* Contact CSS */
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
float: inherit;
}
#message.form-control {
height: 75px;
}
.form-control {
margin-top: 10px;
background: transparent;
height: 45px;
line-height: 45px;
border-radius: 2px;
box-shadow: inset 0 1px 15px rgba(0, 187, 236, .1);
}
.form-control:focus{border-color: #1346ad; box-shadow: none; -webkit-box-shadow: none;}
/*footer bottom */
.footer-bottom {
padding: 10px 0 10px;
border-top: 1px solid #e2e2e2;
background: #1346ad;
}
.copyright-text p {
color: #ccc;
margin-top: 9px;
margin-bottom: 0;
}
moz-linear-gradient(-29deg, #c10f41 0px, #233b88 100%);
background: -ms-linear-gradient(-29deg, #c10f41 0px, #233b88 100%);
position: relative;
color: #fff;
padding: 10px 50px;
text-align: center;
margin-top: 30px;
border-color: #A3033F;
