diff --git a/frontend/src/App.js b/frontend/src/App.js
index daa7878..bf2a45d 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,12 +1,11 @@
import React from "react";
import Routes from "./routes";
import "react-toastify/dist/ReactToastify.css";
-import GlobalStyled from "./style/GlobalStyle";
+
const App = () => {
return (
<>
- <GlobalStyled />
<Routes />
</>
);
diff --git a/frontend/src/assets/icons/email.svg b/frontend/src/assets/icons/email.svg
new file mode 100644
index 0000000..fca904f
--- /dev/null
+++ b/frontend/src/assets/icons/email.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8334 3.49998C12.8334 2.85831 12.3084 2.33331 11.6667 2.33331H2.33341C1.69175 2.33331 1.16675 2.85831 1.16675 3.49998V10.5C1.16675 11.1416 1.69175 11.6666 2.33341 11.6666H11.6667C12.3084 11.6666 12.8334 11.1416 12.8334 10.5V3.49998ZM11.6667 3.49998L7.00008 6.41665L2.33341 3.49998H11.6667ZM11.6667 10.5H2.33341V4.66665L7.00008 7.58331L11.6667 4.66665V10.5Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/icons/key.svg b/frontend/src/assets/icons/key.svg
new file mode 100644
index 0000000..326b03e
--- /dev/null
+++ b/frontend/src/assets/icons/key.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8333 11.0834H9.33333V8.75002H7.77C7.105 10.1617 5.67 11.0834 4.08333 11.0834C1.83167 11.0834 0 9.25169 0 7.00002C0 4.74835 1.83167 2.91669 4.08333 2.91669C5.67 2.91669 7.09917 3.83835 7.77 5.25002H14V8.75002H12.8333V11.0834ZM10.5 9.91669H11.6667V7.58335H12.8333V6.41669H6.965L6.83083 6.02585C6.4225 4.86502 5.31417 4.08335 4.08333 4.08335C2.47333 4.08335 1.16667 5.39002 1.16667 7.00002C1.16667 8.61002 2.47333 9.91669 4.08333 9.91669C5.31417 9.91669 6.4225 9.13502 6.83083 7.97419L6.965 7.58335H10.5V9.91669ZM4.08333 8.75002C3.12083 8.75002 2.33333 7.96252 2.33333 7.00002C2.33333 6.03752 3.12083 5.25002 4.08333 5.25002C5.04583 5.25002 5.83333 6.03752 5.83333 7.00002C5.83333 7.96252 5.04583 8.75002 4.08333 8.75002ZM4.08333 6.41669C3.7625 6.41669 3.5 6.67919 3.5 7.00002C3.5 7.32085 3.7625 7.58335 4.08333 7.58335C4.40417 7.58335 4.66667 7.32085 4.66667 7.00002C4.66667 6.67919 4.40417 6.41669 4.08333 6.41669Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/icons/visibility.svg b/frontend/src/assets/icons/visibility.svg
new file mode 100644
index 0000000..004f0c5
--- /dev/null
+++ b/frontend/src/assets/icons/visibility.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99992 3.49998C9.21075 3.49998 11.1824 4.74248 12.1449 6.70831C11.1824 8.67415 9.21075 9.91665 6.99992 9.91665C4.78909 9.91665 2.81742 8.67415 1.85492 6.70831C2.81742 4.74248 4.78909 3.49998 6.99992 3.49998ZM6.99992 2.33331C4.08325 2.33331 1.59242 4.14748 0.583252 6.70831C1.59242 9.26915 4.08325 11.0833 6.99992 11.0833C9.91658 11.0833 12.4074 9.26915 13.4166 6.70831C12.4074 4.14748 9.91658 2.33331 6.99992 2.33331ZM6.99992 5.24998C7.80492 5.24998 8.45825 5.90331 8.45825 6.70831C8.45825 7.51331 7.80492 8.16665 6.99992 8.16665C6.19492 8.16665 5.54158 7.51331 5.54158 6.70831C5.54158 5.90331 6.19492 5.24998 6.99992 5.24998ZM6.99992 4.08331C5.55325 4.08331 4.37492 5.26165 4.37492 6.70831C4.37492 8.15498 5.55325 9.33331 6.99992 9.33331C8.44659 9.33331 9.62492 8.15498 9.62492 6.70831C9.62492 5.26165 8.44659 4.08331 6.99992 4.08331Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/Logo.png b/frontend/src/assets/images/Logo.png
new file mode 100644
index 0000000..16e0206
Binary files /dev/null and b/frontend/src/assets/images/Logo.png differ
diff --git a/frontend/src/assets/videos/video.mp4 b/frontend/src/assets/videos/video.mp4
new file mode 100644
index 0000000..23baf11
Binary files /dev/null and b/frontend/src/assets/videos/video.mp4 differ
diff --git a/frontend/src/components/Base/ContainerLogin.jsx b/frontend/src/components/Base/ContainerLogin.jsx
index 5129a2f..38fb109 100644
--- a/frontend/src/components/Base/ContainerLogin.jsx
+++ b/frontend/src/components/Base/ContainerLogin.jsx
@@ -1,19 +1,8 @@
import React from "react";
-import styled from "styled-components";
-
-const ContainerLoginStyled = styled.div`
- width: 100%;
- height: 100vh;
- display: flex;
- flex-direction: column;
-`;
+import ContainerLoginStyled from "./ContainerLogin.style";
const ContainerLogin = ({ children }) => {
- return (
- <>
- <ContainerLoginStyled>{children}</ContainerLoginStyled>
- </>
- );
+ return <ContainerLoginStyled>{children}</ContainerLoginStyled>;
};
export default ContainerLogin;
diff --git a/frontend/src/components/Base/ContainerLogin.style.jsx b/frontend/src/components/Base/ContainerLogin.style.jsx
new file mode 100644
index 0000000..63e2a06
--- /dev/null
+++ b/frontend/src/components/Base/ContainerLogin.style.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+const ContainerLoginStyled = styled.div`
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+`;
+export default ContainerLoginStyled
diff --git a/frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx
new file mode 100644
index 0000000..c32d356
--- /dev/null
+++ b/frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import logo from "../../../assets/images/Logo.png";
+
+const AvatarBlock = styled.div`
+display: flex;
+justify-content: center;
+background-image: url(${logo});
+background-size: contain;
+background-repeat: no-repeat;
+background-color: white;
+border-radius: 50%;
+width: 45px;
+height: 45px;
+`;
+
+export default AvatarBlock;
\ No newline at end of file
diff --git a/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx
new file mode 100644
index 0000000..bdb0028
--- /dev/null
+++ b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import AvatarLoginStyle from "./AvatarLogin.style";
+import AvatarBlock from "./AvatarBlock.style";
+import H1Title from "./H1Title.style";
+
+const AvatarLogin = () => {
+ return (
+ <AvatarLoginStyle>
+ <AvatarBlock />
+ <H1Title>OmniHit</H1Title>
+ </AvatarLoginStyle>
+ );
+};
+
+export default AvatarLogin;
+
diff --git a/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx
new file mode 100644
index 0000000..8cb97d9
--- /dev/null
+++ b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const AvatarLoginStyle = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 16px;
+`;
+
+export default AvatarLoginStyle;
diff --git a/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx
new file mode 100644
index 0000000..a3410d7
--- /dev/null
+++ b/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+const H1Title = styled.h1`
+ font-size: 32px;
+ font-family: "HelveticaHeavy";
+ text-transform: uppercase;
+`;
+export default H1Title
\ No newline at end of file
diff --git a/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx b/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx
new file mode 100644
index 0000000..d9cfabe
--- /dev/null
+++ b/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Company = () => {
+ return (
+ <div>Company</div>
+ )
+}
+
+export default Company
\ No newline at end of file
diff --git a/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx
new file mode 100644
index 0000000..a7ae3b7
--- /dev/null
+++ b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import BtnSubmitStyled from "./BtnSubmit.style";
+
+const BtnSubmit = ({ submit }) => {
+ return <BtnSubmitStyled type={submit}>Login</BtnSubmitStyled>;
+};
+
+export default BtnSubmit;
+
diff --git a/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx
new file mode 100644
index 0000000..1ba7fb4
--- /dev/null
+++ b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+import { color } from "../../../../style/varibles";
+
+const BtnSubmitStyled = styled.button`
+ cursor: pointer;
+ width: 342px;
+ padding: 12px;
+ margin-top: 16px;
+ background-color: ${color.complement.azulCielo};
+ color: ${color.pricinpal.blanco};
+ border: none;
+ border-radius: 6px;
+ font-size: 14px;
+ font-family: "HelveticaRoman";
+ box-shadow: -1px 0px 8px 0px rgba(255,255,255,.25);
+`;
+
+export default BtnSubmitStyled;
+
diff --git a/frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx
new file mode 100644
index 0000000..a87f470
--- /dev/null
+++ b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+import { color } from "../../../../style/varibles";
+
+const InputBlockStyled = styled.div`
+ width: 320px;
+ display: flex;
+ flex-direction: row;
+ background: ${color.complement.azulOscuro};
+ color: ${color.complement.azulCielo};
+ font-size: 11px;
+ margin: 8px 0;
+ padding: 12px;
+ border: none;
+ border-radius: 5px;
+ gap: 12px;
+`;
+
+export default InputBlockStyled;
\ No newline at end of file
diff --git a/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx
new file mode 100644
index 0000000..cb74ea7
--- /dev/null
+++ b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+import { ReactComponent as EmailIcon } from "../../../../assets/icons/email.svg";
+import { ReactComponent as KeyIcon } from "../../../../assets/icons/key.svg";
+import { ReactComponent as VisibilityIcon } from "../../../../assets/icons/visibility.svg";
+
+import InputBlockStyled from "./InputBlock.style";
+import InputComponentStyled from "./InputComponent.style";
+
+const InputComponent = ({ name, type, placeholder, icon, ...props }) => {
+ const [password, setPassword] = React.useState(true);
+
+ if (name === "email") {
+ return (
+ <InputBlockStyled>
+ <EmailIcon />
+ <InputComponentStyled type={type} name={name} placeholder={placeholder} {...props} />
+ </InputBlockStyled>
+ );
+ } else {
+ return (
+ <InputBlockStyled>
+ <KeyIcon />
+ <InputComponentStyled type={password ? "password" : "text"} name={name} {...props} />
+ <VisibilityIcon onClick={() => setPassword(!password)} />
+ </InputBlockStyled>
+ );
+ }
+};
+export default InputComponent;
+
diff --git a/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx
new file mode 100644
index 0000000..4e6c60d
--- /dev/null
+++ b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { color } from "../../../../style/varibles";
+
+const InputComponentStyled = styled.input`
+ width: 100%;
+ background: transparent;
+ border: none;
+ color: ${color.complement.azulCielo};
+`;
+
+export default InputComponentStyled;
+
diff --git a/frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx b/frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx
new file mode 100644
index 0000000..1d4f8c4
--- /dev/null
+++ b/frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const LoginBlockStyled = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+`;
+export default LoginBlockStyled;
+
diff --git a/frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx b/frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx
new file mode 100644
index 0000000..1a3d0b2
--- /dev/null
+++ b/frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+import AvatarLogin from "../AvatarCompany/AvatarLogin";
+import BtnSubmit from "./Btn/BtnSubmit";
+import InputComponent from "./Inputs/InputComponent";
+
+import LoginBlockStyled from "./LoginBlock.style";
+import LoginFormStyled from "./LoginForm.style";
+
+const LoginForm = ({ user,password, handlSubmit, handleChangeInput }) => {
+ return (
+ <LoginBlockStyled>
+ <AvatarLogin />
+ <LoginFormStyled noValidate onSubmit={handlSubmit}>
+ <InputComponent
+ type="text"
+ name="email"
+ placeholder="Digite o e-email de acesso"
+ icon="email"
+ value={user}
+ onChange={handleChangeInput}
+ requered
+ />
+ <InputComponent
+ type="password"
+ name="password"
+ placeholder="Digite o e-email de acesso"
+ icon="key"
+ value={password}
+ onChange={handleChangeInput}
+ requered
+ />
+ {/*! Esqueceu a senha é relevante? */}
+ <BtnSubmit type="submit" />
+ </LoginFormStyled>
+ </LoginBlockStyled>
+ );
+};
+
+export default LoginForm;
+
diff --git a/frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx b/frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx
new file mode 100644
index 0000000..980c06a
--- /dev/null
+++ b/frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+const LoginFormStyled = styled.form`
+ display: flex;
+ flex-direction: column;
+ margin-top: 16px;
+`;
+export default LoginFormStyled;
diff --git a/frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx b/frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx
new file mode 100644
index 0000000..950baad
--- /dev/null
+++ b/frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+import StyleVideo from "./VideoLogin.style";
+import bgvideo from "../../../assets/videos/video.mp4";
+
+const VideoLogin = () => {
+ return (
+ <StyleVideo autoPlay muted loop id="bglogin">
+ <source src={bgvideo} type="video/mp4" />
+ </StyleVideo>
+ );
+};
+
+export default VideoLogin;
+
diff --git a/frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx b/frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx
new file mode 100644
index 0000000..b3aac98
--- /dev/null
+++ b/frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const StyleVideo = styled.video`
+ width: 350px;
+ height: 100vh;
+ object-fit: cover;
+ filter: grayscale(1) brightness(.3);
+ margin-right: 60px;
+ @media screen and (max-width: 992px) {
+ display: none;
+ }
+`;
+
+
+
+export default StyleVideo;
+
diff --git a/frontend/src/index.js b/frontend/src/index.js
index b77db2b..4db0055 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -2,12 +2,14 @@ import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
+import GlobalStyled from "./style/GlobalStyle";
import App from "./App";
ReactDOM.render(
- <CssBaseline>
+ <>
+ <GlobalStyled />
<App />
- </CssBaseline>,
+ </>,
document.getElementById("root")
);
diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js
index 55aca92..af48738 100644
--- a/frontend/src/pages/Login/index.js
+++ b/frontend/src/pages/Login/index.js
@@ -1,8 +1,12 @@
import React from "react";
-
+import { AuthContext } from "../../context/Auth/AuthContext";
import { i18n } from "../../translate/i18n";
import ContainerLogin from "../../components/Base/ContainerLogin";
+import VideoLogin from "../../components/LoginComponents/VideoTag/VideoLogin";
+import { Input } from "@mui/material";
+import AvatarLogin from "../../components/LoginComponents/AvatarCompany/AvatarLogin";
+import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm";
//! Can i Delete this comment above?
// const Copyright = () => {
@@ -39,104 +43,24 @@ import ContainerLogin from "../../components/Base/ContainerLogin";
// }));
const Login = () => {
- // const classes = useStyles();
+ const [user, setUser] = React.useState({ email: "", password: "" });
+ const [showPassword, setShowPassword] = React.useState(false);
- // const [user, setUser] = useState({ email: "", password: "" });
- // const [showPassword, setShowPassword] = useState(false);
+ const { handleLogin } = React.useContext(AuthContext);
- // const { handleLogin } = useContext(AuthContext);
+ const handleChangeInput = (e) => {
+ setUser({ ...user, [e.target.name]: e.target.value });
+ };
- // const handleChangeInput = (e) => {
- // setUser({ ...user, [e.target.name]: e.target.value });
- // };
-
- // const handlSubmit = (e) => {
- // e.preventDefault();
- // handleLogin(user);
- // };
+ const handlSubmit = (e) => {
+ e.preventDefault();
+ handleLogin(user);
+ };
return (
- // <Container component="main" maxWidth="xs">
- // <CssBaseline />
- // <div className={classes.paper}>
-
- // <Avatar className={classes.avatar} style={{ backgroundColor: "#ec5114" }}>
- // <PersonOutlineOutlined/>
- // </Avatar>
-
- // <Typography component="h1" variant="h5">
- // {i18n.t("login.title")}
- // </Typography>
- // <form className={classes.form} noValidate onSubmit={handlSubmit}>
- // <TextField
- // variant="outlined"
- // margin="normal"
- // required
- // fullWidth
- // id="email"
- // label={i18n.t("login.form.email")}
- // name="email"
- // value={user.email}
- // onChange={handleChangeInput}
- // autoComplete="email"
- // autoFocus
- // />
- // <TextField
- // variant="outlined"
- // margin="normal"
- // required
- // fullWidth
- // name="password"
- // label={i18n.t("login.form.password")}
- // id="password"
- // value={user.password}
- // onChange={handleChangeInput}
- // autoComplete="current-password"
- // type={showPassword ? 'text' : 'password'}
- // InputProps={{
- // endAdornment: (
- // <InputAdornment position="end">
- // <IconButton
- // aria-label="toggle password visibility"
- // onClick={() => setShowPassword((e) => !e)}
- // >
- // {showPassword ? <VisibilityOff /> : <Visibility />}
- // </IconButton>
- // </InputAdornment>
- // )
- // }}
- // />
- // <Button
- // type="submit"
- // fullWidth
- // variant="contained"
- // color="primary"
- // className={classes.submit}
- // >
- // {i18n.t("login.buttons.submit")}
- // </Button>
- // <Grid container>
- // <Grid item>
-
- // <Link
- // href="#"
- // variant="body2"
- // component={RouterLink}
- // to="/signup"
- // >
- // {/* {i18n.t("login.buttons.register")} */}
- // </Link>
-
- // </Grid>
- // </Grid>
- // </form>
- // </div>
- // <Box mt={8}>{/* <Copyright /> */}</Box>
- // </Container>
<ContainerLogin>
- <h1>teste</h1>
- <h2>teste</h2>
- <p>Teste paragraph</p>
+ <VideoLogin />
+ <LoginForm handleChangeInput={handleChangeInput} handlSubmit={handlSubmit} user={user.email} password={user.password} />
</ContainerLogin>
);
};
diff --git a/frontend/src/style/GlobalStyle.jsx b/frontend/src/style/GlobalStyle.jsx
index cb268e9..305a4dd 100644
--- a/frontend/src/style/GlobalStyle.jsx
+++ b/frontend/src/style/GlobalStyle.jsx
@@ -9,6 +9,50 @@ import HelveticaHeavy from "../assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf";
import HelveticaBlack from "../assets/fonts/Helvetica_Neue_LT_Pro-Black.otf";
const GlobalStyled = createGlobalStyle`
+//RESET
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
//FONTS
@font-face {