diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 02a0be4..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/css/general.css b/css/general.css index 372dccd..08e9a5e 100644 --- a/css/general.css +++ b/css/general.css @@ -125,12 +125,10 @@ nav li a:focus::after{ } #sign-up:hover { + transform: scale(1.1); background-color: blueviolet; - transition: 0.5s; cursor: pointer; - padding: 6px 8px; - margin: 13px 15px 13px 0; - font-size: 17px; + transition: 0.5s; } /* Responsive Functions */ @@ -164,12 +162,17 @@ nav li a:focus::after{ grid-template-columns: repeat(1, 1fr) !important; } } -@media (max-width: 500px) { +@media (max-width: 450px) { .checkbtn { display: none; } + #logo { + height: 300px; + width: 300px; + } } + #spots-container { display: flex; place-items: center; @@ -248,6 +251,11 @@ nav li a:focus::after{ animation: bounce 3s infinite; } +#entrance-arrow:hover { + font-size: 17px; + transition: 0.1s; +} + @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); @@ -260,6 +268,11 @@ nav li a:focus::after{ } } +#logo { + min-height: 300px; + min-width: 300px; +} + /* Main Section */ main { width: 100%; @@ -322,20 +335,70 @@ section { border-radius: 5px; background-color: #0d1117; background-color: #1e2227; - margin: 10px; + margin: 10px auto; padding: 10px 30px; box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); text-align: left; } -#steps-list { - padding-left: 10px; +.list-item { + margin: 0 0 30px 30px; + padding: 10px; + position: relative; } -#steps-list li{ - margin: 10px 0 30px; +.list-item::before { + content: ""; + position: relative; + margin-right: 10px; + width: 10px; + height: 10px; + background: rgb(255, 255, 255); + border-radius: 999px; + float: left; + border: 3px solid rgb(44, 44, 44); } +/* Timeline Container */ +.timeline { + margin: 20px auto; + } + + /* Outer Layer with the timeline border */ + .outer { + border-left: 2px solid #333; + } + + /* Card container */ + .card { + position: relative; + margin: 0 0 20px 20px; + padding: 10px; + background: #333; + color: gray; + border-radius: 8px; + max-width: 400px; + } + + /* Title of the card */ + .title { + color: rgb(255, 255, 255); + position: relative; + font-size: 16px; + } + + /* Timeline dot */ + .card::before { + content: ""; + position: absolute; + width: 10px; + height: 10px; + background: white; + border-radius: 999px; + left: -29px; + border: 3px solid rgb(253, 124, 77); + } + /* Utilities */ #line-header { width: 200px; diff --git a/img/.DS_Store b/img/.DS_Store deleted file mode 100644 index 908f667..0000000 Binary files a/img/.DS_Store and /dev/null differ diff --git a/img/Gilroy-Hacks-Logo.ico b/img/Gilroy-Hacks-Logo.ico new file mode 100644 index 0000000..632a50a Binary files /dev/null and b/img/Gilroy-Hacks-Logo.ico differ diff --git a/index.html b/index.html index f4497f4..9f28237 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ Gilroy Hacks - + @@ -69,7 +69,7 @@
Event - +
@@ -86,22 +86,53 @@
  • 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:
  • 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.
    • - +

    STEPS

    -
      -
    1. Sign up w/ form
      2. -
    2. Join the Discord
      3. -
    3. Create/join a team
      4. -
    4. Start discussing ideas for a project
      5. -
    5. Wait for the hackathon to start!
      6. -
    +
    +
    +
    +
    +

    Sign up w/ this form

    +

    - These questions are used to gauge your experience and skills so we can pair you with others

    +
    +
    +
    +
    +

    Join the Discord

    +

    - Please change your nickname to your First and Last name

    +
    +
    +
    +
    +

    Create/join a team

    +

    - Join teams in the Discord Server!

    +
    +
    +
    +
    +

    Start discussing ideas for a project

    +

    + - Between now and the start of the hackathon is a great time to come up with project ideas w/ your team +
    + - However, you can't start working on the project before the hackathon +

    +
    +
    +
    +
    +

    Wait for the hackathon to start!

    +

    - Mark your calendars, Aug 12 - 14

    +
    +
    +
    +
    @@ -125,12 +156,13 @@ + \ No newline at end of file diff --git a/js/timeline.js b/js/timeline.js new file mode 100644 index 0000000..1d80480 --- /dev/null +++ b/js/timeline.js @@ -0,0 +1,12 @@ +$(function () { + var inputs = $(".input"); + var paras = $(".description-flex-container").find("p"); + inputs.click(function () { + var t = $(this), + ind = t.index(), + matchedPara = paras.eq(ind); + + t.add(matchedPara).addClass("active"); + inputs.not(t).add(paras.not(matchedPara)).removeClass("active"); + }); +});