Category

Monday, November 15, 2021

Youtube Video Downloader

Youtube Videos Download Any Online Videos - wasimteach.blogspot.com

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