Merge pull request #263 from GSA/feature/ECASOGP-3814

Feature/ecasogp 3814

_includes/landing_top.html

@@ -19,6 +19,20 @@ <h2 class="usa-hero__heading">
                 </div>
             </div>
         </section>
+
+        <section class="carousel-screen usa-graphic-list padding-y-4 abstract-background11">
+            <div class="grid-container">
+                <div class="grid-gap-banner">
+                    <div class="usa-hero__callout card-style">
+                        <h2 class="usa-hero__heading">
+                            <span class="font-ui-lg text-normal text-primary-darker text-bold">Personally Identifiable information (PII) Video</span>
+                        </h2>
+                        <p class="text-gray-70 font-sans-md text-bold text">Learn what Personally Identifiable information (PII) is through understanding its definition and viewing examples that illustrate the many forms of PII.</p>
+                        <a class="usa-button usa-button--hover carousel-button" aria-label="Watch the video" href="{{ site.baseurl }}/what-is-pii/">Watch</a>
+                    </div>
+                </div>
+            </div>
+        </section>
 
         <section class="carousel-screen usa-graphic-list padding-y-4 abstract-background10">
             <div class="grid-container">

_pages/learn-about-federal-privacy-council/what-is-pii.html

@@ -0,0 +1,18 @@
+---
+layout: page
+permalink: /what-is-pii/
+hero-text: Council Members
+header-image: /assets/img/fpc-conference.jpg
+description: "Learn what Personally Identifiable information (PII) is through understanding its definition and viewing examples that illustrate the many forms of PII."
+ogimage: assets/img/roles-in-federal-privacy.jpeg
+x-image: assets/img/roles-in-federal-privacy.png
+title: What is Personally Identifiable Information (PII)?
+---
+<div class="usa-embed-container">
+
+    <!-- <iframe title = "Roles in Federal Privacy" src="https://player.vimeo.com/video/463004806?byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> -->
+    <iframe src="https://player.vimeo.com/video/1013226067?h=d933bfdd9a&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="What is Personally Identifiable Information (PII)?"></iframe>
+
+</div>
+
+<p>Learn what Personally Identifiable information (PII) is through understanding its definition and viewing examples that illustrate the many forms of PII.</p>

_pages/learn-about-federal-privacy.html

@@ -5,8 +5,14 @@
 sub-title: Learn about Federal Privacy
 description: Learn about Federal Privacy
 excerpt: Executive Branch agencies necessarily collect, maintain, use, disclose, and dispose of large amounts of personally identifiable information (PII) to carry out missions mandated by Federal statute. By watching these short videos, learn more about how the Executive Branch of the Federal Government protects your privacy.
-number_of_icons: 4
+number_of_icons: 5
 priority_icons:
+ - name: What is Personally Identifiable Information (PII)?
+   logo: /assets/img/pii-photo.png
+   alt-text: Text reading 'Privacy Considerations' above illustration of people working around a desk and the word 'PII' next two them with two information icons
+   url: /what-is-pii/
+   filler: Learn what Personally Identifiable information (PII) is through understanding its definition and viewing examples that illustrate the many forms of PII.
+   time: 6 minutes 5 seconds
  - name: Roles in Federal Privacy
    logo: /assets/img/logos/Video_1.png
    alt-text: Text reading 'Privacy Considerations' above illustration of people working around a desk and the word 'PII' next two them with two information icons

assets/css/main-page.scss

@@ -521,6 +521,13 @@ abbr{
   }
 }
 
+.abstract-background11 {
+  background-color: #172636;
+  background-image: url(../img/pii-photo.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+}
+
 .abstract-background4 {
   background-color: #172636;
   background-image: url(../img/desk-contract-signing-hero.png);