diff --git a/src/App.js b/src/App.js index 6990081cace26209be98ce4726f140e61cff54ed..2163158b68351eaea5b4be9b6fdb561eba377d89 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,16 @@ import React from "react"; import { HashRouter, Route } from "react-router-dom"; - +import Footer from "./components/footer/footer"; import CreateForm from "./pages/CreateForm"; import AnswerForm from "./pages/AnswerForm"; +//import "./global.css"; function App() { return ( <HashRouter> <Route path="/create" component={CreateForm} /> <Route path="/answer/:id" component={AnswerForm} /> + <Footer /> </HashRouter> ); } diff --git a/src/components/footer/c3sl.png b/src/components/footer/c3sl.png new file mode 100644 index 0000000000000000000000000000000000000000..0dbfec40fed228e95ce665951d031154401e3605 Binary files /dev/null and b/src/components/footer/c3sl.png differ diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js new file mode 100644 index 0000000000000000000000000000000000000000..524635c6bf7b31975ed0a80ee96d1a1abe8103e2 --- /dev/null +++ b/src/components/footer/footer.js @@ -0,0 +1,89 @@ +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; diff --git a/src/components/global.css b/src/components/global.css new file mode 100644 index 0000000000000000000000000000000000000000..deeb81c51a0c0da8fdf7b43bc72f8fcbe4bfc430 --- /dev/null +++ b/src/components/global.css @@ -0,0 +1,26 @@ +@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; +} diff --git a/src/global.css b/src/global.css new file mode 100644 index 0000000000000000000000000000000000000000..879e608cd8cf467d0490956af673f7df84de1dcd --- /dev/null +++ b/src/global.css @@ -0,0 +1,26 @@ +@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; +}