Cloud credits donation info page and form page (pytorch#1726)

* Adding in the cloud credits page

Signed-off-by: Chris Abraham <[email protected]>

* polish the credits page

Signed-off-by: Chris Abraham <[email protected]>

* Added sponsor form

Signed-off-by: Chris Abraham <[email protected]>

* Added an image for the credits page

Signed-off-by: Chris Abraham <[email protected]>

* Add menu item

Signed-off-by: Chris Abraham <[email protected]>

* Tweak

Signed-off-by: Chris Abraham <[email protected]>

---------

Signed-off-by: Chris Abraham <[email protected]>

Author: cjyabraham

_includes/main_menu.html

@@ -139,6 +139,9 @@
           <a class="nav-dropdown-item" href="{{ site.baseurl }}/governing-board">
             <span class=dropdown-title>Governing Board</span>
           </a>
+          <a class="nav-dropdown-item" href="{{ site.baseurl }}/credits">
+            <span class=dropdown-title>Cloud Credit Program</span>
+          </a>
           <a class="nav-dropdown-item" href="{{ site.baseurl }}/tac">
             <span class=dropdown-title>Technical Advisory Council</span>
           </a>

_includes/mobile_menu.html

@@ -117,6 +117,9 @@
             <a href="{{ site.baseurl }}/governing-board">Governing Board</a>
           </li>
           <li>
+            <a href="{{ site.baseurl }}/credits">Cloud Credit Program</a>
+          </li>
+          <li>          
             <a href="{{ site.baseurl }}/tac">Technical Advisory Council</a>
           </li>
           <li>

_sass/announcement.scss

@@ -167,6 +167,18 @@
     .content {
       padding: 40px 0;
     }
+
+    ul li {
+      font-size: 1.25rem;
+      font-weight: 300;
+    }
+  }
+
+  .darker-background-section {
+    background-color: #f3f4f7;
+    .content {
+      padding: 40px 0;
+    }
   }
 
   .grey-background-section {
@@ -309,3 +321,86 @@
     color: $orange;
   }
 }
+
+
+.announcement .cloud-credits-table {
+  font-size: 1.1rem;
+  margin-top: 40px;
+  ul {
+    padding-left: 20px; 
+    li {
+      margin-top: 10px;
+      font-size: 1.1rem;
+    }
+  }
+
+  .col-md {
+    border-radius: 5px;
+    margin-bottom: 40px;
+  }
+
+  .card {
+    border-radius: 6px;    
+  }
+
+  .thead {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    color: #fff;
+    padding: 14px 20px;
+    text-align: center;
+  }
+  .col-md:first-child .thead {
+    background: conic-gradient(from 53deg at 37% 100%, #828282 0, hsla(0, 0%, 51%, .95) 100%);
+  }
+  .col-md:nth-child(2) .thead {
+    background: conic-gradient(from 53deg at 37% 100%, #ab9344 0, rgba(171, 147, 68, .95) 100%);
+  }
+  .col-md:nth-child(3) .thead {
+    background: conic-gradient(from 53deg at 37% 100%, #293850 0, rgba(41, 56, 80, .95) 100%);
+  }
+
+  .tbody {
+    border-bottom: 1px solid #d0d0d0;
+    border-left: 1px solid #d0d0d0;
+    border-right: 1px solid #d0d0d0;
+    height: 100%;
+    padding: 26px 20px;
+  }
+
+  .tfoot {
+    background-color: #000;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+  }
+}
+
+.announcement .steps-columns {
+  background-color: transparent;
+
+  .col-md {
+    margin-bottom: 20px;
+    padding: 20px;
+  }
+
+  h3 {
+    margin-bottom: 20px;
+  }
+
+  .step {
+    font-size: 1.5rem;
+    margin-bottom: 5px;
+    margin-top: 20px;
+  }
+
+  ul {
+    padding-left: 20px; 
+    li {
+      margin-top: 10px;
+    }
+  }
+
+}

assets/images/cloud-credits-people.jpg

@@ -0,0 +1,36 @@
+---
+layout: default
+title: Sponsor Cloud Credits
+body-class: announcement
+background-class: announcement-background
+permalink: /credits/sponsor
+---
+{% assign cards = site.board_info %}
+
+<div class="container">
+  <div class="row hero-content">
+    <div class="col-md-10">
+      <h1>PyTorch Cloud<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Credit Program</h1>
+    </div>
+  </div>
+</div>
+
+<div class="container-fluid light-background-section">
+  <div class="container">
+    <div class="row content">
+      <div class="col-md-10 body-side-text">
+        <p class="lead">Sponsor <a href="/credits">cloud credits</a> and support CNCF projects. Please fill in the form and we will be in touch.
+        </p>
+        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
+        <script>
+          hbspt.forms.create({
+            region: "na1",
+            portalId: "8112310",
+            formId: "9a02fff8-0db9-4bad-bd25-bf69a7e9b5f1",
+            sfdcCampaignId: "7012M000001FfZSQA0"
+          });
+        </script>
+      </div>
+    </div>
+  </div>
+</div>