diff --git a/public/index.html b/public/index.html index 6953fab..8898912 100644 --- a/public/index.html +++ b/public/index.html @@ -33,7 +33,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Schulich Off-Road + UCalgary Baja diff --git a/src/Footer/Ender.css b/src/Footer/Ender.css index 90b6db3..650a9ab 100644 --- a/src/Footer/Ender.css +++ b/src/Footer/Ender.css @@ -31,3 +31,7 @@ list-style-type: none; padding-right: 2%; } + +#ender a img { + height: 7svh; +} diff --git a/src/Footer/Ender.js b/src/Footer/Ender.js index e0a9cc8..d45ada0 100644 --- a/src/Footer/Ender.js +++ b/src/Footer/Ender.js @@ -1,4 +1,8 @@ import "./Ender.css"; +import linkedInLogo from "./InBug-White.png"; +import instagramLogo from "./instagram-white-icon.png"; +import emailLogo from "./email-white.png"; +import authors from "./humans.txt"; /** * @param {null} null - requires onthing * @returns {JSX.Element} Page - HTML tags and JS functionality @@ -6,23 +10,55 @@ import "./Ender.css"; * @author Brock * @todo add who helped developed the site and finalize css */ -const Ender = () => { +export default function Ender() { + const date = new Date(); + return ( ); -}; - -export default Ender; +} diff --git a/src/Footer/InBug-White.png b/src/Footer/InBug-White.png new file mode 100644 index 0000000..627f6b5 Binary files /dev/null and b/src/Footer/InBug-White.png differ diff --git a/src/Footer/email-white.png b/src/Footer/email-white.png new file mode 100644 index 0000000..a6d8708 Binary files /dev/null and b/src/Footer/email-white.png differ diff --git a/src/Footer/humans.txt b/src/Footer/humans.txt new file mode 100644 index 0000000..950c87a --- /dev/null +++ b/src/Footer/humans.txt @@ -0,0 +1,27 @@ +/* TEAM */ + Lead:Brock + Contact: hello [at] humanstxt.org + Github: darkicewolf50 + + UI developer: Maria Macias + Twitter: @maria_ux + + One eyed illustrator: Carlos Mañas + Twitter: @oneeyedman + + Standard Man: Abel Cabans + Twitter: @abelcabans + + Web designer: Abel Sutilo + Twitter: @abelsutilo + From:Sevilla, Andalucia, Spain + +/* THANKS */ + + + +/* SITE */ + Last update:2025/02/04 + Language: English + Doctype:HTML5 + IDE: VSCode \ No newline at end of file diff --git a/src/Footer/instagram-white-icon.png b/src/Footer/instagram-white-icon.png new file mode 100644 index 0000000..fe326bf Binary files /dev/null and b/src/Footer/instagram-white-icon.png differ diff --git a/src/Header/Header.css b/src/Header/Header.css index 5ee3dd2..79c3e68 100644 --- a/src/Header/Header.css +++ b/src/Header/Header.css @@ -4,10 +4,16 @@ header { margin: 1%; margin-top: 1svh; padding-right: 0.5svw; + /* width: 100%; */ align-items: center; justify-content: space-between; - background-color: antiquewhite; + background-color: #1f1f1f; + /* position: absolute; */ + z-index: 1; + top: 0; + left: 0; + right: 0; } header a { @@ -38,37 +44,43 @@ header div { #logo { height: 10svh; + /* width: 10svw; */ padding: 0.15rem; + margin-left: 3svw; } /* naviagation section */ -/* determines spacing and total amount of page it takes up*/ -nav { - width: 50%; +nav ul { + display: flex; + flex-direction: row; + justify-content: space-between; + list-style: none; + margin: 0px; + padding: 0px; + column-gap: 2svw; } nav a { text-decoration: none; color: inherit; cursor: pointer; -} + background-color: #1f1f1f; + color: whitesmoke; -nav a li { - background-color: white; - padding: 0.5rem; - /* border-left: solid 2px gray; */ + font-size: larger; + + /* border-left: solid 2px white; */ } /* removes first divider */ /* can be removed if no borders from above */ -#FirstNav { +nav a:first-child { border-left: none; } nav a li:hover { - background-color: gray; + color: #a80029; } - nav ul { display: flex; flex-direction: row; @@ -79,8 +91,13 @@ nav ul { z-index: 1; } -creates dwon downs -/* */ + +/* correct colour of links in dark mode */ +.darkmode nav a li::hover { + filter: hue-rotate(180deg); +} + +/* creates drop downs */ /* makes it so that the tags look the same whist having removing browser error */ .DropDownHeader { display: inline-block; @@ -120,12 +137,49 @@ creates dwon downs width: 100%; display: flex; - /* bebug border, use margin to advantage, may cause error later */ - /* border-bottom: solid 1px black; */ + position: relative; + z-index: 0; + top: 0; + left: 0; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + /* -webkit-mask-image: linear-gradient( + to bottom, + black var(--fade-starts-at-bottom), + transparent + ); + mask-image: linear-gradient( + to bottom, + black var(--fade-starts-at-bottom), + transparent + ); */ } -#BannerHeader img { +#BannerHeader::after { + content: ""; position: absolute; + inset: 0; + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0) var(--fade-starts-at-bottom, 70%), + whitesmoke 100% + ); + pointer-events: none; + z-index: 1; +} + +:root { + --fade-starts-at-bottom: 90%; + --fade-starts-at-top: 96%; + --banner-text-background: rgba(31, 31, 31, 0.8); + --banner-text-padding: 2svh 2svw; + --banner-text-rounding: 1rem; +} + +/* #BannerHeader img { + position: relative; height: 100svh; width: inherit; top: 0; @@ -133,36 +187,41 @@ creates dwon downs background-size: cover; background-position: center; - z-index: -1; -} + z-index: -2; +} */ /* used to postiion title and sub title */ #BannerHeader div { - margin-top: 15%; + margin-top: 40svh; + padding-left: 60svw; } #BannerHeader h1 { display: flex; width: fit-content; + margin: 0px; - margin-left: 3svw; - - font-size: xx-large; + font-size: 80px; /* todo make larger */ font-weight: normal; - background-color: white; + color: white; + background-color: var(--banner-text-background); + padding: var(--banner-text-padding); + border-radius: var(--banner-text-rounding); + font-weight: bolder; } #BannerHeader h2 { display: flex; width: fit-content; - margin-left: 3svw; - font-size: xx-large; font-weight: normal; - background-color: white; + color: white; + background-color: var(--banner-text-background); + padding: var(--banner-text-padding); + border-radius: var(--banner-text-rounding); } /* for dark mode */ diff --git a/src/Header/Header.js b/src/Header/Header.js index efc1812..3d0d575 100644 --- a/src/Header/Header.js +++ b/src/Header/Header.js @@ -3,7 +3,7 @@ import lightDark from "./light-dark.webp"; import { Outlet, Link } from "react-router-dom"; import "./Header.css"; import Ender from "../Footer/Ender"; -import { useEffect, useState } from "react"; +import { useState } from "react"; /** * @param {null} nothing - Takes in nothing @@ -17,11 +17,7 @@ export default function Header() { titleText: "UCalgary Baja", subtitleText: "Hello", imgUrl: "https://picsum.photos/200", - imgAlt: "Lorem picsum", - }); - - useEffect(() => { - HeaderBannerHeight(); + headerPostion: "absolute", }); /** @@ -53,36 +49,15 @@ export default function Header() { } }); - /** - * @param {null} nothing - This takes in nothing - * @returns {null} nothing - This returns nothing - * @description This makes it so that the banner will always be 100% of the page at the top - * @author Brock - */ - const HeaderBannerHeight = () => { - if (bannerInfo.titleText === "" && bannerInfo.imgUrl === "") { - // return early to avoid error when no banner is desired - return; - } - const headerTop = document.getElementsByTagName("header")[0]; - const headerTopStyle = getComputedStyle(headerTop); - const headerTopInnerHeight = headerTop.offsetHeight; - // 2 is used to align bottom of div with img - const headerTopMarginTop = parseFloat(headerTopStyle.marginTop) * 2; - const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom); - - const headerTopTotalHeight = - headerTopInnerHeight + headerTopMarginHeight + headerTopMarginTop; - - const HomeBannerTop = document.getElementById("BannerHeader"); - - // 1svh is to gget the div close enough to the image - HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px)`; - }; - return ( <> -
+
    -
  • Home
    • +
  • HOME
    • + + +
  • ABOUT
    • + + +
  • OUR VEHICLES
    • -
  • About
    • - - -
  • Team
    • - - -
  • History
    • +
  • HISTORY
    • -
  • Sponsors
    • +
  • SPONSORS
    • {/*
  • Become a Sponsor
    • @@ -141,7 +116,7 @@ export default function Header() {
*/} -
  • Contact Us
    • +
  • CONTACT US
    • @@ -158,17 +133,16 @@ export default function Header() { {bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? ( <> ) : ( -
    - {bannerInfo.imgAlt} -
    -

    {bannerInfo.titleText}

    -

    {bannerInfo.subtitleText}

    + <> +
    +
    +

    {bannerInfo.titleText}

    +

    {bannerInfo.subtitleText}

    +
    -
    + )} diff --git a/src/Home/Home.jsx b/src/Home/Home.jsx index 3f21715..a0c4d5c 100644 --- a/src/Home/Home.jsx +++ b/src/Home/Home.jsx @@ -13,9 +13,9 @@ export default function Home() { <>
    diff --git a/src/index.js b/src/index.js index f5c9ec4..393b81f 100644 --- a/src/index.js +++ b/src/index.js @@ -12,6 +12,7 @@ import Gallery from "./Gallery/Gallery"; import "./index.css"; import MockPage from "./MockDB/MockPage"; import Home from "./Home/Home"; +import Home from "./Home/Home"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(