"post-your event page"
Bootstrap 4.1.1 Snippet by TejaNethas

<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 ----------> <html> <head> <title>Seminors</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/mainstyles.css"> <link rel="stylesheet" href="css/modal.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/moment-with-locales.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-datetimepicker.min.js"></script> <script src="js/customJquery.js"></script> </head> <body class="main-body"> <nav class="navbar navbar-expand-lg navbar-light bg-light-nav fixed-top"> <a class="navbar-brand text-uppercase" href="index.html">Seminors</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar1"> <ul class="navbar-nav ml-auto nav-links-btn"> <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> <li class="nav-item"><a class="nav-link" href="index.html">Workshops</a></li> <li class="nav-item"><a class="nav-link" href="about-us.html">About us</a></li> <li class="nav-item"><a class="nav-link" href="post-your-event.html">Post Your Event</a></li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)" data-toggle="modal" data-target="#sem-login">Login</a></li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)" data-toggle="modal" data-target="#sem-reg">Register</a></li> </ul> </div> </nav> <section> <div class="Seminor-banner"> <img class="img-fluid" src="images/seminar1.jpeg" /> </div> </section> <section id="post-your-event-tabs"> <div class="container"> <h1 class="section-title">Post Your Event Details</h1> <!-- Nav pills --> <ul class="nav nav-pills nav-justified" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="organizer-event-tab" data-toggle="tab" href="#organizer-event" role="tab" aria-controls="organizer-event" aria-selected="true">Organizer Details</a> </li> <li class="nav-item"> <a class="nav-link" id="event-details-tab" data-toggle="tab" href="#event-details" role="tab" aria-controls="event-details" aria-selected="false">Event Details</a> </li> <li class="nav-item"> <a class="nav-link" id="confirm-details-tab" data-toggle="tab" href="#confirm-details" role="tab" aria-controls="confirm-details" aria-selected="false">Confirm Details</a> </li> </ul> <!-- Tab panes --> <div class="tab-content py-3 px-3 px-sm-0 events-tab-content"> <div class="tab-pane fade show active" id="organizer-event" role="tabpanel" aria-labelledby="organizer-event-tab"> <form class="seminor-login-form ges-location-from"> <div class="form-group"> <label for="contact-person">Contact Person</label> <input type="text" placeholder="Contact Organizing Person" class="form-control ges-form-control" required autocomplete="off"> </div> <div class="form-group"> <label for="contact-email">Contact Email</label> <input type="email" placeholder="Contact Organizer Email" class="form-control ges-form-control" required autocomplete="off"> </div> <div class="form-group"> <label for="alternative-email">Alternative Email</label> <input type="email" placeholder="Contact Organizer Alternative Email" class="form-control ges-form-control" autocomplete="off"> </div> <div class="form-group"> <label for="contact-number">Contact Number</label> <input type="text" placeholder="Contact Organizer Phone Number" class="form-control ges-form-control" required autocomplete="off"> </div> <div class="form-group"> <label for="alternative-number">Alternative Number</label> <input type="text" placeholder="Contact Organizer Phone Alternative Number" class="form-control ges-form-control" autocomplete="off"> </div> <div class="form-group"> <label class="container-checkbox"> Iam the event organizer and responsible for the info provided. <input type="checkbox" checked="checked" required> <span class="checkmark-box"></span> </label> </div> <div class="form-group"> <label class="container-checkbox"> Just posting an event that iam aware about this. <input type="checkbox" checked="checked" required> <span class="checkmark-box"></span> </label> </div> <div class="btn-check-log text-center"> <button type="submit" class="btn-check-login ripple-effect">NEXT</button> </div> </form> </div> <div class="tab-pane fade" id="event-details" role="tabpanel" aria-labelledby="event-details-tab"> <form class="seminor-login-form ges-location-from"> <div class="form-group"> <label for="event-title">Event Title</label> <input type="text" placeholder="Event Title" class="form-control ges-form-control" required autocomplete="off"> </div> <div class="form-group"> <label for="event-start-date">Event Start Date</label> <input type='text' placeholder="Event Start Date (MM/DD/YYYY)" class="form-control ges-form-control date" id='datetimepicker1' autocomplete="off"/> </div> <div class="form-group"> <label for="event-end-date">Event End Date</label> <input type='text' placeholder="Event End Date (MM/DD/YYYY)" class="form-control ges-form-control date" id='datetimepicker2' autocomplete="off"/> </div> <div class="form-group"> <label for="last-date-registration">Last Date For Registration</label> <input type="text" placeholder="Last Date For Registration (MM/DD/YYYY)" class="form-control ges-form-control date" id='datetimepicker3' required autocomplete="off"> </div> <div class="form-group"> <label for="venue-city">Venue City</label> <input type="text" placeholder="Event Venue City" class="form-control ges-form-control" required autocomplete="off"> </div> <div class="form-group"> <label for="venue-location">Venue Location</label> <input type="text" placeholder="Event Venue Location" class="form-control ges-form-control" required autocomplete="off"> </div> <div class="form-group"> <label for="full-address">Full Address</label> <input type="text" placeholder="Event Full Address" class="form-control ges-form-control" required autocomplete="off"> </div> <div class="form-group"> <label for="Website">Website</label> <input type="text" placeholder="Event Website" class="form-control ges-form-control" autocomplete="off"> </div> <div class="btn-check-log text-center"> <!-- <button type="submit" class="btn-check-login">LOGIN</button> --> <button type="submit" class="btn-check-login ripple-effect">NEXT</button> </div> </form> </div> <div class="tab-pane fade" id="confirm-details" role="tabpanel" aria-labelledby="confirm-details-tab"> <form class="seminor-login-form"> <ul class="post-final-submit"> <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> </ul> <div class="btn-check-log text-center"> <button type="submit" class="btn-check-login ripple-effect">Submit</button> </div> </form> </div> </div> </div> </section> <section> <footer class="bg-seminor-footer"> <div class="container-fluid"> <div class="row"> <div class="col-sm d-none d-sm-block"> <div class="footer-menu"> <ul class="footer-menu-ul"> <li><a href="index.html" alt="home">Home</a></li> <li><a href="about-us.html" alt="About Us">About Us</a></li> <li><a href="contact-us.html" alt="Contact">Contact</a></li> <li><a href="javascript:void(0)" alt="FAQ/Help">FAQ/Help</a></li> <li><a href="privacy-policy.html" alt="Privacy Policy">Privacy Policy</a></li> <li><a href="termsAndConditions.html" alt="Terms And Conditions">Terms And Conditions</a></li> </ul> </div> </div> <div class="col-sm"> <div class="footer-sub-div"> <div class="footer-sub"> <form method="post" validate="validate" id="subscribe"> <div class="form-group"> <input type="email" required="required" class="form-control-for-FAU-1" name="email" id="email" placeholder="Enter your Email"> </div> <button type="submit" class="btn btn-sub ripple-effect">Subscribe to our Newsletter</button> </form> <div id="subscribeMessage" class="m-t-5"></div> </div> <div class="p-4 d-none d-sm-block seminor-brand-color"> <a href="index.html" class="text-white">SEMINORS</a> </div> <div class="p-1 d-none d-sm-block"> <span class="text-white font-weight-bold">Copyright 2018. All Rights Reserved.</span> </div> </div> </div> <div class="col-sm"> <div class="footer-sub-div"> <p class="text-white font-weight-bold">Follow Us</p> <ul class="footer-fallow-ul"> <li><a href="https://www.facebook.com/" target="_blank"><span><i class="fa fa-facebook" aria-hidden="true"></i></span></a></li> <li><a href="https://twitter.com/" target="_blank"><span><i class="fa fa-twitter" aria-hidden="true"></i></span></a></li> <li><a href="javascript:void(0)"><span><i class="fa fa-rss" aria-hidden="true"></i></span></a></li> <li><a href="javascript:void(0)" target="_blank"><span><i class="fa fa-google-plus" aria-hidden="true"></i></span></a></li> <li><a href="https://www.instagram.com/" target="_blank"><span><i class="fa fa-instagram" aria-hidden="true"></i></span></a></li> <li><a href="https://www.youtube.com/" target="_blank"><span><i class="fa fa-youtube-play" aria-hidden="true"></i></span></a></li> </ul> <div class="p-4 d-block d-sm-none seminor-brand-color"> <a href="index.html" class="text-white">SEMINORS</a> </div> <div class="p-1 d-block d-sm-none"> <span class="text-white font-weight-bold">Copyright 2018. All Rights Reserved.</span> </div> </div> </div> </div> </div> </footer> </section> </body> </html>
*, body{ padding: 0; margin: 0; } @font-face { font-family: Voces-Regular; src: url(../fonts/Voces-Regular.ttf); } body{ font-family: Voces-Regular !important; } input[type="password"] {font:small-caption;font-size:16px} .section-pd{ padding: 2em 0em; } .btn.focus, .btn:focus { outline: 0 !important; box-shadow: 0 0 0 0rem transparent !important; } .carousel-inner img { width: 100%; height: 100%; } /*Profile Card 5*/ .profile-card-5{ margin: 2em 0; } .profile-card-5 .btn{ border-radius:2px; text-transform:uppercase; font-size:12px; padding:7px 20px; } .profile-card-5 .card-img-block { width: 100%; margin: 0 auto; min-height: 170px; } .profile-card-5 .card-img-block img{ min-height: 170px; max-height: 170px; border-radius: 4px 4px 0px 0px; /*box-shadow:0 0 10px rgba(0,0,0,0.63);*/ } .profile-card-5 h5{ color: #000000; font-weight: 600; margin: 0 0 0.5em 0; font-size: 15px; min-height: 40px; } .profile-card-5 p { font-size: 11px; color: #333; } .profile-card-5 .btn-learn-more{ background-color: #20cca4; border-color: #20cca4; color: #fff; } /*.profile-card-5 .btn-learn-more:hover{ color: #20cca4; background-color: #fff; border-color: #20cca4; }*/ /* form animation */ .form-group { position: relative; margin-bottom: 1.5rem; } .form-control{ border: 1px solid #ced4da; border-top: 0px; border-left: 0; border-right: 0; } .form-control-placeholder { position: absolute; top: 0; padding: 7px 0 0 13px; transition: all 200ms; opacity: 0.5; border-top: 0px; border-left: 0; border-right: 0; } .form-control:focus + .form-control-placeholder, .form-control:valid + .form-control-placeholder { font-size: 75%; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); opacity: 1; } /*Social media on hover effect*/ .fa-facebook:hover{ color: #3b5998; } .fa-twitter:hover{ color: #55acee; } .fa-rss:hover{ color: #f57d00; } .fa-google-plus:hover{ color: #dd4b39; } .fa-instagram:hover{ color: #e4405f; } .fa-youtube-play:hover{ color: #ff0000; } /*main-page-slider css*/ .main-page-slider .carousel-inner .carousel-item img{ width: 100% !important; height: auto; } .bg-light-nav { background-color: #ffffff!important; box-shadow: -1px 2px 5px 0px rgba(0, 0, 0, 0.5); } .nav-links-btn .nav-item{ padding: 0 1em; } .main-body .navbar{ padding: 1em 0.5em; } .nav-links-btn .nav-item .nav-link{ background: #fff; color: #20cca4 !important; padding: .5em 1em !important; margin-right: .2em; /* border: 1px solid #20cca4;*/ transition:all ease-in-out .3s } .nav-links-btn .nav-item .nav-link:hover, .nav-links-btn .nav-item .nav-link:focus{ background: #20cca4; color: #fff !important; padding: .5em 1em; margin-right: .2em; } /*footer css start*/ .bg-seminor-footer{ background: #052b42; } ul.footer-menu-ul { list-style-type: none; padding: 2em 1em; } .footer-menu ul.footer-menu-ul li { padding: .5em 0; font-size: 14px; } footer .footer-sub-div { padding: 2em 0; } .footer-sub .form-group { position: relative; display: table; border-collapse: separate; width: 100%; padding: 2% 0; } .footer-sub .form-control-for-FAU-1 { padding: .6rem 12px; height: 45px; } .footer-sub .form-control-for-FAU-1 { display: block; width: 100%; height: 40px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc!important; border-radius: 0!important; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075)!important; box-shadow: inset 0 1px 1px rgba(0,0,0,.075)!important; -webkit-transition: border-color ease-in-out .15s , -webkit-box-shadow ease-in-out .15s!important; -o-transition: border-color ease-in-out .15s , box-shadow ease-in-out .15s!important; transition: border-color ease-in-out .15s , box-shadow ease-in-out .15s!important; } .footer-sub .btn-sub { background: transparent; color: #fff; border-radius: 0; width: 100%; border: 3px solid #fff; padding: .6rem .75rem; font-weight: bold; } .footer-sub .btn-sub:hover{ background-color: #20cca4; color: #fff; border: 3px solid #20cca4; } ul.footer-menu-ul li a { text-decoration: none; color: #fff; } ul.footer-menu-ul li a:hover { color: #20cca4; } ul.footer-fallow-ul { list-style-type: none; } .footer-sub-div ul.footer-fallow-ul li { display: inline-block; padding: 0 .4em; } .footer-fallow-ul li a span i { font-size: 2em; color: #fff; transition: all ease-in-out .3s; } .seminor-brand-color a:hover{ color: #20cca4 !important; } /*Ripple eddect btn*/ a:hover{ color: #ffffff; text-decoration:none; } .themeBtn { color: #ffffff !important; display: inline-block; text-transform: capitalize; border-radius: 1px; letter-spacing: 0.5px; border:0px !important; cursor:pointer; } .themeBtn:hover { background: #20cca4; color: #ffffff; box-shadow: 0 10px 25px -2px rgba(32, 205, 164, 0.5); } .ripple-effect { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); } .ink { display: block; position: absolute; pointer-events: none; border-radius: 50%; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); background: #fff; opacity: 0.5; } .ink.animate { -webkit-animation: ripple .5s linear; -moz-animation: ripple .5s linear; -ms-animation: ripple .5s linear; -o-animation: ripple .5s linear; animation: ripple .5s linear; } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5); } } @-webkit-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2.5); transform: scale(2.5); } } @-moz-keyframes ripple { 100% { opacity: 0; -moz-transform: scale(2.5); transform: scale(2.5); } } @-ms-keyframes ripple { 100% { opacity: 0; -ms-transform: scale(2.5); transform: scale(2.5); } } @-o-keyframes ripple { 100% { opacity: 0; -o-transform: scale(2.5); transform: scale(2.5); } } /*login form validations*/ .sem-form-error{ color: red; } /* Tabs*/ section .section-title { text-align: center; margin-bottom: 0; text-transform: capitalize; padding: 0.5em; } #tabs{ background: #20cca4; color: #eee; padding: 2em 0; } #tabs h6.section-title{ color: #eee; } #tabs ul.nav{ border-bottom: 1px solid #fff; } #tabs .nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active { color: #f3f3f3; background-color: transparent; border-color: transparent transparent #f3f3f3; border-bottom: 4px solid !important; font-size: 20px; font-weight: bold; } #tabs .nav-pills .nav-link { border: 1px solid transparent; border-radius: 0; color: #eee; font-size: 20px; } #tabs .nav-pills .nav-link.active { background-color: transparent; } .event-contact-details ul{ list-style-type: none; } .event-info-block{ padding: 0.5em 0.5em; border: 1px solid #ffffff; box-shadow: 0px 0px 4px #ffffff; margin: 1em 0; } .event-contact-details ul h3{ margin: 0; padding: 0.2em; font-size: 20px; } .event-contact-details ul p{ margin: 0; padding: 0.5em; font-size: 14px; } .event-info-contact-mail, .event-info-contact-mail:hover{ color: #fff; } /*post your event details css start from here*/ #post-your-event-tabs{ padding: 2em 0; } #post-your-event-tabs h6.section-title{ color: #eee; } #post-your-event-tabs ul.nav{ border-bottom: 1px solid #fff; } #post-your-event-tabs .nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active { color: #f3f3f3; background-color: transparent; border-color: transparent transparent #f3f3f3; border-bottom: 4px solid !important; font-size: 20px; font-weight: bold; } #post-your-event-tabs .nav-pills .nav-link { border: 1px solid transparent; border-radius: 0; color: #20cca4; font-size: 20px; } #post-your-event-tabs .nav-pills .nav-link.active { background-color: transparent; } #post-your-event-tabs ul.nav { border-bottom: 1px solid #20cca4; } .seminor-login-form ul.post-final-submit{ list-style-type: circle; } .ges-location-from .form-group label { color: #63666A; margin: 0; } .ges-location-from .ges-form-control { border: 0px solid #ccc; border-bottom: 1px solid #ccc; border-radius: 0px; } .ges-location-from input::placeholder { color: #63666A; opacity: 0.5; }
$(document).ready(function(){ var navHeight=$('nav').height(); $('body').css({'padding-top':navHeight+35+'px'}); $('[data-toggle="popover"]').popover({ trigger: "hover" }); $('#datetimepicker1, #datetimepicker2, #datetimepicker3').datetimepicker({ minDate:new Date(), format: 'MM/DD/YYYY' }); $(".ripple-effect").click(function(e){ var rippler = $(this); // create .ink element if it doesn't exist if(rippler.find(".ink").length == 0) { rippler.append("<span class='ink'></span>"); } var ink = rippler.find(".ink"); // prevent quick double clicks ink.removeClass("animate"); // set .ink diametr if(!ink.height() && !ink.width()) { var d = Math.max(rippler.outerWidth(), rippler.outerHeight()); ink.css({height: d, width: d}); } // get click coordinates var x = e.pageX - rippler.offset().left - ink.width()/2; var y = e.pageY - rippler.offset().top - ink.height()/2; // set .ink position and add class .animate ink.css({ top: y+'px', left:x+'px' }).addClass("animate"); }); }); /* Ripple-effect animation */

Related: See More


Questions / Comments: