diff options
| author |  Joe Banks <[email protected]> | 2020-09-28 02:23:04 +0100 |
|---|---|---|
| committer | Joe Banks <[email protected]> | 2020-09-28 02:23:04 +0100 |
| commit | 01d7fdef889350a25767d5b1999f8698de7ba5a6 (patch) | |
| tree | b2b7ef8d957a6cf00b0192c10e89f5f8e2a7682e /src/components/HeaderBar | |
| parent | Initialize project using Create React App (diff) | |
Initial commit
Diffstat (limited to 'src/components/HeaderBar')
| -rw-r--r-- | src/components/HeaderBar/header_1.svg | 3 | ||||
| -rw-r--r-- | src/components/HeaderBar/header_2.svg | 3 | ||||
| -rw-r--r-- | src/components/HeaderBar/index.tsx | 49 |
3 files changed, 55 insertions, 0 deletions
diff --git a/src/components/HeaderBar/header_1.svg b/src/components/HeaderBar/header_1.svg new file mode 100644 index 0000000..e7db64c --- /dev/null +++ b/src/components/HeaderBar/header_1.svg @@ -0,0 +1,3 @@ +<svg width="1440" height="264" viewBox="0 0 1440 264" fill="none" id="header_1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M-5.85724 -6.18774V109.725C71.6463 154.832 238.796 275.611 529.296 262.865C819.777 250.113 820.413 92.4954 1447.77 223.42V-6.18451L-5.85724 -6.18774Z" fill="#AFB8F0"/> +</svg> diff --git a/src/components/HeaderBar/header_2.svg b/src/components/HeaderBar/header_2.svg new file mode 100644 index 0000000..692cc7c --- /dev/null +++ b/src/components/HeaderBar/header_2.svg @@ -0,0 +1,3 @@ +<svg width="1440" height="293" viewBox="0 0 1440 293" fill="none" id="header_2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> +<path opacity="0.49063" d="M1447.27 -6.18774V132.565C1428.83 231.124 1378.94 292.543 1114.48 292.543C775.159 292.543 477.003 5.74973 -6.39087 232.513V-6.18713L1447.27 -6.18774Z" fill="#687AE3"/> +</svg> diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx new file mode 100644 index 0000000..200221c --- /dev/null +++ b/src/components/HeaderBar/index.tsx @@ -0,0 +1,49 @@ +/** @jsx jsx */ +import { css, jsx } from "@emotion/core"; +import SVG from "react-inlinesvg"; + +import header1 from "./header_1.svg"; +import header2 from "./header_2.svg"; + +const headerImageStyles = css` +z-index: -1; +top: 0; +position: absolute; +width: 100%; +transition: height 1s; + +@media (max-width: 660px) { + height: 140px; +} +`; + +function HeaderBar() { + return <div> + <div> + <SVG src={header1} css={headerImageStyles}/> + <SVG src={header2} css={headerImageStyles}/> + </div> + <h1 css={css` + font-size: 4em; + margin: 0; + margin-top: 10px; + margin-left: 30px; + margin-bottom: 200px; + transition-property: font-size, margin-bottom; + transition-duration: 1s; + + @media (max-width: 660px) { + margin-bottom: 100px; + font-size: 3em; + } + + @media (max-width: 510px) { + font-size: 2em; + } + `}> + Python Discord Forms + </h1> + </div> +} + +export default HeaderBar; |
