diff --git a/index.html b/index.html
index 0966405684a498cfef2db3c87efb98f4d5ed1630..6d9634dc60c9877e55edecc96d9e12270a815f75 100644
--- a/index.html
+++ b/index.html
@@ -54,7 +54,8 @@
<p>26 – 28 August 2023</p>
<p>Hosted at the M Shed or online via Zoom</p>
<div>
- <a href="https://twitter.com" class="btn--twitter" target="_blank" rel="noopener"><span class="icon--twitter"></span>Tweet</a>
+ <a href="https://twitter.com" class="btn--twitter" target="_blank" rel="noopener"><span
+ class="icon--twitter"></span>Tweet</a>
<a href="#" class="btn--primary">Sign Up Now</a>
</div>
<div>
@@ -68,64 +69,78 @@
<section id="home__about">
<h2>About the Jam</h2>
<article class="grid-2x2">
- <img src="assets\img\placeholder-sketches\gaming.jpg" alt="Drawing of two characters playing a video game and having a good time">
+ <img src="assets\img\placeholder-sketches\gaming.jpg"
+ alt="Drawing of two characters playing a video game and having a good time">
<div>
<p>
- <i>Create Against Hate</i> is a manga-themed charity game jam created in support of <a href="https://www.stophateuk.org/" target="_blank" rel="noopener"><i>Stop Hate UK</i></a>. <i>Stop Hate UK</i> is a UK-based charity dedicated to the prevention of hate crimes and to support the victims of hate-based discrimination. <a href="about.html">Find out more →</a>
+ <i>Create Against Hate</i> is a manga-themed charity game jam created in support of <a
+ href="https://www.stophateuk.org/" target="_blank" rel="noopener"><i>Stop Hate UK</i></a>.
+ <i>Stop Hate UK</i> is a UK-based charity dedicated to the prevention of hate crimes and to
+ support the victims of hate-based discrimination. <a href="about.html">Find out more →</a>
</p>
<p>
- In particular, hate crimes against East and South East Asian communities have increased as a result of the COVID-19 pandemic, with reports rising 50% over two years, prompting the creation of the <a href="https://www.stophateuk.org/on-your-side-report-and-support-service/" target="_blank" rel="noopener"><i>On Your Side: Support and Report Service</i></a>, which <i>Stop Hate UK</i> helps lead.
+ In particular, hate crimes against East and South East Asian communities have increased as a
+ result of the COVID-19 pandemic, with reports rising 50% over two years, prompting the creation
+ of the <a href="https://www.stophateuk.org/on-your-side-report-and-support-service/"
+ target="_blank" rel="noopener"><i>On Your Side: Support and Report Service</i></a>, which
+ <i>Stop Hate UK</i> helps lead.
</p>
</div>
<div>
<p>
- Manga is a worldwide phenomenon originating in Japan, inspiring a large variety of video games and bringing fans together across the world, which is why it's been chosen as the theme of this jam dedicated to combatting hate. <a href="rules.html">Click here for rules and ideas →</a>
+ Manga is a worldwide phenomenon originating in Japan, inspiring a large variety of video games
+ and bringing fans together across the world, which is why it's been chosen as the theme of this
+ jam dedicated to combatting hate. <a href="rules.html">Click here for rules and ideas →</a>
</p>
<p>
- All games created during the jam will be available for free with the option to donate to <i>Stop Hate UK</i> at checkout.
+ All games created during the jam will be available for free with the option to donate to <i>Stop
+ Hate UK</i> at checkout.
</p>
</div>
- <img src="assets\img\placeholder-sketches\donations.jpg" alt="Drawing of a group of characters gathering donations for 'Stop Hate UK'">
+ <img src="assets\img\placeholder-sketches\donations.jpg"
+ alt="Drawing of a group of characters gathering donations for 'Stop Hate UK'">
</article>
</section>
<!-- Sign Up Form -->
- <section id="home__sign-up" class="sign-up-form">
- <h2>Sign Up Now</h2>
+ <section id="home__sign-up">
<form action="" method="post" autocomplete="on">
- <fieldset>
+ <h2>Sign Up Now</h2>
+ <fieldset class="personal-details">
<input type="text" placeholder="First Name (Required)" required>
<input type="text" placeholder="Surname (Required)" required>
- <input type="email" placeholder="email (Required)" required>
+ <input type="email" placeholder="Email (Required)" required>
<input type="tel" placeholder="Telephone (Optional)">
</fieldset>
- <fieldset>
- <label for="online">Online</label>
+ <fieldset class="online-in-person" role="radiogroup">
<input type="radio" name="online-in-person" id="online" value="online">
- <label for="in-person">In Person</label>
+ <label for="online">Online</label>
<input type="radio" name="online-in-person" id="in-person" value="in-person">
+ <label for="in-person">In Person</label>
</fieldset>
- <fieldset>
+ <fieldset class="areas-of-interest">
<legend>Areas of Interest</legend>
- <div>
- <input type="checkbox" name="area-of-interest" id="artist" value="Artist">
- <label for="artist">Artist</label>
- </div>
- <div>
- <input type="checkbox" name="area-of-interest" id="audio-specialist" value="Audio Specialist">
- <label for="audio-specialist">Audio Specialist</label>
- </div>
- <div>
- <input type="checkbox" name="area-of-interest" id="designer" value="Designer">
- <label for="designer">Designer</label>
- </div>
- <div>
- <input type="checkbox" name="area-of-interest" id="programmer" value="Programmer">
- <label for="programmer">Programmer</label>
- </div>
- <div>
- <input type="checkbox" name="area-of-interest" id="writer" value="Writer">
- <label for="writer">Writer</label>
- </div>
+ <ul>
+ <li>
+ <input type="checkbox" name="area-of-interest" id="artist" value="Artist">
+ <label for="artist">Artist</label>
+ </li>
+ <li>
+ <input type="checkbox" name="area-of-interest" id="audio-specialist" value="Audio Specialist">
+ <label for="audio-specialist">Audio Specialist</label>
+ </li>
+ <li>
+ <input type="checkbox" name="area-of-interest" id="designer" value="Designer">
+ <label for="designer">Designer</label>
+ </li>
+ <li>
+ <input type="checkbox" name="area-of-interest" id="programmer" value="Programmer">
+ <label for="programmer">Programmer</label>
+ </li>
+ <li>
+ <input type="checkbox" name="area-of-interest" id="writer" value="Writer">
+ <label for="writer">Writer</label>
+ </li>
+ </ul>
</fieldset>
<button type="submit" class="btn--primary blue">Submit</button>
</form>
@@ -155,13 +170,16 @@
<!-- Socials -->
<ul id="socials">
<li>
- <a href="https://twitter.com" target="_blank" rel="noopener" title="twitter.com"><span class="icon--twitter"></span></a>
+ <a href="https://twitter.com" target="_blank" rel="noopener" title="twitter.com"><span
+ class="icon--twitter"></span></a>
</li>
<li>
- <a href="https://instagram.com" target="_blank" rel="noopener" title="instagram.com"><span class="icon--insta"></span></a>
+ <a href="https://instagram.com" target="_blank" rel="noopener" title="instagram.com"><span
+ class="icon--insta"></span></a>
</li>
<li>
- <a href="https://facebook.com" target="_blank" rel="noopener" title="facebook.com"><span class="icon--fb"></span></a>
+ <a href="https://facebook.com" target="_blank" rel="noopener" title="facebook.com"><span
+ class="icon--fb"></span></a>
</li>
</ul>
</footer>
diff --git a/styles.css b/styles.css
index b156de70a31726a1b39df2ae8031dc2a800096d7..2d29f6c3996e95ad2f330258f1cf3191ef111b14 100644
--- a/styles.css
+++ b/styles.css
@@ -95,7 +95,7 @@
section {
/* Creates border present between all sections */
- border-bottom: var(--main-dark) .25rem solid;
+ border-bottom: var(--main-dark) .15rem solid;
}
footer {
@@ -146,7 +146,7 @@
/* Creates border present around majority of images */
border: var(--main-dark) solid;
- border-width: .3rem .45rem .45rem .3rem;
+ border-width: .25rem .35rem .35rem .25rem;
object-fit: cover;
}
@@ -569,6 +569,144 @@
min-height: 100%;
}
+ /** Sign Up Form Section **/
+ #home__sign-up form {
+ width: 70%;
+ max-width: 50rem;
+
+ margin: 0 auto;
+ padding: 2rem;
+
+ background-color: var(--section-pink);
+ }
+
+ fieldset {
+ border: none;
+ }
+
+ /* Personal details */
+ input[type="text"],
+ input[type="email"],
+ input[type="tel"] {
+ padding-left: 0.5rem;
+
+ height: 2rem;
+ width: 100%;
+
+ border: solid var(--main-dark);
+ border-width: 0.1rem 0.2rem 0.2rem 0.1rem;
+ }
+
+ .personal-details {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 1em;
+ }
+
+ /* Online/In Person radio buttons styling */
+
+ /* Hides radio buttons while keeping accessibility */
+ .online-in-person input[type="radio"] {
+ position: absolute;
+
+ opacity: 0;
+ }
+
+ .online-in-person {
+ display: flex;
+ }
+
+ .online-in-person input[type="radio"]:focus + label {
+ border-color: var(--accent-blue);
+ }
+
+ .online-in-person label {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ margin-block: 1rem;
+
+ height: 2rem;
+ width: 50%;
+
+ background-color: white;
+
+ border: solid var(--main-dark);
+ border-width: 0.1rem 0.2rem 0.2rem 0.05rem;
+
+ cursor: pointer;
+ }
+
+ .online-in-person label:first-of-type {
+ border-width: 0.1rem 0.1rem 0.2rem 0.1rem;
+ }
+
+ .online-in-person input[type="radio"]:checked + label {
+ background: var(--form-filled);
+ }
+
+ /* Areas of Interest section */
+ .areas-of-interest legend {
+ font-weight: bold;
+ font-size: 1.2em;
+ }
+
+ .areas-of-interest ul {
+ display: grid;
+ grid-gap: 1em;
+ grid-template-columns: repeat(3, auto);
+
+ margin-top: 1em;
+ }
+
+ /* Checkbox Styling */
+ .areas-of-interest input[type="checkbox"] {
+ position: relative;
+ /* Remove initial styles of the checkbox */
+ appearance: none;
+
+ height: 1em;
+ width: 1em;
+
+ border: solid var(--main-dark);
+ border-width: 0.1rem 0.15rem 0.15rem 0.1rem;
+
+ background-color: white;
+
+ cursor: pointer;
+ }
+
+ /* Fill checkbox with blue colour when checked */
+ .areas-of-interest input[type="checkbox"]::before {
+ position: absolute;
+ content: "";
+
+ height: 100%;
+ width: 100%;
+
+ background-color: var(--form-filled);
+
+ /* Animated effect */
+ transform: scale(0);
+ transform-origin: center;
+ transition: all 0.15s;
+ }
+
+ .areas-of-interest input[type="checkbox"]:checked::before {
+ transform: scale(1);
+ }
+
+ /* Submit Button */
+ button[type="submit"] {
+ margin: 0;
+ margin-left: auto;
+
+ width: 20%;
+ border: none;
+
+ cursor: pointer;
+ }
/* 64em == 1024px */
@media only screen and (min-width: 64em) {
@@ -664,6 +802,24 @@
.grid-2x2 img:last-of-type {
display: none;
}
+
+ /** Sign Up Form Section **/
+ #home__sign-up {
+ padding: 0;
+ }
+
+ #home__sign-up form {
+ width: 100%;
+
+ margin: 0 auto;
+ padding: 2rem;
+
+ background-color: var(--section-pink);
+ }
+ /* Areas of Interest section */
+ .areas-of-interest ul {
+ grid-template-columns: repeat(2, auto);
+ }
}
/* 22.5em == 360px */
@@ -772,4 +928,11 @@
align-items: center;
gap: 1em;
}
+
+ /*** Homepage Styles ***/
+ /** Sign Up Form Section **/
+ .personal-details {
+ grid-template-columns: 1fr;
+ }
+
}
\ No newline at end of file