Skip to content

Commit 6fdaf0e

Browse files
samjn08samjn08
authored
Updated design and responsiveness
1 parent 54f2ac6 commit 6fdaf0e

13 files changed

+2073
-1679
lines changed

‎client/assets/error.svg

+47
Loading

‎client/assets/price-tag.png

1.83 KB
Loading

‎client/assets/success.svg

+45
Loading

‎client/cancel.html

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
45
<meta charset="UTF-8" />
56
<link rel="stylesheet" type="text/css" href="css/cancel.css" />
67
<link rel="icon" type="image/x-icon" href="assets/icon.svg" />
@@ -12,12 +13,21 @@
1213
<img src="assets/logo.svg" alt="" height="60" width="350" />
1314
</a>
1415
</div>
16+
1517
<div class="container">
16-
Oops! Something went wrong
18+
<div class="box">
19+
<div class="title">
20+
<h1>Error ⚠️</h1>
21+
</div>
22+
<img src="assets/error.svg"/>
23+
<p style="margin-bottom: 12px;">
24+
Oops! Something went wrong
25+
</p>
1726
<div class="button">
1827
<input type="button" value="Try Again" id="try-again-btn" />
1928
</div>
2029
</div>
30+
</div>
2131

2232
<script>
2333
var btn = document.getElementById("try-again-btn");

‎client/css/cancel.css

+75-18
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,84 @@
55
box-sizing: border-box;
66
font-family: "Poppins", sans-serif;
77
}
8-
98
body {
10-
height: 100vh;
11-
/* padding: 10px; */
9+
padding-top: 70px;
10+
min-height: 100vh;
1211
background: linear-gradient(135deg, #5cff68, #05caff);
12+
background-repeat: no-repeat;
13+
}
14+
/* custom scrollbar */
15+
::-webkit-scrollbar {
16+
width: 11px;
17+
}
18+
19+
::-webkit-scrollbar-track {
20+
background-color: transparent;
21+
}
22+
23+
::-webkit-scrollbar-thumb {
24+
background-color: #4c4c4c;
25+
border-radius: 20px;
26+
border: 3px solid transparent;
27+
background-clip: content-box;
1328
}
1429

30+
::-webkit-scrollbar-thumb:hover {
31+
background-color: #7d7d7d;
32+
}
1533
.navbar {
1634
overflow: hidden;
17-
position: relative;
35+
position: fixed;
1836
background-color: #1b2731;
37+
top: 0;
38+
width: 100%;
39+
height: 70px;
40+
display: grid;
41+
justify-content: center;
42+
align-items: center;
43+
z-index: 200;
1944
}
2045
.nav-content {
21-
padding: 10px;
46+
display: contents;
2247
}
2348
.navbar h3 {
2449
margin: 0;
2550
padding: 0;
2651
display: inline;
2752
}
2853
.container {
29-
position: absolute;
30-
left: 3.5rem;
31-
margin: 6rem 30rem;
32-
max-width: 1000px;
33-
height: 200px;
54+
display: grid;
55+
justify-items: center;
56+
margin-top: 50px;
57+
margin-bottom: 25px;
58+
padding-inline: 90px;
59+
}
60+
.box {
3461
background-color: #fff;
3562
padding: 25px 30px;
3663
border-radius: 5px;
3764
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
3865
}
39-
66+
.title {
67+
display: inline-block;
68+
font-size: 1rem;
69+
}
70+
.title h1 {
71+
font-size: 1.8rem;
72+
}
73+
.title::after {
74+
display: block;
75+
content: " ";
76+
width: calc(100% + 25px);
77+
height: 4px;
78+
margin-top: 8px;
79+
margin-bottom: 15px;
80+
border-radius: 5px;
81+
background: linear-gradient(135deg, #5cff68, #05caff);
82+
}
4083
.button {
41-
height: 45px;
42-
margin: 35px 0;
84+
height: 40px;
85+
margin-top: 15px;
4386
}
4487
.button input {
4588
height: 100%;
@@ -49,13 +92,27 @@ body {
4992
color: #fff;
5093
font-size: 18px;
5194
font-weight: 500;
52-
letter-spacing: 1px;
5395
cursor: pointer;
54-
transition: all 0.3s ease;
5596
background-color: #1b2731;
5697
}
5798
.button input:hover {
58-
/* transform: scale(1.02); */
59-
background-color: #1b2731;
60-
opacity: 150px;
99+
background-color: #324c62;
100+
}
101+
.box img {
102+
display: block;
103+
margin: 25px auto;
104+
height: 150px;
61105
}
106+
.box p {
107+
text-align: center;
108+
}
109+
110+
@media (max-width:800px) {
111+
.container {
112+
padding-inline: 20px;
113+
margin-top: 25px;
114+
}
115+
.box {
116+
padding: 25px 20px;
117+
}
118+
}

0 commit comments

Comments
 (0)