card placement

This commit is contained in:
Priyatham Sai Chand 2021-04-17 22:25:54 +05:30
parent 1f8b82a3ea
commit bd8c1d25a8
4 changed files with 23 additions and 14 deletions

View File

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

View File

@ -38,6 +38,10 @@ const ColoredSection = styled.section`
background-color:#66bfbf;
color: #fff;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
`;

View File

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

View File

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