From 2721e58abd2d0dc3741f04c5993080b9f287504c Mon Sep 17 00:00:00 2001
From: Robin King <robin2.king@live.uwe.ac.uk>
Date: Mon, 20 Mar 2023 15:29:55 +0000
Subject: [PATCH] feat(index.html-&&-styles.css): complete hero section of
homepage and create site buttons
---
index.html | 4 +-
styles.css | 326 ++++++++++++++++++++++++++++++++++++++++++++---------
2 files changed, 273 insertions(+), 57 deletions(-)
diff --git a/index.html b/index.html
index 547f9e3..5b9017c 100644
--- a/index.html
+++ b/index.html
@@ -62,9 +62,7 @@
<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>
+ <img src="assets/img/placeholder-sketches/hero.jpg" alt="Create Against Hate Hero Image">
</section>
<!-- About -->
<section id="home__about">
diff --git a/styles.css b/styles.css
index 56b245e..5768260 100644
--- a/styles.css
+++ b/styles.css
@@ -74,7 +74,7 @@
--accent-purple: #b144c4;
/** Purple background colour for footer **/
- /* USAGE: All pages:footer */
+ /* USAGE: All pages:footer && All pages:main navigation on mobile */
--footer-purple: #1f172c;
}
@@ -136,34 +136,40 @@
}
img {
+ max-width: 100%;
+
/* Creates border present around majority of images */
border: var(--main-dark) solid;
border-width: 0.3rem 0.45rem 0.45rem 0.3rem;
+
+ object-fit: cover;
}
button {
+ border: none;
+
cursor: pointer;
}
/*** Icons ***/
- /** Defined extendable icon class **/
+ /** Define extendable icon class **/
/** Icons created using mask can easily have their colour and size manipulated relative to their label **/
- span[class|="icon"] {
- display: inline-block;
+ span[class|="icon"] {
+ display: inline-block;
- height: 1em;
- width: 1em;
+ height: 1em;
+ width: 1em;
- margin-right: 0.5em;
+ margin-right: 0.5em;
- background-color: #fff;
+ background-color: #fff;
- transform: translateY(15%);
+ transform: translateY(15%);
- -webkit-mask-size: contain;
- mask-size: contain;
- }
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ }
/** Navigation **/
.icon--home {
@@ -203,15 +209,156 @@
mask: url("assets/icons/fbook-logo.svg") no-repeat;
}
+/*** Buttons ***/
+ /** Define extendable btn class **/
+ a[class|="btn"],
+ button[class|="btn"] {
+ position: relative;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ height: 2.5rem;
+ width: 35%;
+ max-width: 14rem;
+ min-width: 8rem;
+
+ margin: 5%;
+
+ color: white;
+ font-size: 1rem;
+ }
+
+ /* Remove any external link icons from btn */
+ a[class|="btn"]::after {
+ mask: none;
+ margin: 0;
+ height: 0;
+ width: 0;
+ }
+
+ /** Main Site Buttons **/
+
+ .btn--primary {
+ box-shadow: 0.25rem 0.25rem 0 white;
+
+ background-color: var(--accent-pink);
+
+ font-family: "Poppins", sans-serif;
+
+ transition: all 0.25s;
+ text-transform: uppercase;
+ }
+
+ .btn--primary:hover {
+ box-shadow: 0 0 0 white;
+ }
+
+ .btn--primary:active {
+ background-color: var(--accent-pink-lighter);
+ }
+
+ /* Button outline on click */
+ .btn--primary::after {
+ content: "";
+ position: absolute;
+
+ transition: all 0.025s;
+ transform: scale(0.85);
+ }
+
+ .btn--primary:active::after {
+ height: 3.5rem;
+ width: 110%;
+ max-width: 15rem;
+ min-width: 9rem;
+ border: 0.25rem solid var(--accent-pink-lighter);
+ border-radius: 0.2rem;
+
+ transform: scale(1);
+ }
+
+ /* Modifiers for blue button */
+ .btn--primary.blue {
+ background-color: var(--accent-blue);
+ box-shadow: 0.25rem 0.25rem 0 var(--main-dark);
+
+ color: var(--main-dark);
+ }
+
+ .btn--primary.blue:hover {
+ box-shadow: 0 0 0 var(--main-dark);
+ }
+
+ .btn--primary.blue:active {
+ background-color: var(--accent-blue-lighter);
+ }
+
+ .btn--primary.blue:active::after {
+ border: 0.25rem solid var(--accent-blue-lighter);
+ }
+
+ /** Twitter Button **/
+ /* Twitter Share Button */
+ .btn--twitter {
+ border-radius: 1.25rem;
+
+ background-color: #1d9bf0;
+ box-shadow: none;
+
+ font-family: "Segoe UI", sans-serif;
+ }
+
+ .btn--twitter:hover {
+ background-color: #62c0ff;
+ }
+
+ .btn--twitter:active {
+ background-color: #1077bb;
+ }
+
+/*** Reusable Styles ***/
+ /** Hero **/
+ /* USAGE: index.html && about.html */
+ .hero {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 2rem;
+
+ min-height: 90vh;
+
+ padding-top: 0;
+ }
+
+ .hero article {
+ display: grid;
+ grid-auto-rows: auto;
+ }
+
+ .hero article > * {
+ display: flex;
+
+ justify-content: space-evenly;
+ }
+
+ .hero > img {
+ height: 100%;
+ }
+
+
/*** Main Navigation Styles ***/
#main-navigation {
- top: -100%;
+ /* This will apply when the js script applies position:sticky on scroll */
+ top: -100%;
display: flex;
justify-content: flex-end;
align-items: center;
+ background-color: var(--main-dark);
+
transition: all .3s;
}
@@ -219,6 +366,8 @@
width: calc(100%/3);
min-width: calc(64em/6);
+ border: none;
+
margin-right: auto;
}
@@ -259,8 +408,6 @@
width: 2.5rem;
- border: none;
-
background-color: transparent;
}
@@ -278,77 +425,144 @@
box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, 0.41);
}
- /** Colours for each page **/
- #home #main-navigation,
- #rules #main-navigation {
- background-color: var(--main-dark);
+/*** Homepage Styles ***/
+ /** Hero Section **/
+ #home .hero {
+ padding-right: 0;
+ padding-bottom: 0;
+
+ text-align: center;
+ font-size: 2rem;
}
- #about #main-navigation {
- background-color: var(--section-purple);
+ #home .hero img {
+ border: none;
}
- #location #main-navigation {
- background-color: var(--section-pink);
+ #home .hero article {
+ display: grid;
+ grid-gap: 1em;
+
+ color: var(--accent-purple);
+ }
+
+ #home .hero article p {
+ margin: 0;
+ }
+
+ #home .hero article > img {
+ max-width: 25rem;
+ width: 100%;
+
+ margin: 0 auto;
}
+ #home .hero article div:last-of-type {
+ flex-wrap: wrap;
+ gap: 1em;
+
+ padding-bottom: 2rem;
+
+ color: var(--accent-blue);
+ font-size: 1.2rem;
+ }
+
+ #home .hero article div:last-of-type img {
+ width: 50%;
+ min-width: 12.5rem;
+
+ background-color: white;
+
+ object-fit: initial;
+ }
+
+
/* 64em == 1024px */
@media only screen and (min-width: 64em) {
/*** Global Styles ***/
- section, header, footer {
+ section, header, footer, #home .hero {
/* Restrict content of website to max 64em */
padding-inline: calc((100vw - 64rem + 2rem) / 2);
}
}
/* 37.5625em == 601px */
-/* 22.5625 == 361px */
-/* Media query just for tablet navigation to minimise edits needed for mobile navigation */
-@media only screen and (max-width: 37.5625em) and (min-width: 22.5625em) {
- #main-navigation nav {
- position: fixed;
- top: 0;
- left: -100vw;
- z-index: 2;
+@media only screen and (max-width: 37.5625em) {
+ /*** Reusable Styles -- Tablet ***/
+ /** Hero **/
+ /* USAGE: index.html && about.html */
+ .hero {
+ grid-template-columns: 1fr;
+ }
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- align-items: center;
+ /*** Main Navigation Styles ***/
+ #main-navigation nav {
+ position: fixed;
+ top: 0;
+ left: -100vw;
+ z-index: 2;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
- visibility: hidden;
+ visibility: hidden;
- width: 100vw;
- height: 100vh;
+ width: 100vw;
+ height: 100vh;
- background-color: inherit;
+ background-color: inherit;
- transition: all .3s;
- }
+ transition: all .3s;
+ }
- #main-navigation.show nav {
- left: 0;
+ #main-navigation.show nav {
+ left: 0;
- visibility: initial;
- }
+ visibility: initial;
+ }
- #main-navigation .navbar {
- flex-direction: column;
+ #main-navigation .navbar {
+ flex-direction: column;
- font-size: 1.75rem;
- }
+ font-size: 1.75rem;
+ }
- .hamburger {
- z-index: 3;
- display: initial;
- }
+ .hamburger {
+ z-index: 3;
+ display: initial;
+ }
+ /*** Homepage Styles ***/
+ /** Hero Section **/
+ #home .hero {
+ padding: 2rem;
+ }
+
+ #home .hero > img {
+ display: none;
+ }
+
+ #home .hero article div:last-of-type {
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-items: center;
+
+ padding-bottom: 0;
+ }
}
/* 22.5em == 360px */
@media only screen and (max-width: 22.5em) {
/*** Global Styles -- Mobile ***/
/*** Main Navigation Styles ***/
+
+ /** Remove styles set for tablet **/
+ #main-navigation nav {
+ all: unset;
+ }
+
#main-navigation nav {
position: fixed;
bottom: 0;
@@ -415,4 +629,8 @@
.hideable-text {
display: none;
}
+
+ .hamburger {
+ display: none;
+ }
}
\ No newline at end of file
--
GitLab