Ödeme Ekranı

 Örnek1

Ödeme Ekranı

<!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>

 

 

222 Okunma Henüz yorum yapılmamış 27/12/2024 15:31:46 27/12/2024 15:32:45

Yorumunuzu Ekleyin
Görsel Liste


Giriş (Login) Tasarımları

299 okuma, 27/12/2024

Giriş (Login) Tasarımları
Takvim

263 okuma, 27/12/2024

Takvim
Etkinlik Takvimi Tasarımları

229 okuma, 27/12/2024

Etkinlik Takvimi Tasarımları
Yükleniyor...
Yükleniyor...