HTML ve CSS3 ile Kredi Kartı UI'si Oluşturma
HTML ve CSS3 ile Kredi Kartı UI'si Oluşturma

HTML ve CSS3 ile Kredi Kartı UI'si Oluşturma


 

Bu yazıda, HTML ve CSS3 kullanarak basit bir Kredi Kartı Formu oluşturacağız . Bu form için özel fontu (Roboto) kullanmak için Google Fontlar ile çalışacağız. Bu formu web sitenize entegre edebilirsiniz.

 

HTML

 

Sınıf "kredi formu" ile bir form oluşturacağız. Daha sonra formumuzu iki bölüme ayıracağız. İlk bölüm, form başlığımızın bulunduğu form üstbilgisi ve ikincisi ise tüm form öğeleri ve düğmeleri olacak form gövdesi.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<form class="credit-card">
  <div class="form-header">
    <h4 class="title">Credit card detailh4>
  div>
 
  <div class="form-body">
    
    <input type="text" class="card-number" placeholder="Card Number">
 
    
    <div class="date-field">
      <div class="month">
        <select name="Month">
          <option value="january">Januaryoption>
          <option value="february">Februaryoption>
          <option value="march">Marchoption>
          <option value="april">Apriloption>
          <option value="may">Mayoption>
          <option value="june">Juneoption>
          <option value="july">Julyoption>
          <option value="august">Augustoption>
          <option value="september">Septemberoption>
          <option value="october">Octoberoption>
          <option value="november">Novemberoption>
          <option value="december">Decemberoption>
        select>
      div>
      <div class="year">
        <select name="Year">
          <option value="2016">2016option>
          <option value="2017">2017option>
          <option value="2018">2018option>
          <option value="2019">2019option>
          <option value="2020">2020option>
          <option value="2021">2021option>
          <option value="2022">2022option>
          <option value="2023">2023option>
          <option value="2024">2024option>
        select>
      div>
    div>
 
    
    <div class="card-verification">
      <div class="cvv-input">
        <input type="text" placeholder="CVV">
      div>
      <div class="cvv-details">
        <p>3 or 4 digits usually found <br> on the signature stripp>
      div>
    div>
 
    
    <button type="submit" class="proceed-btn"><a href="#">Proceeda>button>
    <button type="submit" class="paypal-btn"><a href="#">Pay Witha>button>
  div>