Skip to content

Commit fa6e409

Browse files
author
Emet Das
committed
update
1 parent 5f603d6 commit fa6e409

File tree

6 files changed

+300
-0
lines changed

6 files changed

+300
-0
lines changed

‎web components/pricing-table/README.md

Whitespace-only changes.

‎web components/pricing-table/images/overlay.png

14.8 KB
Loading

‎web components/pricing-table/index.html

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Pricing Table</title>
9+
<link rel="stylesheet" href="style.css" />
10+
</head>
11+
12+
<body>
13+
<section id="pricing">
14+
<div class="container">
15+
<div class="section-top">
16+
<h3 class="subheading">Pricing Table</h3>
17+
<h1 class="heading">Our Pricing Plan</h1>
18+
<p class="text-secondary">
19+
There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some form.
20+
</p>
21+
</div>
22+
<div class="pricing-table">
23+
<div class="pricing-item">
24+
<h3 class="subheading">Personal</h3>
25+
<span><h1 class="heading">$59</h1>
26+
/ year</span
27+
>
28+
<p class="text-secondary">
29+
Perfect for using in a personal website or a client project.
30+
</p>
31+
<ul class="list-items">
32+
<li class="list">1 User</li>
33+
<li class="list">All UI components</li>
34+
<li class="list">Lifetime access</li>
35+
<li class="list">Free updates</li>
36+
<li class="list">Use on 1 (one) project</li>
37+
<li class="list">3 Months support</li>
38+
</ul>
39+
<button class="btn-action">Choose Personal</button>
40+
</div>
41+
<div class="pricing-item">
42+
<h3 class="subheading">Business</h3>
43+
<span
44+
><h1 class="heading">$199</h1>
45+
/ year</span
46+
>
47+
<p class="text-secondary">
48+
Perfect for using in a business website or a client project.
49+
</p>
50+
<ul class="list-items">
51+
<li class="list">5 User</li>
52+
<li class="list">All UI components</li>
53+
<li class="list">Lifetime access</li>
54+
<li class="list">Free updates</li>
55+
<li class="list">Use on 5 (one) project</li>
56+
<li class="list">4 Months support</li>
57+
</ul>
58+
<button class="btn-action">Choose Business</button>
59+
</div>
60+
<div class="pricing-item">
61+
<h3 class="subheading">Professional</h3>
62+
<span
63+
><h1 class="heading">$250</h1>
64+
/ year</span
65+
>
66+
<p class="text-secondary">
67+
Perfect for using in a professional website or a client project.
68+
</p>
69+
<ul class="list-items">
70+
<li class="list">Unlimited User</li>
71+
<li class="list">All UI components</li>
72+
<li class="list">Lifetime access</li>
73+
<li class="list">Free updates</li>
74+
<li class="list">Use on unlimited project</li>
75+
<li class="list">12 Months support</li>
76+
</ul>
77+
<button class="btn-action">Choose Professional</button>
78+
</div>
79+
</div>
80+
</div>
81+
</section>
82+
</body>
83+
</html>

‎web components/pricing-table/starter.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
## HTML
2+
3+
```html
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<title>Pricing Table</title>
11+
<link rel="stylesheet" href="style.css" />
12+
</head>
13+
14+
<body></body>
15+
</html>
16+
```
17+
18+
## CSS
19+
20+
```css
21+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
22+
*,
23+
*::after,
24+
*::before {
25+
margin: 0;
26+
padding: 0;
27+
box-sizing: border-box;
28+
list-style-type: none;
29+
}
30+
31+
:root {
32+
--container: 142rem;
33+
--primary: #3056d3;
34+
--text-dark: #212b36;
35+
--light-dark: #637381;
36+
--box-shadow: 0 3.9rem 2.3rem -2.7rem rgba(0, 0, 0, 0.04);
37+
--box-border: rgba(48, 86, 211, 0.09);
38+
--btn-border: #d4deff;
39+
--devider: 0.1rem solid #f2f2f2;
40+
--transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
41+
}
42+
43+
html {
44+
font-size: 62.5%;
45+
scroll-behavior: smooth;
46+
}
47+
48+
body {
49+
font-size: 1.6rem;
50+
font-family: 'Inter', sans-serif;
51+
text-rendering: optimizeLegibility;
52+
}
53+
54+
.container {
55+
max-width: var(--container);
56+
margin: 0 auto;
57+
padding: 0 2rem;
58+
}
59+
```

