diff --git a/assets/img/placeholder-sketches/PXL_20221214_170231167.jpg b/assets/img/placeholder-sketches/PXL_20221214_170231167.jpg
deleted file mode 100644
index 3a02171e3d766ec79f781047e5831671c29d810b..0000000000000000000000000000000000000000
Binary files a/assets/img/placeholder-sketches/PXL_20221214_170231167.jpg and /dev/null differ
diff --git a/assets/img/placeholder-sketches/bullet-hell.jpg b/assets/img/placeholder-sketches/bullet-hell.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..901d1654d7ec4cf017a461ce8c1f6b4f0ad45b02
Binary files /dev/null and b/assets/img/placeholder-sketches/bullet-hell.jpg differ
diff --git a/assets/img/placeholder-sketches/fighter.jpg b/assets/img/placeholder-sketches/fighter.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..791b7b8b87a3b8ece279b73fe3ff7262f9fcb398
Binary files /dev/null and b/assets/img/placeholder-sketches/fighter.jpg differ
diff --git a/assets/img/placeholder-sketches/mystery.jpg b/assets/img/placeholder-sketches/mystery.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6749e0f4fcd4299b94fb2f4101cf60a7eeab7ce5
Binary files /dev/null and b/assets/img/placeholder-sketches/mystery.jpg differ
diff --git a/assets/img/placeholder-sketches/PXL_20221214_170202269.jpg b/assets/img/placeholder-sketches/romance.jpg
similarity index 100%
rename from assets/img/placeholder-sketches/PXL_20221214_170202269.jpg
rename to assets/img/placeholder-sketches/romance.jpg
diff --git a/assets/img/placeholder-sketches/rpg.jpg b/assets/img/placeholder-sketches/rpg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4d1ad8890fa61a972ce928981eff654a0ef9e4dc
Binary files /dev/null and b/assets/img/placeholder-sketches/rpg.jpg differ
diff --git a/index.html b/index.html
index c732a728935ccd90529e7840b302751b09d4ac92..dc177c0e45446cc95652d3c475bace0114570ca4 100644
--- a/index.html
+++ b/index.html
@@ -102,7 +102,7 @@
</section>
<!-- Sign Up Form -->
<section id="home__sign-up">
- <form action="" method="post" autocomplete="on">
+ <form action="./index.html" method="post" autocomplete="on">
<h2>Sign Up Now</h2>
<fieldset class="personal-details">
<input type="text" placeholder="First Name (Required)" required>
diff --git a/rules.html b/rules.html
index ebdb844ffad0b9ca10280df8899a99b30ae6a1e8..85e55c7842bd81214a8d14e3b6cb0da5d785f383 100644
--- a/rules.html
+++ b/rules.html
@@ -50,7 +50,7 @@
<!-- Rules -- uses class="text-section" -- about.html && rules.html && location.html -->
<section id="rules__jam-rules" class="text-section">
<h1>Jam Rules</h1>
- <p>We want all our participants to have a great time, make new friends and finish their game knowing they've contributed to an amazing cause in <i>Stop Hate UK</i>!</p>
+ <p>We want all our participants to have a great time, make new friends and finish their game knowing they've contributed to an amazing cause in <i>Stop Hate UK</i>!</p>
<p>To make this jam a success, all participants must comply with the following rules:</p>
<ol>
<li>
@@ -78,8 +78,50 @@
</section>
<!-- Ideas -- uses class="text-section" -- about.html && rules.html && location.html -->
<section id="rules__get-help" class="text-section">
+ <h2>Help! I literally have no ideas!</h2>
+ <p>We get it! Someone told you this jam's screaming your name, but you're currently wondering <i>"what on Earth <b>is</b> a manga, anyway?"</i> Or maybe it's already August 26 and every member of your team was hoping someone else would have some ideas. The clock's ticking and you're starting to panic!</p>
+ <p>Worry no more! We've created a list of suggestions which all participants are free to use.</p>
<!-- Slideshow -->
-
+ <div role="region" class="carousel" aria-roledescription="carousel" aria-label="Game jam suggestions">
+ <button type="button" class="carousel-button__left">
+ ⮜
+ </button>
+ <button type="button" class="carousel-button__right">
+ ⮞
+ </button>
+ <div class="carousel__inner">
+ <div role="group" class="slide" aria-roledescription="slide" aria-label="1 of 5">
+ <img src="assets/img/placeholder-sketches/fighter.jpg" alt="2D fighting game illustration">
+ <div class="slide__text-content">
+ <p>You could create a thrilling 2D fighting game like <a href="https://www.streetfighter.com/en/" target="_blank" rel="noopener">Street Fighter</a></p>
+ </div>
+ </div>
+ <div role="group" class="slide" aria-roledescription="slide" aria-label="2 of 5">
+ <img src="assets/img/placeholder-sketches/bullet-hell.jpg" alt="Bullet hell game illustration">
+ <div class="slide__text-content">
+ <p>Get moving and make an adrenaline-boosting bullet hell game like <a href="https://en.wikipedia.org/wiki/Touhou_Project" target="_blank" rel="noopener">Touhou</a></p>
+ </div>
+ </div>
+ <div role="group" class="slide" aria-roledescription="slide" aria-label="3 of 5">
+ <img src="assets/img/placeholder-sketches/mystery.jpg" alt="Mystery game illustration">
+ <div class="slide__text-content">
+ <p>Grip your audience with a mind-bending mystery game like <a href="https://www.ace-attorney.com/" target="_blank" rel="noopener">Ace Attorney</a></p>
+ </div>
+ </div>
+ <div role="group" class="slide" aria-roledescription="slide" aria-label="4 of 5">
+ <img src="assets/img/placeholder-sketches/romance.jpg" alt="Otome game illustration">
+ <div class="slide__text-content">
+ <p>Weave a tale of love with a heart-racing otome game like <a href="https://en.wikipedia.org/wiki/Mystic_Messenger" target="_blank" rel="noopener">Mystic Messenger</a></p>
+ </div>
+ </div>
+ <div role="group" class="slide" aria-roledescription="slide" aria-label="5 of 5">
+ <img src="assets/img/placeholder-sketches/rpg.jpg" alt="RPG illustration">
+ <div class="slide__text-content">
+ <p>Set off on an adventure with an old-school RPG like <a href="https://en.wikipedia.org/wiki/Live_A_Live" target="_blank" rel="noopener">Live A Live</a></p>
+ </div>
+ </div>
+ </div>
+ </div>
</section>
</main>
<footer>
diff --git a/scripts.js b/scripts.js
index cf025cc6ab4f4403c43a7ad427377dc3beac8afa..b8c5374f24572294d21241fbd9719fc42c6b01b5 100644
--- a/scripts.js
+++ b/scripts.js
@@ -70,4 +70,49 @@ document.addEventListener('scroll', () => {
if (window.innerWidth > 601) {
desktopNavControls();
}
-})
\ No newline at end of file
+});
+
+/********************************
+ * [Code to control slideshow.] *
+*********************************/
+
+const slides = Array.from(document.querySelectorAll(".slide"));
+const carousel = document.querySelector(".carousel");
+const lControl = document.querySelector(".carousel-button__left");
+const rControl = document.querySelector(".carousel-button__right");
+
+// Ensures first slide is visible on page load
+slides[0].scrollIntoView();
+
+/**
+ * [Scroll slide to specific index.]
+**/
+
+function scrollSlide(slideNumber) {
+ slides[slideNumber].scrollIntoView({
+ behavior: 'smooth'
+ });
+}
+
+/**
+ * [Reset scroll if window resized.]
+**/
+
+window.addEventListener('resize', () => {
+ scrollSlide(0);
+})
+
+let currSlide = 0;
+
+// Move slides to the left
+lControl.addEventListener('click', () => {
+ currSlide > 0 ? currSlide-- : currSlide = slides.length - 1;
+ scrollSlide(currSlide);
+});
+
+
+// Move slides to the right
+rControl.addEventListener('click', () => {
+ currSlide < slides.length - 1 ? currSlide++ : currSlide = 0;
+ scrollSlide(currSlide);
+});
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 794343dadfafa6a30fe733be143b5d20e8df6810..92e5e2053dda4376d922506ac7015134f612de08 100644
--- a/styles.css
+++ b/styles.css
@@ -135,18 +135,19 @@
margin-bottom: 1em;
}
- a {
- color: var(--accent-blue);
- text-decoration: none;
- }
+ /** Link Styling **/
+ a {
+ color: var(--accent-blue);
+ text-decoration: none;
+ }
- #home__about a, #locations__directions a {
- color: var(--accent-baby-pink);
- }
+ #home__about a, #locations__directions a {
+ color: var(--accent-baby-pink);
+ }
- a:visited, #home__about a:visited, #locations__directions a:visited {
- color: var(--accent-baby-blue);
- }
+ a:visited, #home__about a:visited, #locations__directions a:visited {
+ color: var(--accent-baby-blue);
+ }
ul {
list-style-type: none;
@@ -250,13 +251,13 @@
transform: translateY(-50%);
}
- /* Remove any external link icons from btns and social icons in footer */
- a[class|="btn"]::after, #socials a::after {
- mask: none;
- margin: 0;
- height: 0;
- width: 0;
- }
+ /* Remove any external link icons from btns and social icons in footer */
+ a[class|="btn"]::after, #socials a::after {
+ mask: none;
+ margin: 0;
+ height: 0;
+ width: 0;
+ }
#home__about a[target="_blank"]::after, #locations__directions a[target="_blank"]::after {
background-color: var(--accent-baby-pink);
@@ -487,7 +488,7 @@
/** Create the bars of the hamburger button **/
span[class|="hamburger"] {
display: block;
-
+
width: 100%;
height: .3rem;
@@ -861,6 +862,104 @@
#rules__jam-rules .btn--primary {
margin: 2rem auto 0 auto;
}
+
+ /** Help Section **/
+ #rules__get-help {
+ background-color: var(--section-baby-pink);
+ }
+
+
+ /* Slideshow */
+ .carousel {
+ position: relative;
+
+ margin: auto;
+
+ border: var(--main-dark) solid;
+ border-width: .25rem .35rem .35rem .25rem;
+
+ width: 60vw;
+ height: 50vh;
+
+ max-width: 80%;
+ }
+
+ .carousel__inner {
+ display: flex;
+
+ height: 100%;
+
+ overflow: hidden;
+ }
+
+ /* Button Controls */
+ button[class^="carousel-button"] {
+ position: absolute;
+
+ background-color: transparent;
+ font-size: 3rem;
+
+ margin: .25em;
+
+ top: 50%;
+ z-index: 2;
+
+ transform: translateY(-50%);
+ }
+
+ .carousel-button__right {
+ right: 0;
+ }
+
+ .slide {
+ display: flex;
+
+ flex-shrink: 0;
+
+ width: 100%;
+ height: 100%;
+ }
+
+ .slide img {
+ object-position: 0% 0%;
+ border-width: 0 .25rem 0 0;
+
+ width: 60%;
+ min-width: 0;
+ height: 100%;
+ }
+
+ .slide__text-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ padding: 5%;
+ padding-right: 3rem;
+
+ width: 40%;
+ height: 100%;
+
+ background-color: white;
+ }
+
+ /* The blue colour is not very visible on the white background */
+ .slide__text-content a {
+ color: var(--accent-pink);
+ }
+
+ .slide__text-content a::after {
+ background-color: var(--accent-pink);
+ }
+
+ .slide__text-content a:visited {
+ color: var(--accent-baby-pink);
+ }
+
+ .slide__text-content a:visited::after {
+ background-color: var(--accent-baby-pink);
+ }
+
/* 64em == 1024px */
@media only screen and (min-width: 64em) {
/*** Global Styles ***/
@@ -872,6 +971,9 @@
.text-section {
padding-inline: calc((100vw - 64rem + 4rem) / 2);
}
+
+
+ /* */
}
/* 37.5625em == 601px */
@@ -991,6 +1093,36 @@
.areas-of-interest ul {
grid-template-columns: repeat(2, auto);
}
+
+ /*** Rules Page Styling ***/
+ .carousel {
+ width: 80vw;
+ min-width: 100%;
+ height: auto;
+ }
+
+ button[class^="carousel-button"] {
+ top: 65%;
+ }
+
+ .slide {
+ flex-direction: column;
+ }
+
+ .slide img {
+ width: 100%;
+ height: 10rem;
+
+ border-width: 0 0 .25rem 0;
+ }
+
+ .slide__text-content {
+ padding-inline: 3.5rem;
+ width: 100%;
+ height: 10em;
+
+ text-align: center;
+ }
}
/* 22.5em == 360px */