image cards
This commit is contained in:
parent
e34f9035ff
commit
1794c1eac1
|
|
@ -0,0 +1,120 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { find } from 'styled-components/test-utils'
|
||||
|
||||
const Image = styled.img`
|
||||
display:block;
|
||||
`;
|
||||
const Tick = styled.input.attrs(props => ({
|
||||
type: "radio",
|
||||
name: "radiobtn"
|
||||
|
||||
}))`
|
||||
|
||||
`;
|
||||
const Overlay = styled.div`
|
||||
|
||||
position: block;
|
||||
bottom: 0;
|
||||
background: rgb(0, 0, 0);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #f1f1f1;
|
||||
width: 100%;
|
||||
transition: .5s ease;
|
||||
opacity:0;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-top: -90px;
|
||||
`;
|
||||
|
||||
|
||||
const Card = styled.div`
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
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);
|
||||
cursor: pointer;
|
||||
transition: 0.4s;
|
||||
|
||||
|
||||
& .card_image {
|
||||
width: inherit;
|
||||
height:inherit;
|
||||
|
||||
}
|
||||
|
||||
& .card_image ${Image} {
|
||||
width: inherit;
|
||||
height:inherit;
|
||||
border-radius: 40px;
|
||||
object-fit:cover;
|
||||
}
|
||||
|
||||
& .card_title {
|
||||
text-align: center;
|
||||
border-radius: 0px 0px 40px 40px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
margin-top: -80px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
& .card_title {
|
||||
text-align: center;
|
||||
border-radius: 0px 0px 40px 40px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
margin-top: -80px;
|
||||
height: 40px;
|
||||
color: white !important;
|
||||
}
|
||||
& .card_tick {
|
||||
content:'asdf';
|
||||
border-radius: 0px 0px 40px 40px;
|
||||
margin-top: -90px;
|
||||
height: 40px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
box-shadow: 2px 2px 5px 9px rgba(0,0,0,0.22), -2px -2px 5px 5px rgba(0,0,0,0.11);
|
||||
;
|
||||
|
||||
}
|
||||
&:hover ${Overlay}{
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
|
||||
const HouseCard = (props) => {
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
|
||||
<Card>
|
||||
<Card className="card_image"> <Image src={props.img} alt="asdf" /></Card>
|
||||
<Card className="card_title">
|
||||
<p>Card Title</p>
|
||||
</Card>
|
||||
</Card>
|
||||
|
||||
|
||||
);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default HouseCard;
|
||||
|
|
@ -5,9 +5,6 @@ import UserContext from "../context/UserContext";
|
|||
|
||||
export default function NavBar() {
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
|
||||
|
||||
|
||||
const logout = () => {
|
||||
setUserData({
|
||||
token: undefined,
|
||||
|
|
@ -15,21 +12,19 @@ export default function NavBar() {
|
|||
});
|
||||
localStorage.setItem("auth-token", "");
|
||||
};
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.addEventListener("scroll", () => {
|
||||
var header = document.querySelector("header");
|
||||
var header = document.getElementById("navheader");
|
||||
header.classList.toggle("sticky", window.scrollY > 0);
|
||||
|
||||
})
|
||||
console.log(userData);
|
||||
});
|
||||
});
|
||||
return (
|
||||
<div className="navbar">
|
||||
<header>
|
||||
<header id="navheader">
|
||||
<input type="checkbox" id="check" />
|
||||
<label htmlFor="check" className="checkbtn">
|
||||
<i className="fas fa-bars" id="btn"></i>
|
||||
</label>
|
||||
|
||||
|
||||
<a href="/" className="logo">locaft</a>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
import React from 'react';
|
||||
import '../options.css';
|
||||
import Card from './HouseCard';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const CardList = styled.div`
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
export default function Options() {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
|
@ -14,7 +23,7 @@ export default function Options() {
|
|||
let currentStep = 1;
|
||||
if (nextBtn) {
|
||||
nextBtn.addEventListener('click', () => {
|
||||
bullets[currentStep - 1].classList.add('completed');
|
||||
bullets[currentStep - 1].classNameList.add('completed');
|
||||
currentStep += 1;
|
||||
previousBtn.disabled = false;
|
||||
if (currentStep === MAX_STEPS) {
|
||||
|
|
@ -29,7 +38,7 @@ export default function Options() {
|
|||
|
||||
if (previousBtn) {
|
||||
previousBtn.addEventListener('click', () => {
|
||||
bullets[currentStep - 2].classList.remove('completed');
|
||||
bullets[currentStep - 2].classNameList.remove('completed');
|
||||
currentStep -= 1;
|
||||
nextBtn.disabled = false;
|
||||
finishBtn.disabled = true;
|
||||
|
|
@ -50,27 +59,31 @@ export default function Options() {
|
|||
|
||||
return (
|
||||
|
||||
<div class="container">
|
||||
<div className="container">
|
||||
<div id="stepProgressBar">
|
||||
<div class="step">
|
||||
<p class="step-text">About</p>
|
||||
<div class="bullet">1</div>
|
||||
<div className="step">
|
||||
<p className="step-text">About</p>
|
||||
<div className="bullet">1</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p class="step-text">Contact</p>
|
||||
<div class="bullet">2</div>
|
||||
<div className="step">
|
||||
<p className="step-text">Contact</p>
|
||||
<div className="bullet">2</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p class="step-text">Step 3</p>
|
||||
<div class="bullet">3</div>
|
||||
<div className="step">
|
||||
<p className="step-text">Step 3</p>
|
||||
<div className="bullet">3</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p class="step-text">Step 4</p>
|
||||
<div class="bullet ">4</div>
|
||||
<div className="step">
|
||||
<p className="step-text">Step 4</p>
|
||||
<div className="bullet ">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<CardList>
|
||||
<Card img="https://i.redd.it/b3esnz5ra34y.jpg" />
|
||||
<Card img="https://i.redd.it/b3esnz5ra34y.jpg" />
|
||||
</CardList>
|
||||
<div id="main">
|
||||
<p id="content" class="text-center">Step Number 1</p>
|
||||
<p id="content" className="text-center">Step Number 1</p>
|
||||
<button id="previousBtn" >Previous</button>
|
||||
<button id="nextBtn">Next</button>
|
||||
<button id="finishBtn" >Finish</button>
|
||||
|
|
|
|||
|
|
@ -170,3 +170,4 @@
|
|||
padding-bottom: 2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue