<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 ----------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div class="pos-rel"> <!-- Nav pills --> <ul class="nav nav-pills justify-content-center nav-justified" role="tablist"> <li class="nav-item"> <a class="nav-link active btn btn-primary" data-toggle="pill" href="#organizer-details">Organizer Details</a> </li> <li class="nav-item"> <a class="nav-link btn btn-primary" data-toggle="pill" href="#event-details">Event Details</a> </li> <li class="nav-item"> <a class="nav-link btn btn-primary" data-toggle="pill" href="#confirm-details">Confirm Details</a> </li> </ul> <div class="connected-line"></div> <!-- Tab panes --> <div class="tab-content"> <div id="organizer-details" class="container tab-pane active"> <form class="seminor-login-form"> <div class="form-group"> <input type="text" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="contact-person">Contact Person</label> </div> <div class="form-group"> <input type="email" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="contact-email">Contact Email</label> </div> <div class="form-group"> <input type="email" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="alternative-email">Alternative Email</label> </div> <div class="form-group"> <input type="text" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="contact-number">Contact Number</label> </div> <div class="form-group"> <input type="text" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="alternative-number">Alternative Number</label> </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"> <button type="submit" class="btn-check-login">LOGIN</button> </div> </form> </div> <div id="event-details" class="container tab-pane fade"> <form class="seminor-login-form"> <div class="form-group"> <input type="text" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="event-title">Event Title</label> </div> <div class="form-group"> <input type="datetime-local" max="3000-12-31" min="1000-01-01" placehoder="Event Start Date" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="event-start-date">Event Start Date</label> </div> <div class="form-group"> <input type="datetime-local" max="3000-12-31" min="1000-01-01" placehoder="Event End Date" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="event-end-date">Event End Date</label> </div> <div class="form-group"> <input type="text" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="last-date-registration">Last Date For Registration</label> </div> <div class="form-group"> <input type="text" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="venue-city">Venue City</label> </div> <div class="form-group"> <input type="text" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="venue-location">Venue Location</label> </div> <div class="form-group"> <input type="text" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="full-address">Full Address</label> </div> <div class="form-group"> <input type="text" class="form-control" required autocomplete="off"> <label class="form-control-placeholder" for="Website">Website</label> </div> <div class="btn-check-log"> <button type="submit" class="btn-check-login">LOGIN</button> </div> </form> </div> <div id="confirm-details" class="container tab-pane fade"> <br> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> </div> </div> </div> </div> </div>

.pos-rel{ position:relative; } .pos-rel .nav-item{ margin:0 1em; } .connected-line{ border-bottom: 1px solid #007bff; position: relative; top: -20px; z-index: -1; } .seminor-login-modal-body .close{ position: relative; top: -45px; left: 10px; color: #1cd8ad; } .seminor-login-modal-body .close{ opacity:0.75; } .seminor-login-modal-body .close:focus, .seminor-login-modal-body .close:hover { color: #39e8b0; opacity: 1; text-decoration: none; outline:0; } .seminor-login-modal .modal-dialog .modal-content{ border-radius:0px; } /* form animation */ .seminor-login-form .form-group { position: relative; margin-bottom: 1.5em !important; } .seminor-login-form .form-control{ border: 0px solid #ced4da !important; border-bottom:1px solid #adadad !important; border-radius:0 !important; } .seminor-login-form .form-control:focus, .seminor-login-form .form-control:active{ outline:none !important; outline-width: 0; border-color: #adadad !important; box-shadow: 0 0 0 0.2rem transparent; } *:focus { outline: none; } .seminor-login-form{ padding: 2em 0 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; } .container-checkbox input { position: absolute; opacity: 0; cursor: pointer; } .checkmark-box { position: absolute; top: -5px; left: 0; height: 25px; width: 25px; background-color: #adadad; } .container-checkbox { display: block; position: relative; padding-left: 40px; margin-bottom: 20px; cursor: pointer; font-size: 14px; font-weight: bold; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 1.1; } .container-checkbox input:checked ~ .checkmark-box:after { color: #fff; } .container-checkbox input:checked ~ .checkmark-box:after { display: block; } .container-checkbox .checkmark-box:after { left: 10px; top: 4px; width: 7px; height: 15px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .checkmark:after, .checkmark-box:after { content: ""; position: absolute; display: none; } .container-checkbox input:checked ~ .checkmark-box { background-color: #f58220; border: 0px solid transparent; } .btn-check-log .btn-check-login { font-size: 16px; padding: 10px 0; } button.btn-check-login:hover { color: #fff; background-color: #f58220; border: 2px solid #f58220; } .btn-check-login { color: #f58220; background-color: transparent; border: 2px solid #f58220; transition: all ease-in-out .3s; } .btn-check-login { display: inline-block; padding: 12px 0; margin-bottom: 0; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border-radius: 0; width: 100%; } .forgot-pass-fau a { text-decoration: none !important; font-size: 14px; } .text-primary-fau { color: #1959a2; } .select-form-control-placeholder{ font-size: 100%; padding: 7px 0 0 13px; margin: 0; }