tag:blogger.com,1999:blog-33442255555954883722018-10-11T13:07:52.466+05:30Balrajkumar Balrajkumar HtmlBalrajhttps://plus.google.com/116131205219467648121noreply@blogger.comBlogger23125tag:blogger.com,1999:blog-3344225555595488372.post-3989784820001219832018-05-29T18:04:00.000+05:302018-10-10T23:58:14.387+05:30Balrajkumar Html Android Application App Download Now
Download
Balrajkumar.ml Blog is a popular web site for learning web technologies online. HTML, CSS, JavaScript, JSON, PHP, AngularJS, SQL, Bootstrap, Node.js, jQuery, XQuery, AJAX, and XML. Examples can be simplified to improve reading and basic understanding.Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-87069924135558639152018-04-25T15:58:00.001+05:302018-10-10T23:58:14.724+05:30How TO Sign Up Form Html
Sign Up Form
<form action="action_page.php" style="border:1px solid #ccc">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="EnterBalrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-26931317622193078652018-03-31T05:09:00.001+05:302018-10-10T23:58:14.217+05:30How TO Filter-Search List
Create A Search List
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
Note:</strong> We use Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-36778305744793097062018-03-31T03:30:00.001+05:302018-10-10T23:58:14.344+05:30How TO Form with Multiple Steps
Multiple Steps Form
<form id="regForm" action="">
<h1>Register:</h1>
<!-- One "tab" for each step in the form: -->
<div class="tab">Name:
<p><input placeholder="First name..." oninput="this.className = ''"></p>
<p><input placeholder="Last name..." oninput="this.className = ''"></p>
</div>
<div class="tab">Contact Info:
<p><input placeholder="E-mail..." oninput="this.className = ''"><Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-34914030922012906872018-03-31T02:52:00.000+05:302018-10-10T23:58:14.302+05:30How TO Password Validation
Password Validation Form
<div class="container">
<form action="/action_page.php">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" required>
<label for="psw">Password</label>
< input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-43776545773745072692018-03-31T02:13:00.000+05:302018-10-10T23:58:14.473+05:30How TO Toggle Switch
Toggle Switch Button
<!-- Rectangular switch -->
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-77508291112218515412018-03-31T01:07:00.001+05:302018-10-10T23:58:14.682+05:30How To Create a Custom Checkbox
Custom Checkbox
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-43601605813523327642018-03-31T00:36:00.001+05:302018-10-10T23:58:14.430+05:30How To Create a Fullscreen Search Box
Fullscreen Search Box
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">x</span>
<div class="overlay-content">
<form action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
// Open the full screenBalrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-4494635082334195192018-03-31T00:04:00.001+05:302018-04-25T18:41:58.168+05:30How To Create a Search Button
Search Button
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The form -->
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
* {
box-sizing: border-box;
}
/* Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-52298282761186043602018-03-30T23:43:00.000+05:302018-04-25T18:41:58.207+05:30How TO Copy Text to Clipboard
Copy Clipboard
<!-- The text field -->
<input type="text" value="Hello World" id="myInput">
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-17715634609690632392018-03-30T23:12:00.000+05:302018-04-25T18:41:57.935+05:30How To Create a Responsive Form
Create a Responsive Form
<div class="container">
<form action="action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-35054641687358202402018-03-30T22:32:00.001+05:302018-04-25T18:46:50.778+05:30How To Create a Newsletter
Create a Responsive Form
<form action="action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<p>Lorem ipsum..</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-38290047006969769682018-03-30T21:44:00.000+05:302018-04-25T18:46:50.818+05:30How To Create a Contact Form
Contact Form
<div class="container">
<form action="action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-80158598873100400642018-03-30T20:51:00.000+05:302018-04-25T18:46:51.015+05:30How To Create a Checkout Form
Checkout Form
<div class="row">
<div class="col-75">
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-50">
<h3>Billing Address</h3>
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="fname" name="firstname" placeholder="John M. Doe">
<labelBalrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-57074742529727323432018-03-29T18:31:00.001+05:302018-04-25T18:46:50.975+05:30How TO Blog Layout
Blogger Layout
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-8698329079929763702018-03-28T01:57:00.000+05:302018-04-25T18:46:51.054+05:30How TO Custom Select Box
Select Menu Button
<select>
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-43268855086733911412018-03-20T17:58:00.000+05:302018-04-25T18:46:50.858+05:30How To Create a Blog Layout
Create a Blogger Layout
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
widthBalrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-28448989212024631842017-10-16T17:51:00.000+05:302018-04-25T18:46:50.737+05:30Sitemap Blogger All Post Css Code
/* ######## Navigation Menu Css by Balrajkumar.ml ######################### */ .mapasite {
margin-bottom: 10px;
background-color: #F8F8F8
}
.mapasite.active .mapa {
display: block
}
.mapasite .mapa {
display: none
}
.mapasite h2 {
background-color: #EEE;
color: $(primary.color);
font-size: 15px;
padding: 10px 20px;
border-radius: 2px;
margin-bottom: 0;
cursor: pointer;
Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-52247647347963143642017-10-15T00:05:00.001+05:302018-04-25T18:46:50.936+05:30blog image background
body{
background-color:rgb(0,0,0);
background-image:url(http://www.zingerbugimages.com/backgrounds/tan_mini_bricks_seamless_pattern.gif);
background-position:top left;
background-repeat:repeat;
background-attachment:fixed;
}
Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-13162357182843839692017-10-13T13:57:00.000+05:302018-04-25T23:47:13.691+05:30Blog Sidebar Template Css
Sidebar
.sidebar .widget {
margin-bottom: 20px;
clear: both;
}
.sidebar .widget-content {
border:1px solid rgba(0,0,0,0.12);
padding: 10px;
box-sizing: border-box;
}
.sidebar h2 {
color: #151515;
background: #f2f2f2;
border: 1px solid rgba(0,0,0,0.12);
border-bottom: 0;
font-size: 16px;
padding: 15px 20px;
margin: 0;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-46638468004155825352017-10-13T13:55:00.000+05:302018-04-25T18:46:50.897+05:30Blog post css code
blog post css
article {
padding:0 10px 0 0;
overflow: hidden;
}
.item article, .static_page article {
padding:0;
}
.post-outer {
padding:0 0 20px 0;
}
.post {
display: block;
overflow: hidden;
word-wrap: break-word;
padding: 0 10px 10px;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0.12);
}
.index .post, .archive .post {
-webkit-box-shadow: 3px 0 3px 0px rgba(0, 0, 0, Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-39504401466343513152017-10-13T13:48:00.000+05:302018-04-25T18:42:40.453+05:30Blogger sidebar css code
sidebar widget css code
.sidebar .widget {
margin-bottom: 20px;
position: relative;
clear: both;
}
.sidebar .widget-content {
border: 1px solid rgba(0,0,0,0.12);
padding: 10px;
box-sizing: border-box;
}
.sidebar h2 {
color: #151515;
background: #f2f2f2;
border: 1px solid rgba(0,0,0,0.12);
border-bottom: 0;
font-size: 16px;
padding: 15px 20px;
margin: 0;
font-weight: 500;
letter-spacing:Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0tag:blogger.com,1999:blog-3344225555595488372.post-5967417059180692592017-10-11T17:05:00.000+05:302018-04-25T18:42:40.492+05:30blogger template all wrapper css code
blogger template css code wrapper
.blogouter-wrapper {
overflow: hidden;
position: relative;
width: 100%;
}
.header-wrapper {
background: #2e2e2e;
position: relative;
z-index: 999;
}
.ct-wrapper {
padding: 0 20px;
position: relative;
max-width: 1150px;
margin: 0 auto;
}
.main-wrapper {
width:auto;
margin-right: 330px;
}
#content {
float: left;
position: relative;Balrajhttps://plus.google.com/116131205219467648121noreply@blogger.com0