Merge pull request #33 from headout/devfolio-iframe

Devfolio iframe
headout · Oct 4, 2022 · b72dc8b · b72dc8b
2 parents f79cf63 + 1988caa
commit b72dc8b
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 57 deletions.
diff --git a/index.html b/index.html
@@ -71,33 +71,14 @@ <h1 class="header-title">hackout ‘22</h1>
               </svg>
             </a>
           </button>
-          <button id="apply-button" class="dark" type="button">
-            <a
-              href="https://hackout2022.devfolio.co"
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              <svg
-                class="logo"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 115.46 123.46"
-                fill="#fff"
-              >
-                <path
-                  d="M115.46 68a55.43 55.43 0 0 1-50.85 55.11S28.12 124 16 123a12.6 
-                    12.6 0 0 1-10.09-7.5 15.85 15.85 0 0 0 5.36 1.5c4 .34 10.72.51 20.13.51 
-                    13.82 0 28.84-.38 29-.38h.26a60.14 60.14 0 0 0 54.72-52.47c.05 1.05.08 
-                    2.18.08 3.34z"
-                ></path>
-                <path
-                  d="M110.93 55.87A55.43 55.43 0 0 1 60.08 111s-36.48.92-48.58-.12C5 110.29.15 
-                    104.22 0 97.52l.2-83.84C.38 7 5.26.94 11.76.41c12.11-1 48.59.12 48.59.12a55.41 
-                    55.41 0 0 1 50.58 55.34z"
-                ></path>
-              </svg>
-              <span id="apply-button-title">Apply with Devfolio</span>
-            </a>
-          </button>
+          <div class="devfolio-apply-button-container">
+            <div
+              class="apply-button"
+              data-hackathon-slug="hackout2022"
+              data-button-theme="dark"
+              style="height: 56px; width: 218px"
+            ></div>
+          </div>
         </div>
       </div>
     </div>
@@ -199,6 +180,32 @@ <h2 id="speakers">Prizes</h2>
   </div>
 </section> -->
 
+<section class="faq container" id="faqs">
+  <div class="faq-container">
+    <div class="faq-right-container">
+      <div class="top-bar">
+        <img src="/assets/svg/dots.svg" alt="" />
+      </div>
+      <div class="right-container-content" id="faq-heading-container">
+        <h1 class="faq-heading">FAQs</h1>
+        <div class="faq">
+          {% for faq in faqs.2022 %}
+          <details>
+            <summary class="faq-title">
+              {{ faq.title }}
+              <span class="faq-chevron-icon"
+                ><img src="assets/svg/chevron.svg" alt="chevron"
+              /></span>
+            </summary>
+            <p class="faq-content">{{ faq.content }}</p>
+          </details>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
 <section class="schedule container" data-scroll-section>
   <div class="section-copy">
     <h2 id="schedule">Schedule</h2>
@@ -388,32 +395,6 @@ <h1 class="speaker-title">Sponsors</h1>
   <!-- </div> -->
 </section>
 
-<section class="faq container" id="faqs">
-  <div class="faq-container">
-    <div class="faq-right-container">
-      <div class="top-bar">
-        <img src="/assets/svg/dots.svg" alt="" />
-      </div>
-      <div class="right-container-content" id="faq-heading-container">
-        <h1 class="faq-heading">FAQs</h1>
-        <div class="faq">
-          {% for faq in faqs.2022 %}
-          <details>
-            <summary class="faq-title">
-              {{ faq.title }}
-              <span class="faq-chevron-icon"
-                ><img src="assets/svg/chevron.svg" alt="chevron"
-              /></span>
-            </summary>
-            <p class="faq-content">{{ faq.content }}</p>
-          </details>
-          {% endfor %}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
 <section class="contact container" id="contact">
   <div class="contact-container">
     <div class="contact-right-container">

diff --git a/styles/main.scss b/styles/main.scss
@@ -241,7 +241,8 @@ header.container {
   margin-top: 2.66rem;
   position: relative;
   width: 280px;
-  min-height: 56px;
+  min-height: 44px;
+  border-radius: 4px;
   > a {
     display: flex;
     align-items: center;
@@ -781,7 +782,17 @@ span {
   }
 }
 
-#apply-button > a {
-  display: flex;
-  align-items: center;
+.devfolio-button-iframe {
+  margin: 0;
+  padding: 0;
 }
+
+.apply-button {
+  width: fit-content;
+}
+
+.devfolio-apply-button-container{
+  margin-top: auto;
+  height: 44px;
+  width: 280px;
+}