pricing li fixed
This commit is contained in:
parent
50469e0ec0
commit
2a2a92beac
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { find } from 'styled-components/test-utils'
|
|
||||||
|
|
||||||
const Image = styled.img`
|
const Image = styled.img`
|
||||||
display:block;
|
display:block;
|
||||||
|
@ -13,7 +12,6 @@ const Tick = styled.input.attrs(props => ({
|
||||||
|
|
||||||
`;
|
`;
|
||||||
const Overlay = styled.div`
|
const Overlay = styled.div`
|
||||||
|
|
||||||
position: block;
|
position: block;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: rgb(0, 0, 0);
|
background: rgb(0, 0, 0);
|
||||||
|
@ -80,7 +78,6 @@ box-shadow: 4px 4px 5px 5px rgba(0,0,0,0.01), -2px -2px 5px 5px rgba(0,0,0,0.22)
|
||||||
height: 40px;
|
height: 40px;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
||||||
box-shadow: 2px 2px 5px 9px rgba(0,0,0,0.22), -2px -2px 5px 5px rgba(0,0,0,0.11);
|
box-shadow: 2px 2px 5px 9px rgba(0,0,0,0.22), -2px -2px 5px 5px rgba(0,0,0,0.11);
|
||||||
|
@ -97,9 +94,6 @@ box-shadow: 2px 2px 5px 9px rgba(0,0,0,0.22), -2px -2px 5px 5px rgba(0,0,0,0.11)
|
||||||
|
|
||||||
const HouseCard = (props) => {
|
const HouseCard = (props) => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
|
|
||||||
|
@ -116,5 +110,4 @@ const HouseCard = (props) => {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default HouseCard;
|
export default HouseCard;
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
import React, { useState, useContext } from "react";
|
import React, { useState, useContext } from "react";
|
||||||
import UserContext from "../context/UserContext";
|
import UserContext from "../context/UserContext";
|
||||||
import Axios from "axios";
|
import Axios from "axios";
|
||||||
|
|
|
@ -13,6 +13,10 @@ const PricingPlanContainer = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Pricing = styled.section`
|
const Pricing = styled.section`
|
||||||
|
@ -48,6 +52,7 @@ const Currency = styled.p`
|
||||||
|
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Title = styled.h1`
|
const Title = styled.h1`
|
||||||
font-size:1.5em;
|
font-size:1.5em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
@ -85,7 +90,7 @@ const SpecialText = styled.div`
|
||||||
|
|
||||||
`;
|
`;
|
||||||
const Description = styled.div`
|
const Description = styled.div`
|
||||||
|
display:block;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
@ -95,20 +100,17 @@ const List = styled.ul`
|
||||||
text-align: left;
|
text-align: left;
|
||||||
`;
|
`;
|
||||||
const Feature = styled.li`
|
const Feature = styled.li`
|
||||||
margin: 0;
|
margin: 0 0 25px 0;
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 0.9 em;
|
font-size: 0.9 em;
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "\2714";
|
content: "✓ ";
|
||||||
color: #009578;
|
color: green;
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -132,14 +134,13 @@ const Button = styled.a`
|
||||||
border: 1px solid #009578;
|
border: 1px solid #009578;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
text-decoration: none !important;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
||||||
background: #009578;
|
background: #009578;
|
||||||
color: #ffffff;
|
color: white !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -226,7 +227,9 @@ class PricingPlan extends Component {
|
||||||
|
|
||||||
|
|
||||||
</PricingPlanContainer>
|
</PricingPlanContainer>
|
||||||
|
<PricingPlanContainer>
|
||||||
<Button>Purchase</Button>
|
<Button>Purchase</Button>
|
||||||
|
</PricingPlanContainer>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -55,12 +55,11 @@
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
font-style:italic;
|
font-style:italic;
|
||||||
}
|
}
|
||||||
.Apper__Aside_image img{
|
.Apper__Aside_image{
|
||||||
margin-top: 600px;
|
margin-top: 600px;
|
||||||
width: 900px;
|
width: 100%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.PageSwitcher__Item {
|
.PageSwitcher__Item {
|
||||||
|
|
Loading…
Reference in New Issue