CSS ve JavaScript ile Alışveriş Sepeti Kullanıcı Arayüzü Oluşturma | Web Tasarım, Kurumsal Kimlik, Logo Tasarımı, Katalog, Tuzla 
CSS ve JavaScript ile Alışveriş Sepeti Kullanıcı Arayüzü Oluşturma

CSS ve JavaScript ile Alışveriş Sepeti Kullanıcı Arayüzü Oluşturma


Bu yazıda, HTML ve CSS3 kullanarak bir Alışveriş Sepeti oluşturacağız . Bu eğitici yazı için Google Fontları, daha özel olarak "Roboto" kullanacağız.
 
 
 
 
 
HTML
 
 
1. Adım: HTML yapısını oluşturalım.
 
İlk olarak, "Shopping-cart" ı arayacağımız bir kapsayıcı div gerekiyor. 
containerın içinde bir unvana ve aşağıdakileri içeren öğeye sahibiz.
 
  • iki düğme - sil düğmesi ve favori düğmesi
  • ürün resmi
  • ürün adı ve açıklaması
  • ürün miktarını ayarlayacak düğmeler
  • toplam fiyat

 

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<div class="shopping-cart">
  
  <div class="title">
    Shopping Bag
  div>
 
  
  <div class="item">
    <div class="buttons">
      <span class="delete-btn">span>
      <span class="like-btn">span>
    div>
 
    <div class="image">
      <img src="item-1.png" alt="" />
    div>
 
    <div class="description">
      <span>Common Projectsspan>
      <span>Bball Highspan>
      <span>Whitespan>
    div>
 
    <div class="quantity">
      <button class="plus-btn" type="button" name="button">
        <img src="plus.svg" alt="" />
      button>
      <input type="text" name="name" value="1">
      <button class="minus-btn" type="button" name="button">
        <img src="minus.svg" alt="" />
      button>
    div>
 
    <div class="total-price">$549div>
  div>
 
  
  <div class="item">
    <div class="buttons">
      <span class="delete-btn">span>
      <span class="like-btn">span>
    div>
 
    <div class="image">
      <img src="item-2.png" alt=""/>
    div>
 
    <div class="description">
      <span>Maison Margielaspan>
      <span>Future Sneakersspan>
      <span>Whitespan>
    div>
 
    <div class="quantity">
      <button class="plus-btn" type="button" name="button">
        <img src="plus.svg" alt="" />
      button>
      <input type="text" name="name" value="1">
      <button class="minus-btn" type="button" name="button">
        <img src="minus.svg" alt="" />
      button>
    div>
 
    <div class="total-price">$870div>
  div>