Browse Source

adds link to type form

Drew Hornbein 3 years ago
parent
commit
7bec63ba49
4 changed files with 67 additions and 0 deletions
  1. 1 0
      _sass/communityrule.scss
  2. 54 0
      _sass/refresh.scss
  3. BIN
      assets/woman-on-phone.png
  4. 12 0
      index.html

+ 1 - 0
_sass/communityrule.scss

@@ -1,6 +1,7 @@
 /* BEGIN COMMUNITYRULE-SPECIFIC CSS */
 /* BEGIN COMMUNITYRULE-SPECIFIC CSS */
 
 
 @import "rulebox";
 @import "rulebox";
+@import "refresh";
 
 
 /* CLASSES */
 /* CLASSES */
 .button {
 .button {

+ 54 - 0
_sass/refresh.scss

@@ -0,0 +1,54 @@
+// Homepage callout box with friendly woman on phone
+
+.page-content {
+  overflow-x: hidden;
+}
+
+.callout-box {
+    background: url(/assets/woman-on-phone.png) no-repeat;
+    background-position: left bottom;
+    background-size: 40% auto;
+    padding: 4rem 0;
+    padding-left: 40%;
+    margin: 2rem 0;
+    text-align: left;
+    position: relative;
+    @media screen and (max-width: 500px) {
+        background:unset;
+        padding-left: 0;
+    }
+}
+
+.callout-box__yellow-bar {
+    position: absolute;
+    height: 85%;
+    width: 500vw;
+    margin-left: -250vw;
+    background-color: #FFC907;
+    left: 0;
+    bottom: 0;
+    mix-blend-mode: multiply;
+}
+
+.callout-box__text {
+    position: relative;
+}
+
+.callout-box__button {
+    margin: 3rem 0 0;
+    text-align: left;
+}
+
+.button.button--call-out {
+    background: white url(/assets/elements/icon_do.png) no-repeat calc(100% - 0.5rem) center;
+    background-size: auto calc(100% - 1rem);
+    border-radius: 4px;
+    color: black;
+    display: inline-block;
+    font-size: 32px;
+    font-weight: bold;
+    float: unset;
+    padding: 1rem 5rem 1rem 1rem;
+    text-transform: uppercase;
+    text-decoration: none;
+}

BIN
assets/woman-on-phone.png


+ 12 - 0
index.html

@@ -18,6 +18,18 @@ permalink: /
 
 
     Too often, we leave the most basic questions unstated and unanswered. CommunityRule makes it easier to clarify the basics so you can focus on other things.
     Too often, we leave the most basic questions unstated and unanswered. CommunityRule makes it easier to clarify the basics so you can focus on other things.
 
 
+
+    <div class="callout-box">
+        <div class="callout-box__yellow-bar"></div>
+        <div class="callout-box__text">
+            <h2 class="callout-text">Would you like help designing your community?</h2>
+            <p>Tell us a bit about your community and we'll reach out to schedule a governance design consultation (for free!).</p>
+        </div>
+        <div class="callout-box__button">
+            <a href="https://o082czm9j51.typeform.com/to/UplfMG3w" class="button button--white button--call-out" target="_blank">Get Started</a>
+        </div>
+    </div>
+
     <div class="callout-icon">
     <div class="callout-icon">
         <img src="{% link assets/tabler_icons/edit.svg %}" width="10%" />
         <img src="{% link assets/tabler_icons/edit.svg %}" width="10%" />
     </div>
     </div>