Added Event Section

css/general.css

@@ -7,6 +7,7 @@ html {
     scroll-behavior: smooth;
 }
 
+/* Nav */
 * {
     margin: 0;
     padding: 0;
@@ -30,6 +31,7 @@ nav * {
     list-style: none;
     box-sizing: border-box;
     z-index: 100;
+    text-decoration: none;
 }
 
 #nav-logo {
@@ -54,7 +56,6 @@ nav li {
 }
 
 nav li a {
-    /*color:rgb(136, 180, 231);*/
     color:rgb(233, 203, 104);
     font-size: 18px;
     text-decoration: none;
@@ -112,8 +113,8 @@ nav li a:focus::after{
 }
 
 #sign-up {
-    padding: 3px 7px;
+    padding: 6px 7px;
-    margin: 14px 7px 14px 5px;
+    margin: 14px 15px 14px 4px;
 
     border-radius: 5px;
     font-size: 16px;
@@ -127,11 +128,12 @@ nav li a:focus::after{
     background-color: blueviolet;
     transition: 0.5s;
     cursor: pointer;
-    padding: 4px 8px;
+    padding: 6px 8px;
-    margin: 13px 7px 13px 0;
+    margin: 13px 15px 13px 0;
     font-size: 17px;
 }
 
+/* Responsive Functions */
 @media (max-width: 800px) {
     .checkbtn {
         display: inline-block;
@@ -206,6 +208,7 @@ nav li a:focus::after{
     }
   }
 
+/* Header */
 #header-background {
     background-image: none;
     background-position: center;
@@ -258,6 +261,7 @@ nav li a:focus::after{
     }
 }
 
+/* Main Section */
 main {
     width: 100%;
     padding: 10px 0 10px 0;
@@ -278,7 +282,120 @@ section {
     max-width: 1500px;
 }
 
-.line {
+.topic {
-    width: 200px;
+    width: auto;
-    margin-bottom: 5px;
+    font-size: 35px;
+    padding: 0 20px 0 20px;
+    color:rgb(255, 243, 205);
+}
+
+#discord-widget {
+    margin: 50px auto 0;
+    /* width: 20%; */
+    float: right;
+}
+
+#event-container {
+    display: flex;
+    flex: row wrap;
+    margin-top: 20px;
+}
+
+#event-description {
+    padding: 10px;
+    max-width: 700px;
+    text-align: left;
+}
+
+.list li{
+    margin: 10px 0;
+}
+
+#steps-card {
+    width: 300px;
+    border-radius: 5px;
+    background-color: #0d1117;
+    background-color: #1e2227;
+    margin: 10px;
+    padding: 10px 30px;
+    box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
+    text-align: left;
+}
+
+#steps-list {
+    list-style: inside;
+}
+
+#steps-list li{
+    list-style: inside;
+    margin: 10px 0 30px;
+}
+
+/* Utilities */
+#line-header {
+    width: 200px;
+    margin: 0 auto 5px;
+}
+
+.emphasis-text {
+    color:rgb(51, 235, 189);
+}
+
+.line {
+    width: 100px;
+    margin: 10px auto;
+}
+
+#footer-line {
+    width: 100px;
+    margin: 10px auto;
+}
+
+#arrow-link {
+    color:rgb(252, 188, 93);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.link {
+    color:rgb(252, 188, 93);
+    text-decoration: none;
+    cursor: pointer;
+    background: 
+    linear-gradient(to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)),
+    linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
+    background-size: 100% 0.1em, 0 0.1em;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    transition: background-size 400ms;
+}
+
+.link:hover {
+    color:rgba(252, 188, 93, 0.719);
+    background-size: 0 0.1em, 100% 0.1em;
+}
+
+footer {
+    width: auto;
+    height: 100px;
+    background-color: rgb(24, 24, 24);
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 10px 20px 20px 20px;
+    flex-flow: row wrap;
+}
+
+footer ul {
+    float: top;
+}
+
+footer li {
+    display: inline-block;
+    margin: 0 7px;
+}
+
+footer a {
+    color:rgb(108, 176, 231);
+    font-size: 16px;
 }

index.html

@@ -46,7 +46,7 @@
             <label for="check" class="checkbtn">
                 <img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/>
             </label>
-            <a href=""></a><div id="sign-up">SIGN UP</div></a>
+            <a target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
             <ul>
                 <li><a href="#event">Event</a></li>
                 <li><a href="#rules">Rules</a></li>
@@ -60,14 +60,15 @@
         <div id="header-background">
             <div id="header">
                 <img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" loading="lazy" alt="logo"/>
-                <hr class="line">
+                <hr id="line-header">
                 <h2 id="header-subtitle-date">Aug 12 - 14</h2>
                 <div id="spots-container">
                     <div class="blob green" aria-hidden="true"></div>
                     <h2 id="header-subtitle-spots">40 spots Left</h2>
                 </div>
                 <div id="entrance-arrow">
-                    <a href="#event" class="link">
+                    <a href="#event" id="arrow-link">
+                        Event
                         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                     </a>
                 </div>
@@ -76,12 +77,60 @@
     </header>
 <!--Main-->
     <main>
-        <section id="event">Event</section>
+        <section id="event">
-        <section id="rules">Rules</section>
+            <h2 class="topic">Hackathon Event</h2>
-        <section id="prizes">Prizes</section>
+            <hr class="line">
-        <section id="teams">Teams</section>
+            <div id="event-container">
+                <article id="event-description">
+                    <ul class="list">
+                        <li>Even if you're not an expert at coding, this hackathon will offer an opportunity to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
+                            <ul style="margin-left: 25px">
+                                <li><span class="emphasis-text">Aug 11</span> -> Signup Period Ends</li>
+                                <li><span class="emphasis-text">Aug 12</span> -> Hackathon</li>
+                            </ul>
+                        </li>
+                        <li>Our program is dedicated to providing the Gilroy/Morgan Hill/Hollister youth with the opportunity to develop their coding skills. We specialize in hackathons where students participate in teams and compete for prizes. Students can create their own teams or if they are competing individually, we will assign teams based on experience level and programming language. For this hackathon, we plan on grouping at least one experienced person with novices so that no one is out of their depth. The current estimate is that there will be one or two experienced people and two novices in each team for this contest. However, depending on the number of participants, we may decrease team size if not enough people participate. </li>
+                    </ul>
+                    </article>
+                <article>
+                    <h3 id="steps-header">STEPS</h3>
+                    <div id="steps-card">
+                        <ul class="list" id="steps-list">
+                            <li>Sign up w/ <a class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">form</a></li>
+                            <li>Join the Discord</li>
+                            <li>Create/join a team</li>
+                            <li>Start discussing ideas for a project</li>
+                            <li>Wait for the hackathon to start!</li>
+                        </ul>
+                    </div>
+                </article>
+            </div>
+        </section>
+        <section id="rules">
+            <h2 class="topic">Rules</h2>
+            <hr class="line">
+        </section>
+        <section id="prizes">
+            <h2 class="topic">Prizes</h2>
+            <hr class="line">
+        </section>
+        <section id="teams">
+            <h2 class="topic">Teams</h2>
+            <hr class="line">
+            <div id="discord-widget">
+                <iframe src="https://discord.com/widget?id=896884806124728352&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
+            </div>
+        </section>
     </main>
-
+<!--Footer-->
+<footer>
+    <ul>
+        <li><a class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr">Discord</a></li>
+    </ul>
+    <hr id="footer-line">
+    © 2022 Gilroy Hacks <br>
+    All Rights Reserved
+</footer>
 <script src="js/scroll_nav.js"></script>
 </body>
 </html>