Announcement page (in progress)

_board_info/lorem-five.md

@@ -0,0 +1,9 @@
+---
+title: Lorem Five
+summary: 'Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Fermentum iaculis eu non diam phasellus vestibulum. Quisque id diam vel quam elementum pulvinar etiam non quam. Pharetra massa massa ultricies mi quis hendrerit dolor.'
+link: https://pytorch.org/resources/contributors
+image: /assets/images/board-info-images/image-1.png
+class: pytorch-resource
+order: 5
+featured-home: true
+---

_board_info/lorem-four.md

@@ -0,0 +1,9 @@
+---
+title: Lorem Four
+summary: 'Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Purus non enim praesent elementum. Platea dictumst vestibulum rhoncus est pellentesque'
+link: https://pytorch.org/resources/contributors
+image: /assets/images/board-info-images/image-2.png
+class: pytorch-resource
+order: 4
+featured-home: true
+---

_board_info/lorem-one.md

@@ -0,0 +1,9 @@
+---
+title: Lorem One
+summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'
+link: https://pytorch.org/resources/contributors
+image: /assets/images/board-info-images/image-1.png
+class: pytorch-resource
+order: 1
+featured-home: true
+---

_board_info/lorem-three.md

@@ -0,0 +1,9 @@
+---
+title: Lorem Three
+summary: 'Pellentesque massa placerat duis ultricies lacus sed. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Cras ornare arcu dui vivamus'
+link: https://pytorch.org/resources/contributors
+image: /assets/images/board-info-images/image-3.png
+class: pytorch-resource
+order: 3
+featured-home: true
+---

_board_info/lorem-two.md

@@ -0,0 +1,9 @@
+---
+title: Lorem Two
+summary: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.m'
+link: https://pytorch.org/resources/contributors
+image: /assets/images/board-info-images/image-2.png
+class: pytorch-resource
+order: 2
+featured-home: true
+---

_config.yml

@@ -103,6 +103,8 @@ collections:
     future: true
   case_studies:
     output: true
+  board_info:
+    output: true
 
 pagination:
   enabled: true

_includes/main_menu.html

@@ -97,6 +97,10 @@
             <span class=dropdown-title>About</span>
             <p>Learn about PyTorch’s features and capabilities</p>
           </a>
+          <a class="nav-dropdown-item" href="{{ site.baseurl }}/announcement">
+            <span class=dropdown-title>Announcements</span>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+          </a>
           <a class="nav-dropdown-item" href="{{ site.baseurl }}/#community-module">
             <span class=dropdown-title>Community</span>
             <p>Join the PyTorch developer community to contribute, learn, and get your questions answered.</p>

_includes/mobile_menu.html

@@ -104,6 +104,10 @@
           <li class="{% if current[1] == 'features' %}active{% endif %}">
             <a href="{{ site.baseurl }}/features">About</a>
           </li>
+
+          <li>
+            <a href="{{ site.baseurl }}/announcement">Announcements</a>
+          </li>
 
           <li>
             <a href="{{ site.baseurl }}/#community-module">Community</a>

_sass/announcement.scss

@@ -0,0 +1,117 @@
+.announcement {
+  .main-content {
+    padding-bottom: 0;
+  }
+  .navbar-nav .nav-link {
+    color: $black;
+  }
+
+  .nav-logo {
+    background-image: url($baseurl + "/assets/images/logo-dark.svg");
+  }
+
+  .main-background {
+    @include desktop {
+      height: 600px
+    }
+  }
+}
+
+.announcement {
+  .jumbotron {
+    position: relative;
+    height: 450px; 
+    top: $mobile_header_height;
+    align-items: flex-start; 
+    @include desktop{
+      top: $desktop_header_height;  
+      height: 550px;
+    }
+    .container {
+      .side-text {
+        h1 {
+          padding-top: rem(50px);
+          color: $white;
+        }
+        p.lead {
+          margin-bottom: rem(25px);
+          padding-top: rem(50px);
+          color: $white;
+          width: 100%;
+        }
+
+      }
+      .side-image {
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+      }
+    }
+  }
+}
+
+.announcement .main-content-wrapper {
+  margin-bottom: 0.75rem;
+  margin-top: 130px;
+}
+
+.announcement .card-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  .card {
+    border: none;
+    a {
+      color: $black;
+    }
+    .card-body {
+      padding: 0;
+
+      img {
+        width: 100%;
+        height: 207px;
+        object-fit: cover;
+        padding: 20px 0;
+      }
+    }
+  }
+
+}
+
+
+.announcement .dark-background-section {
+  background-color: $black;
+  .line-content {
+    padding: 100px 0;
+    h1 {
+      color: $white;
+    }
+  }
+}
+
+.announcement .contact-us-section {
+  background-color: $code_background_color;
+}
+
+.announcement .light-background-section {
+  background-color: $white;
+  .content {
+    padding: 80px 0;
+  }
+}
+
+.announcement .body-side-text {
+  .lead {
+    margin-bottom: rem(25px);
+    padding-top: rem(50px);
+  }
+}
+
+.announcement .body-side-image {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+}
+
+
+

announcement.html

@@ -2,20 +2,21 @@
 layout: default
 title: Announcement
 permalink: /announcement
-background-class: home-page-background
-body-class: homepage
+background-class: features-background
+body-class: announcement
 ---
+{% assign cards = site.board_info %}
 
-<div class="jumbotron jumbotron-fluid on-dark-background">
+<div class="jumbotron jumbotron-fluid">
   <div class="container">
     <div class="row">
-      <div class="col-md-6">
+      <div class="col-md-6 side-text">
         <h1>Lorem ipsum dolor sit amet</h1>
         <span></span>
-        <h2 class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt quam eu orci consequat, at sagittis purus vehicula. Proin enim augue, rhoncus sit amet sem non, vehicula congue nisl.</h2>
+        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt quam eu orci consequat, 
+          at sagittis purus vehicula. Proin enim augue, rhoncus sit amet sem non, vehicula congue nisl.</p>
       </div>
-      <div class="col-md-6">
-        <img src="{{ site.url }}/assets/images/clacheck.png" width="70%">
+      <div class="col-md-6 side-image" style="background-image: url('{{ site.url }}/assets/images/placeholder.png');">
       </div>
     </div>
   </div>
@@ -24,70 +25,89 @@ <h2 class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
 <div class="main-content-wrapper">
   <div class="main-content">
     <div class="container">
-      <div class="row resources">
+      <div class="card-container">
 
-        {% for resource in resources %}
-          {% assign card_title = resource.title | split: ' ' %}
-
-          {% if resource.show-pytorch-logo == true %}
-            {% assign resource_class = "pytorch-resource" %}
-          {% else %}
-            {% assign resource_class = resource.class %}
-          {% endif %}
-
-        <div class="col-md-4">
-          <div class="card resource-card {{ resource_class }}">
-            <!-- Cards with the pytorch-resource class also have a pytorch-discuss class.
-              These two classes along with the discuss class allow us to stylize the second word in the card header so that it features orange text.
-             -->
-            {% if resource.class == "pytorch-resource" %}
-            <a href="{{ resource.link }}" class="pytorch-discuss" target="_blank">
-              <div class="card-body">
-                <h4>{{ card_title[0] }}<span class="discuss">{{ card_title[1] }}</span></h4>
-            {% else %}
-            <a href="{{ resource.link }}" target="_blank">
-              <div class="card-body">
-                <h4>{{ resource.title }}</h4>
-            {% endif %}
-                <p class="card-summary">{{ resource.summary }}</p>
+        {% for card in cards %}
+          {% assign card_title = card.title | split: ' ' %}
+            <div class="card {{ card.title }}">
+              <a href="{{ card.link }}" target="_blank">
+                <div class="card-body">
+                  <h4>{{ card.title }}</h4>
+                  <img src="{{ card.image }}"/>
+                  <p class="card-summary">{{ card.summary }}</p>
                 </div>
               </a>
             </div>
-          </div>
         {% endfor %}
         </div>
       </div>
     </div>
   </div>
 </div>
 
-<div class="container-fluid">
+<div class="container-fluid dark-background-section">
   <div class="container">
-    <div class="row">
+    <div class="row line-content">
       <div class="col-md-4">
         <h1>LOREM IPSUM</h1>
       </div>
       <div class="col-md-8">
         <div class="row">
           <div class="col-md-4 text-center">
             <a class="btn btn-lg with-right-arrow">
-              Lorem ipsum dolor sit amet
+              Lorem ipsum dolor
             </a>
           </div>
 
           <div class="col-md-4 text-center">
             <a class="btn btn-lg with-right-arrow">
-              Lorem ipsum dolor sit amet
+              Lorem ipsum dolor 
             </a>
           </div>
 
           <div class="col-md-4 text-center">
             <a class="btn btn-lg with-right-arrow">
-              Lorem ipsum dolor sit amet
+              Lorem ipsum dolor
             </a>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>
+
+<div class="container-fluid light-background-section">
+  <div class="container">
+    <div class="row content">
+      <div class="col-md-6 body-side-text">
+        <h1>Lorem ipsum dolor sit amet</h1>
+        <span></span>
+        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt quam eu orci consequat, 
+          at sagittis purus vehicula. Proin enim augue, rhoncus sit amet sem non, vehicula congue nisl.</p>
+        <a class="btn btn-lg with-right-arrow">
+          Lern more
+        </a>
+      </div>
+      <div class="col-md-6 body-side-image" style="background-image: url('{{ site.url }}/assets/images/placeholder.png');">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container-fluid contact-us-section">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-8">
+        <h1>Lorem ipsum dolor sit amet</h1>
+        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
+        <script>
+        hbspt.forms.create({
+        region: "na1",
+        portalId: "8112310",
+        formId: "754c22e6-e81c-4fbf-a4b8-ec88ef75ace3"
+        });
+        </script>
+      </div>
+    </div>
+  </div>
+</div>

assets/main.scss

@@ -36,3 +36,4 @@ $baseurl:"{{ site.baseurl }}";
 @import "enterprise";
 @import "events";
 @import "community-stories";
+@import "announcement";

resources.html

@@ -53,6 +53,4 @@ <h4>{{ resource.title }}</h4>
       </div>
     </div>
   </div>
-</div>
-
-{% include quick_start_module.html %}
+</div>