Edge 메뉴 콘텐츠 추가 (#54)

PyTorchKorea · Jun 15, 2024 · ab570f3 · ab570f3
1 parent ae8dc50
commit ab570f3
Show file tree

Hide file tree

Showing 30 changed files with 1,127 additions and 2 deletions.
diff --git a/_includes/footer_scripts.html b/_includes/footer_scripts.html
@@ -17,7 +17,7 @@
 
   scrollToAnchor.bind();
 
-  var hasStaticHeader = $(".blog-header, .blog-detail-header, .resources-header, .get-started-header, .features-header, .ecosystem-header, .hub-header, .mobile-header, .coc-header").length > 0;
+  var hasStaticHeader = $(".blog-header, .blog-detail-header, .resources-header, .get-started-header, .features-header, .ecosystem-header, .hub-header, .mobile-header, .coc-header, .announcement-header").length > 0;
 
   if (!hasStaticHeader) {
     $(window).on("scroll", function() {

diff --git a/_sass/announcement.scss b/_sass/announcement.scss
@@ -0,0 +1,310 @@
+.announcement {
+  .hero-content {
+    top: $mobile_header_height + 80px;
+    height: 250px;
+    position: relative;
+    margin-bottom: 120px;
+    justify-content: center;
+
+    @include desktop {
+      top: $mobile_header_height + 110px;
+      height: 350px;
+    }
+
+    h1 {
+      font-size: rem(60px);
+      text-transform: uppercase;
+      font-weight: lighter;
+      letter-spacing: 1.08px;
+      margin-bottom: rem(10px);
+      line-height: 1.05;
+      color: $white;
+
+      @include desktop {
+        font-size: rem(72px);
+      }
+
+    }
+
+    h1.small {
+      font-size: 40px;
+      @include desktop {
+        font-size: 58px;
+      }
+    }
+
+    .lead {
+      margin-bottom: rem(25px);
+      padding-top: rem(30px);
+      color: $white;
+      width: 100%;
+    }
+  }
+
+  .row {
+    justify-content: center;
+  }
+
+  .main-content {
+    margin-bottom: 5rem;
+    padding-bottom: 0;
+  }
+
+  .main-background {
+    height: 370px;
+    @include desktop {
+      height: 450px;
+    }
+
+  }
+
+  .card-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    padding-top: 3rem;
+      .card {
+        border: none;
+        display: block;
+        a {
+          color: $black;
+        }
+        .card-body {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          justify-content: space-between;
+          padding: 0;
+
+          img {
+            width: 100%;
+            height: 207px;
+            object-fit: contain;
+            padding: 20px;
+            @media screen and (min-width: 1000px) {
+              padding: 30px;
+            }
+          }
+        }
+      }
+    @media screen and (min-width: 1000px) {
+      grid-template-columns: repeat(3, 1fr);
+      gap: 36px;
+    }
+  }
+
+ .contact-us-section {
+    background-color: $code_background_color;
+    padding: 50px 0;
+    .row {
+      justify-content: center;
+      .lead {
+        padding-top: rem(24px);
+      }
+      .hbspt-form {
+        padding: 30px 0;
+
+        .hs-button {
+          background-image: url($baseurl + "/assets/images/chevron-right-orange.svg");
+          background-size: 6px 13px;
+          background-position: top 16px right 11px;
+          background-repeat: no-repeat;
+          border-radius: 0;
+          border: none;
+          background-color: $white;
+          color: $quick_start_grey;
+          font-weight: 400;
+          position: relative;
+          letter-spacing: 0.25px;
+          padding: rem(12px) rem(32px) rem(12px) rem(12px);
+          margin: 10px 0;
+
+          @include animated_border_hover_state;
+
+          @include desktop {
+            background-position: top 19px right 11px;
+          }
+
+        }
+
+        fieldset.form-columns-2, fieldset.form-columns-1 {
+          max-width: 100%;
+          .hs-form-field {
+            max-width: 100%;
+            padding: 10px 0;
+            width: 100%;
+            input {
+              border: none;
+              width: 100%;
+            }
+            textarea {
+              border: none;
+              width: 100%;
+            }
+          }
+        }
+
+        li.hs-form-radio {
+          input[type=radio] {
+            width: auto !important;
+          }
+
+          span {
+            margin-left: 5px;
+          }
+        }
+
+        ul {
+          list-style-type: none;
+        }
+      }
+    }
+  }
+
+  .light-background-section {
+    background-color: $white;
+    .content {
+      padding: 40px 0;
+    }
+  }
+
+  .grey-background-section {
+    background-color: #f3f4f7;
+    padding: 60px 0;
+    img {
+      height: 100px;
+    }
+    p {
+      font-size: 14px;
+      line-height: 170%;
+    }
+  }
+
+  .color-background-section {
+    background-image: url("/assets/images/pytorch_bg_purple.jpg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    padding: 60px 0;
+    h2 {
+      color: white;
+    }
+  }
+
+ .body-side-text {
+    .lead {
+      margin-bottom: rem(25px);
+      padding-top: rem(24px);
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+
+  h2.upper {
+    font-size: 25px;
+    line-height: 130%;
+    text-align: center;
+    letter-spacing: 1.75px;
+    text-transform: uppercase;
+    margin-bottom: 30px;
+  }
+
+  h3.upper {
+    font-size: 19px;
+    text-transform: uppercase;
+    letter-spacing: 1.75px;
+    line-height: 130%;
+    margin: 25px 0;
+  }
+
+  table.benefits {
+    background-color: white;
+    font-size: 14px;
+    text-align: center;
+    td.benefit {
+      border-left: none;
+      min-width: 300px;
+      text-align: left;
+      @include desktop {
+        min-width: 520px;
+      }
+    }
+    tbody {
+      td {
+        border-left: 1px solid #812CE5;
+        vertical-align: middle;
+      }
+      td.benefit {
+        font-weight: 600;
+      }
+    }
+    thead, tfoot {
+      background-color: #812CE5;
+      color: white;
+      font-size: 16px;
+      font-weight: 700;
+      @include desktop {
+        font-size: 20px;
+      }
+      td {
+        border-left: 1px solid #000;
+        vertical-align: middle;
+        border-top: none;
+      }
+      a {
+        text-decoration: underline;
+        color: white;
+      }
+      td.price {
+        font-size: 14px;
+        line-height: 1.2;
+        @include desktop {
+          font-size: 16px;
+        }
+      }
+    }
+    img {
+      width: 15px;
+    }
+  }
+  .modal-header {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  .consolidated-employees {
+    tbody td {
+      font-weight: 600;
+    }
+    td.no-border {
+      border-left: none;
+    }
+}
+
+  .member-boxes {
+    gap: 20px;
+    margin: 0;
+    div.col-sm {
+      background-color: white;
+    }
+  }
+}
+
+.board-member {
+  margin: 35px 0;
+  img {
+    margin-bottom: 15px;
+  }
+  a svg {
+    margin-top: 5px;
+    height: 25px;
+    max-width: 30px;
+    fill: #000;
+    color: #000;
+  }
+  a:hover svg {
+    fill: $orange;
+    color: $orange;
+  }
+}
diff --git a/_sass/base_styles.scss b/_sass/base_styles.scss
@@ -183,9 +183,14 @@ a, .btn {
   &.mobile-background {
     background-image: url($baseurl + "/assets/images/get-started-background.jpg");
   }
+
   &.deep-learning-background {
     background-image: url($baseurl + "/assets/images/deep-learning-thank-you-background.jpg");
   }
+
+  &.announcement-background {
+    background-image: url($baseurl + "/assets/images/pytorch_bg_purple.jpg");
+  }
 }
 
 .bg-light-grey {