card placement
This commit is contained in:
parent
1f8b82a3ea
commit
bd8c1d25a8
|
@ -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
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue