add flower to background and adjust layout

This commit is contained in:
desmukh 2023-01-08 02:14:09 +05:00
parent e1adea64af
commit ac79178248
4 changed files with 45 additions and 26 deletions

View File

@ -23,16 +23,18 @@ const Footer = () => (
bgcolor="secondary.main"
py={5}
>
<Container maxWidth="sm">
<Container maxWidth="lg">
<Grid container>
<Grid item xs={12} md={1}>
<Grid item xs={false} md={2} />
<Grid item xs={12} md={6} container spacing={1}>
<Grid item xs={12} md={2}>
<StaticImage
src="../images/autonomic-monster.png"
alt="Autonomic monster logo"
width={38}
/>
</Grid>
<Grid item xs={12} md={6}>
<Grid item xs={12} md={5}>
<FooterText bold>{address.name}</FooterText>
<FooterText>{address.line1}</FooterText>
<FooterText>{address.city}</FooterText>
@ -47,6 +49,7 @@ const Footer = () => (
<FooterText bold>Member of the CoTech Network</FooterText>
</Grid>
</Grid>
</Grid>
</Container>
</Box>
)

View File

@ -1,9 +1,10 @@
import * as React from "react"
import { Link as GatsbyLink } from "gatsby"
import { AppBar, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
import { AppBar, Box, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
import NavMenu from "./nav-menu"
import theme from "./theme"
import Footer from "./footer"
import flower from "../images/flower.png"
const Layout = ({ location, title, children }) => {
// const rootPath = `${__PATH_PREFIX__}/`
@ -45,14 +46,29 @@ const Layout = ({ location, title, children }) => {
</Link>
</Toolbar>
</AppBar>
<Container maxWidth="md" sx={{ py: 8 }}>
<Container maxWidth="lg" sx={{ py: 8 }}>
<Grid container spacing={2}>
<Grid item xs={12} md={3}>
<Grid item xs={12} md={2}>
<NavMenu location={location} />
</Grid>
<Grid item xs={12} md={9}>
<Grid item xs={12} md={6}>
<main>{children}</main>
</Grid>
<Grid item xs={12} md={4}>
<Box position={"relative"} height="100%" zIndex={-100}>
<Box
sx={{
position: "absolute",
height: "100%",
width: "100%",
bottom: -90,
backgroundImage: `url(${flower})`,
backgroundRepeat: "no-repeat",
backgroundPositionY: "100%",
}}
/>
</Box>
</Grid>
</Grid>
</Container>
<Footer />

View File

@ -14,7 +14,7 @@ const navMenuItems = [
const NavMenu = ({ location }) => {
return (
<Box pt={18} component="nav">
<Stack spacing={2} alignItems="flex-end" mr={8}>
<Stack spacing={2} alignItems="flex-end" mr={6}>
{navMenuItems.map(({ label, path }) => (
<Link
component={GatsbyLink}

BIN
src/images/flower.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB