Jq_xam

Developer
MOHIM
Size
6,685 Kb
Views
16,192
  1. Jq_xam Previews
  2. Jq_xam HTML Codes
  3. Jq_xam CSS Codes
  4. Jq_xam JS Codes

How do I make an jq_xam?

What is a jq_xam? How do you make a jq_xam? This script and codes were developed by MOHIM on 22 November 2022, Tuesday.

Jq_xam Previews
IQ Test

Jq_xam - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jq_xam</title> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/skeleton.2.02.css'>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" />
<nav></nav>
<section id="home"><div class="container"> <div class="row"><div class="color_change"><select name="background_color" id="bgcolor">
<option value="white">White</option>
<option value="black">Black</option>
<option value="orange">Orange</option>
<option value="darkgreen">Green</option>
<option value="red">Red</option>
<option value="maroon">Maroon</option>
</select></div></div> <div class="row"> <div class="col-md-12"> <div class="slider multiple-items"> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjK0tZBJHXOlqL1qkw0pqqek8Vtgh0s7RGCfm4IxA3nwNx3WDboQ" alt="" /></div> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjK0tZBJHXOlqL1qkw0pqqek8Vtgh0s7RGCfm4IxA3nwNx3WDboQ" alt="" /></div> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjK0tZBJHXOlqL1qkw0pqqek8Vtgh0s7RGCfm4IxA3nwNx3WDboQ" alt="" /></div> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjK0tZBJHXOlqL1qkw0pqqek8Vtgh0s7RGCfm4IxA3nwNx3WDboQ" alt="" /></div> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjK0tZBJHXOlqL1qkw0pqqek8Vtgh0s7RGCfm4IxA3nwNx3WDboQ" alt="" /></div> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjK0tZBJHXOlqL1qkw0pqqek8Vtgh0s7RGCfm4IxA3nwNx3WDboQ" alt="" /></div> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjK0tZBJHXOlqL1qkw0pqqek8Vtgh0s7RGCfm4IxA3nwNx3WDboQ" alt="" /></div> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjK0tZBJHXOlqL1qkw0pqqek8Vtgh0s7RGCfm4IxA3nwNx3WDboQ" alt="" /></div> <div class="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjK0tZBJHXOlqL1qkw0pqqek8Vtgh0s7RGCfm4IxA3nwNx3WDboQ" alt="" /></div> </div> </div> </div>
</div>
<div class="container "> <div class="row"> <div class="col-md-12"> <!-- TEXTAREA COUNTER START HERE --> <div class="textarea_counter"> <textarea placeholder="Type your message" rows="5" name="message" maxlength="100" class="form-control" id="styled"></textarea> <p id="character_remaining"></p> </div> <!-- date picker --> <div class="container design"> <p>DATEPICKER</p> <form> Date: <input class="datepicker" id="datepicker"> </form> </div> <!-- end date picker --> <div class="tabs"> <ul id="tabs-nav"> <li><a href="#tab1">Bob</a></li> <li><a href="#tab2">Dante</a></li> <li><a href="#tab3">Randall</a></li> <li><a href="#tab4">Jay</a></li> </ul> <!-- END tabs-nav --> <div id="tabs-content"> <div id="tab1" class="tab-content"> <h2>Silent Bob</h2> <p>"You know, there's a million fine looking women in the world, dude. But they don't all bring you lasagna at work. Most of 'em just cheat on you."</p> </div> <div id="tab2" class="tab-content"> <h2>Dante Hicks</h2> <p>"My friend here's trying to convince me that any independent contractors who were working on the uncompleted Death Star were innocent victims when it was destroyed by the Rebels."</p> </div> <div id="tab3" class="tab-content"> <h2>Randall Graves</h2> <p>"In light of this lurid tale, I don't even see how you can romanticize your relationship with Caitlin. She broke your heart and inadvertently drove men to deviant lifestyles."</p> </div> <div id="tab4" class="tab-content"> <h2>Jay</h2> <p>"I don't care if she's my cousin or not, I'm gonna knock those boots again tonight."</p> </div> </div> <!-- END tabs-content --> </div> <!-- END tabs --> </div> </div>
</div>
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="wrap"> <div class="container"> <div class="row"> <div class="twelve columns"> </div> </div> <!-- end of row --> <div class="row"> <div class="twelve columns"> <div class="programs"> <button class="filter-btn" data-filter="all">All</button> <button class="filter-btn" data-filter=".undergraduate">Website</button> <button class="filter-btn" data-filter=".graduate">Portfolio</button> <button class="filter-btn" data-filter=".phd">PSD</button> </div> </div> </div> <!-- end of row --> <div class="row"> <div class="columns twelve"> </div> </div> <!-- end of row --> <div class="row"> <div class="twelve columns"> <ul class="courses" id="mix-wrapper"> <li class="mix-target undergraduate" data-order="5" data-year="4"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target graduate" data-order="14" data-year="2"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target graduate" data-order="7" data-year="1"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target phd" data-order="4" data-year="3"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target undergraduate" data-order="16" data-year="3"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target undergraduate" data-order="6" data-year="4"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target phd" data-order="1" data-year="3"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target undergraduate" data-order="12" data-year="4"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target undergraduate" data-order="10" data-year="5"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target undergraduate" data-order="9" data-year="4"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target graduate" data-order="11" data-year="3"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target phd" data-order="2" data-year="2"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target phd" data-order="13" data-year="3"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target graduate" data-order="8" data-year="1"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target graduate" data-order="3" data-year="2"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> <li class="mix-target phd" data-order="15" data-year="4"> <a href="#"><img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" /></a> </li> </ul> </div> </div> <!-- end of row --> </div> <!-- end of container --> </div> <!-- end of wrap --> </div> </div>
</div></section>
<section id="about"></section>
<section id="portfolio"></section>
<section id="contact"></section>
<footer></footer>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script> $('.multiple-items').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3, });
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Jq_xam - Script Codes CSS Codes


