diff --git a/Dockerfile b/Dockerfile index 191fcb2..82b4633 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,5 @@ # Build Stage -FROM node:latest as build-stage +FROM node:latest AS build-stage WORKDIR /app diff --git a/README.md b/README.md index 58beeac..0b09eb1 100644 --- a/README.md +++ b/README.md @@ -1,70 +1 @@ -# Getting Started with Create React App - -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - -## Available Scripts - -In the project directory, you can run: - -### `npm start` - -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. - -The page will reload when you make changes.\ -You may also see any lint errors in the console. - -### `npm test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can't go back!** - -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. - -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) - -### Analyzing the Bundle Size - -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) - -### Making a Progressive Web App - -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) - -### Advanced Configuration - -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) - -### Deployment - -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) - -### `npm run build` fails to minify - -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) +# vBytes Website \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..703898e 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index 6917134..56aa126 100644 --- a/public/index.html +++ b/public/index.html @@ -7,9 +7,9 @@ - + - React App + vBytes Website diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..3f596dc 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "vBytes Website", + "name": "", "icons": [ { "src": "favicon.ico", diff --git a/public/vbytes-logo.png b/public/vbytes-logo.png new file mode 100644 index 0000000..703898e Binary files /dev/null and b/public/vbytes-logo.png differ diff --git a/src/App.js b/src/App.js index c589647..71f8446 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import AboutSection from './blocks/AboutSection'; import Glow from './components/Glow'; import InventorySection from './blocks/InventorySection'; import MemberSection from './blocks/MemberSection'; +import PartnersSection from './blocks/PartnersSection'; function App() { const [opacity, setOpacity] = useState(1); @@ -44,6 +45,7 @@ function App() { +
diff --git a/src/assets/img/LanRoom.jpg b/src/assets/img/LanRoom.jpg new file mode 100644 index 0000000..e89556e Binary files /dev/null and b/src/assets/img/LanRoom.jpg differ diff --git a/src/assets/img/lan.jpg b/src/assets/img/lan.jpg deleted file mode 100644 index 287f0f2..0000000 Binary files a/src/assets/img/lan.jpg and /dev/null differ diff --git a/src/blocks/AboutSection.jsx b/src/blocks/AboutSection.jsx index 85f24f9..69fea80 100644 --- a/src/blocks/AboutSection.jsx +++ b/src/blocks/AboutSection.jsx @@ -1,5 +1,6 @@ import Timer from '../components/Timer'; import {useEffect, useState} from 'react'; +import SpinnerImage from '../components/SpinnerImage'; const AboutSection = () => { const [opacity, setOpacity] = useState(0); @@ -22,7 +23,7 @@ const AboutSection = () => { }, []) return ( -
+
@@ -39,15 +40,7 @@ const AboutSection = () => {
  • Aktiviteter på mötesplatsen
    • -
    -
    -
    -
    -
    -
    -
    -
    -
    +

    Våra återkommande aktiviteter

    @@ -59,8 +52,8 @@ const AboutSection = () => {

    LAN

    -

    24 timmar LAN-partys sker två gånger per år. Under LAN:et så anordnas det olika former av turneringar och tävlingar. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    +

    24 timmar LAN-partys sker två gånger per år. Under LAN:et så anordnas det olika former av turneringar och tävlingar.

    +

    LANet har funnits i drygt 10 år och bruka samla runt 100 deltagare.

    Nästa LAN

    diff --git a/src/blocks/Footer.jsx b/src/blocks/Footer.jsx index 28dcb4a..00005f8 100644 --- a/src/blocks/Footer.jsx +++ b/src/blocks/Footer.jsx @@ -1,31 +1,29 @@ import Facebook from "../assets/icon/facebook.svg"; import Discord from "../assets/icon/discord.svg"; import Mail from "../assets/icon/mail.svg"; + const Footer = () => { - return ( -
    -
    -
    -

    vBytes

    -

    vBytes står för Viskaforsbygdens Teknik- Elektronik och Spelförening.

    -

    Vi vill vara en mötesplats för spel och teknikintresserade i Viskaforsbygden.

    - -
    - - - +
    +
    +
    +

    vBytes

    +

    vBytes står för Viskaforsbygdens Teknik- Elektronik och Spelförening.

    +

    Vi vill vara en mötesplats för spel och teknikintresserade i Viskaforsbygden.

    +

    All löpande information kommuniceras via vår Discord-server och vår Facebook-sida.

    + +
    + + + +
    +

    + Varbergsvägen 79, 515 34 Viskafors +

    -

    - Varbergsvägen 79, 515 34 Viskafors -

    -
    - -
    -
    -
    -); +
    + ); }; export default Footer; \ No newline at end of file diff --git a/src/blocks/InventorySection.jsx b/src/blocks/InventorySection.jsx index 597fec5..4f27db6 100644 --- a/src/blocks/InventorySection.jsx +++ b/src/blocks/InventorySection.jsx @@ -1,5 +1,6 @@ import {useEffect, useState} from 'react'; +import SpinnerImage from '../components/SpinnerImage'; const InventorySection = () => { const [opacity, setOpacity] = useState(0); @@ -15,40 +16,28 @@ const InventorySection = () => { }); }; const observer = new IntersectionObserver(callback); - const observed = document.getElementById("inventoryGlow"); + const observed = document.getElementById("inventory-glow"); observer.observe(observed); }, []) return ( -
    -
    -
    - -
    -

    Bibliotek för spel och litteratur

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    +
    +
    +
    +
    +

    Bibliotek för spel och litteratur

    +

    Vi har ett omfattande utlåningsbibliotek där alla våra medlemmar kan låna brädspel och litteratur. + I biblioteket finns rollspel, brädspel och kortspel som kan lånas kostnadsfritt.

    -

    Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    +

    På hemsidan nedan kan du se vilka spel som finns tillgängliga, vilka åldrar de passar för och hur + många spelare de är anpassade för. När du har valt vilka spel du vill låna kommer vi överens om en + tid för upphämtning.

    - Låna spel -
    -
    -
    -
    - -
    - -
    -
    -
    -
    + Låna spel
    +
    ); diff --git a/src/blocks/LanForm.jsx b/src/blocks/LanForm.jsx deleted file mode 100644 index 5ad5840..0000000 --- a/src/blocks/LanForm.jsx +++ /dev/null @@ -1,260 +0,0 @@ -import Checkbox from '@/Components/Checkbox'; -import TextInput from '@/Components/TextInput'; -import { Head, useForm } from '@inertiajs/react'; -import { FormEventHandler, useState } from 'react'; -import Timer from "@/Components/Timer"; - -const LanForm = ({opacity}) => { - const [showForm, setShowForm] = useState(true) - const [type, setType] = useState(); - const [member, setMember] = useState(); - const { data, setData, post, processing, errors, reset } = useForm({ - member: 0, - first_name: '', - surname: '', - grade: '', - phone: '', - email: '', - guardian_name: '', - guardian_phone: '', - participating_type: '', - gdpr: '', - friends: '', - special_diet: '', - }); - - const RadioInput = ({label, value, checked, setter}) => { - return ( - - ); - }; - - const RadioMember = ({label, value, checked, setter}) => { - return ( - - ); - }; - - - const submit = (e) => { - e.preventDefault() - post(route('register_participant'), { - onFinish: () => reset(), - }); - } - - return ( -
    -

    - vBytes LAN -

    - { ! showForm && } - {showForm && -
    -

    Är du medlem i Vbytes? Medlemsskap krävs för att delta på lanet. Är du inte medlem i föreningen blir du det på www.vbytes.se

    -
    - -
    - - -
    -
    -
    - -
    - setData('first_name', e.target.value)} - /> -
    -
    -
    - -
    - setData('surname', e.target.value)} - /> -
    -
    -
    - -
    - setData('grade', e.target.value)} - /> -
    -
    -
    - -
    - setData('phone', e.target.value)} - /> -
    -
    -
    - -
    - setData('email', e.target.value)} - /> -
    -
    -
    - -
    - setData('guardian_name', e.target.value)} - /> -
    -
    -
    - -
    - setData('guardian_email', e.target.value)} - /> -
    -
    -
    - -
    - setData('guardian_phone', e.target.value)} - /> -
    -
    - -
    - -
    - - -
    -
    -
    - -
    - setData('friends', e.target.value)} - /> -
    -
    -
    - -
    - setData('special_diet', e.target.value)} - /> -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    - - - - - - -
    -
    - } -
    -); -}; - -export default LanForm; - diff --git a/src/blocks/MemberSection.jsx b/src/blocks/MemberSection.jsx index 9d6cbe1..07c4988 100644 --- a/src/blocks/MemberSection.jsx +++ b/src/blocks/MemberSection.jsx @@ -1,4 +1,5 @@ import {useEffect, useState} from 'react'; +import SpinnerImage from '../components/SpinnerImage'; const MemberSection = () => { const [opacity, setOpacity] = useState(0); @@ -14,23 +15,16 @@ const MemberSection = () => { }); }; const observer = new IntersectionObserver(callback); - const observed = document.getElementById("memberGlow"); + const observed = document.getElementById("member-glow"); observer.observe(observed); }, []) + return ( -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    + +

    Bli medlem

    Medlemskapet är gratis. För att kunna delta i våra evenemang, använda våra lokaler och verksamheter behöver du bli medlem i föreningen. Är du omyndig måste du även ange kontaktuppgifter diff --git a/src/blocks/Navbar.jsx b/src/blocks/Navbar.jsx index 76df202..61783ad 100644 --- a/src/blocks/Navbar.jsx +++ b/src/blocks/Navbar.jsx @@ -10,14 +10,14 @@ const Navbar = () => { const [scrollPosition, setScrollPosition] = useState(0); - const toggleNavbar = () => { - setIsOpen((prevState) => !prevState); - }; - - const handleScroll = () => { - const position = window.pageYOffset; - setScrollPosition(position); + const toggleNavbar = () => { + setIsOpen((prevState) => !prevState); }; + + const handleScroll = () => { + const position = window.pageYOffset; + setScrollPosition(position); + }; useEffect(() => { window.addEventListener('scroll', handleScroll, { passive: true }); @@ -27,34 +27,31 @@ const Navbar = () => { }; }, []); - return ( - <> -

    - -); + + ); }; export default Navbar; \ No newline at end of file diff --git a/src/blocks/PartnersSection.jsx b/src/blocks/PartnersSection.jsx new file mode 100644 index 0000000..295f678 --- /dev/null +++ b/src/blocks/PartnersSection.jsx @@ -0,0 +1,79 @@ +const PartnersSection = () => { + + return ( +
    +

    Våra samarbetpartners

    +

    Utan sponsorer och aktivt stöd hade inte vår verksamhet kunna genomföras. Stort tack till föjande samarbetspartners:

    +
    +
      +
    • Baker Tilly Borås AB
      • + +
    • Bocotex AB
      • + +
    • Borås Stad Lokala Utvecklingsfond
      • + +
    • Borås Stad Lokalförsörjningskontoret
      • + +
    • Borås Stad Viskafors Fritidsgård
      • + +
    • Borås Stad Viskaforsskolan
      • + +
    • Borås Stad Viskastrandsgymnasiet
      • + +
    • Borås Stad Viskafors bibliotek
      • + +
    • Borås Stad Viskaforshem AB
      • + +
    • Centiro
      • + +
    • Flyttbilen
      • + +
    • Georg Anderssons Golv
      • + +
    • Hjärligt
      • + +
    • Holgers Byggvaror
      • + +
    • Instans systems
      • + +
    • Kjell & Company
      • + +
    • Kodstugan
      • + +
    • LEADER Sjuhärad
      • + +
    • Maskinhjälp
      • + +
    • Mediateknik
      • + +
    • Navet
      • + +
    • Postkodslotteriet
      • + +
    • Quality Think AB
      • + +
    • Renta
      • + +
    • Sliarbanksstiftelsen Sjuhärad
      • + +
    • SumNerv
      • + +
    • Svenska Magic
      • + +
    • Tech-arenan
      • + +
    • Tempo Viskafors
      • + +
    • Tobex AB
      • + +
    • Tore G Wärenstams stiftelse
      • + +
    • Viskaforsbygdens ortsråd
      • +
    +
    +
    +); +}; + +export default PartnersSection; + diff --git a/src/blocks/StartSection.jsx b/src/blocks/StartSection.jsx index 814cab7..35dc4b1 100644 --- a/src/blocks/StartSection.jsx +++ b/src/blocks/StartSection.jsx @@ -3,13 +3,13 @@ import Logo from "../assets/img/vbytes-logo.png"; const StartSection = ({opacity}) => { return ( -
    - +
    +

    ViskaforsBygdens Teknik-, Elektronik- och Spelförening

    - +
    diff --git a/src/components/SpinnerImage.jsx b/src/components/SpinnerImage.jsx new file mode 100644 index 0000000..146db61 --- /dev/null +++ b/src/components/SpinnerImage.jsx @@ -0,0 +1,16 @@ +const SpinnerImage = () => { + + return ( +
    +
    +
    +
    +
    +
    +
    +
    +
    + ) +} + +export default SpinnerImage \ No newline at end of file diff --git a/src/components/Timer.jsx b/src/components/Timer.jsx index 1275677..34ad0ab 100644 --- a/src/components/Timer.jsx +++ b/src/components/Timer.jsx @@ -9,13 +9,14 @@ class Timer extends React.Component { }; componentDidMount() { - let date = new Date(); - date.setDate(date.getDate() + 2); + let date = new Date('2026-04-11T09:00:00'); + date.setDate(date.getDate()); let countDownDate = new Date(date).getTime(); + console.log(countDownDate); setInterval(() => { let now = new Date().getTime(); let distance = countDownDate - now; - let days = Math.floor(distance / (1000 * 60 * 60 * 24)); + let days = Math.floor(distance / (1000 * 60 * 60 * 24)); let hours = Math.floor( (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) ); diff --git a/src/css/Footer.scss b/src/css/Footer.scss deleted file mode 100644 index 905fc6d..0000000 --- a/src/css/Footer.scss +++ /dev/null @@ -1,88 +0,0 @@ -footer { - position: relative; - bottom: 0; - left: 0; - right: 0; - z-index: 6; - min-height: 30vh; - padding: 50px 0; - background-color: #222; - - box-shadow: 0px -1px 2px rgba(0, 128, 189,0.5), - 0px -2px 4px rgba(0, 128, 189,0.5), - 0px -4px 8px rgba(0, 128, 189,0.5), - 0px -8px 16px rgba(0, 128, 189,0.5); - - - .FooterContainer { - max-width: 1440px; - margin: 0 auto; - display: flex; - justify-content: space-between; - color: white; - width: 90%; - - .first { - display: flex; - flex-direction: column; - justify-content: space-between; - } - - p { - margin-top: 0; - } - } - - .footer-address{ - font-family: 'Jersey-Regular'; - letter-spacing: 0.1em; - text-transform: uppercase; - } - - .SocialMedia { - display: flex; - flex-direction: row; - height: 100%; - align-items: center; - padding: 10px 0; - gap: 20px; - margin-top: 20px; - - img { - height: 40px; - width: auto; - filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(324deg) brightness(104%) contrast(101%); - transition: unset; - - &:hover { - filter: invert(41%) sepia(71%) saturate(5637%) hue-rotate(179deg) brightness(92%) contrast(101%); - - } - } - } - - ul { - display: flex; - list-style: none; - height: 100%; - padding-right: 20px; - - li { - height: 100%; - padding: 0 10px; - - a { - text-decoration: none; - color: white; - font-size: 20px; - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - letter-spacing: 1.3px; - } - - a:active { - text-decoration: none; - color: white; - } - } - } -} \ No newline at end of file diff --git a/src/css/LanForm.scss b/src/css/LanForm.scss deleted file mode 100644 index 66c8771..0000000 --- a/src/css/LanForm.scss +++ /dev/null @@ -1,219 +0,0 @@ -.LanForm { - background-color: #222; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - //justify-content: center; - font-size: calc(10px + 2vmin); - color: white; - overflow: visible; - position: relative; - padding: 40px 20px 40px; - margin-top: 60px; - - h1 { - font-size: 48px; - z-index: 5; - font-family: monospace; - text-align: center; - font-family: 'Jersey-Regular'; - margin-top: 15px; - } - - .timer { - z-index: 20; - p { - font-size: 140px; - z-index: 5; - font-family: monospace; - text-align: center; - font-family: 'Jersey-Regular'; - margin-top: 170px; - } - } - - label { - font-size: 14px; - } - - .control { - margin-bottom: 20px; - display: flex; - gap: 10px - } - - label.checkbox { - display: flex; - align-items: center; - } - - form { - max-width: 500px; - margin: 0 auto; - z-index: 20 - } - - input { - width: 100%; - - color: black; - } - - input[type=checkbox], - input[type=radio] { - width: 16px; - margin-right: 10px; - } - - .btn { - margin: 0 auto; - margin-top: 30px; - position: relative; - display: block; - border-radius: 999em; - color: white; - max-width: 250px; - height: 45px; - font-size: 20px; - letter-spacing: 0.075em; - text-decoration: none; - text-transform: uppercase; - font-family: monospace; - font-family: 'Jersey-Regular'; - - span { - font-family: 'Jersey-Regular'; - font-size: 24px; - } - - - &__inner { - height: 45px; - padding: 1px; - position: relative; - z-index: 2; - display: block; - overflow: hidden; - border-radius: inherit; - text-align: center; - font-family: monospace; - - &:before { - height: 45px; - position: absolute; - inset: 4px; - z-index: 1; - display: block; - opacity: 0; - transition: opacity 0.2s linear 0.1s; - content: ""; - } - } - - &__label { - height: 100%; - position: relative; - display: block; - overflow: hidden; - padding: 0.35em 0em 0.35em; - border-radius: inherit; - color: transparent; - white-space: nowrap; - font-family: monospace; - - - &:before, - &:after { - position: absolute; - top: -2px; - left: 0; - z-index: 2; - - display: block; - padding: inherit; - width: 100%; - - color: white; - white-space: nowrap; - - transition: transform 0.3s cubic-bezier(1, 0, 0, 1) 0s; - } - - &:before { - transform: translate3d(0, 0, 0); - - content: attr(data-label); - } - - &:after { - transform: translate3d(0, -100%, 0); - - content: attr(data-hover); - } - - &__background { - position: absolute; - inset: -100px; - display: block; - background: #222; - background-blend-mode: overlay; - } - } - - &__background { - position: absolute; - top: 0; - left: 0; - z-index: 1; - display: block; - width: 100%; - height: 100%; - border-radius: inherit; - - &:before, - &:after { - position: absolute; - inset: 0; - display: block; - border-radius: inherit; - content: ""; - } - - &:before { - background: white; - } - } - - &:hover { - .btn__background { - &:before { - background: #0080bd; - } - - &:after { - opacity: 1; - transition: opacity 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; - } - } - - - .btn__label { - &:before, - &:after { - transition-duration: 0.6s; - transition-timing-function: cubic-bezier(1, -0.6, 0, 1.6); - } - - &:before { - transform: translate3d(0, 100%, 0); - } - - &:after { - transform: translate3d(0, 0, 0); - } - } - } - } - -} \ No newline at end of file diff --git a/src/css/MemberSection.scss b/src/css/MemberSection.scss deleted file mode 100644 index ea833a5..0000000 --- a/src/css/MemberSection.scss +++ /dev/null @@ -1,249 +0,0 @@ -.MemberSection { - background-color: #222; - font-size: calc(10px + 2vmin); - color: white; - position: relative; - z-index: unset; - margin-bottom: 300px; - scroll-margin-top: 200px; - - - - @keyframes rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } - - .glow { - z-index: 2; - position: absolute; - right: 140px; - top: 40px; - - --size: 300px; - --speed: 20s; - --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8); - - width: var(--size); - height: var(--size); - filter: blur(calc(var(--size) / 4)); - background-image: linear-gradient(hsl(222, 84, 60, 100%), hsl(164, 79, 71)); - animation: rotate var(--speed) var(--easing) alternate infinite; - border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; - transition: all 2.5s ease-in-out; - } - - @media (min-width: 720px) { - .glow { - --size: 250px; - } - } - - - /* This is just to transition when you change the viewport size. */ - * { - transition: all 0.5s ease-out; - } - - .FlexContainer { - - z-index: 5; - width: 90%; - max-width: 1440px; - display: flex; - gap: 40px; - flex-direction: column-reverse; - margin: 0 auto; - - @media screen and (min-width: 900px) { - display: grid; - grid-template-columns: 1fr 1fr; - } - - .BigDiv { - display: flex; - flex-direction: column; - justify-content: center; - //border: 2px solid rgba(0, 128, 189,0.5); - //-webkit-box-shadow:0px 0px 15px 1px rgba(0,126,189,0.9); - //-moz-box-shadow: 0px 0px 15px 1px rgba(0,126,189,0.9); - //box-shadow: 0px 0px 15px 1px rgba(0,126,189,0.9); - //padding: 50px; - z-index: 20; - - /* Button */ - @keyframes btn-glow { - 0% { - background-position: 0 100%; - } - 100% { - background-position: 0 300%; - } - } - - .btn { - margin-top: 30px; - position: relative; - display: block; - border-radius: 999em; - color: white; - max-width: 250px; - height: 45px; - font-size: 20px; - letter-spacing: 0.075em; - text-decoration: none; - text-transform: uppercase; - font-family: monospace; - font-family: 'Jersey-Regular'; - - &__inner { - height: 45px; - padding: 1px; - position: relative; - z-index: 2; - display: block; - overflow: hidden; - border-radius: inherit; - text-align: center; - font-family: monospace; - font-family: 'Jersey-Regular'; - - &:before { - height: 45px; - position: absolute; - inset: 4px; - z-index: 1; - display: block; - opacity: 0; - transition: opacity 0.2s linear 0.1s; - content: ""; - } - } - - &__label { - height: 100%; - position: relative; - display: block; - overflow: hidden; - padding: 0.55em 0em 0.55em; - border-radius: inherit; - color: transparent; - white-space: nowrap; - font-family: monospace; - font-family: 'Jersey-Regular'; - - &:before, - &:after { - position: absolute; - top: -2px; - left: 0; - z-index: 2; - - display: block; - padding: inherit; - width: 100%; - - color: white; - white-space: nowrap; - - transition: transform 0.3s cubic-bezier(1, 0, 0, 1) 0s; - } - - &:before { - transform: translate3d(0, 0, 0); - - content: attr(data-label); - } - - &:after { - transform: translate3d(0, -100%, 0); - - content: attr(data-hover); - } - - &__background { - position: absolute; - inset: -100px; - display: block; - background: #222; - background-blend-mode: overlay; - } - } - - &__background { - position: absolute; - top: 0; - left: 0; - z-index: 1; - display: block; - width: 100%; - height: 100%; - border-radius: inherit; - - &:before, - &:after { - position: absolute; - inset: 0; - display: block; - border-radius: inherit; - content: ""; - } - - &:before { - background: white; - } - } - - &:hover { - .btn__background { - &:before { - background: #0080bd; - } - - &:after { - opacity: 1; - transition: opacity 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; - } - } - - - .btn__label { - &:before, - &:after { - transition-duration: 0.6s; - transition-timing-function: cubic-bezier(1, -0.6, 0, 1.6); - } - - &:before { - transform: translate3d(0, 100%, 0); - } - - &:after { - transform: translate3d(0, 0, 0); - } - } - } - } - } - - .GridContainer { - display: flex; - justify-content: center; - align-items: center ; - //background-image: url(/images/technology-8346311_640.png); - background-repeat: none; - background-size: cover; - background-position: center; - -webkit-box-shadow:0px 0px 15px 1px rgba(0,126,189,0.9); - -moz-box-shadow: 0px 0px 15px 1px rgba(0,126,189,0.9); - box-shadow: 0px 0px 15px 1px rgba(0,126,189,0.9); - - - } - } - } - \ No newline at end of file diff --git a/src/css/StartSection.scss b/src/css/StartSection.scss deleted file mode 100644 index 7db8e6c..0000000 --- a/src/css/StartSection.scss +++ /dev/null @@ -1,148 +0,0 @@ -.StartSection { - background-color: #222; - min-height: calc(100vh - 80px); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; - overflow: visible; - position: relative; - padding: 40px 20px; - margin-bottom: 150px; - - .AppLogo { - z-index: 5; - } - - p { - font-size: 24px; - z-index: 5; - font-family: monospace; - text-align: center; - font-family: 'Jersey-Regular'; - margin-top: 15px; - } - - $base: 0.6rem; - -.arrow { - z-index: 5; - position: absolute; - bottom: 50px; - display: flex; - justify-content: center; - align-items: center; - width:100px; - height: 100px; -} - -.chevron { - position: absolute; - width: $base * 3.5; - height: $base * 0.8; - opacity: 0; - transform: scale(0.3); - animation: move-chevron 3s ease-out infinite, glowing 3s reverse infinite ease-in-out; -} - -.chevron:first-child { - animation: move-chevron 3s ease-out 1s infinite, glowing 3s reverse infinite 1s ease-in-out; -} - -.chevron:nth-child(2) { - animation: move-chevron 3s ease-out 2s infinite, glowing 3s reverse infinite 2s ease-in-out; -} - -.chevron:before, -.chevron:after { - content: ''; - position: absolute; - top: 0; - height: 100%; - width: 50%; - background: rgba(0, 128, 189,0.5); -} - -.chevron:before { - left: 0; - transform: skewY(30deg); -} - -.chevron:after { - right: 0; - width: 50%; - transform: skewY(-30deg); -} - -@keyframes move-chevron { - 25% { - opacity: 1; - } - 33.3% { - opacity: 1; - transform: translateY($base * 3.8); - } - 66.6% { - opacity: 1; - transform: translateY($base * 5.2); - } - 100% { - opacity: 0; - transform: translateY($base * 8) scale(0.5); - } -} -} - -@keyframes glowing { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - filter: drop-shadow(0 0 0 #ffffff) drop-shadow(0 0 1px #ffffff) - drop-shadow(0 0 2px rgba(0, 128, 189,0.5)) drop-shadow(0 0 3px rgba(0, 128, 189,0.5)) - drop-shadow(0 0 4px rgba(0, 128, 189,0.5)) drop-shadow(0 0 5px rgba(0, 128, 189,0.5)); - } -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background-color: #222; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -h2 { - font-size: 32px; - -} -h1,h2,h3,h4,h5,h6 { - font-family: 'Jersey-Regular'; -} - -p, li { - font-size: 16px; - line-height: 24px; -} - -a { - cursor: pointer; -} - -.App { - position: relative; -} \ No newline at end of file diff --git a/src/css/_base.scss b/src/css/_base.scss new file mode 100644 index 0000000..8f6f250 --- /dev/null +++ b/src/css/_base.scss @@ -0,0 +1,85 @@ +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: #222; +} + +.App { + //position: relative; + max-width: 2000px; + margin: 0 auto; + overflow: hidden; + + @media (min-width: 2000px) { + overflow: visible; + } +} + +//Buttons +.glowing-btn { + position: relative; + color: rgba(0,126,189,0.9); + cursor: pointer; + padding: 0.6em 1em; + border: 0.15em solid rgba(0,126,189,0.9); + border-radius: 0.45em; + background: none; + perspective: 2em; + text-align: center; + text-decoration: none; + font-size: 18px; + font-weight: 900; + margin-top: 30px; + text-transform: uppercase; + width: 200px; + font-family: 'Jersey-Regular'; + letter-spacing: 0.1em; + + -webkit-box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9), + 0px 0px 0.5em 0px rgba(0,126,189,0.9); + -moz-box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9), + 0px 0px 0.5em 0px rgba(0,126,189,0.9); + box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9), + 0px 0px 0.5em 0px rgba(0,126,189,0.9); + //animation: border-flicker 2s linear infinite; +} + +.glowing-txt { + color: white; +} + + +.glowing-btn:hover { + background-color: rgba(0,126,189,0.9); + text-shadow: none; + animation: none; +} + +.glowing-btn:hover .glowing-txt { + animation: none; +} + +@keyframes morph { + 0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;} + 100% {border-radius: 40% 60%;} +} + +@keyframes spin { + to { + transform: rotate(1turn); + } +} + + +/* This is just to transition when you change the viewport size. */ +* { +transition: all 0.5s ease-out; +} diff --git a/src/css/_typography.scss b/src/css/_typography.scss new file mode 100644 index 0000000..a025425 --- /dev/null +++ b/src/css/_typography.scss @@ -0,0 +1,23 @@ +h1,h2,h3,h4,h5,h6 { + font-family: 'Jersey-Regular'; + letter-spacing: 0.1em; + text-transform: uppercase; + overflow-wrap: break-word; + color: white; + z-index:19; +} + +h2 { + font-size: 48px; +} + + +p, li { + font-size: 16px; + line-height: 24px; + color: white; +} + +a { + cursor: pointer; +} \ No newline at end of file diff --git a/src/css/app.scss b/src/css/app.scss index 68c40a0..5aa9d08 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -1,10 +1,17 @@ -@use './about-section.scss'; -@use './Footer.scss'; -@use './Glow.scss'; -@use './MemberSection.scss'; -@use './Navbar.scss'; -@use './StartSection.scss'; -@use './_fonts.scss'; -@use './LanForm.scss'; -@use './InventorySection.scss'; +//Base @use './base.scss'; +@use './typography.scss'; +@use './fonts.scss'; + +//Blocks +@use './blocks/about-section'; +@use './blocks/footer.scss'; +@use './blocks/member-section.scss'; +@use './blocks/navbar.scss'; +@use './blocks/start-section.scss'; +@use './blocks/inventory-section.scss'; +@use './blocks/partners-section.scss'; + +//Components +@use './components/glow.scss'; +@use './components/spinner-image.scss'; \ No newline at end of file diff --git a/src/css/base.scss b/src/css/base.scss deleted file mode 100644 index bb1a78b..0000000 --- a/src/css/base.scss +++ /dev/null @@ -1,460 +0,0 @@ -p { - font-size: 16px; -} - -h2 { - font-size: 48px; - font-family: 'Jersey-Regular'; - letter-spacing: 0.1em; - text-transform: uppercase; - overflow-wrap: break-word; -} - -h3 { - font-family: 'Jersey-Regular'; - letter-spacing: 0.1em; - text-transform: uppercase; -} - - .glowing-btn { - position: relative; - color: rgba(0,126,189,0.9); - cursor: pointer; - padding: 0.6em 1em; - border: 0.15em solid rgba(0,126,189,0.9); - border-radius: 0.45em; - background: none; - perspective: 2em; - text-align: center; - text-decoration: none; - - - font-size: 18px; - font-weight: 900; - //letter-spacing: 0.6em; - margin-top: 30px; - text-transform: uppercase; - - //align-self: center; - width: 200px; - font-family: 'Jersey-Regular'; - letter-spacing: 0.1em; - - -webkit-box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9), - 0px 0px 0.5em 0px rgba(0,126,189,0.9); - -moz-box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9), - 0px 0px 0.5em 0px rgba(0,126,189,0.9); - box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9), - 0px 0px 0.5em 0px rgba(0,126,189,0.9); - //animation: border-flicker 2s linear infinite; -} - -.glowing-txt { - //float: left; - //margin-right: -0.8em; - color: white; -// -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), -// 0 0 0.45em rgba(0,126,189,0.9); -// -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), -// 0 0 0.45em rgba(0,126,189,0.9); -// text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em rgba(0,126,189,0.9); - //animation: text-flicker 3s linear infinite; -} - -.faulty-letter { - opacity: 1; - //animation: faulty-flicker 2s linear infinite; -} - -//.glowing-btn::before { -// content: ""; -// position: absolute; -// top: 0; -// bottom: 0; -// left: 0; -// right: 0; -// opacity: 0.7; -// filter: blur(1em); -// transform: translateY(120%) rotateX(95deg) scale(1, 0.35); -// background: rgba(0,126,189,0.9); -// pointer-events: none; -//} - -//.glowing-btn::after { -// content: ""; -// position: absolute; -// top: 0; -// left: 0; -// right: 0; -// bottom: 0; -// opacity: 0; -// z-index: -1; -// background-color: rgba(0,126,189,0.9); -// box-shadow: 0 0 2em 0.2em rgba(0,126,189,0.9); -// transition: opacity 100ms linear; -//} - -.glowing-btn:hover { - background-color: rgba(0,126,189,0.9); - text-shadow: none; - animation: none; -} - -.glowing-btn:hover .glowing-txt { - animation: none; -} - -.glowing-btn:hover .faulty-letter { - animation: none; - text-shadow: none; - opacity: 1; -} - -.glowing-btn:hover:before { - filter: blur(1.5em); - opacity: 1; -} - -.glowing-btn:hover:after { - opacity: 1; -} - -@keyframes faulty-flicker { - 0% { - opacity: 0.1; - } - 2% { - opacity: 0.1; - } - 4% { - opacity: 0.5; - } - 19% { - opacity: 0.5; - } - 21% { - opacity: 0.1; - } - 23% { - opacity: 1; - } - 80% { - opacity: 0.5; - } - 83% { - opacity: 0.4; - } - - 87% { - opacity: 1; - } -} - -@keyframes text-flicker { - 0% { - opacity: 0.1; - } - - 2% { - opacity: 1; - } - - 8% { - opacity: 0.1; - } - - 9% { - opacity: 1; - } - - 12% { - opacity: 0.1; - } - 20% { - opacity: 1; - } - 25% { - opacity: 0.3; - } - 30% { - opacity: 1; - } - - 70% { - opacity: 0.7; - } - 72% { - opacity: 0.2; - } - - 77% { - opacity: 0.9; - } - 100% { - opacity: 0.9; - } -} - -@keyframes border-flicker { - 0% { - opacity: 0.1; - } - 2% { - opacity: 1; - } - 4% { - opacity: 0.1; - } - - 8% { - opacity: 1; - } - 70% { - opacity: 0.7; - } - 100% { - opacity: 1; - } -} - - -@keyframes morph { - 0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;} - 100% {border-radius: 40% 60%;} -} - -@keyframes spin { - to { - transform: rotate(1turn); - } -} - - - /* This is just to transition when you change the viewport size. */ - * { - transition: all 0.5s ease-out; - } - - - - .image-box { - min-height: 60vmin; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - - .box { - width: 40vmin; - height: 40vmin; - border: 1px dashed rgba(0, 128, 189,0.8); - position: relative; - - @media screen and (min-width: 900px) { - width: 40vmin; - height: 40vmin; - } - - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - border-radius: 50%; - border: 1px dashed rgba(0, 128, 189,0.8); - transform: scale(1.42); - } - } - - .spin-container { - width: 100%; - height: 100%; - animation: spin 12s ease-in-out infinite alternate; - position: relative; - } - - .shape { - width: 100%; - height: 100%; - transition: border-radius 1s ease-out; - border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; - animation: morph 8s ease-in-out infinite both alternate; - position: absolute; - overflow: hidden; - z-index: 5; - } - - .bd { - width: 142%; - height: 142%; - position: absolute; - left: -21%; - top: -21%; - background: url(../assets/img/lan.jpg); - background-size: 100%; - background-position: center center; - display: flex; - color: #003; - font-size: 5vw; - font-weight: bold; - align-items: center; - justify-content: center; - text-align: center; - text-transform: uppercase; - animation: spin 12s ease-in-out infinite alternate-reverse; - opacity: 1; - z-index: 2; - } - } - - .btn { - margin: 0 auto; - margin-top: 30px; - position: relative; - display: block; - border-radius: 999em; - color: white; - max-width: 250px; - height: 45px; - font-size: 20px; - letter-spacing: 0.075em; - text-decoration: none; - text-transform: uppercase; - font-family: monospace; - font-family: 'Jersey-Regular'; - - span { - font-family: 'Jersey-Regular'; - font-size: 24px; - } - - - &__inner { - height: 45px; - padding: 1px; - position: relative; - z-index: 2; - display: block; - overflow: hidden; - border-radius: inherit; - text-align: center; - font-family: monospace; - - &:before { - height: 45px; - position: absolute; - inset: 4px; - z-index: 1; - display: block; - opacity: 0; - transition: opacity 0.2s linear 0.1s; - content: ""; - } - } - - &__label { - height: 100%; - position: relative; - display: block; - overflow: hidden; - padding: 0.35em 0em 0.35em; - border-radius: inherit; - color: transparent; - white-space: nowrap; - font-family: monospace; - - - &:before, - &:after { - position: absolute; - top: -2px; - left: 0; - z-index: 2; - - display: block; - padding: inherit; - width: 100%; - - color: white; - white-space: nowrap; - - transition: transform 0.3s cubic-bezier(1, 0, 0, 1) 0s; - } - - &:before { - transform: translate3d(0, 0, 0); - - content: attr(data-label); - } - - &:after { - transform: translate3d(0, -100%, 0); - - content: attr(data-hover); - } - - &__background { - position: absolute; - inset: -100px; - display: block; - background: #222; - background-blend-mode: overlay; - } - } - - &__background { - position: absolute; - top: 0; - left: 0; - z-index: 1; - display: block; - width: 100%; - height: 100%; - border-radius: inherit; - - &:before, - &:after { - position: absolute; - inset: 0; - display: block; - border-radius: inherit; - content: ""; - } - - &:before { - background: white; - } - } - - &:hover { - .btn__background { - &:before { - background: #0080bd; - } - - &:after { - opacity: 1; - transition: opacity 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; - } - } - - - .btn__label { - &:before, - &:after { - transition-duration: 0.6s; - transition-timing-function: cubic-bezier(1, -0.6, 0, 1.6); - } - - &:before { - transform: translate3d(0, 100%, 0); - } - - &:after { - transform: translate3d(0, 0, 0); - } - } - } - } \ No newline at end of file diff --git a/src/css/_about-section.scss b/src/css/blocks/_about-section.scss similarity index 89% rename from src/css/_about-section.scss rename to src/css/blocks/_about-section.scss index d9610f0..5416cdd 100644 --- a/src/css/_about-section.scss +++ b/src/css/blocks/_about-section.scss @@ -7,25 +7,16 @@ padding: 50px 0; margin-bottom: 150px; scroll-margin-top: 100px; + width: 100%; - - - @keyframes rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } &__glow { z-index: 2; position: absolute; - left: 150px; - top: 300px; + left: 20px; + top: 0px; - --size: 170px; + --size: 120px; --speed: 20s; --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8); @@ -36,6 +27,7 @@ //animation: rotate var(--speed) var(--easing) alternate infinite; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transition: all 2.5s ease-in-out; + @media (min-width: 720px) { left: 150px; top: 0px; @@ -52,12 +44,13 @@ display: grid; grid-template-columns: 1fr; width: 90%; - gap: 40px; + gap: 100px; margin: 0 auto; @media screen and (min-width: 900px) { grid-template-columns: 1fr 1fr; //max-height: 60vh; + gap: 40px; } } @@ -77,7 +70,7 @@ } @media screen and (min-width: 1200px) { - padding: 50px; + padding: 50px 0; } } @@ -99,9 +92,10 @@ justify-content: center; width: 90%; max-width: 1440px; + gap: 40px; @media screen and (min-width: 1200px) { - grid-template-columns: 33% 33% 33%; + grid-template-columns: 1fr 1fr 1fr; } } @@ -110,7 +104,6 @@ width: auto; background: #222; border-radius: 15px; - margin: 20px; transition: all ease 0.2s; border: 1px solid #333; box-shadow: 0px 1px 2px 0px rgba(0,126,189,0.7), @@ -138,6 +131,7 @@ letter-spacing: 7px; margin: 0; margin-bottom: 20px; + font-variant-numeric: tabular-nums; } } } diff --git a/src/css/blocks/_footer.scss b/src/css/blocks/_footer.scss new file mode 100644 index 0000000..1695104 --- /dev/null +++ b/src/css/blocks/_footer.scss @@ -0,0 +1,64 @@ +.footer { + position: relative; + bottom: 0; + left: 0; + right: 0; + z-index: 6; + min-height: 30vh; + padding: 50px 0; + width: 100vw; + left: 50%; + transform: translateX(-50%); + background-color: #222; + box-shadow: 0px -1px 2px rgba(0, 128, 189,0.5), + 0px -2px 4px rgba(0, 128, 189,0.5), + 0px -4px 8px rgba(0, 128, 189,0.5), + 0px -8px 16px rgba(0, 128, 189,0.5); + + + &__container { + max-width: 1440px; + margin: 0 auto; + display: flex; + justify-content: space-between; + color: white; + width: 90%; + + .first { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + p { + margin-top: 0; + } + + .footer-address{ + font-family: 'Jersey-Regular'; + letter-spacing: 0.1em; + text-transform: uppercase; + } + + .footer-social-media { + display: flex; + flex-direction: row; + align-items: center; + padding: 10px 0; + gap: 20px; + padding-top: 40px; + + img { + height: 40px; + width: auto; + filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(324deg) brightness(104%) contrast(101%); + transition: unset; + + &:hover { + filter: invert(41%) sepia(71%) saturate(5637%) hue-rotate(179deg) brightness(92%) contrast(101%); + + } + } + } + } +} \ No newline at end of file diff --git a/src/css/InventorySection.scss b/src/css/blocks/_inventory-section.scss similarity index 61% rename from src/css/InventorySection.scss rename to src/css/blocks/_inventory-section.scss index 19d79c5..d7771c4 100644 --- a/src/css/InventorySection.scss +++ b/src/css/blocks/_inventory-section.scss @@ -1,4 +1,4 @@ -.InventorySection { +.inventory-section { background-color: transparent; font-size: calc(10px + 2vmin); color: white; @@ -7,18 +7,8 @@ padding: 50px 0; margin-bottom: 150px; scroll-margin-top: 200px; - - @keyframes rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } - - .glow { + &__glow { z-index: 2; position: absolute; left: 20px; @@ -35,17 +25,15 @@ animation: rotate var(--speed) var(--easing) alternate infinite; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transition: all 2.5s ease-in-out; - } - - @media (min-width: 720px) { - .glow { - left: 150px; + + @media (min-width: 720px) { + left: 150px; top: 0px; - --size: 200px; + --size: 200px; } - } + } - .FlexContainer { + &__container { z-index: 5; margin: 0 auto; width: 100%; @@ -54,30 +42,28 @@ flex-direction: column; grid-template-columns: 1fr; width: 90%; - gap: 40px; + gap: 100px; @media screen and (min-width: 900px) { display: grid; - grid-template-columns: 1fr 1fr; - - } - - .BigDiv { - display: flex; - flex-direction: column; - z-index: 20; - - @media screen and (min-width: 1200px) { - padding: 50px; - } - - + grid-template-columns: 1fr 1fr; + gap: 40px; } } - .image-box { + &__text-box { + display: flex; + flex-direction: column; + z-index: 20; + + @media screen and (min-width: 1200px) { + padding: 50px 0 50px; + } + } + + .image-box { .bd { - background: url(../assets/img/Board-Games.jpg); + background: url(../../assets/img/Board-Games.jpg); } } } diff --git a/src/css/blocks/_member-section.scss b/src/css/blocks/_member-section.scss new file mode 100644 index 0000000..ffa4cd8 --- /dev/null +++ b/src/css/blocks/_member-section.scss @@ -0,0 +1,62 @@ +.member-section { + background-color: #222; + font-size: calc(10px + 2vmin); + color: white; + position: relative; + z-index: unset; + margin-bottom: 150px; + scroll-margin-top: 200px; + + @media (min-width: 900px) { + margin-bottom: 300px; + } + + .glow { + z-index: 2; + position: absolute; + right: 40px; + top: -20px; + + --size: 120px; + --speed: 20s; + --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8); + + width: var(--size); + height: var(--size); + filter: blur(calc(var(--size) / 4)); + background-image: linear-gradient(hsl(222, 84, 60, 100%), hsl(164, 79, 71)); + animation: rotate var(--speed) var(--easing) alternate infinite; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; + transition: all 2.5s ease-in-out; + @media (min-width: 900px) { + --size: 250px; + } + } + + &__container { + z-index: 5; + width: 90%; + max-width: 1440px; + display: flex; + gap: 100px; + flex-direction: column-reverse; + margin: 0 auto; + + @media screen and (min-width: 900px) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; + } + } + + &__text-box { + display: flex; + flex-direction: column; + z-index: 20; + + @media screen and (min-width: 1200px) { + padding: 50px 0; + } + } +} + \ No newline at end of file diff --git a/src/css/Navbar.scss b/src/css/blocks/_navbar.scss similarity index 53% rename from src/css/Navbar.scss rename to src/css/blocks/_navbar.scss index 52b23e3..8f5d494 100644 --- a/src/css/Navbar.scss +++ b/src/css/blocks/_navbar.scss @@ -1,5 +1,5 @@ -nav { +.nav { z-index: 21; position: fixed; background-color: #222; @@ -13,7 +13,7 @@ nav { 0px 8px 16px rgba(0, 128, 189,0.5); - .navContainer { +&__container { margin: 0 auto; display: flex; width:95%; @@ -31,7 +31,7 @@ nav { } .hamburger{ - width: 35px; + width: 35px; height: 35px; display: flex; flex-direction: column; @@ -95,72 +95,74 @@ nav { display: none; } } - - .navbar-container { + } + + &__menu-container { display: flex; justify-content: flex-end; } - .navbar { - background-color: transparent; - position: absolute; - top: 64px; - right: 0; - width: 0; - height: 0; - overflow: hidden; - transition: all 0.6s ease-in-out; - visibility: hidden; - //transform: translateX(105%); - - background: linear-gradient(#222, #222222a6); - border-radius: 0 0 0 600px; - box-shadow: 0px 1px 2px rgba(0, 128, 189,0), - 0px 2px 4px rgba(0, 128, 189,0), - 0px 4px 8px rgba(0, 128, 189,0), - 0px 12px 16px rgba(0, 128, 189,0.5); - } + .navbar { + background-color: transparent; + position: absolute; + top: 64px; + right: 0; + width: 0; + height: 0; + overflow: hidden; + transition: all 0.6s ease-in-out; + visibility: hidden; + //transform: translateX(105%); + + background: linear-gradient(#222, #222222a6); + border-radius: 0 0 0 600px; + box-shadow: 0px 1px 2px rgba(0, 128, 189,0), + 0px 2px 4px rgba(0, 128, 189,0), + 0px 4px 8px rgba(0, 128, 189,0), + 0px 12px 16px rgba(0, 128, 189,0.5); + } - .navbar.opened { - //transform: translateX(0); - visibility: visible; - height: 40vh; - width: 400px; - } + .navbar.opened { + //transform: translateX(0); + visibility: visible; + height: 40vh; + //min-height: 300px; + width: 400px; + } - ul { - padding: 0; - list-style-type: none; - text-align: right; - display: flex; - flex-direction: column; - gap: 10px; - margin-top: 0; - padding-top: 50px; - padding-right: 50px; - } + ul { + padding: 0; + list-style-type: none; + text-align: right; + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 0; + padding-top: 50px; + padding-right: 50px; + } - li { - margin: 15px 0; - height: unset; - } + li { + margin: 15px 0; + height: unset; + } + - a { - color: #fff; - text-decoration: none; - font-size: 1.5rem; - font-family: 'Jersey-Regular'; - text-transform: uppercase; + a { + color: #fff; + text-decoration: none; + font-size: 1.5rem; + font-family: 'Jersey-Regular'; + text-transform: uppercase; - &:hover { - text-decoration: underline solid rgba(0, 128, 189,0.7) 4px; - text-underline-offset: 8px; - transition: none; - } - } + &:hover { + text-decoration: underline solid rgba(0, 128, 189,0.7) 4px; + text-underline-offset: 8px; + transition: none; + } } - .SocialMedia { + &__social-media { display: flex; height: 100%; align-items: center; @@ -178,33 +180,4 @@ nav { } } } - - ul { - display: flex; - list-style: none; - height: 100%; - padding-right: 20px; - - li { - height: 100%; - padding: 0 10px; - - a { - text-decoration: none; - color: white; - font-size: 20px; - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - letter-spacing: 1.3px; - } - - a:active { - text-decoration: none; - color: white; - } - - a:hover { - //text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #00ff33, 0 0 10px #00ff33, 0 0 15px #00ff33, 0 0 20px #00ff33, 0 0 25px #00ff33, 0 0 30px #00ff33; - } - } - } } \ No newline at end of file diff --git a/src/css/blocks/_partners-section.scss b/src/css/blocks/_partners-section.scss new file mode 100644 index 0000000..5b10b52 --- /dev/null +++ b/src/css/blocks/_partners-section.scss @@ -0,0 +1,59 @@ +.partners-section { + padding-bottom: 100px; + width: 90%; + margin: 0 auto; + max-width: 1440px; + + &__subtext { + margin-bottom: 50px; + text-align: center; + } + + &__partners { + width: 100%; + } + + h2 { + word-break: break-word; + text-align: center; + } + + + .glowing-box { + + &--partners { + min-height: 80px; + background: #222; + border-radius: 15px; + transition: all ease 0.2s; + border: 1px solid #333; + box-shadow: 0px 1px 2px 0px rgba(0,126,189,0.7), + 1px 2px 4px 0px rgba(0,126,189,0.7), + 2px 4px 8px 0px rgba(0,126,189,0.7), + 2px 4px 16px 0px rgba(0,126,189,0.7); + + padding: 2em; + + ul { + column-count: 1; + list-style: none; + + @media screen and (min-width: 600px) { + column-count: 2; + } + + @media screen and (min-width: 1200px) { + column-count: 3; + } + + } + + + p { + word-break: break-word; + text-align: center; + } + } + + } +} \ No newline at end of file diff --git a/src/css/blocks/_start-section.scss b/src/css/blocks/_start-section.scss new file mode 100644 index 0000000..c423635 --- /dev/null +++ b/src/css/blocks/_start-section.scss @@ -0,0 +1,138 @@ +.start-section { + background-color: #222; + min-height: calc(100vh - 80px); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; + overflow: visible; + position: relative; + padding: 40px 20px; + margin-bottom: 150px; + overflow: hidden; + + .glow-container { + width: 100vw; + height: 100vh; + z-index: 4; + position: fixed; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .glow { + --size: 300px; + --speed: 50s; + --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8); + + width: var(--size); + height: var(--size); + filter: blur(calc(var(--size) / 5)); + background-image: linear-gradient(hsl(222, 84, 60, 100%), hsl(164, 79, 71)); + animation: rotate var(--speed) var(--easing) alternate infinite; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; + + @media (min-width: 720px) { + --size: 600px; + + } + } + + .logo { + z-index: 5; + } + + p { + font-size: 24px; + z-index: 5; + text-align: center; + font-family: 'Jersey-Regular'; + margin-top: 15px; + } + + $base: 0.6rem; + + .arrow { + z-index: 5; + position: absolute; + bottom: 50px; + display: flex; + justify-content: center; + align-items: center; + width:100px; + height: 100px; + } + + .chevron { + position: absolute; + width: $base * 3.5; + height: $base * 0.8; + opacity: 0; + transform: scale(0.3); + animation: move-chevron 3s ease-out infinite, glowing 3s reverse infinite ease-in-out; + } + + .chevron:first-child { + animation: move-chevron 3s ease-out 1s infinite, glowing 3s reverse infinite 1s ease-in-out; + } + + .chevron:nth-child(2) { + animation: move-chevron 3s ease-out 2s infinite, glowing 3s reverse infinite 2s ease-in-out; + } + + .chevron:before, + .chevron:after { + content: ''; + position: absolute; + top: 0; + height: 100%; + width: 50%; + background: rgba(0, 128, 189,0.5); + } + + .chevron:before { + left: 0; + transform: skewY(30deg); + } + + .chevron:after { + right: 0; + width: 50%; + transform: skewY(-30deg); + } + + @keyframes move-chevron { + 25% { + opacity: 1; + } + 33.3% { + opacity: 1; + transform: translateY($base * 3.8); + } + 66.6% { + opacity: 1; + transform: translateY($base * 5.2); + } + 100% { + opacity: 0; + + } + } +} + +@keyframes glowing { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + filter: drop-shadow(0 0 0 #ffffff) drop-shadow(0 0 1px #ffffff) + drop-shadow(0 0 2px rgba(0, 128, 189,0.5)) drop-shadow(0 0 3px rgba(0, 128, 189,0.5)) + drop-shadow(0 0 4px rgba(0, 128, 189,0.5)) drop-shadow(0 0 5px rgba(0, 128, 189,0.5)); + } +} + diff --git a/src/css/Glow.scss b/src/css/components/_glow.scss similarity index 90% rename from src/css/Glow.scss rename to src/css/components/_glow.scss index 07ebb98..d2bee74 100644 --- a/src/css/Glow.scss +++ b/src/css/components/_glow.scss @@ -15,6 +15,10 @@ display: flex; justify-content: center; align-items: center; + margin: 0 auto; + max-width: 1440px; + left: 50%; + transform: translateX(-50%); } .glow { diff --git a/src/css/components/_spinner-image.scss b/src/css/components/_spinner-image.scss new file mode 100644 index 0000000..dd545f8 --- /dev/null +++ b/src/css/components/_spinner-image.scss @@ -0,0 +1,88 @@ +// Image and text - image box + +.image-box { + min-height: 80vmin; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + + @media screen and (min-width: 900px) { + min-height: 60vmin; + } + + .box { + width: 50vmin; + height: 50vmin; + border: 1px dashed rgba(0, 128, 189,0.8); + position: relative; + + @media screen and (min-width: 900px) { + width: 40vmin; + height: 40vmin; + } + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: 50%; + border: 1px dashed rgba(0, 128, 189,0.8); + transform: scale(1.42); + } + } + + .spin-container { + width: 100%; + height: 100%; + animation: spin 12s ease-in-out infinite alternate; + position: relative; + } + + .shape { + width: 100%; + height: 100%; + transition: border-radius 1s ease-out; + border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; + animation: morph 8s ease-in-out infinite both alternate; + position: absolute; + overflow: hidden; + z-index: 5; + } + + .bd { + width: 142%; + height: 142%; + position: absolute; + left: -21%; + top: -21%; + background-size: 100%; + background-position: center center; + display: flex; + color: #003; + font-size: 5vw; + font-weight: bold; + align-items: center; + justify-content: center; + text-align: center; + text-transform: uppercase; + animation: spin 12s ease-in-out infinite alternate-reverse; + opacity: 1; + z-index: 2; + } +} + +.about-section { + .bd { + background: url(../../assets/img/LanRoom.jpg); + } +} + +.member-section { + .bd { + background: url(../../assets/img/LanRoom.jpg); + } +} \ No newline at end of file diff --git a/src/helpers/functions.jsx b/src/helpers/functions.jsx new file mode 100644 index 0000000..e69de29