"Bootstrap 4 business website template"
Bootstrap 4.1.1 Snippet by adriano3429

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Top navigation --> <nav class="navbar navbar-expand-md fixed-top top-nav"> <div class="container"> <a class="navbar-brand" href="#"><strong>Grafreez</strong></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"><i class="fa fa-bars" aria-hidden="true"></i></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Team</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Prices</a> </li> <li class="nav-item"> <a class="nav-link" href="#">FAQ's</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <!-- Intro Seven --> <section class="intro carousel slide bg-overlay-light h-auto" id="carouselExampleCaptions"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" alt="First slide" src="https://grafreez.com/wp-content/temp_demos/suffi/img/intro-bg-01.jpg"> <div class="carousel-caption "> <h2 class="display-4 text-white mb-2 mt-4">In the business world, the rearview mirror is always clearer than the windshield.</h2> <p class="text-white mb-3 px-5 lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do enim ad minim veniam, </p> <a href="#" class="btn btn-primary btn-capsul px-4 py-2">Explore More</a> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" alt="First slide" src="https://grafreez.com/wp-content/temp_demos/suffi/img/intro-bg-02.jpg"> <div class="carousel-caption "> <h2 class="display-4 text-white mb-2 mt-4">Accept the challenges so that you can feel the exhilaration of victory.</h2> <p class="text-white mb-3 px-5 lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do enim ad minim veniam, </p> <a href="#" class="btn btn-primary btn-capsul px-4 py-2">Explore More</a> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </section> <!-- Info block 1 --> <section class="info-section"> <div class="container"> <div class="head-box text-center mb-5"> <h2>Who We Are</h2> <h6 class="text-underline-primary">This is information panel</h6> </div> <div class="three-panel-block mt-5"> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="service-block-overlay text-center mb-5 p-lg-3"> <i class="fa fa-laptop box-circle-solid mt-3 mb-3" aria-hidden="true"></i> <h3>Responsive Design</h3> <p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="service-block-overlay text-center mb-5 p-lg-3"> <i class="fa fa-calendar box-circle-solid mt-3 mb-3" aria-hidden="true"></i> <h3>Integrated Calendar</h3> <p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="service-block-overlay text-center mb-5 p-lg-3"> <i class="fa fa-bug box-circle-solid mt-3 mb-3" aria-hidden="true"></i> <h3>Bug Free Solutions</h3> <p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="service-block-overlay text-center p-lg-3"> <i class="fa fa-cloud-upload box-circle-solid mt-3 mb-3" aria-hidden="true"></i> <h3>Cloud Storage</h3> <p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="service-block-overlay text-center p-lg-3"> <i class="fa fa-diamond box-circle-solid mt-3 mb-3" aria-hidden="true"></i> <h3>Premium Features</h3> <p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="service-block-overlay text-center p-lg-3"> <i class="fa fa-comments box-circle-solid mt-3 mb-3" aria-hidden="true"></i> <h3>24/7 Support</h3> <p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p> </div> </div> </div> </div> </div> </section> <!-- Info block 1 --> <section class="info-section bg-primary py-0"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-lg-6 content-half mt-md-0 pl-5 pt-4"> <div class="head-box mb-5 pl-5 mt-2"> <h2 class="text-white">Our Story</h2> <h6 class="text-white text-underline-rb-white">This is information panel</h6> </div> <ul class="pl-5"> <li> <i class="fa fa-laptop box-round-outline" aria-hidden="true"></i> <span class="list-content"> <strong>Responsive Design</strong> <br>Eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> </li> <li> <i class="fa fa-cloud-upload box-round-outline" aria-hidden="true"></i> <span class="list-content"> <strong>Cloud Storage</strong> <br>Eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> </li> <li> <i class="fa fa-diamond box-round-outline" aria-hidden="true"></i> <span class="list-content"> <strong>Premium Features</strong> <br>Eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> </li> </ul> </div> <div class="col-md-6 p-0 m-0"> <img src="https://grafreez.com/wp-content/temp_demos/suffi/img/intro-bg.jpg" class="img-fluid"> </div> </div> </section> <!-- team style 1 --> <section class="team-section py-5"> <div class="container"> <div class="row mb-5"> <div class="head-box text-center mb-5 col-md-12"> <h2>Meet Our Team</h2> <h6 class="text-underline-primary mb-5">This is information panel</h6> </div> <div class="col-md-4 mb-md-0 mb-sm-4"> <div class="member-box anim-lf t-bottom"> <img class="img-fluid" src="https://grafreez.com/wp-content/temp_demos/suffi/img/t-member-01.jpg" alt=""> <div class="overlay-content"> <h3 class="text-white ml-3 my-0">Jim Gorden</h3> <p class="text-white ml-3 mb-3">Developer</p> <span class="socail-l ml-3 mb-3"> <a href="#" class="mr-2"><i class="fa fa-facebook box-circle-solid"></i></a> <a href="#" class="mr-2"><i class="fa fa-twitter box-circle-solid"></i></a> <a href="#"><i class="fa fa-dribbble box-circle-solid"></i></a> </span> </div> </div> </div> <div class="col-md-4 mb-md-0 mb-sm-4"> <div class="member-box anim-lf t-bottom"> <img class="img-fluid" src="https://grafreez.com/wp-content/temp_demos/suffi/img/t-member-02.jpg" alt=""> <div class="overlay-content"> <h3 class="text-white ml-3 my-0">Peyton Warren</h3> <p class="text-white ml-3 mb-3">UI/UX</p> <span class="socail-l ml-3 mb-3"> <a href="#" class="mr-2"><i class="fa fa-facebook box-circle-solid"></i></a> <a href="#" class="mr-2"><i class="fa fa-twitter box-circle-solid"></i></a> <a href="#"><i class="fa fa-dribbble box-circle-solid"></i></a> </span> </div> </div> </div> <div class="col-md-4 mb-md-0 mb-sm-4"> <div class="member-box anim-lf t-bottom"> <img class="img-fluid" src="https://grafreez.com/wp-content/temp_demos/suffi/img/t-member-03.jpg" alt=""> <div class="overlay-content"> <h3 class="text-white ml-3 my-0">Craig Thompson</h3> <p class="text-white ml-3 mb-3">Manager</p> <span class="socail-l ml-3 mb-3"> <a href="#" class="mr-2"><i class="fa fa-facebook box-circle-solid"></i></a> <a href="#" class="mr-2"><i class="fa fa-twitter box-circle-solid"></i></a> <a href="#"><i class="fa fa-dribbble box-circle-solid"></i></a> </span> </div> </div> </div> </div> </div> </section>
/*Google Fonts*/ @import url('https://fonts.googleapis.com/css?family=Montserrat:500,600,700'); @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700'); @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); body, html{ height: 100%; width:100%; } body{ font-size: 1rem; font-family: 'Source Sans Pro', sans-serif; } /* ========== Universal Stylings ========== */ h1,h2,h3,h4,h5{ position: relative; font-family: 'Montserrat', sans-serif; } h6{ position: relative; text-transform: uppercase; } .bg-primary{ background-color: #35CBDF!important; } .text-inverse{ color: #074052; } .text-primary{ color: #35CBDF!important; } .btn{ font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 600; } .btn-primary{ background-color: #35CBDF; border-color: #35CBDF; text-shadow: 1px 1px 2px rgba(0,0,0,0.4) } .btn-primary:hover,.btn-primary:focus{ background-color: #00BED7; border-color: #00BED7; } .btn-capsul{ border-radius: 50px; } i.box-circle-outline{ border-color: inherit; border-width: 1px; border-style:solid; border-radius: 50%; height: 50px; line-height: 50px; text-align: center; width: 50px; } i.box-circle-solid{ background-color:#35CBDF; border-radius: 50%; color: #fff; font-size: 22px; height: 55px; line-height: 55px; text-align: center; width: 55px; } .text-underline-white:before{ content:""; position: absolute; width:100px; height: 4px; left:50%; margin-left:-50px; background:#fff; bottom: -15px; border-radius: 10px; } .text-underline-rb-white:before{ content:""; position: absolute; width:100px; height: 4px; left:0; background:#fff; bottom: -15px; border-radius: 10px; } .text-underline-primary:before{ content:""; position: absolute; width:50px; height: 4px; left:50%; margin-left:-25px; background:#35CBDF; bottom: -15px; border-radius: 10px; } .text-underline-rb-primary:before{ content:""; position: absolute; width:100px; height: 4px; left:0; background:#35CBDF; bottom: -15px; border-radius: 10px; } .bg-overlay:before{ content:""; background:rgba(0,0,0,0.7); position: absolute; height: 100%; width:100%; left:0; top:0; z-index: -1; } .bg-overlay-light:before{ content:""; background:rgba(0,0,0,0.4); position: absolute; height: 100%; width:100%; left:0; top:0; z-index: -1; } .parallax{ background-attachment: fixed!important; } /* ========== Loader ========== */ .loaders { width: 100%; box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; } .loaders .loader { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: column; flex-grow: 1; flex-shrink: 0; flex-basis: 25%; max-width: 25%; height: 200px; align-items: center; justify-content: center; } .loader { display: table; height: 100%; position: fixed; width: 100%; z-index: 1200; } .loader-bg { background: #35CBDF; } .loader-inner { display: table-cell; text-align: center; vertical-align: middle; } .loader .ball-clip-rotate-pulse { left: 50%; position: absolute; top: 50%; } /* ========== Top Navigation ========== */ .top-nav { border-bottom: 1px solid rgba(255, 255, 255, 0.2); height: 80px; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .top-nav .navbar-nav li .nav-link { color: #fff; font-size: 14px; padding:29px 15px; font-weight: 600; text-transform: uppercase; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .top-nav li a.nav-link:hover, .top-nav .nav-item.active a.nav-link{ border-bottom: 3px solid #35cbdf; color: #35cbdf; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .top-nav .navbar-brand{ font-size: 28px; color: #fff; font-family: 'Montserrat', sans-serif; } .top-nav.light-header{ height: 60px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.23); transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .top-nav.light-header .navbar-brand{ color: #212121; } .top-nav.light-header .navbar-nav li .nav-link { color: #212121; padding: 19px 15px; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .top-nav.light-header li a.nav-link:hover, .top-nav.light-header .nav-item.active a.nav-link{ border-bottom: 3px solid #35cbdf; color: #35cbdf; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } /* ========== Intro Header ========== */ .intro{ float: left; width:100%; display: flex; align-items:center; height:100%; position: relative; z-index: 1; } .intro.intro-small{ height: 60%; } .intro-bg{ background:url("../img/intro-bg-03.jpg"); background-repeat:no-repeat; background-position: center center; background-size:cover; } .caption-container{ width:50rem; margin:0 auto; } .caption-two-panel{ display: flex; align-items:center; } .intro h1{ font-weight: 700; } .intro-caption .btn i{ float: left; margin-right:15px; } .intro .carousel-item{ height: 100vh; } .intro .carousel-item::before{ content:""; background:rgba(0,0,0,0.6); position: absolute; width:100%; height: 100vh; } .intro .carousel-caption{ top:25%; } /* ========== Who We Are ========== */ .info-section{ float: left; width:100%; padding:5rem 0; position: relative; z-index: 1; } .info-section h2{ font-weight: 700; font-size: 2.5rem; } .info-section .head-sec{ float: left; width:100%; } .info-section h3{ font-size: 1.4rem; } .info-section p { font-size: 1rem; line-height: 1.3rem; } .info-section .box h2{ font-size:24px; margin-bottom:20px; margin-top:0; } .info-section .box i{ font-size:20px; } .info-section .box{ display:flex; } .info-section .text-box{ flex:1 1 0; text-align:left; } .info-section .icon-box{ line-height: 1.2; width:70px; } .info-section .service-block-overlay{ transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; } .info-section .service-block-overlay:hover{ background: #fff none repeat scroll 0 0; border-radius: 5px; box-shadow: 0 0 90px rgba(0, 0, 0, 0.1); float: left; margin-top: -10px; position: relative; width: 100%; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; } .content-half{ color:#fff; } .content-half ul{ padding:0; list-style:none; } .content-half ul li{ margin:15px 0; float:left; width:100%; } .content-half ul li i{ float:left; font-size:30px; padding-top:10px; padding-bottom:10px; } .content-half ul li .list-content{ float:left; margin-left:20px; } .content-half ul li strong{ font-size:19px; font-weight:700; } .content-half .btn{ margin-top:20px; } /*--- three Block Panel ---*/ .three-panel-block{ float: left; width: 100%; } .three-panel-block i{ font-size: 1.5rem; margin-bottom: 15px; } .three-panel-block i.box-round{ border-color: inherit; border-width: 1px; border-style:solid; padding:16px; border-radius: 50%; } /*--- Two Block Panel ---*/ .two-panel-block{ float: left; width: 100%; } .two-panel-block p{ font-size:16px; } /*--- Two Block Panel ---*/ .four-panel-block{ float: left; width:100%; } /* ========== Who We Are ========== */ .widget{ float: left; width:100%; position: relative; z-index: 1; } /* ========== Copy Content Styles ========== */ .copy-content-sec{ float: left; width:100%; padding:5rem 0; position: relative; z-index: 1; } .copy-container{ display: flex; align-items: center; } .copy-content{ float: left; width:100%; } .copy-content li i{ float: left; width:30px; margin-top:5px; color: #5CB85C; } /* ========== Team Section ========== */ .team-section{ float: left; width:100%; position: relative; z-index: 1; background-color:#fff; } .team-footer{ float: left; width:100%; padding: 15px; } .team-footer h3{ font-size: 1.5rem; text-transform: capitalize; } .member-box{ width:100% float:left; position:relative; overflow:hidden } .member-box:hover> img{ transform: scale(1.05); transition:1s ease-in; } .member-box img{ transition:0.3s ease-in; } .member-box.t-bottom .overlay-content{ display:flex; flex-direction:column; justify-content:flex-end; } .member-box.t-center .overlay-content{ display:flex; flex-direction:column; justify-content:center; align-items: center; } .member-box i.box-circle-solid{ padding: 0; width:40px; height: 40px; text-align: center; line-height: 40px; } /* style 1 */ .member-box.anim-lf .overlay-content{ position:absolute; background-color:rgba(0,0,0,0.6); left:-100%; bottom:0; width: 100%; height:100%; transition:0.4s ease-in; } .member-box.anim-lf:hover>.overlay-content{ left:0; transition:0.4s ease-in; } /* style 1 */ .member-box.anim-bt .overlay-content{ position:absolute; background-color:rgba(0,0,0,0.6); bottom:-100%; width: 100%; height:100%; transition:0.6s ease-in; } .member-box.anim-bt:hover>.overlay-content{ bottom:0; transition:0.4s ease-in; } /* ========== Testimonial Section ========== */ .testimonial-section{ float: left; width:100%; position: relative; z-index: 1; } .testimonial-section .block-style-03 img{ width:100px; } /* ========== Footer Section ========== */ .footer-section{ float: left; width:100%; position: relative; z-index: 1; } .footer-section .list-box img { width: 70px; } .footer-section .list-box a.title{ font-size: 14px; line-height: 0; } .footer-section .copy-text{ font-size: 12px; border-top: 1px solid #555; } .social-box a.icoRss:hover { background-color: #F56505; } .social-box a.fa-box:hover { background-color:#3B5998; } .social-box a.tw-box:hover { background-color:#33ccff; } .social-box a.go-box:hover { background-color:#BD3518; } .social-box a.ld-box:hover { background-color:#007bb7; } ul.social-box { list-style: none; display: inline; margin-left:0 !important; padding: 0; } ul.social-box li { display: inline; margin: 0 5px; } .social-box li a { background: #414344; border-radius: 50%; display: inline-block; font-size: 13px; height: 30px; margin: 0 auto; position: relative; text-align: center; width: 30px; } .social-box li i { margin:0; line-height:30px; text-align: center; } .social-box li a:hover i, .triggeredHover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .social-box i { color: #fff; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; } /* ========== Copy Content Styles ========== */ .copy-content-sec{ float: left; width:100%; padding:5rem 0; position: relative; z-index: 1; } .copy-container{ display: flex; align-items: center; } .copy-content{ float: left; width:100%; } .copy-content li i{ float: left; width:30px; margin-top:5px; color: #5CB85C; } .faq-box .card{ border-color: #35CBDF; margin-top: 10px; } .faq-box .card-header{ background-color: #35CBDF; color: #fff; } /* ========== Price Table Styles ========== */ .price-section{ float: left; width:100%; padding:5rem 0; position: relative; z-index: 1; } .price-section h2 { font-size: 2.5rem; font-weight: 700; } .price-section .price-block{ } .price-section .currency{ font-size: 25px; vertical-align: super; } .price-section .price-count{ font-size: 60px; line-height: 60px; } .price-section .price-block small{ display: block; font-size: 15px; } /* ========== Contact Section ========== */ .contact-section{ float: left; width: 100%; position: relative; z-index: 1; } .contact-section #map { display: block; width: 100%; height: 100%; } .contact-section #map { background: #fff; width:100%; height: 100%; } .contact-section .form-control{ border-radius: 0; } .contact-section #map{ height: 350px; } /* ========== Copy Footer Styles ========== */ .copy-footer{ float: left; width:100%; font-size: 14px; background: #111; } .copy-footer a{ color: #fff; } .copy-footer a:hover{ text-decoration: underline; } /* ========== Responsive Stylings ========== */ @media (max-width: 991px){ .container{ width: 100%; } .intro .intro-box{ padding-left: 0; margin-bottom: 0; } .intro .intro-box span{ margin-right: 10px; } .intro .intro-box .list-item{ width: 85%; } .content-half ul li i{ font-size: 20px; } .content-half ul li .list-content{ width:77%; } .content-half ul li strong{ line-height: 0; } .testimonial-section .single-testimonial .carousel-item{ width: 100%; margin-left: 0; margin-right: 0; } .widget h2 { font-size: 1.5rem; } .widget .counter{ line-height: 0; font-size: 1.7rem; } .widget .fa-3x{ font-size: 2rem; } .widget .stat-content h4{ font-size: 1.2rem; } } @media (max-width: 767px){ .container{ width:100%; } .intro .intro-form-small input[type="text"], .intro .intro-form-small input[type="password"]{ width: 36%; } .intro .carousel-caption{ top:10%; } .widget.widget-counter .container{ width: 100%; } .contact-section #map { height: 400px } .intro .display-4{ font-size:2rem; } .intro p{ display: none; } .intro img{ height: 100%; } .intro .btn-primary{ margin-top: 20px; } .top-nav .navbar-toggler i { color: #fff; margin-top: 6px; } .top-nav.light-header .navbar-toggler i { color: #00BED7; } .top-nav .navbar-collapse.show { background-color: #fff; text-align: center; padding: 12px 0; } .top-nav .navbar-collapse.show a{ color: #000; } } .btn-theme{background-color:#35CBDF; color:#fff;}
// Sticky Header $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 100) { $(".top-nav").addClass("light-header"); } else { $(".top-nav").removeClass("light-header"); } }); // Year for copy content $(function(){ var theYear = new Date().getFullYear(); $('#year').html(theYear); });

Related: See More


Questions / Comments: