Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Rechees Trisna Almuti XII RPL</title>
<link rel="stylesheet" href="toko.css">
</head>
<?php
$nama = $_POST ['pembayaran'];
$nama1 = $_POST['pembayaran1'];
$harga = 200000;
$diskon = 0.20;
$jumlah = $harga * $diskon;
$jumlahall = $harga - $jumlah;
$kembali = $nama - $jumlahall;
?>
<body>
<table align="center">
<form action="" method="post">
<div class="judul">
<tr class="gradient-border">
<td colspan="2" align="center">
<h2>Toko Recheese Bang Trisna</h2></td>
</tr>
</div>
<div class="judul">
<tr class="gradient-border">
<td><img src="recheese.jpg" width="200px"
alt=""></td>
<td>
<h2>Rp.200.000</h2>
</td>
</tr>
<tr class="gradient-border">
<td><h2>Total Harga</h2></td>
<td><h2>Rp.200.000</h2></td>
</tr>
<tr class="gradient-border">
<td><h1>DISKON</h1></td>
<td>
<h1 class="h1-diskon">20%</h1>
</td>
</tr>
<tr class="gradient-border">
<td><h2>Uang Pembayaran</h2></td>
<td><input type="number" name="pembayaran"
required></td>
</tr>
<tr class="gradient-border">
<td align="center" colspan="4">
<input type="submit" class="btn fourth"
value="PESAN" name="Submit">
</td>
</tr>
<tr class="gradient-border">
<td><h2> Total Bayar</h2></td>
<td><input type="number" name="pembayaran1"
value="<?php echo $jumlahall; ?>" readonly></td>
</tr>
<td class="gradient-border">
<h2>Total Kembali</h2></td>
<td class="gradient-border">
<input type="number" name="deposit"
value="<?php echo $kembali; ?>"
readonly></td>
<tr class="gradient-border">
<td colspan="2" align="center">
TERIMA KASIH ATAS KUNJUNGANNYA </td>
</tr>
<tr align="center" class="gradient-border">
<td colspan="2" align="center">
<audio controls autoplay>
<source src="music.mp3" type="audio/mp3">
</audio>
</td>
</tr>
</form>
</table>
</body>
Style/CSS :
@import url('https://fonts.googleapis.com/css?family=Raleway
:200');
body {
display: flex;
justify-content: center;
align-items: center;
background: #1D1F20;
margin: auto;
}
.judul {
text-align: center;
justify-content: center;
align-items: center;
}
/* #box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: white;
font-family: 'Raleway';
font-size: 15px;
} */
table {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: auto;
height: auto;
color: white;
font-family: 'Raleway';
font-size: 15px;
}
.h1-diskon {
color: rgb(255, 217, 0);
}
.gradient-border {
--borderWidth: 3px;
background: #1D1F20;
position: relative;
border-radius: var(--borderWidth);
}
.gradient-border:after {
content: '';
position: absolute;
top: calc(-1 * var(--borderWidth));
left: calc(-1 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 2);
width: calc(100% + var(--borderWidth) * 2);
background: linear-gradient(60deg, #f79533, #f37055,
#ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: calc(2 * var(--borderWidth));
z-index: -1;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
@keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
input[type=number] {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 2px solid #4ae73c;
border-radius: 0.6em;
color: #ffffff;
cursor: pointer;
display: flex;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.btn {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 2px solid #e74c3c;
border-radius: 0.6em;
color: #e74c3c;
cursor: pointer;
display: flex;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.btn:hover, .btn:focus {
color: #fff;
outline: 0;
}
.fourth {
border-color: #f1c40f;
color: #fff;
background-image: linear-gradient(45deg, #f1c40f 50%,
transparent 50%);
background-position: 100%;
background-size: 400%;
transition: background 300ms ease-in-out;
}
.fourth:hover {
background-position: 0;
}
audio {
align-items: center;
justify-content: center;
display: flex;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
* {
height: auto;
font-size: 1em;
display: ruby;
}
body {
width: 566px;
height: auto
}
table {
width: auto;
height: auto;
}
}
Hasil :
Kunjungi Web ini
PHP Part 4: https://php-part-4.trisn0802.repl.co