add new headers and tools section to credit page

_data/internal/credits/tools/so-go-survey.yml

@@ -0,0 +1,20 @@
+---
+# The company, organization, or individual providing the tool
+tool-provider: SoGoSurvey
+# Please give the general site URL for the tool provider
+provider-link: https://www.sogosurvey.com/
+# Location in our GitHub repo of the tool's logo
+logo-url: /assets/images/credits/so-go-survey.png
+# Alt in accordance with WCAG requirements
+alt: ''
+# The type of tool, such as a survey
+tool-type: survey
+# The area it is used in - Research, Development, Design, Product Management, etc
+used-in: Research
+# A list of the project team(s) using the tool
+used-by:
+    # Name of a project team
+    project-name: Design System's Team
+    # Link to the project team's page
+    project-link: https://www.hackforla.org/projects/design-systems
+---

_sass/components/_credit-items.scss

@@ -42,11 +42,26 @@
   }
 }
 
+.credits-tool {
+  margin: 15px;
+  padding-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-evenly;
+
+  @media #{$bp-below-mobile} {
+    margin: 5px;
+  }
+}
+
 .page-card--credits {
   padding: 30px;
+  margin-top: 60px;
 
   @media #{$bp-below-mobile} {
     padding: 32px 16px;
+    margin-top: 12px;
   }
 }
 
@@ -55,7 +70,7 @@
 
   @media #{$bp-tablet-up} {
     display: grid;
-    grid-gap: 32px 54px;
+    grid-gap: 32px 100px;
     grid-template-columns: repeat(2, 1fr);
     order: 3;
     width: 100%;
@@ -72,7 +87,17 @@
   }
 }
 
-.icon-left {
+.credits-heading {
+  padding-left: 30px;
+  margin-bottom: 15px;
+  @media #{$bp-below-mobile} {
+   padding-left: 5px;
+   font-size: 20px;
+  }
+}
+
+.icon-left,
+.icon-center {
   width: 100px;
   padding-right: 20px;
   display: flex;
@@ -83,13 +108,19 @@
   }
 }
 
+.icon-center {
+  width: 200px;
+}
+
 .icon-info {
   width: 190px;
   p {
     margin: 0;
   }
 }
 
-.icon-left-image {
+.icon-left-image,
+.icon-center-image {
   width: 100%;
-}
+} 
+

pages/credits.html

@@ -10,8 +10,8 @@
 <div class="header-container flex-container">
   <div class="header-text">
     <h1 class="title1">Credits</h1>
-    <p>Thank you to all of the artists who have made our page look great.
-      Check out all of the iconography and imagery we have used on our site.
+    <p>Thank you to all of the artists and sponsors who help make our projects successful. 
+      Check out all of the iconography and imagery we have used on our site, and tools used for our projects. 
     </p>
   </div>
   <img class="header-hero-image" src="/assets/images/credits/credits-hero.svg">
@@ -20,9 +20,11 @@ <h1 class="title1">Credits</h1>
 <div class='content-section wide-div'>
 <a class='anchor' id='step-1'></a>
     <div class='page-card card-primary page-card-lg page-card--credits'>
+      <h2 class="title2 credits-heading ">Iconography & Imagery</h2>
       <div class="page-contain credits-inner">
           <ul class="credits-list unstyled-list">
             {%- for item in site.data.internal.credits -%}
+              {%- if item[1].image-url -%}
                   <li>
                     <!-- originally class="project-card-inner" -->
                   <div class="credits-item">
@@ -62,6 +64,54 @@ <h1 class="title1">Credits</h1>
                     </div>
                   </div>
                 </li>
+              {%- endif -%}
+            {%- endfor -%}
+          </ul>
+      </div>
+    </div>
+    <div class='page-card card-primary page-card-lg page-card--credits'>
+      <h2 class="title2 credits-heading">Tools</h2>
+      <div class="page-contain credits-inner">
+          <ul class="credits-list unstyled-list">
+            {%- for item in site.data.internal.credits.tools -%}
+              {%- if item[1].logo-url -%}
+                  <li>
+                    <!-- originally class="project-card-inner" -->
+                  <div class="credits-tool">
+                    <div class="icon-center">
+                      <img class="icon-center-image" src={{ item[1].logo-url | absolute_url }} alt="{{ item[1].alt }}"/>
+                    </div>
+                    <div class="icon-info">
+                      {%- if item[1].used-in -%}
+                        <p>
+                        <strong>Used in: </strong>
+                          {{ item[1].used-in }}
+                        </p>
+                      {%- endif -%}
+                      {%- if item[1].used-by -%}
+                      <p>
+                        <strong>By: </strong>
+                        {%- if item[1].used-by -%}
+                        <a href="{{item[1].used-by.project-link}}">{{ item[1].used-by.project-name}}</a>
+                        {%- else -%}
+                        {{ item[1].used-by }}
+                        {%- endif -%}
+                      </p>
+                    {%- endif -%}
+                      {%- if item[1].provider-link -%}
+                        <p>
+                          <strong>Provider: </strong>
+                          {%- if item[1].provider-link -%}
+                          <a href="{{item[1].provider-link}}">{{ item[1].tool-provider}}</a>
+                          {%- else -%}
+                          {{ item[1].provider }}
+                          {%- endif -%}
+                        </p>
+                      {%- endif -%}
+                    </div>
+                  </div>
+                </li>
+              {%- endif -%}
             {%- endfor -%}
           </ul>
       </div>