Skip to content
Snippets Groups Projects
Commit 971efd31 authored by Robin King's avatar Robin King
Browse files

feat(index.html): complete markup for webpage

parent 97839db2
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 123 additions and 9 deletions
index.html
+ 123
− 9
View file @ 971efd31
......@@ -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> &copy; 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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment