"1. digital- nav"
Bootstrap 3.0.0 Snippet by jeevan123456

<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 ----------> <nav class="navbar navbar-default navbar-fixed-top navcarbox" 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="container-fluid"> <div class="row"> <!-- Carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- 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> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide"> <!-- Static Header --> <div class="header-text text-center hidden-xs"> <div class="main_title "> <h2>Paris <span>Top</span> Tours</h2> <p>Quisque at tortor a libero posuere laoreet vitae sed arcu. Curabitur consequat.</p> </div> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Learn More</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Contact Us</a></div> </div><!-- /header-text --> </div> <div class="item"> <img src="https://images.pexels.com/photos/655677/pexels-photo-655677.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide"> <!-- Static Header --> <div class="header-text text-center hidden-xs"> <div class="main_title "> <h2>Paris <span>Top</span> Tours</h2> <p>Quisque at tortor a libero posuere laoreet vitae sed arcu. Curabitur consequat.</p> </div> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Learn More</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Contact Us</a></div> </div><!-- /header-text --> </div> <div class="item"> <img src="https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide"> <!-- Static Header --> <div class="header-text text-center hidden-xs"> <div class="main_title "> <h2>Paris <span>Top</span> Tours</h2> <p>Quisque at tortor a libero posuere laoreet vitae sed arcu. Curabitur consequat.</p> </div> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Learn More</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Contact Us</a></div> </div><!-- /header-text --> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!-- /carousel --> </div> </div> <!-- About us section --> <div class="about-us-section paddingTB60 "> <div class="container"> <div class="row"> <div class="site-heading text-center"> <h3>ABOUT 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-6"> <img src="https://images.pexels.com/photos/106567/pexels-photo-106567.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt=""> </div><!-- End Col --> <div class="col-md-6"> <div class="about-us-content text-center"> <h2>We Provide the best services </h2> <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 about_btn">Contact Us</a> </div> </div> <!-- End Col --> </div> </div> </div> <div class="Features-section 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-sm-6 col-md-4"> <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-sm-6 col-md-4"> <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-sm-6 col-md-4"> <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-default about_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-default about_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-default about_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 about_btn">Get Started</a> </div> </div> </div> <!-- End Col --> <div class="col-sm-6 col-md-4"> <div class="plan"> <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 about_btn">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 about_btn">Get Started</a> </div> </div> </div> <!-- End Col --> </div> </div> </div> <section id="counter" data-stellar-background-ratio="0.3" class="counter_padding" style="background-image: url(https://images.pexels.com/photos/37727/pexels-photo-37727.png?w=940&h=650&auto=compress&cs=tinysrgb); background-size: cover; background-position: 0% -12.7282px;"> <div class="container"> <div class="row text-center"> <div class="col-sm-6 col-md-3"> <div class="counter-box"> <span class="glyphicon glyphicon-cog icon-s"></span> <div class="counter-digit">69</div> <h4>PROJECTS</h4> </div> </div> <!-- End Col --> <div class="col-sm-6 col-md-3"> <div class="counter-box"> <span class="glyphicon glyphicon-cog icon-s"></span> <div class="counter-digit">69</div> <h4>DESIGN AWARDS</h4> </div> </div> <!-- End Col --> <div class="col-sm-6 col-md-3"> <div class="counter-box"> <span class="glyphicon glyphicon-cog icon-s"></span> <div class="counter-digit">69</div> <h4>WORKING HOURS</h4> </div> </div> <!-- End Col --> <div class="col-sm-6 col-md-3"> <div class="counter-box"> <span class="glyphicon glyphicon-cog icon-s"></span> <div class="counter-digit">69</div> <h4>COFFEE</h4> </div> </div> <!-- End Col --> </div> </div> </section> <div class="testimonial-section paddingTB60 "> <div class="container"> <div class="row"> <div class="site-heading text-center"> <h3>TESTIMONIALS</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="testimonial-box"> <img src="https://images.pexels.com/photos/206615/pexels-photo-206615.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="" width="90"> <div class="ratings-icons"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> </div> <h4>James Baker</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et</p> </div> </div> <!-- End Col --> <div class="col-sm-6 col-md-4"> <div class="testimonial-box"> <img src="https://images.pexels.com/photos/478544/pexels-photo-478544.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="" width="90"> <div class="ratings-icons"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> </div> <h4>Jon Doe</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et</p> </div> </div> <!-- End Col --> <div class="col-sm-6 col-md-4"> <div class="testimonial-box"> <img src="https://images.pexels.com/photos/478544/pexels-photo-478544.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt="" width="90"> <div class="ratings-icons"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> </div> <h4>Maria Jose</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien augue, dictum et gravida et</p> </div> </div> <!-- End Col --> </div> </div> </div> <div class="contact-section 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"> <ul class="social-link pull-right"> <li><a href=""><span class="glyphicon glyphicon-heart-empty"></span></a></li> <li><a href=""><span class="glyphicon glyphicon-heart-empty"></span></a></li> <li><a href=""><span class="glyphicon glyphicon-heart-empty"></span></a></li> <li><a href=""><span class="glyphicon glyphicon-heart-empty"></span></a></li> <li><a href=""><span class="glyphicon glyphicon-heart-empty"></span></a></li> </ul> </div> <!-- End Col --> </div> </div> </div>
body { font-family: 'Lato', sans-serif; font-size: 17px; line-height: 25px; color: #555; font-weight: 300; } /* navigation css */ .navcarbox { padding-left:5px; display: block; line-height: 1.42857143; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); transition: box-shadow .25s; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #fff; text-decoration: none; background-color: #fe4819; } .navbar-brand img { float: left; transition: all .5s ease-out; margin: 0; } /* Slider CSS */ /* Carousel Styles */ /* Carousel Styles */ .carousel-control { color: #bab7b6; } .carousel-control:hover { color: #fe4819; } .carousel-indicators .active { background-color: #fe4819; } .carousel-inner img { width: 100%; max-height: 550px; } .carousel-control { width: 0; } .carousel-control.left, .carousel-control.right { opacity: 1; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none; margin-right: 95px; } .carousel-control.left span { margin-left: 15px; font-size: 60px; } .carousel-control.right span { font-size: 60px; margin-right: 50px; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { position: absolute; top: 45%; z-index: 5; display: inline-block; } .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { left: 0; } .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { right: 0; } .carousel-control.left span, .carousel-control.right span { background-color: none; } .carousel-control.left span:hover, .carousel-control.right span:hover { opacity: .7; filter: alpha(opacity=70); } /* Carousel Header Styles */ .header-text { position: absolute; top: 35%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #000; } .header-text h2 { font-size: 40px; padding-bottom:10px; } .header-text h2 span { padding: 10px; color : #fe4819; } .header-text h3 span { padding: 15px; } .btn-min-block { min-width: 170px; line-height: 26px; } .btn-theme { color: #fff; background-color: #fe4819; border: 2px solid #fff; margin-right: 15px; } .btn-theme:hover { color: #000; background-color: #d1360e; border-color: #fff; } .navbar { margin-bottom:0px; } /* About us CSS */ .paddingTB60 { padding-top:60px; padding-bottom:60px; } .bg-orange { background-color :#fe4819; } .bg-grey { background-color :#e8e8e8; } .site-heading h3{ font-size : 40px; margin-bottom: 15px; text-transform: uppercase; font-weight: 600; } .border { background: #d1360e; height: 2px; width: 165px; margin-left: auto; margin-right: auto; margin-bottom: 25px; } .about-us-content { padding-top: 13%; } .about-us-content h2 { text-transform: uppercase; font-size: 25px; margin-bottom: 17px; font-weight: 600; } .about_btn { background: #fe4819; border-color: #fff; padding: 12px 24px; font-weight: 600; transition: .5s; color: #fff; text-transform: uppercase; font-size: 13px; border-radius: 25px; } /* Feature-CSS */ .icon { color : #fe4819; padding:15px; font-size:70px; } .feature-box { text-align: center; padding: 0 20px; transition: .5s; margin-bottom: 30px; } .feature-box h4 { font-size: 20px; font-weight: 600; margin: 25px 0 15px; } /* Blog-CSS */ .blog-box { padding: 0 0px; transition: .5s; border: 1px solid #eee; margin-bottom: 30px; } .blog-box-content h4 a { font-size: 20px; padding: 0px 0 0px; text-transform: uppercase; color:#000; } .blog-box-content h4:hover { color:#000; } .blog-box-content { padding: 0 20px 20px; } .blog-box-text h4 a { color: #333; } /* Plan CSS */ .plan { background: #f9f9f9; padding: 50px 30px; margin-bottom: 30px; } .plan-header h4 { padding-bottom: 8px; text-transform: uppercase; color: #333; font-weight: 600; } .plan-header { font-weight: 700; } .plan-header span { color: #fe4819; font-size: 40px; } .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; } /* Counter CSS */ #counter { position: relative; } .counter_padding { padding: 60px 0; } .counter-box { color: #fff; } .counter-digit { font-size: 32px; font-weight: bold; display: block; margin-bottom: 30px; } .counter-box h4 { font-weight: 400; font-size: 18px; color: #ffffff; font-family: 'Lato', sans-serif; } .icon-s { color : #fe4819; padding:32px; font-size:50px; } /* Testimonial CSS */ .testimonial-box img { display: inline-block; width: 90px; height:90px; border-radius: 50%; margin: 0 0 15px; } .testimonial-box h4 { color: #fe4819; } .testimonial-box p { margin-bottom: 20px; font-size: 17px; font-style: italic; font-weight: 400; } .ratings-icons { color: #fec42d; margin-bottom: 15px; } /* 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: #fe4819; box-shadow: none; -webkit-box-shadow: none;} /*footer bottom */ .footer-bottom { padding: 40px 0 30px; border-top: 1px solid #666; background: #1e1e1e; } .copyright-text p { color: #ccc; margin-top: 9px; margin-bottom: 0; } .social-link li { display: inline-block; margin: 0 5px; } .social-link li a { color: #ccc; border: 1px solid #ccc; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; text-align: center; display: inline-block; font-size: 14px; transition: .5s; }
Color : fe4819, #d1360e Font : lato Heading : Sections : ABOUT Us, Features PORTFOLIO Our Team Our Plan BLOG TESTIMONIALS Contact Us Icons-box : Images : btns : .btn-primary, btn-primary:hover Shadow : box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); border :border-top: 1px solid #ddd;

Related: See More


Questions / Comments: