diff --git a/src/components/Hero/Landing.tsx b/src/components/Hero/Landing.tsx index b7135d568f..40392b079a 100644 --- a/src/components/Hero/Landing.tsx +++ b/src/components/Hero/Landing.tsx @@ -1,6 +1,10 @@ import React from 'react'; -import BuildingsImg from 'static/img/background/buildings.svg'; +// import BuildingsImg from 'static/img/background/buildings.svg'; import WaterloopImg from 'static/img/background/waterloop.svg'; +import pod from 'static/img/background/pod.svg'; +import torontosky from 'static/img/background/Toronto_Skyline.svg'; +import montrealsky from 'static/img/background/Waterloop_Montreal_Skyline.svg'; +import yellowbanner from 'static/img/background/yellow banner.svg'; import '../../theme/styles.scss'; import { Link } from 'react-scroll'; @@ -42,13 +46,44 @@ class Landing extends React.Component { -
+{/*
buildings +
*/} + {/*
*/} + pods + {/*
*/} +
+ yellowbannerimg +
+ +
+ torontoskyline +
+ +
+ montrealskyline
+ {/*
/ */} ); } diff --git a/src/static/img/background/Toronto_Skyline.svg b/src/static/img/background/Toronto_Skyline.svg new file mode 100644 index 0000000000..3664786289 --- /dev/null +++ b/src/static/img/background/Toronto_Skyline.svg @@ -0,0 +1,260 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/img/background/Waterloop_Montreal_Skyline.svg b/src/static/img/background/Waterloop_Montreal_Skyline.svg new file mode 100644 index 0000000000..ebb600f761 --- /dev/null +++ b/src/static/img/background/Waterloop_Montreal_Skyline.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/img/background/pod.svg b/src/static/img/background/pod.svg new file mode 100644 index 0000000000..f2e652936e --- /dev/null +++ b/src/static/img/background/pod.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/static/img/background/yellow banner.svg b/src/static/img/background/yellow banner.svg new file mode 100644 index 0000000000..9df483961c --- /dev/null +++ b/src/static/img/background/yellow banner.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/theme/styles.scss b/src/theme/styles.scss index ee153afa13..e920ecaf77 100644 --- a/src/theme/styles.scss +++ b/src/theme/styles.scss @@ -701,6 +701,61 @@ textarea { } } + +.yellowbanner { + /* type img */ + width: 80%; + height: auto; + position: absolute; + bottom: 0px; + // padding-top: 3em; + padding-bottom: 9%; + padding-left: 4%; + z-index: 0; +} + + +.pod { + position: absolute; + left: 50%; + width: 25%; + z-index: 9999; + bottom: 0px; + padding-bottom: 9%; + + transform: translate(-50%, 0); + animation: move 2s ease-in-out; + // align-self: center; +} +@keyframes move { + 0% {left: 0%;} + 50% {left: 80%;} + 100% {left: 50%} +} + + +.torontosky { + /* type img */ + width: 46%; + // height: auto; + position: absolute; + z-index: 9999; + bottom: 0px; + left: 0px; + padding-top: 3em; +} + +.montrealsky { + /* type img */ + width: 49%; + // height: auto; + position: absolute; + z-index: 9999; + bottom: 0px; + right: 0px; + padding-top: 3em; +} + .landingArrowContainer { position: absolute; bottom: 75px;