diff --git a/public/index.html b/public/index.html
index 3d9ec53..e2a1890 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
- <link href="./src/style.css" rel="stylesheet"/>
+ <link href="../src/index.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
diff --git a/src/components/HomePage.js b/src/components/HomePage.js
index e265238..15eb165 100644
--- a/src/components/HomePage.js
+++ b/src/components/HomePage.js
@@ -20,7 +20,7 @@ const IconStyler = styled.div`
height: ${props => props.height ? props.height : 26};
color: ${ props => props.color ? props.color: "white"};
-
+
}
@@ -32,12 +32,16 @@ const defaultOptions = {
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
- };
+ };
-const ColoredSection = styled.section`
+const ColoredSection = styled.section`
background-color:#66bfbf;
color: #fff;
+ background-attachment: fixed;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
`;
@@ -73,13 +77,13 @@ const BigHeading = styled.h1`
font-family: "Ubuntu";
color: white;
font-weight: bold;
-
+
`;
const FeatureTitle = styled.h3`
font-size: 1.5rem;
color:#8f8f8f;
align-self: center;
-
+
`;
const TestimonalTitle = styled.h2`
font-size: 3rem;
@@ -106,7 +110,7 @@ export default function HomePage() {
<FeatureCol lg="6">
<BigHeading>Adapt to a new place easy peasy.</BigHeading>
-
+
<Button variant="info" onClick={() => {
history.push("/user/login")
}} >Log In</Button>
@@ -116,7 +120,7 @@ export default function HomePage() {
</FeatureCol>
<FeatureCol lg="6">
-
+
<Lottie options= { defaultOptions } />
</FeatureCol>
@@ -228,7 +232,7 @@ export default function HomePage() {
</FeatureCol>
</Row>
</ContainerPadded>
-
+
</ColoredSection>
<Sidebar logout="{logout}" />
<NavBar />
diff --git a/src/components/Options.js b/src/components/Options.js
index 9b600d5..47521f1 100644
--- a/src/components/Options.js
+++ b/src/components/Options.js
@@ -5,13 +5,14 @@ import Footer from "./Footer";
import styled from 'styled-components';
const CardList = styled.div`
- display:flex;
- justify-content: space-between;
- align-items: center;
+ display:flex;
+ justify-content: space-around;
+ align-items: stretch;
position: relative;
- margin: 45px 15px;
+ margin: auto;
+ flex-direction: row;
+ flex-wrap: wrap;
- flex-direction: row;
@@ -91,6 +92,9 @@ export default function Options() {
</div>
<CardList>
<Card img="skyscraper.png"/>
+ <Card img="skyscraper.png"/>
+ <Card img="skyscraper.png"/>
+ <Card img="skyscraper.png"/>
</CardList>
<Footer />
</div>
diff --git a/src/index.css b/src/index.css
index 7df20fc..85ca499 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
+
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;