diff --git a/src/components/PricingPlan.js b/src/components/PricingPlan.js
index b583824..dde941d 100644
--- a/src/components/PricingPlan.js
+++ b/src/components/PricingPlan.js
@@ -2,6 +2,80 @@ import React, { Component } from 'react';
import '../pricing-plan.css';
import NavBar from './NavBar';
import Footer from './Footer';
+import styles from 'styled-components';
+
+const WhiteContainer = styled.div`
+ background: white;
+
+`;
+const PricingPlanContainer = styled.div`
+
+ display:flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px;
+`;
+
+const PricingPlan = styled.section`
+
+ background: white;
+ width:300px;
+ border-radius: 25px;
+ box-shadow: 0 0 5px rgba(0,0,0,0.2);
+ overflow: hidden;
+ font-family: sans-serif;
+ font-size: 16px;
+ line-height: 1.5;
+ color: #555555;
+ margin: 15px;
+
+ &:hover &:active {
+ box-shadow: 0 0 15px rgba(0,0,0,0.4);
+ transform: scale(1.05);
+
+
+ }
+`;
+const Text = styled.p`
+ font-size: 0.9em;
+ text-align: center;
+ margin: 0 0 10px 0;
+`;
+const Currency = styled.p`
+
+ margin: 0;
+ text-align: center;
+ font-size: 2em;
+ color:#000000;
+
+
+`;
+const Title = styled.h1`
+ font-size:1.5em;
+ font-weight: 400;
+`;
+
+
+const Header = styled.div`
+
+ padding:25px;
+ background: #009578;
+ color: #ffffff;
+
+`;
+
+const PricingPlan_SpecialText = styled.div`
+
+ padding: 10px;
+ text-align: center;
+ font-weight: bold;
+ color: #ffffff;
+ background: #007c64;
+ box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
+
+`;
+const
+
class PricingPlan extends Component {
render(){
@@ -11,6 +85,7 @@ class PricingPlan extends Component {
+ Pricing Plan
@@ -66,8 +141,8 @@ class PricingPlan extends Component {
- Feature #1
- Feature #2
- - Feature #3
- - Feature #4
+ - Serv
+ - Feng shu consultancy free
< div class='pricing-plan__actions'>
diff --git a/src/components/Stepper.js b/src/components/Stepper.js
index b582cfa..f967584 100644
--- a/src/components/Stepper.js
+++ b/src/components/Stepper.js
@@ -1,6 +1,7 @@
import React from 'react';
import Footer from './Footer';
import '../stepper.css';
+import NavBar from './NavBar';
export default function Stepper() {
@@ -11,7 +12,7 @@ export default function Stepper() {
children = list.children,
completed = 0;
-// simulate activating a node
+// activating a node button
next.addEventListener('click', function() {
// count the number of completed nodes.
@@ -46,6 +47,7 @@ clear.addEventListener('click', function() {
return (
+ < NavBar />
Relocation Status
diff --git a/src/pricing-plan.css b/src/pricing-plan.css
index cd1d00b..12f2f0c 100644
--- a/src/pricing-plan.css
+++ b/src/pricing-plan.css
@@ -4,40 +4,19 @@
background: white;
}
.pricing-plan {
- background: white;
- width:300px;
- border-radius: 25px;
- box-shadow: 0 0 5px rgba(0,0,0,0.2);
- overflow: hidden;
- font-family: sans-serif;
- font-size: 16px;
- line-height: 1.5;
- color: #555555;
- margin: 15px;
}
-.pricing-plan:hover{
+.pricing-plan:hover .pricing-plan:active {
- box-shadow: 0 0 15px rgba(0,0,0,0.4);
- transform: scale(1.05);
}
.pricing-plan__header{
- padding:25px;
- background: #009578;
- color: #ffffff;
}
.pricing-plan__special-text {
- padding: 10px;
- text-align: center;
- font-weight: bold;
- color: #ffffff;
- background: #007c64;
- box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
}
.pricing-plan__title,.pricing-plan__summary{
@@ -125,23 +104,12 @@
}
.pricing-plan__cost{
- margin: 0;
- text-align: center;
- font-size: 2em;
- color:#000000;
}
.pricing-plan__text {
- font-size: 0.9em;
- text-align: center;
- margin: 0 0 10px 0;
}
.pricing-plan-container{
- display:flex;
- align-items: center;
- justify-content: center;
- padding: 10px;
}
\ No newline at end of file