To Make Cool Search Box :
From menubar in notepad++ select new from "file" menu.Next "Save as" command from "File" menu.Then please give it a name in file & format name field e.g(Cool Search box.html).
Now you simply copy the code below & pase it in your "Cool Search box.html".Then select "Save" it from "File" menu.After that from run menu select any browser e.g "Launch in google crome" or any other Browser.
Style#1:Very Basic Style:
Style#2:
Style#3:
Style#4:
Style#5:
Style#6:
Ok boss, Please Try All Those Code Above.Thanks a lot for visiting me.
From menubar in notepad++ select new from "file" menu.Next "Save as" command from "File" menu.Then please give it a name in file & format name field e.g(Cool Search box.html).
Now you simply copy the code below & pase it in your "Cool Search box.html".Then select "Save" it from "File" menu.After that from run menu select any browser e.g "Launch in google crome" or any other Browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Cool Search Box</title>
<style type="text/css">
/* Some initial styling */
* {
box-sizing: border-box;
}
body {
background: #212121;
}
form {
width: 200px;
height: 40px;
margin: 100px auto 0;
position: relative;
}
/* Ok, HTML markup is complete */
/* submit button will also be the same but with a different color. We'll style the label and the submit input */
/* a faky 3D look */
#submit {
display: none;
}
form .icon, form .submit {
width: 35px;
height: 35px;
background: #d75813;
display: block;
position: absolute;
top: 0;
right: 0;
box-shadow:
0px 5px #bc490a,
0px 8px 10px rgba(0, 0, 0, 0.5);
}
form .submit {
background: #009bff;
cursor: pointer;
box-shadow:
0px 5px #0276c1,
0px 8px 10px rgba(0, 0, 0, 0.5);
}
/* Now, we'll create a search (magnifying glass) icon using pseudo elements */
form .icon:after, form .submit:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 2px solid white;
border-radius: 50%;
left: 10px;
top: 9px;
}
form .icon:before, form .submit:before {
content: '';
position: absolute;
height: 8px;
width: 2px;
background: white;
transform: rotate(-35deg);
top: 19px;
left: 21px;
}
/* Styling the input */
form #search {
-webkit-appearance: none;
height: 35px;
width: 0;
position: absolute;
padding: 0;
opacity: 0;
border: none;
outline: none;
position: absolute;
right: 35px;
box-shadow:
0px 5px #bbb,
0px 8px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<form action="http://icodetutorial.blogspot.com/" class="search">
<!-- We'll have a button that'll make the search input appear, a submit button and the input -->
<!-- Alos, a label for it so that we can style it however we want it-->
<input id="submit" value="" type="submit">
<label for="submit" class="submit"></label>
<!-- trigger button and input -->
<a href="javascript: void(0)" class="icon"></a>
<input type="search" name="Search" id="search" placeholder="Search">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// Ok, the CSS is complete. Now we need to hide the input and make it appear on clicking the icon.
// Now, we have a small problem. Clicking on search butotn doesnt perform any search and the input element hides. To make search button work, we'll use a flag
// Perfect! This thing is cross browser compatible and works even in IE8! You can use the same technique to create some other cool effects like on http://www.apple.com/ and http://developer.android.com/index.html
$(".icon").click(function() {
var icon = $(this),
input = icon.parent().find("#search"),
submit = icon.parent().find(".submit"),
is_submit_clicked = false;
// Animate the input field
input.animate({
"width": "165px",
"padding": "10px",
"opacity": 1
}, 300, function() {
input.focus();
});
submit.mousedown(function() {
is_submit_clicked = true;
});
// Now, we need to hide the icon too
icon.fadeOut(300);
// Looks great, but what about hiding the input when it loses focus and doesnt contain any value? Lets do that too
input.blur(function() {
if(!input.val() && !is_submit_clicked) {
input.animate({
"width": "0",
"padding": "0",
"opacity": 0
}, 200);
// Get the icon back
icon.fadeIn(200);
};
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Cool Search Box</title>
<style type="text/css">
/* Some initial styling */
* {
box-sizing: border-box;
}
body {
background: #212121;
}
form {
width: 200px;
height: 40px;
margin: 100px auto 0;
position: relative;
}
/* Ok, HTML markup is complete */
/* submit button will also be the same but with a different color. We'll style the label and the submit input */
/* a faky 3D look */
#submit {
display: none;
}
form .icon, form .submit {
width: 35px;
height: 35px;
background: #d75813;
display: block;
position: absolute;
top: 0;
right: 0;
box-shadow:
0px 5px #bc490a,
0px 8px 10px rgba(0, 0, 0, 0.5);
}
form .submit {
background: #009bff;
cursor: pointer;
box-shadow:
0px 5px #0276c1,
0px 8px 10px rgba(0, 0, 0, 0.5);
}
/* Now, we'll create a search (magnifying glass) icon using pseudo elements */
form .icon:after, form .submit:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 2px solid white;
border-radius: 50%;
left: 10px;
top: 9px;
}
form .icon:before, form .submit:before {
content: '';
position: absolute;
height: 8px;
width: 2px;
background: white;
transform: rotate(-35deg);
top: 19px;
left: 21px;
}
/* Styling the input */
form #search {
-webkit-appearance: none;
height: 35px;
width: 0;
position: absolute;
padding: 0;
opacity: 0;
border: none;
outline: none;
position: absolute;
right: 35px;
box-shadow:
0px 5px #bbb,
0px 8px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<form action="http://icodetutorial.blogspot.com/" class="search">
<!-- We'll have a button that'll make the search input appear, a submit button and the input -->
<!-- Alos, a label for it so that we can style it however we want it-->
<input id="submit" value="" type="submit">
<label for="submit" class="submit"></label>
<!-- trigger button and input -->
<a href="javascript: void(0)" class="icon"></a>
<input type="search" name="Search" id="search" placeholder="Search">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// Ok, the CSS is complete. Now we need to hide the input and make it appear on clicking the icon.
// Now, we have a small problem. Clicking on search butotn doesnt perform any search and the input element hides. To make search button work, we'll use a flag
// Perfect! This thing is cross browser compatible and works even in IE8! You can use the same technique to create some other cool effects like on http://www.apple.com/ and http://developer.android.com/index.html
$(".icon").click(function() {
var icon = $(this),
input = icon.parent().find("#search"),
submit = icon.parent().find(".submit"),
is_submit_clicked = false;
// Animate the input field
input.animate({
"width": "165px",
"padding": "10px",
"opacity": 1
}, 300, function() {
input.focus();
});
submit.mousedown(function() {
is_submit_clicked = true;
});
// Now, we need to hide the icon too
icon.fadeOut(300);
// Looks great, but what about hiding the input when it loses focus and doesnt contain any value? Lets do that too
input.blur(function() {
if(!input.val() && !is_submit_clicked) {
input.animate({
"width": "0",
"padding": "0",
"opacity": 0
}, 200);
// Get the icon back
icon.fadeIn(200);
};
});
});
</script>
</body>
</html>
Style#1:Very Basic Style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Search Box</title>
</head>
<body>
<div class="search-block">
<form method="get" id="searchform" action="http://icodetutorial.blogspot.com/">
<input class="search-button" type="submit" value="Search" />
<input type="text" id="s" name="s" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
</form>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Search Box</title>
</head>
<body>
<div class="search-block">
<form method="get" id="searchform" action="http://icodetutorial.blogspot.com/">
<input class="search-button" type="submit" value="Search" />
<input type="text" id="s" name="s" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
</form>
</div>
</body>
</html>
Style#2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Search Box</title>
<style type="text/css">
.navMenu input {
background: url(http://cssdeck.com/uploads/media/items/4/4yK4Jqj.jpg) 5px center no-repeat #FFF;
border: 1px solid #AAA;
color: #666;
float: right;
font-size: 11px;
margin: 7px 32px 0 0;
opacity: 0.6;
outline: none;
padding: 3px 5px 3px 20px;
width: 80px;
/* CSS3 */
border-radius: 5px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.navMenu input:hover { opacity: 1 }
.navMenu input:focus {
opacity: 1;
width: 180px;
}
.navMenu input:focus ~ a { width: 95px }
</style>
</head>
<body>
<div class="navMenu expander">
<form action="">
<input type="text" />
</form>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Search Box</title>
<style type="text/css">
.navMenu input {
background: url(http://cssdeck.com/uploads/media/items/4/4yK4Jqj.jpg) 5px center no-repeat #FFF;
border: 1px solid #AAA;
color: #666;
float: right;
font-size: 11px;
margin: 7px 32px 0 0;
opacity: 0.6;
outline: none;
padding: 3px 5px 3px 20px;
width: 80px;
/* CSS3 */
border-radius: 5px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.navMenu input:hover { opacity: 1 }
.navMenu input:focus {
opacity: 1;
width: 180px;
}
.navMenu input:focus ~ a { width: 95px }
</style>
</head>
<body>
<div class="navMenu expander">
<form action="">
<input type="text" />
</form>
</div>
</div>
</body>
</html>
Style#3:
<!DOCTYPE html>
<html>
<head>
<title>Search Box 3 </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript">
window.onload = function(){
//Get submit button
var submitbutton = document.getElementById("tfq");
//Add listener to submit button
if(submitbutton.addEventListener){
submitbutton.addEventListener("click", function() {
if (submitbutton.value == 'Search our website'){//Customize this text string to whatever you want
submitbutton.value = '';
}
});
}
}
</script>
<!-- CSS styles for standard search box with placeholder text-->
<style type="text/css">
html, body {
background: #34addb;
color: #fff;
padding: 24px;
position: relative;
z-index: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
text-shadow: 0 1px 1px rgba(0,150,200,.5);
line-height: 1.5;
}
body {
margin: 0 auto;
width: 500px;
}
.container {
width: 180px;
margin: 0 auto;
}
#search {
-webkit-appearance: none;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
width: 24px;
padding: 0 10px;
height: 24px;
font-size: 14px;
color: #666;
line-height: 24px;
border: 0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
-moz-box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
position: relative;
z-index: 5;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-ms-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
#search:focus {
outline: none;
width: 180px;
}
p.s {
z-index: 4;
position: relative;
padding: 5px;
line-height: 0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
background: #b9ecfe;
background-image: -webkit-linear-gradient(#dbf6ff,#b9ecfe);
background-image: -moz-linear-gradient(#dbf6ff,#b9ecfe);
background-image: -ms-linear-gradient(#dbf6ff,#b9ecfe);
background-image: -o-linear-gradient(#dbf6ff,#b9ecfe);
background-image: linear-gradient(#dbf6ff,#b9ecfe);
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
}
p.s:hover {
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
}
p.s:after {
content: '';
display: block;
position: absolute;
width: 5px;
height: 20px;
background: #b9ecfe;
bottom: -10px;
right: -3px;
border-radius: 0 0 5px 5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
-moz-box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
}
p.s:hover:after {
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
}
</style>
</head>
<body>
<div class="container">
<p class="s"><input name="search" id="search" type="search"></p>
</div>
</body>
</html>
<html>
<head>
<title>Search Box 3 </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript">
window.onload = function(){
//Get submit button
var submitbutton = document.getElementById("tfq");
//Add listener to submit button
if(submitbutton.addEventListener){
submitbutton.addEventListener("click", function() {
if (submitbutton.value == 'Search our website'){//Customize this text string to whatever you want
submitbutton.value = '';
}
});
}
}
</script>
<!-- CSS styles for standard search box with placeholder text-->
<style type="text/css">
html, body {
background: #34addb;
color: #fff;
padding: 24px;
position: relative;
z-index: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
text-shadow: 0 1px 1px rgba(0,150,200,.5);
line-height: 1.5;
}
body {
margin: 0 auto;
width: 500px;
}
.container {
width: 180px;
margin: 0 auto;
}
#search {
-webkit-appearance: none;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
width: 24px;
padding: 0 10px;
height: 24px;
font-size: 14px;
color: #666;
line-height: 24px;
border: 0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
-moz-box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
position: relative;
z-index: 5;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-ms-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
#search:focus {
outline: none;
width: 180px;
}
p.s {
z-index: 4;
position: relative;
padding: 5px;
line-height: 0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
background: #b9ecfe;
background-image: -webkit-linear-gradient(#dbf6ff,#b9ecfe);
background-image: -moz-linear-gradient(#dbf6ff,#b9ecfe);
background-image: -ms-linear-gradient(#dbf6ff,#b9ecfe);
background-image: -o-linear-gradient(#dbf6ff,#b9ecfe);
background-image: linear-gradient(#dbf6ff,#b9ecfe);
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
}
p.s:hover {
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
}
p.s:after {
content: '';
display: block;
position: absolute;
width: 5px;
height: 20px;
background: #b9ecfe;
bottom: -10px;
right: -3px;
border-radius: 0 0 5px 5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
-moz-box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
}
p.s:hover:after {
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
}
</style>
</head>
<body>
<div class="container">
<p class="s"><input name="search" id="search" type="search"></p>
</div>
</body>
</html>
Style#4:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search Bar Animation</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
<style type="text/css">
@charset "utf-8";
/* CSS Document */
/* ---------- FONTAWESOME ---------- */
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
a[class*="fontawesome-"]:before,
span[class*="fontawesome-"]:before {
display: block;
font-family: 'FontAwesome', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* ---------- GENERAL ---------- */
body {
background: #ccc;
font: 87.5%/1.5em 'Open Sans', sans-serif;
margin: 0;
}
a {
text-decoration: none;
}
button {
-webkit-appearance: button;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
font-size: 100%;
line-height: inherit;
margin: 0;
padding: 0;
text-transform: none;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border: 0;
font-family: inherit;
font-size: 100%;
line-height: inherit;
margin: 0;
padding: 0;
}
input:focus {
outline: none;
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- CLASSES ---------- */
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both; }
.container {
left: 50%;
margin: -17px 0 0 -186px;
position: absolute;
top: 50%;
width: 372px;
}
/* ---------- TOOLBAR ---------- */
.toolbar {
color: #fff;
}
.toolbar li {
float: left;
}
.toolbar li:first-child a { border-radius: .5em 0 0 .5em; }
.toolbar li:last-child button { border-radius: 0 .5em .5em 0; }
.toolbar a,
.toolbar input[type="search"],
.toolbar button {
background: #3598db;
color: #fff;
display: block;
padding: .5em 1em;
position: relative;
}
.toolbar a:hover,
.toolbar input[type="search"]:hover,
.toolbar input[type="search"]:focus,
.toolbar button:hover {
background: #2a80b9;
}
.toolbar input[type="search"] {
display: none;
height: 21px;
width: 177px;
}
.toolbar input[type="search"]::-webkit-input-placeholder { color: #fff; }
.toolbar input[type="search"]::-moz-placeholder { color: #fff; opacity: 1; }
.toolbar input[type="search"]:-moz-placeholder { color: #fff; opacity: 1; }
.toolbar input[type="search"]:-ms-input-placeholder { color: #fff; }
</style>
</head>
<body>
<div class="container">
<form action="javascript:void(0);" method="get">
<fieldset>
<ul class="toolbar clearfix">
<li><a href="#" class="fontawesome-heart"></a></li>
<li><a href="#" class="fontawesome-eye-open"></a></li>
<li><a href="#" class="fontawesome-comment"></a></li>
<li><input type="search" id="search" placeholder="What are you looking for?"></li>
<li><button type="submit" id="btn-search"><span class="fontawesome-search"></span></button></li>
</ul>
</fieldset>
</form>
</div> <!-- end container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
( function() {
$('#btn-search').on('click', function(e) {
e.preventDefault();
$('#search').animate({width: 'toggle'}).focus();
});
} () );
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search Bar Animation</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
<style type="text/css">
@charset "utf-8";
/* CSS Document */
/* ---------- FONTAWESOME ---------- */
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
a[class*="fontawesome-"]:before,
span[class*="fontawesome-"]:before {
display: block;
font-family: 'FontAwesome', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* ---------- GENERAL ---------- */
body {
background: #ccc;
font: 87.5%/1.5em 'Open Sans', sans-serif;
margin: 0;
}
a {
text-decoration: none;
}
button {
-webkit-appearance: button;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
font-size: 100%;
line-height: inherit;
margin: 0;
padding: 0;
text-transform: none;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border: 0;
font-family: inherit;
font-size: 100%;
line-height: inherit;
margin: 0;
padding: 0;
}
input:focus {
outline: none;
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- CLASSES ---------- */
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both; }
.container {
left: 50%;
margin: -17px 0 0 -186px;
position: absolute;
top: 50%;
width: 372px;
}
/* ---------- TOOLBAR ---------- */
.toolbar {
color: #fff;
}
.toolbar li {
float: left;
}
.toolbar li:first-child a { border-radius: .5em 0 0 .5em; }
.toolbar li:last-child button { border-radius: 0 .5em .5em 0; }
.toolbar a,
.toolbar input[type="search"],
.toolbar button {
background: #3598db;
color: #fff;
display: block;
padding: .5em 1em;
position: relative;
}
.toolbar a:hover,
.toolbar input[type="search"]:hover,
.toolbar input[type="search"]:focus,
.toolbar button:hover {
background: #2a80b9;
}
.toolbar input[type="search"] {
display: none;
height: 21px;
width: 177px;
}
.toolbar input[type="search"]::-webkit-input-placeholder { color: #fff; }
.toolbar input[type="search"]::-moz-placeholder { color: #fff; opacity: 1; }
.toolbar input[type="search"]:-moz-placeholder { color: #fff; opacity: 1; }
.toolbar input[type="search"]:-ms-input-placeholder { color: #fff; }
</style>
</head>
<body>
<div class="container">
<form action="javascript:void(0);" method="get">
<fieldset>
<ul class="toolbar clearfix">
<li><a href="#" class="fontawesome-heart"></a></li>
<li><a href="#" class="fontawesome-eye-open"></a></li>
<li><a href="#" class="fontawesome-comment"></a></li>
<li><input type="search" id="search" placeholder="What are you looking for?"></li>
<li><button type="submit" id="btn-search"><span class="fontawesome-search"></span></button></li>
</ul>
</fieldset>
</form>
</div> <!-- end container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
( function() {
$('#btn-search').on('click', function(e) {
e.preventDefault();
$('#search').animate({width: 'toggle'}).focus();
});
} () );
</script>
</body>
</html>
Style#5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Search Bar Animation2</title>
<script type="text/javascript">
window.onload = function(){
//Get submit button
var submitbutton = document.getElementById("tfq");
//Add listener to submit button
if(submitbutton.addEventListener){
submitbutton.addEventListener("click", function() {
if (submitbutton.value == 'Search our website'){//Customize this text string to whatever you want
submitbutton.value = '';
}
});
}
}
</script>
<!-- CSS styles for standard search box with placeholder text-->
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
@import url(http://fonts.googleapis.com/css?family=Gochi+Hand);
@import url(http://fonts.googleapis.com/css?family=Roboto:100,300);
body{
margin:5%;
}
*{
box-sizing:border-box;
backface-visibility:hidden; /*avoid glitches*/
}
h1{
font-family: 'Roboto', sans-serif;
font-weight:100;
}
.centered{
width:320px;
margin:auto;
}
.hover-me{
font-family: 'Gochi Hand', cursive;
font-size:2em;
float:left;
top:-200px;
position:relativeM
}
/*get rid of that blue focus border*/
input:focus{
border:0;
outline:0;
}
.search{
width:20px;
height:20px;
border: 3px solid #111;
border-radius:10px;
transition:
height .2s ease .5s,
width .5s ease 0s;
position:relative;
/*margin:0em 11em;*/
float:left;
margin-left:1em;
top:5px;
}
/* hide the input at normal state */
.search input{
font-family: 'Open Sans', sans-serif;
font-weight:700;
height:0px;
width:0px;
border:0;
margin:0;
padding:0 10px;
background:transparent;
}
/*the magnifiying glass handle*/
.search:after{
content:"";
position:absolute;
width:1px;
height:7px;
bottom:-8px;
right:-5px;
background:#111;
border: 2px solid #111;
transform:rotate(-45deg);
transition:all .5s ease;
}
.search:hover{
width:120px;
height:30px;
transition:
height .2s ease,
width .5s ease .5s;
}
/*grow full width/height on hover*/
.search:hover input{
width:100%;
height:100%;
transition:all .5s ease;
}
a{
text-decoration:none;
color:#f06;
border-bottom:1px solid white;
padding-bottom:5px;
transition:border .5s ease;
}
a:hover{
border-color:#111;
color:#f06;
border-bottom:4px solid white;
}
</style>
</head>
<body>
<div class="centered">
<h1>custom search input</h1>
<div class="hover-me">hover me -> </div>
<div class="search">
<input type="text" placeholder="search">
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Search Bar Animation2</title>
<script type="text/javascript">
window.onload = function(){
//Get submit button
var submitbutton = document.getElementById("tfq");
//Add listener to submit button
if(submitbutton.addEventListener){
submitbutton.addEventListener("click", function() {
if (submitbutton.value == 'Search our website'){//Customize this text string to whatever you want
submitbutton.value = '';
}
});
}
}
</script>
<!-- CSS styles for standard search box with placeholder text-->
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
@import url(http://fonts.googleapis.com/css?family=Gochi+Hand);
@import url(http://fonts.googleapis.com/css?family=Roboto:100,300);
body{
margin:5%;
}
*{
box-sizing:border-box;
backface-visibility:hidden; /*avoid glitches*/
}
h1{
font-family: 'Roboto', sans-serif;
font-weight:100;
}
.centered{
width:320px;
margin:auto;
}
.hover-me{
font-family: 'Gochi Hand', cursive;
font-size:2em;
float:left;
top:-200px;
position:relativeM
}
/*get rid of that blue focus border*/
input:focus{
border:0;
outline:0;
}
.search{
width:20px;
height:20px;
border: 3px solid #111;
border-radius:10px;
transition:
height .2s ease .5s,
width .5s ease 0s;
position:relative;
/*margin:0em 11em;*/
float:left;
margin-left:1em;
top:5px;
}
/* hide the input at normal state */
.search input{
font-family: 'Open Sans', sans-serif;
font-weight:700;
height:0px;
width:0px;
border:0;
margin:0;
padding:0 10px;
background:transparent;
}
/*the magnifiying glass handle*/
.search:after{
content:"";
position:absolute;
width:1px;
height:7px;
bottom:-8px;
right:-5px;
background:#111;
border: 2px solid #111;
transform:rotate(-45deg);
transition:all .5s ease;
}
.search:hover{
width:120px;
height:30px;
transition:
height .2s ease,
width .5s ease .5s;
}
/*grow full width/height on hover*/
.search:hover input{
width:100%;
height:100%;
transition:all .5s ease;
}
a{
text-decoration:none;
color:#f06;
border-bottom:1px solid white;
padding-bottom:5px;
transition:border .5s ease;
}
a:hover{
border-color:#111;
color:#f06;
border-bottom:4px solid white;
}
</style>
</head>
<body>
<div class="centered">
<h1>custom search input</h1>
<div class="hover-me">hover me -> </div>
<div class="search">
<input type="text" placeholder="search">
</div>
</div>
</body>
</html>
Style#6:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Search Bar Animation2</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Cabin:400);
.webdesigntuts-workshop {
background: #151515;
height: 100%;
position: absolute;
text-align: center;
width: 100%;
}
.webdesigntuts-workshop:before,
.webdesigntuts-workshop:after {
content: '';
display: block;
height: 1px;
left: 50%;
margin: 0 0 0 -400px;
position: absolute;
width: 800px;
}
.webdesigntuts-workshop:before {
background: #444;
background: -webkit-linear-gradient(left, #151515, #444, #151515);
background: -moz-linear-gradient(left, #151515, #444, #151515);
background: -o-linear-gradient(left, #151515, #444, #151515);
background: -ms-linear-gradient(left, #151515, #444, #151515);
background: linear-gradient(left, #151515, #444, #151515);
top: 192px;
}
.webdesigntuts-workshop:after {
background: #000;
background: -webkit-linear-gradient(left, #151515, #000, #151515);
background: -moz-linear-gradient(left, #151515, #000, #151515);
background: -o-linear-gradient(left, #151515, #000, #151515);
background: -ms-linear-gradient(left, #151515, #000, #151515);
background: linear-gradient(left, #151515, #000, #151515);
top: 191px;
}
.webdesigntuts-workshop form {
background: #111;
background: -webkit-linear-gradient(#1b1b1b, #111);
background: -moz-linear-gradient(#1b1b1b, #111);
background: -o-linear-gradient(#1b1b1b, #111);
background: -ms-linear-gradient(#1b1b1b, #111);
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
border-radius: 5px;
box-shadow: inset 0 0 0 1px #272727;
display: inline-block;
font-size: 0px;
margin: 150px auto 0;
padding: 20px;
position: relative;
z-index: 1;
}
.webdesigntuts-workshop input {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 0 0 5px;
box-shadow: 0 2px 0 #000;
color: #888;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 0;
padding: 0 10px;
text-shadow: 0 -1px 0 #000;
width: 200px;
}
.ie .webdesigntuts-workshop input {
line-height: 40px;
}
.webdesigntuts-workshop input::-webkit-input-placeholder {
color: #888;
}
.webdesigntuts-workshop input:-moz-placeholder {
color: #888;
}
.webdesigntuts-workshop input:focus {
-webkit-animation: glow 800ms ease-out infinite alternate;
-moz-animation: glow 800ms ease-out infinite alternate;
-o-animation: glow 800ms ease-out infinite alternate;
-ms-animation: glow 800ms ease-out infinite alternate;
animation: glow 800ms ease-out infinite alternate;
background: #222922;
background: -webkit-linear-gradient(#333933, #222922);
background: -moz-linear-gradient(#333933, #222922);
background: -o-linear-gradient(#333933, #222922);
background: -ms-linear-gradient(#333933, #222922);
background: linear-gradient(#333933, #222922);
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
color: #efe;
outline: none;
}
.webdesigntuts-workshop input:focus::-webkit-input-placeholder {
color: #efe;
}
.webdesigntuts-workshop input:focus:-moz-placeholder {
color: #efe;
}
.webdesigntuts-workshop button {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #444;
border-left-color: #000;
border-radius: 0 5px 5px 0;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-shadow: 0 -1px 0 #000;
width: 80px;
}
.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
color: #5f5;
outline: none;
}
.webdesigntuts-workshop button:active {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
top: 1px;
}
@-webkit-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
@-moz-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
@-o-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
@-ms-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
</style>
</head>
<body>
<section class="webdesigntuts-workshop">
<form action="" method="">
<input type="search" placeholder="Search...">
<button>Search</button>
</form>
</section>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Search Bar Animation2</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Cabin:400);
.webdesigntuts-workshop {
background: #151515;
height: 100%;
position: absolute;
text-align: center;
width: 100%;
}
.webdesigntuts-workshop:before,
.webdesigntuts-workshop:after {
content: '';
display: block;
height: 1px;
left: 50%;
margin: 0 0 0 -400px;
position: absolute;
width: 800px;
}
.webdesigntuts-workshop:before {
background: #444;
background: -webkit-linear-gradient(left, #151515, #444, #151515);
background: -moz-linear-gradient(left, #151515, #444, #151515);
background: -o-linear-gradient(left, #151515, #444, #151515);
background: -ms-linear-gradient(left, #151515, #444, #151515);
background: linear-gradient(left, #151515, #444, #151515);
top: 192px;
}
.webdesigntuts-workshop:after {
background: #000;
background: -webkit-linear-gradient(left, #151515, #000, #151515);
background: -moz-linear-gradient(left, #151515, #000, #151515);
background: -o-linear-gradient(left, #151515, #000, #151515);
background: -ms-linear-gradient(left, #151515, #000, #151515);
background: linear-gradient(left, #151515, #000, #151515);
top: 191px;
}
.webdesigntuts-workshop form {
background: #111;
background: -webkit-linear-gradient(#1b1b1b, #111);
background: -moz-linear-gradient(#1b1b1b, #111);
background: -o-linear-gradient(#1b1b1b, #111);
background: -ms-linear-gradient(#1b1b1b, #111);
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
border-radius: 5px;
box-shadow: inset 0 0 0 1px #272727;
display: inline-block;
font-size: 0px;
margin: 150px auto 0;
padding: 20px;
position: relative;
z-index: 1;
}
.webdesigntuts-workshop input {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 0 0 5px;
box-shadow: 0 2px 0 #000;
color: #888;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 0;
padding: 0 10px;
text-shadow: 0 -1px 0 #000;
width: 200px;
}
.ie .webdesigntuts-workshop input {
line-height: 40px;
}
.webdesigntuts-workshop input::-webkit-input-placeholder {
color: #888;
}
.webdesigntuts-workshop input:-moz-placeholder {
color: #888;
}
.webdesigntuts-workshop input:focus {
-webkit-animation: glow 800ms ease-out infinite alternate;
-moz-animation: glow 800ms ease-out infinite alternate;
-o-animation: glow 800ms ease-out infinite alternate;
-ms-animation: glow 800ms ease-out infinite alternate;
animation: glow 800ms ease-out infinite alternate;
background: #222922;
background: -webkit-linear-gradient(#333933, #222922);
background: -moz-linear-gradient(#333933, #222922);
background: -o-linear-gradient(#333933, #222922);
background: -ms-linear-gradient(#333933, #222922);
background: linear-gradient(#333933, #222922);
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
color: #efe;
outline: none;
}
.webdesigntuts-workshop input:focus::-webkit-input-placeholder {
color: #efe;
}
.webdesigntuts-workshop input:focus:-moz-placeholder {
color: #efe;
}
.webdesigntuts-workshop button {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #444;
border-left-color: #000;
border-radius: 0 5px 5px 0;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-shadow: 0 -1px 0 #000;
width: 80px;
}
.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
color: #5f5;
outline: none;
}
.webdesigntuts-workshop button:active {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
top: 1px;
}
@-webkit-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
@-moz-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
@-o-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
@-ms-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
</style>
</head>
<body>
<section class="webdesigntuts-workshop">
<form action="" method="">
<input type="search" placeholder="Search...">
<button>Search</button>
</form>
</section>
</body>
</html>
a
a
Ok boss, Please Try All Those Code Above.Thanks a lot for visiting me.
Comments
Post a Comment