@import url(https://fonts.googleapis.com/css?family=Raleway);
h2{
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
div.main{
width: 100%;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:50px;
}
input[type=text],input[type=password]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
center{
font-size:32px;
}
.note{
color:red;
}
.valid{
color:green;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
input[type=button]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}
input[type=button]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
.reset{ min-height:45px; background-color: #33cc33; color:#000000; border:1px solid green; border-radius:7px; width:100%; margin-top:10px; font-weight:bold;
}
red{
background: #fffdf8;
border: 1px solid red;
padding: 5px 10px;
margin: 0px 5px;
color: black;
font-size: 12px;
}
.orange{
background: #fff791;
border: 1px solid red;
padding: 5px 10px;
margin: 0px 5px;
color: black;
font-size: 12px;
}
.green{
background: #ccffcc;
border: 1px solid red;
padding: 5px 10px;
margin: 0px 5px;
color: black;
font-size: 12px;
}
/* CUSTOM STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
body {	background: #ededed;	font-family: 'Alegreya Sans SC', sans-serif;
}
h4 {	font-size: 21px;	border-radius: 5px;	margin: 0 auto;	text-align: center;	background: #d2d2d2;	color: white;	font-weight: 700;	padding: 3px 0;
}
li {	margin: 0;
}
a {	font-size: 18px;	text-decoration: none;
}
span {	display: block;	font-size: .75em;	font-style: italic;	position: relative;	top: 5px;
}
.multi {	display: inline;	top: 0;	left: 3px;
}
img {	max-width: 100%;
}
.programs,
.courses {	margin: 8px 0 0 0;
}
.programs {	font-size: 0;	margin-bottom: 15px;
}
.programs button {	outline: none;	margin-bottom: 0;	background: whitesmoke;	width: 50%;	height: auto;	font-weight: normal;	border: 1px solid #ededed;	color: #000000;	font-size: 14px;	padding: 4px 0;	text-shadow: 0px 0px 0px #2f6627;
}
.programs button:hover {	background: #99cfe0;
}
.programs button.active {	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;	background: #3a9fbf;	color: white;
}
.courses {	margin-bottom: 15px;	font-size: 0;
}
.courses li {	text-align: center;	font-size: 14px;	display: inline-block;	width: 46%;	margin: 0 2%;
}
.courses a {	display: block;	height: 60px;	margin: 45px 0;	padding-top: 12.5px;	color: black;	border: 1px solid white;	-webkit-transition: all .4s ease; transition: all .4s ease;
}
.courses a:hover {
}
.courses .mix-target {	display: none;
}
.p, .p a { font-family: Arial, sans-serif; font-size: 14px; text-align: center;
}
/* MEDIA QUERIES STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (min-width: 750px) {	.container {	width: 95%;	}	.courses a {	border: none;	}	.courses a:hover {	-webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15);	}	h4 {	width: 50%;	margin-top: 12px;	}	img {	margin-bottom: 0;	}	.programs {	margin-bottom: 0;	}	.programs button {	width: 25%;	margin-bottom: 15px;	}	.courses li {	width: 21%;	}
}
.textarea_counter{ padding-top:100px;
}
.form-control{
}
textarea#styled {	width: 600px;	height: 120px;	border-top: 13px solid #000; border-bottom: 13px solid green; border-left: 13px solid red; border-right: 13px solid yellow;	padding: 5px;	font-family: Tahoma, sans-serif;	background-image: url(bg.gif);	background-position: bottom right;	background-repeat: no-repeat;
}
.datepicker{ min-height:50px; width:30%; border:2px solid yellow; background-color:green;
}
/* Tabs */
.tabs { width: 600px; background-color: #09F; border-radius: 5px 5px 5px 5px;
}
ul#tabs-nav { list-style: none; margin: 0; padding: 5px; overflow: auto;
}
ul#tabs-nav li { float: left; font-weight: bold; margin-right: 2px; padding: 8px 10px; border-radius: 5px 5px 5px 5px; /*border: 1px solid #d5d5de; border-bottom: none;*/ cursor: pointer;
}
ul#tabs-nav li:hover,
ul#tabs-nav li.active { background-color: #08E;
}
#tabs-nav li a { text-decoration: none; color: #FFF;
}
.tab-content { padding: 10px; border: 5px solid #09F; background-color: #FFF;
}
/* Just for CodePen styling - don't include if you copy paste */
html { margin: 0; padding: 0;
}
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 2em;
}
/* paralax */
/* */ section { background-attachment: fixed; background-position: center center; background-size: cover; height: 100vh;
}
#home { background-image: url('https://res.cloudinary.com/kokkieh/image/upload/v1441711699/building-925757_1920_e7zlcl.jpg');
}
#about { background-image: url('https://res.cloudinary.com/kokkieh/image/upload/v1441711721/glass-909264_1920_kj77yx.jpg');
}
#portfolio { background-image: url('https://res.cloudinary.com/kokkieh/image/upload/v1441711717/building-922529_1920_icicwy.jpg');
}
#contact { background-image: url('https://res.cloudinary.com/kokkieh/image/upload/v1441711695/window-855371_1920_mkw8de.jpg');
}
.color_change{ margin-top:30px; margin-bottom:100px; color:green; font-weight:bold;
}

Jq_xam - Script Codes JS Codes


/* START LOGIN FORM HERE */
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "admin" && password == "admin"){
alert ("Login successfully");
window.location = "https://www.w3schools.com/colors/colors_picker.asp"; // Redirecting to other page.
return false;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
/* eND LOGIN FORM */
/* */
/* sTART PASSWORD STRENGTH CHECK */
$(document).ready(function(){
$("#password").keyup(function(){
var count=$(this).val().length;
// $(".pass_strength").text(count);
if(count<1){
$(".pass_strength").text("");
$(".pass_strength").removeClass("red");
$(".pass_strength").removeClass("orange");
$(".pass_strength").removeClass("green");
}
else if(count<6){
$(".pass_strength").text("Weak");
$(".pass_strength").addClass("red");
$(".pass_strength").removeClass("orange");
$(".pass_strength").removeClass("green");
}
else if(count<=10){
$(".pass_strength").text("Good");
$(".pass_strength").addClass("orange");
$(".pass_strength").removeClass("red");
$(".pass_strength").removeClass("green");
}
else{
$(".pass_strength").text("Strong");
$(".pass_strength").addClass("green");
$(".pass_strength").removeClass("red");
$(".pass_strength").removeClass("orange");
}
});
});
/* start mix it up */
$('#mix-wrapper').mixItUp({ load: {	sort: 'order:asc' },	animation: { effects: 'fade rotateZ(-180deg)', duration: 700 }, selectors: { target: '.mix-target', filter: '.filter-btn', sort: '.sort-btn' }, callbacks: { onMixEnd: function(state){ console.log(state) } }
});
/* end mix it up */
/* TEXTAREA COUNTER */
$(document).ready(function(){
var max_text=100;
$("#character_remaining").html("<b>"+max_text+" characters remaining.</b>");
$("textarea").keyup(function(){
var text_length=$("textarea").val().length;
var total_character_remaining=max_text - text_length;
$("#character_remaining").html("<b>"+total_character_remaining+" characters remaining.</b>");
});
});
/* change bg_color */
/* */
$(document).ready(function(){
var color=$("#bgcolor").val();
$("body").css("background",color);
$("#bgcolor").change(function(){
color=$("#bgcolor").val();
$("body").css("background",color);
});
});
/* DATEPICKER */
/* */
<!-- Using latest jQuery, and jQuery UI --> $(function() {
$( "#datepicker" ).datepicker();
});
// Show the first tab and hide the rest
$('#tabs-nav li:first-child').addClass('active');
$('.tab-content').hide();
$('.tab-content:first').show();
// Click function
$('#tabs-nav li').click(function(){ $('#tabs-nav li').removeClass('active'); $(this).addClass('active'); $('.tab-content').hide(); var activeTab = $(this).find('a').attr('href'); $(activeTab).fadeIn(); return false;
});
Jq_xam - Script Codes
Jq_xam - Script Codes
Home Page Home
Developer MOHIM
Username MOHIM
Uploaded November 22, 2022
Rating 3
Size 6,685 Kb
Views 16,192
Do you need developer help for Jq_xam?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

MOHIM (MOHIM) Script Codes
Name
A Pen by MOHIM
Confidence
Mop-1
Bulsy
Mop-2
Footer item for projects
EConnect
Navigation var
Portfolio
Juice
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!