Category
▼
Monday, November 15, 2021
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
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.
For Source Code
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.