"Nice Look Form"
Bootstrap 4.1.1 Snippet by sai4ul

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html class="no-js" lang="zxx"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Site Title Here</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="site.webmanifest"> <link rel="shortcut icon" type="image/x-icon" href="img/Title-icon/favicon.png"> <!-- CSS here --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/animate.min.css"> <link rel="stylesheet" href="css/nice-select.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <!--[if lte IE 9]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> <![endif]--> <!-- Start Reference-from --> <section> <div class="Reference-from-area "> <div class="container"> <div class="row"> <div class="Reference-from"> <div class="col-xl-12"> <!-- from headeing --> <div class="forom-headeing"> <h2>Reference</h2> <span><i class="fas fa-times"></i></span> </div> <form action="#"> <div class="row"> <div class="col-xl-6"> <label for="Name">Listing Address</label> <input type="text" placeholder="Enter a Location"> </div> <div class="col-xl-6"> <label for="Name">Is your property currently for rent?</label> <select name="select" id="select"> <option value="">Yess</option> <option value="">No</option> </select> </div> <div class="col-xl-6"> <label for="message">If yes, What is the listing Url?</label> <input type="text"> </div> <div class="col-xl-6"> <label for="message">Would you like free real estate Advertising?</label> <select name="select" id="select"> <option value="">Yess</option> <option value="">No</option> </select> </div> <div class="col-xl-6"> <label for="Name">start of initial occupancy?</label><input type="text"> </div> <div class="col-xl-6"> <label for="Name">Current Rent amount?</label><input type="text"> </div> <div class="col-xl-12"> <label for="message" >Did give proper notice to vacate? if not describe:</label> <textarea name="message" cols="30" rows="10"></textarea> </div> <div class="col-xl-6"> <label for="message">Did larry Health cause damange to your Place?</label> <select name="select" id="select"> <option value="">Yess</option> <option value="">No</option> </select> </div> <div class="col-xl-6"> <label for="Name">If yes,how much?</label><input type="text"> </div> <div class="col-xl-6"> <label for="Name">Would you rent to Larry Heath aging?</label> <select name="select" id="select"> <option value="">Yess</option> <option value="">No</option> </select> </div> <div class="col-xl-6"> <label for="Name">Did Larry heath leave owing you Money?</label> <select name="select" id="select"> <option value="">Yess</option> <option value="">No</option> </select> </div> <div class="col-xl-12"> <label for="message" >Any other notes?</label> <textarea name="message" cols="30" rows="10"></textarea> </div> </div> </form> </div> </div> </div> </div> </div> <!-- from button --> <div class="container"> <div class="from-button"> <div class="row"> <div class="col-xl-12"> <form action="#"> <button class="fromn-btn">Close</button> <button class="fromn-btn f-right">Save</button> </form> </div> </div> </div> </div> </section> <!-- End Reference-from --> <!-- Start Apply-from --> <section class="pt-200"> <div class="Reference-from-area "> <div class="container"> <div class="row"> <div class="Reference-from"> <div class="col-xl-12"> <!-- from headeing --> <div class="forom-headeing"> <h2>Apply</h2> <span><i class="fas fa-times"></i></span> </div> <form action="#"> <div class="row"> <div class="col-xl-6"> <label for="Name">Name</label> <input type="text"> </div> <div class="col-xl-6"> <label for="Name">Emaill address</label> <input type="email"> </div> <div class="col-xl-6"> <label for="message">UserName</label> <input type="text"> </div> <div class="col-xl-6"> <label for="message">Phone no</label> <input type="text"> </div> <div class="col-xl-6"> <label for="message">Credit Score</label> <select name="select" id="select"> <option value="">below 599</option> <option value="">below 600</option> <option value="">below 700</option> <option value="">below 800</option> </select> </div> <div class="col-xl-6"> <label for="message">Years at current job?</label> <select name="select" id="select"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> </select> </div> <div class="col-xl-6"> <label for="message"> What is a Rounh estimate of your monthly ?</label> <select name="select" id="select"> <option value="">Gov Asseistance</option> <option value="">Gov Officer</option> <option value="">Gov CEO</option> <option value="">Gov MD</option> </select> </div> <div class="col-xl-6"> <label for="message">Have you ever been evicted?</label> <select name="select" id="select"> <option value="">Yess</option> <option value="">No</option> </select> </div> <div class="col-xl-6"> <label for="message" >Schedule a tour date</label> <input type="text" disabled> </div> <div class="col-xl-6"> <label for="message" >Pick Tour Time</label> <input type="time"> </div> <div class="col-xl-6"> <label for="message" >Password</label> <input type="text"> </div> <div class="col-xl-6"> <label for="message" >Password</label> <input type="text"> </div> </div> </form> </div> </div> </div> </div> </div> <!-- from button --> <div class="container"> <div class="from-button"> <div class="row"> <div class="col-xl-12"> <form action="#"> <button class="fromn-btn">Close</button> </form> </div> </div> </div> </div> </section> <!-- End Reference-from --> <!-- JS here --> <script src="js/vendor/modernizr-3.5.0.min.js"></script> <script src="js/vendor/jquery-1.12.4.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/isotope.pkgd.min.js"></script> <script src="js/one-page-nav-min.js"></script> <script src="js/slick.min.js"></script> <script src="js/ajax-form.js"></script> <script src="js/wow.min.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/jquery.nice-select.js"></script> <script src="js/jquery.scrollUp.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>
/* 1. Theme default css */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Poppins:300,400,500,600,700'); body { font-family: 'Open Sans', sans-serif; font-weight: normal; font-style: normal; } .img { max-width: 100%; transition: all 0.3s ease-out 0s; } .f-left { float: left } .f-right { float: right } .fix { overflow: hidden } a, .button { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover, .portfolio-cat a:hover, .footer -menu li a:hover { color: #2B96CC; text-decoration: none; } a, button { color: #1696e7; outline: medium none; } button:focus,input:focus,input:focus,textarea,textarea:focus{outline: 0} .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: normal; color: #313131; margin-top: 0px; font-style: normal; font-weight: 400; text-transform: normal; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 40px; font-weight: 500; } h2 { font-size: 35px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } li { list-style: none } p { font-size: 14px; font-weight: normal; line-height: 24px; color: #7e7e7e; margin-bottom: 15px; } hr { border-bottom: 1px solid #eceff8; border-top: 0 none; margin: 30px 0; padding: 0; } label { color: #7e7e7e; cursor: pointer; font-size: 14px; font-weight: 400; } *::-moz-selection { background: #d6b161; color: #fff; text-shadow: none; } ::-moz-selection { background: #444; color: #fff; text-shadow: none; } ::selection { background: #444; color: #fff; text-shadow: none; } *::-moz-placeholder { color: #555555; font-size: 14px; opacity: 1; } *::placeholder { color: #555555; font-size: 14px; opacity: 1; } .theme-overlay { position: relative } .theme-overlay::before { background: #1696e7 none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.6; position: absolute; top: 0; width: 100%; } .separator { border-top: 1px solid #f2f2f2 } /* button style */ .btn { -moz-user-select: none; background: #1696e7 none repeat scroll 0 0; border: 1px solid #ddd; border-radius: 2px; color: #fff; cursor: pointer; display: inline-block; font-size: 13px; font-weight: 600; padding: 13px 25px; text-align: center; transition: all 0.3s ease 0s; } .fromn-btn { background: #fff; border: 1px solid #CCCCCC; border-radius: 2px; color: #664466; cursor: pointer; display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1px; line-height: 1; padding: 16px 22px; text-align: center; transition: all 0.3s ease 0s; border-radius: 5px } .breadcrumb > .active { color: #888; } .owl-carousel .owl-nav div { background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0; height: 40px; left: 20px; line-height: 40px; opacity: 0; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); transition: all 0.3s ease 0s; visibility: hidden; width: 40px; } .owl-carousel .owl-nav div.owl-next { left: auto; right: 20px; } .owl-carousel:hover .owl-nav div { opacity: 1; visibility: visible; } .owl-carousel .owl-nav div:hover { background: #2B96CC; color: #fff } /* scrollUp */ #scrollUp { background: #7DBA2F; height: 35px; width: 35px; right: 50px; bottom: 77px; color: #fff; font-size: 20px; text-align: center; border-radius: 50%; font-size: 20px; line-height: 34px; } #scrollUp:hover { background: #444; } /* Start Reference-from */ .Reference-from { padding-top: 39px; } .Reference-from h2 { display: inline-block; font-size: 35px; font-weight: 600; } .forom-headeing { margin-bottom: 35px; } .forom-headeing > span{ display: inline-block; float: right; cursor: pointer; } .Reference-from label{ color: #000; cursor: pointer; font-size: 14px; font-weight: 500; } .Reference-from input { width: 100%; height: 45px; padding: 0px 15px; margin-bottom: 20px; border: 1px solid #CCCCCC; border-radius: 5px; } .Reference-from textarea { width: 100%; height: 150px; padding: 10px 15px; margin-bottom: 20px; border: 1px solid #CCCCCC; border-radius: 5px; } .Reference-from select { width: 100%; padding: 10px 15px; margin-bottom: 20px; border: 1px solid #CCCCCC; border-radius: 5px; } .Reference-from .nice-select{ margin-bottom: 20px; } .from-button { border-top: 1px solid #ddd; padding-top: 20px; } .nice-select { width: 100%; border: 1px solid #CCCCCC; } /* End Reference-from */
(function ($) { "use strict"; // One Page Nav var top_offset = $('.header-area').height() - 10; $('.main-menu nav ul').onePageNav({ currentClass: 'active', scrollOffset: top_offset, }); $(window).on('scroll', function () { var scroll = $(window).scrollTop(); if (scroll < 245) { $(".header-sticky").removeClass("sticky"); } else { $(".header-sticky").addClass("sticky"); } }); // mainSlider function mainSlider() { var BasicSlider = $('.slider-active'); BasicSlider.on('init', function (e, slick) { var $firstAnimatingElements = $('.single-slider:first-child').find('[data-animation]'); doAnimations($firstAnimatingElements); }); BasicSlider.on('beforeChange', function (e, slick, currentSlide, nextSlide) { var $animatingElements = $('.single-slider[data-slick-index="' + nextSlide + '"]').find('[data-animation]'); doAnimations($animatingElements); }); BasicSlider.slick({ autoplay: false, autoplaySpeed: 10000, dots: false, fade: true, arrows: false, responsive: [ { breakpoint: 767, settings: { dots: false, arrows: false } } ] }); function doAnimations(elements) { var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; elements.each(function () { var $this = $(this); var $animationDelay = $this.data('delay'); var $animationType = 'animated ' + $this.data('animation'); $this.css({ 'animation-delay': $animationDelay, '-webkit-animation-delay': $animationDelay }); $this.addClass($animationType).one(animationEndEvents, function () { $this.removeClass($animationType); }); }); } } mainSlider(); // blog-active $('.blog-active').slick({ dots: true, infinite: true, speed: 300, arrows: false, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: false, } }, { breakpoint: 991, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); // owlCarousel $('.slider-active').owlCarousel({ loop:true, items:1, navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'], nav:true, dots:false, responsive:{ 0:{ items:1 }, 767:{ items:1 }, 992:{ items:1 } } }) /* magnificPopup img view */ $('.popup-image').magnificPopup({ type: 'image', gallery: { enabled: true } }); /* magnificPopup video view */ $('.popup-video').magnificPopup({ type: 'iframe' }); // isotop var $grid = $('.grid').imagesLoaded(function () { // init Isotope $('.grid').isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { // use outer width of grid-sizer for columnWidth columnWidth: '.grid-item', } }); }); // filter items on button click $('.portfolio-menu').on('click', 'button', function () { var filterValue = $(this).attr('data-filter'); $grid.isotope({ filter: filterValue }); }); //for menu active class $('.portfolio-menu button').on('click', function (event) { $(this).siblings('.active').removeClass('active'); $(this).addClass('active'); event.preventDefault(); }); // scrollToTop $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300', // Distance from top before showing element (px) topSpeed: 300, // Speed back to top (ms) animation: 'fade', // Fade, slide, none animationInSpeed: 200, // Animation in speed (ms) animationOutSpeed: 200, // Animation out speed (ms) scrollText: '<i class="icofont icofont-long-arrow-up"></i>', // Text for element activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF' }); // WOW active new WOW().init(); })(jQuery);

Related: See More


Questions / Comments: