Hugging Face's logo

Spaces:
dschandra
/
DynamicMenu
Sleeping

App Files Community
dschandra commited on
Commit
8e5f103
·
verified ·
1 Parent(s): 1356b75

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +42 -66
static/style.css CHANGED
@@ -1,86 +1,62 @@
1
  body {
2
- font-family: Arial, sans-serif;
3
- margin: 0;
4
- padding: 0;
5
- display: flex;
6
- flex-direction: column;
7
- align-items: center;
8
- background-color: #f5f5f5;
9
  }
10
 
11
- #menu-items {
12
- display: flex;
13
- flex-wrap: wrap;
14
- justify-content: center;
15
- margin-top: 20px;
 
 
16
  }
17
 
18
- .food-item {
19
- margin: 15px;
20
- text-align: center;
21
- background: #fff;
22
- border: 1px solid #ddd;
23
- border-radius: 8px;
24
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
25
- width: 150px;
26
  }
27
 
28
- .food-image {
29
- width: 100%;
30
- border-radius: 8px 8px 0 0;
31
- cursor: pointer;
32
  }
33
 
34
- .add-button {
35
- background-color: #28a745;
36
- color: white;
37
- border: none;
38
- padding: 8px 16px;
39
- border-radius: 4px;
40
- cursor: pointer;
41
- margin: 10px 0;
42
- }
43
-
44
- .add-button:hover {
45
- background-color: #218838;
46
  }
47
 
48
- .modal {
49
- display: none;
50
- position: fixed;
51
- top: 0;
52
- left: 0;
53
- width: 100%;
54
- height: 100%;
55
- background: rgba(0, 0, 0, 0.5);
56
- justify-content: center;
57
- align-items: center;
58
  }
59
 
60
- .modal-content {
61
- background: white;
62
- padding: 20px;
63
- border-radius: 10px;
64
- width: 300px;
65
- text-align: center;
66
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
67
  }
68
 
69
- .close-button {
70
- float: right;
71
- font-size: 18px;
72
- cursor: pointer;
73
  }
74
 
75
- #add-to-cart-button {
76
- background-color: #007bff;
77
- color: white;
78
- border: none;
79
- padding: 8px 16px;
80
- border-radius: 4px;
81
- cursor: pointer;
82
  }
83
 
84
- #add-to-cart-button:hover {
85
- background-color: #0056b3;
86
  }
 
1
  body {
2
+ font-family: Arial, sans-serif;
3
+ margin: 0;
4
+ padding: 0;
5
+ background-color: #f9f9f9;
 
 
 
6
  }
7
 
8
+ header {
9
+ display: flex;
10
+ justify-content: space-between;
11
+ align-items: center;
12
+ background-color: #333;
13
+ color: white;
14
+ padding: 10px 20px;
15
  }
16
 
17
+ header h1 {
18
+ margin: 0;
 
 
 
 
 
 
19
  }
20
 
21
+ header .cart-link {
22
+ color: white;
23
+ text-decoration: none;
24
+ font-weight: bold;
25
  }
26
 
27
+ #menu-container, #cart-container {
28
+ padding: 20px;
 
 
 
 
 
 
 
 
 
 
29
  }
30
 
31
+ .menu-item {
32
+ display: flex;
33
+ margin-bottom: 20px;
34
+ padding: 10px;
35
+ background-color: white;
36
+ border-radius: 8px;
37
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
 
 
38
  }
39
 
40
+ .menu-image {
41
+ width: 100px;
42
+ height: 100px;
43
+ margin-right: 15px;
44
+ border-radius: 8px;
 
 
45
  }
46
 
47
+ .menu-details {
48
+ flex: 1;
 
 
49
  }
50
 
51
+ .add-button {
52
+ background-color: #28a745;
53
+ color: white;
54
+ border: none;
55
+ padding: 8px 12px;
56
+ cursor: pointer;
57
+ border-radius: 5px;
58
  }
59
 
60
+ .add-button:hover {
61
+ background-color: #218838;
62
  }