Ödeme Ekranı
Örnek1
<!DOCTYPE html>
<html>
<head>
<style>
#saat{
width: 700px;
height: auto;
position: absolute;
}
.sag{
position: absolute;
width: 700px;
height: 700px;
background-color: #62825D;
left: 700px;
top: 7px;
}
.sag .yazi{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.sag .giris{
font-size: 25px;
width: 250px;
height: 25px;
border: 3px solid black;
border-radius: 25px;
background-color: #62825D;
color: white;
}
.sag .yazi2{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.sag .giris2{
font-size: 25px;
width: 250px;
height: 25px;
border: 3px solid black;
border-radius: 25px;
background-color: #62825D;
color: white;
}
.sag .ode{
width: 270px;
height: 45px;
position: absolute;
background-color: black;
color: white;
border-radius: 25px;
left: 170px;
margin-top: 25px;
}
@media screen and (max-width: 900px) {
.sol{
display: none;
}
.sag{
position: absolute;
width: 700px;
height: 700px;
background-color: #62825D;
left: -70px;
}
.sag .yazi{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.sag .giris{
font-size: 25px;
width: 250px;
height: 25px;
border: 3px solid black;
border-radius: 25px;
background-color: #62825D;
color: white;
}
.sag .yazi2{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.sag .giris2{
font-size: 25px;
width: 250px;
height: 25px;
border: 3px solid black;
border-radius: 25px;
background-color: #62825D;
color: white;
}
.sag .ode{
width: 270px;
height: 45px;
position: absolute;
background-color: black;
color: white;
border-radius: 25px;
left: 170px;
margin-top: 25px;
}
}
</style>
</head>
<body>
<div class="main">
<div class="sol">
<img src="resim/saat2.webp" id="saat">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 45px; font-weight: bolder; position: absolute; left: 270px; top: 605px;">2,700$</p>
</div>
<div class="sag">
<img src="resim/visa.png" style="width: 100px; margin-top: 90px; margin-left: 200px;">
<img src="resim/master.jpg" style="width: 100px; height: 60px;">
<br><br><br> <br><br>
<label class="yazi" style="margin-left: 170px;">Kredi Kartı Numarası</label><br>
<input type="text" value="0102-4576-5487-8741" class="giris" style="margin-left: 170px;">
<br><br>
<label class="yazi" style="margin-left: 170px;">Kredi Kartı İsmi</label><br>
<input type="text" value="Ali Yılmaz" class="giris" style="margin-left: 170px;">
<br><br>
<label class="yazi2" style="margin-left: 170px;">Son Kullanım Tarihi</label><br>
<input type="text" value="MM/YY" class="giris2" style="margin-left: 170px;">
<br><br>
<label class="yazi2" style="margin-left: 170px;">CVV</label>
<br>
<input type="text" value="Cvv" class="giris2" style="margin-left: 170px;">
<a href="#"> <div class="ode"><p style="font-family: Arial, Helvetica, sans-serif;font-size: 25px; margin-top: 5px; margin-left: 100px;">Öde</p></div> </a>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
#saat{
width: 700px;
height: auto;
position: absolute;
}
.sag{
position: absolute;
width: 700px;
height: 700px;
background-color: #62825D;
left: 700px;
top: 7px;
}
.sag .yazi{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.sag .giris{
font-size: 25px;
width: 250px;
height: 25px;
border: 3px solid black;
border-radius: 25px;
background-color: #62825D;
color: white;
}
.sag .yazi2{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.sag .giris2{
font-size: 25px;
width: 250px;
height: 25px;
border: 3px solid black;
border-radius: 25px;
background-color: #62825D;
color: white;
}
.sag .ode{
width: 270px;
height: 45px;
position: absolute;
background-color: black;
color: white;
border-radius: 25px;
left: 170px;
margin-top: 25px;
}
@media screen and (max-width: 900px) {
.sol{
display: none;
}
.sag{
position: absolute;
width: 700px;
height: 700px;
background-color: #62825D;
left: -70px;
}
.sag .yazi{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.sag .giris{
font-size: 25px;
width: 250px;
height: 25px;
border: 3px solid black;
border-radius: 25px;
background-color: #62825D;
color: white;
}
.sag .yazi2{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.sag .giris2{
font-size: 25px;
width: 250px;
height: 25px;
border: 3px solid black;
border-radius: 25px;
background-color: #62825D;
color: white;
}
.sag .ode{
width: 270px;
height: 45px;
position: absolute;
background-color: black;
color: white;
border-radius: 25px;
left: 170px;
margin-top: 25px;
}
}
</style>
</head>
<body>
<div class="main">
<div class="sol">
<img src="resim/saat2.webp" id="saat">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 45px; font-weight: bolder; position: absolute; left: 270px; top: 605px;">2,700$</p>
</div>
<div class="sag">
<img src="resim/visa.png" style="width: 100px; margin-top: 90px; margin-left: 200px;">
<img src="resim/master.jpg" style="width: 100px; height: 60px;">
<br><br><br> <br><br>
<label class="yazi" style="margin-left: 170px;">Kredi Kartı Numarası</label><br>
<input type="text" value="0102-4576-5487-8741" class="giris" style="margin-left: 170px;">
<br><br>
<label class="yazi" style="margin-left: 170px;">Kredi Kartı İsmi</label><br>
<input type="text" value="Ali Yılmaz" class="giris" style="margin-left: 170px;">
<br><br>
<label class="yazi2" style="margin-left: 170px;">Son Kullanım Tarihi</label><br>
<input type="text" value="MM/YY" class="giris2" style="margin-left: 170px;">
<br><br>
<label class="yazi2" style="margin-left: 170px;">CVV</label>
<br>
<input type="text" value="Cvv" class="giris2" style="margin-left: 170px;">
<a href="#"> <div class="ode"><p style="font-family: Arial, Helvetica, sans-serif;font-size: 25px; margin-top: 5px; margin-left: 100px;">Öde</p></div> </a>
</div>
</div>
</body>
</html>
Yorumunuzu Ekleyin
