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;
}
}
}