Skip to content
Snippets Groups Projects
Commit 333dc268 authored by Mariana Moreira's avatar Mariana Moreira
Browse files

Issue #12: Add footer

parent 1245a4c5
No related branches found
No related tags found
4 merge requests!58Version 1.1,!54Issue #53: Fix password info,!15Issue/4,!8Resolve "Criar Footer"
import React from "react"; import React from "react";
import { HashRouter, Route } from "react-router-dom"; import { HashRouter, Route } from "react-router-dom";
import Footer from "./components/footer/footer";
import CreateForm from "./pages/CreateForm"; import CreateForm from "./pages/CreateForm";
import AnswerForm from "./pages/AnswerForm"; import AnswerForm from "./pages/AnswerForm";
//import "./global.css";
function App() { function App() {
return ( return (
<HashRouter> <HashRouter>
<Route path="/create" component={CreateForm} /> <Route path="/create" component={CreateForm} />
<Route path="/answer/:id" component={AnswerForm} /> <Route path="/answer/:id" component={AnswerForm} />
<Footer />
</HashRouter> </HashRouter>
); );
} }
......
src/components/footer/c3sl.png

5.87 KiB

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 "./c3sl.png";
const useStyles = makeStyles(theme => ({
footer: {
background: "#66a6c2",
position: "fixed",
left: 0,
bottom: 0,
right: 0,
width: "100%",
height: "auto"
},
img: {
width: "50px",
marginTop: "5px",
marginBottom: "5px",
marginLeft: "15px",
["@media (max-width:525px)"]: {
width: "50px",
["@media (max-width:338px)"]: {
marginTop: "3%"
}
},
["@media (max-height:681px)"]: {
width: "65px"
}
},
item: {
marginTop: "5px",
marginBottom: "5px",
display: "flex",
justifyContent: "space-evenly",
flexDirection: "column"
},
text: {
color: "#46525d",
fontSize: "15px",
textAlign: "center"
},
adress: {
color: "#46525d",
fontSize: "12px",
textAlign: "right",
marginRight: "15px"
}
}));
function Footer() {
const classes = useStyles();
return (
<Grid container className={classes.footer}>
<Grid item xs={2} className={classes.item}>
<img src={Logo} className={classes.img}></img>
</Grid>
<Grid item xs={8} className={classes.item}>
<Typography className={classes.text}>
Ministério da
<b>
<br />
Ciência, Tecnologia,
<br />
Inovações e Comunicações
</b>
</Typography>
</Grid>
<Grid item xs={2} className={classes.item}>
<Typography className={classes.adress}>
Esplanada dos Ministérios, Bloco R
<br />
CEP: 70044-900 Brasília-DF
<br />
Telefone: 61 2027-6000
</Typography>
</Grid>
</Grid>
);
}
export default Footer;
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
background: "#05a5dd";
}
html,
body,
#root {
height: 100%;
}
body {
background: #eceff3;
-webkit-font-smoothing: antialiased;
}
body,
input,
button {
font-family: Roboto, sans-serif;
}
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
color: #667079;
}
html,
body,
#root {
height: 100%;
}
body {
background: #eceff3;
-webkit-font-smoothing: antialiased;
}
body,
input,
button {
font-family: Roboto, sans-serif;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment