house card start

src/components/Error404.js

@@ -4,7 +4,7 @@ import Lottie from 'react-lottie';
 import animationData from '../lottie/box_error';
 
 const Body = styled.div`
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,300,500');
   font-size: 100%;
   line-height: 1.5;
   font-family: "Roboto", sans-serif;
@@ -13,7 +13,7 @@ const Body = styled.div`
   align-items: center;
 `;
 const Container = styled.div`
- 
+
   position: relative;
   background-color: #66bfbf;
   text-align: center;
@@ -25,8 +25,8 @@ const Heading = styled.h1`
   color: white;
   font-size: 4rem;
   margin: 0px;
-  
- 
+
+
   `;
 const defaultOptions = {
       loop: true,
@@ -35,7 +35,7 @@ const defaultOptions = {
       rendererSettings: {
         preserveAspectRatio: "xMidYMid slice"
       }
-    }; 
+    };
 
 const Error404 = () => {
   return (
@@ -46,8 +46,8 @@ const Error404 = () => {
        <Lottie height={500} width={500} options={defaultOptions} />
        </Container>
 
-    
-      
+
+
     </Body>
 
 

src/components/HouseCard.js

@@ -9,13 +9,13 @@ const Tick = styled.input.attrs(props => ({
     name: "radiobtn"
 
 }))`
-    
+
 `;
 const Overlay = styled.div`
   position: block;
   bottom: 0;
   background: rgb(0, 0, 0);
-  background: rgba(0, 0, 0, 0.5); 
+  background: rgba(0, 0, 0, 0.5);
   color: #f1f1f1;
   width: 100%;
   transition: .5s ease;
@@ -35,18 +35,13 @@ const Card = styled.div`
   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;
-      
-  }
+  position: relative;
 
    & .card_image  ${Image}  {
       width: inherit;
       height:inherit;
       border-radius: 40px;
+      box-shadow: none;
       object-fit:cover;
   }
 
@@ -58,19 +53,11 @@ const Card = styled.div`
   font-size: 30px;
   margin-top: -80px;
   height: 40px;
+  box-shadow: none;
+  color: #fff;
 }
 
 
-& .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;
@@ -80,11 +67,11 @@ const Card = styled.div`
 }
 &: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 5px rgba(0,0,0,0.22), -2px -2px 5px 5px rgba(0,0,0,0.11);
+
+
 }
-&:hover ${Overlay}{
+&:hover .overlay{
     opacity: 1;
 
 }
@@ -95,15 +82,15 @@ 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) => {
 
     return (
-        
-            
+
+
         <Card>
-            <Card className="card_image"> <Image src={props.img} alt="asdf" /></Card> 
+            <Card className="card_image"> <Image src={props.img} alt="asdf" /></Card>
             <Card className="card_title">
                 <p>Card Title</p>
             </Card>
         </Card>
-        
+
 
     );
 

src/components/LogInContainer.js

@@ -206,7 +206,8 @@ const responsePassGoogle = async (response) => {
 }
     return (
         <BaseApp>
-  <meta name="google-signin-client_id" content={`${process.env.REACT_APP_CLIENT_ID}.apps.googleusercontent.com`} />
+  <meta name="google-signin-client_id"
+  content={`${process.env.REACT_APP_CLIENT_ID}.apps.googleusercontent.com`} />
           <AppSide>
             {!hasLogged ? (
             <GoogleLogin

src/components/Options.js

@@ -5,11 +5,16 @@ import Footer from "./Footer";
 import styled from 'styled-components';
 
 const CardList = styled.div`
-    z-index: 0;
-  width: 100%;
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
+    display:flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  margin: 45px 15px;
+
+    flex-direction: row;
+
+
+
 `;
 export default function Options() {
 
@@ -33,7 +38,7 @@ export default function Options() {
                 content.innerText = `Step Number ${currentStep}`;
 
             });
-        
+
 
 
             previousBtn.addEventListener('click', () => {
@@ -46,12 +51,12 @@ export default function Options() {
                 }
                 content.innerText = `Step Number ${currentStep}`;
             });
-        
+
 
             finishBtn.addEventListener('click', () => {
                 window.location.reload();
             });
-        
+
 
     })
 
@@ -76,14 +81,17 @@ export default function Options() {
                     <div className="bullet ">4</div>
                 </div>
             </div>
-            
-            
-                <div id="main">
+
+
                 <p id="content" className="text-center">Step Number 1</p>
+                <div id="main">
                 <button id="previousBtn" >Previous</button>
                 <button id="nextBtn">Next</button>
                 <button id="finishBtn" >Finish</button>
             </div>
+            <CardList>
+            <Card img="skyscraper.png"/>
+            </CardList>
             <Footer />
         </div>
     )

src/options.css

@@ -7,6 +7,13 @@
 	margin-bottom:  40px;
 }
 
+#main {
+	display:flex;
+	justify-content:  center;
+	align-items:  center;
+
+}
+
 .step  {
 text-align:  center;
 }
@@ -51,7 +58,7 @@ color:  #28a745;
 .hidden  {
 	display:  none;
 }
- 
+
 button  {
 	padding:  5px  10px;
 	border:  1px  solid  black;
@@ -72,7 +79,7 @@ button:disabled:hover  {
 .text-center  {
 	text-align:  center;
 }
-  
+
 .container  {
 	max-width:  400px;
 	margin:  0  auto;