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;

src/components/HouseCard.js

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

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;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  margin: 45px 15px;
+
+    flex-direction: row;
+
+
+
 `;
 export default function Options() {
 
@@ -78,12 +83,15 @@ export default function Options() {
             </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;
 }