Showing posts with label HTML Compilor. Show all posts
Showing posts with label HTML Compilor. Show all posts

Thursday, November 11, 2021

Source Code of HTML Form Styling With CSS


<!DOCTYPE html>
<html>
<head>
<title>Wasim Teach</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="" type="text/css"/>
</head>
<body>
<div class="div1">
<h3  class="dmo">Demo log in Form</h3>
<input class="inp" placeHolder= "E-mail"></input>
<input class="inp" placeHolder= "Password"></input>
<button class= "btn">Log in</button>
<font  color= "white" size= "3">Forgot Password.</font>
</div>

<style>
.div1{
background-color:#000000;
width:200px;
height:250px;
position:relative;
top:50px; left:50px;
border:solid;
border-radius:0px 50px 0px 50px;
padding:40px;


}

.dmo{
color:#ffffff;
padding:0px;
border:solid;
padding:5px;
border-color:#ffff00;
border-width:0px 0px 3px 0px;
margin:10px;
}


.inp{
background-color:#8F0873;
color:#ffffff;
border:solid;
border-color:#ffffff;
border-radius: 0px 16px 0px 16px;
padding:10px;
margin:10px;

}

.inp::placeholder {
  color: yellow;
  font-size: 1.2em;
  font-style: italic;
}

.btn
{
background-color:#8F0873;
color:#ffffff;
border:solid;
border-color:#ffff00;
border-radius: 16px;
padding:4px;
margin:10px;
width:150px;
font-size:20px;


}

</style>

</body>
</html>


View Out Put of this Code

Click Here


Monday, November 8, 2021

Demo Log in Form Using HTML

This form Create with using HTML and CSS.
For Source Code Click on Source code button to view source code of this form.

Demo log in Form

Forgot Password.


For Source Code

Source Code of Calculator


Source Code of Calculator.

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="" type="text/css"/>
</head>
<body>
<div  class="div1">
<div  class="div3">
<div  class="div2">
<font color= "white" class="result">0123456789</font>
</div>
</div>
<div  class="btn">



<button onClick="" class="sym">C</button>
<button onClick="" class="sym">00</button>
<button onClick="" class="sym">%</button>
<button onClick="" class="sym">^</button>

<br>
<button onClick="" class="num">7</button>
<button onClick="" class="num">8</button>
<button onClick="" class="num">9</button>
<button onClick="" class="sym">÷</button>
<br>
<button onClick="" class="num">4</button>
<button onClick="" class="num">5</button>
<button onClick="" class="num">6</button>
<button onClick="" class="sym">×</button>
<br>
<button onClick="" class="num">1</button>
<button onClick="" class="num">2</button>
<button onClick="" class="num">3</button>
<button onClick="" class="sym">-</button>
<br>
<button onClick="" class="num">0</button>
<button onClick="" class="num">.</button>
<button onClick="" class="num">=</button>
<button onClick="" class="sym">+</button>


</div>

</div>

<style>
.div1{
background-color:#ABAAA7;
width:350px;
height:540px;
border:solid;
border-width:5px;
border-radius:20px;
box-shadow: 4px 7px #202714;
}

.div2{
background-color:#3F393B;
width:328px;
height:70px;
border:solid;
border-radius:20px;
position:relative;
top:10px; left:3px;
padding:0px;
margin:0px;

}

.result{
padding:13px;
font-size:55px;

}

.btn{
position:relative;
top:30px;
padding:5px;
}
.num{
background-color:#1B393B;
color:#ffffff;
width:70px;
height:70px;
font-size:50px;
margin:5px;
box-shadow:2px 3px #ffffff;
}

.sym{

background-color:#703135;
color:#ffffff;
width:70px;
height:70px;
font-size:50px;
margin:5px;
box-shadow:2px 3px #ffffff;

}


.div3{
background-color:#000000;
width:340px;
height:90px;
border:solid;
border-radius:20px;
position:relative;
top:10px; left:3px;
padding:0px;
margin:0px;
box-shadow:2px 3px #ffffff;

}

</style>

</body>
</html>


How to Make Calculator By Using CSS and HTML

This Calculator design using HTML and CSS. For Source Code of this Calculator Click on View Source Code Button.
the source code and all the designs of this site is free.


 
0123456789





.
For Source Code of the Calculator
Please  


Thursday, May 30, 2019

HTML Compiler

HTML Compiler .

FOR COMPILE HTML CODE :

SIMPLY APPLY HTML CODE AND PRESS COMPILE:

This support only HTML Code NOT for JAVASCRIPT or CSS. this just support HTML Tags.





Your Compiling result will appear here:

Tuesday, March 19, 2019

Check CNIC Number Online in Pakistan .




 

CNIC Check in Pakistan


The CNIC Checker is a web tool designed to validate and analyze CNIC (Computerized National Identity Card) numbers in Pakistan. Users can enter a 13-digit CNIC number and click the "Check" button to verify the number's validity. The tool displays information such as the CNIC number, nationality, gender, and region associated with the input. It also includes a progress bar to indicate the processing status, and a "Check Next CNIC" button to redirect users to an external website for further CNIC number verification.

Check CNIC









Recent added

TypeScript Class 5

Common Syntax Errors in TypeScript and How to Avoid Them Syntax errors are among the most common issues developers encounter when writing Ty...