footer.jsx

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Logo from "../../data/c3sl.png";

const useStyles = makeStyles(theme => ({
	footer: {
    background: "#000000",
    left: 0,
    position: "fixed",
    bottom: 0,
    right: 0,
    width: "100%",
    height: "10vh",
  },

  img: {
    width: "50px",
    display: "block",
    marginTop: "auto",
    marginBottom: "auto",
    marginLeft: "auto",
    marginRight: "auto",
  },

  item: {
    display: "flex",
    justifyContent: "space-evenly",
    flexDirection: "column",

  },

  link: {
    textDecoration: "none"
  },
}));

function Footer() {
	const classes = useStyles();

  return (

	<Grid container className={classes.footer}>
		
		<Grid item xs={12} sm={12} className={classes.item}>
		
			<a href="https://www.c3sl.ufpr.br/"
				 title="Ir para a página inicial do C3SL"
				className={classes.link}>
	
				<img src={Logo} className={classes.img} />
			</a>

		</Grid>
  </Grid>
  );
}

export default Footer;