Frontend setup and styling
This commit is contained in:
Anna-Sara Sélea
parent
abb32911fe
commit
4b7c566226
37 changed files with 820 additions and 1761 deletions
|
|
@ -1,5 +1,5 @@
|
|||
# Build Stage
|
||||
FROM node:latest as build-stage
|
||||
FROM node:latest AS build-stage
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
|
|
|
|||
71
README.md
71
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
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 49 KiB |
|
|
@ -7,9 +7,9 @@
|
|||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
content="vBytes Website"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/vbytes-logo.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
|
|
@ -24,7 +24,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`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>vBytes Website</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"short_name": "vBytes Website",
|
||||
"name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
|
|
|
|||
BIN
public/vbytes-logo.png
Normal file
BIN
public/vbytes-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
|
|
@ -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() {
|
|||
<AboutSection />
|
||||
<MemberSection />
|
||||
<InventorySection />
|
||||
<PartnersSection />
|
||||
<Footer />
|
||||
|
||||
</div>
|
||||
|
|
|
|||
BIN
src/assets/img/LanRoom.jpg
Normal file
BIN
src/assets/img/LanRoom.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 442 KiB |
|
|
@ -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 (
|
||||
<section id="about-section" className="about-section">
|
||||
<section id="about" className="about-section">
|
||||
<div className="about-section__container">
|
||||
<div className='about-section__text-box'>
|
||||
<div id="about-glow" className="about-section__glow" style={{opacity: opacity}}></div>
|
||||
|
|
@ -39,15 +40,7 @@ const AboutSection = () => {
|
|||
<li>Aktiviteter på mötesplatsen</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="image-box">
|
||||
<div className="box">
|
||||
<div className="spin-container">
|
||||
<div className="shape">
|
||||
<div className="bd"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SpinnerImage />
|
||||
</div>
|
||||
<div className='about-section__activities'>
|
||||
<h2>Våra återkommande aktiviteter</h2>
|
||||
|
|
@ -59,8 +52,8 @@ const AboutSection = () => {
|
|||
|
||||
</div>
|
||||
<div className="glowing-box"><h3>LAN</h3>
|
||||
<p>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.</p>
|
||||
<p>24 timmar LAN-partys sker två gånger per år. Under LAN:et så anordnas det olika former av turneringar och tävlingar. </p>
|
||||
<p>LANet har funnits i drygt 10 år och bruka samla runt 100 deltagare. </p>
|
||||
<p className='next-lan'>Nästa LAN</p>
|
||||
<Timer />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<footer id="Contact">
|
||||
<div className="FooterContainer">
|
||||
<div className='first'>
|
||||
<h2>vBytes</h2>
|
||||
<p>vBytes står för Viskaforsbygdens Teknik- Elektronik och Spelförening. </p>
|
||||
<p>Vi vill vara en mötesplats för spel och teknikintresserade i Viskaforsbygden.</p>
|
||||
|
||||
<div className='SocialMedia'>
|
||||
<a href='https://discord.gg/meEYUcmR'><img src={Discord} alt=""/></a>
|
||||
<a href='https://www.facebook.com/groups/vbytes/'><img src={Facebook} alt=""/></a>
|
||||
<a href='mailto:styrelsen@vbytes.se'><img src={Mail} alt=""/></a>
|
||||
<footer className="footer" id="contact">
|
||||
<div className="footer__container">
|
||||
<div className='first_box'>
|
||||
<h2>vBytes</h2>
|
||||
<p>vBytes står för Viskaforsbygdens Teknik- Elektronik och Spelförening. </p>
|
||||
<p>Vi vill vara en mötesplats för spel och teknikintresserade i Viskaforsbygden.</p>
|
||||
<p>All löpande information kommuniceras via vår Discord-server och vår Facebook-sida.</p>
|
||||
|
||||
<div className='footer-social-media'>
|
||||
<a href='https://discord.gg/BGfqPQXT'><img src={Discord} alt=""/></a>
|
||||
<a href='https://www.facebook.com/groups/vbytes/'><img src={Facebook} alt=""/></a>
|
||||
<a href='mailto:styrelsen@vbytes.se'><img src={Mail} alt=""/></a>
|
||||
</div>
|
||||
<p>
|
||||
Varbergsvägen 79, 515 34 Viskafors
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
Varbergsvägen 79, 515 34 Viskafors
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -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 (
|
||||
<section id="InventorySection" className="InventorySection">
|
||||
<div id="inventoryGlow" className="glow" style={{opacity: opacity}}></div>
|
||||
<div className="FlexContainer">
|
||||
|
||||
<div className='BigDiv'>
|
||||
<h2>Bibliotek för spel och litteratur</h2>
|
||||
<p>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. </p>
|
||||
<section id="inventory" className="inventory-section">
|
||||
<div className="inventory-section__container">
|
||||
<div className='inventory-section__text-box'>
|
||||
<div id="inventory-glow" className="inventory-section__glow" style={{opacity: opacity}}></div>
|
||||
<h2>Bibliotek för spel och litteratur</h2>
|
||||
<p>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. </p>
|
||||
|
||||
<p>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>
|
||||
<p>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.</p>
|
||||
|
||||
<a href="https://boka.vbytes.se/boka" target="_blank" class='glowing-btn'><span class='glowing-txt'>Låna spel</span></a>
|
||||
</div>
|
||||
<div class="image-box
|
||||
">
|
||||
<div class="box">
|
||||
<div class="spin-container">
|
||||
|
||||
<div class="shape">
|
||||
|
||||
<div class="bd"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://boka.vbytes.se/boka" target="_blank" class='glowing-btn'><span class='glowing-txt'>Låna spel</span></a>
|
||||
</div>
|
||||
<SpinnerImage />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<label>
|
||||
<input type="radio" checked={checked == value}
|
||||
onChange={() => (setter(value), setData('participating_type', value))} />
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
const RadioMember = ({label, value, checked, setter}) => {
|
||||
return (
|
||||
<label>
|
||||
<input type="radio" checked={checked == value}
|
||||
onChange={() => (setter(value), setData('member', value))} />
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const submit = (e) => {
|
||||
e.preventDefault()
|
||||
post(route('register_participant'), {
|
||||
onFinish: () => reset(),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="LanForm" className="LanForm">
|
||||
<h1>
|
||||
vBytes LAN
|
||||
</h1>
|
||||
{ ! showForm && <Timer />}
|
||||
{showForm &&
|
||||
<form onSubmit={submit}>
|
||||
<p>Ä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</p>
|
||||
<div className="field">
|
||||
<label className="label">Är du medlem i vBytes?</label>
|
||||
<div className="control">
|
||||
<RadioMember label="Ja" value="0" checked={member} setter={setMember} />
|
||||
<RadioMember label="Nej" value="1" checked={member} setter={setMember} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Deltagarens förnamn</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
required
|
||||
className="input"
|
||||
type="text"
|
||||
name="first_name"
|
||||
value={data.first_name}
|
||||
//placeholder="Förnamn"
|
||||
onChange={(e) => setData('first_name', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Deltagarens efternamn</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
required
|
||||
className="input"
|
||||
type="text"
|
||||
name="surname"
|
||||
value={data.surname}
|
||||
//placeholder="Namn"
|
||||
onChange={(e) => setData('surname', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Jag går i klass:</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
required
|
||||
className="input"
|
||||
type="text"
|
||||
name="grade"
|
||||
value={data.grade}
|
||||
//placeholder="Namn"
|
||||
onChange={(e) => setData('grade', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Mobilnummer deltagare</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
className="input"
|
||||
type="text"
|
||||
name="phone"
|
||||
value={data.phone}
|
||||
//placeholder="Namn"
|
||||
onChange={(e) => setData('phone', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">E-post deltagare</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
className="input"
|
||||
type="text"
|
||||
name="email"
|
||||
value={data.email}
|
||||
//placeholder="Namn"
|
||||
onChange={(e) => setData('email', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Vårnadshavares namn</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
required
|
||||
className="input"
|
||||
type="text"
|
||||
name="guardian_name"
|
||||
value={data.guardian_name}
|
||||
//placeholder="Namn"
|
||||
onChange={(e) => setData('guardian_name', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Vårnadshavares epost</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
required
|
||||
className="input"
|
||||
type="text"
|
||||
name="guardian_email"
|
||||
value={data.guardian_email}
|
||||
//placeholder="Namn"
|
||||
onChange={(e) => setData('guardian_email', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Vårnadshavares telefonnummer</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
required
|
||||
className="input"
|
||||
type="text"
|
||||
name="guardian_phone"
|
||||
value={data.guardian_phone}
|
||||
//placeholder="Namn"
|
||||
onChange={(e) => setData('guardian_phone', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label className="label">LAN-plats eller besöksplats</label>
|
||||
<div className="control">
|
||||
<RadioInput label="LAN" value="lan" checked={type} setter={setType} />
|
||||
<RadioInput label="Besök" value="besök" checked={type} setter={setType} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Kompisar</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
className="input"
|
||||
type="text"
|
||||
name="friends"
|
||||
value={data.friends}
|
||||
//placeholder="Namn"
|
||||
onChange={(e) => setData('friends', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Specialkost</label>
|
||||
<div className="control">
|
||||
<TextInput
|
||||
className="input"
|
||||
type="text"
|
||||
name="special_diet"
|
||||
value={data.special_diet}
|
||||
//placeholder="Namn"
|
||||
onChange={(e) => setData('special_diet', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<div className="control">
|
||||
<label className="checkbox">
|
||||
<Checkbox
|
||||
required
|
||||
type="checkbox"
|
||||
name="gdpr"
|
||||
checked={data.gdpr}
|
||||
onChange={(e) =>
|
||||
setData(
|
||||
'gdpr',
|
||||
(e.target.checked || false),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span> GDPR</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<div className="control">
|
||||
<label className="checkbox">
|
||||
<Checkbox type="checkbox" required/>
|
||||
<span> Jag accepterar reglerna.</span>
|
||||
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field is-grouped btn">
|
||||
<span class="btn__inner">
|
||||
<span class="btn__label" data-label="Anmäl" data-hover="Go for it 🚀">
|
||||
<span class="btn__label__background"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="btn__background"></span>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LanForm;
|
||||
|
||||
|
|
@ -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 (
|
||||
<section id="MemberSection" className="MemberSection">
|
||||
<div id="memberGlow" className="glow" style={{opacity: opacity}}></div>
|
||||
<div className="FlexContainer">
|
||||
<div class="image-box">
|
||||
<div class="box">
|
||||
<div class="spin-container">
|
||||
<div class="shape">
|
||||
<div class="bd"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='BigDiv'>
|
||||
<section id="member" className="member-section">
|
||||
<div id="member-glow" className="glow" style={{opacity: opacity}}></div>
|
||||
<div className="member-section__container">
|
||||
<SpinnerImage />
|
||||
<div className='member-section__text-box'>
|
||||
<h2>Bli medlem</h2>
|
||||
<p>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
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<nav>
|
||||
<div className='navContainer'>
|
||||
<div className='SocialMedia'>
|
||||
<a href='https://discord.gg/meEYUcmR'><img src={Discord} alt=""/></a>
|
||||
<a href='https://www.facebook.com/groups/vbytes/'><img src={Facebook} alt=""/></a>
|
||||
<a href='mailto:styrelsen@vbytes.se'><img src={Mail} alt=""/></a>
|
||||
</div>
|
||||
<a href='/'><img className={ scrollPosition < 500 ? "hidden AppLogo" : "visible AppLogo"} src={Logo} id="AppLogo" alt="logo" /></a>
|
||||
<div className="navbar-container">
|
||||
<div onClick={toggleNavbar} className={`hamburger ${isOpen ? 'open' : ''}`}>
|
||||
<div class="line-menu half start"></div>
|
||||
<div class="line-menu"></div>
|
||||
<div class="line-menu half end"></div>
|
||||
return (
|
||||
<nav className='nav'>
|
||||
<div className='nav__container'>
|
||||
<div className='nav__social-media'>
|
||||
<a href='https://discord.gg/BGfqPQXT'><img src={Discord} alt=""/></a>
|
||||
<a href='https://www.facebook.com/groups/vbytes/'><img src={Facebook} alt=""/></a>
|
||||
<a href='mailto:styrelsen@vbytes.se'><img src={Mail} alt=""/></a>
|
||||
</div>
|
||||
<a href='/'><img className={ scrollPosition < 500 ? "hidden AppLogo" : "visible AppLogo"} src={Logo} id="AppLogo" alt="logo" /></a>
|
||||
<div className="nav__menu-container">
|
||||
<div onClick={toggleNavbar} className={`hamburger ${isOpen ? 'open' : ''}`}>
|
||||
<div class="line-menu half start"></div>
|
||||
<div class="line-menu"></div>
|
||||
<div class="line-menu half end"></div>
|
||||
</div>
|
||||
<ul className={`navbar navbar-mobile ${isOpen ? 'opened' : 'closed'}`}>
|
||||
<li><a href="/#about">Om vBytes</a></li>
|
||||
<li><a href="/#member">Bli medlem</a></li>
|
||||
<li><a href="/#inventory">Låna spel</a></li>
|
||||
<li><a href="/#contact">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul className={`navbar navbar-mobile ${isOpen ? 'opened' : 'closed'}`}>
|
||||
<li><a href="/#about-section">Om vBytes</a></li>
|
||||
<li><a href="/#MemberSection">Bli medlem</a></li>
|
||||
<li><a href="/#InventorySection">Låna spel</a></li>
|
||||
<li><a href="/#Contact">Kontakta</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
79
src/blocks/PartnersSection.jsx
Normal file
79
src/blocks/PartnersSection.jsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
const PartnersSection = () => {
|
||||
|
||||
return (
|
||||
<section id="partner" className="partners-section">
|
||||
<h2>Våra samarbetpartners</h2>
|
||||
<p className='partners-section__subtext'>Utan sponsorer och aktivt stöd hade inte vår verksamhet kunna genomföras. Stort tack till föjande samarbetspartners:</p>
|
||||
<div className="glowing-box glowing-box--partners">
|
||||
<ul>
|
||||
<li>Baker Tilly Borås AB</li>
|
||||
|
||||
<li>Bocotex AB</li>
|
||||
|
||||
<li>Borås Stad Lokala Utvecklingsfond</li>
|
||||
|
||||
<li>Borås Stad Lokalförsörjningskontoret</li>
|
||||
|
||||
<li>Borås Stad Viskafors Fritidsgård</li>
|
||||
|
||||
<li>Borås Stad Viskaforsskolan</li>
|
||||
|
||||
<li>Borås Stad Viskastrandsgymnasiet</li>
|
||||
|
||||
<li>Borås Stad Viskafors bibliotek</li>
|
||||
|
||||
<li>Borås Stad Viskaforshem AB</li>
|
||||
|
||||
<li>Centiro</li>
|
||||
|
||||
<li>Flyttbilen</li>
|
||||
|
||||
<li>Georg Anderssons Golv</li>
|
||||
|
||||
<li>Hjärligt</li>
|
||||
|
||||
<li>Holgers Byggvaror</li>
|
||||
|
||||
<li>Instans systems</li>
|
||||
|
||||
<li>Kjell & Company</li>
|
||||
|
||||
<li>Kodstugan</li>
|
||||
|
||||
<li>LEADER Sjuhärad</li>
|
||||
|
||||
<li>Maskinhjälp</li>
|
||||
|
||||
<li>Mediateknik</li>
|
||||
|
||||
<li>Navet</li>
|
||||
|
||||
<li>Postkodslotteriet</li>
|
||||
|
||||
<li>Quality Think AB</li>
|
||||
|
||||
<li>Renta</li>
|
||||
|
||||
<li>Sliarbanksstiftelsen Sjuhärad</li>
|
||||
|
||||
<li>SumNerv</li>
|
||||
|
||||
<li>Svenska Magic</li>
|
||||
|
||||
<li>Tech-arenan</li>
|
||||
|
||||
<li>Tempo Viskafors</li>
|
||||
|
||||
<li>Tobex AB</li>
|
||||
|
||||
<li>Tore G Wärenstams stiftelse</li>
|
||||
|
||||
<li>Viskaforsbygdens ortsråd</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default PartnersSection;
|
||||
|
||||
|
|
@ -3,13 +3,13 @@ import Logo from "../assets/img/vbytes-logo.png";
|
|||
const StartSection = ({opacity}) => {
|
||||
|
||||
return (
|
||||
<section id="StartSection" className="StartSection">
|
||||
<img src={Logo} id="AppLogo" className="AppLogo" alt="logo" />
|
||||
<section id="start" className="start-section">
|
||||
<img src={Logo} id="logo" className="logo" alt="logo" />
|
||||
<p>
|
||||
ViskaforsBygdens Teknik-, Elektronik- och Spelförening
|
||||
</p>
|
||||
|
||||
<a href="#AboutSection" className="arrow" style={{opacity: opacity}}>
|
||||
<a href="#about" className="arrow" style={{opacity: opacity}}>
|
||||
<div class="chevron"></div>
|
||||
<div class="chevron"></div>
|
||||
<div class="chevron"></div>
|
||||
|
|
|
|||
16
src/components/SpinnerImage.jsx
Normal file
16
src/components/SpinnerImage.jsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
const SpinnerImage = () => {
|
||||
|
||||
return (
|
||||
<div className="image-box">
|
||||
<div className="box">
|
||||
<div className="spin-container">
|
||||
<div className="shape">
|
||||
<div className="bd"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SpinnerImage
|
||||
|
|
@ -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)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
85
src/css/_base.scss
Normal file
85
src/css/_base.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
23
src/css/_typography.scss
Normal file
23
src/css/_typography.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
64
src/css/blocks/_footer.scss
Normal file
64
src/css/blocks/_footer.scss
Normal file
|
|
@ -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%);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
62
src/css/blocks/_member-section.scss
Normal file
62
src/css/blocks/_member-section.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
59
src/css/blocks/_partners-section.scss
Normal file
59
src/css/blocks/_partners-section.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
138
src/css/blocks/_start-section.scss
Normal file
138
src/css/blocks/_start-section.scss
Normal file
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -15,6 +15,10 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
max-width: 1440px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.glow {
|
||||
88
src/css/components/_spinner-image.scss
Normal file
88
src/css/components/_spinner-image.scss
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
0
src/helpers/functions.jsx
Normal file
0
src/helpers/functions.jsx
Normal file
Loading…
Reference in a new issue