diff --git a/src/App.js b/src/App.js index f489176..92ba364 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,14 @@ import React, { Component } from 'react'; import HomePage from "./components/HomePage"; import Login from "./components/SignIn"; +import PricingPlan from "./components/PricingPlan"; import LogInContainer from "./components/LogInContainer"; import { BrowserRouter, Route, Switch } from 'react-router-dom'; class App extends Component { render(){ return (
+ diff --git a/src/components/PricingPlan.js b/src/components/PricingPlan.js new file mode 100644 index 0000000..df30b09 --- /dev/null +++ b/src/components/PricingPlan.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; +import './pricing-plan.css'; + +class PricingPlan extends Component { + + render(){ + return( +
+
+
+

Basic Package

+

For those getting started

+ +
+
+
+
+ +
+ + ) + } + +} +export default PricingPlan; \ No newline at end of file diff --git a/src/components/pricing-plan.css b/src/components/pricing-plan.css new file mode 100644 index 0000000..c66f34e --- /dev/null +++ b/src/components/pricing-plan.css @@ -0,0 +1,41 @@ +.pricing-plan { + + 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__header{ + + padding:25px; + background: #009578; + color: #ffffff; + +} + +.pricing-plan__title, +.pricing-plan__summary{ + + margin: 0; + text-align: center; +} + +.pricing-plan__title{ + + font-size: 1.5em; + font-weight: 400; + +} + +.pricing-plan__summary { + + font-size: 1em; + font-weight:300; +} \ No newline at end of file