Further redesign and refactoring

This commit is contained in:
cami 2021-06-07 05:03:18 +02:00
parent 49106ea1b6
commit 67575be960
7 changed files with 43 additions and 21 deletions

View file

@ -7,7 +7,8 @@
:root {
--primary: rgb(41, 63, 87);
--secondary: #fff
--secondary: #fff;
--third: rgb(171, 183, 183);
}
.home,

View file

@ -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>
</>

View file

@ -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>

View file

@ -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;
}

View file

@ -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>
);

View file

@ -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;
}
}

View 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 />
</>
);
}