diff --git a/src/components/PricingPlan.js b/src/components/PricingPlan.js
index a0c734f..fcdf06d 100644
--- a/src/components/PricingPlan.js
+++ b/src/components/PricingPlan.js
@@ -86,7 +86,7 @@ const SpecialText = styled.div`
}
`;
-const Desc = styled.div`
+const Description = styled.div`
padding: 25px;
@@ -96,7 +96,58 @@ const List = styled.ul `
margin: 0;
text-align: left;
`;
+const Feature = styled.li`
+ list-style: none;
+ margin: 0;
+ padding-left: 25px;
+ position: relative;
+ font-size: 0.9em;
+ &:not(:last-child) {
+ margin-bottom: 2em;
+ }
+
+ &::before {
+ content: "\2714";
+ color: #009578;
+ position: absolute;
+ left: 0;
+
+ }
+
+`;
+const Actions = styled.div`
+
+ padding: 25px;
+ border-top: 1px solid #eeeeee;
+ display: flex;
+ flex-direction: column;
+
+`;
+const Button = styled.a`
+
+ display: inline-block;
+ margin: 15px auto;
+ padding: 8px 20px;
+ color: #009578;
+ background: #ffffff;
+ border-radius: 5px;
+ border: 1px solid #009578;
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+ text-decoration: none !important;
+ font-weight: bold;
+ text-align: center;
+
+ &:hover {
+
+ background: #009578;
+ color: #ffffff;
+
+ }
+
+
+`;
class PricingPlan extends Component {
render(){
@@ -107,22 +158,22 @@ class PricingPlan extends Component {
$10
per month
diff --git a/src/pricing-plan.css b/src/pricing-plan.css index 60c3919..0dcddbb 100644 --- a/src/pricing-plan.css +++ b/src/pricing-plan.css @@ -1,7 +1,6 @@ .pricing-plan-container { - background: white; } .pricing-plan { @@ -40,55 +39,25 @@ .pricing-plan__feature { - list-style: none; - margin: 0; - padding-left: 25px; - position: relative; - font-size: 0.9em; } .pricing-plan__feature:not(:last-child) { - - margin-bottom: 2em; } .pricing-plan__feature::before { - content: "\2714"; - color: #009578; - position: absolute; - left: 0; } .pricing-plan__actions { - padding: 25px; - border-top: 1px solid #eeeeee; - display: flex; - flex-direction: column; } .pricing-plan__button { - display: inline-block; - margin: 15px auto; - padding: 8px 20px; - color: #009578; - background: #ffffff; - border-radius: 5px; - border: 1px solid #009578; - text-transform: uppercase; - letter-spacing: 0.02em; - text-decoration: none !important; - font-weight: bold; - text-align: center; } .pricing-plan__button:hover{ - - background: #009578; - color: #ffffff; } .pricing-plan__cost{