From 5c38694c47bfe081d6becd11d5cc65938142cd9a Mon Sep 17 00:00:00 2001
From: robee <robin.code22@gmail.com>
Date: Sat, 22 Apr 2023 01:41:40 +0100
Subject: [PATCH] feat(location.html): complete find us page
---
about.html | 4 +--
location.html | 54 ++++++++++++++++++---------------
styles.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++-----
3 files changed, 108 insertions(+), 34 deletions(-)
diff --git a/about.html b/about.html
index 59875e1..f251af8 100644
--- a/about.html
+++ b/about.html
@@ -67,7 +67,7 @@
<figcaption><i>Photo by Jason Leung on <a href="https://unsplash.com/photos/WVBGF0NNBBE" title="Stop Asian Hate Protest on Unsplash" target="_blank" rel="noopener">Unsplash</a></i></figcaption>
</figure>
</section>
- <!-- About -- uses class="text-section" -- about.html && rules.html && location.html -->
+ <!-- About -->
<section class="text-section">
<p><i>Stop Hate UK</i> was originally established in direct response to the murder of Stephen Lawrence.</p>
@@ -84,7 +84,7 @@
</section>
</main>
<footer>
- <!-- Footer -- index.html && about.html && rules.html && location.html -->
+ <!-- Footer -->
<!-- Copyright -->
<p><i>Create Against Hate</i> © Robin King 2022</p>
<!-- Sitemap -->
diff --git a/location.html b/location.html
index 21d0b68..89e9ec3 100644
--- a/location.html
+++ b/location.html
@@ -48,31 +48,35 @@
</button>
</header>
<main>
- <!-- Map -->
- <iframe id="googleMap" title="Google Maps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2486.5721314652883!2d-2.6008121233674015!3d51.447651215066415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48718dd658d5706f%3A0x767f1d6261554e46!2sM%20Shed!5e0!3m2!1sen!2suk!4v1682085581070!5m2!1sen!2suk" referrerpolicy="no-referrer-when-downgrade"></iframe>
- <!-- Directions, uses class="text-section", about.html && rules.html && location.html -->
- <section class="text-section">
- <article class="link--pink">
- <h1>Directions</h1>
- <div class="tablist">
- <ul role="tablist" aria-orientation="vertical">
- <li><button role="tab" aria-selected="true"><span class="icon--walking"></span>Walking</button></li>
- <li><button role="tab"><span class="icon--biking"></span>Biking</button></li>
- <li><button role="tab"><span class="icon--boat"></span>Boat</button></li>
- <li><button role="tab"><span class="icon--bus"></span>Bus</button></li>
- <li><button role="tab"><span class="icon--car"></span>Car</button></li>
- <li><button role="tab"><span class="icon--coach"></span>Coach</button></li>
- <li><button role="tab"><span class="icon--train"></span>Train</button></li>
- </ul>
- <div class="tablist--content">
- <p>The M Shed is located on the harbourside, a five to 10 minute walk from the city centre or a 20 minute walk from Bristol Temple Meads train station.</p>
- </div>
- </div>
- </article>
- </section>
- <section>
- <p>Too far to travel? Not a problem! Why not join us on Zoom instead? <a class="btn--primary" href="index.html#home__sign-up"> Sign Up Now!</a></p>
- </section>
+ <div>
+ <!-- Map -->
+ <iframe id="googleMap" title="Google Maps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2486.5721314652883!2d-2.6008121233674015!3d51.447651215066415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48718dd658d5706f%3A0x767f1d6261554e46!2sM%20Shed!5e0!3m2!1sen!2suk!4v1682085581070!5m2!1sen!2suk" referrerpolicy="no-referrer-when-downgrade"></iframe>
+ <!-- Directions -->
+ <section class="text-section text--white">
+ <article class="link--pink">
+ <h1>Directions</h1>
+ <div class="tablist text--dark">
+ <ul role="tablist" aria-orientation="vertical">
+ <li><button role="tab" aria-selected="true"><span class="icon--walking"></span>Walking</button></li>
+ <li><button role="tab"><span class="icon--biking"></span>Biking</button></li>
+ <li><button role="tab"><span class="icon--boat"></span>Boat</button></li>
+ <li><button role="tab"><span class="icon--bus"></span>Bus</button></li>
+ <li><button role="tab"><span class="icon--car"></span>Car</button></li>
+ <li><button role="tab"><span class="icon--coach"></span>Coach</button></li>
+ <li><button role="tab"><span class="icon--train"></span>Train</button></li>
+ </ul>
+ <div class="tablist--content">
+ <p>The M Shed is located on the harbourside, a five to 10 minute walk from the city centre or a 20 minute walk from Bristol Temple Meads train station.</p>
+ </div>
+ </div>
+ <p class="link--blue">Source: <a href="bristolmuseums.org.uk/m-shed/plan-your-visit/getting-here" target="_blank" rel="noopener">bristolmuseums.org.uk/m-shed/plan-your-visit/getting-here</a>.</p>
+ </article>
+ </section>
+ <section class="flex ai-centre">
+ <p>Too far to travel? Not a problem! Why not join us on Zoom instead?</p>
+ <p><a class="btn--primary blue" href="index.html#home__sign-up"> Sign Up Now!</a></p>
+ </section>
+ </div>
</main>
<footer>
<!-- Footer, index.html && about.html && rules.html && location.html -->
diff --git a/styles.css b/styles.css
index cd6316b..9472d5e 100644
--- a/styles.css
+++ b/styles.css
@@ -111,6 +111,7 @@
/** These are colours used for the main sections of the website **/
--section-blue: #194263;
+ --section-light-blue: #235d8b;
--section-pink: #fb5aba;
--section-baby-pink: #fd98d4;
--section-purple: #6e539a;
@@ -368,7 +369,7 @@
display: inline-block;
- margin-left: .4em;
+ margin-left: .2em;
height: .5em;
width: .5em;
@@ -672,6 +673,8 @@
/** Tablist **/
.tablist {
display: flex;
+
+ transition: all 1s ease;
}
.tablist > ul li button {
@@ -1104,12 +1107,45 @@
width: 100%;
height: 90vh;
- border: .15rem 0 solid;
- border-color: var(--main-dark);
+ border: .15rem solid var(--main-dark);
+ border-width: .15rem 0;
+
+ vertical-align: bottom;
}
- #location main {
+ #location main > div {
position: relative;
+
+ width: 100%;
+ }
+
+ #location main > div > section:last-of-type {
+ position: absolute;
+ bottom: 3em;
+ left: 50%;
+ transform: translateX(-50%);
+
+ justify-content: flex-end;
+
+ padding: 1em 2em;
+
+ border: .1rem solid rgba(255, 255, 255, 0.2);
+ border-radius: 1rem;
+
+ background-color: hsla(255, 255, 255, .7);
+
+ backdrop-filter: blur(.5rem);
+ }
+
+ #location main > div > section:last-of-type p {
+ margin: 0;
+
+ font-weight: bold;
+ }
+
+ #location main > div > section:last-of-type p a {
+ margin: 0;
+ margin-left: 1em;
}
/** Style Directions **/
@@ -1117,17 +1153,22 @@
#location .text-section {
/* Overlay the map */
position: absolute;
- top: 30%;
+ top: 20%;
left: 2rem;
padding: 1rem;
- width: 70%;
+ width: 60%;
max-width: 40rem;
border: var(--main-dark) solid;
border-width: .20rem .3rem .3rem .20rem;
- background-color: var(--section-pink);
+ background-color: var(--section-light-blue);
+ }
+
+ #location .text-section > article > p {
+ margin-top: 1em;
+ margin-bottom: 0;
}
@@ -1300,6 +1341,35 @@
text-align: center;
}
+
+ /** Find Us Page Styles **/
+ #location .text-section,
+ #location main > div > section:last-of-type {
+ position: initial;
+ width: initial;
+ max-width: initial;
+
+ border: 0 var(--main-dark) solid;
+ }
+
+ #location main > div > section:last-of-type {
+ flex-wrap: wrap;
+ gap: 1em;
+ justify-content: center;
+
+ transform: initial;
+
+ border-radius: 0;
+ border-bottom-width: .15rem;
+
+ background-color: var(--section-light-blue);
+
+ color: white;
+
+ text-align: center;
+
+ backdrop-filter: initial;
+ }
}
--
GitLab