From a4754fe8c4c12613ac7d63c9634298ec9b4d66c3 Mon Sep 17 00:00:00 2001 From: Kamil Dzieniszewski Date: Wed, 24 Apr 2019 18:34:05 +0200 Subject: [PATCH] feat(Footer): add Footer and mailto --- src/assets/email.svg | 14 ++++++++++++++ src/sections/Footer.jsx | 37 ++++++++++++++++++++++++++----------- 2 files changed, 40 insertions(+), 11 deletions(-) create mode 100644 src/assets/email.svg diff --git a/src/assets/email.svg b/src/assets/email.svg new file mode 100644 index 0000000..4bb9715 --- /dev/null +++ b/src/assets/email.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/sections/Footer.jsx b/src/sections/Footer.jsx index ee224bc..ed06ed8 100644 --- a/src/sections/Footer.jsx +++ b/src/sections/Footer.jsx @@ -1,11 +1,12 @@ import React from "react"; import styled from "styled-components"; import { media, space } from "../styles/helpers"; +import email from "../assets/email.svg" const FooterSection = styled.footer` background: ${({ theme }) => theme.secondaryGradient}; color: ${({ theme }) => theme.colors.white}; - padding: ${space(8)} ${space(2)} ${space(4)}; + padding: ${space(8)} ${space(2)} ${space(8)}; position: relative; `; @@ -14,27 +15,41 @@ const FooterContainer = styled.div` margin: auto; flex-direction: column; justify-content: space-evenly; - ${media.greaterThan('tablet')` - flex-direction: row; - `} + align-items: center `; const Header = styled.div` font-weight: bold; font-size: 59px; line-height: 71px; + ${media.lessThan('tablet')` + font-size: 30px; + line-height: 36px; + text-align: center + `} ` +const Image = styled.img` + padding: 0 20px 0 0; + ${media.lessThan('tablet')` + padding: 0 10px 0 0; + `} +`; + +const EmailContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px +`; + export default () => ( -
-
Ask a question
-
-
-
Contact
-
- {/* */} +
Contact
+ + kontakt@applantic.pl + );