In this tutorial I will share to you guys how to create a PHP program to ask the user to give a distance in centimeter, and convert it into meters, and kilometres. I hope you will find my work useful.
My email address is jakerpomperada@gmail.com and jakerpomperada@yahoo.com
Program Listing
style.css
*,
html {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Calibri", sans-serif;
background: #e2e1e0;
color: #111;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
main {
-webkit-transform: skewY(8deg);
transform: skewY(8deg);
background: #fff;
border: 8px solid #2196f3;
border-radius: 20px 40px 20px 40px;
}
.container::before {
position: absolute;
}
.container {
-webkit-transform: skewY(-8deg);
transform: skewY(-8deg);
padding: 50px 40px;
min-width: 530px;
text-align: left;
}
h1 {
margin: 0;
line-height: 1.2;
text-align: center;
}
h2 {
margin: 0 0 30px;
font-size: 22px;
text-align: center;
}
.txtbox {
display: inline-block;
background: #eee;
width: 100%;
margin: 0 0 8px 0;
padding: 15px;
border: none;
font-size: 15px;
}
.txtbox:focus {
background: #f1f1f1;
outline: none;
}
.block {
display: block;
width: 100%;
padding: 10px 0;
margin-bottom: 10px;
}
.block .radioblock {
width: 100px;
display: inline-block;
}
.block label {
cursor: pointer;
}
button {
display: block;
background: #2196f3;
color: #fff;
padding: 10px;
font-size: 15px;
width: 100%;
opacity: 0.9;
outline: none;
text-transform: uppercase;
border: none;
text-decoration: none;
text-align: center;
border: none;
margin-bottom: 10px;
}
button:hover {
opacity: 1;
}
.result {
padding: 10px;
font-size: 20px;
background: #eee;
text-align: center;
font-weight: bold;
}
No comments:
Post a Comment