-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
177 lines (166 loc) · 7.8 KB
/
index.html
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Calendar</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="wrapper">
<div class="calendar-area">
<div class="cal-nav">
<button class="back">
<ion-icon name="arrow-back"></ion-icon>
</button>
<div class="months-nav">
<span class="prev">
<ion-icon name="chevron-back"></ion-icon>
</span>
<span class="month">september</span>
<span class="next">
<ion-icon name="chevron-forward"></ion-icon>
</span>
</div>
</div>
<div class="cal-table">
<table>
<tr>
<th>sun</th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
</tr>
<tr>
<td class="disabled">30</td>
<td class="disabled">31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td class="reminder">8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td class="range"><span>21</span></td>
<td class="range-dates">22</td>
<td class="range-dates">23</td>
<td class="range-dates">24</td>
<td class="range"><span>25</span></td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="disabled">1</td>
<td class="disabled">2</td>
</tr>
<tr>
<td class="disabled">3</td>
<td class="disabled">4</td>
<td class="disabled">5</td>
<td class="disabled">6</td>
<td class="disabled">7</td>
<td class="disabled">8</td>
<td class="disabled">9</td>
</tr>
</table>
</div>
</div>
<div class="ticket-area">
<div class="title">
<div class="avatar">
<img src="assets/avatar.png" alt="avatar image">
<span class="status"></span>
</div>
<a href="#" class="user">daniel reynolds</a>
</div>
<div class="destination">
<div class="place">
<span class="city">par</span>
<span class="country">france</span>
</div>
<div class="symbol">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g id="Airplane">
<path clip-rule="evenodd"
d="M0.396714 7.55442C0.538116 7.36297 0.761997 7.25 1.00001 7.25H4.00001C4.19892 7.25 4.38968 7.32902 4.53034 7.46967L6.31067 9.25H19.4C21.8024 9.25 23.75 11.1976 23.75 13.6C23.75 14.5113 23.0113 15.25 22.1 15.25H15.4799L12.681 21.3143C12.5584 21.5799 12.2925 21.75 12 21.75H9.00001C8.762 21.75 8.53812 21.637 8.39671 21.4456C8.25531 21.2541 8.21318 21.0069 8.28317 20.7794L9.98454 15.25H3.00001C2.67075 15.25 2.38 15.0353 2.28317 14.7206L0.283172 8.22056C0.213177 7.99308 0.255312 7.74588 0.396714 7.55442ZM2.01548 8.75L3.55394 13.75H11C11.238 13.75 11.4619 13.863 11.6033 14.0544C11.7447 14.2459 11.7868 14.4931 11.7168 14.7206L10.0155 20.25H11.5201L14.319 14.1857C14.4416 13.9201 14.7075 13.75 15 13.75H22.1C22.1828 13.75 22.25 13.6828 22.25 13.6C22.25 12.026 20.974 10.75 19.4 10.75H6.00001C5.80109 10.75 5.61033 10.671 5.46968 10.5303L3.68935 8.75H2.01548Z"
id="Rectangle 22 (Stroke)" />
<path clip-rule="evenodd"
d="M11.2206 10.2168C11.6165 10.095 11.8387 9.67535 11.7168 9.27945L10.0155 3.75001H11.5201L14.319 9.81431C14.4926 10.1904 14.9382 10.3546 15.3143 10.181C15.6904 10.0074 15.8546 9.56181 15.681 9.18572L12.681 2.68572C12.5584 2.42011 12.2925 2.25001 12 2.25001H9.00001C8.762 2.25001 8.53812 2.36299 8.39671 2.55444C8.25531 2.74589 8.21318 2.99309 8.28317 3.22058L10.2832 9.72058C10.405 10.1165 10.8247 10.3387 11.2206 10.2168Z"
id="Rectangle 23 (Stroke)" />
</g>
</svg>
<hr>
</div>
<div class="place">
<span class="city">ldn</span>
<span class="country">england</span>
</div>
</div>
<div class="ticket-allocation">
<div class="price-detail">
<span class="price">$300</span>
<span class="seats-alloted">2 Seats</span>
</div>
<div class="edit">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<title />
<g data-name="Layer 42" id="Layer_42">
<path class="cls-1"
d="M2,29a1,1,0,0,1-1-1.11l.77-7a1,1,0,0,1,.29-.59L18.42,3.94a3.2,3.2,0,0,1,4.53,0l3.11,3.11a3.2,3.2,0,0,1,0,4.53L9.71,27.93a1,1,0,0,1-.59.29l-7,.77Zm7-1.78H9ZM3.73,21.45l-.6,5.42,5.42-.6,16.1-16.1a1.2,1.2,0,0,0,0-1.7L21.53,5.35a1.2,1.2,0,0,0-1.7,0Z" />
<path class="cls-1"
d="M23,14.21a1,1,0,0,1-.71-.29L16.08,7.69A1,1,0,0,1,17.5,6.27l6.23,6.23a1,1,0,0,1,0,1.42A1,1,0,0,1,23,14.21Z" />
<rect class="cls-1" height="2" transform="translate(-8.31 14.13) rotate(-45)" width="11.01" x="7.39" y="16.1" />
<path class="cls-1" d="M30,29H14a1,1,0,0,1,0-2H30a1,1,0,0,1,0,2Z" />
</g>
</svg>
</div>
<div class="flight-date">
<span class="f-date">sep 21</span>
<ion-icon name="arrow-forward"></ion-icon>
<span class="f-date">sep 25</span>
</div>
</div>
<div class="exit-area">
<div class="order-window">
<p class="desc">
<ion-icon name="alert-circle-outline"></ion-icon>
<span>Remaining time to buy:</span>
</p>
<span class="time">7:31</span>
</div>
<button class="confirm">confirm edits</button>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>