Changed profile img

css/general.css

@@ -1791,6 +1791,10 @@ section {
   border: 1px solid rgb(161, 161, 161);
 }
 
+#jd {
+  border: 0px;
+}
+
 .team-description {
   text-align: left;
   width: auto;

css/licenses.css

@@ -12,14 +12,14 @@ html {
     scroll-behavior: smooth;
   }
 
-  /* Nav */
+/* Nav */
-  * {
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  }
+}
 
-  nav {
+nav {
   height: 59px;
   width: 100%;
   overflow: hidden;
@@ -28,66 +28,66 @@ html {
   position: fixed;
   flex-wrap: nowrap;
   z-index: 100;
-  }
+}
 
-  nav * {
+nav * {
   padding: 0;
   margin: 0px 5px;
   list-style: none;
   box-sizing: border-box;
   z-index: 100;
   text-decoration: none;
-  }
+}
 
-  #nav-logo {
+#nav-logo {
   margin-top: 5px;
   height: 50px;
   width: 258px;
-  }
+}
 
-  #nav-logo:hover {
+#nav-logo:hover {
   transform: scale(1.03);
   transition: 0.5s;
-  }
+}
 
-  #nav-logo-div {
+#nav-logo-div {
   height: 50px;
   width: 258px;
   margin: none;
   display: inline block;
   position: fixed;
-  }
+}
 
-  #nav-logo-a {
+#nav-logo-a {
   position: relative;
-  }
+}
 
-  nav ul {
+nav ul {
   float: right;
   margin-right: 20px;
-  }
+}
 
-  nav ul li {
+nav ul li {
   display: inline-block;
   line-height: 30px;
   margin: 10px 7px;
   padding: 3px 5px;
   cursor: pointer;
-  }
+}
 
-  .navlink {
+.navlink {
   color:rgb(233, 203, 104);
   font-size: 18px;
   text-decoration: none;
   position: relative;
-  }
+}
 
-  .navlink.active,a:hover {
+.navlink.active,a:hover {
   color: rgba(233, 203, 104, 0.774);
   transition: .5s;
-  }
+}
 
-  .navlink::after {
+.navlink::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -101,12 +101,12 @@ html {
   transform-origin: center;
   }
 
-  .navlink:hover::after,
+.navlink:hover::after,
-  .navlink:focus::after{
+.navlink:focus::after{
   transform: scale(1);
-  }
+}
 
-  .checkbtn {
+.checkbtn {
   font-size: 23px;
   color: white;
   float: right;
@@ -114,13 +114,13 @@ html {
   margin-right: 20px;
   cursor: pointer;
   display: none;
-  }
+}
 
-  #check {
+#check {
   display: none;
-  }
+}
 
-  #nav-links-container {
+#nav-links-container {
   display: flex;
   width: auto;
   margin: 0;
@@ -130,9 +130,9 @@ html {
   flex-wrap: nowrap;
   flex-direction: row-reverse;
   align-content: stretch;
-  }
+}
 
-  #sign-up {
+#sign-up {
   padding: 6px 7px;
   margin: 14px 15px 14px 4px;
 
@@ -142,57 +142,53 @@ html {
   color: bisque;
   display: flex;
   place-items: center;
-  }
+}
 
-  #sign-up:hover {
+#sign-up:hover {
   transform: scale(1.05);
   background-color: blueviolet;
   cursor: pointer;
   transition: 0.5s;
-  }
+}
 
-  #banner {
+#banner {
-    height: 100%;
+  width: 70%;
-    /* width: 50%; */
+  position: absolute;
-    width: 380px;
+  justify-content: center;
-    margin: auto;
-    font-size: 20px;
   display: inline-flex;
-    position: relative;
+  top: 16px;
-    justify-content: left;
+  font-size: 20px;
-    overflow: hidden;
+  margin: auto;
-    align-items: center;
+}
-  }
 
-  #banner-text {
+#banner-text {
   text-align: center;
-  }
+}
 
-  #timer {
+#timer {
   color: rgb(184, 184, 184);
   animation: blinking 3s infinite;
   background-color: rgb(57, 57, 57);
   border-radius: 5px;
   padding: 2px 5px;
-  }
+}
 
-  .tooltip-nav {
+.tooltip-nav {
   text-decoration: none;
-  }
+}
 
-  #timer-link {
+#timer-link {
   color:rgb(252, 188, 93);
   text-decoration: none;
   cursor: pointer;
   background: unset;
-  }
+}
 
-
+.link:hover {
-  .link:hover {
   color:rgba(252, 188, 93, 0.719);
-  }
+}
 
-  @keyframes blinking {
+@keyframes blinking {
   0% {
     opacity: 1;
   }
@@ -202,28 +198,9 @@ html {
   100% {
     opacity: 1;
   }
-  }
+}
-  /* @keyframes headline {
-    0% {
-      transform: translateX(600px);
-    }
-    50% {
-      transform: translateX(-600px);
-    }
-    100% {
-      transform: translateX(-600px);
-    }
-  } */
 
-  /* .notification {
+@keyframes dropdown{
-    position: absolute;
-    text-align: center;
-    margin: auto;
-    z-index: 100;
-    visibility: hidden;
-  } */
-  
-  @keyframes dropdown{
   0% {
     opacity: 0;
     transform: translateY(-30px);
@@ -238,15 +215,15 @@ html {
   100% {
     transform: translateY(0px);
   }
-  }
+}
 
-  /* Responsive Functions */
+/* Responsive Functions */
-  @media (max-width: 1150px) {
+@media (max-width: 1150px) {
   #banner {
     display: none;
   }
-  }
+}
-  @media (max-width: 800px) {
+@media (max-width: 800px) {
   .checkbtn {
     display: inline-block;
   }
@@ -294,21 +271,21 @@ html {
     display: inline-flex;
     width: 300px;
   }
-  }
+}
-  @media (max-width: 750px) {
+@media (max-width: 750px) {
   #banner {
     display: none;
   }
-  }
+}
-  @media (max-width: 500px) {
+@media (max-width: 500px) {
   #event, #rules, #prizes, #team {
     transform: scale(0.9);
   }
   section {
     padding-top: 0 !important;
   }
-  }
+}
-  @media (max-width: 470px) {
+@media (max-width: 470px) {
   #nav-logo {
       content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
       height: 50px;
@@ -321,8 +298,8 @@ html {
   #prizes-container {
     transform: scale(0.9);
   }
-  }
+}
-  @media (max-height: 550px) {
+@media (max-height: 550px) {
   #logo {
     transform: scale(0.8);
   }
@@ -338,14 +315,14 @@ html {
   #entrance-arrow {
     visibility: hidden;
   }
-  }
+}
-  @media (max-height: 400px) {
+@media (max-height: 400px) {
   #header {
     transform: scale(0.7);
   }
-  }
+}
 
-  .blob {
+.blob {
   background: black;
   border-radius: 50%;
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
@@ -355,15 +332,15 @@ html {
   transform: scale(1);
   animation: pulse-black 2s infinite;
   position: relative;
-  }
+}
 
-  .blob.green {
+.blob.green {
   background: rgba(51, 217, 178, 1);
   box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
   animation: pulse-green 2s infinite;
-  }
+}
 
-  @keyframes pulse-green {
+@keyframes pulse-green {
   0% {
     transform: scale(0.95);
     box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
@@ -376,91 +353,97 @@ html {
     transform: scale(0.95);
     box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
   }
-  }
+}
 
-  /* Header */
+/* Header */
-  #header-background {
+#header-background {
   background-image: url(/img/mountains-1.jpg);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
   height: 20%;
-  }
+}
 
-  #header {
+#header {
   width: 100%;
   height: 100%;
+  padding: 70px 0 50px;
   display: flex;
-    flex-flow: column nowrap;
+  flex-flow: row nowrap;
   justify-content: center;
-    align-items: center;
 
   text-align: center;
   position: relative;
-    /* background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); */
+}
-  }
 
-  #logo {
+#logo {
   height: 100px;
   width: 100px;
   animation: fadeInAnimation ease 3s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
-  }
+}
 
-  #header-subtitle-date {
+#header-info {
-    padding: 5px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: left;
+}
+
+#header-subtitle-date {
+  font-size: 18px;
+  padding: 5px 7px;
+  width: fit-content;
   margin-top: 5px;
   border-radius: 10px;
   display: flex;
-    place-items: center;
   border: 1px solid rgb(73, 73, 73);
   background-color: rgb(22, 22, 22);
   animation: slidein ease 1.5s;
-  }
+}
 
-  #spots-container {
+#spots-container {
   display: flex;
-    place-items: center;
   border-radius: 10px;
   margin-top: 5px;
   padding: 0 7px;
   border: 1px solid rgb(73, 73, 73);
   background-color: rgb(22, 22, 22);
   animation: slidein-2 ease 3s;
-  }
+}
 
-  #header-subtitle-spots {
+#header-subtitle-spots {
+  font-size: 18px;
   padding: 5px;
-  }
+}
 
-  #spots-container:hover, #header-subtitle-date:hover {
+#spots-container:hover, #header-subtitle-date:hover {
   transform: translateY(-2px);
   transition: 0.5s;
-  }
+}
 
-  #entrance-arrow {
+#entrance-arrow {
   width: 50px;
   height: 50px;
   position: absolute;
   bottom: 10px;
   float: bottom;
   animation: bounce 3s infinite;
-  }
+}
 
-  #entrance-arrow:hover {
+#entrance-arrow:hover {
   font-size: 17px;
   transition: 0.1s;
-  }
+}
 
-  #header-gradient {
+#header-gradient {
   width: 100%;
   height: 100%;
   background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%);
-  }
+}
 
-  @keyframes bounce {
+@keyframes bounce {
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
   }
@@ -470,22 +453,66 @@ html {
   60% {
     transform: translateY(-3px);
   }
-  }
+}
 
-  @keyframes fadeInAnimation {
+@keyframes fadeInAnimation {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
     }
-  }
+}
+
+/* Main Section */
+main {
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+  margin: auto;
+  display: grid;
+  padding-bottom: 30px;
+}
+
+section {
+  width: auto;
+  padding-top: 70px;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  max-width: 1500px;
+  min-width: 200px;
+}
+
+.topic {
+  width: auto;
+  font-size: 35px;
+  padding: 0 20px 0 20px;
+  color:rgb(255, 243, 205);
+}
+
+#license-list {
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  height: auto;
+  margin: auto;
+}
+
+.license-entry {
+  width: 100%;
+  height: auto;
+  padding: 10px;
+  text-align: left;
+}
 
   /* Utilities */
-#line-header {
+.vertical-line {
-    width: 200px;
+  width: 2px;
-    margin: 0 auto 5px;
+  margin: 0 10px;
-    animation: grow-wide ease 2s;
+  background-color: rgb(255, 255, 255);
 }
 
 @keyframes grow-wide {
@@ -552,25 +579,65 @@ html {
 
 footer {
   width: auto;
-  height: 100px;
+  height: auto;
   background-color: rgb(24, 24, 24);
   justify-content: center;
-  align-items: center;
+  align-items: left;
   text-align: center;
-  padding: 10px 20px 20px 20px;
+  padding: 20px;
   flex-flow: row wrap;
 }
 
-footer ul {
+#footer-container {
-  float: top;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: stretch;
+}
+
+#footer-logo {
+  height: 45px;
+  width: 232px;
+  margin-left: -5px;
+}
+
+#footer-desc {
+  width: 350px;
+  text-align: left;
+  line-height: 25px;
+  font-size: 18px;
+}
+
+#socials {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.socials-icon {
+  margin: 0 10px;
+}
+
+#footer-copyright {
+  color: rgb(129, 129, 129);
+}
+
+#footer-line {
+  width: 100%;
+  margin: 10px auto;
+}
+
+#footer-links {
+  width: 200px;
+  margin-top: 7px;
+  padding-left: 40px;
+  text-align: left;
 }
 
 footer li {
-  display: inline-block;
+  line-height: 30px;
-  margin: 0 7px;
+  list-style: none;
-}
-
-footer a {
-  color:rgb(108, 176, 231);
-  font-size: 16px;
 }

index.html

@@ -633,7 +633,7 @@
                 <article id="tech">
                     <h3 class="team-title">Tech</h3>
                     <div class="team-entry">
