pricing li fixed

This commit is contained in:
Priyatham Sai Chand 2021-03-03 22:56:17 +05:30
parent 50469e0ec0
commit 2a2a92beac
4 changed files with 18 additions and 24 deletions

View File

@ -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);
@ -34,7 +32,7 @@ const Card = styled.div`
width: 300px; width: 300px;
height: 300px; height: 300px;
border-radius: 40px; border-radius: 40px;
box-shadow: 4px 4px 5px 5px rgba(0,0,0,0.01), -2px -2px 5px 5px rgba(0,0,0,0.22); box-shadow: 4px 4px 5px 5px rgba(0,0,0,0.01), -2px -2px 5px 5px rgba(0,0,0,0.22);
cursor: pointer; cursor: pointer;
transition: 0.4s; transition: 0.4s;
@ -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;

View File

@ -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";

View File

@ -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.9em; 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 />

View File

@ -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 {