├── check-circle.svg ├── index.html ├── styles.css └── x-square.svg /check-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Price Comparison Table 10 | 11 | 12 |
13 |
14 |
15 |
16 |
$
17 | 10 18 |
/mo
19 |
20 |
Basic
21 |
22 |
23 |
24 | 25 | Feature A 26 |
27 |
28 | 29 | Feature B 30 |
31 |
32 | 33 | Feature C 34 |
35 |
36 | 37 | Feature D 38 |
39 |
40 | 41 | Feature E 42 |
43 |
44 | 45 | Feature F 46 |
47 | 48 |
49 |
50 |
Most Popular
51 |
52 |
53 |
$
54 | 20 55 |
/mo
56 |
57 |
Professional
58 |
59 |
60 |
61 | 62 | Feature A 63 |
64 |
65 | 66 | Feature B 67 |
68 |
69 | 70 | Feature C 71 |
72 |
73 | 74 | Feature D 75 |
76 |
77 | 78 | Feature E 79 |
80 |
81 | 82 | Feature F 83 |
84 | 85 |
86 |
87 |
88 |
89 |
$
90 | 50 91 |
/mo
92 |
93 |
Enterprise
94 |
95 |
96 |
97 | 98 | Feature A 99 |
100 |
101 | 102 | Feature B 103 |
104 |
105 | 106 | Feature C 107 |
108 |
109 | 110 | Feature D 111 |
112 |
113 | 114 | Feature E 115 |
116 |
117 | 118 | Feature F 119 |
120 | 121 |
122 |
123 | 124 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | box-sizing: border-box; 3 | } 4 | 5 | :root { 6 | --accent-color: #641BFF; 7 | --heading-font-family: 'Poppins', sans-serif; 8 | --body-font-family: 'Lato', sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: #F8F9FB; 14 | min-width: 100vw; 15 | min-height: 100vh; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | font-family: var(--body-font-family); 20 | } 21 | 22 | .price-comparison { 23 | display: flex; 24 | justify-content: center; 25 | align-items: stretch; 26 | width: 100%; 27 | margin: 1rem; 28 | } 29 | 30 | .price-column { 31 | background-color: white; 32 | box-shadow: 0 7px 30px rgba(52, 31, 97, 0.1); 33 | padding: 2rem; 34 | flex-grow: 1; 35 | flex-basis: 0; 36 | max-width: 275px; 37 | border-radius: 8px; 38 | } 39 | 40 | .price-column.popular { 41 | position: relative; 42 | background-color: var(--accent-color); 43 | box-shadow: 0 7px 30px rgba(52, 13, 135, 0.3); 44 | color: white; 45 | margin-top: -1.5rem; 46 | padding-top: 3.5rem; 47 | margin-bottom: -1.5rem; 48 | padding-bottom: 3.5rem; 49 | } 50 | 51 | .price-column:first-child { 52 | border-top-right-radius: 0; 53 | border-bottom-right-radius: 0; 54 | } 55 | 56 | .price-column:last-child { 57 | border-top-left-radius: 0; 58 | border-bottom-left-radius: 0; 59 | } 60 | 61 | .price-header { 62 | display: flex; 63 | flex-direction: column; 64 | align-items: center; 65 | font-family: var(--heading-font-family); 66 | font-weight: bold; 67 | } 68 | 69 | .price { 70 | font-size: 3.5rem; 71 | display: flex; 72 | } 73 | 74 | .dollar-sign { 75 | font-size: 1.5rem; 76 | margin-top: .5rem; 77 | margin-right: .25rem; 78 | } 79 | 80 | .per-month { 81 | font-size: .75rem; 82 | align-self: flex-end; 83 | margin-bottom: 1.1rem; 84 | text-transform: uppercase; 85 | } 86 | 87 | .plan-name { 88 | text-transform: uppercase; 89 | font-size: .9rem; 90 | margin-top: 1rem; 91 | margin-bottom: 0; 92 | } 93 | 94 | .divider { 95 | height: 1px; 96 | width: 100%; 97 | background-color: rgba(0, 0, 0, .2); 98 | margin-top: 2rem; 99 | margin-bottom: 2rem; 100 | } 101 | 102 | .price-column.popular .divider { 103 | background-color: rgba(255, 255, 255, .2); 104 | } 105 | 106 | .feature { 107 | display: flex; 108 | align-items: center; 109 | margin: .5rem; 110 | } 111 | 112 | .feature img { 113 | height: 1.1em; 114 | width: 1.1em; 115 | margin-right: .5rem; 116 | } 117 | 118 | .feature.inactive { 119 | color: #999; 120 | text-decoration-line: line-through; 121 | } 122 | 123 | .most-popular { 124 | position: absolute; 125 | top: .5rem; 126 | left: .5rem; 127 | right: .5rem; 128 | text-align: center; 129 | text-transform: uppercase; 130 | font-weight: bold; 131 | font-family: var(--heading-font-family); 132 | } 133 | 134 | .cta { 135 | border: none; 136 | background-color: var(--accent-color); 137 | color: white; 138 | width: 100%; 139 | padding: .75rem 1rem; 140 | cursor: pointer; 141 | font-family: var(--heading-font-family); 142 | font-weight: bold; 143 | border-radius: 4px; 144 | margin-top: 3rem; 145 | transition: 100ms; 146 | transform: scale(1); 147 | } 148 | 149 | .price-column.popular .cta { 150 | background-color: white; 151 | color: var(--accent-color); 152 | } 153 | 154 | .cta:hover, .cta:focus { 155 | transform: scale(1.1); 156 | } -------------------------------------------------------------------------------- /x-square.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------