refactor/frontend-design #13

Merged
cami merged 2 commits from refactor/frontend-design into main 2021-06-07 03:04:24 +00:00
15 changed files with 1926 additions and 52 deletions

File diff suppressed because it is too large Load diff

View file

@ -4,9 +4,11 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-free": "^5.15.3",
"@react-hook/mouse-position": "^4.1.0",
"@testing-library/jest-dom": "^5.12.0", "@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6", "@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
"npm": "^7.16.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",

View file

@ -5,6 +5,12 @@
font-family: "PT Sans", sans-serif; font-family: "PT Sans", sans-serif;
} }
:root {
--primary: rgb(41, 63, 87);
--secondary: #fff;
--third: rgb(171, 183, 183);
}
.home, .home,
.about, .about,
.products, .products,
@ -28,7 +34,7 @@
background-position: center; background-position: center;
background-size: fill; background-size: fill;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #fff; color: var(--primary);
font-size: 100px; font-size: 100px;
} }

View file

@ -3,9 +3,10 @@ import Navbar from "./components/Navbar";
import "./App.css"; import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/pages/Home"; import Home from "./components/pages/Home";
import Products from "./components/pages/Products";
import SignUp from "./components/pages/SignUp"; import SignUp from "./components/pages/SignUp";
import Ueber from "./components/pages/Ueber"; import Ueber from "./components/pages/Ueber";
import Lizenzen from "./components/pages/lizenzen";
import Privacy from "./components/pages/Privacy";
function App() { function App() {
return ( return (
@ -15,8 +16,9 @@ function App() {
<Switch> <Switch>
<Route path="/" exact component={Home} /> <Route path="/" exact component={Home} />
<Route path="/services" component={Ueber} /> <Route path="/services" component={Ueber} />
<Route path="/products" component={Products} />
<Route path="/sign-up" component={SignUp} /> <Route path="/sign-up" component={SignUp} />
<Route path="/lizenzen" component={Lizenzen} />
<Route path="/privacy" component={Privacy} />
</Switch> </Switch>
</Router> </Router>
</> </>

View file

@ -1,5 +1,5 @@
.footer-container { .footer-container {
background-color: #6C7A89; background-color: rgb(41, 63, 87);
padding: 4rem 0 2rem 0; padding: 4rem 0 2rem 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View file

@ -15,15 +15,15 @@ function Footer() {
</div> </div>
<div className="footer-link-items"> <div className="footer-link-items">
<h2>Kontakt</h2> <h2>Kontakt</h2>
<Link to="/">Matrix</Link> <a href="mailto:marco.camenzind@students.ffhs.ch">E-Mail</a>
<Link to="/">E-Mail</Link> <a href="https://keys.openpgp.org/vks/v1/by-fingerprint/F281A7A622AF5B9E7742C0FB635DE2A22BDC3C76">GPG-Key</a>
<Link to="/">Mastodon</Link>
</div> </div>
</div> </div>
<div className="footer-link-wrapper"> <div className="footer-link-wrapper">
<div className="footer-link-items"> <div className="footer-link-items">
<h2>Rechtliches</h2> <h2>Rechtliches</h2>
<Link to="/">Datenschutz</Link> <Link to="/privacy">Datenschutz</Link>
<Link to="/lizenzen">Lizenzen und Bildnachweise</Link>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,7 +1,3 @@
:root {
--primary: #fff;
}
.btn { .btn {
padding: 8px 20px; padding: 8px 20px;
border-radius: 2px; border-radius: 2px;
@ -12,13 +8,13 @@
.btn--primary { .btn--primary {
background-color: var(--primary); background-color: var(--primary);
color: #BDC3C7; color: var(--secondary);
border: 1px solid var(--primary); border: 1px solid var(--primary);
} }
.btn--outline { .btn--outline {
background-color: transparent; background-color: transparent;
color: #fff; color: var(--primary);
padding: 8px 20px; padding: 8px 20px;
border: 1px solid var(--primary); border: 1px solid var(--primary);
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
@ -37,7 +33,7 @@
.btn--large:hover, .btn--large:hover,
.btn--medium:hover { .btn--medium:hover {
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
background: #fff; background: var(--primary);
color: #BDC3C7; color: var(--secondary);
transition: 250ms; transition: 250ms;
} }

View file

@ -7,7 +7,7 @@ video {
} }
.hero-container { .hero-container {
background: url("../images/img-home.jpg") center center/cover no-repeat; background: url("../images/fingerprint_biometrics.jpg") center center/cover no-repeat;
height: 100vh; height: 100vh;
width: 100%; width: 100%;
display: flex; display: flex;
@ -19,14 +19,14 @@ video {
} }
.hero-container > h1 { .hero-container > h1 {
color: #fff; color: var(--primary);
font-size: 100px; font-size: 100px;
margin-top: -100px; margin-top: -100px;
} }
.hero-container > p { .hero-container > p {
margin-top: 8px; margin-top: 8px;
color: #fff; color: var(--secondary);
font-size: 32px; font-size: 32px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif; "Lucida Sans", Arial, sans-serif;
@ -34,12 +34,23 @@ video {
.hero-btns { .hero-btns {
margin-top: 32px; margin-top: 32px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
} }
.hero-btns .btn { .hero-btns .btn {
margin: 6px; margin: 6px;
align-items: center;
} }
.hero-btns .btn:hover{
background-color: var(--secondary);
color: var(--primary);
border:none;
}
.fa-play-circle { .fa-play-circle {
margin-left: 4px; margin-left: 4px;
} }
@ -69,4 +80,4 @@ video {
.btn { .btn {
width: 100%; width: 100%;
} }
} }

View file

@ -11,17 +11,24 @@ function HeroSection() {
<div className="hero-btns"> <div className="hero-btns">
<Button <Button
className="btns" className="btns"
buttonStyle="btn--outline" buttonStyle="btn--primary"
buttonSize="btn--large" buttonSize="btn--large"
> >
GET STARTED Einloggen (wenn du schon einmal mitgemacht hast)
</Button> </Button>
<Button <Button
className="btns" className="btns"
buttonStyle="btn--primary" buttonStyle="btn--primary"
buttonSize="btn--large" buttonSize="btn--large"
> >
WATCH TRAILER <i className="far fa-play-circle" /> Registrieren (falls du das erste Mal hier bist)
</Button>
<Button
className="btns"
buttonStyle="btn--primary"
buttonSize="btn--large"
>
Anleitung
</Button> </Button>
</div> </div>
</div> </div>

View file

@ -1,5 +1,5 @@
.navbar { .navbar {
background: linear-gradient(90deg, #6c7a89 0%, #6c7a89 100%); background-color: var(--primary);
height: 80px; height: 80px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -19,7 +19,7 @@
} }
.navbar-logo { .navbar-logo {
color: #fff; color: var(--secondary);
justify-self: start; justify-self: start;
margin-left: 20px; margin-left: 20px;
cursor: pointer; cursor: pointer;
@ -50,7 +50,7 @@
} }
.nav-links { .nav-links {
color: #fff; color: var(--secondary);
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
@ -59,12 +59,12 @@
} }
.nav-links:hover { .nav-links:hover {
border-bottom: 4px solid #fff; border-bottom: 4px solid var(--secondary);
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
} }
.fa-bars { .fa-bars {
color: #fff; color: var(--secondary);
} }
.nav-links-mobile { .nav-links-mobile {
@ -93,7 +93,7 @@
} }
.nav-menu.active { .nav-menu.active {
background: #abb7b7; background: var(--primary);
left: 0; left: 0;
opacity: 1; opacity: 1;
transition: all 0.5s ease; transition: all 0.5s ease;
@ -108,7 +108,7 @@
} }
.nav-links:hover { .nav-links:hover {
background-color: #fff; background-color: var(--secondary);
color: #000; color: #000;
border-radius: 0; border-radius: 0;
} }
@ -131,7 +131,7 @@
} }
.fa-times { .fa-times {
color: #fff; color: var(--secondary);
font-size: 2rem; font-size: 2rem;
} }
@ -144,15 +144,15 @@
text-decoration: none; text-decoration: none;
font-size: 1.5rem; font-size: 1.5rem;
background-color: transparent; background-color: transparent;
color: #fff; color: var(--primary);
padding: 14px 20px; padding: 14px 20px;
border: 1px solid #fff; border: 1px solid #fff;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.nav-links-mobile:hover { .nav-links-mobile:hover {
background: #fff; background: var(--primary);
color: #6c7a89; color: var(--secondary);
transition: 250ms; transition: 250ms;
} }
} }

View file

@ -8,7 +8,6 @@ function Home() {
return ( return (
<> <>
<HeroSection /> <HeroSection />
<Cards />
<Footer /> <Footer />
</> </>
); );

View file

@ -2,11 +2,11 @@ import React from "react";
import "../../App.css"; import "../../App.css";
import Footer from "../../Footer"; import Footer from "../../Footer";
export default function Products() { export default function SignUp() {
return ( return (
<> <>
<h1 className="products">PRODUCTS</h1> <h1 className="sign-up">SIGN UP</h1>
<Footer /> <Footer />
</> </>
); );
} }

View file

@ -0,0 +1,24 @@
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Lizenzen() {
return (
<>
<h1 className="pages_title">Lizenzen und Bildnachweise</h1>
<h2 className="pages_subtitle">Öffentliche Libraries</h2>
<h2>Bildnachweise</h2>
<div>
<ul>
<li>
Originalbild für die Startseite:{" "}
<a href="https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/">
https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/
</a>
</li>
</ul>
</div>
<Footer />
</>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

View file

@ -1,2 +1,3 @@
podman-compose down podman-compose down
podman-compose build
podman-compose up podman-compose up