Wednesday, May 4, 2016

Login Sign up and Forget Password Form in HTML Bootstrap

Hello Friends!!

In this source code we are going to see how to create login, sign up and forget password modal form in HTML using Bootstrap. This modal window allows user to login, sign up and reset password. User can easily move one form to other. This source code can be particular useful if you want to create the login , sign up and forget password forms available to your users in you website. The source code consists of front end code version of the modal window. If you want to learn this source code firstly downloads the source code. To Download Source code Click on Download code button Given Below. Thanks to all.

Marquee Tag in HTML with all attributes

By Unknown 4:35 AM No comments:

Marquee Tag in HTML with all attributes

What do mean by Marquee Tag

<marquee> tag in html.HTML marquee is a moving text display either horizontal or vertical you page depending on your setting. The marquee created by

Marquee Tag here

<html>
 <head>
  <title>
  Html Cursor Code
  </title><html>
 <head>
<title>
    Marquee in HTML
</title>
</head>   
<body>
<marquee behavior="alternate">Alternate text goes here</marquee>
<marquee behavior="scroll" direction="right"> scrolling text goes here</marquee>
<marquee behavior="alternate" scrollamount="30"> fast bouncing text</marquee>
<marquee  behavior="scroll" direction="up">upward scrolling text</marquee>
<marquee  behavior="scroll" direction="down"> downward scroller text</marquee>

<marquee behavior="scroll" direction="right" scrollamount="1">Tortoise</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Hare</marquee>
<marquee behavior="scroll" direction="right" scrollamount="20">Cheetah</marquee>

<marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="500">continuous scroll text</marquee>


<marquee behavior="scroll" direction="right">Your continuous scrolling text goes here to right</marquee>

<marquee behavior="scroll" direction="left" scrollamount="30">Your continuous scrollable text goes here to left</marquee>

<marquee behavior="scroll" direction="left" mouse="stop">Your continuous scroll text goes here on mouse stop text</marquee>

</body>
</html>

Create to Responds Drop Down menu in CSS and HTML

By Unknown 4:20 AM No comments:

Create to Responds Drop Down menu in CSS and HTML

Hello Friends!!

In this source codes we were going to teach you how to make responsive drop down menu in HTML using CSS. Here I am create two page first is index.html and second is style If you want to create drop down menu copy this code and save on your computer or download source code click on download link given below.

Style.css

<html>
 <head>
  <title>
  Html Cursor Code
  </title>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;

}

.menu
{
    margin: 0 auto; width: auto;float:left;
    position:relative;
    z-index:4;
    height: 36px;
    background: #F5F5F5;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    list-style: none;
    padding: 0;
}

.menu div {
    box-sizing:content-box;
}

.menu li
{
    padding: 0;
    float: left;
    height: 34px;
    position: relative;
    z-index:5;
    border-left:1px solid;
    border-right:1px solid;
    border-top:2px solid;
    border-color:transparent;
 
}

.menu li:hover, 
.menu li.onhover
{
    border-color:#DDD;
    border-top:2px solid #B00;
    border-bottom:1px solid #DDD;
}
.menu a
{
    padding: 0 30px;
    line-height: 34px;
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: #000;
    position: relative;
}


.menu li:hover a, 
.menu li.onhover a
{
    background-color: #EEE;
    color: #000;
    z-index: 9; 
}
.menu a.arrow
{
    background: url(arrow.gif) no-repeat right center;
}
 
        
    
.menu li.menuRight
{
    float: right;
    margin-right: 0px;
}
        
.menu li.separator
{
    display:none;
}
               
        
.menu .drop
{
    position: absolute;
    z-index:5;
    left: -9999px;
    border: 1px solid #DDD;
    border-bottom:2px solid #B00;
    background: #FFF url(bg_grad.gif) repeat-x 0 0;
    text-align: left;
    padding: 20px;  
    top:31px;
}

.menu .drop a
{
    padding-left: 0px;
    padding-right: 0px;
    line-height: 24px;
    font-size: 12px;
    font-weight: normal;
    display: inline;
    text-align: left;
    
    position: static;
    z-index: 0;
}

.menu li:hover .drop, 
.menu li.onhover .drop
{
    left: -1px;
}
.menu li:hover .dropToLeft, 
.menu li.onhover .dropToLeft
{
    left: auto;
    right: -1px;
}
.menu li:hover .dropToLeft2, 
.menu li.onhover .dropToLeft2
{
    left: auto;
    right: -60px;
}

.menu div.drop div div
{
    padding: 6px 20px;
}

.menu div.drop div a
{
    line-height: 24px;  
    color: #048;
    background:none;
}
.menu div.drop div a:hover
{
    text-decoration:underline;
    cursor:pointer;
    color:Red;
}

.menu div.left {float:left;}

 
.decor2_1 
{
}


.decor2_2 
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 0 0 14px #AAA;
    -webkit-box-shadow: 0 0 14px #AAA;
    box-shadow: 0 0 14px #AAA;  
}

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title><!DOCTYPE>
<html>
	<head>
		<title>
		www.nehrugroup.in
		</title>
		<link rel="stylesheet" href="style.css" media="all" />
	</head>   
	
<body>
	<h2>
Drop Down Menu</h2>
<br /><br />

	<ul class="menu">
<li><a href="#">Home</a></li>
<li class="separator"></li>
<li><a href="#" class="arrow">Our Services</a>
			<div class="drop" style="width: 640px;">
				<div class='left'>
					<b>Web Design</b>
					<div>
						<a href="#">Html</a><br />
						<a href="#">CSS</a><br />
						<a href="#">JavaScript</a><br />
						<a href="#">PHP & MySQL</a><br />
						<a href="#">Projects</a>
					</div>
</div>
<div class='left'>
					<b>Software</b>
					<div>
						<a href="#">C & C++</a><br />
						<a href="#">Java</a><br />
						<a href="#">VB </a><br />
						<a href="#">More Tool..</a>
					</div>
</div>
<div class='left'>
					<b>SEO Friendly</b>
					<div>
						<a href="#">Search engine friendly</a><br />
						<a href="#">css menu</a><br />
						<a href="#">Most popular SEO Tool</a><br />
						<a href="#">Best web designs</a><br />
						<a href="#">E-Commerce sites</a><br />
						<a href="#">HTML Templates with SEO</a><br />
						<a href="#">Design Templates</a><br />
						<a href="#">Clean layout</a><br />
						<a href="#">Modern and Stylish Templates</a>
					</div>
</div>
<div class='left' style="text-align:right; width:200px;">
					<img src="image/2.jpg" style="width:128px; height:128px;" /><br />
					Search Engine friendly
				</div>
<div style='clear: both;'>
</div>
</div>
</li>
<li class="separator"></li>
<li><a href="#">Programming</a></li>
<li class="separator"></li>
<li><a href="#">Image Gallary</a></li>
<li class="separator"></li>
<li><a href="#" class="arrow">Get in Touch</a>
			<div class="drop decor2_2 dropToLeft2" style="width: 500px;">
				<div class='left'>
					<b>SHOPPING TOOLS</b>
					<div>
						<a href="#">Build your script</a><br />
						<a href="#">Review current offers</a><br />
						<a href="#">See All ...</a>
					</div>
<b>RSS FEED</b>
					<div>
						<a href="#">Find a location</a><br />
						<a href="#">Request a test drive</a><br />
						<a href="#">See All ...</a>
					</div>
</div>
<div class='left'>
					<b>Creative</b>
					<div>
						<a href="#">Build your script</a><br />
						<a href="#">Review current offers</a><br />
						<a href="#">See All ...</a>
					</div>
</div>
<div class='left' style="text-align:right; width:160px;">
					<img src="image/1.png" style="width:128px; height:128px;" /><br />
					Contact Us
				</div>
</div>
</li>
<li class="separator"></li>
<li><a href="#" class="arrow">Web Designing</a>
			<div class="drop decor2_2 dropToLeft" style="width: 460px;">
				<img src="image/3.jpg" style="float:left; width:98px;
					height:180px;margin:10px 80px 10px 40px;" />
				<div class='left'>
					<b>Front End</b>
					<div>
						<a href="#">HTML</a><br />
						<a href="#">CSS</a><br />
						<a href="#">Javascript</a>
                   
					</div>
<b>Back End</b>
					<div>
						<a href="#">PHP & MySQL</a><br />
						<a href="#">ASP</a><br />
						<a href="#">See All ...</a>
					</div>
</div>
</div>
</li>
</ul>
</body>
</html>

Create to Responds Drop Down menu in CSS and HTML

Form Validation in JavaScript

By Unknown 5:23 AM No comments:

Form Validation in JavaScript

Here we are going to teach you how to create form validation in HTML and CSS using JavaScript. I give source code given below step by step. You can create page like, 1. index.html 2. style.css 3. form validate.js and copy the source code given below or you can also download complete source code by clicking Download Source Code Link..

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title><html>
<head>
<title>JavaScript Form Validation </title>
<link rel=”stylesheet” href=”css/style.css”>
<script type=”text/javascript” src=”js/form_validate.js” ></script>
</head>
<body>
<br /><br />
  <h2 align=”center”>
Form Validation in JavaScript </h2>
<center>
<br /><br />
<form id=”theForm” method=”get” action=”submitData” >
<table id=”font”>
<tr>
<td width=”168″>Name<span class=”red”>*</span></td>
 <td width=”288″><input type=”text” id=”name” name=”name” class=”input1″/></td>
<td width=”183″ class=”red” id=”nameError”> </td>
</tr>
<tr>
<td>Address</td>
<td><input type=”email” id=”address” class=”input1″ /></td>
<td id=”addressError” class=”red”> </td>
</tr>
<tr>
<td>Pin Code<span class=”red”>*</span></td>
<td><input type=”text” id=”zipcode” name=”zipcode” class=”input1″/></td>
<td id=”zipcodeError” class=”red”> </td>
</tr>
<tr>
<td>Country<span class=”red”>*</span></td>
<td><select id=”country” name=”country” class=”input1″>
<option value=”” selected>Please select…</option>
<option value=”India”>India</option>
<option value=”Pakistan”>Pakistan</option>
<option value=”Afganistan”>Afganistan</option>
<option value=”Australia”>Australia</option>
</select><br /></td>
<td id=”countryError” class=”red”> </td>
</tr>
<tr>
<td>Gender<span class=”red”>*</span></td>
 <td><p>
<input type=”radio” name=”gender” value=”m” />
   Male
   <input type=”radio” name=”gender” value=”f” />
       Female</p>
</td>
<td id=”genderError” class=”red”> </td>
</tr>
<tr>
<td>Preferences<span class=”red”>*</span></td>
 <td><p>
<input type=”checkbox” name=”color” value=”r” />
   Red
<input type=”checkbox” name=”color” value=”g” />
       Green
       <input type=”checkbox” name=”color” value=”b” />
       Blue</p>
</td>
<td id=”colorError” class=”red”> </td>
</tr>
<tr>
<td>Phone<span class=”red”>*</span></td>
<td><input type=”text” id=”phone” name=”phone” class=”input1″/></td>
<td id=”phoneError” class=”red”> </td></tr>
<tr>
<td>Email<span class=”red”>*</span></td>
<td><input type=”text” id=”email” name=”email” class=”input1″/></td>
<td id=”emailError” class=”red”> </td>
</tr>
<tr>
<td>password <span class=”red”>*</span></td>
<td><input type=”password” id=”password” name=”password” class=”input1″/></td>
<td id=”passwordError” class=”red”> </td>
</tr>
<tr>
<td>Verify password<span class=”red”>*</span></td>
<td><input type=”password” id=”pwVerified” name=”pwVerified” class=”input1″/></td>
<td id=”pwVerifiedError” class=”red”> </td>
</tr>
<tr>
<td><input name=”submit” type=”submit” class=”input1″ id=”submit” value=”Submit”/></td>
<td><p>
<input name=”reset” type=”reset” class=”input1″ id=”reset” value=”Reset”/>
       </p>
</td>
<td> </td></tr>
</table>
</form>
</center>
</body>
</html>

Style.css

<html>
 <head>
  <title>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-color:skyblue;
}
.red {
color: red;
}

.input1{
width:200px;
height:30px;
padding:0px;
border:1px solid red;
border-radius:5px;
}
input.error{

width:200px;
height:30px;
padding:0px;
border:2px solid red;
border-radius:5px;
}

table {
border:0;

}

td {
margin: 0;
padding: 3px 10px 3px 3px;
}
#font{
font-size:18;
color:black

}
  Html Cursor Code
  </title>

form validate.js

<html>
 <head>
  <title>
  Html Cursor Code
  </title>window.onload = init;
function init() {
document.getElementById(“theForm”).onsubmit = validateForm;
document.getElementById(“reset”).onclick = clearDisplay;
document.getElementById(“name”).focus();
}
function validateForm() {
return (isNotEmpty(“name”, “Please enter your name!”)
&& isNumeric(“zipcode”, “Please enter a 5-digit zip code!”)
&& isLengthMinMax(“zipcode”, “Please enter a 5-digit zip code!”, 5, 5)
&& isSelected(“country”, “Please make a selection!”)
&& isChecked(“gender”, “Please check a gender!”)
&& isChecked(“color”, “Please check a color!”)
&& isNumeric(“phone”, “Please enter a valid phone number!”)
&& isValidEmail(“email”, “Enter a valid email!”)
&& isLengthMinMax(“password”, “Enter a valid password!”, 6, 8)
&& verifyPassword(“password”, “pwVerified”, “Different from the password!”));
}

function isNotEmpty(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length !== 0);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

function showMessage(isValid, inputElement, errorMsg, errorElement) {
if (!isValid) {
if (errorElement !== null) {
errorElement.innerHTML = errorMsg;
} else {
alert(errorMsg);
}
if (inputElement !== null) {
inputElement.className = “error”;
inputElement.focus();
}
} else {
if (errorElement !== null) {
errorElement.innerHTML = “”;
}
if (inputElement !== null) {
inputElement.className = “”;
}
}
}

function isNumeric(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = (inputValue.search(/^[0-9]+$/) !== -1);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

function isAlphabetic(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = inputValue.match(/^[a-zA-Z]+$/);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isAlphanumeric(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = inputValue.match(/^[0-9a-zA-Z]+$/);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isLengthMinMax(inputId, errorMsg, minLength, maxLength) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length >= minLength) && (inputValue.length <= maxLength);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isValidEmail(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value;
var atPos = inputValue.indexOf(“@”);
var dotPos = inputValue.lastIndexOf(“.”);
var isValid = (atPos > 0) && (dotPos > atPos + 1) && (inputValue.length > dotPos + 2);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

function isSelected(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value;
var isValid = inputValue !== “”;
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isChecked(inputName, errorMsg) {
var inputElements = document.getElementsByName(inputName);
var errorElement = document.getElementById(inputName + “Error”);
var isChecked = false;
for (var i = 0; i < inputElements.length; i++) {
if (inputElements[i].checked) {
isChecked = true;
break;
}
}
showMessage(isChecked, null, errorMsg, errorElement);
return isChecked;
}
function verifyPassword(pwId, verifiedPwId, errorMsg) {
var pwElement = document.getElementById(pwId);
var verifiedPwElement = document.getElementById(verifiedPwId);
var errorElement = document.getElementById(verifiedPwId + “Error”);
var isTheSame = (pwElement.value === verifiedPwElement.value);
showMessage(isTheSame, verifiedPwElement, errorMsg, errorElement);
return isTheSame;
}

function clearDisplay() {
var elms = document.getElementsByTagName(“*”);
for (var i = 0; i < elms.length; i++) {
if ((elms[i].id).match(/Error$/)) {
elms[i].innerHTML = “”;
}
if (elms[i].className === “error”) {
elms[i].className = “”;
}
}
document.getElementById(“name”).focus();
}

Preview

SLIDESHOW IN JAVASCRIPT

By Unknown 4:59 AM No comments:

SLIDESHOW IN JAVASCRIPT

Hello Friends!! Here I have upload a Slideshow source code of calendar in JavaScript, in this code I will try to teach you how to create image slideshow in JavaScript going to easy steps. Of you want to learn this tutorial, Copy the below code and save to your computer index.html and slideshow.js after that run code into browser or download complete source click on Download Source Code Link given below..

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title><html>
<head>
                   <title>Slideshow</title>
<script type=”text/JavaScript” scr=”slideshow.js”> </script>
<style type=”text/css”>
<!–
.style3 {font-size: 18px; font-weight: bold; }
–>
 </style>
</head>
<body>
<center>
<br><br><br><br>
<img src=”images/1.jpg” name=”slideshow”><br><br>
</center>
<table width=”204″ height=”28″ align=”center” bordercolor=”#FF0000″ bgcolor=”#000000″>
<tr border=”3″ bordercolor=”green”>
<td align=”right”><a href=”javascript:chgImg(-1)”><button><span class=”style3″>Previous</span></button>
</a></td>
<td align=”center”><a href=”javascript:auto()”><button><span class=”style3″>Auto/Stop</span></button>
</a></td>
<td align=”left”><a href=”javascript:chgImg(1)”><button><span class=”style3″>Next</span></button>
</a></td></tr>
</table>
</body>
</html>
<br />

Slideshow.js

<html>
 <head>
  <title>
  Html Cursor Code
  </title><html>
<head>
                   <title>Slideshow</title>
<script type=”text/JavaScript” scr=”slideshow.js”> </script>
<style type=”text/css”>
<!–
.style3 {font-size: 18px; font-weight: bold; }
–>
 </style>
</head>
<body>
<center>
<br><br><br><br>
<img src=”images/1.jpg” name=”slideshow”><br><br>
</center>
<table width=”204″ height=”28″ align=”center” bordercolor=”#FF0000″ bgcolor=”#000000″>
<tr border=”3″ bordercolor=”green”>
<td align=”right”><a href=”javascript:chgImg(-1)”><button><span class=”style3″>Previous</span></button>
</a></td>
<td align=”center”><a href=”javascript:auto()”><button><span class=”style3″>Auto/Stop</span></button>
</a></td>
<td align=”left”><a href=”javascript:chgImg(1)”><button><span class=”style3″>Next</span></button>
</a></td></tr>
</table>
</body>
</html>

Preview

CALENDER IN JAVASCRIPT

By Unknown 4:27 AM No comments:

CALENDER IN JAVASCRIPT

Hello Friends!! Here I have upload a source code of calendar in JavaScript. This calendar id using a text, enables you to look up the calendar for any month of any year, use the drop down menu to select the desired month. Calendars’ can be seen in most web pages today specially in blogs and tickets, Calendars in Hotel, Cinema or airlines websites requires users interaction to reserve rooms and tickets. In this post we are showing you some of the calendar scripts that we have come to know, Date picker which is a calendar allows user to navigate through days, week or year to pick a date they desire, If you want to Download source code of calendar in JavaScript click on Download.

Preview

Flip image with Description in HTML using CSS

By Unknown 12:05 PM No comments:

Flip image with Description in HTML using CSS

Here I have upload a source code of Flop image with description in HTML using CSS. In this source code we are showing you how to flop image and show its description in 3D.

Step 1

HTML Source Code

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title>
<!DOCTYPE html>
<html>
<head>
<title>www.nehrugroup.in</title>
<link rel=”stylesheet” href=”css/style.css” type=”stylesheet” media=”all” />
    
</head>
<body>
<table width=”690″ height=”637″ border=”0″ align=”right”>
<tr>
        <td width=”645″ colspan=”2″ valign=”top” bgcolor=”#0099CC”><p>
<label for=”idRadioTextname-ANY-lorem”><span class=”style1″>Lorem ipsum </span></label>
        </p>
<p>
<strong>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</strong></p>
<p>
 </p>
<p>
<label for=”idRadioTextname-ANY-lorem”><span class=”style1″>Lorem ipsum </span></label>
</p>
<p>
<strong>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias </strong></p>
</td>
  </tr>
</table>
<div id=”container”>
    <div id=”wrapper” class=”shadow”>
    <div class=”front face”>
        <img src=”image/1.jpg” />
        </div>
<div class=”back face center”>
        <p>
Lorem ipsum dolor sit amet</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam 
 
</p>
</div>
</div>
</div>
<div id=”container”>
    <div id=”wrapper” class=”shadow”>
    <div class=”front face”>
        <img src=”image/2.jpg” />
        </div>
<div class=”back face center”>
        <p>
Lorem ipsum dolor sit amet</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam </p>
</div>
</div>
</div>
<div id=”container”>
    <div id=”wrapper” class=”shadow”>
    <div class=”front face”>
        <img src=”image/3.jpg” />
        </div>
<div class=”back face center”>
        <p>
Lorem ipsum dolor sit amet</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
</div>
</div>
</div>

Step 2

CSS style Source Code

Style.css

<html>
 <head>
  <title>
  Html Cursor Code
  </title>
#container{
position: relative;
  margin: 10px;
  width: 400px;
  height: 200px;
  z-index: 1;
perspective: 1000;
}
#wrapper{
width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#container:hover #wrapper{
transform:rotateY(180deg);
box-shadow:-5px 5px 5px #aaa;
}
.face{
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
}
.face.back{
display:block;
transform:rotateY(180deg);
box-sizing:border-box;
padding:10px;
color:#fff;
text-align:center;
background-color:#aaa;
}
.shadow{
box-shadow:5px 5px 5px #aaa;
}
table{
box-shadow:5px 5px 5px red;
border-radius:15px;
}
.style1 {
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
box-shadow:5px 5px 5px red;
border-radius:15px;
}

Advertisement

Wednesday, May 4, 2016

Login Sign up and Forget Password Form in HTML Bootstrap

Marquee Tag in HTML with all attributes

What do mean by Marquee Tag

Marquee Tag here

Create to Responds Drop Down menu in CSS and HTML

Style.css

Index.html

Tuesday, May 3, 2016

Form Validation in JavaScript

Index.html

Style.css

form validate.js

Preview

SLIDESHOW IN JAVASCRIPT

Index.html

Slideshow.js

Preview

CALENDER IN JAVASCRIPT

Preview

Thursday, April 28, 2016

Flip image with Description in HTML using CSS

HTML Source Code

CSS style Source Code

Popular Posts

Find us on Facebook

Advertisement

Labels

Total Pageviews

Instagram posts

Category

About us