<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 ---------->
<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 */
