diff --git a/src/components/new-landing-page/leaders.tsx b/src/components/new-landing-page/leaders.tsx index d90db96..d4f77d4 100644 --- a/src/components/new-landing-page/leaders.tsx +++ b/src/components/new-landing-page/leaders.tsx @@ -1,5 +1,5 @@ import React, { forwardRef } from 'react' - +import PinkDot from './pink-dot' const Leaders = forwardRef( (_, ref): JSX.Element => { @@ -8,6 +8,7 @@ const Leaders = forwardRef(

Our leaders join your cause directly, working alongside you to meet your online & offline goals.

+ ) } diff --git a/src/components/new-landing-page/pink-dot.tsx b/src/components/new-landing-page/pink-dot.tsx new file mode 100644 index 0000000..0b617ae --- /dev/null +++ b/src/components/new-landing-page/pink-dot.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default function PinkDot(): JSX.Element { + return( +
+

More Human Internet partners with international causes to deepen their impact and outreach

+
+ ) +} diff --git a/src/styles/pages/new-landing-page.scss b/src/styles/pages/new-landing-page.scss index 2d681c0..82ad221 100644 --- a/src/styles/pages/new-landing-page.scss +++ b/src/styles/pages/new-landing-page.scss @@ -25,13 +25,15 @@ .leaders { background-color: $human-blue; + position: relative; width: 100%; padding: 4rem 0; - + margin-bottom: 37.5vh; + display: grid; // grid-template-columns: minmax(25px, 1fr) 800px minmax(25px, 1fr); place-items: center; - + > .leaders__wrapper { margin: 0 25px; min-width: 50%; @@ -43,24 +45,28 @@ text-align: center; } - // Making the iframe responsive - > .video { - position: relative; - overflow: hidden; - width: 100%; - padding-top: 56.25%; /* 16:9 Aspect Ratio */ - - > iframe { - margin: 0 auto; - - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - width: 100%; - height: 100%; - } + } + .pink_dot__wrapper { + position: absolute; + display: flex; + align-items: center; + width: 50vh; + height: 50vh; + border-radius: 50%; + padding: 5vh; + right: 15vw; + background-color: $human-pink; + text-align: center; + top: 75%; + + .pink_dot__text { + color: white; + } + } + @media (max-width: 710px) { + .pink_dot__wrapper { + right: auto; + left: auto; } } }