‎web components/pricing-table/style.css

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
2+
*,
3+
*::after,
4+
*::before {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
list-style-type: none;
9+
}
10+
11+
:root {
12+
--container: 142rem;
13+
--primary: #3056d3;
14+
--text-dark: #212b36;
15+
--light-dark: #637381;
16+
--box-shadow: 0 3.9rem 2.3rem -2.7rem rgba(0, 0, 0, 0.04);
17+
--box-border: rgba(48, 86, 211, 0.09);
18+
--btn-border: #d4deff;
19+
--devider: 0.1rem solid #f2f2f2;
20+
--transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
21+
}
22+
23+
html {
24+
font-size: 62.5%;
25+
scroll-behavior: smooth;
26+
}
27+
28+
body {
29+
font-size: 1.6rem;
30+
font-family: 'Inter', sans-serif;
31+
text-rendering: optimizeLegibility;
32+
}
33+
34+
.container {
35+
max-width: var(--container);
36+
margin: 0 auto;
37+
padding: 0 2rem;
38+
}
39+
40+
.heading {
41+
font-size: clamp(2.8rem, 4.2vw, 4.2rem);
42+
color: var(--text-dark);
43+
font-weight: 700;
44+
}
45+
46+
.subheading {
47+
font-size: 1.8rem;
48+
color: var(--primary);
49+
font-weight: 600;
50+
}
51+
52+
.btn-action {
53+
margin-top: 3rem;
54+
width: 100%;
55+
padding: 1rem 3rem;
56+
border: 0.1rem solid var(--btn-border);
57+
font-weight: 600;
58+
cursor: pointer;
59+
border-radius: 0.6rem;
60+
background: rgba(var(--btn-border), 0.5);
61+
color: var(--primary);
62+
transition: var(--transition);
63+
}
64+
65+
.btn-action:hover {
66+
background: var(--primary);
67+
color: var(--btn-border);
68+
}
69+
70+
#pricing {
71+
padding: 3rem 0;
72+
}
73+
74+
.section-top {
75+
padding: 5rem 0;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
flex-direction: column;
80+
gap: 1rem;
81+
}
82+
83+
.section-top>p {
84+
text-align: center;
85+
width: 50%;
86+
}
87+
88+
.pricing-table {
89+
display: grid;
90+
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
91+
gap: 4rem;
92+
place-items: center;
93+
}
94+
95+
.pricing-item {
96+
max-width: 32rem;
97+
position: relative;
98+
padding: 2rem;
99+
border-radius: 2rem;
100+
border: 0.1rem solid var(--box-border);
101+
box-shadow: var(--box-shadow);
102+
}
103+
104+
.pricing-item::after {
105+
content: '';
106+
position: absolute;
107+
right: 0;
108+
top: 1rem;
109+
width: 6rem;
110+
height: 15rem;
111+
background: url('images/overlay.png') no-repeat center/contain;
112+
}
113+
114+
.pricing-item .heading {
115+
padding: 1rem 0;
116+
display: inline-flex;
117+
align-items: center;
118+
}
119+
120+
.pricing-item .text-secondary {
121+
padding-bottom: 2rem;
122+
}
123+
124+
.text-secondary,
125+
.pricing-item span {
126+
color: var(--light-dark);
127+
}
128+
129+
.list-items {
130+
padding-top: 2rem;
131+
display: flex;
132+
gap: 2rem;
133+
flex-direction: column;
134+
border-top: var(--devider);
135+
}
136+
137+
.list {
138+
color: var(--light-dark);
139+
}
140+
141+
@media (max-width: 768px) {
142+
.section-top>p {
143+
width: 80%;
144+
}
145+
}
146+
147+
@media (max-width: 375px) {
148+
.section-top {
149+
padding: 3rem 0;
150+
}
151+
.section-top>p {
152+
width: 100%;
153+
}
154+
.pricing-table {
155+
grid-template-columns: repeat(1, 1fr);
156+
gap: 2rem;
157+
}
158+
}

‎web components/pricing-table/thumbnail.png

493 KB
Loading

0 commit comments

Comments
 (0)