index.html

---
layout: page
styles:
  - /css/main.css
  - /css/ball/2023/main.css
title: CSS Ball
favicon: /ball/favicon.ico
---

{% assign ball = site.data.ball['2023'] %}

<div class="text-center-div margin-top margin-bottom section-details">
    <h1 class="title">
        {{ball.name}} {{ball.year}}
    </h1>
    <h2>
        <span class="avoidwrap">{{ball.location}}</span> • <span class="avoidwrap">{{ball.date}}</span>
    </h2>

    <h3 id="count"><br></h3>

    {% for link in ball.links %}
        <a href='{{link.url}}' class="button {% if link.url == '' %}empty"{% else %}" href='{{link.url}}' {% endif %}>
            {{link.text}}{% if link.url == '' %} (Coming Soon){% endif %}</a>
    {% endfor %}
</div>
<hr class="bleed-bottom">
<div class="text-center-div margin-top margin-bottom section-info" id="venue">
    <h2 class="subtitle mobile-only">The Venue</h2>
    <img class="image" src="/assets/images/ball-22-venue.jpg" alt="Image of Fazeley Studios, where the CSS Ball is being held">
    <div class="description-left text-center-div">
        <h2 class="subtitle">The Venue</h2>
        <p class="text-block">As everybody loved it last year, we will be returning to the fabulous Fazeley Studios for this year's Ball!<br><br>
            We'll have exclusive access to various different rooms and facilities, including a bar, private courtyard, dining room, and of course the obligatory dancefloor.
        </p>
    </div>
</div>
<hr class="bleed-bottom bleed-top">
<div class="text-center-div margin-top section-info" id="dj">
    <h2 class="subtitle mobile-only">Live Music</h2>
    <div class="description-right text-center-div">
        <h2 class="subtitle">Live Music</h2>
        <p class="text-block">Vivid Soul are a band based in Birmingham, and they will be bringing live entertainment to our Ball!<br><br>
            They will be playing two sets of music live, and will bring a playlist of songs you request in-between.
        </p>
    </div>
    <img class="image" src="/assets/images/vividsoulband.jpg" alt="Photo of Vivid Soul, the band at the CSS Ball 2023">
</div>
<hr class="bleed-top">
<div class="section-tickets" id="tickets">
    <div class="icon">
        <img class="icon" src="/assets/images/css-ball-ticket.png", alt="A cartoon image of a ticket with the text 'CSS Ball, Fazeley Studios, 26 April, Admit One'"/>
    </div>
    <div class="text">
        <h2 class="subtitle">Tickets</h2>
        <p class="text-block">Tickets cost <span class="highlight">£42.50</span> and are on sale on the Guild website.<br>
        <b class="guild-incompetence-notice">Note: If you are intending to buy a +1 ticket, please purchase this separately from your main ticket. Due to an error with the Guild's system, you will not be able to choose meal choices for your guest if you buy them both at the same time.</b></p>
    </div>
    <div>
        <a class="button" href="https://www.guildofstudents.com/events/6531/7397/">Buy Tickets</a>
    </div>
</div>
<hr>
<div class="text-center-div margin-bottom section-faq" id="faq">
    <h2 class="subtitle">FAQs</h2>
    {% for qanda in ball.faq %}
        <div class="faq">
        <h3 class="subsubtitle question">{{ qanda.question }}</h3>
        <p class="text-block answer">{{ qanda.answer }}</p>
        </div>
    {% endfor %}
</div>
<hr>
<div class="margin-top margin-bottom section-info">
    <iframe width="100%" height="400"
    src="//umap.openstreetmap.fr/en/map/untitled-map_736360?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=null&onLoadPanel=undefined&captionBar=false&datalayers=2168470#13/52.4652/-1.9053">
    </iframe>
</div>
<hr>

<script>
    const countDownDate = new Date("Apr 26, 2023 19:00:00").getTime();

    (function updateTimer() {
        let now = new Date().getTime();
        let distance = countDownDate - now;
        let days = Math.floor(distance / (1000 * 60 * 60 * 24));
        let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((distance % (1000 * 60)) / 1000);

        document.getElementById("count").innerHTML = days + " <span>days</span> " + hours + " <span>hours</span> "
            + minutes + " <span>minutes</span> " + seconds + " <span>seconds</span>";

        if (distance < 0) {
            document.getElementById("count").innerHTML = "Attendees: {{ ball.attendees }}";
        } else {
            setTimeout(updateTimer, 1000)
        }
    })();
</script>