priyatham
/
Locaft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

house card hover fix

This commit is contained in:
Priyatham Sai Chand 2021-04-18 22:25:21 +05:30
parent 521219bbbb
commit 508cbf5d63
3 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/HouseCard.js
View File

@ -65,11 +65,8 @@ const Card = styled.div`
cursor: pointer; cursor: pointer;
transition: 0.4s; transition: 0.4s;
position: relative; position: relative;
background-image: url("skyscraper.png"); background-image: url("${props => props.img ? props.img : "vrl.jpg"}");
object-fit: cover; background-size: cover;
&:hover ${Overlay} { &:hover ${Overlay} {
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
@ -88,13 +85,11 @@ const Card = styled.div`
const HouseCard = (props) => { const HouseCard = (props) => {
return ( return (
<Card img = {props.img}>
<Card>
<Overlay> <Overlay>
<Hover> <Hover>
<CardTitle>asdf</CardTitle> <CardTitle>{props.title ? props.title : "asdf"}</CardTitle>
<Paragraph>zxcv</Paragraph> <Paragraph>{props.desc ? props.desc: "zxcv"}</Paragraph>
</Hover> </Hover>
</Overlay> </Overlay>
</Card> </Card>

8
src/components/Options.js
View File

@ -11,6 +11,8 @@ const CardList = styled.div`
grid-template-rows: repeat(auto-fill,minmax(200px,1fr)); grid-template-rows: repeat(auto-fill,minmax(200px,1fr));
grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
grid-gap: 30px; grid-gap: 30px;
align-items: center;
justify-items: center;
@ -91,12 +93,12 @@ export default function Options() {
<button id="finishBtn" >Finish</button> <button id="finishBtn" >Finish</button>
</div> </div>
<CardList> <CardList>
<Card img="skyscraper.png" title="cardtitle" desc="description"/>
<Card img="skyscraper.png"/> <Card img="skyscraper.png"/>
<Card img="skyscraper.png"/> <Card img="skyscraper.png"/>
<Card img="skyscraper.png"/> <Card img="skyscraper.png"/>
<Card img="skyscraper.png"/> <Card img="indigo.jpg"/>
<Card img="skyscraper.png"/> <Card img="locaft.png"/>
<Card img="skyscraper.png"/>
<Card img="skyscraper.png"/> <Card img="skyscraper.png"/>
<Card img="skyscraper.png"/> <Card img="skyscraper.png"/>
<Card img="skyscraper.png"/> <Card img="skyscraper.png"/>

9
src/components/Sidebar.js
View File

@ -13,7 +13,6 @@ const StyledMenu = styled.nav`
height: 100vh; height: 100vh;
text-align: left; text-align: left;
padding: 2rem; padding: 2rem;
position: absolute;
top: 0; top: 0;
left: 0; left: 0;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
@ -43,11 +42,11 @@ const StyledMenu = styled.nav`
} }
` `
const Menu = (props) => { const Menu = ({open, setOpen}) => {
const { userData, setUserData } = useContext(UserContext); const { userData, setUserData } = useContext(UserContext);
return ( return (
<StyledMenu open={props.open}> <StyledMenu open={open} >
<a href="/#about-us"> <a href="/#about-us"onClick={() => setOpen(false)}>
<span role="img" aria-label="about us">💁🏻‍♂️</span> <span role="img" aria-label="about us">💁🏻‍♂️</span>
About us About us
</a> </a>
@ -55,7 +54,7 @@ const Menu = (props) => {
<span role="img" aria-label="pricing">💸</span> <span role="img" aria-label="pricing">💸</span>
Pricing Pricing
</a> </a>
<a href="/#footer"> <a href="/#footer"onClick={() => setOpen(false)}>
<span role="img" aria-label="contact us">📩</span> <span role="img" aria-label="contact us">📩</span>
Contact Contact
</a> </a>