HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="fix-rel" style="z-index:3;">
<nav class="navbar navbar-default navbar-custom ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle icon" data-toggle="collapse" data-target="#myNavbar">
<span class="inner-icon">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</span>
</button>
<a class="navbar-brand" href="#">INet Restaurant </a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div class="flex-container">
<div class="flex-main" style="">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">
<span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-earphone"></span> Contact Us <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu1">
<li><a href="contactus.html">On our site</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">On Facebook</a></li>
<li><a href="#">On Twitter</a></li>
</ul>
</li>
<li><a href="table.html">Table</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span> Menu <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu2">
<li class="dropdown-header "></li>
<li ><a href="table.html"> Table</a></li>
<li role="separator" class="divider"></li>
<li ><a href="./maincourse/pizza.html"> Pizza</a></li>
<li ><a href="./maincourse/pasta.html"> Pasta</a></li>
<li class=" main1"><a href="./maincourse/lazagna.html"> Lasagna</a></li>
<li role="separator" class="divider"></li>
<li ><a href="./options/appetizer.html"> Appetizers</a></li>
<li ><a href="./options/sallad.html"> Sallads</a></li>
<li ><a href="./options/dessert.html" >Desserts</a></li>
<li role="separator" class="divider"></li>
<li ><a href="./drinks/alcoholicdrink.html"> Alcoholic Drinks</a></li>
<li ><a href="./drinks/nonalcoholicdrink.html"> Non Alcoholic Drinks</a></li>
<li role="separator" class="divider"></li>
<li ><a href="lunchbuffet.html"> Lunch Buffet</a></li>
<li ><a href="weekendbrunch.html"> Weekend Brunch</a></li>
</ul>
</li>
<li><a href="order.html">Order</a></li>
<li><a href="news.html">News</a></li>
</ul>
</div>
<div class="flex-side" style="">
<ul class="nav navbar-nav navbar-right navbar-navside1">
<li><a href="registration.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="container-fluid" style="z-index:2;">
<div class="jumbotron jumbo toppadding" style="z-index:1;">
<a href="#"><h2 class="center1">INET Restaurant</h2></a>
<p class="center1">Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile-first projects on the web.</p>
<p class="center1">The home of the INET Restaurant</p>
<p class="center1">Registration</p>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div class="row main-content">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="panel panel-default headcustomsd bodycustomsd">
<div class="panel-heading "> <h1>Registration Form</h1></div>
<div class="panel-body ">
<div class="bs-example">
<form class="form-horizontal register registration"
action="/examples/actions/confirmation.php" method="post" style="z-index:1;">
<div class="form-group">
<label class="control-label col-sm-3" for="fname">
<span class="glyphicon glyphicon-star starrq"></span> First Name :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 fst-name-glyph">
<i class="glyphicon glyphicon-user"></i></span>
<input type="email" class="form-control check inputbgr_reg fst-name-field"
id="fname" placeholder="Enter First Name" name="First Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your email</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="lastName3">
<span class="glyphicon glyphicon-star"></span> Last Name :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 lst-name-glyph">
<i class="glyphicon glyphicon-user"></i></span>
<input type="email" class="form-control check inputbgr_reg lst-name-field"
id="lastName3" placeholder="Enter Last Name" name="Last Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your last or family name.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="email3">
<span class="glyphicon glyphicon-star"></span> Email Address :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 email-glyph">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</span>
<input id="email3" type="text" class="form-control check inputbgr_reg email-field"
name="E-mail" placeholder="E-mail">
</div>
<div class="inputstatus">
<span class="error">Please enter your E-mail.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="phoneNumber3">
<span class="glyphicon glyphicon-star"></span> Phone Number :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 phone-glyph">
<i class="fa fa-phone" aria-hidden="true"></i>
</span>
<input type="tel" class="form-control check inputbgr_reg phone-field"
id="phoneNumber3" placeholder="Phone Number" name="Phone Number">
</div>
<div class="inputstatus">
<span class="error">Please enter your phone number.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<!-- <label class="control-label col-sm-3" for="areacode3 telnum3">Contact Tel. :</label> -->
<label class="control-label col-sm-3" for="areacode3">Contact Tel. :</label>
<div class="col-sm-9">
<span class="input-group-addon glyph3 phone2-glyph" style="width:6%;height:34px;float:left;">
<i class="fa fa-phone" aria-hidden="true"></i>
</span>
<input id="areacode3" type="tel" name="areacode" class="form-control inputbgr_reg phone2-field" placeholder="Area code" style="width:34%;float:left;">
<input id="telnum3" type="tel" name="phone" class="form-control inputbgr_reg phone2-field" placeholder="Phone number" style="width:60%;float:left;">
</div>
<div class="col-xs-12 col-sm-12">
<!-- <div class="control-label col-xs-3" for="telnum3"> </div>-->
<div class="control-label col-xs-3"> </div>
<div class="col-xs-12 col-sm-9">
<div class="help-block with-errors texttel1" style="width:40%;float:left;" >Please enter your areacode</div>
<div class="help-block with-errors texttel1" style="width:60%;float:left;">Please enter your phone</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="postalAddress">
<span class="glyphicon glyphicon-star"></span> Postal Address :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 address-glyph">Postal :</span>
<textarea rows="3" class="form-control check inputbgr_reg address-field"
id="postalAddress" name="Postal Address" placeholder="Postal Address"></textarea>
</div>
<div class="inputstatus">
<span class="error">Please enter your postal address.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="ZipCode3">
<span class="glyphicon glyphicon-star"></span> Zip Code :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 zip-glyph">zip code</span>
<input type="text" class="form-control check inputbgr_reg zip-field"
id="ZipCode3" name="zip code" placeholder="Zip Code">
</div>
<div class="inputstatus">
<span class="error">Please enter your ZIP code.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group" >
<label class="control-label col-sm-3" for="your-city">
<span class="glyphicon glyphicon-star"></span> City:</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 city-glyph">City</span>
<div data-toggle="collapse" data-target="#demo1">
<input type="text" class="form-control check inputbgr_reg city-field"
id="your-city"
placeholder="Enter your City"
name="Your City">
</div>
</div>
<div class="inputstatus">
<span class="error">Please click on the input field for the list of cities.</span>
<span class="feedback"></span>
</div>
<div id="demo1" class="collapse">
<h4>List of available cities</h4>
<ul class="list-group">
<li class="list-group-item">London</li>
<li class="list-group-item">Birmingham</li>
<li class="list-group-item">Brighton</li>
<li class="list-group-item">Cardiff</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">
<span class="glyphicon glyphicon-star"></span> Password :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 pwd-glyph">
<i class="fa fa-lock"></i>
</span>
<input id="pwd" type="text" class="form-control check inputbgr_reg pwd-field"
name="Password" placeholder="Enter Password">
</div>
<div class="inputstatus">
<span class="error">Please enter your password.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwdre">
<span class="glyphicon glyphicon-star"></span> Retype Password:</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 re-glyph">
<i class="fa fa-lock"></i>
</span>
<input id="pwdre" type="text" class="form-control check inputbgr_reg re-field"
name="Retype Password" placeholder="Retype Password">
</div>
<div class="inputstatus">
<span class="error">Please retype your password.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="dropdown">
<label class="control-label col-xs-3 " >Please Choose </label>
<div class=" col-xs-9 ">
<div class="row">
<div class=" col-xs-6 col-sm-3 col-md-3 col-lg-6 ">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default buttonsocial dropdown-toggle"> Style <span class="caret"></span></button>
<ul class="dropdown-menu button21">
<li><a href="#">Style-1</a></li>
<li class="divider"></li>
<li><a href="#">Style-2</a></li>
<li><a href="#">Style-3</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default buttonsocial dropdown-toggle"> Font height<span class="caret"></span></button>
<ul class="dropdown-menu button21">
<li><a href="#">Style-1</a></li>
<li class="divider"></li>
<li><a href="#">Style-2</a></li>
<li><a href="#">Style-3</a></li>
</ul>
</div>
</div>
<div class=" col-xs-6 col-sm-3 col-md-3 col-lg-6 ">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default buttonsocial dropdown-toggle"> Language <span class="caret"></span></button>
<ul class="dropdown-menu button31">
<li><a href="#">English</a></li>
<li class="divider"></li>
<li><a href="#">Hungarian</a></li>
<li><a href="#">Romanian</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default buttonsocial dropdown-toggle"> Cities <span class="caret"></span></button>
<ul class="dropdown-menu button31">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">London</a></li>
<li role="presentation" class="divider"></li>
<li ><a href="#">Cardiff</a></li>
<li ><a href="#">Manchester</a></li>
<li ><a href="#">Brighton</a></li>
<li ><a href="#">Bristol</a></li>
<li ><a href="#">Birmingham</a></li>
<li ><a href="#">Swansea</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<h5><label class="control-label col-xs-3" >How can we<br> contact you ?</label></h5>
<div class="col-xs-9">
<div class="input-group">
<label class="container"> Phone
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container"> E-mail
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container"> Post
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Gender :</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="genderRadios" value="male" required> Male
</label>
</div>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="genderRadios" value="female" required> Female
</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<input type="checkbox" value="news"> Send me latest news and updates.
</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<input type="checkbox" value="agree"> I agree to the <a href="#">Terms and Conditions</a>.
</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<span class="glyphicon glyphicon-star"></span>
The fields marked with star are required.
</label>
</div>
</div>
<br>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<input class="regsmt btn1" type="submit" value="Submit">
<input class=" regreset" type="reset" onclick="myFunction()" value="Reset form">
</div>
</div>
</form>
</div>
</div>
<div class="panel-footer footercustomsd"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!--Nested rows within a column-->
<div class="row ">
<div class="col-xs-12 col-sm-6 col-md-12">
<div class="sidebar-content">
<div class="panel panel-default headcustomsd bodycustomsd">
<div class="panel-heading "><h2 >Offer of the Week</h2></div>
<div class="panel-body ">
Try our wonderful <span class="red">new</span> Margherita.<br />
A better recipe and virtually tastier than ever. <br />
Enjoy every byte!
</div>
<div class="panel-footer footercustomsd"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-12">
<div class="sidebar-content">
<div class="panel panel-default headcustomsd bodycustomsd">
<div class="panel-heading"><h2 >Social Media</h2></div>
<div class="panel-body">
<ul class="nolistmark">
<li>
<!--<button type="button" class="btn btn-lg btn-fb">-->
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-facebook left"> Facebook</i></button>
</li>
<li>
<!--<button type="button" class="btn btn-tw">-->
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-twitter left"> Twitter</i></button>
</li>
<li>
<!--<button type="button" class="btn btn-li">-->
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-linkedin left"></i> Linkedin</button>
</li>
<li>
<!--<button type="button" class="btn btn-ins">-->
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-instagram left"></i> Instagram</button>
</li>
<li>
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-wordpress left"> Wordpress</i>
</button>
</li>
</ul>
</div>
<div class="panel-footer footercustomsd"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="z-index:2;" >
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 fluid bottompadding">
<div class="sidebar-content bottommargin">
<div class="panel panel-default headcustomsd bodycustomsd">
<div class="panel-heading headcustomsd"><h2>Address</h2></div>
<div class="panel-body bodycustomsd">
<address>Virtual Pizza Restaurant Ltd.<br>
1, Pizza Avenue<br>
Pizza House, London<br>
PI1 2ZA<br>
Great Britain<br>
Tel.: +44 1234 5678<br>
Fax: +44 8765 4321<br>
Email: info<code>@</code>vpp.com
</address>
</div>
<div class="panel-footer footercustomsd"></div>
</div>
</div>
</div>
</div> <!-- end row -->
<footer id="row" style="z-index:2;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 footerdiv">
<p>2017 © INET Restaurant. All Rights Reserved.</p>
</div>
<!-- end row -->
</footer>
body {
background-color: lavender;
}
/* custom navigation start */
/* navbar */
.navbar-custom {
/*
background-color: #af4600;
border-color: #af4600;*/
background: #0a4b33;
border: 0;
}
/* navbar brand*/
.navbar-custom .navbar-brand {
color: lightgreen;
}
.navbar-custom .navbar-brand:hover {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
/* navbar top level text and links */
.navbar-default .navbar-nav>.active>a {
color: blue;
}
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
color: red;
}
.navbar-custom .navbar-nav>li,
.navbar-custom .navbar-nav>li>a {
color: yellow;
}
.navbar-custom .navbar-navside1>li,
.navbar-custom .navbar-navside1>li>a {
color: #ffffff;
}
/* top level link when mouse is hovering */
.navbar-custom .navbar-nav>li>a:hover,
.navbar-custom .navbar-nav>li>a:focus {
/*
color: #ffffff;
background-color: #af4600;
color: #ffffff;*/
background-color: green;
color: white;
text-shadow: 3px 3px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
.navbar-custom .navbar-navside1>li>a:hover,
.navbar-custom .navbar-navside1>li>a:focus {
/*
color: #ffffff;
background-color: #af4600;*/
color: cyan;
background-color: darkgreen;
}
/* top level parent link when the drop down is open */
.navbar-custom .navbar-nav>.open>a,
.navbar-custom .navbar-nav>.open>a:hover,
.navbar-custom .navbar-nav>.open>a:focus {
background-color: cyan;
/*background-color: #FF6600;*/
color: red;
}
/* level 1 menu bar */
/*
.navbar-custom .dropdown-menu {
/* background-color: #FF6600;
background-color: cyan;
border-color: #af4600;*/
background-color: pink;
border-color: pink;
color: #ffffff;
}
*/
/* level 1 menu bar text and links*/
.navbar-custom .dropdown-menu>li,
.navbar-custom .dropdown-menu>li>a {
color: #ffffff;
}
/* level 1 menu bar hovering */
.navbar-custom .dropdown-menu>li>a:hover,
.navbar-custom .dropdown-menu>li>a:focus {
color: #ffffff;
background-color: #af4600;
}
/* mobile toggle button formatting */
.navbar-custom .navbar-toggle {
/*border-color: #FF6600; */
border-color: red;
}
/* mobile toggle button mouse hover */
.navbar-custom .navbar-toggle:focus,
.navbar-custom .navbar-toggle:hover {
/* background-color: #FF6600;*/
background-color: lightgreen;
}
/* mobile toggle button icon bar tower */
.navbar-custom .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-custom .navbar-toggle .icon-bar:hover {
background-color: red;
}
/* mobile 2nd level menu hover */
.navbar-custom .navbar-nav .open .dropdown-menu1>li>a:focus,
.navbar-custom .navbar-nav .open .dropdown-menu1>li>a:hover {
/*background-color: #FF6600;
color: #ffffff;
*/
background-color: purple;
color: pink;
}
.navbar-custom .navbar-nav .open .dropdown-menu2>li>a:focus,
.navbar-custom .navbar-nav .open .dropdown-menu2>li>a:hover {
/*background-color: #FF6600;
color: #ffffff;
*/
background-color: green;
color: yellow;
}
/* mobile 2nd level link */
.navbar-custom .navbar-nav .open .dropdown-menu2 {
/* color: #ffffff; */
background-color: lightgreen;
}
.navbar-custom .navbar-nav .open .dropdown-menu1 {
/* color: #ffffff; */
background-color: lightblue;
}
.navbar-custom .navbar-nav .open .dropdown-menu1> li> a {
/* color: #ffffff; */
color: blue;
}
.navbar-custom .navbar-nav .open .dropdown-menu2>li>a {
/* color: #ffffff; */
color: green;
}
.navbar{
border-radius:0;
background: #0a4b33;
}
/* custom navigation end */
.navdiv{
width:100%;
height:auto:
}
/* hamburg icon custom */
.inner-icon{
/*
position:absolute;
top:5%;
right:5%;*/
display:flex;
flex-direction: column;
}
.bar1, .bar2, .bar3{
/*
position:relative;*/
top:0px;
height:4px;
width:28px;
margin:2px;
background:red;
transition:0.5s;
}
.rotate45dg {
transform:;
-ms-transform: rotate(45deg); /* IE 9 */
transform:rotate(45deg) translate(7px, 6px);
transition:0.5s;
}
.rotate-45dg {
-ms-transform: rotate(45deg); /* IE 9 */
transform:rotate(-45deg) translate(7px, -7px);
transition:0.5s;
}
.opacity{
opacity:0;
}
.blue{background:blue;}
/* hamburg icon custom end */
/* navbar controll with @media */
/* jumbotron start */
.jumbo{
background-color:cyan;
}
.jumbotron h2{
color: red;
}
.jumbotron p{
color: green;
}
/* jumbotron end */
/* social button start */
.nolistmark{
list-style-type:none;
}
.buttonsocial {
width:150px;
font-size: 18px;
background: #0097a7;
background: linear-gradient(#79ff4d, #c6ffb3, #53ff1a);
color:red ;
}
.buttonsocial:hover {
background: #0097a7;
background: linear-gradient(#4d79ff, #99b3ff, #0033cc);
color:purple;
}
/* social button end */
/*panels side*/
/*panels side*/
.headcustomsd {
border-color: 0;
}
.headcustomsd > .panel-heading {
background-color:#ffd480;
color: green;
border-color: 0;
}
.headcustomsd2 > .panel-heading {
background-color:#ffeecc;
color: green;
border-color: 0;
}
.bodycustomsd {
background-color:#ffeecc;
}
.bodycustomsd > .panel-body {
color: green;
}
/*body styling side*/
.bodycustomsd2 {
background:#ffeecc;
color:#e60000;
/*height:270px;*/
}
/*footer styling side*/
.footercustomsd {
background:#ffeecc;
color:#e60000!important;
}
/*panels side end*/
.footercustomcity {
background:#ffd480!important;
color:#e60000!important;
height:56px;
}
form.order .form-control::-moz-placeholder {
color: green;
opacity: 1;
}
form.order .form-control:-ms-input-placeholder {
color: green;
}
form.order .form-control::-webkit-input-placeholder {
color: green;
}
/*
#email2, #firstName2, #lastName2,#phoneNumber2,#areacode2,#telnum21,#postalAddress2,#ZipCode2,#msg,#feedback{
background-color:#ffe0b2;
}
.inputbgr {
background-color:#ffe0b2;
}*/
.glyph2{
background:#ff3377;
color:#ffffff;
}
.glyph2:hover{
background:purple;
color:#ffffff;
}
.inputbgr {
background-color:#ffe0b2;
border-color: 0;
color: red;
}
/*
.inputbgr:focus {
background-color: lightgreen;
border-color: lightgreen;
color: red;
}
.inputbgr:hover {
border-color: green;
}
.fieldcontent_order{
color:green;
}
.fieldcontent_order :hover{
color:red;
}
/*
textarea:focus {
background-color: pink;
color: blue;
}
textarea:hover {
border-color: red;
}*/
/*order form */
.orderreset {
padding: 15px 15px;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.orderreset:hover {background-color: #3e8e41}
.orderreset:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.ordersmt {
padding: 15px 15px;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: blue;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.ordersmt:hover {background-color: darkblue}
.ordersmt:active {
background-color: darkblue;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/*order form end*/
/*registration form */
.regreset {
padding: 15px 15px;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.regreset:hover {background-color: #3e8e41}
.regreset:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.regsmt {
padding: 15px 15px;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: blue;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.regsmt:hover {background-color: darkblue}
.regsmt:active {
background-color: darkblue;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/*registration form end*/
/*contact form */
.contactreset {
padding: 15px 15px;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.contactreset:hover {background-color: #3e8e41}
.contactreset:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.contactsmt {
padding: 15px 15px;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: blue;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.contactsmt:hover {background-color: darkblue}
.contactsmt:active {
background-color: darkblue;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/*contact form end*/
/*contact form */
/*
#email, #firstName, #lastName,#phoneNumber,#areacode,#telnum,#postalAddress,#ZipCode,#msg,#feedback{
background-color:pink;
}*/
.glyph{
background:#ff9966;
color:#ff0000;
}
/*
*/
.inputbgr_contact {
background-color:pink;
border-color: pink;
color: purple;
}
/*
.inputbgr_contact:focus {
background-color: lightblue;
border-color: lightblue;
color: blue;
}
.inputbgr_contact:hover {
border-color: red;
}
*/
.textarea_contact{
background-color:pink;
border-color: pink;
color: purple;
}
.textarea_contact:focus {
background-color: lightblue;
border-color: lightblue;
color: blue;
}
.textarea_contact:hover {
border-color: red;
}
form.contact .form-control::-moz-placeholder {
color: purple;
opacity: 1;
}
form.contact .form-control:-ms-input-placeholder {
color: purple;
}
form.contact .form-control::-webkit-input-placeholder {
color: purple;
}
/*contact form end*/
/*registration form */
.glyph3{
background:darkgreen;
color:yellow;
}
/*
#email3, #firstName3, #lastName3,#phoneNumber3,#areacode3,#telnum3,#postalAddress3,#ZipCode3,#msg,#feedback{
background-color:lightgreen;
}
*/
.inputbgr_reg {
background-color:lightgreen;
border-color: lightgreen;
border: 1px solid lightgreen;
color: red;
}
.inputbgr_reg:focus {
background-color: lightgreen;
border-color: lightgreen;
border: 1px solid lightgreen;
color: purple;
}
.inputbgr_reg:hover {
border-color: lightgreen;
}
form.registration .form-control::-moz-placeholder {
color: red;
opacity: 1;
}
form.registration .form-control:-ms-input-placeholder {
color: red;
}
form.registration .form-control::-webkit-input-placeholder {
color: red;
}
form.registration .form-control::-o-placeholder {
color: red;
opacity: 1;
}
form.registration .form-control::-placeholder {
color: red;
opacity: 1;
}
/*registration form end*/
/*login modal form */
.modalreset {
padding: 15px 15px;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.modalreset:hover {background-color: #3e8e41}
.modalreset:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.modalsmt {
padding: 15px 15px;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: blue;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.modalsmt:hover {background-color: darkblue}
.modalsmt:active {
background-color: darkred;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.modal_cancel {
padding: 15px 15px;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: red;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.modal_cancel:hover {background-color: darkred}
.modal_cancel:active {
background-color: darkred;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/*login modal form end*/
@media screen and (min-width: 768px) {
body {
background-color: lightgreen;
margin-top:128px;
margin-bottom:50px;
}
.fix-rel{
position:fixed;
height:auto;
width:100%;
top:0;
left:0;
}
.flex-container {
clear:both;
display: flex;
flex-direction: column-reverse;
}
.flex-main {
width:100%;
display: flex;
justify-content: center;
}
.navbar{
border-bottom:6px solid red;
}
.navbar-brand{
font-size:28px;
}
.navbar-right{
margin-top:-5rem;
}
.flex-container > .flex-main {
justify-content: center;
}
.flex-side {
display: flex;
justify-content: flex-end;
}
/*.flex-direction: row-reverse;*/
/* footer start */
.footerdiv{
background: #69f0ae!important;
position:fixed;
bottom:0;
left:0;
width:100%;
height:28px;
background-color:green;
color:purple;
z-index:4;
}
/* footer end */
}
@media screen and (max-width: 767px) {
body {
background-color: lavender;
}
.fix-rel{
width:100%;
height:auto;
position:static;
top:0;
left:0;
}
.flex-container {
display: flex;
flex-direction: column;
}
.flex-main {
display: flex;
justify-content: left;
}
.navbar-custom .navbar-brand{
font-size:22px;
color:orange;
}
.navbar{
border-bottom:6px solid purple;
}
.flex-side {
display: flex;
justify-content: flex-start;}
/*.flex-direction: row-reverse;*/
/* footer start */
.footerdiv {
bottom:0;
left:0;
width:100%;
height:28px;
background:green;
color:yellow;
}
/* footer end */
/*body styling side*/
.bodycustomsd2 {
background:#ffeecc;
color:#e60000;
/*height:270px;*/
}
/*footer styling side*/
}
/* css file copy and */
.warning {
color:red;
}
.ok {
color:green;
}
.inputstatus {
position: static;
background:#ffeecc;
padding-top:7px;
width:100%;
}
.feedback {
float: right;
right: 4px;
}
.star {
float: left;
left: 6px;
color: green;
}
.error {
position: relative;
left: 12px;
}
.texttel1{
color:purple;
}
/*
.button2 {
background-color:pink;
}
.button2:hover {
background-color:darkred;
}
.button2:focus {
background-color:darkred;
}
.button2 {
background-color:pink;
}*/
/* button menu lightblue*/
.button21 {
background-color:lightblue;
}
.button21 > li > a {
background-color:lightblue;
}
.button21 > li > a:hover {
background-color:gray;
color:white;
}
.buttonsocial.active.focus,
.btn-default.active.focus,
.buttonsocial.active:focus,
.btn-default.active:focus,
.buttonsocial.active:hover,
.btn-default.active:hover,
.buttonsocial:active.focus,
.btn-default:active.focus,
.buttonsocial:active:focus,
.btn-default:active:focus,
.buttonsocial:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.buttonsocial.focus,
.open > .btn-default.active:focus,
.open > .dropdown-toggle.buttonsocial:focus,
.open > .btn-default.active:focus,
.open > .dropdown-toggle.buttonsocial:hover,
.open > .btn-default.active:hover{
background-color:cyan;
}
/* button menu end*/
/* button menu */
.button31 {
background-color:lightgreen;
}
.button31 > li > a {
background-color:lightgreen;
}
.button31 > li > a:hover {
background-color:green;
color:yellow;
}
.button3.active.focus,
.btn-default.active.focus,
.button3.active:focus,
.btn-default.active:focus,
.button3.active:hover,
.btn-default.active:hover,
.button3:active.focus,
.btn-default:active.focus,
.button3:active:focus,
.btn-default:active:focus,
.button3.active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.button3.focus , .btn-default.active:focus,
.open > .dropdown-toggle.button3:focus , .btn-default.active:focus,
.open > .dropdown-toggle.button3:hover , .btn-default.active:hover{
background-color:pink;
}
/* button menu end*/
/* The container */
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-top: 16px;
margin-bottom: 16px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox background-color: #eee;*/
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: pink;
border: solid 1px red;
}
/* On mouse-over, add a grey background color background-color: #ccc;*/
.container:hover input ~ .checkmark {
background-color: lightblue;
border: solid 1px blue;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: green;
border: solid 1px red;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 15px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* checkboxes */
/* The container */
.container2 {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container2 input.in1 {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark2 {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: pink;
}
/* On mouse-over, add a grey background color */
.container2:hover input.in1 ~ .checkmark2 {
background-color: lightgreen;
}
/* When the checkbox is checked, add a blue background */
.container2 input.in1:checked ~ .checkmark2 {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark2:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container2 input.in1:checked ~ .checkmark2:after {
display: block;
}
/* Style the checkmark/indicator */
.container2 .checkmark2:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.center1{
text-align:center;
}
$(document).ready(function(){
$(".icon").click(function(){
$(".bar1").toggleClass("blue");
$(".bar1").toggleClass("rotate45dg");
$(".bar2").toggleClass("opacity");
$(".bar3").toggleClass("rotate-45dg");
});
// form
// first name glyph
$(".fst-name-glyph").on("mouseenter", function(){
$(".fst-name-glyph").css("background-color", "darkred");
$(".fst-name-glyph").css("color", "orange");
});
$(".fst-name-glyph").on("mouseleave", function(){
$(".fst-name-glyph").css("background-color", "darkgreen");
$(".fst-name-glyph").css("color", "yellow");
});
$(".fst-name-glyph").on("mouseenter", function(){
$(".fst-name-field").css("background-color", "pink");
});
$(".fst-name-glyph").on("mouseleave", function(){
$(".fst-name-field").css("background-color", "lightgreen");
});
// first name field
$(".fst-name-field").on("mouseenter", function(){
$(".fst-name-glyph").css("background-color", "darkred");
$(".fst-name-glyph").css("color", "orange");
});
$(".fst-name-field").on("mouseleave", function(){
$(".fst-name-glyph").css("background-color", "darkgreen");
$(".fst-name-glyph").css("color", "yellow");
});
$(".fst-name-field").on("mouseenter", function(){
$(".fst-name-field").css("background-color", "pink");
});
$(".fst-name-field").on("mouseleave", function(){
$(".fst-name-field").css("background-color", "lightgreen");
});
// last name glyph
$(".lst-name-glyph").on("mouseenter", function(){
$(".lst-name-glyph").css("background-color", "darkred");
$(".lst-name-glyph").css("color", "orange");
});
$(".lst-name-glyph").on("mouseleave", function(){
$(".lst-name-glyph").css("background-color", "darkgreen");
$(".lst-name-glyph").css("color", "yellow");
});
$(".lst-name-glyph").on("mouseenter", function(){
$(".lst-name-field").css("background-color", "pink");
});
$(".lst-name-glyph").on("mouseleave", function(){
$(".lst-name-field").css("background-color", "lightgreen");
});
// last name field
$(".lst-name-field").on("mouseenter", function(){
$(".lst-name-glyph").css("background-color", "darkred");
$(".lst-name-glyph").css("color", "orange");
});
$(".lst-name-field").on("mouseleave", function(){
$(".lst-name-glyph").css("background-color", "darkgreen");
$(".lst-name-glyph").css("color", "yellow");
});
$(".lst-name-field").on("mouseenter", function(){
$(".lst-name-field").css("background-color", "pink");
});
$(".lst-name-field").on("mouseleave", function(){
$(".lst-name-field").css("background-color", "lightgreen");
});
// email glyph
$(".email-glyph").on("mouseenter", function(){
$(".email-glyph").css("background-color", "darkred");
$(".email-glyph").css("color", "orange");
});
$(".email-glyph").on("mouseleave", function(){
$(".email-glyph").css("background-color", "darkgreen");
$(".email-glyph").css("color", "yellow");
});
$(".email-glyph").on("mouseenter", function(){
$(".email-field").css("background-color", "pink");
});
$(".email-glyph").on("mouseleave", function(){
$(".email-field").css("background-color", "lightgreen");
});
// email field
$(".email-field").on("mouseenter", function(){
$(".email-glyph").css("background-color", "darkred");
$(".email-glyph").css("color", "orange");
});
$(".email-field").on("mouseleave", function(){
$(".email-glyph").css("background-color", "darkgreen");
$(".email-glyph").css("color", "yellow");
});
$(".email-field").on("mouseenter", function(){
$(".email-field").css("background-color", "pink");
});
$(".email-field").on("mouseleave", function(){
$(".email-field").css("background-color", "lightgreen");
});
// phone glyph
$(".phone-glyph").on("mouseenter", function(){
$(".phone-glyph").css("background-color", "darkred");
$(".phone-glyph").css("color", "orange");
});
$(".phone-glyph").on("mouseleave", function(){
$(".phone-glyph").css("background-color", "darkgreen");
$(".phone-glyph").css("color", "yellow");
});
$(".phone-glyph").on("mouseenter", function(){
$(".phone-field").css("background-color", "pink");
});
$(".phone-glyph").on("mouseleave", function(){
$(".phone-field").css("background-color", "lightgreen");
});
// phone field
$(".phone-field").on("mouseenter", function(){
$(".phone-glyph").css("background-color", "darkred");
$(".phone-glyph").css("color", "orange");
});
$(".phone-field").on("mouseleave", function(){
$(".phone-glyph").css("background-color", "darkgreen");
$(".phone-glyph").css("color", "yellow");
});
$(".phone-field").on("mouseenter", function(){
$(".phone-field").css("background-color", "pink");
});
$(".phone-field").on("mouseleave", function(){
$(".phone-field").css("background-color", "lightgreen");
});
// .phone2 glyph
$(".phone2-glyph").on("mouseenter", function(){
$(".phone2-glyph").css("background-color", "darkred");
$(".phone2-glyph").css("color", "orange");
});
$(".phone2-glyph").on("mouseleave", function(){
$(".phone2-glyph").css("background-color", "darkgreen");
$(".phone2-glyph").css("color", "yellow");
});
$(".phone2-glyph").on("mouseenter", function(){
$(".phone2-field").css("background-color", "pink");
});
$(".phone2-glyph").on("mouseleave", function(){
$(".phone2-field").css("background-color", "lightgreen");
});
// .phone2 field
$(".phone2-field").on("mouseenter", function(){
$(".phone2-glyph").css("background-color", "darkred");
$(".phone2-glyph").css("color", "orange");
});
$(".phone2-field").on("mouseleave", function(){
$(".phone2-glyph").css("background-color", "darkgreen");
$(".phone2-glyph").css("color", "yellow");
});
$(".phone2-field").on("mouseenter", function(){
$(".phone2-field").css("background-color", "pink");
});
$(".phone2-field").on("mouseleave", function(){
$(".phone2-field").css("background-color", "lightgreen");
});
// .address glyph
$(".address-glyph").on("mouseenter", function(){
$(".address-glyph").css("background-color", "darkred");
$(".address-glyph").css("color", "orange");
});
$(".address-glyph").on("mouseleave", function(){
$(".address-glyph").css("background-color", "darkgreen");
$(".address-glyph").css("color", "yellow");
});
$(".address-glyph").on("mouseenter", function(){
$(".address-field").css("background-color", "pink");
});
$(".address-glyph").on("mouseleave", function(){
$(".address-field").css("background-color", "lightgreen");
});
// .address field
$(".address-field").on("mouseenter", function(){
$(".address-glyph").css("background-color", "darkred");
$(".address-glyph").css("color", "orange");
});
$(".address-field").on("mouseleave", function(){
$(".address-glyph").css("background-color", "darkgreen");
$(".address-glyph").css("color", "yellow");
});
$(".address-field").on("mouseenter", function(){
$(".address-field").css("background-color", "pink");
});
$(".address-field").on("mouseleave", function(){
$(".address-field").css("background-color", "lightgreen");
});
// .zip glyph
$(".zip-glyph").on("mouseenter", function(){
$(".zip-glyph").css("background-color", "darkred");
$(".zip-glyph").css("color", "orange");
});
$(".zip-glyph").on("mouseleave", function(){
$(".zip-glyph").css("background-color", "darkgreen");
$(".zip-glyph").css("color", "yellow");
});
$(".zip-glyph").on("mouseenter", function(){
$(".zip-field").css("background-color", "pink");
});
$(".zip-glyph").on("mouseleave", function(){
$(".zip-field").css("background-color", "lightgreen");
});
// .zip field
$(".zip-field").on("mouseenter", function(){
$(".zip-glyph").css("background-color", "darkred");
$(".zip-glyph").css("color", "orange");
});
$(".zip-field").on("mouseleave", function(){
$(".zip-glyph").css("background-color", "darkgreen");
$(".zip-glyph").css("color", "yellow");
});
$(".zip-field").on("mouseenter", function(){
$(".zip-field").css("background-color", "pink");
});
$(".zip-field").on("mouseleave", function(){
$(".zip-field").css("background-color", "lightgreen");
});
// .city glyph
$(".city-glyph").on("mouseenter", function(){
$(".city-glyph").css("background-color", "darkred");
$(".city-glyph").css("color", "orange");
});
$(".city-glyph").on("mouseleave", function(){
$(".city-glyph").css("background-color", "darkgreen");
$(".city-glyph").css("color", "yellow");
});
$(".city-glyph").on("mouseenter", function(){
$(".city-field").css("background-color", "pink");
});
$(".city-glyph").on("mouseleave", function(){
$(".city-field").css("background-color", "lightgreen");
});
// .city field
$(".city-field").on("mouseenter", function(){
$(".city-glyph").css("background-color", "darkred");
$(".city-glyph").css("color", "orange");
});
$(".city-field").on("mouseleave", function(){
$(".city-glyph").css("background-color", "darkgreen");
$(".city-glyph").css("color", "yellow");
});
$(".city-field").on("mouseenter", function(){
$(".city-field").css("background-color", "pink");
});
$(".city-field").on("mouseleave", function(){
$(".city-field").css("background-color", "lightgreen");
});
// .pwd glyph
$(".pwd-glyph").on("mouseenter", function(){
$(".pwd-glyph").css("background-color", "darkred");
$(".pwd-glyph").css("color", "orange");
});
$(".pwd-glyph").on("mouseleave", function(){
$(".pwd-glyph").css("background-color", "darkgreen");
$(".pwd-glyph").css("color", "yellow");
});
$(".pwd-glyph").on("mouseenter", function(){
$(".pwd-field").css("background-color", "pink");
});
$(".pwd-glyph").on("mouseleave", function(){
$(".pwd-field").css("background-color", "lightgreen");
});
// .pwd field
$(".pwd-field").on("mouseenter", function(){
$(".pwd-glyph").css("background-color", "darkred");
$(".pwd-glyph").css("color", "orange");
});
$(".pwd-field").on("mouseleave", function(){
$(".pwd-glyph").css("background-color", "darkgreen");
$(".pwd-glyph").css("color", "yellow");
});
$(".pwd-field").on("mouseenter", function(){
$(".pwd-field").css("background-color", "pink");
});
$(".pwd-field").on("mouseleave", function(){
$(".pwd-field").css("background-color", "lightgreen");
});
// .re glyph
$(".re-glyph").on("mouseenter", function(){
$(".re-glyph").css("background-color", "darkred");
$(".re-glyph").css("color", "orange");
});
$(".re-glyph").on("mouseleave", function(){
$(".re-glyph").css("background-color", "darkgreen");
$(".re-glyph").css("color", "yellow");
});
$(".re-glyph").on("mouseenter", function(){
$(".re-field").css("background-color", "pink");
});
$(".re-glyph").on("mouseleave", function(){
$(".re-field").css("background-color", "lightgreen");
});
// .re field
$(".re-field").on("mouseenter", function(){
$(".re-glyph").css("background-color", "darkred");
$(".re-glyph").css("color", "orange");
});
$(".re-field").on("mouseleave", function(){
$(".re-glyph").css("background-color", "darkgreen");
$(".re-glyph").css("color", "yellow");
});
$(".re-field").on("mouseenter", function(){
$(".re-field").css("background-color", "pink");
});
$(".re-field").on("mouseleave", function(){
$(".re-field").css("background-color", "lightgreen");
});
// form end
$("#myBtn").click(function(){
$("#myModal").modal();
});
$("li").click(function(){
var city = $(this).text();
//alert(cities);
$("#your-city").val(city.trim());
});
$('.input-group').on('focusin focusout input', function () {
console.log('cnanged');
var name = $(this).find(".check").attr("name");
var value = $(this).find(".check").val().trim();
var fakeReg = /(.)\1{2,}/;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
/* */
var $form = $("form.register");
var inputs = $form[0].elements;
/* first name */
if ( value === "") {
$(this).next().find(".error").html("Your "+name+" field is Empty !").removeClass("ok").addClass("warning");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
// $(this).find(".starrq").removeClass("ok").addClass("warning");
} else {
//$(this).next().find(".error").html("Your "+name+" field is OK !").removeClass("warning").addClass("ok");
//$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
/* first name */
if (name === "First Name") {
if (value.length > 19) {
// condition for more than 19 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter no more than 19 char ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
if(fakeReg.test(value)) {
$(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
if (/^([a-zA-Z]{2,16})+$/.test(value) === true) {
$(this).next().find(".error").html(name+" is OK: Your data has been entered correctly");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
} else {
if (/^([a-zA-Z]{1,16})+$/.test(value) === true) {
// condition for less than 2 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter 2 upper case or lower case at least ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
// condition for non a to z
$(this).next().find(".error").html(name + " is Incorrect: Please enter upper case and lower case only ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
//if (value.length > 16) {
// $(this).next().find(".error").html(name + " is Incorrect: Please enter no more then 16 char ");
// }
}
}
}
}
/* last name */
if (name === "Last Name") {
if (value.length > 19) {
// condition for more than 19 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter no more than 19 char ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
if(fakeReg.test(value)) {
$(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
if (/^([a-zA-Z]{2,16})+$/.test(value) === true) {
$(this).next().find(".error").html(name+" is OK: Your data has been entered correctly");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
} else {
if (/^([a-zA-Z]{1,16})+$/.test(value) === true) {
// condition for less than 2 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter 2 upper case or lower case at least ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
// condition for non a to z
$(this).next().find(".error").html(name + " is Incorrect: Please enter upper case and lower case only ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
//if (value.length > 16) {
// $(this).next().find(".error").html(name + " is Incorrect: Please enter no more then 16 char ");
// }
}
}
}
}
}
/* Phone number */
var inputstr = value;
if (name === "Phone Number") {
if (inputstr.length > 0) {
//var inputstr = $(this).val();
var phoneReg =/\(?([0-9]{4})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/;
if(!phoneReg.test(inputstr) ) {
// email
$(this).next().find(".error").html(name + " is Incorrect: Please enter Phone Number correctly ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name + " is Ok : Your Phone number has been entered correctly ");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
//$(this).css("border","2px solid green");
}
} else{
$(this).next().find(".error").html(name+" is EMPTY: Please enter data into this input");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
}
/* email */
//var emailName = (email) => E-mail.split("@")[0];
//console.log("name at E-mai:", name);
//alert(inputattr+inputstr);
/*
var emailName = (email) => E-mail.split("@")[0];
if (value != "") {
$(this).next().find(".error").html(name+' is ok').removeClass("warning").addClass("ok");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
if(fakeReg.test(value)) {
$(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
/* E-mail*/ /*
if (name === "E-mail") {
if(emailReg.test(value)) {
$(this).next().find(".error").html(name + " is Ok : Your data has been entered correctly ");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
} else {
$(this).next().find(".error").html(name + " is Incorrect: Please enter it correctly ").removeClass('ok').addClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).find(".error");
//$(this).css("border","2px solid red");
if (emailName === "First Name") {
$(this).next().find(".error").html(name + " is Incorrect: E-mail should not match first namr ").removeClass('ok').addClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
} else {
if (emailName === "Last Name") {
$(this).next().find(".error").html(name + " is Incorrect: E-mai should not match last namr ").removeClass('ok').addClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
}
}
}
}
}
} else {
$(this).next().find(".error").html(name+' is empty ').removeClass("ok").addClass("warning");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
}
/* address */
if (name === "Postal Address") {
if (value.length > 0) {
//var value = $(this).val();
// var AddressReg = /^[#.0-9a-zA-Z\s,-]+$/ ;
var AddressReg = /^\d+\s[A-z]+\s[A-z]+/g;
if(!AddressReg.test(value) ) {
// address
$(this).next().find(".error").html(name + " is Incorrect: Please enter Address correctly ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name + " is Ok : Your data has been entered correctly ");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
}
}
}
/* postcode */
if (name === "zip code") {
if (value.length > 0) {
//var inputstr = $(this).val();
//var PostcodeReg = /^[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}+$/g;
var PostcodeReg = /^[a-zA-Z]{1,2}([0-9]{1,2}|[0-9][a-zA-Z])\s*[0-9][a-zA-Z]{2}$/;
if(!PostcodeReg.test(value) ) {
//post-code
$(this).next().find(".error").html(name + " is Incorrect: Please enter Post-code correctly ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name + " is Ok : Your data has been entered correctly ");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
}
}
}
/* city */
if (name === "Your City") {
if ( value === "") {
$(this).next().find(".error").html("Your "+name+" field is Empty !").removeClass("ok").addClass("warning");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
// $(this).find(".starrq").removeClass("ok").addClass("warning");
} else {
$(this).next().find(".error").html("Your "+name+" field is OK !").removeClass("warning").addClass("ok");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
}
}
/* } */
if (name === "Password") {
var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
if (value.length > 0) {
/*
var inputstr = $(this).val();
var pswstr = $(this).val();
var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
*/
// fake text
//var inputstr = $(this).val();
//var fakeReg = /(.)\1{2,}/;
if(fakeReg.test(value)) {
$(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
//check if password and last-name is the same
if (value === inputs["Your City"].value) {
$(this).next().find(".error").html(name + " is Incorrect: Password shouldn't match city name");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
if (value === inputs["Last Name"].value) {
$(this).next().find(".error").html(name + " is Incorrect: Password shouldn't match last-name ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
//check if password and first-name is the same
if (value === inputs["First Name"].value) {
$(this).next().find(".error").html(name + " is Incorrect: Password shouldn't match fist-name ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
if (!pswReglow.test(value)) {
$(this).next().find(".error").html(name + " is Incorrect: Please enter at lest 6 character ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
if (!pswRegheigh.test(value)) {
// condition to check if length is bigger than 12 char
$(this).next().find(".error").html(name+" is OK: Your data has been entered correctly");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
} else {
$(this).next().find(".error").html(name + " is Incorrect: Please enter no more than 12 character "+inputstr);
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
}
//$(this).next(".fielderror").html(inputattr+" is OK: Your data has been entered correctly "+inputstr);
//$(this).next(".fielderror").addClass('ok').removeClass('warning');
}
}
}
/* */
}
}else{
$(this).next().find(".error").html(inputattr+" is EMPTY: Please enter data into this input");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
}
}
/* retype password */
if (name === "Retype Password") {
if (value.length > 0) {
if (inputstr !== inputs.Password.value) {
$(this).next().find(".error").html(name + " is Incorrect: Password doesn't match retyped pwd ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name+" is OK: Your data has been entered correctly "+inputstr);
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
}
// var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
// var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
}else{
$(this).next().find(".error").html(name+" is EMPTY: Please enter data into this input");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
}
//alert(name);
});
$(".btn1").click(function(){
$(".input-group").each(function(){
var name = $(this).find(".check,textarea").attr("name");
var value = $(this).find(".check").val().trim();
if ( value === "") {
$(this).next().find(".error").html(name + " is empty !").removeClass("ok").addClass("warning");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).find(".starrq").removeClass("ok").addClass("warning");
}
//alert(name);
});
});
});
Also see: Tab Triggers