-                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-picture"><img id="jd" src="img/jd.png" loading="lazy" alt="profile picture"></div>
                         <div class="team-description">
                             <h4 class="person-name">James Dinh</h4>
                             <h5 class="person-subtitle">Lead Website Designer</h5>

licenses.html

@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     
-    <title>Gilroy Hacks Liscences</title>
+    <title>Gilroy Hacks · Liscences</title>
     <link href="css/licenses.css" rel="stylesheet" type="text/css" media="all">
     <link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
     <link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
@@ -49,6 +49,12 @@
         <a id="nav-logo-a" href="./">
             <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
         </a>
+        <div id="banner">
+            <p id="banner-text"><a class="navlink" id="timer-link" href="#timeline">Opening Ceremony</a> in
+                  <abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr>
+                  <!-- <span id="nav-tooltip" data-text="Aug 12, 4pm"></span> -->
+            </p>
+        </div>
         <div id="nav-links-container">
             <input onclick="btnToggle()" type="checkbox" id="check">
             <label for="check" class="checkbtn">
@@ -61,9 +67,6 @@
                 <li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
                 <li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
             </ul>
-            <div id="banner">
-                <p id="banner-text"><a class="navlink" id="timer-link" href="#timeline" title="Click for more info">Opening Ceremony</a> in<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
-            </div>
         </div>
     </nav>
     <header>
@@ -71,11 +74,13 @@
             <div id="header-gradient">
                 <div id="header">
                     <img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="100" width="100" alt="logo"/>
-                    <hr id="line-header">
+                    <div class="vertical-line"></div>
+                    <div id="header-info">
                         <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">35 spots remaining</h2>
+                            <h2 id="header-subtitle-spots">32 spots remaining</h2>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -83,26 +88,52 @@
     </header>
     <main>
         <section>
-            hi
+            <h2 class="topic">Licenses</h2>
+            <hr class="line">
+            <div id="license-list">
+                <article class="license-entry">
+                    img/bars.png
+                </article>
+            </div>
         </section>
     </main>
     <!--Footer-->
     <footer>
+        <div id="footer-container">
+            <article id="footer-desc">
+                <img id="footer-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
+                <p>
+                    Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local high school students.
+                </p>
+                <div id="socials">
+                    <div><a target="_blank" href="https://www.facebook.com/profile.php?id=100082498013066" title="Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg></a></div>
+                    <div class="socials-icon"><a target="_blank" href="https://www.instagram.com/gilroyhacks/" title="Instagram"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg></a></div>
+                </div>
+                <hr id="footer-line">
+                <p id="footer-copyright">
+                    © 2022 Gilroy Hacks. All Rights Reserved
+                </p>
+            </article>
+            <article id="footer-links">
+                <h3>Links</h3><br>
                 <ul>
                     <li><a class="link" onclick="check('02'); save()" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></li>
-            <li><a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">Contact Us</a></li>
+                    <li><a class="link" onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">Signup Form</a></li>
-            <li><a class="link" target="_blank" href="https://forms.gle/jhVFg4hN42k7EMZs7" title="Volunteer Signup Form">Volunteer Signup</a></li>
+                    <li><a class="link" target="_blank" href="https://sccl.bibliocommons.com/events/62acbe100685eb4200c37c48" title="Gilroy Library Event">Library Event Entry</a></li>
+                    <li><a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">Email Us</a></li>
                 </ul>
-        <hr id="footer-line">
+            </article>
-        © 2022 Gilroy Hacks <br>
+            <article id="footer-links">
-        All Rights Reserved
+                <h3>Location</h3><br>
+                <ul>
+                    <li>Gilroy Library<br>350 W 6th St, Gilroy, CA 95020</li>
+                </ul>
+            </article>
+        </div>
     </footer>
 <!-- JavaScript Refs -->
-<script src="js/jquery-3.6.0.min.js"></script>
 <script src="js/scroll_nav.js"></script>
 <script src="js/scroll_element.js"></script>
 <script src="js/timer.js"></script>
-<script src="js/data_checkbox.js"></script>
-<script src="js/map.js"></script>
 </body>
 </html>