From 971efd31efd5384d95586736a3a19069b83cc80b Mon Sep 17 00:00:00 2001
From: Robin King <robin2.king@live.uwe.ac.uk>
Date: Mon, 20 Mar 2023 09:31:53 +0000
Subject: [PATCH] feat(index.html): complete markup for webpage
---
index.html | 132 +++++++++++++++++++++++++++++++++++++++++++++++++----
1 file changed, 123 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index e6a4e69..6f71736 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" async></script>
<title>Create Against Hate</title>
@@ -13,8 +12,9 @@
<body>
<header>
+ <img src="assets\main-logo\logo-long-dark.min.svg" alt="Create Against Hate Logo">
<!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
- <nav id="main-navigation" class="navbar" aria-label="Create Against Hate Main Navigation">
+ <nav id="main-navigation" class="navbar" aria-labelledby="Create Against Hate Main Navigation">
<ul role="menubar">
<li role="none">
<a href="#" role="menuitem">
@@ -24,17 +24,17 @@
</li>
<li role="none">
<a href="about.html" role="menuitem">
- <span></span><span class="hideable-text"> About <i>Stop Hate UK</i></span>
+ <span class="icon--about"></span><span class="hideable-text"> About <i>Stop Hate UK</i></span>
</a>
</li>
<li role="none">
<a href="rules.html" role="menuitem">
- <span></span><span class="hideable-text"> Jam Rules</span>
+ <span class="icon--rules"></span><span class="hideable-text"> Jam Rules</span>
</a>
</li>
<li role="none">
<a href="location.html" role="menuitem">
- <span></span><span class="hideable-text"> How to find us</span>
+ <span class="icon--location"></span><span class="hideable-text"> How to find us</span>
</a>
</li>
</ul>
@@ -46,16 +46,130 @@
</button>
</nav>
</header>
- <main>
- <!-- Hero -- uses class="hero" -- index.html && about.html -->
- <!-- About -- uses class="grid-2x2" -->
- <!-- Sign Up Form -- uses class="sign-up-form" -->
+ <main id="home">
+ <!-- Hero -- index.html && about.html -->
+ <section id="home__hero" class="hero">
+ <article>
+ <img src="assets/main-logo/logo-dark.min.svg" alt="Create Against Hate Main Logo">
+ <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="#" class="btn--primary">Sign Up Now</a>
+ </div>
+ <div>
+ <p>Created in support of:</p>
+ <img src="assets/img/Stop-Hate-UK-Logo.png" alt="Stop Hate UK Logo">
+ </div>
+ </article>
+ <div>
+ <img src="assets/img/placeholder-sketches/hero.jpg" alt="Create Against Hate Hero Image">
+ </div>
+ </section>
+ <!-- About -->
+ <section id="home__about">
+ <h2>About the Jam</h2>
+ <article class="grid-2x2">
+ <div>
+ <img src="assets\img\placeholder-sketches\gaming.jpg" alt="Drawing of two characters playing a video game and having a good time">
+ </div>
+ <div>
+ <p>
+ <i>Create Against Hate</i> is a manga-themed charity game jam 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.
+ </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>.
+ </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.
+ </p>
+ </div>
+ <div>
+ <img src="assets\img\placeholder-sketches\donations.jpg" alt="Drawing of a group of characters gathering donations for 'Stop Hate UK'">
+ </div>
+ </article>
+ </section>
+ <!-- Sign Up Form -->
+ <section id="home__sign-up" class="sign-up-form">
+ <h2>Sign Up Now</h2>
+ <form action="" method="post" autocomplete="on">
+ <fieldset>
+ <input type="text" placeholder="First Name (Required)" required>
+ <input type="text" placeholder="Surname (Required)" required>
+ <input type="email" placeholder="email (Required)" required>
+ <input type="tel" placeholder="Telephone (Optional)">
+ </fieldset>
+ <fieldset>
+ <label for="online">Online</label>
+ <input type="radio" name="online-in-person" id="online" value="online">
+ <label for="in-person">In Person</label>
+ <input type="radio" name="online-in-person" id="in-person" value="in-person">
+ </fieldset>
+ <fieldset>
+ <legend>Areas of Interest</legend>
+ <div>
+ <label for="artist">Artist</label>
+ <input type="checkbox" name="area-of-interest" id="artist" value="Artist">
+ </div>
+ <div>
+ <label for="audio-specialist">Audio Specialist</label>
+ <input type="checkbox" name="area-of-interest" id="audio-specialist" value="Audio Specialist">
+ </div>
+ <div>
+ <label for="designer">Designer</label>
+ <input type="checkbox" name="area-of-interest" id="designer" value="Designer">
+ </div>
+ <div>
+ <label for="programmer">Programmer</label>
+ <input type="checkbox" name="area-of-interest" id="programmer" value="Programmer">
+ </div>
+ <div>
+ <label for="writer">Writer</label>
+ <input type="checkbox" name="area-of-interest" id="writer" value="Writer">
+ </div>
+ </fieldset>
+ <button type="submit" class="btn--primary blue">Submit</button>
+ </form>
+ </section>
</main>
<footer>
<!-- Footer -- index.html && about.html && rules.html && location.html -->
<!-- Copyright -->
+ <p><i>Create Against Hate</i> © Robin King 2022</p>
<!-- Sitemap -->
+ <nav id="sitemap" class="navbar" aria-labelledby="Create Against Hate Sitemap">
+ <ul role="menubar">
+ <li role="none">
+ <a href="#" role="menuitem">Home</span></a>
+ </li>
+ <li role="none">
+ <a href="about.html" role="menuitem">About <i>Stop Hate UK</i></a>
+ </li>
+ <li role="none">
+ <a href="rules.html" role="menuitem">Jam Rules</span></a>
+ </li>
+ <li role="none">
+ <a href="location.html" role="menuitem">How to find us</a>
+ </li>
+ </ul>
+ </nav>
<!-- Socials -->
+ <ul id="socials">
+ <li>
+ <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>
+ </li>
+ <li>
+ <a href="https://facebook.com" target="_blank" rel="noopener" title="facebook.com"><span class="icon--fb"></span></a>
+ </li>
+ </ul>
</footer>
</body>
--
GitLab