Skip to content

Commit 6d8cfbd

Browse files
lordsid003lordsid003
committed
[Feature]: Addition of aesthetic UI accordion design for payment gateways
1 parent aea19cb commit 6d8cfbd

File tree

2 files changed

+186
-0
lines changed

2 files changed

+186
-0
lines changed

‎accordion/accordion-style.css

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
transition: all 0.25s ease;
8+
}
9+
10+
body {
11+
min-height: 100vh;
12+
min-width: 700px;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
padding: 50px;
17+
font-family: 'Quicksand', sans-serif;
18+
background: hsl(0, 0%, 95%);
19+
}
20+
21+
.accordion { width: 400px; }
22+
23+
.accordion input { display: none; }
24+
25+
.accordion-item {
26+
--hue: 205;
27+
--title-color: hsl(var(--hue), 90%, 20%);
28+
--icon-color: hsl(var(--hue), 90%, 40%);
29+
--bg: hsla(var(--hue), 100%, 90%, 0.8);
30+
31+
position: relative;
32+
display: block;
33+
cursor: pointer;
34+
margin-bottom: 10px;
35+
}
36+
37+
.accordion-head {
38+
background: #ffffff;
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
padding: 20px;
43+
border: 1px solid transparent;
44+
border-radius: 10px;
45+
box-shadow: 0 5px 10px hsla(0, 0, 0%, 0.06);
46+
}
47+
48+
.accordion-head:hover { border-color: var(--icon-color); }
49+
50+
.accordion-icon {
51+
font-size: 30px;
52+
margin-right: 15px;
53+
color: var(--icon-color);
54+
}
55+
56+
.accordion-title {
57+
font-size: 20px;
58+
font-weight: 700;
59+
color: var(--title-color);
60+
}
61+
62+
.accordion-body {
63+
height: 0;
64+
overflow: hidden;
65+
}
66+
67+
.accordion-text {
68+
background: var(--bg);
69+
border: 1px solid var(--bg);
70+
border-radius: 10px;
71+
margin-top: 5px;
72+
padding: 15px 20px;
73+
color: #0009;
74+
font-weight: 600;
75+
}
76+
77+
.item-2 { --hue: 260; }
78+
.item-3 { --hue: 330; }
79+
.item-4 { --hue: 100; }
80+
81+
#logo {
82+
position: absolute;
83+
bottom: 0;
84+
right: 0;
85+
margin-right: 2rem;
86+
margin-bottom: 2rem;
87+
color: #000;
88+
font-weight: 700;
89+
}
90+
91+
#logo span {
92+
color: hsl(39, 100%, 50%);
93+
}
94+
95+
.arrow-icon {
96+
position: absolute;
97+
right: 0;
98+
font-size: 20px;
99+
font-weight: bolder;
100+
margin-right: 30px;
101+
border: 3px solid var(--icon-color);
102+
border-radius: 50%;
103+
text-align: center;
104+
}
105+
106+
:is(#item-1, #item-2, #item-3, #item-4):checked + .accordion-item .accordion-body {
107+
height: 150px;
108+
}
109+
110+
:is(#item-1, #item-2, #item-3, #item-4):checked + .accordion-item .accordion-head .arrow-icon{
111+
transform: rotate(180deg);
112+
}

‎accordion/accordion.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>Custom Accordion</title>
8+
9+
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
10+
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
11+
12+
<link rel="stylesheet" href="accordion-style.css">
13+
14+
</head>
15+
<body>
16+
17+
<div class="accordion">
18+
19+
<input type="checkbox" name="accordion" id="item-1">
20+
<label for="item-1" class="accordion-item item-1">
21+
<div class="accordion-head">
22+
<ion-icon name="megaphone" class="accordion-icon"></ion-icon>
23+
<h3 class="accordion-title">Announcements</h3>
24+
<ion-icon name="chevron-down-outline" class="accordion-icon item-1 arrow-icon"></ion-icon>
25+
</div>
26+
<div class="accordion-body">
27+
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam sunt! Magni.</p>
28+
</div>
29+
</label>
30+
31+
<input type="checkbox" name="accordion" id="item-2">
32+
<label for="item-2" class="accordion-item item-2">
33+
<div class="accordion-head">
34+
<ion-icon name="card" class="accordion-icon"></ion-icon>
35+
<h3 class="accordion-title">Payment Details</h3>
36+
<ion-icon name="chevron-down-outline" class="accordion-icon item-2 arrow-icon"></ion-icon>
37+
</div>
38+
<div class="accordion-body">
39+
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam sunt! Magni.</p>
40+
</div>
41+
</label>
42+
43+
<input type="checkbox" name="accordion" id="item-3">
44+
<label for="item-3" class="accordion-item item-3">
45+
<div class="accordion-head">
46+
<ion-icon name="shield-checkmark" class="accordion-icon"></ion-icon>
47+
<h3 class="accordion-title">Security</h3>
48+
<ion-icon name="chevron-down-outline" class="accordion-icon item-3 arrow-icon"></ion-icon>
49+
</div>
50+
<div class="accordion-body">
51+
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam sunt! Magni.</p>
52+
</div>
53+
</label>
54+
55+
<input type="checkbox" name="accordion" id="item-4">
56+
<label for="item-4" class="accordion-item item-4">
57+
<div class="accordion-head">
58+
<ion-icon name="alert-circle" class="accordion-icon"></ion-icon>
59+
<h3 class="accordion-title">About</h3>
60+
<ion-icon name="chevron-down-outline" class="accordion-icon item-4 arrow-icon"></ion-icon>
61+
</div>
62+
<div class="accordion-body">
63+
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam sunt! Magni.</p>
64+
</div>
65+
</label>
66+
67+
</div>
68+
69+
<p id="logo">
70+
<span>~Github:</span> @lordsid003
71+
</p>
72+
73+
</body>
74+
</html>

0 commit comments

Comments
 (0)