Further redesign and refactoring
This commit is contained in:
parent
49106ea1b6
commit
67575be960
7 changed files with 43 additions and 21 deletions
|
@ -7,7 +7,8 @@
|
|||
|
||||
:root {
|
||||
--primary: rgb(41, 63, 87);
|
||||
--secondary: #fff
|
||||
--secondary: #fff;
|
||||
--third: rgb(171, 183, 183);
|
||||
}
|
||||
|
||||
.home,
|
||||
|
|
|
@ -6,6 +6,7 @@ import Home from "./components/pages/Home";
|
|||
import SignUp from "./components/pages/SignUp";
|
||||
import Ueber from "./components/pages/Ueber";
|
||||
import Lizenzen from "./components/pages/lizenzen";
|
||||
import Privacy from "./components/pages/Privacy";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
|
@ -17,6 +18,7 @@ function App() {
|
|||
<Route path="/services" component={Ueber} />
|
||||
<Route path="/sign-up" component={SignUp} />
|
||||
<Route path="/lizenzen" component={Lizenzen} />
|
||||
<Route path="/privacy" component={Privacy} />
|
||||
</Switch>
|
||||
</Router>
|
||||
</>
|
||||
|
|
|
@ -22,7 +22,7 @@ function Footer() {
|
|||
<div className="footer-link-wrapper">
|
||||
<div className="footer-link-items">
|
||||
<h2>Rechtliches</h2>
|
||||
<Link to="/">Datenschutz</Link>
|
||||
<Link to="/privacy">Datenschutz</Link>
|
||||
<Link to="/lizenzen">Lizenzen und Bildnachweise</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -26,7 +26,7 @@ video {
|
|||
|
||||
.hero-container > p {
|
||||
margin-top: 8px;
|
||||
color: #fff;
|
||||
color: var(--secondary);
|
||||
font-size: 32px;
|
||||
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
|
||||
"Lucida Sans", Arial, sans-serif;
|
||||
|
@ -44,6 +44,13 @@ video {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-btns .btn:hover{
|
||||
background-color: var(--secondary);
|
||||
color: var(--primary);
|
||||
border:none;
|
||||
}
|
||||
|
||||
|
||||
.fa-play-circle {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
|
|
@ -9,13 +9,6 @@ function HeroSection() {
|
|||
<div className="hero-container">
|
||||
<h1>Herzlich Willkommen</h1>
|
||||
<div className="hero-btns">
|
||||
<Button
|
||||
className="btns"
|
||||
buttonStyle="btn--primary"
|
||||
buttonSize="btn--large"
|
||||
>
|
||||
Anleitung
|
||||
</Button>
|
||||
<Button
|
||||
className="btns"
|
||||
buttonStyle="btn--primary"
|
||||
|
@ -30,6 +23,13 @@ function HeroSection() {
|
|||
>
|
||||
Registrieren (falls du das erste Mal hier bist)
|
||||
</Button>
|
||||
<Button
|
||||
className="btns"
|
||||
buttonStyle="btn--primary"
|
||||
buttonSize="btn--large"
|
||||
>
|
||||
Anleitung
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.navbar {
|
||||
background: linear-gradient(90deg, rgb(41, 63, 87) 0%, rgb(41, 63, 87) 100%);
|
||||
background-color: var(--primary);
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.navbar-logo {
|
||||
color: #fff;
|
||||
color: var(--secondary);
|
||||
justify-self: start;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
.nav-links {
|
||||
color: #fff;
|
||||
color: var(--secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
@ -59,12 +59,12 @@
|
|||
}
|
||||
|
||||
.nav-links:hover {
|
||||
border-bottom: 4px solid #fff;
|
||||
border-bottom: 4px solid var(--secondary);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
color: #fff;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.nav-links-mobile {
|
||||
|
@ -93,7 +93,7 @@
|
|||
}
|
||||
|
||||
.nav-menu.active {
|
||||
background: #abb7b7;
|
||||
background: var(--primary);
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease;
|
||||
|
@ -108,7 +108,7 @@
|
|||
}
|
||||
|
||||
.nav-links:hover {
|
||||
background-color: #fff;
|
||||
background-color: var(--secondary);
|
||||
color: #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
@ -131,7 +131,7 @@
|
|||
}
|
||||
|
||||
.fa-times {
|
||||
color: #fff;
|
||||
color: var(--secondary);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
@ -144,15 +144,15 @@
|
|||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
color: var(--primary);
|
||||
padding: 14px 20px;
|
||||
border: 1px solid #fff;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.nav-links-mobile:hover {
|
||||
background: #fff;
|
||||
color: #6c7a89;
|
||||
background: var(--primary);
|
||||
color: var(--secondary);
|
||||
transition: 250ms;
|
||||
}
|
||||
}
|
||||
|
|
12
frontend/src/components/pages/Privacy.js
Normal file
12
frontend/src/components/pages/Privacy.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
import React from "react";
|
||||
import "../../App.css";
|
||||
import Footer from "../../Footer";
|
||||
|
||||
export default function SignUp() {
|
||||
return (
|
||||
<>
|
||||
<h1 className="sign-up">SIGN UP</h1>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
Reference in a new issue