Merge branch 'feature/FD-70-1' into feature/FD-72

fielddaylab · Sep 11, 2024 · fc497e0 · fc497e0
2 parents 10410f9 + f5c6001
commit fc497e0
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 0 deletions.
diff --git a/assets/css/styles_ver3.css b/assets/css/styles_ver3.css
@@ -17214,6 +17214,29 @@ tbody tr {
   width: max(34px, 5.1%);
   animation: reel 4s linear infinite;
 }
+.home-page #complextopics .container {
+  margin-top: auto;
+}
+.home-page .workshop-container {
+  position: relative;
+  width: 100%;
+}
+.home-page .workshop {
+  position: relative;
+  width: 100%;
+  height: 60vw;
+  min-height: 400px;
+  max-height: 643px;
+  background-image: url(../img/home/border-bottom.png), url(../img/home/Workshop_Background.png);
+  background-size: 25px, cover;
+  background-repeat: repeat-x, no-repeat;
+  background-position: bottom, top;
+  text-align: center;
+  padding-top: 5em;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
 @media (min-width: 576px) {
   .home-page .lead .section-img {
     margin-top: -8em;
@@ -17313,6 +17336,12 @@ tbody tr {
     background-size: 9px, 9px;
     border-bottom: none;
   }
+  .home-page .workshop {
+    background-image: url(../img/home/border-left.png), url(../img/home/border-right.png), url(../img/home/Workshop_Background.png);
+    background-size: 9px, 9px, cover;
+    background-repeat: repeat-y, repeat-y, no-repeat;
+    background-position: left, right, top;
+  }
   .home-page .modeling-monitor {
     top: 205px;
   }

diff --git a/assets/img/home/Workshop_Background.png b/assets/img/home/Workshop_Background.png
diff --git a/assets/scss/_home.scss b/assets/scss/_home.scss
@@ -177,6 +177,29 @@
             animation: reel 4s linear infinite;
         }
     }
+    #complextopics .container {
+        margin-top: auto;
+    }
+    .workshop-container {
+        position: relative;
+        width: 100%;
+    }
+    .workshop {
+        position: relative;
+        width: 100%;
+        height: 60vw;
+        min-height: 400px;
+        max-height: 643px;
+        background-image: url(../img/home/border-bottom.png), url(../img/home/Workshop_Background.png);
+        background-size: 25px, cover;
+        background-repeat: repeat-x, no-repeat;
+        background-position: bottom,top;
+        text-align: center;
+        padding-top: 5em;
+        display: flex;
+        justify-content: center;
+        overflow: hidden;
+    }
 
     @media (min-width: 576px) {
         .lead .section-img {
@@ -277,6 +300,12 @@
             background-size: 9px, 9px;
             border-bottom: none;
         }
+        .workshop {
+            background-image: url(../img/home/border-left.png), url(../img/home/border-right.png), url(../img/home/Workshop_Background.png);
+            background-size: 9px, 9px, cover;
+            background-repeat: repeat-y, repeat-y, no-repeat;
+            background-position: left, right, top;
+        }
         .modeling-monitor {
             top: 205px;
             video {

diff --git a/redesign.php b/redesign.php
@@ -112,6 +112,19 @@
         </div>
     </section>
     <div class="bottom-frame"></div>
+    <section id="complextopics" class="lead d-flex flex-col flex-xxl-reverse">
+        <div class="workshop-container">
+            <div class="workshop">
+            </div>
+        </div>
+        <div class="container hero-text">
+            <h4>Games explore complex topics.</h4>
+            <p>It's hard to communicate super complex topics in a short time frame. Games turn complicated topics into fun,
+                hands-on experiences that actually reach people. Our games get millions of plays.
+            </p>
+        </div>
+    </section>
+    <div class="bottom-frame"></div>
     <section id="modelingroom" class="lead d-flex flex-col flex-xxl-reverse">
         <div class="modeling-container">
             <div class="modeling-monitor">